/*
Theme Name: OPTEOM
Theme URI: https://opteom.com
Author: OPTEOM Team
Author URI: https://opteom.com
Description: Premium Refrigerant Gas Manufacturing & Distribution Theme. Fully compatible with Elementor, Elementor Free, and other popular page builders. Built from the OPTEOM HTML template with optimized, filtered assets.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: opteom
Tags: one-column, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template, editor-style, block-patterns, wide-blocks, accessibility-ready

== Elementor Compatibility ==
This theme is fully compatible with:
- Elementor Free
- Elementor Pro
- Beaver Builder
- Divi Builder
- WPBakery Page Builder
- Gutenberg (Block Editor)

All theme assets are loaded only on the frontend and do NOT interfere with page builder editors.
*/

/* ============================================
   OPTEOM THEME - WORDPRESS BASE STYLES
   Custom styles are in assets/css/style.css
   ============================================ */

/* WordPress Core Alignment Classes */
.alignleft {
  float: left;
  margin: 0 1.5em 1.5em 0;
}
.alignright {
  float: right;
  margin: 0 0 1.5em 1.5em;
}
.aligncenter {
  display: block;
  margin: 0 auto 1.5em;
}
.alignwide {
  margin-left: -40px;
  margin-right: -40px;
}
.alignfull {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
  max-width: 100vw;
}

/* WordPress Caption */
.wp-caption {
  max-width: 100%;
}
.wp-caption-text {
  font-size: 13px;
  color: #666;
  text-align: center;
  padding: 4px 0;
}

/* WordPress Gallery */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* WordPress Sticky Post */
.sticky {
  position: relative;
}

/* Screen reader text */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}

/* Page builder canvas */

/* =============================================================
   HEADER — fixed position for all pages
   ============================================================= */
.header-area,
header.inner-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

/* =============================================================
   HOMEPAGE — default (transparent, white text)
   ============================================================= */
.header-area .engineering-header {
  background: transparent;
}

/* Default: show white logo, hide dark logo */
.header-area .engineering-header .logo-white {
  display: block;
}
.header-area .engineering-header .logo-dark {
  display: none;
}

/* Default: white nav links */
.header-area .engineering-header .menu-list > li > a {
  color: #fff;
}

/* Default: white contact text */
.header-area .engineering-header .nav-right .contact-area .content span,
.header-area .engineering-header .nav-right .contact-area .content a,
.header-area .engineering-header .right-sidebar-button span {
  color: #fff;
}

/* Default: white SVG fills */
.header-area .engineering-header .nav-right svg path,
.header-area .engineering-header .right-sidebar-button svg rect {
  fill: #fff;
}

/* =============================================================
   HOMEPAGE STICKY  +  INNER PAGE
   — identical appearance: white bg, dark logo, primary-color5 text
   ============================================================= */

/* White bg + shadow */
.header-area.sticky,
header.inner-page {
  background: #fff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
}

/* Hide topbar when sticky */
.header-area.sticky .topbar-area {
  display: none !important;
}

/* Show dark logo on inner pages only */
header.inner-page .logo-white {
  display: none;
}
header.inner-page .logo-dark {
  display: block;
}

/* Homepage sticky — keep white logo, hide dark logo */
.header-area.sticky .engineering-header .logo-white {
  display: block;
}
.header-area.sticky .engineering-header .logo-dark {
  display: none;
}

/* Contact text → primary-color5 */
.header-area.sticky .engineering-header .nav-right .contact-area .content,
.header-area.sticky .engineering-header .nav-right .contact-area .content,
.header-area.sticky .engineering-header .right-sidebar-button span,
header.inner-page .nav-right .contact-area .content span,
header.inner-page .nav-right .contact-area .content a,
header.inner-page .right-sidebar-button span {
  color: var(--primary-color5);
}

/* SVG icons → primary-color5 */
.header-area.sticky .engineering-header .nav-right svg path,
.header-area.sticky .engineering-header .right-sidebar-button svg rect,
header.inner-page .nav-right svg path,
header.inner-page .right-sidebar-button svg rect {
  fill: #fff;
}

/* =============================================================
   BODY OFFSET — prevent content hiding under fixed header
   ============================================================= */
body:not(.home) .breadcrumb-section {
  padding-top: 80px;
}

/* =============================================================
   BANNER PIPE IMAGE ANIMATION
   ============================================================= */
.banner-pipe-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  animation:
    pipeReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.25s,
    pipeFloat 6s ease-in-out infinite 1.2s;
  opacity: 0;
}

.banner-pipe-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 20px;
  position: relative;
  z-index: 1;
}

/* Glowing border pulse */
.banner-pipe-img::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  animation: glowBorder 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* Shimmer sweep */
.banner-pipe-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: shimmerSweep 4s ease-in-out infinite 1.2s;
  pointer-events: none;
  z-index: 3;
}

@keyframes pipeReveal {
  from {
    opacity: 0;
    transform: translateY(36px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pipeFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(0.4deg);
  }
  66% {
    transform: translateY(-5px) rotate(-0.3deg);
  }
}

@keyframes glowBorder {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes shimmerSweep {
  0% {
    left: -100%;
  }
  55% {
    left: 140%;
  }
  100% {
    left: 140%;
  }
}

@media (max-width: 991px) {
  .banner-pipe-img,
  .banner-pipe-img::before {
    border-radius: 16px;
  }
}

@media (max-width: 575px) {
  .banner-pipe-img,
  .banner-pipe-img::before {
    border-radius: 12px;
  }
}

header.style-1 .main-menu > ul > li:hover > a {
  background-color: var(--primary-color5);
  color: var(--white-color);
}

header.style-1 .nav-right .right-sidebar-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 13px 20px;
  background-color: var(--primary-color5);
  border-radius: 5px;
}

header.style-1 .nav-right::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 18px;
  background-color: var(--primary-color5);
}

.inner-contact-section .contact-content .contact-list .single-contact .icon svg {
  fill: var(--primary-color5);
}

.section-title > span {
  color: var(--primary-color5);
  font-family: var(--font-dmsans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
  position: relative;
}

.section-title.two span {
  color: var(--primary-color5);
  font-size: 12px;
  padding: 10px 17px;
  background-color: rgba(var(--black-color-opc), 0.05);
}

.section-title > span::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -41px;
  width: 35px;
  height: 1px;
  background-color: var(--primary-color5);
}

.inner-contact-section .section-title span svg {
  fill: var(--primary-color5);
}

.right-sidebar-menu .sidebar-content-wrap .all-location-btn {
  color: var(--primary-color5);
  font-family: var(--font-manrope);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: underline;
  margin-top: 30px;
  display: inline-block;
  transition: 0.5s;
}

.right-sidebar-menu .sidebar-bottom-area p a {
  color: var(--primary-color5);
  font-weight: 600;
  transition: 0.5s;
}

.right-sidebar-menu .sidebar-content-wrap .title-area span::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -41px;
  width: 35px;
  height: 1px;
  background-color: var(--primary-color5);
}