/* ==========================================================
   FERRO FABS – FINAL CONSOLIDATED THEME OVERRIDE
   Brand:
   Primary  : #0A2A5A (Steel Blue)
   Accent   : #F37021 (Safety Orange)
   Purpose  : Remove green theme, keep layout intact
   ========================================================== */

:root{
  --ff-primary:#0A2A5A;
  --ff-accent:#F37021;
  --ff-accent-dark:#D85F1C;
  --ff-bg:#F7F8FA;
  --ff-text:#1F2933;
  --ff-border:#E5E7EB;
}

/* ---------- Typography (brand-safe) ---------- */
body{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ff-text);
}

/* ---------- Top Header Bar ---------- */
.header-top{
  background: var(--ff-primary) !important;
}
.header-top *,
.header-top a{
  color:#ffffff !important;
}
.header-top .icon-box{
  color: var(--ff-accent) !important;
}

/* ---------- Main Header / Menu ---------- */
.header-lower{
  background:#ffffff !important;
}
.main-menu .navigation > li > a{
  color: var(--ff-primary) !important;
}
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.current > a,
.main-menu .navigation > li.active > a{
  color: var(--ff-accent) !important;
}

/* Dropdown */
.main-menu .navigation > li > ul{
  border-top:3px solid var(--ff-accent) !important;
}
.main-menu .navigation > li > ul > li > a:hover{
  color: var(--ff-accent) !important;
}

/* ---------- Buttons (GLOBAL + GET A QUOTE FIX) ---------- */
.theme-btn,
.theme-btn.btn-one{
  background: var(--ff-accent) !important;
  border-color: var(--ff-accent) !important;
  color:#ffffff !important;
}

.theme-btn:hover,
.theme-btn.btn-one:hover,
.theme-btn:focus,
.theme-btn.btn-one:focus,
.theme-btn:active,
.theme-btn.btn-one:active{
  background: var(--ff-primary) !important;
  border-color: var(--ff-primary) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

/* Kill theme pseudo-hover green */
.theme-btn::before,
.theme-btn::after,
.theme-btn.btn-one::before,
.theme-btn.btn-one::after{
  background: var(--ff-primary) !important;
}

/* ---------- Section Headings ---------- */
.sec-title .sub-title{
  color: var(--ff-accent) !important;
}
.sec-title h1,
.sec-title h2,
.sec-title h3,
h1,h2,h3{
  color: var(--ff-primary);
}

/* ---------- Remove Green Background Sections ---------- */
.bg_color_1,
.bg-green,
.bg-theme{
  background: var(--ff-bg) !important;
}

/* ---------- ICON BOXES (CRITICAL FIX) ---------- */
.icon-box,
.icon,
.feature-block-one .icon,
.service-block-one .icon,
.single-product .icon,
.trending-block .icon{
  background: var(--ff-primary) !important;
  color:#ffffff !important;
}

.icon-box i,
.icon-box svg,
.icon i,
.icon svg{
  color:#ffffff !important;
  fill:#ffffff !important;
}

/* ---------- Learn More / Read More Links ---------- */
a.read-more,
a.learn-more,
.read-more a{
  color: var(--ff-accent) !important;
  font-weight:500;
}
a.read-more:hover,
a.learn-more:hover,
.read-more a:hover{
  color: var(--ff-primary) !important;
}

/* ---------- Cards & Hover Borders ---------- */
.single-product,
.service-block-one .inner-box,
.feature-block-one .inner-box{
  border-color: var(--ff-border) !important;
}
.single-product:hover,
.service-block-one .inner-box:hover,
.feature-block-one .inner-box:hover{
  border-color: var(--ff-accent) !important;
}

/* ---------- FRP PLANTERS SPECIAL FIX ---------- */
.frp-planters .icon,
.frp-planters .icon-box{
  background: var(--ff-primary) !important;
}

/* ---------- FOOTER ---------- */
.main-footer{
  background: var(--ff-primary) !important;
}
.main-footer *,
.main-footer a{
  color:#ffffff !important;
}
.main-footer a:hover{
  color: var(--ff-accent) !important;
}

/* Decorative green shapes above footer */
.footer-shape,
.footer-top-shape,
.footer-bg-shape{
  background: var(--ff-primary) !important;
}

/* Footer bottom bar */
.footer-bottom{
  background: rgba(0,0,0,0.18) !important;
  border-top:1px solid rgba(255,255,255,0.12) !important;
}

/* ---------- WhatsApp button (KEEP GREEN intentionally)
   No override here – brand recognition is important
----------------------------------------------------- */
/* ======================================================
   FINAL GREEN HOVER & SHAPE FIX (APPEND ONLY)
   ====================================================== */

/* ---------- HERO / SLIDER ARROWS (GREEN ON HOVER FIX) ---------- */
.banner-section .owl-nav button,
.banner-section .owl-nav .owl-prev,
.banner-section .owl-nav .owl-next{
  background: rgba(10,42,90,0.85) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

.banner-section .owl-nav button:hover,
.banner-section .owl-nav .owl-prev:hover,
.banner-section .owl-nav .owl-next:hover{
  background: #F37021 !important;
  border-color: #F37021 !important;
}

.banner-section .owl-nav button::before,
.banner-section .owl-nav button::after{
  display:none !important;
}

.banner-section .owl-nav span,
.banner-section .owl-nav i{
  color:#ffffff !important;
}

/* ---------- ICONS TURNING GREEN ON HOVER ---------- */
.icon-box:hover,
.icon:hover,
.feature-block-one:hover .icon,
.service-block-one:hover .icon,
.single-product:hover .icon,
.trending-block:hover .icon{
  background: #F37021 !important;
}

/* ---------- LEARN MORE / ARROW LINKS ---------- */
a.learn-more,
a.read-more{
  color:#F37021 !important;
}

a.learn-more:hover,
a.read-more:hover{
  color:#0A2A5A !important;
}

/* ---------- FOOTER HALF-CIRCLE / UMBRELLA ---------- */
.main-footer .footer-logo .shape,
.main-footer .footer-logo::before,
.main-footer .footer-logo::after{
  background:#0A2A5A !important;
  background-image:none !important;
}

/* ---------- FOOTER SOCIAL ICONS ---------- */
.main-footer .social-links a:hover{
  background:#F37021 !important;
  color:#ffffff !important;
}
/* ======================================================
   NAVBAR DROPDOWN (PLANT NURSERY) – REMOVE GREEN
   ====================================================== */

/* Dropdown container background */
.main-menu .navigation > li > ul,
.main-menu .navigation > li > ul > li > ul{
  background:#0A2A5A !important; /* Ferro Fabs Blue */
  border:none !important;
}

/* Dropdown links */
.main-menu .navigation > li > ul > li > a{
  color:#ffffff !important;
  background:transparent !important;
}

/* Hover + Active state */
.main-menu .navigation > li > ul > li > a:hover,
.main-menu .navigation > li > ul > li.current > a,
.main-menu .navigation > li > ul > li.active > a{
  background:#F37021 !important; /* Ferro Fabs Orange */
  color:#ffffff !important;
}

/* Remove any green separators or borders */
.main-menu .navigation > li > ul > li{
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
}

/* Kill leftover green overlays */
.main-menu .navigation > li > ul::before,
.main-menu .navigation > li > ul::after{
  display:none !important;
}
/* ======================================================
   TOP HEADER BAR ICON COLOR FIX
   ====================================================== */

/* Phone & Email icons (default) */
.header-top i,
.header-top .icon,
.header-top .fa,
.header-top .fas,
.header-top .far,
.header-top svg{
  color:#ffffff !important;   /* Same as text */
  fill:#ffffff !important;
}

/* Links text color */
.header-top a{
  color:#ffffff !important;
}

/* Hover state */
.header-top a:hover,
.header-top a:hover i,
.header-top a:hover svg{
  color:#F37021 !important;   /* Ferro Orange */
  fill:#F37021 !important;
}

/* Remove any background highlight */
.header-top a::before,
.header-top a::after{
  background:none !important;
}
/* ======================================================
   REMOVE TOP BAR HOVER BOX (PHONE / EMAIL)
   ====================================================== */

/* Kill hover background completely */
.header-top a,
.header-top a:hover{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Kill pseudo-elements causing square box */
.header-top a::before,
.header-top a::after,
.header-top a:hover::before,
.header-top a:hover::after{
  display: none !important;
  content: none !important;
}

/* Keep icon + text color clean */
.header-top i,
.header-top svg{
  background: none !important;
}
/* ======================================================
   PRELOADER – FERRO FABS BRAND COLORS
   ====================================================== */

/* Preloader background */
.preloader,
.preloader-inner,
.page-loader,
.loader-wrap,
#preloader{
  background:#0A2A5A !important; /* Ferro Blue */
}

/* Loader circle / spinner */
.preloader .spinner,
.preloader .spinner::before,
.preloader .spinner::after,
.loader,
.loader::before,
.loader::after{
  border-color:#F37021 !important;
  border-top-color:#F37021 !important;
}

/* Preloader text / logo */
.preloader h1,
.preloader h2,
.preloader span,
.preloader img{
  color:#ffffff !important;
  fill:#ffffff !important;
}
/* ======================================================
   TOP BAR: Phone/Email icon style = same as Follow Us icons
   ====================================================== */

/* Remove any box/hover background from phone/email links */
.header-top .info-box li a,
.header-top .info-box li a:hover{
  background: transparent !important;
  box-shadow: none !important;
}

/* Kill pseudo-element hover boxes on those links */
.header-top .info-box li a::before,
.header-top .info-box li a::after,
.header-top .info-box li a:hover::before,
.header-top .info-box li a:hover::after{
  display: none !important;
  content: none !important;
}

/* Make phone/email icons behave like social icons */
.header-top .info-box .icon-box{
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.12) !important;   /* same style family */
  color: #ffffff !important;
}

/* Hover same as social hover */
.header-top .info-box li:hover .icon-box{
  background: #F37021 !important;
  color: #ffffff !important;
}

/* Ensure icon glyph stays white */
.header-top .info-box .icon-box i,
.header-top .info-box .icon-box svg{
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* ======================================================
   PRELOADER: force Ferro Blue background + Orange ring
   ====================================================== */

.loader-wrap,
.loader-wrap *{
  background-color: transparent; /* prevent inner green blocks */
}

/* Full-screen preloader background */
.loader-wrap{
  background: #0A2A5A !important;  /* Ferro Blue */
}

/* Spinner ring (your screenshot shows orange ring already; force it anyway) */
.loader-wrap .spinner,
.loader-wrap .spinner::before,
.loader-wrap .spinner::after{
  border-color: #F37021 !important;
  border-top-color: #F37021 !important;
}

/* Preloader text */
.loader-wrap .txt-loading,
.loader-wrap .letters-loading{
  color: #ffffff !important;
}
/* ======================================================
   PRELOADER: RESTORE SPINNER ANIMATION (keep Ferro colors)
   ====================================================== */

/* Make sure spinner itself is transparent and can spin */
.loader-wrap .spinner{
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 3px solid rgba(255,255,255,0.25) !important;
  border-top-color: #F37021 !important; /* Ferro Orange */
  animation: ffSpin 0.9s linear infinite !important;
}

/* If theme uses pseudo-elements to draw the ring, keep them spinning too */
.loader-wrap .spinner::before,
.loader-wrap .spinner::after{
  background: transparent !important;
}

/* Keyframes (in case original got overridden) */
@keyframes ffSpin{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* ======================================================
   TOP BAR: Fix phone/email icon positioning & alignment
   ====================================================== */

/* Make each info item (phone/email) align like a row */
.header-top .info-box > li{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Ensure icon box is not absolutely pushing layout */
.header-top .info-box .icon-box{
  position: static !important;
  margin: 0 !important;
  flex: 0 0 34px !important;
}

/* Align text nicely */
.header-top .info-box p{
  margin: 0 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Remove any top/bottom offsets that theme may apply */
.header-top .info-box li,
.header-top .info-box li *{
  transform: none !important;
  top: auto !important;
}
/* ======================================================
   FEATURE ICON HOVER: remove green flash animation
   ====================================================== */

/* Force icon tile color always (no transition from theme) */
.feature-block-one .icon-box,
.feature-block-one .icon-box:hover{
  background: #0A2A5A !important;
  transition: none !important;
}

/* On hover: switch directly to orange */
.feature-block-one:hover .icon-box{
  background: #F37021 !important;
  transition: none !important;
}

/* Kill the theme's animated overlay that flashes green */
.feature-block-one .icon-box::before,
.feature-block-one .icon-box::after,
.feature-block-one:hover .icon-box::before,
.feature-block-one:hover .icon-box::after{
  display: none !important;
  content: none !important;
}

/* Ensure icon glyph stays white */
.feature-block-one .icon-box i,
.feature-block-one .icon-box svg{
  color: #fff !important;
  fill: #fff !important;
  transition: none !important;
}
/* ======================================================
   SERVICE CARD ICONS: remove green tile + green flash
   (Variety of Quality / category cards)
   ====================================================== */

/* Force service card icon tile default */
.service-block-one .icon-box,
.service-block-one .icon-box:hover{
  background:#0A2A5A !important; /* Ferro Blue */
  transition:none !important;
}

/* Hover state = direct orange (no green in between) */
.service-block-one:hover .icon-box{
  background:#F37021 !important; /* Ferro Orange */
  transition:none !important;
}

/* Kill any animated overlay that flashes green */
.service-block-one .icon-box::before,
.service-block-one .icon-box::after,
.service-block-one:hover .icon-box::before,
.service-block-one:hover .icon-box::after{
  display:none !important;
  content:none !important;
}

/* Keep icon glyph white */
.service-block-one .icon-box i,
.service-block-one .icon-box svg{
  color:#fff !important;
  fill:#fff !important;
  transition:none !important;
}
/* ======================================================
   SERVICE CARD: Fix Learn More green hover
   ====================================================== */

/* Default link color */
.service-block-one a,
.service-block-one .link a{
  color:#0A2A5A !important; /* Ferro Blue */
}

/* Hover state = orange (no green) */
.service-block-one a:hover,
.service-block-one .link a:hover{
  color:#F37021 !important; /* Ferro Orange */
}

/* Arrow icon inside link */
.service-block-one a i,
.service-block-one a span{
  color:inherit !important;
  transition:none !important;
}
/* ======================================================
   FOOTER UMBRELLA / DOME SHAPE (CENTER LOGO BACKGROUND)
   ====================================================== */

.main-footer .footer-top {
  position: relative;
  overflow: visible;
}

/* Umbrella shape */
.main-footer .footer-top::before {
  content: "";
  position: absolute;
  top: -45px;                 /* controls how high the dome rises */
  left: 50%;
  transform: translateX(-50%);
  width: 360px;               /* width of umbrella */
  height: 90px;               /* height of umbrella */
  background: #0b2d5c;        /* SAME as footer blue */
  border-top-left-radius: 180px;
  border-top-right-radius: 180px;
  z-index: 1;
}

/* Logo sits above umbrella */
.main-footer .footer-logo {
  position: relative;
  z-index: 2;
  padding-top: 12px;
}

/* Ensure footer content stays below */
.main-footer .footer-upper {
  position: relative;
  z-index: 2;
}
/* ======================================================
   FOOTER: UMBRELLA / DOME SHAPE (guaranteed selector)
   ====================================================== */

/* FOOTER DOME – visible + no side steps */
.main-footer{
  position: relative;
  overflow: visible !important; /* IMPORTANT: don't clip the dome */
}

.main-footer .footer-logo{
  position: relative;
  z-index: 2;
  overflow: visible !important;
}

/* The dome (blue) */
.main-footer .footer-logo::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -46px;
  width: 300px;
  height: 90px;
  background: #0A2A5A;
  border-top-left-radius: 300px;
  border-top-right-radius: 300px;
  z-index: -1;
}

/* White cutouts to hide the flat "step" edges */
.main-footer .footer-logo::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -46px;
  width: 360px;      /* slightly wider than dome */
  height: 46px;      /* same as the rise amount */
  background: #fff;  /* page background */
  z-index: -2;
  border-radius: 0;
}
/* ======================================================
   FOOTER UMBRELLA (USE EXISTING THEME SHAPE DIV)
   ====================================================== */

/* Ensure shape is visible */
.main-footer .footer-logo,
.main-footer .footer-logo .logo{
  position: relative !important;
  overflow: visible !important;
}

/* This is the original umbrella element */
.main-footer .footer-logo .logo .shape{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 291px !important;     /* original theme size */
  height: 57px !important;     /* original theme size */
  top: -35px !important;       /* original theme position */

  background: #0A2A5A !important; /* Ferro Blue */
  background-image: none !important;

  border-radius: 291px 291px 0 0 !important; /* smooth umbrella */
  z-index: -1 !important;
}
/* ======================================================
   FOOTER UMBRELLA – FINAL & LOCKED
   Uses existing theme .shape element
   ====================================================== */

/* Ensure footer allows the curve to show */
.main-footer,
.main-footer .footer-logo,
.main-footer .footer-logo .logo{
  position: relative !important;
  overflow: visible !important;
}

/* Disable any previously added dome experiments */
.main-footer::before,
.main-footer::after,
.main-footer .footer-logo::before,
.main-footer .footer-logo::after{
  content: none !important;
  display: none !important;
}

/* Convert existing shape into smooth umbrella */
.main-footer .footer-logo .logo .shape{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 291px !important;        /* original theme width */
  height: 57px !important;        /* original theme height */
  top: -35px !important;          /* original theme position */

  background: #0A2A5A !important; /* footer blue */
  background-image: none !important;

  border-radius: 291px 291px 0 0 !important; /* smooth dome */
  z-index: -1 !important;
}

/* ======================================================
   HERO SLIDER – FIX HOVER BRIGHTEN + STABLE OWL MOTION
   (safe version: does NOT remove pseudo-elements globally)
   ====================================================== */

/* Stop hover brightening / filter effects on slides */
.banner-section .slide-item .image-layer,
.banner-section .slide-item:hover .image-layer{
  filter: none !important;
  opacity: 1 !important;
}

/* Keep the dark overlay stable (no hover flicker) */
.banner-section .image-layer::before{
  transition: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Smooth + stable carousel transforms (prevents jitter on nav clicks) */
.banner-section .banner-carousel,
.banner-section .owl-stage-outer{
  overflow: hidden !important;
  transform: translate3d(0,0,0);
}

.banner-section .owl-stage{
  will-change: transform;
  /* Do NOT override Owl's transform; it controls slide movement */
}

.banner-section .owl-item{
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translate3d(0,0,0);
}


/* Ensure banner text is visible even if Owl hasn't initialized yet */
.banner-section .banner-carousel:not(.owl-loaded) .content-box{
  opacity: 1 !important;
  transform: none !important;
}
.banner-section .banner-carousel:not(.owl-loaded) .content-box *{
  opacity: 1 !important;
  transform: none !important;
}



/* =============================
   Banner text fallback visibility
   (If Owl fails to init, keep text visible)
   ============================= */
.banner-section .content-box,
.banner-section .content-box h1,
.banner-section .content-box p,
.banner-section .content-box .btn-box{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Also ensure active slide doesn't get dimmed/filtered on hover */
.banner-section .owl-item,
.banner-section .owl-item.active{
  filter: none !important;
}


/* ======================================================
   HERO SLIDER – BRIGHTEN IMAGES (VISIBLE)
   Uses a light overlay on top of the background image.
   Safe for Owl Carousel (doesn't touch .owl-stage transform).
   ====================================================== */

/* Ensure the background layer can host an overlay */
.banner-section .slide-item .image-layer{
  position: absolute;
  inset: 0;
}

/* Light overlay: makes images look brighter without hover flicker */
.banner-section .slide-item .image-layer::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25) !important; /* increase to 0.30 if needed */
  mix-blend-mode: screen;
  opacity: 1 !important;
  transition: none !important;
  pointer-events: none;
  z-index: 1;
}

/* Keep banner content above the overlay */
.banner-section .slide-item .content-box,
.banner-section .slide-item .content-box *{
  position: relative;
  z-index: 2;
}
/* ==================================================
   CHOOSE US V2 – Premium Banner Layout
   ================================================== */

.chooseus-v2 .chooseus-wrap{
  display: grid;
  grid-template-columns: 44% 56%;
  background: #fff;
}

.chooseus-v2 .chooseus-media{
  position: relative;
  min-height: 460px;
  background-size: cover;
  background-position: center;
}

.chooseus-v2 .chooseus-media-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.05));
}

.chooseus-v2 .chooseus-badge{
  position:absolute;
  left: 22px; bottom: 22px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 14px;
}

.chooseus-v2 .chooseus-content{
  padding: 56px 50px;
}

.chooseus-v2 .chooseus-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 18px;
  margin-top: 18px;
}

.chooseus-v2 .chooseus-item{
  display: flex;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 12px;
  background: #f7f9fc;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.chooseus-v2 .chooseus-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.chooseus-v2 .chooseus-item .icon-box{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(21,34,135,.10); /* blue tint */
  color: #152287;
  font-size: 20px;
  flex: 0 0 44px;
}

.chooseus-v2 .chooseus-item h5{
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 6px;
  font-weight: 600;
}

.chooseus-v2 .chooseus-item p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* Responsive */
@media (max-width: 991px){
  .chooseus-v2 .chooseus-wrap{
    grid-template-columns: 1fr;
  }
  .chooseus-v2 .chooseus-content{
    padding: 36px 22px;
  }
  .chooseus-v2 .chooseus-grid{
    grid-template-columns: 1fr;
  }
  .chooseus-v2 .chooseus-media{
    min-height: 320px;
  }
}
/* ==================================================
   CHOOSE US V2 – Premium Banner Layout
   ================================================== */

.chooseus-v2 .chooseus-wrap{
  display: grid;
  grid-template-columns: 44% 56%;
  background: #fff;
}

.chooseus-v2 .chooseus-media{
  position: relative;
  min-height: 460px;
  background-size: cover;
  background-position: center;
}

.chooseus-v2 .chooseus-media-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.05));
}

.chooseus-v2 .chooseus-badge{
  position:absolute;
  left: 22px; bottom: 22px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 14px;
}

.chooseus-v2 .chooseus-content{
  padding: 56px 50px;
}

.chooseus-v2 .chooseus-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 18px;
  margin-top: 18px;
}

.chooseus-v2 .chooseus-item{
  display: flex;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 12px;
  background: #f7f9fc;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.chooseus-v2 .chooseus-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.chooseus-v2 .chooseus-item .icon-box{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(21,34,135,.10); /* blue tint */
  color: #152287;
  font-size: 20px;
  flex: 0 0 44px;
}

.chooseus-v2 .chooseus-item h5{
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 6px;
  font-weight: 600;
}

.chooseus-v2 .chooseus-item p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* Responsive */
@media (max-width: 991px){
  .chooseus-v2 .chooseus-wrap{
    grid-template-columns: 1fr;
  }
  .chooseus-v2 .chooseus-content{
    padding: 36px 22px;
  }
  .chooseus-v2 .chooseus-grid{
    grid-template-columns: 1fr;
  }
  .chooseus-v2 .chooseus-media{
    min-height: 320px;
  }
}
/* Remove existing decorative PNG shapes (leafs) */
.chooseus-section .shape-layer .shape-1,
.chooseus-section .shape-layer .shape-2{
  background-image: none !important;
  display: none !important;
}
/* =========================================
   Choose Us – Replace leaf PNGs with brand accents
   ========================================= */

.chooseus-section .inner-container{
  position: relative;
  overflow: hidden;
}

/* Top-right accent: orange arc + glow */
.chooseus-section .inner-container::before{
  content:"";
  position:absolute;
  top:-120px;
  right:-140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,122,44,0.30) 0%,
      rgba(255,122,44,0.16) 35%,
      rgba(255,122,44,0.00) 70%);
  pointer-events:none;
  z-index: 0;
}

/* Bottom-right accent: blue arc + dotted grid */
.chooseus-section .inner-container::after{
  content:"";
  position:absolute;
  bottom:-140px;
  right:-160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%,
      rgba(21,34,135,0.22) 0%,
      rgba(21,34,135,0.10) 40%,
      rgba(21,34,135,0.00) 72%),
    radial-gradient(rgba(21,34,135,0.12) 1px, transparent 1px);
  background-size: auto, 14px 14px;
  pointer-events:none;
  z-index: 0;
}

/* Make sure content stays above accents */
.chooseus-section .inner-container > *{
  position: relative;
  z-index: 2;
}
/* FINAL LOGO RULE – DO NOT STACK WITH OTHERS */
.main-header .logo-box img,
.sticky-header .logo-box img{
  height: 70px;
  width: auto;
  max-width: none;
}
/* ================================
   FIX HEADER LOGO SIZE (YOUR HTML)
   ================================ */

/* Remove any width limiting on the logo wrapper */
.header-lower .logo-box figure.logo{
  width: auto !important;
  max-width: none !important;
  margin: 0;
}

/* Make the image actually large */
.header-lower .logo-box figure.logo img{
  height: 78px !important;  /* increase if needed: 100px */
  width: auto !important;
  max-width: none !important;
  display: block;
}

/* Sticky header logo (slightly smaller) */
.sticky-header .logo-box figure.logo img{
  height: 70px !important;
  width: auto !important;
  max-width: none !important;
}
/* =========================================
   HEADER LAYOUT FIX (logo big + menu aligned)
   ========================================= */

/* Ensure header row stays in one line and centered */
.header-lower .outer-box{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
}

/* Keep logo block from stretching header height */
.header-lower .logo-box{
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

/* Reduce extra white space in header-lower */
.header-lower{
  padding: 10px 0 !important;   /* controls header height */
}

/* Make menu sit center vertically */
.header-lower .main-menu{
  display: flex !important;
  align-items: center !important;
}

/* Remove unexpected top margins that push menu down/up */
.header-lower .main-menu .navigation{
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep "Get A Quote" aligned */
.header-lower .outer-box .btn-box,
.header-lower .outer-box .nav-btn{
  display: flex !important;
  align-items: center !important;
}
.header-lower{
  padding: 12px 0;
}
/* =========================================
   REMOVE LEAF SHAPE FROM TOP HEADER BAR
   ========================================= */

/* Decorative shape near phone/email */
.top-header .shape,
.top-header .shape-layer,
.top-header .pattern-layer{
  background-image: none !important;
  display: none !important;
}

/* In case it's a ::before / ::after decoration */
.top-header::before,
.top-header::after{
  display: none !important;
  content: none !important;
}
/* =========================================
   MOBILE HEADER FIX (prevents broken menu layout)
   ========================================= */

@media (max-width: 991px){

  /* Stop desktop menu from showing on mobile */
  .header-lower .main-menu{
    display: none !important;
  }

  /* Make header layout clean */
  .header-lower .outer-box{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* Keep logo compact on mobile */
  .header-lower .logo-box figure.logo img{
    height: 70px !important;
    width: auto !important;
  }

  /* Keep header height tight */
  .header-lower{
    padding: 10px 0 !important;
  }

  /* Button stays visible and aligned */
  .header-lower .btn-box,
  .header-lower .nav-btn{
    display: flex !important;
    align-items: center !important;
  }

  .header-lower .btn-box .theme-btn,
  .header-lower .nav-btn .theme-btn{
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  /* Top bar: avoid crowding */
  .top-header .top-inner{
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}
/* =========================================
   ABOUT SECTION – CENTER READ MORE (MOBILE ONLY)
   ========================================= */

@media (max-width: 767px){

  .about-section .btn-box,
  .about-section-one .btn-box,
  .about-section .link-box,
  .about-section-one .link-box{
    text-align: center;
  }

  .about-section .btn-box .theme-btn,
  .about-section-one .btn-box .theme-btn{
    display: inline-block;
  }

}
/* =========================================
   REMOVE TOP HEADER SHAPE (SAFE)
   ========================================= */

.header-top .shape{
  display: none !important;
}
/* =========================================
   ABOUT SECTION – REMOVE LEAF PATTERNS (shape-3/shape-4)
   ========================================= */
.about-section .pattern-layer .pattern-2,
.about-section .pattern-layer .pattern-3{
  background-image: none !important;
  display: none !important;
}
/* =========================================
   ABOUT SECTION – ADD TECH/BLUEPRINT ACCENT
   ========================================= */
.about-section{
  position: relative;
  overflow: hidden;
}

/* subtle blueprint dots grid */
.about-section::before{
  content:"";
  position:absolute;
  inset:-20px;
  background: radial-gradient(rgba(21,34,135,0.12) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .28;
  pointer-events:none;
  z-index: 0;
}

/* brand glows (orange + blue) */
.about-section::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,122,44,0.22) 0%, rgba(255,122,44,0) 55%),
    radial-gradient(circle at 20% 80%, rgba(21,34,135,0.18) 0%, rgba(21,34,135,0) 60%);
  pointer-events:none;
  z-index: 0;
}

/* keep actual content above */
.about-section .auto-container{
  position: relative;
  z-index: 2;
}
/* =========================================
   PRODUCT SECTION (OUR PRODUCT RANGE) – PREMIUM LOOK
   Different from About: soft gradient + diagonal sheen
   ========================================= */

.service-section.alternat-2{
  position: relative;
  overflow: hidden;
}

/* Soft premium background (not dots, not blueprint) */
.service-section.alternat-2::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 25%, rgba(21,34,135,0.10) 0%, rgba(21,34,135,0.00) 55%),
    radial-gradient(circle at 85% 10%, rgba(255,122,44,0.10) 0%, rgba(255,122,44,0.00) 55%),
    linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(247,249,252,1) 55%, rgba(255,255,255,1) 100%);
  pointer-events:none;
  z-index:0;
}

/* Diagonal “sheen” lines (subtle, premium) */
.service-section.alternat-2::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: repeating-linear-gradient(
    135deg,
    rgba(21,34,135,0.05) 0px,
    rgba(21,34,135,0.05) 1px,
    transparent 1px,
    transparent 18px
  );
  opacity: .22;
  pointer-events:none;
  z-index:0;
}

/* Keep content above background */
.service-section.alternat-2 .auto-container{
  position: relative;
  z-index: 2;
}

/* -------- Cards: more premium -------- */

.service-section.alternat-2 .service-block-one .inner-box{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-section.alternat-2 .service-block-one .inner-box:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0,0,0,.12);
  border-color: rgba(21,34,135,.18);
}

/* Image: consistent crop + gentle zoom */
.service-section.alternat-2 .service-block-one .image-box .image{
  overflow: hidden;
  border-radius: 10px;
}

.service-section.alternat-2 .service-block-one .image-box img{
  width: 100%;
  height: 230px;           /* consistent premium grid */
  object-fit: cover;
  transform: scale(1);
  transition: transform .45s ease;
}

.service-section.alternat-2 .service-block-one .inner-box:hover .image-box img{
  transform: scale(1.06);
}

/* Icon badge: brand feel */
.service-section.alternat-2 .service-block-one .icon-box{
  background: rgba(21,34,135,.10) !important;
  color: #152287 !important;
  box-shadow: 0 10px 24px rgba(21,34,135,.18);
}

/* Title: stronger */
.service-section.alternat-2 .service-block-one h3 a{
  color: #0f1d5a;
}

.service-section.alternat-2 .service-block-one .lower-content p{
  color: #5a5a5a;
}

/* Learn more: slightly more premium */
.service-section.alternat-2 .service-block-one .overlay-btn{
  border-radius: 10px;
}

/* Mobile: reduce pattern strength */
@media (max-width: 767px){
  .service-section.alternat-2::after{ opacity: .12; }
  .service-section.alternat-2 .service-block-one .image-box img{ height: 210px; }
}
/* =========================================
   PREMIUM SLIDER → ABOUT DIVIDER (OPTIONAL)
   ========================================= */

.about-section{
  position: relative;
}

.about-section::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width: 120px;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(21,34,135,0),
    rgba(21,34,135,.6),
    rgba(255,122,44,.6),
    rgba(21,34,135,.6),
    rgba(21,34,135,0)
  );
}
/* =========================================
   REMOVE BANNER (SLIDER) PATTERN DIVIDER
   ========================================= */
.banner-section .pattern-layer{
  display: none !important;
  background: none !important;
}
/* =========================================
   STOP SLIDER IMAGE ZOOM / SCALE ANIMATION
   ========================================= */
.banner-section .slide-item{
  overflow: hidden !important;   /* prevents image from spilling */
}

.banner-section .image-layer{
  transform: none !important;
  animation: none !important;
  transition: none !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Premium thin separator between slider and next section */
.banner-section{
  position: relative;
}
.banner-section::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 6px;
  background: linear-gradient(
    90deg,
    rgba(21,34,135,0),
    rgba(21,34,135,.25),
    rgba(255,122,44,.18),
    rgba(21,34,135,.25),
    rgba(21,34,135,0)
  );
  pointer-events:none;
}
/* =========================================
   PREMIUM CTA SECTION (NO HTML CHANGE)
   ========================================= */

.cta-section{
  position: relative;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
}

/* Dark overlay + brand gradients */
.cta-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(6,18,55,0.92) 0%, rgba(6,18,55,0.75) 45%, rgba(6,18,55,0.92) 100%),
    radial-gradient(circle at 20% 30%, rgba(255,122,44,0.22) 0%, rgba(255,122,44,0) 55%),
    radial-gradient(circle at 80% 70%, rgba(21,34,135,0.25) 0%, rgba(21,34,135,0) 60%);
  z-index: 0;
  pointer-events: none;
}

/* Subtle “premium sheen” */
.cta-section::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 1px,
    transparent 1px,
    transparent 22px
  );
  opacity: .22;
  z-index: 0;
  pointer-events: none;
}

/* Keep CTA content above overlays */
.cta-section .auto-container,
.cta-section .inner-box{
  position: relative;
  z-index: 2;
}

/* Add a glass card feel */
.cta-section .inner-box{
  padding: 34px 34px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 50px rgba(0,0,0,0.30);
  backdrop-filter: blur(10px);
}

/* Typography improvements */
.cta-section .sec-title.light .sub-title{
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}

.cta-section .sec-title.light h2{
  color: #fff !important;
  margin-top: 10px;
  line-height: 1.08;
  font-weight: 700;
  text-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Button: premium */
.cta-section .btn-box .theme-btn.btn-one{
  background: #ff7a2c !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 16px 22px !important;
  box-shadow: 0 14px 30px rgba(255,122,44,0.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cta-section .btn-box .theme-btn.btn-one:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(255,122,44,0.45);
  filter: brightness(1.03);
}

/* Responsive */
@media (max-width: 991px){
  .cta-section .inner-box{
    padding: 26px 18px;
    text-align: center;
  }
  .cta-section .sec-title.light{
    float: none !important;
    display: block;
  }
  .cta-section .btn-box{
    float: none !important;
    margin-top: 18px !important;
    text-align: center;
  }
}
/* ================================
   Floating WhatsApp (after slider)
   ================================ */

.whatsapp-float{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  z-index: 9999;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

/* Show state */
.whatsapp-float.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

/* Wave / pulse effect */
.whatsapp-float::before,
.whatsapp-float::after{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.55);
  opacity: 0;
  animation: waPulse 1.8s ease-out infinite;
}

.whatsapp-float::after{
  inset: -18px;
  animation-delay: .6s;
  border-color: rgba(37,211,102,.35);
}

@keyframes waPulse{
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* Nice hover */
.whatsapp-float:hover{
  filter: brightness(1.05);
  box-shadow: 0 20px 55px rgba(0,0,0,.22);
}

/* Mobile size */
@media (max-width: 767px){
  .whatsapp-float{
    width: 52px;
    height: 52px;
    font-size: 26px;
    right: 14px;
  }
}
/* =========================================
   FERRO FABS – PREMIUM FUN FACTS COUNTER
   ========================================= */

.ff-facts{
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 55%, #ffffff 100%);
}

/* soft brand glows */
.ff-facts::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(21,34,135,0.12) 0%, rgba(21,34,135,0) 55%),
    radial-gradient(circle at 85% 15%, rgba(255,122,44,0.12) 0%, rgba(255,122,44,0) 55%),
    radial-gradient(circle at 80% 85%, rgba(21,34,135,0.10) 0%, rgba(21,34,135,0) 55%);
  pointer-events:none;
  z-index:0;
}

.ff-facts .auto-container{ position: relative; z-index: 2; }

.ff-facts-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 25px;
}

.ff-fact-card{
  position: relative;
  border-radius: 16px;
  padding: 22px 18px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-align: center;
}

.ff-fact-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.12);
  border-color: rgba(21,34,135,0.16);
}

.ff-icon{
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(21,34,135,0.10);
  color: #152287;
  font-size: 22px;
}

.ff-number{
  font-size: 44px;
  line-height: 1.05;
  font-weight: 800;
  color: #0f1d5a;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.ff-label{
  font-size: 14px;
  color: #5a5a5a;
  font-weight: 600;
}

@media (max-width: 991px){
  .ff-facts-grid{ grid-template-columns: repeat(2, 1fr); }
  .ff-facts{ padding: 70px 0; }
}
@media (max-width: 480px){
  .ff-number{ font-size: 38px; }
}
/* =========================================
   FERRO FABS – COOKIE CONSENT (PREMIUM)
   ========================================= */

.ff-cookie-banner{
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  display: none; /* shown via JS */
}

.ff-cookie-inner{
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;

  padding: 16px 16px;
  border-radius: 14px;

  /* premium glass */
  background: rgba(10, 25, 70, 0.92);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
}

.ff-cookie-text h4{
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}

.ff-cookie-text p{
  margin: 0;
  color: rgba(255,255,255,0.86);
  font-size: 13.5px;
  line-height: 1.45;
}

.ff-cookie-text a{
  color: #ff7a2c;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ff-cookie-actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.ff-cookie-btn{
  border: 0;
  cursor: pointer;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  background: #ff7a2c;
  color: #fff;
  box-shadow: 0 12px 26px rgba(255,122,44,0.28);
}

.ff-cookie-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 32px rgba(255,122,44,0.36);
}

.ff-cookie-btn.outline{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: none;
}

.ff-cookie-btn.outline:hover{
  border-color: rgba(255,255,255,0.60);
}

/* Mobile: stacked */
@media (max-width: 767px){
  .ff-cookie-inner{
    flex-direction: column;
    align-items: stretch;
  }
  .ff-cookie-actions{
    width: 100%;
  }
  .ff-cookie-btn{
    width: 100%;
  }
}
/* =========================================
   FERRO FABS – PREMIUM FOOTER UPGRADE
   ========================================= */

.main-footer{
  position: relative;
  background: linear-gradient(
    180deg,
    #0b2a55 0%,
    #0a2346 55%,
    #081b36 100%
  );
  overflow: hidden;
}

/* Subtle brand glow */
.main-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,122,44,0.12), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(21,34,135,0.25), transparent 50%);
  pointer-events:none;
  z-index:0;
}

/* Thin premium divider on top */
.main-footer::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.25),
    transparent
  );
}

/* Keep footer content above effects */
.main-footer .auto-container{
  position: relative;
  z-index: 2;
}
/* Footer headings */
.main-footer h4,
.main-footer .footer-title{
  color:#ffffff;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:18px;
  position: relative;
}

/* Accent underline */
.main-footer h4::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:28px;
  height:3px;
  background:#ff7a2c;
  border-radius:3px;
}

/* Footer text */
.main-footer p,
.main-footer li,
.main-footer a{
  color:rgba(255,255,255,0.78);
  transition: color .2s ease, transform .2s ease;
}

/* Hover lift for links */
.main-footer a:hover{
  color:#ff7a2c;
  transform: translateX(3px);
}
/* Social icons */
.main-footer .social-links li a{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

.main-footer .social-links li a:hover{
  background:#ff7a2c;
  border-color:#ff7a2c;
  box-shadow:0 14px 35px rgba(255,122,44,0.35);
}
/* Bottom footer bar */
.footer-bottom{
  background: rgba(0,0,0,0.25);
  border-top:1px solid rgba(255,255,255,0.1);
}

.footer-bottom p,
.footer-bottom a{
  color:rgba(255,255,255,0.75);
}

.footer-bottom a:hover{
  color:#ff7a2c;
}
/* =========================================
   FERRO FABS – PREMIUM FOOTER UPGRADE
   (Paste at very end of ferro-fabs-theme.css)
   ========================================= */

.main-footer{
  position: relative;
  background: linear-gradient(180deg,#0b2a55 0%,#0a2346 55%,#081b36 100%) !important;
  overflow: hidden;
}

/* Subtle brand glow */
.main-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,122,44,0.12), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(21,34,135,0.25), transparent 50%);
  pointer-events:none;
  z-index:0;
}

/* Thin premium divider on top */
.main-footer::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  pointer-events:none;
  z-index:1;
}

/* Keep footer content above effects */
.main-footer .auto-container{
  position: relative;
  z-index: 2;
}

/* Headings */
.main-footer h4,
.main-footer .footer-title{
  color:#ffffff !important;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:18px;
  position: relative;
}

/* Accent underline */
.main-footer h4::after,
.main-footer .footer-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:28px;
  height:3px;
  background:#ff7a2c;
  border-radius:3px;
}

/* Footer text + links */
.main-footer p,
.main-footer li,
.main-footer a{
  color:rgba(255,255,255,0.78) !important;
  transition: color .2s ease, transform .2s ease;
}

/* Hover polish */
.main-footer a:hover{
  color:#ff7a2c !important;
  transform: translateX(3px);
}

/* Social icons as premium round buttons */
.main-footer .social-links li a{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

.main-footer .social-links li a:hover{
  background:#ff7a2c;
  border-color:#ff7a2c;
  box-shadow:0 14px 35px rgba(255,122,44,0.35);
}

/* Bottom bar = stronger finish */
.footer-bottom{
  background: rgba(0,0,0,0.25) !important;
  border-top:1px solid rgba(255,255,255,0.10) !important;
}

.footer-bottom p,
.footer-bottom a{
  color:rgba(255,255,255,0.75) !important;
}

.footer-bottom a:hover{
  color:#ff7a2c !important;
}
/* =========================================
   FOOTER PREMIUM LOOK – CATCH ALL
   ========================================= */

/* targets footer even if class name differs */
footer{
  background: linear-gradient(180deg,#0b2a55 0%,#0a2346 55%,#081b36 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* visible texture + glow */
footer::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;

  background:
    radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1px),
    radial-gradient(circle at 15% 30%, rgba(255,122,44,0.18), transparent 52%),
    radial-gradient(circle at 80% 30%, rgba(21,34,135,0.35), transparent 55%) !important;

  background-size: 26px 26px, auto, auto !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
  opacity: .55 !important;
}

/* top premium highlight */
footer::after{
  content:"" !important;
  position:absolute !important;
  left:0; right:0; top:0 !important;
  height:2px !important;
  z-index:1 !important;
  pointer-events:none !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,122,44,0.65),
    rgba(255,255,255,0.20),
    rgba(21,34,135,0.55),
    transparent
  ) !important;
}

/* keep footer content above overlay */
footer *{
  position: relative;
  z-index: 2;
}
/* Force ONLY loader letters to match website font */
.loader-wrap .txt-loading,
.loader-wrap .letters-loading{
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}
.loader-wrap .txt-loading{
  text-transform: uppercase;
}
/* =========================================
   MOBILE: HIDE ABOUT SECTION (FERRO FABS)
   ========================================= */
@media (max-width: 767px){
  .about-section,
  .about-section-one{
    display: none !important;
  }
}
/* =========================================
   MOBILE: HIDE TOP CONTACT & SOCIAL BAR
   ========================================= */
@media (max-width: 767px){

  /* Entire top header strip */
  .header-top,
  .top-bar,
  .top-header,
  .header-upper,
  .header-top-one{
    display: none !important;
  }

}
/* =========================================
   MOBILE HEADER CLEANUP – FERRO FABS
   ========================================= */
@media (max-width: 767px){

  /* 1️⃣ Hide Contact Us button on top header */
  .header-contact-btn,
  .contact-btn,
  .btn-contact,
  .header-btn{
    display: none !important;
  }

  /* 2️⃣ Add thin premium line on top */
  body::before{
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(
      90deg,
      #0b2b55 0%,
      #f27a1a 100%
    );
  }

}
/* =========================================
   MOBILE HEADER CLEANUP – FERRO FABS
   ========================================= */
@media (max-width: 767px){

  /* 1️⃣ Hide Contact Us button on top header */
  .header-contact-btn,
  .contact-btn,
  .btn-contact,
  .header-btn{
    display: none !important;
  }

  /* 2️⃣ Add thin premium line on top */
  body::before{
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(
      90deg,
      #0b2b55 0%,
      #f27a1a 100%
    );
  }

}
/* =========================================
   MOBILE HEADER POLISH – LOGO & NAV
   ========================================= */
@media (max-width: 767px){

  /* 1️⃣ Increase logo size on mobile */
  .main-header .logo img,
  .navbar-brand img{
    max-height: 68px;   /* adjust between 64–72 if needed */
    width: auto;
  }

  /* 2️⃣ Reduce header padding / height */
  .main-header,
  .header-lower,
  .nav-outer{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: auto;
  }

  /* 3️⃣ Make hamburger menu clearer */
  .navbar-toggler{
    padding: 8px 10px;
    border-radius: 6px;
  }

  .navbar-toggler-icon{
    width: 26px;
    height: 26px;
  }

}
/* =========================================
   MOBILE: REMOVE CONTACT US BUTTON (TOP)
   ========================================= */
@media (max-width: 767px){

  /* Contact button in header */
  .contact-us-btn,
  .contact-btn,
  .btn-contact,
  .header-btn,
  .header-button,
  .nav-btn,
  .nav-right .btn,
  .main-header .btn{
    display: none !important;
  }

}
/* =========================================================
   FERRO FABS – MOBILE OPTIMIZATION (CONSOLIDATED & LOCKED)
   Applies ONLY on mobile view
   ========================================================= */
@media (max-width: 767.98px){

  /* -----------------------------------------
     1. HIDE TOP BAR (SOCIAL / PHONE / EMAIL)
     ----------------------------------------- */
  .header-top,
  .top-bar,
  .top-header,
  .header-upper,
  .header-top-one,
  .social-links,
  .social-icons,
  .header-social,
  .header-phone,
  .header-email,
  .header-contact,
  .top-contact{
    display: none !important;
  }

  /* -----------------------------------------
     2. REMOVE "CONTACT US" BUTTON (TOP HEADER)
     ----------------------------------------- */
  .contact-us-btn,
  .contact-btn,
  .btn-contact,
  .header-btn,
  .header-button,
  .nav-btn,
  .nav-right .btn,
  .main-header .btn{
    display: none !important;
  }

  /* -----------------------------------------
     3. ADD THIN BRAND LINE ON TOP (MOBILE)
     ----------------------------------------- */
  body::before{
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(
      90deg,
      #0b2b55 0%,
      #f27a1a 100%
    );
  }

  /* -----------------------------------------
     4. HIDE ABOUT SECTION ON MOBILE
     ----------------------------------------- */
  .about-section,
  .about-section-one{
    display: none !important;
  }

  /* -----------------------------------------
     5. MOBILE HEADER POLISH (LOGO + NAV)
     ----------------------------------------- */
  .main-header .logo img,
  .navbar-brand img{
    max-height: 68px;   /* strong brand presence */
    width: auto;
  }

  .main-header,
  .header-lower,
  .nav-outer{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: auto;
  }

  .navbar-toggler{
    padding: 8px 10px;
    border-radius: 6px;
  }

  .navbar-toggler-icon{
    width: 26px;
    height: 26px;
  }

  /* -----------------------------------------
     6. DESKTOP vs MOBILE SLIDER CONTROL
     ----------------------------------------- */
  .desktop-slider{
    display: none !important;
  }
  .mobile-slider{
    display: block !important;
  }

  /* Mobile slider height + clean look */
  .mobile-slider .slide-item{
    min-height: 520px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Lighter overlay for mobile banners */
  @media (max-width: 767.98px){

  .mobile-slider .image-layer:before{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.45) 35%,
      rgba(0,0,0,0.35) 65%,
      rgba(0,0,0,0.55) 100%
    );
  }

}

/* =========================================================
   DESKTOP DEFAULTS (DO NOT TOUCH)
   ========================================================= */
.desktop-slider{
  display: block;
}
.mobile-slider{
  display: none;
}
@media (max-width: 767.98px){

  .mobile-slider .content-box{
    position:absolute;
    bottom:22%;
    left:0;
    right:0;
    text-align:center;
    padding:0 20px;
  }

  .mobile-slider h1{
    font-size:32px;
    line-height:38px;
    font-weight:700;
    text-shadow:0 4px 18px rgba(0,0,0,0.55);
    margin:0;
  }

}
/* ===== Desktop vs Mobile Slider ===== */
.desktop-slider{display:block;}
.mobile-slider{display:none;}

@media (max-width: 767.98px){

  .desktop-slider{display:none !important;}
  .mobile-slider{display:block !important;}

  .mobile-slider .slide-item{
    min-height:420px;
  }

  .mobile-h1-center{
    min-height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 18px;
    position:relative;
    z-index:5;
  }

  .mobile-h1{
    margin:0;
    font-size:32px;
    line-height:38px;
    font-weight:800;
    color:#fff;
    text-shadow:0 6px 22px rgba(0,0,0,0.55);
  }

  /* overlay for readability */
  .mobile-slider .image-layer:before{
    background:linear-gradient(
      90deg,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.25) 55%,
      rgba(0,0,0,0) 100%
    );
  }

  /* REMOVE ALL CONTROLS */
  .mobile-slider .owl-nav,
  .mobile-slider .owl-dots{
    display:none !important;
  }
}
/* =========================================
   MOBILE SLIDER: MAKE WHITE H1 POP ON LIGHT BANNERS
   (Add at END of your existing CSS)
   ========================================= */
@media (max-width: 767.98px){

  /* Stronger overlay behind text (does NOT change your images) */
  .mobile-slider .image-layer::before,
  .mobile-slider .image-layer:before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.35) 45%,
      rgba(0,0,0,0.35) 65%,
      rgba(0,0,0,0.65) 100%
    ) !important;
    pointer-events: none !important;
  }

  /* Center text stays readable */
  .mobile-slider .mobile-h1{
    color:#fff !important;
    text-shadow:
      0 3px 10px rgba(0,0,0,.70),
      0 10px 26px rgba(0,0,0,.55) !important;
  }

  /* Optional premium glass (if you want) */
  .mobile-slider .mobile-h1{
    display:inline-block !important;
    background: rgba(0,0,0,0.18) !important;
    padding: 10px 16px !important;
    border-radius: 14px !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}