/**
 * RARA PHARMATECH — 2026 Industrial UI Stylesheet
 * ════════════════════════════════════════════════════
 * This is the MAIN custom CSS file loaded on the frontend.
 * Astra does NOT load style.css for styling — so all overrides go HERE.
 */

@import url("rp-features.css");

/* ═══════════════════════════════════════════════════════════════════════════
   A. HEADER BACKGROUND RESET — Kill Astra's default backgrounds
   ═══════════════════════════════════════════════════════════════════════════ */
header.site-header,
#masthead,
.ast-above-header-wrap,
.ast-above-header,
.ast-below-header-wrap,
.ast-below-header,
.main-header-bar-navigation,
.ast-main-header-bar-alignment,
.ast-primary-menu-navigation,
#primary-site-navigation,
.main-header-menu,
.ast-nav-menu,
.ast-menu-shadow,
#ast-hf-menu-1,
.ast-flex.main-header-bar-navigation,
.ast-justify-content-flex-end,
.ast-builder-menu,
.ast-builder-layout-element,
.ast-builder-grid-row,
.ast-header-sections-navigation,
.site-primary-header-wrap,
.ast-primary-header,
.ast-primary-header-bar .site-primary-header-wrap,
header.site-header .ast-main-header-bar-alignment,
#masthead .ast-main-header-bar-alignment,
.main-header-bar .ast-main-header-bar-alignment,
.main-header-bar .main-header-bar-navigation,
.ast-primary-header-bar .ast-main-header-bar-alignment,
.main-header-bar nav,
.main-header-bar > .ast-container,
.main-header-bar > .ast-container > .ast-flex,
.main-header-menu > .menu-item,
#ast-hf-menu-1 > .menu-item {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   B. CLEAN FULL-WIDTH HEADER BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.main-header-bar,
#masthead .main-header-bar,
.ast-primary-header-bar,
header.site-header .main-header-bar,
.main-header-bar.ast-header-bar,
.site-header .main-header-bar,
.ast-primary-header .ast-builder-layout-element {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: none !important;
  border-bottom: 2px solid #e0f2f1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
  padding: 0 !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Remove any ::after pseudo-element from header */
.main-header-bar::after,
#masthead .main-header-bar::after,
.ast-primary-header-bar::after {
  content: none !important;
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   C. STICKY / SCROLLED STATE
   ═══════════════════════════════════════════════════════════════════════════ */
.ast-header-sticky-active .main-header-bar,
.ast-header-stacked .main-header-bar.ast-sticky-active,
#masthead.ast-sticky-active .main-header-bar,
.site-header .main-header-bar.ast-sticky-active,
.ast-sticky-active .main-header-bar,
.main-header-bar.rp-scrolled {
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  border-bottom: 2px solid #b2dfdb !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   D. NAVIGATION LINKS — Clean, professional style
   ═══════════════════════════════════════════════════════════════════════════ */
.main-header-menu > .menu-item > a,
.ast-nav-menu > .menu-item > .menu-link,
.main-header-menu .menu-link,
.ast-header-sections-navigation .menu-link,
.ast-builder-menu .menu-link,
.ast-builder-menu .menu-item > .menu-link,
#ast-hf-menu-1 > .menu-item > .menu-link,
.ast-builder-layout-element .menu-link {
  font-family: "Playfair Display", "Cinzel", "Lora", "Merriweather", "Georgia", serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #4A8E7A !important;
  position: relative !important;
  padding: 30px 0px !important; /* Top/bottom padding increased to expand clickable area vertically. L/R is 0 for exact text width */
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  transition: color 0.25s ease !important;
}

/* Underline on hover */
.main-header-menu > .menu-item > a::after,
.ast-nav-menu > .menu-item > .menu-link::after,
.ast-builder-menu .menu-item > .menu-link::after,
#ast-hf-menu-1 > .menu-item > .menu-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: #4A8E7A !important;
  border-radius: 2px !important;
  transform: translateX(-50%) !important;
  transition: width 0.3s ease !important;
  box-shadow: none !important;
}

/* Hover — teal */
.main-header-menu > .menu-item > a:hover,
.ast-nav-menu > .menu-item > .menu-link:hover,
.ast-builder-menu .menu-item > .menu-link:hover,
#ast-hf-menu-1 > .menu-item > .menu-link:hover {
  color: #4A8E7A !important;
  background: transparent !important;
  transform: none !important;
}

.main-header-menu > .menu-item > a:hover::after,
.ast-nav-menu > .menu-item > .menu-link:hover::after,
.ast-builder-menu .menu-item > .menu-link:hover::after,
#ast-hf-menu-1 > .menu-item > .menu-link:hover::after,
.main-header-menu > .menu-item.current-menu-item > a::after,
.ast-nav-menu > .menu-item.current-menu-item > .menu-link::after,
#ast-hf-menu-1 > .menu-item.current-menu-item > .menu-link::after {
  width: 100% !important; /* Underline covers exactly 100% of the text width */
}

/* Active page */
.main-header-menu > .menu-item.current-menu-item > a,
.ast-nav-menu > .menu-item.current-menu-item > .menu-link,
#ast-hf-menu-1 > .menu-item.current-menu-item > .menu-link {
  color: #4A8E7A !important;
  text-shadow: none !important;
  background: transparent !important;
}

/* Custom Plus Dropdown Arrow (Pure CSS to prevent layout jumping) */
.ast-header-navigation-arrow, 
.dropdown-menu-toggle {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  margin-left: 8px !important;
  position: relative !important;
  vertical-align: middle !important;
}

/* Hide Astra's default SVGs and Font Icons entirely */
.ast-header-navigation-arrow > *,
.dropdown-menu-toggle > * {
  display: none !important;
}

/* Create the Plus (+) Lines */
.ast-header-navigation-arrow::before,
.ast-header-navigation-arrow::after,
.dropdown-menu-toggle::before,
.dropdown-menu-toggle::after {
  content: '' !important;
  position: absolute !important;
  background-color: #4A8E7A !important;
  top: 50% !important;
  left: 50% !important;
  transition: transform 0.3s ease !important;
}

/* Horizontal Line */
.ast-header-navigation-arrow::before,
.dropdown-menu-toggle::before {
  width: 12px !important;
  height: 2px !important;
  margin-top: -1px !important;
  margin-left: -6px !important;
}

/* Vertical Line */
.ast-header-navigation-arrow::after,
.dropdown-menu-toggle::after {
  width: 2px !important;
  height: 12px !important;
  margin-top: -6px !important;
  margin-left: -1px !important;
}

/* Hover effect: Rotates the vertical line 90deg down to collapse into a Minus (-) */
.menu-item-has-children:hover > a .ast-header-navigation-arrow::after,
.menu-item-has-children:hover > a .dropdown-menu-toggle::after {
  transform: rotate(90deg) !important;
}

/* Horizontal line gently spins for a combined rotating effect */
.menu-item-has-children:hover > a .ast-header-navigation-arrow::before,
.menu-item-has-children:hover > a .dropdown-menu-toggle::before {
  transform: rotate(180deg) !important;
}

/* Elementor header overrides */
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-element,
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-column,
.elementor-location-header .elementor-widget-wrap,
.elementor-location-header .e-con,
header .elementor-section,
header .elementor-element {
  background-color: transparent !important;
  background-image: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   E. LOGO — Big, clean, like reference site
   ═══════════════════════════════════════════════════════════════════════════ */
.site-branding,
.ast-site-identity {
  position: relative !important;
}

/* Header Logo */
.site-branding img,
img.custom-logo,
.ast-site-identity img,
.site-logo-img img,
.ast-builder-layout-element .ast-header-logo img,
.custom-logo-link img,
.site-logo-img {
  width: auto !important;
  max-width: 380px !important;
  height: auto !important;
  max-height: 100px !important;
  min-height: unset !important;
  padding: 8px 0 !important;
  object-fit: contain !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease !important;
  filter: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Override inline width/height attributes */
.custom-logo[width],
.custom-logo[height],
.site-logo-img img[width],
.site-logo-img img[height] {
  width: auto !important;
  max-width: 380px !important;
  max-height: 100px !important;
  height: auto !important;
}

/* Force Mobile to use standard logo, hide the old responsive version */
.ast-header-break-point .site-logo-img .custom-logo-link {
  display: block !important;
}
.ast-header-break-point .site-logo-img .ast-header-responsive-logo,
.ast-header-responsive-logo {
  display: none !important;
}

/* Footer Logo */
.ast-header-html-widget .ast-builder-html-element img[src*="RARA"],
.ast-header-html-widget .ast-builder-html-element img[src*="rara"],
.ast-builder-html-element img.wp-image-1342,
.site-footer .ast-builder-html-element img[src*="RARA"],
.site-footer .ast-builder-html-element img[src*="rara"] {
  width: 260px !important;
  max-width: 260px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 0 !important;
  filter: none !important;
  transition: transform 0.3s ease !important;
}

/* Responsive: Tablet */
@media (max-width: 921px) {
  .site-branding img,
  img.custom-logo,
  .custom-logo-link img,
  .site-logo-img img {
    width: auto !important;
    max-width: 300px !important;
    max-height: 85px !important;
  }
  .ast-builder-html-element img[src*="RARA"],
  .ast-builder-html-element img[src*="rara"],
  .ast-builder-html-element img.wp-image-1342 {
    width: 200px !important;
    max-width: 200px !important;
  }
}

/* Responsive: Mobile */
@media (max-width: 544px) {
  .site-branding img,
  img.custom-logo,
  .custom-logo-link img,
  .site-logo-img img {
    width: auto !important;
    max-width: 240px !important;
    max-height: 70px !important;
  }
  .ast-builder-html-element img[src*="RARA"],
  .ast-builder-html-element img[src*="rara"],
  .ast-builder-html-element img.wp-image-1342 {
    width: 160px !important;
    max-width: 160px !important;
  }
}

/* Logo Hover */
.site-branding img:hover,
img.custom-logo:hover,
.ast-site-identity img:hover,
.site-logo-img img:hover {
  transform: scale(1.03) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   F. MEGA-MENU (Full-Width Clean Dropdown)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 922px) {
  
  /* Force relative positioning on header wrapper to contain mega menu properly */
  .site-header .main-header-bar,
  .ast-primary-header-bar {
    position: relative !important;
  }

  /* Make menu containers static so the mega-menu is positioned relative to the whole header bar */
  .site-header .main-header-bar-navigation,
  .ast-primary-header-bar .main-header-bar-navigation,
  .main-header-menu,
  .ast-nav-menu,
  .main-header-menu > .menu-item,
  .ast-nav-menu > .menu-item {
    position: static !important;
  }
  
  /* 
   * When hovering the parent with sub-menus, display as a full width flex row
   */
  .main-header-menu .menu-item-has-children:hover > .sub-menu,
  .ast-nav-menu .menu-item-has-children:hover > .sub-menu {
    display: flex !important;
    gap: 30px !important;
    justify-content: center !important;
    padding: 40px 5% !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 2px solid #4A8E7A !important;
    /* Expanding width to full viewport, and centering it back */
    width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(-50%) !important;
    animation: rp-mega-menu-in 0.3s ease-out forwards !important;
  }

  /* Each direct sub-item acts as a column */
  .main-header-menu > .menu-item-has-children > .sub-menu > .menu-item {
    flex: 1 1 0px !important;
    min-width: 180px !important;
    max-width: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Column Titles (e.g. "Clean Room Equipment") */
  .main-header-menu > .menu-item-has-children > .sub-menu > .menu-item > a,
  .main-header-menu > .menu-item-has-children > .sub-menu > .menu-item > .menu-link {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #4A8E7A !important; /* Teal mapping the screenshot */
    padding: 0 0 12px 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 2px solid rgba(74, 142, 122, 0.2) !important;
    display: block !important;
    text-transform: capitalize !important;
    background: transparent !important;
  }
  
  /* Hide Astra default arrows in the nested dropdowns */
  .main-header-menu .sub-menu .ast-header-navigation-arrow,
  .main-header-menu .sub-menu .dropdown-menu-toggle {
    display: none !important;
  }
  
  /* Disable the hover underline for Column Titles */
  .main-header-menu > .menu-item-has-children > .sub-menu > .menu-item > a::after {
    display: none !important;
  }
  
  /* 
   * The deeply nested Sub-menu (List items like Dynamic Pass Box)
   */
  .main-header-menu > .menu-item-has-children > .sub-menu > .menu-item > .sub-menu {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Sub-menu text items */
  .main-header-menu .sub-menu .sub-menu .menu-item > a,
  .main-header-menu .sub-menu .sub-menu .menu-item > .menu-link {
    padding: 8px 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    display: block !important;
    border: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
  }

  /* Sub-menu hover effect (matches screenshot) */
  .main-header-menu .sub-menu .sub-menu .menu-item > a:hover,
  .main-header-menu .sub-menu .sub-menu .menu-item > .menu-link:hover {
    color: #4A8E7A !important;
    padding-left: 6px !important; /* Slight nudge right on hover to make it dynamic */
    background: transparent !important;
  }
}

@keyframes rp-mega-menu-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   G. GLOBAL & DESKTOP HEADER LAYOUT TWEAKS
   ═══════════════════════════════════════════════════════════════════════════ */
/* Keep Logo & Hamburger pushed to opposite sides globally on a single row */
.site-header .ast-main-header-bar-alignment, 
.site-header .ast-builder-grid-row,
.site-header .ast-builder-grid-row-container-inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Eliminate empty vertical spaces above the layout */
#masthead, 
.site-header, 
.ast-mobile-header-wrap,
.ast-primary-header-bar {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

@media (min-width: 922px) {

  /* Ensure the nav container uses available space but pushes correctly */
  .site-header .ast-builder-menu-1,
  .site-header .ast-builder-layout-element[data-section="section-primary-menu"],
  .site-header .main-header-bar-navigation {
    margin-left: auto !important; 
    margin-right: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;
  }

  /* Add proper spacing (Gap) between each option */
  .main-header-menu,
  .ast-nav-menu {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 75px !important; /* SIGNIFICANT SPACING */
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Clean up link padding for desktop */
  .main-header-menu > .menu-item > a,
  .ast-nav-menu > .menu-item > .menu-link {
    padding: 30px 0px !important; 
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   H. MOBILE & TABLET RESPONSIVE MENU
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 921px) {
  
  /* Let Astra handle display toggle on click, but style the container */
  .main-header-menu,
  .ast-nav-menu {
    width: 100% !important;
    background: #ffffff !important;
    border-top: 2px solid #4A8E7A !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    flex-direction: column !important;
  }

  /* Fix hamburger toggle visibility and color (was missing previously) */
  .ast-mobile-menu-buttons .menu-toggle,
  .ast-mobile-menu-buttons .menu-toggle svg,
  .ast-mobile-menu-buttons .menu-toggle svg path,
  .ast-button-wrap .menu-toggle,
  .ast-button-wrap .menu-toggle svg,
  .ast-button-wrap .menu-toggle svg path {
      fill: #4A8E7A !important;
      color: #4A8E7A !important;
  }
  .ast-button-wrap .menu-toggle {
      background: transparent !important;
      border: none !important;
      outline: none !important;
      padding: 10px !important;
      box-shadow: none !important;
  }

  /* Adjust mobile padding and layout for main links */
  .main-header-menu > .menu-item > a,
  .ast-nav-menu > .menu-item > .menu-link {
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(74, 142, 122, 0.1) !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Disable hover underline on mobile because it looks weird on full-width blocks */
  .main-header-menu > .menu-item > a::after,
  .ast-nav-menu > .menu-item > .menu-link::after {
    display: none !important;
  }

  /* Style the inner sub-menu structure for mobile Accordion */
  .main-header-menu .sub-menu,
  .ast-nav-menu .sub-menu {
    background: #fcfcfc !important;
    border-left: 2px solid #4A8E7A !important;
    margin-left: 20px !important;
  }

  /* Sub-menu column titles */
  .main-header-menu > .menu-item-has-children > .sub-menu > .menu-item > a,
  .main-header-menu > .menu-item-has-children > .sub-menu > .menu-item > .menu-link {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #4A8E7A !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.03) !important;
    display: block !important;
  }

  /* Deeply nested items (e.g. Pass Box) */
  .main-header-menu .sub-menu .sub-menu .menu-item > a,
  .ast-nav-menu .sub-menu .sub-menu .menu-item > .menu-link {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    padding: 10px 15px !important;
    border: none !important;
  }

  /* Mobile Toggle Minus state (Astra adds .ast-submenu-expanded class on click) */
  .menu-item-has-children.ast-submenu-expanded > a .ast-header-navigation-arrow::after,
  .menu-item-has-children.ast-submenu-expanded > a .dropdown-menu-toggle::after {
    transform: rotate(90deg) !important;
  }
  .menu-item-has-children.ast-submenu-expanded > a .ast-header-navigation-arrow::before,
  .menu-item-has-children.ast-submenu-expanded > a .dropdown-menu-toggle::before {
    transform: rotate(180deg) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   I. SUPPLEMENTARY MOBILE FIXES (CONSOLE AI SUGGESTIONS)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #masthead {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
  }
  
  .elementor-element-5651c88 {
    margin-top: 0 !important;
  }
  
  .custom-logo-link img {
    max-width: 200px !important;
    height: auto !important;
  }
  
  .ast-main-header-wrap {
    height: auto !important;
  }
  
  .ast-primary-header-bar {
    padding: 10px 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   J. HERO SLIDER — RB Panchal Split-Screen Style
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container ── */
.rp-hero-slider {
  position: relative !important;
  width: 100% !important;
  height: 92vh !important;
  min-height: 640px !important;
  max-height: 900px !important;
  overflow: hidden !important;
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
  z-index: 10 !important;
}

/* ── Each Slide ── */
.rp-slide {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.9s !important;
  z-index: 1 !important;
}

.rp-slide.rp-slide-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s !important;
}

/* ── LEFT: Image Side ── */
.rp-slide-image-side {
  position: relative !important;
  width: 56% !important;
  height: 100% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%) !important;
  z-index: 5 !important;
}

.rp-slide-image-bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: blur(6px) brightness(0.35) !important;
  transform: scale(1.15) !important;
  transition: transform 8s ease-out !important;
}
.rp-slide.rp-slide-active .rp-slide-image-bg {
  transform: scale(1) !important;
}

.rp-slide-image-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    145deg,
    rgba(8, 47, 55, 0.92) 0%,
    rgba(15, 70, 80, 0.85) 40%,
    rgba(20, 90, 100, 0.78) 100%
  ) !important;
  z-index: 2 !important;
}

@keyframes rp-product-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

.rp-slide-product-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px !important;
}

.rp-slide.rp-slide-active .rp-slide-product-img {
  animation: rp-product-float 6s ease-in-out infinite 0.8s !important;
}

.rp-slide-product-img img {
  max-width: 78% !important;
  max-height: 78% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5)) !important;
  opacity: 0 !important;
  transform: scale(0.9) translateY(20px) !important;
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s !important;
}

.rp-slide.rp-slide-active .rp-slide-product-img img {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

/* ── MODERN DIAGONAL SEPARATOR ACCENTS ── */
/* Glowing Teal Edge */
.rp-slide::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 56% !important;
  height: 100% !important;
  background: linear-gradient(180deg, #11A0B2, #087f8f) !important;
  clip-path: polygon(calc(100% - 6px) 0, 100% 0, 80% 100%, calc(80% - 6px) 100%) !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

/* Pure White Inner Highlight */
.rp-slide-curve-separator {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 56% !important;
  height: 100% !important;
  background: #ffffff !important;
  clip-path: polygon(calc(100% - 2px) 0, 100% 0, 80% 100%, calc(80% - 2px) 100%) !important;
  z-index: 7 !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

.rp-slide-curve-separator svg {
  display: none !important;
}

/* ── RIGHT: Content Side ── */
.rp-slide-content-side {
  position: relative !important;
  flex: 1 !important;
  margin-left: -15% !important;
  background: linear-gradient(
    170deg,
    #e8f6f8 0%,
    #dff0f4 35%,
    #d4ecf0 70%,
    #c8e6ec 100%
  ) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 40px 0 10% !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* Hex Pattern Overlay */
@keyframes rp-hex-drift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-140px); }
}
.rp-hex-pattern {
  position: absolute !important;
  inset: -150px 0 !important;
  opacity: 0.05 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background-image:
    linear-gradient(30deg, #3eb8c4 12%, transparent 12.5%, transparent 87%, #3eb8c4 87.5%, #3eb8c4),
    linear-gradient(150deg, #3eb8c4 12%, transparent 12.5%, transparent 87%, #3eb8c4 87.5%, #3eb8c4),
    linear-gradient(30deg, #3eb8c4 12%, transparent 12.5%, transparent 87%, #3eb8c4 87.5%, #3eb8c4),
    linear-gradient(150deg, #3eb8c4 12%, transparent 12.5%, transparent 87%, #3eb8c4 87.5%, #3eb8c4),
    linear-gradient(60deg, #3eb8c477 25%, transparent 25.5%, transparent 75%, #3eb8c477 75%, #3eb8c477),
    linear-gradient(60deg, #3eb8c477 25%, transparent 25.5%, transparent 75%, #3eb8c477 75%, #3eb8c477) !important;
  background-size: 80px 140px !important;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px !important;
  animation: rp-hex-drift 30s linear infinite !important;
}

/* ── Content Inner ── */
.rp-slide-content-inner {
  position: relative !important;
  z-index: 5 !important;
  padding: 60px 40px !important;
  max-width: 700px !important;
  width: 100% !important;
}

.rp-slide-content-inner > * {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.rp-slide.rp-slide-active .rp-slide-content-inner > * {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.rp-slide.rp-slide-active .rp-slide-content-inner .rp-eyebrow { transition-delay: 0.3s !important; }
.rp-slide.rp-slide-active .rp-slide-content-inner .rp-main-title { transition-delay: 0.45s !important; }
.rp-slide.rp-slide-active .rp-slide-content-inner .rp-slide-desc { transition-delay: 0.6s !important; }
.rp-slide.rp-slide-active .rp-slide-content-inner .rp-hero-actions { transition-delay: 0.75s !important; }

/* ── Eyebrow ── */
.rp-eyebrow {
  display: inline-block !important;
  margin-bottom: 16px !important;
  color: #11A0B2 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.28em !important;
  font-weight: 700 !important;
  position: relative !important;
  padding-left: 40px !important;
}

.rp-eyebrow::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 30px !important;
  height: 2px !important;
  background: #11A0B2 !important;
  transform: translateY(-50%) !important;
}

/* ── Title ── */
.rp-main-title {
  font-family: 'Playfair Display', 'Unna', 'Georgia', serif !important;
  font-size: clamp(2.4rem, 4vw, 4rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin: 0 0 22px 0 !important;
  color: #082f37 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

.rp-main-title span {
  display: block !important;
  background: linear-gradient(90deg, #11A0B2, #0a7583) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0.9em !important;
  padding-top: 6px !important;
}

/* ── Description ── */
.rp-slide-desc {
  font-size: 1.08rem !important;
  color: #2b464a !important;
  line-height: 1.8 !important;
  margin-bottom: 34px !important;
  max-width: 90% !important;
  border-left: none !important;
  padding-left: 0 !important;
  font-weight: 400 !important;
}

/* ── Buttons ── */
.rp-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 40px !important;
}

.rp-btn-primary,
.rp-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 36px !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  cursor: pointer !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.rp-btn-primary {
  background: linear-gradient(135deg, #11A0B2, #087f8f) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(17, 160, 178, 0.4) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

.rp-btn-primary::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -150% !important;
  width: 100% !important;
  height: 200% !important;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%) !important;
  transform: rotate(30deg) !important;
  transition: left 0.6s ease-in-out !important;
}

.rp-btn-primary:hover::after,
.rp-btn-primary:focus::after {
  left: 150% !important;
}

.rp-btn-primary:hover,
.rp-btn-primary:focus {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(17, 160, 178, 0.55) !important;
  background: linear-gradient(135deg, #0e8f9e, #076d7a) !important;
  color: #ffffff !important;
}

.rp-btn-secondary {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #082f37 !important;
  border: 1px solid rgba(8, 47, 55, 0.2) !important;
  backdrop-filter: blur(4px) !important;
}

.rp-btn-secondary:hover,
.rp-btn-secondary:focus {
  background: #082f37 !important;
  color: #ffffff !important;
  border-color: #082f37 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(8, 47, 55, 0.2) !important;
}

/* ── Pagination Dots ── */
.rp-slide-dots {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 40px !important;
  position: relative !important;
  z-index: 10 !important;
}

.rp-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid #11A0B2 !important;
  background: transparent !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
}

.rp-dot.is-active {
  background: #11A0B2 !important;
  transform: scale(1.2) !important;
  box-shadow: 0 0 8px rgba(17, 160, 178, 0.5) !important;
}

.rp-dot:hover {
  background: rgba(17, 160, 178, 0.4) !important;
}

/* ── Slide Counter ── */
.rp-slide-counter {
  position: absolute !important;
  bottom: 30px !important;
  left: 60px !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: 'Inter', sans-serif !important;
}

.rp-counter-current {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.rp-counter-sep {
  font-size: 1.4rem !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 2px !important;
}

.rp-counter-total {
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ── Navigation Arrows ── */
.rp-nav-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
}

.rp-nav-arrow:hover,
.rp-nav-arrow:focus {
  background: rgba(17, 160, 178, 0.8) !important;
  border-color: #11A0B2 !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.rp-nav-arrow svg {
  width: 22px !important;
  height: 22px !important;
}

.rp-nav-arrow.rp-prev {
  left: 30px !important;
}

.rp-nav-arrow.rp-next {
  right: 30px !important;
  left: auto !important;
  margin-left: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   J2. SLIDER RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .rp-slide-content-inner {
    padding: 50px 40px 50px 70px !important;
  }
}

@media (max-width: 991px) {
  .rp-hero-slider {
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
  }

  .rp-slide {
    position: relative !important;
    flex-direction: column !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .rp-slide.rp-slide-active {
    display: flex !important;
  }

  .rp-slide-image-side {
    width: 100% !important;
    height: 380px !important;
    clip-path: none !important;
  }
  
  .rp-slide::after {
    display: none !important;
  }

  .rp-slide-curve-separator {
    display: none !important;
  }

  .rp-slide-content-side {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .rp-slide-content-inner {
    padding: 40px 30px !important;
    max-width: 100% !important;
  }

  .rp-nav-arrow.rp-prev {
    left: 15px !important;
    top: 190px !important;
  }

  .rp-nav-arrow.rp-next {
    left: auto !important;
    right: 15px !important;
    margin-left: 0 !important;
    top: 190px !important;
  }

  .rp-nav-arrow {
    width: 44px !important;
    height: 44px !important;
  }

  .rp-slide-counter {
    left: 30px !important;
    bottom: auto !important;
    top: 20px !important;
  }
}

@media (max-width: 600px) {
  .rp-slide-image-side {
    height: 280px !important;
  }

  .rp-slide-product-img {
    padding: 30px !important;
  }

  .rp-main-title {
    font-size: 1.9rem !important;
  }

  .rp-slide-desc {
    font-size: 0.95rem !important;
  }

  .rp-btn-primary,
  .rp-btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }

  .rp-slide-content-inner {
    padding: 30px 20px !important;
  }

  .rp-nav-arrow {
    width: 38px !important;
    height: 38px !important;
  }

  .rp-nav-arrow.rp-prev {
    top: 140px !important;
    left: 10px !important;
  }

  .rp-nav-arrow.rp-next {
    top: 140px !important;
    right: 10px !important;
  }

  .rp-slide-counter {
    left: 15px !important;
    top: 12px !important;
  }

  .rp-counter-current {
    font-size: 1.4rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   K. FOOTER RE-STYLING (Modern Dark Theme)
   ═══════════════════════════════════════════════════════════════════ */
.site-footer, 
.ast-footer-overlay,
.ast-builder-grid-row-container,
.site-primary-footer-wrap,
.ast-above-footer-wrap,
.ast-below-footer-wrap,
.ast-footer-copyright {
  background: #082f37 !important; /* Dark teal to match theme */
  background-color: #082f37 !important;
  color: #e2e8f0 !important;
  border: none !important;
}

/* Footer Headings (Quick Links, Contact Us, etc.) */
.site-footer h1, .site-footer h2, .site-footer h3, 
.site-footer h4, .site-footer h5, .site-footer h6,
.site-footer .widget-title,
.site-footer .ast-widget-title {
  color: #11A0B2 !important; /* Brand Teal */
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 25px !important;
  letter-spacing: 0.5px !important;
  text-transform: capitalize !important;
}

/* Footer Links & Text */
.site-footer a, 
.site-footer p, 
.site-footer span,
.site-footer li,
.site-footer .menu-link,
.site-footer .ast-builder-menu .menu-item > .menu-link,
.site-footer .ast-builder-menu .menu-link,
.site-footer .widget_nav_menu .menu-link,
.site-footer .widget_nav_menu a,
.site-footer .ast-nav-menu > .menu-item > .menu-link {
  color: #cbd5e1 !important; /* Light Slate */
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all 0.3s ease !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  background: transparent !important;
  padding: 0 !important; /* Kill header menu padding */
}

/* Strip inherited hover underlines */
.site-footer .ast-builder-menu .menu-item > .menu-link::after,
.site-footer .ast-builder-menu .menu-link::after,
.site-footer .widget_nav_menu .menu-link::after,
.site-footer .widget_nav_menu a::after,
.site-footer .ast-nav-menu > .menu-item > .menu-link::after {
  display: none !important;
  content: none !important;
}

/* Hover effects for links */
.site-footer a:hover,
.site-footer .menu-link:hover {
  color: #ffffff !important;
  padding-left: 5px !important; /* Stylish nudge */
}

/* Fix nested menu padding and dots from header options */
.site-footer ul,
.site-footer .ast-nav-menu,
.site-footer .main-header-menu,
.site-footer .widget_nav_menu ul,
.site-footer .menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important; /* Force block layout instead of flex */
  flex-direction: column !important;
  gap: 0 !important; /* Kill header flex gaps */
}

.site-footer ul li,
.site-footer .ast-nav-menu > .menu-item,
.site-footer .widget_nav_menu ul li {
  display: block !important;
  width: 100% !important;
  margin: 0 0 12px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 0 0 8px 0 !important;
  background: transparent !important;
}

.site-footer ul li:last-child {
  border-bottom: none !important;
}

/* Prevent sub-menus in footer from expanding horizontally */
.site-footer .sub-menu {
  display: block !important;
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 15px !important;
  margin-top: 10px !important;
  width: auto !important;
  transform: none !important;
}

/* Footer Social Icons */
.site-footer .ast-social-color-type-custom .ast-builder-social-element,
.site-footer .ast-builder-social-element {
  color: #11A0B2 !important;
  background: rgba(17, 160, 178, 0.1) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  margin-right: 10px !important;
}

.site-footer .ast-social-color-type-custom .ast-builder-social-element:hover,
.site-footer .ast-builder-social-element:hover {
  color: #ffffff !important;
  background: #11A0B2 !important;
  transform: translateY(-3px) !important;
}

/* Clean up borders and extra padding in footer */
.site-footer .ast-builder-grid-row {
  border: none !important;
}
.site-footer .site-primary-footer-wrap {
  padding-top: 60px !important;
  padding-bottom: 40px !important;
}

/* Fix the Plus (+) that comes from the header menu */
.site-footer .ast-header-navigation-arrow,
.site-footer .dropdown-menu-toggle {
  display: none !important; /* Hide dropdown arrows in footer */
}

/* Ensure no items disappear entirely, just styled better */
.site-footer .widget {
  margin-bottom: 30px !important;
}

/* 2026 brand refresh: logo-fit, header polish, modern hero */
:root {
  --rp-brand-950: #0f2f31;
  --rp-brand-900: #163a39;
  --rp-brand-700: #2f6d64;
  --rp-brand-600: #3e8377;
  --rp-brand-500: #76a4a0;
  --rp-brand-200: #dceceb;
  --rp-brand-100: #eef6f4;
  --rp-accent: #d4b06b;
  --rp-surface: #f9fcfb;
  --rp-text: #193634;
  --rp-muted: #6b7c7a;
}

.main-header-bar,
#masthead .main-header-bar,
.ast-primary-header-bar,
header.site-header .main-header-bar {
  background: rgba(255, 255, 255, 0.94) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(62, 131, 119, 0.16) !important;
  box-shadow: 0 14px 34px rgba(15, 47, 49, 0.08) !important;
  -webkit-backdrop-filter: blur(16px) !important;
          backdrop-filter: blur(16px) !important;
}

.main-header-bar.rp-scrolled {
  box-shadow: 0 18px 42px rgba(15, 47, 49, 0.12) !important;
  border-bottom-color: rgba(62, 131, 119, 0.22) !important;
}

.ast-site-identity,
.site-branding {
  padding: 0.45rem 0 !important;
}

.site-branding img,
img.custom-logo,
.ast-site-identity img,
.site-logo-img img,
.ast-builder-layout-element .ast-header-logo img,
.custom-logo-link img,
.site-logo-img {
  width: auto !important;
  max-width: 380px !important;
  max-height: 100px !important;
  height: auto !important;
  padding: 6px 0 !important;
  display: block !important;
}

.custom-logo[width],
.custom-logo[height],
.site-logo-img img[width],
.site-logo-img img[height] {
  width: auto !important;
  max-width: 380px !important;
  max-height: 100px !important;
  height: auto !important;
}

.main-header-menu > .menu-item > a,
.ast-nav-menu > .menu-item > .menu-link,
.main-header-menu .menu-link,
.ast-header-sections-navigation .menu-link,
.ast-builder-menu .menu-link,
.ast-builder-menu .menu-item > .menu-link,
#ast-hf-menu-1 > .menu-item > .menu-link,
.ast-builder-layout-element .menu-link {
  color: var(--rp-brand-600) !important;
  font-size: 15px !important;
  letter-spacing: 1.1px !important;
  padding: 24px 0 !important;
}

.main-header-menu > .menu-item > a::after,
.ast-nav-menu > .menu-item > .menu-link::after,
.ast-builder-menu .menu-item > .menu-link::after,
#ast-hf-menu-1 > .menu-item > .menu-link::after {
  background: linear-gradient(90deg, var(--rp-brand-500), var(--rp-brand-600)) !important;
}

.main-header-menu > .menu-item > a:hover,
.ast-nav-menu > .menu-item > .menu-link:hover,
.ast-builder-menu .menu-item > .menu-link:hover,
#ast-hf-menu-1 > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > a,
.ast-nav-menu > .menu-item.current-menu-item > .menu-link,
#ast-hf-menu-1 > .menu-item.current-menu-item > .menu-link {
  color: var(--rp-brand-700) !important;
}

.ast-header-navigation-arrow::before,
.ast-header-navigation-arrow::after,
.dropdown-menu-toggle::before,
.dropdown-menu-toggle::after {
  background-color: var(--rp-brand-600) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT GRID SURPRISE ENHANCEMENT
   ═══════════════════════════════════════════════════════════════════════════ */
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.elementor-widget-woocommerce-products .products.grid .product,
.elementor-widget-wc-archive-products .products .product,
.elementor-widget-image-box .elementor-image-box-wrapper {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e1ebed !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
  padding: 24px !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 30px !important;
}

ul.products li.product:hover,
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover,
.elementor-widget-woocommerce-products .products.grid .product:hover,
.elementor-widget-wc-archive-products .products .product:hover,
.elementor-widget-image-box:hover .elementor-image-box-wrapper {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 35px rgba(17, 160, 178, 0.1) !important;
  border-color: #11A0B2 !important;
}

ul.products li.product img,
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
.elementor-widget-woocommerce-products .products.grid .product img,
.elementor-widget-wc-archive-products .products .product img,
.elementor-widget-image-box .elementor-image-box-img img {
  width: auto !important;
  height: 220px !important;
  object-fit: contain !important;
  margin: 0 auto 20px auto !important;
  transition: transform 0.5s ease !important;
  display: block !important;
}

ul.products li.product:hover img,
.woocommerce ul.products li.product:hover img,
.woocommerce-page ul.products li.product:hover img,
.elementor-widget-woocommerce-products .products.grid .product:hover img,
.elementor-widget-wc-archive-products .products .product:hover img,
.elementor-widget-image-box:hover .elementor-image-box-img img {
  transform: scale(1.05) !important;
}

ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.elementor-widget-woocommerce-products .products.grid .product h2,
.elementor-widget-wc-archive-products .products .product .woocommerce-loop-product__title,
.elementor-widget-image-box .elementor-image-box-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.15rem !important;
  color: #082f37 !important;
  margin-bottom: 8px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

ul.products li.product .price,
.woocommerce ul.products li.product .price,
.elementor-widget-woocommerce-products .products.grid .product .price,
.elementor-widget-wc-archive-products .products .product .price,
.elementor-widget-image-box .elementor-image-box-description {
  color: #11A0B2 !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  display: block !important;
}

ul.products li.product .button,
.woocommerce ul.products li.product .button,
.elementor-widget-woocommerce-products .products.grid .product .button,
.elementor-widget-wc-archive-products .products .product .button {
  display: inline-block !important;
  background: #082f37 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 10px 24px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin-top: 15px !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover,
.elementor-widget-woocommerce-products .products.grid .product .button:hover,
.elementor-widget-wc-archive-products .products .product .button:hover {
  background: #11A0B2 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(17, 160, 178, 0.3) !important;
}

/* Quick fix: ensure main page content sits below the hero slider */
.rp-hero-slider {
  margin-bottom: 48px !important;
}

/* Safety: force the immediate sibling after the slider to clear floats */
.rp-hero-slider + * {
  clear: both !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM "WHY CHOOSE US" AUTO-GRID
   ═══════════════════════════════════════════════════════════════════════════ */
.rp-styled-features-section {
  padding: 80px 20px !important;
  background: #fdfdfd !important;
  position: relative !important;
}

.rp-feature-intro {
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.rp-feature-why {
  color: #11A0B2 !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 0.9rem !important;
  margin-bottom: 15px !important;
  display: block !important;
}

.rp-feature-intro h2, 
.rp-feature-intro .elementor-heading-title:not(.rp-feature-why) {
  font-family: 'Playfair Display', serif !important;
  font-size: 3rem !important;
  color: #082f37 !important;
  margin-bottom: 25px !important;
  line-height: 1.2 !important;
}

.rp-feature-intro .elementor-widget-text-editor {
  color: #667e82 !important;
  font-size: 1.15rem !important;
  line-height: 1.8 !important;
  margin-bottom: 50px !important;
}

/* The Grid */
.rp-features-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 30px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-top: 40px !important;
}

.rp-feature-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 40px 30px !important;
  box-shadow: 0 10px 40px rgba(8, 47, 55, 0.04) !important;
  border: 1px solid rgba(17, 160, 178, 0.08) !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.rp-feature-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, #11A0B2, #087f8f) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}

.rp-feature-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 20px 50px rgba(17, 160, 178, 0.12) !important;
}

.rp-feature-card:hover::before {
  opacity: 1 !important;
}

.rp-feature-icon {
  width: 70px !important;
  height: 70px !important;
  background: rgba(17, 160, 178, 0.08) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 25px auto !important;
  color: #11A0B2 !important;
  transition: all 0.4s ease !important;
}

.rp-feature-card:hover .rp-feature-icon {
  background: #11A0B2 !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

.rp-feature-icon svg {
  width: 32px !important;
  height: 32px !important;
}

.rp-feature-card-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.4rem !important;
  color: #082f37 !important;
  margin-bottom: 15px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
}

.rp-feature-card-desc {
  color: #667e82 !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L. HOMEPAGE SECTIONS — Override Yellow/Red Elementor Backgrounds
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kill ALL yellow (#FEE331) backgrounds sitewide ── */
.elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element,
.elementor-section .elementor-column,
.elementor-element[style*="FEE331"],
.elementor-element[style*="fee331"],
.e-con[style*="FEE331"],
.e-con[style*="fee331"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* ── Kill red (#FF2013 / #ff2031) feature strip ── */
.elementor-section[data-id="e96d74b"],
.elementor-section[data-id="e96d74b"] > .elementor-container {
  background: linear-gradient(135deg, #082f37, #0a3d47) !important;
  background-color: #082f37 !important;
  border-radius: 16px !important;
  margin: 0 20px !important;
}

/* ── Generic: override any remaining yellow column backgrounds ── */
.elementor-column[style*="FEE331"] > .elementor-widget-wrap,
.elementor-column[style*="fee331"] > .elementor-widget-wrap {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L1. "WHY" FEATURE STRIP (Quality/Care/Service icons row)
   ═══════════════════════════════════════════════════════════════════════════ */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.elementor-widget-icon-box .elementor-icon-box-icon {
  margin-bottom: 0 !important;
}

.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
  background: rgba(17, 160, 178, 0.15) !important;
  color: #11A0B2 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  transition: all 0.3s ease !important;
}

.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon i {
  color: #11A0B2 !important;
}

.elementor-widget-icon-box .elementor-icon-box-title {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

.elementor-widget-icon-box .elementor-icon-box-description {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.9rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L2. "OUR STORY" SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.elementor-element[data-id="e26fe24"],
.e-con[data-id="e26fe24"] {
  background: linear-gradient(145deg, #082f37 0%, #0a4550 50%, #0d5a68 100%) !important;
  padding: 60px 50px !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.elementor-element[data-id="e26fe24"]::before,
.e-con[data-id="e26fe24"]::before {
  content: '' !important;
  position: absolute !important;
  top: -100px !important;
  right: -100px !important;
  width: 300px !important;
  height: 300px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(17,160,178,0.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

/* Our Story heading */
.elementor-element[data-id="f3792ad"] .elementor-heading-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 2.4rem !important;
  color: #ffffff !important;
  position: relative !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}

.elementor-element[data-id="f3792ad"] .elementor-heading-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 60px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #11A0B2, #087f8f) !important;
  border-radius: 3px !important;
}

/* Our Story text */
.elementor-element[data-id="d018bb3"] p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  font-family: 'Inter', sans-serif !important;
}

/* Our Story SVG/image side */
.elementor-element[data-id="b760786"] img {
  border-radius: 16px !important;
  opacity: 0.9 !important;
  transition: opacity 0.3s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L3. "SALES SERVICE" & "ANNUAL MAINTENANCE" SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */
/* These sections have yellow bg columns — override to clean white cards */
.elementor-section[data-id="56356d0"] .elementor-column > .elementor-widget-wrap,
.elementor-section[data-id="d3b2dfd"] .elementor-column > .elementor-widget-wrap {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(8, 47, 55, 0.06) !important;
  border: 1px solid rgba(17, 160, 178, 0.08) !important;
  padding: 40px !important;
  transition: all 0.4s ease !important;
}

.elementor-section[data-id="56356d0"] .elementor-column > .elementor-widget-wrap:hover,
.elementor-section[data-id="d3b2dfd"] .elementor-column > .elementor-widget-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 15px 40px rgba(17, 160, 178, 0.1) !important;
}

.elementor-section[data-id="56356d0"],
.elementor-section[data-id="d3b2dfd"] {
  background: linear-gradient(180deg, #f8fffe 0%, #eef9f7 100%) !important;
}

/* Small labels like "AFTER", "We also Offer" */
.elementor-element[data-id="532042d"] .elementor-heading-title,
.elementor-element[data-id="7527f56"] .elementor-heading-title,
.elementor-element[data-id="b4ae767"] .elementor-heading-title {
  color: #11A0B2 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  background: rgba(17, 160, 178, 0.08) !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  margin-bottom: 10px !important;
}

/* Main section headings */
.elementor-element[data-id="a892a32"] .elementor-heading-title,
.elementor-element[data-id="0c4dbad"] .elementor-heading-title,
.elementor-element[data-id="0f21930"] .elementor-heading-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 2rem !important;
  color: #082f37 !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
}

/* Section description text */
.elementor-element[data-id="5c67074"] p,
.elementor-element[data-id="468b307"] p {
  color: #5a6b70 !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  font-family: 'Inter', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L4. "WHAT OUR CUSTOMERS SAY" — Testimonials
   ═══════════════════════════════════════════════════════════════════════════ */
.elementor-section[data-id="090eaae"] {
  background: linear-gradient(180deg, #f4fffe 0%, #eef9f7 50%, #f8fffe 100%) !important;
  padding: 70px 40px !important;
}

.elementor-element[data-id="cbdc430"] .elementor-heading-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 2.4rem !important;
  color: #082f37 !important;
  font-weight: 800 !important;
}

.elementor-section[data-id="090eaae"] .elementor-widget-divider .elementor-divider-separator {
  border-color: #11A0B2 !important;
  border-width: 3px !important;
}

/* Testimonial cards */
.elementor-section[data-id="a850b04"] .elementor-column {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 30px 24px !important;
  box-shadow: 0 8px 30px rgba(8, 47, 55, 0.05) !important;
  border: 1px solid rgba(17, 160, 178, 0.08) !important;
  margin: 0 8px !important;
  transition: all 0.4s ease !important;
}

.elementor-section[data-id="a850b04"] .elementor-column:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 15px 40px rgba(17, 160, 178, 0.12) !important;
}

/* Quote icon */
.elementor-section[data-id="a850b04"] .elementor-widget-icon .elementor-icon {
  color: #11A0B2 !important;
}

.elementor-section[data-id="a850b04"] .elementor-widget-icon .elementor-icon i {
  color: #11A0B2 !important;
}

/* Testimonial text */
.elementor-section[data-id="a850b04"] .elementor-testimonial-content {
  color: #2b464a !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  font-style: italic !important;
}

/* Testimonial name */
.elementor-section[data-id="a850b04"] .elementor-testimonial-name {
  color: #082f37 !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L5. "GIVE US CALL" CTA SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.elementor-section[data-id="04b6135"] {
  position: relative !important;
}

.elementor-section[data-id="04b6135"]::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(145deg, rgba(8,47,55,0.88) 0%, rgba(13,90,104,0.82) 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.elementor-section[data-id="04b6135"] > .elementor-container {
  position: relative !important;
  z-index: 1 !important;
}

/* "Give us Call" label */
.elementor-element[data-id="c013106"] .elementor-heading-title {
  color: #11A0B2 !important;
  font-size: 0.9rem !important;
  letter-spacing: 3px !important;
  margin-bottom: 12px !important;
}

/* Phone number */
.elementor-element[data-id="447d2ae"] .elementor-heading-title {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* Subtitle */
.elementor-element[data-id="7df0aff"] p {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 1.1rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L6. "CERTIFICATES" SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.elementor-section[data-id="b14b6fd"] {
  background: linear-gradient(180deg, #f8fffe 0%, #eef9f7 100%) !important;
  padding-bottom: 10px !important;
}

.elementor-section[data-id="b14b6fd"] .elementor-column > .elementor-widget-wrap {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(8, 47, 55, 0.06) !important;
  border: 1px solid rgba(17, 160, 178, 0.08) !important;
  padding: 30px 40px !important;
}

/* Certificate cards container */
.elementor-element[data-id="75dc3d5"],
.e-con[data-id="75dc3d5"] {
  background: linear-gradient(180deg, #eef9f7 0%, #f8fffe 100%) !important;
  padding: 20px 40px 60px !important;
}

/* Individual certificate cards */
.elementor-element[data-id="f84850d"],
.elementor-element[data-id="0780967"],
.elementor-element[data-id="8148c72"],
.e-con[data-id="f84850d"],
.e-con[data-id="0780967"],
.e-con[data-id="8148c72"] {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(8, 47, 55, 0.06) !important;
  border: 1px solid rgba(17, 160, 178, 0.08) !important;
  padding: 20px !important;
  transition: all 0.4s ease !important;
}

.elementor-element[data-id="f84850d"]:hover,
.elementor-element[data-id="0780967"]:hover,
.elementor-element[data-id="8148c72"]:hover,
.e-con[data-id="f84850d"]:hover,
.e-con[data-id="0780967"]:hover,
.e-con[data-id="8148c72"]:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 15px 40px rgba(17, 160, 178, 0.12) !important;
}

/* Certificate images */
.elementor-element[data-id="f84850d"] img,
.elementor-element[data-id="0780967"] img,
.elementor-element[data-id="8148c72"] img,
.e-con[data-id="f84850d"] img,
.e-con[data-id="0780967"] img,
.e-con[data-id="8148c72"] img {
  border-radius: 8px !important;
  transition: transform 0.4s ease !important;
}

.elementor-element[data-id="f84850d"]:hover img,
.elementor-element[data-id="0780967"]:hover img,
.elementor-element[data-id="8148c72"]:hover img,
.e-con[data-id="f84850d"]:hover img,
.e-con[data-id="0780967"]:hover img,
.e-con[data-id="8148c72"]:hover img {
  transform: scale(1.03) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L7. EMPTY CONTAINER FIX (data-id a253405 — blank colored section)
   ═══════════════════════════════════════════════════════════════════════════ */
.elementor-element[data-id="a253405"],
.e-con[data-id="a253405"] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L8. OUR PRODUCTS SECTION HEADING
   ═══════════════════════════════════════════════════════════════════════════ */
.elementor-element[data-id="59fc418"] .elementor-heading-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 2.4rem !important;
  color: #082f37 !important;
  font-weight: 800 !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 12px !important;
}

.elementor-element[data-id="59fc418"] .elementor-heading-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 60px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #11A0B2, #087f8f) !important;
  border-radius: 3px !important;
}

/* Products section background */
.elementor-section[data-id="146bc3a"] {
  background: #f8fffe !important;
}

.elementor-section[data-id="146bc3a"] .elementor-column > .elementor-widget-wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L9. GLOBAL ELEMENTOR SECTION POLISH
   ═══════════════════════════════════════════════════════════════════════════ */
/* Smooth section transitions */
.elementor-top-section {
  transition: background 0.3s ease !important;
}

/* Fix any remaining inline yellow/red on Elementor elements */
.elementor-section .elementor-element .elementor-widget-wrap[style*="FEE331"],
.elementor-section .elementor-element .elementor-widget-wrap[style*="fee331"] {
  background: #ffffff !important;
}

/* Global heading polish for any h6 used as label */
.elementor-widget-heading h6 {
  color: #11A0B2 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  font-family: 'Inter', sans-serif !important;
}

/* Global section spacing improvement */
.elementor-section + .elementor-section {
  margin-top: 0 !important;
}

/* Scroll reveal classes */
.rp-reveal {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.rp-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}