/* ==========================================================================
   Ahram / Life Water — Modern Home Overhaul
   Loaded AFTER style.css and responsive.css to override visual styles.
   IMPORTANT: Does NOT touch the jQuery ripples water effect on #home.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
   /* Brand */
   --c-brand:#76ab42;          /* Brand green */
   --c-brand-dark:#4a8b2a;
   --c-brand-orange:#ee4430;   /* Brand orange */
   --c-brand-orange-dark:#c8341f;

   /* Water (used for hero only, since hero is water themed) */
   --c-water-1:#5fd0ff;
   --c-water-2:#1d8bd9;
   --c-water-3:#0a3a66;
   --c-deep:#062a4d;

   --c-ink:#0d1b2a;
   --c-muted:#5a6a7a;
   --c-card:#ffffff;
   --c-soft:#f5f9f1;

   --shadow-sm:0 6px 18px rgba(10,40,80,.08);
   --shadow-md:0 14px 40px rgba(10,40,80,.12);
   --shadow-lg:0 30px 60px rgba(10,40,80,.18);
   --radius-md:14px;
   --radius-lg:22px;

   /* Hero water gradient (kept for hero only) */
   --grad-water:linear-gradient(135deg,#5fd0ff 0%, #1d8bd9 50%, #0a3a66 100%);
   /* Brand-conscious gradients used everywhere else */
   --grad-brand:linear-gradient(135deg,#76ab42 0%, #4a8b2a 100%);
   --grad-brand-warm:linear-gradient(135deg,#76ab42 0%, #ee4430 100%);
   --grad-warm:linear-gradient(135deg,#ff7a59 0%, #ee4430 100%);
}

/* ===== Global type refinements (only on home page sections we modernize) === */
body{
   font-family:'Plus Jakarta Sans','Poppins',sans-serif;
   color:var(--c-ink);
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
}
html{scroll-behavior:smooth;}

/* ===== NAVBAR — glassy/modern ============================================ */
nav.navbar{
   padding-top:18px;
   padding-bottom:18px;
   background:linear-gradient(180deg, rgba(6,42,77,.35), rgba(6,42,77,0));
   backdrop-filter:blur(6px);
   -webkit-backdrop-filter:blur(6px);
}
nav.navbar .nav-item .nav-link{
   font-family:'Inter','Plus Jakarta Sans',sans-serif;
   letter-spacing:.5px;
   font-weight:500;
   font-size:13px;
   padding:8px 0!important;
   transition:color .25s ease;
}
nav.navbar .nav-item .nav-link:hover{color:#a4d56a;}
nav.navbar .nav-item .nav-link:before{
   bottom:-4px;
   height:2px;
   background:var(--c-brand-orange);
   border-radius:2px;
}
nav.fixed-top{
   background:rgba(255,255,255,.85)!important;
   backdrop-filter:blur(14px) saturate(160%);
   -webkit-backdrop-filter:blur(14px) saturate(160%);
   box-shadow:0 8px 30px rgba(10,40,80,.08);
}
nav.fixed-top .nav-item .nav-link{color:var(--c-ink)!important;}
nav.fixed-top .nav-item .nav-link.active{color:var(--c-brand)!important;}
nav.fixed-top .nav-item .nav-link:hover{color:var(--c-brand)!important;}

/* ===== HERO / BANNER (ripples preserved) ================================= */
.banner{
   background-image:url('../img/intro.jpg');
   background-size:cover;
   background-position:center center;
   background-attachment:fixed;
   min-height:100vh;
   height:100vh;
}
/* Gradient overlay sits ABOVE the ripples canvas but ignores pointer events,
   so users can still create water ripples by interacting with the hero. */
.banner:before{
   content:"";
   position:absolute;
   inset:0;
   background:
      radial-gradient(60% 80% at 20% 10%, rgba(95,208,255,.45), transparent 60%),
      radial-gradient(70% 80% at 90% 90%, rgba(10,58,102,.65), transparent 60%),
      linear-gradient(180deg, rgba(6,42,77,.55) 0%, rgba(6,42,77,.65) 60%, rgba(6,42,77,.85) 100%);
   pointer-events:none;
   z-index:5;
}

/* The original .banner-area sits above overlays */
.banner-area{z-index:10;}
.banner-caption{padding:0 16px;}

/* Modern hero typography */
.hero-eyebrow{
   display:inline-flex;
   align-items:center;
   gap:10px;
   padding:8px 16px;
   border-radius:999px;
   background:rgba(255,255,255,.12);
   border:1px solid rgba(255,255,255,.25);
   color:#eaf6ff;
   font-size:12px;
   letter-spacing:2px;
   text-transform:uppercase;
   font-weight:600;
   backdrop-filter:blur(6px);
   -webkit-backdrop-filter:blur(6px);
   margin-bottom:22px;
   animation:fadeUp .9s .1s both;
}
.hero-eyebrow .dot{
   width:8px; height:8px; border-radius:50%;
   background:#a4d56a;
   box-shadow:0 0 0 4px rgba(164,213,106,.25);
}
.banner-welcome>h3,
.banner-welcome .hero-title{
   font-family:'Plus Jakarta Sans',sans-serif;
   font-size:clamp(40px, 7vw, 86px);
   font-weight:800;
   line-height:1.05;
   letter-spacing:-1.5px;
   color:#fff;
   margin-bottom:18px;
   text-shadow:0 6px 30px rgba(0,0,0,.25);
   animation:fadeUp 1s .15s both;
}
.banner-welcome .hero-title .grad{
   background:linear-gradient(120deg,#bfe6ff 0%, #5fd0ff 50%, #ffffff 100%);
   -webkit-background-clip:text;
   background-clip:text;
   color:transparent;
}
/* Brand-flavoured highlight option (used optionally) */
.banner-welcome .hero-title .grad-brand{
   background:linear-gradient(120deg,#a4d56a 0%, #76ab42 50%, #ee4430 100%);
   -webkit-background-clip:text;
   background-clip:text;
   color:transparent;
}
.caption-inner{
   animation:fadeUp 1s .3s both;
}
.caption-inner span,
.caption-inner b{
   font-size:clamp(18px, 2.4vw, 30px)!important;
   font-weight:500!important;
}
.typed-static{color:#cfe9ff!important;}
.ah-words-wrapper b{color:#fff;}
.ah-headline.clip .ah-words-wrapper:after{background-color:#bfe6ff!important;}

.hero-sub{
   max-width:640px;
   margin:18px auto 30px;
   color:#dbeaf7;
   font-size:clamp(14px,1.4vw,17px);
   line-height:1.7;
   animation:fadeUp 1s .45s both;
}

.hero-cta{
   display:flex;
   gap:14px;
   justify-content:center;
   flex-wrap:wrap;
   animation:fadeUp 1s .6s both;
}
.btn-water{
   position:relative;
   display:inline-flex;
   align-items:center;
   gap:10px;
   padding:14px 28px;
   border-radius:999px;
   font-weight:600;
   font-size:14px;
   letter-spacing:.5px;
   text-transform:uppercase;
   color:#fff;
   background:var(--grad-brand);
   box-shadow:0 14px 30px rgba(118,171,66,.45);
   border:none;
   transition:transform .25s ease, box-shadow .25s ease, background .25s ease, filter .25s ease;
}
.btn-water:hover{
   transform:translateY(-3px);
   color:#fff;
   background:var(--grad-brand-warm);
   filter:brightness(1.02);
   box-shadow:0 22px 40px rgba(238,68,48,.45);
}
.btn-ghost{
   display:inline-flex;
   align-items:center;
   gap:10px;
   padding:13px 26px;
   border-radius:999px;
   font-weight:600;
   font-size:14px;
   letter-spacing:.5px;
   text-transform:uppercase;
   color:#fff;
   background:rgba(255,255,255,.08);
   border:1.5px solid rgba(255,255,255,.55);
   transition:all .25s ease;
   backdrop-filter:blur(8px);
   -webkit-backdrop-filter:blur(8px);
}
.btn-ghost:hover{
   background:#fff;
   color:var(--c-deep);
   transform:translateY(-3px);
}
.btn-water i,.btn-ghost i{font-size:13px;}

/* Mouse / scroll indicator restyle */
.mouse-icon{
   background:rgba(255,255,255,.08)!important;
   border-color:rgba(255,255,255,.7)!important;
   z-index:10;
   backdrop-filter:blur(4px);
   -webkit-backdrop-filter:blur(4px);
}
.mouse-icon .wheel{background:#bfe6ff!important;}

/* SVG wave at bottom of hero */
.banner-wave{
   position:absolute;
   left:0; right:0; bottom:-1px;
   width:100%;
   height:120px;
   display:block;
   z-index:8;
   pointer-events:none;
}
.banner-wave svg{width:100%; height:100%; display:block;}

/* ===== SECTION HEADINGS (modern minimal, brand-conscious) ================ */
.site-heading{
   margin-bottom:60px;
   position:relative;
   text-align:center;
}
.site-heading>h2{
   font-family:'Plus Jakarta Sans',sans-serif;
   font-size:clamp(28px,4vw,46px)!important;
   font-weight:800;
   color:var(--c-brand)!important;        /* Brand green */
   letter-spacing:-.5px;
   text-transform:capitalize;
   display:inline-block;
}
/* Disable the legacy split lines on either side of the heading */
.site-heading>h2:before,
.site-heading>h2:after{display:none!important;}
/* Modern single brand-orange underline */
.site-heading:after{
   content:"";
   display:block;
   width:80px; height:4px;
   margin:18px auto 0;
   border-radius:4px;
   background:var(--c-brand-orange);      /* Brand orange */
}
.section-eyebrow{
   display:inline-block;
   font-size:12px;
   font-weight:700;
   letter-spacing:3px;
   text-transform:uppercase;
   color:var(--c-brand-orange);           /* Brand orange */
   margin-bottom:10px;
}

/* ===== PRODUCTS — modern glass cards ===================================== */
.fabon-about-area{
   background:linear-gradient(180deg,#ffffff 0%, #f3f8fc 100%);
   position:relative;
   overflow:hidden;
}
.fabon-about-area:before{
   content:"";
   position:absolute;
   width:520px; height:520px; border-radius:50%;
   background:radial-gradient(circle, rgba(118,171,66,.18), transparent 70%);
   top:-180px; right:-180px;
   pointer-events:none;
}
.fabon-about-area:after{
   content:"";
   position:absolute;
   width:420px; height:420px; border-radius:50%;
   background:radial-gradient(circle, rgba(238,68,48,.12), transparent 70%);
   bottom:-150px; left:-150px;
   pointer-events:none;
}

.product-card{
   position:relative;
   background:#fff;
   border-radius:var(--radius-lg);
   box-shadow:var(--shadow-sm);
   padding:34px 26px 28px;
   text-align:center;
   transition:transform .35s ease, box-shadow .35s ease;
   margin-bottom:30px;
   overflow:hidden;
   border:1px solid rgba(10,58,102,.06);
}
.product-card:before{
   content:"";
   position:absolute;
   inset:0;
   border-radius:var(--radius-lg);
   padding:1.5px;
   background:var(--grad-brand-warm);
   -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
   -webkit-mask-composite:xor;
           mask-composite:exclude;
   opacity:0;
   transition:opacity .35s ease;
   pointer-events:none;
}
.product-card:hover{
   transform:translateY(-10px);
   box-shadow:var(--shadow-lg);
}
.product-card:hover:before{opacity:1;}

.product-card .product-img{
   width:170px;
   height:170px;
   margin:0 auto 22px;
   border-radius:50%;
   overflow:hidden;
   position:relative;
   background:linear-gradient(135deg,#f1f8e8,#ffffff);
   box-shadow:inset 0 0 0 1px rgba(118,171,66,.12), 0 18px 40px rgba(10,40,80,.12);
   transition:transform .5s ease;
}
.product-card .product-img img{
   width:100%; height:100%;
   object-fit:cover;
   transition:transform .6s ease;
}
.product-card:hover .product-img img{transform:scale(1.08);}
.product-card h4{
   font-family:'Plus Jakarta Sans',sans-serif;
   font-weight:700;
   font-size:20px;
   color:var(--c-ink);
   margin:6px 0 8px;
   letter-spacing:-.2px;
}
.product-card p{
   color:var(--c-muted);
   font-size:14px;
   margin-bottom:18px;
}
.product-card .product-link{
   display:inline-flex;
   align-items:center;
   gap:8px;
   padding:10px 22px;
   border-radius:999px;
   background:var(--grad-brand);
   color:#fff;
   font-weight:600;
   font-size:13px;
   letter-spacing:.5px;
   text-transform:uppercase;
   box-shadow:0 10px 24px rgba(118,171,66,.4);
   transition:transform .25s ease, box-shadow .25s ease;
}
.product-card .product-link:hover{
   transform:translateY(-2px);
   color:#fff;
   box-shadow:0 16px 30px rgba(238,68,48,.45);
   background:var(--grad-brand-warm);
}
.product-card .product-link i{font-size:11px;}

/* ----- Section lead + water size chips (homepage) ------------------------ */
.site-heading .section-lead{
   max-width:640px;
   margin:12px auto 0;
   color:var(--c-muted);
   font-size:15px;
   line-height:1.7;
}
.site-heading .section-lead a{
   color:var(--c-brand-dark);
   font-weight:600;
   text-decoration:underline;
   text-underline-offset:3px;
}
.water-sizes-row{margin-bottom:36px;}
.water-sizes-label{
   text-align:center;
   font-size:13px;
   font-weight:600;
   letter-spacing:1.5px;
   text-transform:uppercase;
   color:var(--c-muted);
   margin-bottom:18px;
}
.water-sizes{
   display:flex;
   flex-wrap:wrap;
   justify-content:center;
   gap:12px 14px;
   list-style:none;
   padding:0;
   margin:0;
}
.water-sizes li{
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:4px;
}
.water-sizes small{
   font-size:10px;
   text-transform:uppercase;
   letter-spacing:.8px;
   color:var(--c-muted);
   font-weight:600;
}
.size-chip{
   display:inline-block;
   padding:10px 18px;
   border-radius:999px;
   background:var(--c-soft);
   border:1px solid rgba(118,171,66,.2);
   color:var(--c-brand-dark);
   font-weight:700;
   font-size:14px;
   box-shadow:var(--shadow-sm);
   transition:transform .25s ease, box-shadow .25s ease;
}
.size-chip.size-glass{
   background:linear-gradient(135deg,#eef7ff,#f5f9f1);
   border-color:rgba(29,139,217,.2);
   color:var(--c-water-3);
}
.water-sizes li:hover .size-chip{
   transform:translateY(-2px);
   box-shadow:var(--shadow-md);
}

/* ----- Founder card ------------------------------------------------------ */
.fabon-founder-area{background:linear-gradient(180deg,#ffffff 0%, var(--c-soft) 100%);}
.founder-card{
   background:#fff;
   border-radius:var(--radius-lg);
   padding:40px 44px;
   box-shadow:var(--shadow-md);
   border:1px solid rgba(118,171,66,.12);
   text-align:center;
}
.founder-card h3{
   font-size:26px;
   font-weight:800;
   color:var(--c-ink);
   margin-bottom:16px;
}
.founder-card p{
   color:var(--c-muted);
   font-size:15px;
   line-height:1.85;
   max-width:720px;
   margin:0 auto 20px;
}
.founder-card .product-link{display:inline-flex;}

/* Spec-only product tiles (glass / sparkling without photos) */
.product-spec-card{
   min-height:220px;
   display:flex;
   align-items:center;
   justify-content:center;
   background:linear-gradient(145deg,#f5f9f1,#eef7ff);
   border-radius:var(--radius-md);
   border:1px dashed rgba(118,171,66,.35);
}
.product-spec-card .cap h6{
   font-size:15px;
   line-height:1.5;
   color:var(--c-ink);
}
.product-spec-card .cap small{
   display:block;
   margin-top:8px;
   font-size:11px;
   color:var(--c-muted);
   font-weight:500;
   text-transform:none;
   letter-spacing:0;
}
.fabon-work-area .cap h6 small{
   display:block;
   margin-top:6px;
   font-size:11px;
   color:rgba(255,255,255,.85);
   font-weight:500;
   letter-spacing:0;
   text-transform:none;
}

/* ----- Footer parent link ------------------------------------------------ */
.fabon-footer-area .footer-parent{margin-bottom:8px;}
.fabon-footer-area .footer-parent a{
   color:#a4d56a;
   font-weight:600;
   letter-spacing:.5px;
}
.fabon-footer-area .footer-parent a:hover{color:#fff;}

/* ----- Life products page (life-products.html) ----------------------------- */
.life-products-page .product-pack-filter ul li{
   cursor:pointer;
   transition:background .25s ease, color .25s ease;
}
.life-product-card{
   background:#fff;
   border-radius:var(--radius-lg);
   box-shadow:var(--shadow-sm);
   border:1px solid rgba(118,171,66,.12);
   overflow:hidden;
   height:100%;
   display:flex;
   flex-direction:column;
   transition:transform .3s ease, box-shadow .3s ease;
}
.life-product-card:hover{
   transform:translateY(-6px);
   box-shadow:var(--shadow-md);
}
.life-product-media{
   position:relative;
   background:linear-gradient(180deg,#f5f9f1 0%, #eef7ff 100%);
   padding:28px 20px 20px;
   text-align:center;
   min-height:220px;
   display:flex;
   align-items:flex-end;
   justify-content:center;
}
.life-product-media img{
   max-height:200px;
   width:auto;
   max-width:100%;
   object-fit:contain;
}
.life-product-media-featured{
   min-height:auto;
   padding:0;
   align-items:center;
   justify-content:center;
   background:#fff;
   aspect-ratio:2560 / 1810;
   overflow:hidden;
}
.life-product-media-featured img{
   width:100%;
   height:100%;
   max-height:none;
   object-fit:cover;
   object-position:center center;
   display:block;
}
.life-product-media-glass-shot{
   background:linear-gradient(180deg,#f5f9f1 0%, #eef7ff 100%);
}
.life-product-media-glass-shot img{
   width:100%;
   height:100%;
   object-fit:cover;
   object-position:center 58%;
}
.life-product-media-glass{
   align-items:center;
}
.glass-placeholder{
   width:100px;
   height:140px;
   border-radius:12px 12px 8px 8px;
   background:linear-gradient(145deg,rgba(95,208,255,.25),rgba(29,139,217,.15));
   border:2px solid rgba(29,139,217,.25);
   display:flex;
   align-items:center;
   justify-content:center;
   color:var(--c-water-2);
   font-size:42px;
}
.life-product-badge{
   position:absolute;
   top:14px;
   right:14px;
   padding:5px 12px;
   border-radius:999px;
   font-size:10px;
   font-weight:700;
   letter-spacing:.8px;
   text-transform:uppercase;
   background:var(--grad-brand);
   color:#fff;
}
.life-product-badge-glass{
   background:linear-gradient(135deg,#1d8bd9,#0a3a66);
}
.life-product-body{
   padding:24px 22px 28px;
   flex:1;
   display:flex;
   flex-direction:column;
}
.life-product-body h3{
   font-size:18px;
   font-weight:800;
   color:var(--c-ink);
   margin-bottom:14px;
   line-height:1.35;
}
.life-product-body h3 span{
   display:block;
   font-size:15px;
   font-weight:600;
   color:var(--c-brand-dark);
   margin-top:4px;
}
.life-product-features{
   list-style:none;
   padding:0;
   margin:0 0 16px;
   flex:1;
}
.life-product-features li{
   position:relative;
   padding-left:18px;
   margin-bottom:8px;
   font-size:13px;
   color:var(--c-muted);
   line-height:1.45;
}
.life-product-features li:before{
   content:"";
   position:absolute;
   left:0;
   top:7px;
   width:6px;
   height:6px;
   border-radius:50%;
   background:var(--c-brand);
}
.life-product-pack{
   margin:0;
   padding-top:12px;
   border-top:1px solid rgba(118,171,66,.15);
}
.life-product-pack small{
   font-size:11px;
   color:var(--c-muted);
}
.life-product-grid > [class*="col-"]{margin-bottom:30px;}
.life-product-grid .item{display:block;}
.life-products-page .product-pack-filter ul li{
   list-style:none;
   display:inline-block;
}

/* ----- Sustainability page ------------------------------------------------ */
.sustain-hero{
   position:relative;
   overflow:hidden;
   padding-bottom:80px;
   background:linear-gradient(180deg,#f5f9f1 0%, #ffffff 100%);
}
.sustain-hero-bg{
   position:absolute;
   inset:0;
   background-size:cover;
   background-position:center;
   opacity:.12;
   pointer-events:none;
}
.sustain-hero .container{position:relative;z-index:2;}
.sustain-hero-text h2{
   font-size:clamp(36px,5vw,52px);
   font-weight:800;
   color:var(--c-ink);
}
.sustain-intro{
   font-size:16px;
   line-height:1.85;
   color:var(--c-muted);
   max-width:540px;
}
.sustain-hero-img img{
   width:100%;
   height:auto;
   border-radius:var(--radius-lg);
   box-shadow:var(--shadow-lg);
}
.sustain-eco-band{
   background:linear-gradient(135deg,rgba(118,171,66,.08) 0%, rgba(29,139,217,.06) 100%);
}
.sustain-eco-icon img{
   max-width:180px;
   height:auto;
}
.sustain-pillars{background:#fff;}
.sustain-pillar-card{
   text-align:center;
   padding:36px 24px;
   margin-bottom:30px;
   background:var(--c-soft);
   border-radius:var(--radius-lg);
   border:1px solid rgba(118,171,66,.15);
   box-shadow:var(--shadow-sm);
   transition:transform .3s ease, box-shadow .3s ease;
   height:calc(100% - 30px);
}
.sustain-pillar-card:hover{
   transform:translateY(-6px);
   box-shadow:var(--shadow-md);
}
.sustain-pillar-icon{
   width:88px;
   height:88px;
   margin:0 auto 20px;
   display:flex;
   align-items:center;
   justify-content:center;
}
.sustain-pillar-icon img{
   max-width:100%;
   max-height:100%;
   object-fit:contain;
}
.sustain-pillar-icon-lg{
   width:110px;
   height:110px;
}
.sustain-pillar-card h4{
   font-size:17px;
   font-weight:700;
   line-height:1.4;
   color:var(--c-brand-dark);
   margin:0;
}
.sustain-pillar-card p{
   display:none;
}
.page-sustainability .sustain-pillar-card p{
   display:block;
}
.sustain-awards{
   background:linear-gradient(180deg,#ffffff 0%, var(--c-soft) 100%);
}
.sustain-awards-img{
   text-align:center;
   padding:20px;
   background:#fff;
   border-radius:var(--radius-lg);
   box-shadow:var(--shadow-md);
   border:1px solid rgba(118,171,66,.12);
}
.sustain-awards-img img{
   max-width:100%;
   height:auto;
}
.section_t_80{padding-top:80px;}
.section_b_50{padding-bottom:50px;}
.sustain-hero .site-heading.text-left h2:after{
   margin-left:0;
   margin-right:auto;
}
@media (max-width:991px){
   .sustain-hero-img{margin-top:32px;}
   .sustain-pillars .offset-md-2{margin-left:0;}
}

/* ----- Become a distributor page ------------------------------------------- */
.distributor-hero{
   position:relative;
   overflow:hidden;
   padding-bottom:70px;
   background:linear-gradient(180deg,#f5f9f1 0%, #ffffff 100%);
}
.distributor-hero-bg{
   position:absolute;
   inset:0;
   background-size:cover;
   background-position:center;
   opacity:.1;
   pointer-events:none;
}
.distributor-hero .container{position:relative;z-index:2;}
.distributor-hero-text h2{
   font-size:clamp(34px,5vw,50px);
   font-weight:800;
   color:var(--c-ink);
}
.distributor-intro{
   font-size:16px;
   line-height:1.85;
   color:var(--c-muted);
   max-width:560px;
}
.distributor-hero-img img{
   width:100%;
   height:auto;
   border-radius:var(--radius-lg);
   box-shadow:var(--shadow-lg);
}
/* Distributor page layout — see page-water.css for cards & form */
.distributor-hero .site-heading.text-left h2:after{
   margin-left:0;
   margin-right:auto;
}
@media (max-width:991px){
   .distributor-hero-img{margin-top:28px;}
}

/* About / Brand row */
.brand-row{margin-top:50px;}
.about-left>h2{
   font-family:'Plus Jakarta Sans',sans-serif;
   font-size:clamp(24px,2.6vw,34px);
   font-weight:800;
   color:var(--c-ink);
   letter-spacing:-.5px;
   margin-bottom:14px;
}
.about-left>p{
   color:var(--c-muted);
   font-size:15px;
   line-height:1.8;
   margin-bottom:18px;
}
.about-info-list{margin:18px 0 26px;}
.about-info-list li{
   display:flex!important;
   align-items:center;
   gap:14px;
   width:100%!important;
   margin:0 0 14px!important;
   color:var(--c-ink);
   font-size:14px;
}
.about-info-list li > span:not(.ai-icon){
   display:flex;
   flex-wrap:wrap;
   align-items:baseline;
   gap:0.35em 0.5em;
   flex:1;
   min-width:0;
   line-height:1.5;
}
.about-info-list li .ai-icon{
   flex:0 0 42px;
   width:42px; height:42px;
   border-radius:12px;
   display:inline-flex; align-items:center; justify-content:center;
   background:linear-gradient(135deg, rgba(118,171,66,.18), rgba(238,68,48,.18));
   color:var(--c-brand);
   font-size:16px;
}
.about-info-list li .ai-label{
   display:inline;
   flex:0 0 auto;
   font-size:11px;
   text-transform:uppercase;
   letter-spacing:1.5px;
   color:var(--c-muted);
   font-weight:600;
   margin:0;
   white-space:nowrap;
}
.about-info-list li .ai-label::after{
   content:":";
   margin-left:1px;
}
.about-info-list li .ai-value{
   display:inline;
   flex:1 1 auto;
   color:var(--c-ink);
   font-weight:500;
   min-width:0;
}
/* Modern progress bars (gradient fill) */
.skills-prog.modern h6{
   display:flex;
   justify-content:space-between;
   font-size:13px;
   font-weight:600;
   color:var(--c-ink);
   text-transform:uppercase;
   letter-spacing:1px;
   margin-bottom:8px!important;
}
.skills-prog.modern h6 span{color:var(--c-brand);}
.skills-prog.modern .barfiller{
   background:#e8efde!important;
   height:10px!important;
   border-radius:999px!important;
   overflow:hidden;
}
.skills-prog.modern .barfiller .fill{
   background:var(--grad-brand-warm)!important;
   border-radius:999px!important;
}
.skills-prog.modern .barfiller .tip{display:none!important;}

.btn-primary-water{
   display:inline-flex;
   align-items:center;
   gap:10px;
   padding:13px 26px;
   border-radius:999px;
   background:var(--grad-brand);
   color:#fff;
   font-weight:600;
   font-size:13px;
   letter-spacing:.5px;
   text-transform:uppercase;
   box-shadow:0 14px 30px rgba(118,171,66,.4);
   transition:all .3s ease;
}
.btn-primary-water:hover{
   transform:translateY(-3px);
   color:#fff;
   background:var(--grad-brand-warm);
   box-shadow:0 22px 40px rgba(238,68,48,.45);
}

/* ===== SERVICES (NATURAL/HEALTHY/QUALITY) ================================ */
.fabon-service-area{
   background:linear-gradient(180deg,#f3f8fc 0%, #ffffff 100%);
}
.feature-card{
   background:#fff;
   border-radius:var(--radius-lg);
   padding:38px 28px;
   text-align:center;
   border:1px solid rgba(10,58,102,.06);
   box-shadow:var(--shadow-sm);
   transition:transform .35s ease, box-shadow .35s ease;
   height:100%;
   position:relative;
   overflow:hidden;
   margin-bottom:30px;
}
.feature-card:hover{
   transform:translateY(-8px);
   box-shadow:var(--shadow-md);
}
.feature-card .feat-icon{
   width:78px; height:78px;
   border-radius:22px;
   display:inline-flex; align-items:center; justify-content:center;
   font-size:32px;
   color:#fff;
   margin-bottom:22px;
   background:var(--grad-brand);
   box-shadow:0 14px 30px rgba(118,171,66,.4);
   transition:transform .35s ease;
}
.feature-card.fc-green .feat-icon{
   background:var(--grad-brand);
   box-shadow:0 14px 30px rgba(118,171,66,.4);
}
.feature-card.fc-warm .feat-icon{
   background:var(--grad-warm);
   box-shadow:0 14px 30px rgba(238,68,48,.4);
}
.feature-card.fc-water .feat-icon{
   background:var(--grad-water);
   box-shadow:0 14px 30px rgba(29,139,217,.35);
}
.feature-card:hover .feat-icon{transform:rotate(-6deg) scale(1.06);}
.feature-card h4{
   font-family:'Plus Jakarta Sans',sans-serif;
   font-weight:700;
   font-size:18px;
   color:var(--c-ink);
   letter-spacing:.5px;
   margin-bottom:12px;
}
.feature-card p{
   color:var(--c-muted);
   font-size:14px;
   line-height:1.7;
}

/* ===== STATS / FACTS — animated counters (brand) ======================== */
.fabon-hire-area{
   position:relative;
   background:linear-gradient(135deg,#1a2e0f 0%, #2f5a1c 50%, #76ab42 100%);
   overflow:hidden;
   padding:90px 0;
}
.fabon-hire-area:before{
   content:"";
   position:absolute;
   inset:0;
   background:
      radial-gradient(40% 60% at 10% 20%, rgba(238,68,48,.22), transparent 60%),
      radial-gradient(50% 70% at 90% 80%, rgba(255,255,255,.12), transparent 60%);
   pointer-events:none;
}
.fabon-hire-area .container{position:relative; z-index:2;}
.facts-head{
   text-align:center;
   margin-bottom:50px;
}
.facts-head .section-eyebrow{color:#ffd4cc;}
.facts-head h2{
   color:#fff;
   font-family:'Plus Jakarta Sans',sans-serif;
   font-weight:800;
   font-size:clamp(28px,4vw,44px);
   letter-spacing:-.5px;
   line-height:1.15;
}
.facts-head h2 .grad{
   background:linear-gradient(120deg,#ffffff,#ffd4cc,#ee4430);
   -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-card{
   background:rgba(255,255,255,.06);
   border:1px solid rgba(255,255,255,.14);
   border-radius:var(--radius-lg);
   padding:36px 24px;
   text-align:center;
   color:#fff;
   backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px);
   transition:transform .35s ease, background .35s ease;
   margin-bottom:24px;
}
.stat-card:hover{
   transform:translateY(-6px);
   background:rgba(255,255,255,.1);
}
.stat-card .stat-icon{
   width:56px; height:56px;
   margin:0 auto 16px;
   border-radius:14px;
   display:flex; align-items:center; justify-content:center;
   font-size:22px;
   background:linear-gradient(135deg, rgba(255,255,255,.25), rgba(238,68,48,.18));
   border:1px solid rgba(255,255,255,.25);
   color:#ffd4cc;
}
.stat-card .stat-num{
   font-family:'Plus Jakarta Sans',sans-serif;
   font-size:clamp(36px,5vw,56px);
   font-weight:800;
   line-height:1;
   letter-spacing:-1px;
   background:linear-gradient(120deg,#ffffff,#ffd4cc);
   -webkit-background-clip:text; background-clip:text;
   color:transparent;
}
.stat-card .stat-suffix{
   color:#ffd4cc;
   font-weight:700;
   margin-left:2px;
}
.stat-card .stat-label{
   margin-top:8px;
   color:#eef7e2;
   font-size:13px;
   text-transform:uppercase;
   letter-spacing:2px;
   font-weight:600;
}
.facts-head .section-eyebrow{color:#ffd4cc;}

/* ===== FOOTER (subtle modernization) ===================================== */
.fabon-footer-area{
   background:linear-gradient(180deg,#0a1929 0%, #062a4d 100%);
   padding:70px 0 40px;
}
.fabon-footer-area h3 img{
   filter:drop-shadow(0 6px 20px rgba(118,171,66,.3));
}
.fabon-footer-area ul li a{
   background:rgba(255,255,255,.06);
   border:1px solid rgba(255,255,255,.12);
   transition:all .25s ease;
}
.fabon-footer-area ul li a:hover{
   background:var(--grad-brand-warm);
   border-color:transparent;
   color:#fff;
   transform:translateY(-3px);
}
.fabon-footer-area p{color:#90a8be;}

/* ==========================================================================
   LEGACY-CLASS MODERNIZATION — applied to every page that links modern.css
   These selectors override existing style.css for modules used on inner pages.
   ========================================================================== */

/* About-Us banner image strip wrapper */
.fabon-hire-area-water{
   padding:0 !important;
   margin:0 0 60px;
}
.fabon-hire-area-water img{
   border-radius:0;
   display:block;
   width:100%;
   filter:saturate(1.05);
}

/* ----- Old single-service cards (about-us.html, factory.html) ------------- */
.fabon-service-area .single-service{
   background:#fff;
   border-radius:var(--radius-lg);
   padding:38px 28px;
   text-align:center;
   border:1px solid rgba(118,171,66,.12);
   box-shadow:var(--shadow-sm);
   transition:transform .35s ease, box-shadow .35s ease;
   overflow:hidden;
   margin-bottom:30px;
}
.fabon-service-area .single-service:hover{
   transform:translateY(-8px);
   box-shadow:var(--shadow-md);
}
.fabon-service-area .single-service .service-icon{
   width:78px; height:78px;
   border-radius:22px;
   background:var(--grad-brand)!important;
   box-shadow:0 14px 30px rgba(118,171,66,.4);
   transition:transform .35s ease;
   z-index:1;
   overflow:hidden;
}
.fabon-service-area .single-service .service-icon i{
   color:#fff !important;
   line-height:78px;
   font-size:32px;
}
.fabon-service-area .single-service .service-icon i:after{display:none;}
.fabon-service-area .single-service:nth-child(2) .service-icon{
   background:var(--grad-warm)!important;
   box-shadow:0 14px 30px rgba(238,68,48,.4);
}
.fabon-service-area .single-service:nth-child(3) .service-icon{
   background:var(--grad-water)!important;
   box-shadow:0 14px 30px rgba(29,139,217,.35);
}
.fabon-service-area .single-service:hover .service-icon{
   transform:rotate(-6deg) scale(1.06);
}
.fabon-service-area .single-service > h4{
   font-family:'Plus Jakarta Sans',sans-serif;
   font-size:18px;
   font-weight:700;
   color:var(--c-ink);
   letter-spacing:.5px;
   margin-top:24px;
   margin-bottom:12px;
}
.fabon-service-area .single-service > p{
   color:var(--c-muted);
   font-size:14px;
   line-height:1.7;
}
/* Hide the legacy diagonal corner */
.fabon-service-area .single-service .service-hover{display:none !important;}

/* ----- Blog cards (blog.html) -------------------------------------------- */
.fabon-blog-area{background:linear-gradient(180deg,#ffffff 0%, #f5f9f1 100%);}
.fabon-blog-area .single-blog{
   background:#fff;
   border-radius:var(--radius-lg);
   box-shadow:var(--shadow-sm);
   border:1px solid rgba(118,171,66,.10);
   overflow:hidden;
   transition:transform .35s ease, box-shadow .35s ease;
   margin-bottom:30px;
}
.fabon-blog-area .single-blog:hover{
   transform:translateY(-8px);
   box-shadow:var(--shadow-md);
}
.fabon-blog-area .single-blog .blog-img{overflow:hidden;}
.fabon-blog-area .single-blog .blog-img img{
   width:100%;
   transition:transform .6s ease;
   display:block;
}
.fabon-blog-area .single-blog:hover .blog-img img{transform:scale(1.06);}
.fabon-blog-area .single-blog .blog-text{
   padding:26px 24px 28px;
   text-align:left;
}
.fabon-blog-area .single-blog .blog-text > h3{
   font-family:'Plus Jakarta Sans',sans-serif;
   font-weight:700;
   font-size:18px;
   line-height:1.35;
   margin-bottom:12px;
   letter-spacing:-.2px;
}
.fabon-blog-area .single-blog .blog-text > h3 a{
   color:var(--c-ink);
   transition:color .25s ease;
}
.fabon-blog-area .single-blog .blog-text > h3 a:hover{color:var(--c-brand);}
.fabon-blog-area .single-blog .blog-text > p{
   color:var(--c-muted);
   font-size:14px;
   line-height:1.7;
   display:-webkit-box;
   -webkit-line-clamp:5;
   -webkit-box-orient:vertical;
   overflow:hidden;
}

/* ----- Portfolio gallery cards (factory.html, products/*.html) ----------- */
.fabon-work-area{background:linear-gradient(180deg,#ffffff 0%, #f5f9f1 100%);}
.fabon-work-area .item-content{
   border-radius:var(--radius-lg);
   overflow:hidden;
   box-shadow:var(--shadow-sm);
   border:1px solid rgba(118,171,66,.10);
   transition:transform .35s ease, box-shadow .35s ease;
   background:#fff;
}
.fabon-work-area .item-content:hover{
   transform:translateY(-8px);
   box-shadow:var(--shadow-md);
}
.fabon-work-area .item-content img{
   border-radius:0;
   transition:transform .6s ease;
}
.fabon-work-area .item-content:hover img{transform:scale(1.05);}
.fabon-work-area .item-content .item-img-overlay{
   inset:0 !important;
   top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
   background:linear-gradient(180deg, rgba(118,171,66,0) 40%, rgba(74,139,42,.85) 100%) !important;
   border:none !important;
   border-radius:0 !important;
   opacity:0;
   transition:opacity .35s ease !important;
}
.fabon-work-area .item-content .item-img-overlay:after{display:none !important;}
.fabon-work-area .item-content:hover .item-img-overlay{opacity:1;}
.fabon-work-area .item-content .item-img-overlay .cap{
   bottom:24px !important;
   left:50% !important;
   transform:translateX(-50%) !important;
   width:90%;
   text-align:center;
}
.fabon-work-area .item-content:hover .item-img-overlay .cap{
   bottom:24px !important;
   margin-bottom:0 !important;
}
.fabon-work-area .item-content .item-img-overlay h6{
   color:#fff !important;
   font-family:'Plus Jakarta Sans',sans-serif;
   font-size:14px !important;
   font-weight:700 !important;
   text-transform:uppercase;
   letter-spacing:1px;
   margin-bottom:10px !important;
   margin-top:0 !important;
}
.fabon-work-area .item-content .item-img-overlay .icon a,
.fabon-work-area .item-content .item-img-overlay .icons a{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:42px; height:42px;
   border-radius:50%;
   background:#fff;
   color:var(--c-brand) !important;
   line-height:1;
   transition:transform .25s ease, background .25s ease, color .25s ease;
}
.fabon-work-area .item-content .item-img-overlay .icon a:hover,
.fabon-work-area .item-content .item-img-overlay .icons a:hover{
   background:var(--c-brand-orange);
   color:#fff !important;
   transform:scale(1.1);
}
.fabon-work-area .item-content .zoom-img > a{
   background:transparent !important;
   color:var(--c-brand) !important;
   width:auto; height:auto; line-height:inherit;
   border-radius:0;
}

/* ----- Portfolio filter pills (products/*.html) -------------------------- */
.portfolio-filter{margin-bottom:40px;}
.portfolio-filter ul{
   display:inline-flex;
   flex-wrap:wrap;
   gap:8px;
   padding:6px;
   background:#fff;
   border-radius:999px;
   box-shadow:var(--shadow-sm);
   margin:0;
   justify-content:center;
}
.portfolio-filter ul a{
   display:inline-block;
   line-height:1;
}
.portfolio-filter ul li{
   padding:10px 20px;
   border-radius:999px;
   font-size:12px;
   font-weight:600;
   letter-spacing:1.5px;
   margin:0;
   text-transform:uppercase;
   color:var(--c-ink);
   background:transparent;
   transition:all .25s ease;
   cursor:pointer;
}
.portfolio-filter ul li:hover{
   background:rgba(118,171,66,.1);
   color:var(--c-brand);
}
.portfolio-filter ul li.current,
.portfolio-filter ul a li.current{
   background:var(--grad-brand);
   color:#fff;
   box-shadow:0 8px 18px rgba(118,171,66,.35);
}

/* ----- Contact form (contact.html) --------------------------------------- */
.fabon-contact-area{background:linear-gradient(180deg,#ffffff 0%, #f5f9f1 100%);}
.fabon-contact-area form{
   background:#fff;
   padding:44px 36px;
   border-radius:var(--radius-lg);
   box-shadow:var(--shadow-md);
   border:1px solid rgba(118,171,66,.12);
}
.fabon-contact-area form .form-group{margin-bottom:22px;}
.fabon-contact-area form .form-group .form-control{
   border:1px solid #e0e6d8 !important;
   border-radius:12px !important;
   background:#fafbf7;
   padding:14px 18px;
   height:auto !important;
   font-family:'Plus Jakarta Sans',sans-serif;
   font-size:14px;
   color:var(--c-ink);
   transition:all .25s ease;
}
.fabon-contact-area form .form-group .form-control:focus{
   border-color:var(--c-brand) !important;
   background:#fff;
   box-shadow:0 0 0 4px rgba(118,171,66,.12);
}
.fabon-contact-area form .form-group textarea.form-control{
   min-height:160px;
   resize:vertical;
}
.fabon-contact-area form button{
   background:var(--grad-brand) !important;
   border:none !important;
   color:#fff !important;
   padding:14px 36px !important;
   border-radius:999px !important;
   font-family:'Plus Jakarta Sans',sans-serif !important;
   font-weight:600 !important;
   font-size:13px !important;
   letter-spacing:1px !important;
   text-transform:uppercase;
   margin-top:10px !important;
   box-shadow:0 14px 30px rgba(118,171,66,.4) !important;
   transition:all .3s ease !important;
}
.fabon-contact-area form button:hover{
   background:var(--grad-brand-warm) !important;
   color:#fff !important;
   transform:translateY(-3px);
   box-shadow:0 22px 40px rgba(238,68,48,.45) !important;
}

/* ----- About-Us page two-column ------------------------------------------ */
body .fabon-about-area .about-left p{
   text-align:left !important;
   color:var(--c-muted);
   font-size:15px;
   line-height:1.85;
   margin-bottom:14px;
}
.fabon-about-area .about-left img,
.fabon-about-area > .container > .row > .col-md-6 > img{
   border-radius:var(--radius-lg);
   box-shadow:var(--shadow-md);
   max-width:100%;
   height:auto;
   margin-left:0 !important;
}

/* Inner page heading offset (since fixed navbar covers content) */
.section_200{padding-top:180px;}
.section_t_200{padding-top:180px;}
.section_pt_100{padding-top:100px;}

/* Video carousel (blog.html) modernization */
.fabon-testimonial-area{background:linear-gradient(180deg,#f5f9f1 0%, #ffffff 100%);}
.fabon-testimonial-area .single-testimonial img{
   border-radius:var(--radius-lg);
   box-shadow:var(--shadow-md);
   border:none;
   padding:0;
}
.fabon-testimonial-area .single-testimonial a{
   display:block;
   position:relative;
   overflow:hidden;
   border-radius:var(--radius-lg);
}
.fabon-testimonial-area .single-testimonial a:after{
   content:"\f04b";
   font-family:'FontAwesome';
   position:absolute;
   top:50%; left:50%;
   transform:translate(-50%,-50%);
   width:72px; height:72px;
   line-height:72px;
   text-align:center;
   border-radius:50%;
   background:var(--grad-brand-warm);
   color:#fff;
   font-size:22px;
   box-shadow:0 14px 30px rgba(238,68,48,.45);
   transition:transform .3s ease;
}
.fabon-testimonial-area .single-testimonial a:hover:after{transform:translate(-50%,-50%) scale(1.1);}

/* Modal close button repositioned */
.modal-content{border-radius:var(--radius-lg); border:none; overflow:hidden;}
.modal-body .close{
   right:10px !important; top:10px !important;
   background:rgba(0,0,0,.6); color:#fff;
   width:34px; height:34px; line-height:30px;
   border-radius:50%; font-size:1.2rem !important;
   text-align:center;
}

/* Mobile stacking helpers for portfolio + service rows */
@media (max-width: 991px){
   .fabon-service-area .single-service{margin-bottom:24px;}
}

/* Preloader hidden (JS fallback if fadeOut fails on mobile) */
#preloader.preloader-done{
   display:none!important;
   opacity:0!important;
   visibility:hidden!important;
   pointer-events:none!important;
}

/* ===== Reveal on scroll =================================================== */
.reveal{
   opacity:0;
   transform:translateY(28px);
   transition:opacity .8s ease, transform .8s ease;
   will-change:opacity, transform;
}
.reveal.in{opacity:1; transform:none;}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}
.reveal-delay-4{transition-delay:.4s;}

/* ===== Animations ======================================================== */
@keyframes fadeUp{
   0%{opacity:0; transform:translateY(28px);}
   100%{opacity:1; transform:translateY(0);}
}

/* ===== RESPONSIVE — mobile first refinements ============================= */
@media (max-width: 991px){
   .navbar-collapse{
      background:rgba(6,42,77,.96)!important;
      border-radius:14px;
      margin-top:14px;
      padding:14px 20px;
      backdrop-filter:blur(8px);
   }
   nav.fixed-top .navbar-collapse{
      background:#fff!important;
      box-shadow:0 12px 30px rgba(10,40,80,.12);
   }
   nav.fixed-top .navbar-collapse .nav-link{color:var(--c-ink)!important;}
   .banner{background-attachment:scroll;}
}

@media (max-width: 767px){
   .section_100{padding:70px 0;}
   .site-heading{margin-bottom:40px;}
   .product-card{padding:28px 18px;}
   .product-card .product-img{width:140px; height:140px;}
   .feature-card{padding:30px 22px;}
   .stat-card{padding:28px 18px;}
   .banner-welcome>h3,
   .banner-welcome .hero-title{font-size:clamp(34px,9vw,52px);}
   .hero-sub{font-size:14px;}
   .btn-water,.btn-ghost{padding:12px 22px; font-size:13px;}
   .banner-wave{height:70px;}
   .mouse-icon{display:none;}
   .about-info-list li{font-size:13px;}
   .hero-eyebrow{font-size:11px; letter-spacing:1.5px; padding:6px 14px;}

   /* Let hero grow with its content on phones (override style.css fixed 100vh) */
   .banner{min-height:100vh; height:auto;}
   .banner-area{
      position:relative !important;
      height:auto !important;
      min-height:100vh;
      display:flex;
      align-items:center;
      padding:120px 0 90px;
   }
   .banner-caption{display:block !important; height:auto !important; width:100%;}
   .banner-caption .container{display:block !important; height:auto !important;}
   .brand-row .col-md-6 + .col-md-6{margin-top:40px;}
}

@media (max-width: 480px){
   .hero-cta{flex-direction:column; width:100%; padding:0 14px;}
   .hero-cta .btn-water,.hero-cta .btn-ghost{justify-content:center; width:100%;}
}