/* ============================================================
   ZENOTECH — Elegant Modern Design
   Teal: #1b6a8c | Green: #3BB84A | Dark: #0e4460
   ============================================================ */

:root {
    --green:        #3BB84A;
    --green-dark:   #2d9038;
    --green-light:  #e8f8eb;
    --dark:         #1b6a8c;
    --dark2:        #0e4460;
    --topbar-l:     #0e4460;
    --topbar-r:     #1b6a8c;
    --white:        #ffffff;
    --text:         #6b7280;
    --text-dark:    #1a202c;
    --border:       #e8eef2;
    --light-bg:     #f4f8fb;
    --shadow-sm:    0 2px 12px rgba(0,0,0,.06);
    --shadow:       0 8px 32px rgba(0,0,0,.10);
    --shadow-lg:    0 20px 60px rgba(0,0,0,.14);
    --shadow-teal:  0 12px 40px rgba(27,106,140,.18);
    --shadow-green: 0 8px 30px rgba(59,184,74,.25);
    --radius:       12px;
    --radius-xl:    20px;
    --radius-full:  50px;
    --transition:   all .3s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Source Sans Pro',sans-serif;font-size:16px;color:var(--text);background:#fff;margin:0;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-weight:700;color:var(--text-dark);line-height:1.25;margin:0 0 12px}
a{color:var(--green);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--green-dark)}
p{margin:0 0 14px;line-height:1.75}
ul{list-style:none;margin:0;padding:0}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section-padding{padding:80px 0}

/* ===================== PRELOADER ===================== */
#preloader{position:fixed;inset:0;background:var(--dark2);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .6s,visibility .6s}
#preloader.gone{opacity:0;visibility:hidden}
.pre-inner{text-align:center}
.pre-logo{font-size:2.8rem;font-weight:900;color:#fff;letter-spacing:2px;margin-bottom:20px;text-transform:uppercase}
.pre-logo span{color:var(--green)}
.pre-bar{width:200px;height:3px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.pre-bar::after{content:'';display:block;width:45%;height:100%;background:linear-gradient(90deg,var(--green),#28a745);border-radius:3px;animation:barSlide 1.2s ease-in-out infinite}
@keyframes barSlide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

/* ===================== TOP BAR ===================== */
.top-bar{display:flex;font-size:13px;line-height:1;height:40px;overflow:hidden}
/* Left — bright green */
.top-bar-left{background:var(--green);flex:0 0 auto;display:flex;align-items:center;position:relative;z-index:2}
/* Diagonal right-edge triangle (overlaps dark section) */
.top-bar-left::after{content:'';position:absolute;top:0;right:-22px;width:0;height:0;border-style:solid;border-width:40px 22px 0 0;border-color:var(--green) transparent transparent transparent;z-index:3}
/* Right — very dark navy */
.top-bar-right{background:#0d1624;flex:1;display:flex;align-items:center;z-index:1}
.tbl-inner{display:flex;align-items:center;gap:18px;padding:0 28px 0 0}
.tbr-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:0 0 0 40px}
/* Text on green side: white. On dark side: white */
.top-bar a,.top-bar span{color:rgba(255,255,255,.9);display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500}
.top-bar-left a,.top-bar-left span{color:#fff}
.top-bar-left a:hover{color:var(--dark2);opacity:.85}
.top-bar-right a:hover,.top-bar-right span:hover{color:var(--green)}
.top-bar i{font-size:13px}
.top-bar-left i{color:#fff}
.top-bar-right i{color:var(--green)}
.top-socials{display:flex;gap:7px}
.top-soc{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;color:rgba(255,255,255,.75);font-size:11px;transition:var(--transition)}
.top-soc:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-2px)}

/* ===================== NAVBAR ===================== */
.main-nav{background:#fff;position:sticky;top:0;z-index:999;box-shadow:0 2px 24px rgba(0,0,0,.10)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:0;min-height:72px}
/* Logo image */
.brand{display:flex;align-items:center;text-decoration:none;padding-right:24px;margin-right:26px;border-right:3px solid var(--green)}
.brand-logo-img{height:50px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a{color:var(--text-dark);font-weight:600;font-size:15px;padding:24px 14px;display:block;position:relative;transition:var(--transition);white-space:nowrap}
.nav-links a::after{content:'';position:absolute;bottom:0;left:14px;width:0;height:3px;background:var(--green);border-radius:3px 3px 0 0;transition:width .3s ease}
.nav-links a:hover::after,.nav-links a.active::after{width:calc(100% - 28px)}
.nav-links a:hover,.nav-links a.active{color:var(--dark)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-search-btn{background:none;border:none;cursor:pointer;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--green);color:#fff;font-size:14px;transition:var(--transition)}
.nav-search-btn:hover{background:var(--green-dark);transform:scale(1.08)}
.btn-get-touch{background:var(--green);border:2px solid var(--green);color:#fff;font-weight:700;font-size:14px;padding:10px 26px;border-radius:var(--radius-full);transition:var(--transition);letter-spacing:.3px}
.btn-get-touch:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff;box-shadow:var(--shadow-green);transform:translateY(-2px)}
.search-bar{padding:0 0 14px;display:none}
.search-bar.open{display:flex;gap:8px}
.search-bar input{flex:1;padding:11px 18px;border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:14px;font-family:inherit;outline:none}
.search-bar input:focus{border-color:var(--green)}
.search-bar button{background:var(--green);color:#fff;border:none;padding:11px 20px;border-radius:var(--radius-full);cursor:pointer;transition:var(--transition)}
.search-bar button:hover{background:var(--green-dark)}
/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.hamburger span{display:block;width:24px;height:2px;background:var(--dark);border-radius:2px;transition:var(--transition)}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ===================== HERO SLIDER ===================== */
.hero-slider{position:relative;overflow:hidden;height:650px}
.slides-track{display:flex;height:100%;transition:transform .85s cubic-bezier(.77,0,.175,1)}
.slide{min-width:100%;height:100%;position:relative;flex-shrink:0;overflow:hidden}
/* Ken Burns background zoom */
.slide-bg{position:absolute;inset:-8%;background-size:cover;background-position:center;transform:scale(1);transition:transform 9s ease}
.slide.is-active .slide-bg{transform:scale(1.08)}
/* Multi-layer overlay: dark bottom + teal tint */
.slide-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,38,54,.55) 0%,rgba(10,38,54,.75) 60%,rgba(7,25,38,.9) 100%)}
.slide-overlay::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,106,140,.3) 0%,transparent 60%)}
.slide-inner{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}
/* ALL slides centered */
.slide-content{max-width:740px;padding:0 24px;text-align:center}
/* --- Animation: all items start hidden --- */
.slide-content .slide-label,
.slide-content h2,
.slide-content p,
.slide-content .slide-btns{opacity:0}
/* --- Animate IN when slide becomes active --- */
.slide-content.is-active .slide-label{animation:sHeroDown .65s cubic-bezier(.22,1,.36,1) .1s forwards}
.slide-content.is-active h2{animation:sHeroUp .75s cubic-bezier(.22,1,.36,1) .32s forwards}
.slide-content.is-active p{animation:sHeroUp .7s cubic-bezier(.22,1,.36,1) .54s forwards}
.slide-content.is-active .slide-btns{animation:sHeroUp .7s cubic-bezier(.22,1,.36,1) .72s forwards}
@keyframes sHeroDown{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:translateY(0)}}
@keyframes sHeroUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
/* Label badge */
.slide-label{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;font-size:12px;font-weight:700;padding:8px 22px;margin-bottom:24px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.22);letter-spacing:1.5px;text-transform:uppercase}
.slide-label::before{content:'';width:7px;height:7px;background:var(--green);border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(59,184,74,.3);animation:pulse 2s ease-in-out infinite}
/* Heading */
.slide-content h2{font-size:clamp(2.4rem,5vw,4rem);font-weight:900;color:#fff;line-height:1.1;margin-bottom:20px;text-shadow:0 4px 32px rgba(0,0,0,.5);letter-spacing:-1px}
.slide-content h2 span{color:var(--green);position:relative}
/* Paragraph */
.slide-content p{color:rgba(255,255,255,.82);font-size:17px;margin:0 auto 34px;max-width:580px;line-height:1.78}
/* Buttons row */
.slide-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-slide{display:inline-flex;align-items:center;gap:9px;background:var(--green);color:#fff;font-weight:700;font-size:15px;padding:14px 34px;border-radius:var(--radius-full);transition:var(--transition);letter-spacing:.4px;box-shadow:var(--shadow-green)}
.btn-slide:hover{background:var(--green-dark);color:#fff;transform:translateY(-3px);box-shadow:0 18px 44px rgba(59,184,74,.4)}
.btn-slide-outline{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);color:#fff;font-weight:700;font-size:15px;padding:14px 34px;border-radius:var(--radius-full);transition:var(--transition);letter-spacing:.4px;border:1.5px solid rgba(255,255,255,.4)}
.btn-slide-outline:hover{background:rgba(255,255,255,.2);border-color:#fff;transform:translateY(-3px)}
/* Arrows */
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,.3);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;font-size:16px;transition:var(--transition)}
.slider-arrow:hover{background:var(--green);border-color:var(--green);transform:translateY(-50%) scale(1.12);box-shadow:var(--shadow-green)}
.slider-arrow.prev{left:28px}
.slider-arrow.next{right:28px}
/* Dots — active pill */
.slider-dots{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;align-items:center}
.s-dot{width:10px;height:10px;border-radius:var(--radius-full);background:rgba(255,255,255,.3);cursor:pointer;transition:all .4s cubic-bezier(.22,1,.36,1)}
.s-dot.active{background:var(--green);width:28px;box-shadow:0 0 0 2px rgba(59,184,74,.4)}
/* Progress bar */
.slider-progress{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,var(--green),#28a745);width:0;z-index:11;transition:none}
.slider-progress.running{transition:width 5s linear}

/* ===================== FEATURE CARDS ===================== */
.features-section{
    background:linear-gradient(180deg,var(--light-bg) 0%,#fff 100%);
    padding:90px 0 100px;position:relative;overflow:hidden;
}
.features-section::before{content:none}
.fs-bg{display:none}

.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;z-index:1}

/* White card — keep all animations */
.feature-card{
    border-radius:var(--radius-xl);padding:44px 28px 40px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    position:relative;overflow:hidden;
    transition:all .4s cubic-bezier(.22,1,.36,1);
    cursor:pointer;transform-style:preserve-3d;
}
/* animated top accent */
.feature-card::before{
    content:'';position:absolute;top:0;left:20%;right:20%;height:3px;
    background:linear-gradient(90deg,transparent,var(--green),transparent);
    transition:all .4s ease;opacity:.7;
}
.feature-card:hover::before{left:0;right:0;opacity:1;box-shadow:0 0 18px 3px rgba(59,184,74,.4)}
.feature-card:hover{
    border-color:rgba(59,184,74,.25);
    box-shadow:0 24px 60px rgba(27,106,140,.14),0 0 0 1px rgba(59,184,74,.15);
    transform:translateY(-10px);
}
/* inner glow element */
.fc-glow{
    position:absolute;top:-60px;left:50%;transform:translateX(-50%);
    width:220px;height:220px;
    background:radial-gradient(circle,rgba(59,184,74,.1),transparent 70%);
    border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s;
}
.feature-card:hover .fc-glow{opacity:1}

.fc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
/* Spinning rings icon */
.fc-icon-wrap{position:relative;width:76px;height:76px;flex-shrink:0}
.fc-icon{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:54px;height:54px;
    background:linear-gradient(135deg,var(--green),var(--dark));
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.3rem;z-index:2;
    animation:iconGlowPulse 2.8s ease-in-out infinite;
    transition:transform .3s ease;
}
@keyframes iconGlowPulse{
    0%,100%{box-shadow:0 6px 24px rgba(59,184,74,.35)}
    50%     {box-shadow:0 6px 36px rgba(59,184,74,.7),0 0 0 10px rgba(59,184,74,.07)}
}
.feature-card:nth-child(2) .fc-icon{animation-delay:.7s}
.feature-card:nth-child(3) .fc-icon{animation-delay:1.4s}
.feature-card:nth-child(4) .fc-icon{animation-delay:2.1s}
.feature-card:hover .fc-icon{transform:translate(-50%,-50%) scale(1.15)}

.fc-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(59,184,74,.45);opacity:.5;animation:spinRing 5s linear infinite}
.fc-ring-2{inset:-10px;border-color:rgba(27,106,140,.25);animation-duration:10s;animation-direction:reverse}
@keyframes spinRing{to{transform:rotate(360deg)}}

.fc-num{font-size:4.5rem;font-weight:900;color:rgba(27,106,140,.07);line-height:1;letter-spacing:-3px;transition:color .4s;user-select:none}
.feature-card:hover .fc-num{color:rgba(59,184,74,.12)}
.feature-card h4{font-size:19px;font-weight:800;color:var(--text-dark);margin-bottom:12px;transition:color .3s}
.feature-card:hover h4{color:var(--dark)}
.feature-card p{font-size:14px;color:var(--text);line-height:1.8;margin-bottom:18px}

/* tag pills */
.fc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px;padding:0}
.fc-tags li{
    font-size:11.5px;font-weight:700;color:var(--green-dark);
    background:var(--green-light);border:1px solid rgba(59,184,74,.25);
    padding:4px 12px;border-radius:var(--radius-full);letter-spacing:.3px;
}
.fc-link{
    font-size:13.5px;font-weight:700;color:var(--dark);
    display:inline-flex;align-items:center;gap:7px;transition:var(--transition);
    padding:9px 20px;background:var(--light-bg);
    border-radius:var(--radius-full);border:1px solid var(--border);
}
.fc-link:hover{background:var(--green);color:#fff;border-color:var(--green);gap:12px;box-shadow:0 8px 28px rgba(59,184,74,.35)}
.fc-dot{display:none}

/* ===================== SECTION HEADING ===================== */
.section-head{text-align:center;margin-bottom:56px}
.section-badge{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--green);color:var(--green);background:var(--green-light);font-size:12px;font-weight:700;padding:5px 18px;border-radius:var(--radius-full);margin-bottom:14px;letter-spacing:.8px;text-transform:uppercase}
.section-head h2{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:900;color:var(--text-dark);margin-bottom:14px}
.section-head h2 em{color:var(--dark);font-style:italic;font-family:'Dancing Script',cursive;font-size:1.1em}
.section-head p{color:var(--text);font-size:15.5px;max-width:580px;margin:0 auto;line-height:1.75}
.section-head .swirl{display:block;margin:10px auto 0;width:80px;height:3px;background:linear-gradient(90deg,transparent,var(--green),transparent);border-radius:3px}

/* ===================== SERVICES SECTION ===================== */
.services-section{background:#fff;padding:80px 0;position:relative;overflow:hidden}
.services-deco{position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:320px;height:320px;border:3px solid var(--green);border-radius:50%;opacity:.07;pointer-events:none}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.svc-card{background:#fff;border:none;border-radius:var(--radius-xl);overflow:visible;transition:var(--transition);position:relative;box-shadow:var(--shadow)}
.svc-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-teal)}
.svc-img-wrap{position:relative;height:210px;overflow:visible}
.svc-img-inner{height:100%;overflow:hidden;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.svc-img-inner img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc-card:hover .svc-img-inner img{transform:scale(1.08)}
/* Spinning icon wrap */
.svc-icon-wrap{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);width:76px;height:76px;display:flex;align-items:center;justify-content:center;z-index:5}
.svc-ring{position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(59,184,74,.45);animation:spinRing 7s linear infinite}
.svc-icon-circle{width:52px;height:52px;background:linear-gradient(135deg,var(--green),var(--dark));border:3px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.15rem;position:relative;z-index:2;box-shadow:var(--shadow-green)}
.svc-body{padding:52px 22px 26px;text-align:center}
.svc-body h4{font-size:17px;font-weight:700;color:var(--text-dark);margin-bottom:8px}
.svc-body p{font-size:14px;color:var(--text);line-height:1.7;margin-bottom:14px}
.svc-divider{height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);margin-bottom:14px;border-radius:2px}
.svc-link{font-size:14px;font-weight:700;color:var(--dark);display:inline-flex;align-items:center;gap:6px;transition:var(--transition);padding:8px 18px;border-radius:var(--radius-full);background:var(--light-bg)}
.svc-link:hover{background:var(--green);color:#fff;gap:10px}

/* ===================== CTA GREEN BAND ===================== */
.cta-band{background:linear-gradient(135deg,var(--green) 0%,#28a745 100%);padding:60px 0;overflow:hidden;position:relative}
.cta-band::before{content:'';position:absolute;top:-60px;right:-60px;width:300px;height:300px;background:rgba(255,255,255,.06);border-radius:50%;pointer-events:none}
.cta-band::after{content:'';position:absolute;bottom:-80px;left:-40px;width:220px;height:220px;background:rgba(255,255,255,.05);border-radius:50%;pointer-events:none}
.cta-band-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;position:relative;z-index:1}
.cta-band-text h2{font-size:clamp(1.8rem,2.5vw,2.4rem);font-weight:900;color:#fff;margin-bottom:10px;text-shadow:0 2px 10px rgba(0,0,0,.15)}
.cta-band-text p{color:rgba(255,255,255,.85);font-size:15.5px;margin-bottom:24px}
.cta-band-btns{display:flex;flex-wrap:wrap;gap:12px}
.cta-btn-phone,.cta-btn-email{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);color:#fff;font-weight:700;font-size:15px;padding:14px 26px;border-radius:var(--radius-full);transition:var(--transition);border:1.5px solid rgba(255,255,255,.35)}
.cta-btn-phone:hover,.cta-btn-email:hover{background:#fff;color:var(--green-dark);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.cta-btn-phone i,.cta-btn-email i{font-size:18px}
.cta-band-img{flex-shrink:0;width:290px;align-self:flex-end}
.cta-band-img img{width:100%;border-radius:var(--radius-xl) var(--radius-xl) 0 0;object-fit:cover}

/* ===================== CTA CREATIVE ===================== */
.cta-creative{position:relative;background:linear-gradient(135deg,#071e28 0%,#0e4460 50%,#071e28 100%);padding:90px 0;overflow:hidden;text-align:center}
.cta-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(59,184,74,.18) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:1}
.cta-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;pointer-events:none;animation:ctaFloat 8s ease-in-out infinite}
.cta-blob-1{width:380px;height:380px;background:radial-gradient(circle,var(--green),transparent 70%);top:-100px;left:-80px;animation-duration:9s}
.cta-blob-2{width:320px;height:320px;background:radial-gradient(circle,var(--dark),transparent 70%);bottom:-80px;right:-60px;animation-duration:11s;animation-delay:-3s}
.cta-blob-3{width:200px;height:200px;background:radial-gradient(circle,rgba(59,184,74,.5),transparent 70%);top:50%;right:20%;animation-duration:7s;animation-delay:-1.5s}
@keyframes ctaFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.06)}}
.cta-stats{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;background:rgba(255,255,255,.07);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);padding:28px 40px;margin-bottom:52px;max-width:800px;margin-left:auto;margin-right:auto}
.cta-stat{flex:1;min-width:120px;text-align:center;padding:8px 12px}
.cta-stat-num{display:block;font-size:2.6rem;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
.cta-stat-num em{font-style:normal;color:var(--green);font-size:1.9rem}
.cta-stat-label{display:block;font-size:12.5px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.8px;margin-top:5px;font-weight:600}
.cta-stat-div{width:1px;height:52px;background:rgba(255,255,255,.15);flex-shrink:0}
.cta-headline{margin-bottom:36px}
.cta-headline h2{font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#fff;line-height:1.2;margin-bottom:16px}
.cta-headline h2 span{color:var(--green)}
.cta-headline p{color:rgba(255,255,255,.7);font-size:16px;max-width:560px;margin:0 auto;line-height:1.75}
.cta-creative-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:36px}
.cta-btn-solid{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;font-weight:700;font-size:15px;padding:16px 32px;border-radius:var(--radius-full);transition:var(--transition);box-shadow:0 8px 28px rgba(59,184,74,.35)}
.cta-btn-solid:hover{background:#28a745;transform:translateY(-3px);box-shadow:0 14px 36px rgba(59,184,74,.45);color:#fff}
.cta-btn-outline{display:inline-flex;align-items:center;gap:10px;background:transparent;color:#fff;font-weight:700;font-size:15px;padding:15px 32px;border-radius:var(--radius-full);transition:var(--transition);border:2px solid rgba(255,255,255,.4)}
.cta-btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-3px);color:#fff}
.cta-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cta-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);font-size:13px;font-weight:600;padding:8px 18px;border-radius:var(--radius-full);transition:var(--transition)}
.cta-pill i{color:var(--green);font-size:14px}
.cta-pill:hover{background:rgba(59,184,74,.15);border-color:var(--green);color:#fff}

/* ===================== BLOG SECTION ===================== */
.blog-section{background:var(--light-bg);padding:80px 0}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.blog-card{background:#fff;border:none;border-radius:var(--radius-xl);overflow:hidden;transition:var(--transition);box-shadow:var(--shadow-sm)}
.blog-card:hover{box-shadow:var(--shadow-teal);transform:translateY(-8px)}
.blog-img{height:210px;overflow:hidden}
.blog-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.blog-card:hover .blog-img img{transform:scale(1.08)}
.blog-body{padding:24px}
.blog-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13px;color:var(--text);flex-wrap:wrap}
.blog-meta .author{display:flex;align-items:center;gap:6px}
.blog-meta .author img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--green)}
.blog-date{background:var(--green);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:var(--radius-full);display:flex;align-items:center;gap:5px}
.blog-comments{display:flex;align-items:center;gap:4px;color:var(--text)}
.blog-body h4{font-size:17px;font-weight:700;color:var(--text-dark);margin-bottom:10px;line-height:1.4}
.blog-body h4 a{color:var(--text-dark)}
.blog-body h4 a:hover{color:var(--dark)}
.blog-body p{font-size:14px;line-height:1.7;margin-bottom:14px}
.blog-link{font-size:14px;font-weight:700;color:var(--dark);display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--radius-full);background:var(--light-bg);transition:var(--transition)}
.blog-link:hover{background:var(--green);color:#fff}

/* ===================== FOOTER TOP BAR ===================== */
.footer-info{
    background:linear-gradient(135deg,#071828 0%,#0d2e40 100%);
    padding:0;
    position:relative;
    overflow:hidden;
    border-top:3px solid var(--green);
    box-shadow:0 -4px 30px rgba(59,184,74,.12);
}
.footer-info::before{
    content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle,rgba(59,184,74,.07) 1px,transparent 1px);
    background-size:22px 22px;pointer-events:none;
}
.fi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;z-index:1}
.fi-item{
    display:flex;align-items:center;gap:18px;
    padding:32px 26px;
    border-right:1px solid rgba(255,255,255,.06);
    position:relative;overflow:hidden;
    transition:var(--transition);
    cursor:default;
}
.fi-item::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(59,184,74,.09),transparent);
    opacity:0;transition:var(--transition);
}
.fi-item:hover::after{opacity:1}
.fi-item:last-child{border-right:none}

/* Glowing pulsing icons */
.fi-icon{
    width:58px;height:58px;flex-shrink:0;
    background:linear-gradient(135deg,rgba(59,184,74,.18),rgba(27,106,140,.18));
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--green);font-size:1.25rem;
    transition:var(--transition);
    position:relative;
    border:1.5px solid rgba(59,184,74,.3);
    animation:fiGlow 3s ease-in-out infinite;
    z-index:1;
}
/* stagger each icon's glow phase */
.fi-item:nth-child(2) .fi-icon{animation-delay:.75s}
.fi-item:nth-child(3) .fi-icon{animation-delay:1.5s}
.fi-item:nth-child(4) .fi-icon{animation-delay:2.25s}

@keyframes fiGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(59,184,74,0)}
    50%     {box-shadow:0 0 16px 5px rgba(59,184,74,.35),0 0 32px 12px rgba(59,184,74,.12)}
}
/* spinning dashed ring around each icon */
.fi-icon::before{
    content:'';position:absolute;inset:-5px;
    border-radius:50%;
    border:1.5px dashed rgba(59,184,74,.4);
    animation:spinRing 8s linear infinite;
}
.fi-icon::after{
    content:'';position:absolute;inset:-10px;
    border-radius:50%;
    border:1px solid rgba(59,184,74,.15);
    animation:spinRing 14s linear infinite reverse;
}
.fi-item:hover .fi-icon{
    background:linear-gradient(135deg,var(--green),var(--dark));
    color:#fff;
    border-color:var(--green);
    transform:scale(1.15) rotate(-8deg);
    box-shadow:0 0 24px 8px rgba(59,184,74,.5)!important;
    animation:none;
}
.fi-item:hover .fi-icon::before,.fi-item:hover .fi-icon::after{border-color:rgba(255,255,255,.4)}

.fi-item h6{color:#fff;font-size:12px;font-weight:800;margin:0 0 5px;letter-spacing:1px;text-transform:uppercase;position:relative;z-index:1}
.fi-item p,.fi-item a{color:rgba(255,255,255,.5);font-size:14px;margin:0;transition:var(--transition);position:relative;z-index:1}
.fi-item a:hover{color:var(--green)}
.fi-item:hover p,.fi-item:hover a{color:rgba(255,255,255,.85)}

/* ===================== FOOTER MAIN ===================== */
.footer-main{
    background:linear-gradient(160deg,#061520 0%,#09202e 55%,#061520 100%);
    padding:80px 0 50px;
    position:relative;
    overflow:hidden;
}
/* dot pattern */
.footer-main::before{
    content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle,rgba(59,184,74,.055) 1px,transparent 1px);
    background-size:30px 30px;pointer-events:none;
}
/* ambient glow orb */
.footer-main::after{
    content:'';position:absolute;
    top:-120px;right:-120px;
    width:500px;height:500px;
    background:radial-gradient(circle,rgba(59,184,74,.08),transparent 65%);
    border-radius:50%;pointer-events:none;
    animation:ctaFloat 14s ease-in-out infinite;
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:52px;position:relative;z-index:1}

/* widget headings */
.footer-widget h5{
    color:#fff;font-size:12px;font-weight:800;
    margin-bottom:24px;padding-bottom:14px;
    position:relative;letter-spacing:1.5px;text-transform:uppercase;
}
.footer-widget h5::after{
    content:'';position:absolute;bottom:0;left:0;
    width:32px;height:2px;
    background:linear-gradient(90deg,var(--green),transparent);
    border-radius:2px;transition:width .4s ease;
}
.footer-widget:hover h5::after{width:100%}

/* brand widget */
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.footer-brand-name{font-size:1.55rem;font-weight:900;color:#fff;letter-spacing:1px}
.footer-brand-name span{color:var(--green)}
.footer-tagline{font-size:11px;font-weight:700;color:var(--green);letter-spacing:2px;text-transform:uppercase;opacity:.8;margin-bottom:16px;display:block}
.footer-widget p{color:rgba(255,255,255,.42);font-size:14px;line-height:1.85;margin-bottom:20px}

/* contact info pills */
.footer-contact-info li{
    display:flex;gap:12px;align-items:center;
    color:rgba(255,255,255,.5);font-size:13.5px;
    margin-bottom:8px;
    padding:9px 14px;
    background:rgba(255,255,255,.03);
    border-radius:10px;
    border:1px solid rgba(255,255,255,.05);
    transition:var(--transition);
}
.footer-contact-info li:hover{background:rgba(59,184,74,.08);border-color:rgba(59,184,74,.2);color:rgba(255,255,255,.8)}
.footer-contact-info li a{color:rgba(255,255,255,.5);transition:var(--transition)}
.footer-contact-info li a:hover{color:var(--green)}
.footer-contact-info i{
    color:var(--green);font-size:13px;flex-shrink:0;
    width:28px;height:28px;
    background:rgba(59,184,74,.12);
    border-radius:7px;
    display:flex;align-items:center;justify-content:center;
}

/* footer links */
.footer-cat li,.footer-arch li{margin-bottom:4px}
.footer-cat a,.footer-arch a{
    color:rgba(255,255,255,.45);font-size:14px;
    display:flex;align-items:center;gap:10px;
    padding:9px 12px;border-radius:9px;
    border:1px solid transparent;
    transition:var(--transition);
}
.footer-cat a:hover,.footer-arch a:hover{
    color:var(--green);
    background:rgba(59,184,74,.08);
    border-color:rgba(59,184,74,.15);
    padding-left:18px;
}
.footer-cat a i,.footer-arch a i{font-size:9px;color:var(--green);margin-left:auto;flex-shrink:0}

/* social icons */
.footer-socials{display:flex;gap:9px;margin-top:20px}
.footer-soc{
    width:40px;height:40px;border-radius:10px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.55);
    display:flex;align-items:center;justify-content:center;
    font-size:15px;transition:var(--transition);
    text-decoration:none;
}
.footer-soc:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-5px);box-shadow:0 10px 24px rgba(59,184,74,.4)}

/* search */
.footer-search{display:flex;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-full);overflow:hidden;background:rgba(255,255,255,.04)}
.footer-search input{flex:1;background:transparent;border:none;padding:12px 18px;color:#fff;font-size:14px;font-family:inherit;outline:none}
.footer-search input::placeholder{color:rgba(255,255,255,.25)}
.footer-search button{background:var(--green);border:none;padding:12px 20px;color:#fff;cursor:pointer;font-size:14px;transition:var(--transition)}
.footer-search button:hover{background:var(--green-dark)}

/* ===================== FOOTER BOTTOM ===================== */
.footer-bottom{
    background:#040f18;
    padding:18px 0;
    position:relative;
}
.footer-bottom::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--green),rgba(27,106,140,.8),transparent);
}
.footer-bottom .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer-bottom p{color:rgba(255,255,255,.28);font-size:13px;margin:0}
.footer-bottom a{color:var(--green)}
.footer-bottom-right{display:flex;align-items:center;gap:6px}
.footer-bottom-right span{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s ease-in-out infinite}
.footer-bottom-right p{color:rgba(255,255,255,.28);font-size:13px;margin:0}
.footer-green-dot{display:none}

/* ===================== BACK TO TOP ===================== */
#backToTop{position:fixed;bottom:32px;right:32px;width:46px;height:46px;background:var(--green);border:none;border-radius:50%;color:#fff;font-size:1rem;cursor:pointer;opacity:0;visibility:hidden;transition:var(--transition);z-index:999;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-green)}
#backToTop.show{opacity:1;visibility:visible}
#backToTop:hover{background:var(--green-dark);transform:translateY(-4px);box-shadow:0 12px 30px rgba(59,184,74,.4)}

/* ===================== PAGE HEADER ===================== */
.page-header{
    background:
        linear-gradient(135deg,#061520 0%,#0d3040 35%,#0a3d28 70%,#071e28 100%);
    padding:70px 0 50px;
    text-align:center;
    position:relative;
    overflow:hidden;
    box-shadow:inset 0 -4px 0 0 var(--green);
}
/* Fine dot grid */
.page-header::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle,rgba(59,184,74,.18) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
    background-size:32px 32px,64px 64px,64px 64px;
    pointer-events:none;
    animation:gridDrift 28s linear infinite;
}
/* Glowing orbs + diagonal colour wash */
.page-header::after{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 85% 0%,  rgba(59,184,74,.22)  0%,transparent 45%),
        radial-gradient(ellipse at 10% 110%,rgba(27,106,140,.28) 0%,transparent 48%),
        radial-gradient(ellipse at 50% 50%, rgba(59,184,74,.04)  0%,transparent 60%),
        linear-gradient(135deg,rgba(59,184,74,.06) 0%,transparent 50%,rgba(27,106,140,.08) 100%);
    pointer-events:none;
    animation:phOrbPulse 9s ease-in-out infinite;
}
@keyframes gridDrift{0%{background-position:0 0,0 0,0 0}100%{background-position:32px 32px,0 0,0 0}}
@keyframes phOrbPulse{0%,100%{opacity:1}50%{opacity:.6}}

.ph-inner{position:relative;z-index:2}

/* Decorative floating ring — left */
.ph-inner::before{
    content:'';
    position:absolute;
    top:-55px;left:-130px;
    width:330px;height:270px;
    border:1px solid rgba(59,184,74,.18);
    border-radius:50%;
    pointer-events:none;
    animation:phRingL 12s ease-in-out infinite;
}
/* Decorative floating ring — right */
.ph-inner::after{
    content:'';
    position:absolute;
    bottom:-75px;right:-110px;
    width:260px;height:210px;
    border:1.5px solid rgba(27,106,140,.25);
    border-radius:50%;
    pointer-events:none;
    animation:phRingR 15s ease-in-out infinite;
}
@keyframes phRingL{0%,100%{transform:rotate(-30deg) scale(1)}50%{transform:rotate(-18deg) scale(1.07)}}
@keyframes phRingR{0%,100%{transform:rotate(20deg) scale(1)}50%{transform:rotate(36deg) scale(1.06)}}

.page-header h1{
    font-size:clamp(1.5rem,2.5vw,2.1rem);
    font-weight:900;
    color:#fff;
    margin-bottom:26px;
    letter-spacing:-1.5px;
    text-shadow:0 4px 28px rgba(0,0,0,.4);
    animation:phTitleIn .8s cubic-bezier(.22,1,.36,1) .1s both;
}
.page-header h1 span{
    color:var(--green);
    position:relative;
    display:inline-block;
}
/* Animated growing underline on the green word */
.page-header h1 span::after{
    content:'';
    position:absolute;
    bottom:-7px;left:0;
    width:100%;height:3px;
    background:linear-gradient(90deg,var(--green),#28a745,var(--green));
    border-radius:2px;
    transform-origin:left center;
    animation:phUnderline 1s cubic-bezier(.22,1,.36,1) .9s both;
}
@keyframes phTitleIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes phUnderline{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* Glassmorphism breadcrumb pill */
.breadcrumb{
    display:inline-flex;
    justify-content:center;
    gap:10px;
    font-size:13px;
    color:rgba(255,255,255,.55);
    align-items:center;
    background:rgba(255,255,255,.09);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    padding:9px 26px;
    border-radius:var(--radius-full);
    border:1px solid rgba(255,255,255,.15);
    animation:phBreadIn .75s cubic-bezier(.22,1,.36,1) .38s both;
}
@keyframes phBreadIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.breadcrumb a{color:rgba(255,255,255,.78)}
.breadcrumb a:hover{color:var(--green)}
.breadcrumb .sep{color:var(--green);font-size:11px}
.breadcrumb .cur{color:#fff;font-weight:700}

/* ===================== SERVICE DETAIL PAGES ===================== */
.sd-intro{padding:70px 0}
.sd-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.sd-intro-badge{display:inline-flex;align-items:center;gap:8px;background:var(--green-light);color:var(--green-dark);font-size:13px;font-weight:700;padding:7px 16px;border-radius:var(--radius-full);margin-bottom:18px}
.sd-intro-badge i{font-size:16px;color:var(--green)}
.sd-intro h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;color:var(--text-dark);margin-bottom:16px;line-height:1.25}
.sd-intro h2 span{color:var(--dark)}
.sd-intro p{color:var(--text);font-size:16px;line-height:1.8;margin-bottom:24px}
.sd-key-list{list-style:none;padding:0;margin:0 0 32px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sd-key-list li{display:flex;align-items:center;gap:10px;color:var(--text-dark);font-weight:600;font-size:14.5px}
.sd-key-list li i{color:var(--green);font-size:16px;flex-shrink:0}
.sd-intro-img{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-teal)}
.sd-intro-img img{width:100%;height:440px;object-fit:cover;display:block}
.sd-img-badge{position:absolute;bottom:24px;left:24px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-radius:var(--radius);padding:14px 20px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.sd-img-badge .sib-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--green),var(--dark));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0}
.sd-img-badge .sib-text strong{display:block;color:var(--text-dark);font-size:15px;font-weight:800}
.sd-img-badge .sib-text span{color:var(--text);font-size:12px}
.sd-offerings{background:var(--light-bg);padding:80px 0}
.sd-offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.sd-offer-card{background:#fff;border-radius:var(--radius-xl);padding:32px 24px;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:var(--transition);position:relative;overflow:hidden}
.sd-offer-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--dark))}
.sd-offer-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-teal)}
.sd-offer-icon{width:54px;height:54px;background:linear-gradient(135deg,var(--green-light),rgba(27,106,140,.1));border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:22px;color:var(--dark)}
.sd-offer-card h5{font-size:16px;font-weight:800;color:var(--text-dark);margin-bottom:10px}
.sd-offer-card p{color:var(--text);font-size:14px;line-height:1.7}
.sd-why{background:linear-gradient(135deg,#071e28,#0e4460);padding:80px 0;position:relative;overflow:hidden;text-align:center}
.sd-why::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(59,184,74,.1) 1px,transparent 1px);background-size:24px 24px}
.sd-why .section-head{position:relative;z-index:1}
.sd-why .section-head h2{color:#fff}
.sd-why .section-head p{color:rgba(255,255,255,.7)}
.sd-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;position:relative;z-index:1}
.sd-why-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);padding:28px 22px;text-align:center;transition:var(--transition);backdrop-filter:blur(6px)}
.sd-why-card:hover{background:rgba(255,255,255,.12);transform:translateY(-5px)}
.sd-why-icon{width:58px;height:58px;background:linear-gradient(135deg,var(--green),var(--dark));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:22px;color:#fff;box-shadow:0 6px 20px rgba(59,184,74,.3)}
.sd-why-card h5{color:#fff;font-size:15px;font-weight:700;margin-bottom:8px}
.sd-why-card p{color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.65}
@media(max-width:900px){
.sd-intro-grid{grid-template-columns:1fr}
.sd-offer-grid{grid-template-columns:repeat(2,1fr)}
.sd-why-grid{grid-template-columns:repeat(2,1fr)}
.sd-key-list{grid-template-columns:1fr}
}
@media(max-width:600px){
.sd-offer-grid{grid-template-columns:1fr}
.sd-why-grid{grid-template-columns:1fr}
}

/* ===================== ABOUT PAGE ===================== */
.about-img-box{position:relative}
.about-img-main{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-teal)}
.about-img-main img{width:100%;height:100%;object-fit:cover}
.about-exp-badge{position:absolute;bottom:-20px;right:-20px;background:linear-gradient(135deg,var(--green),var(--dark));color:#fff;padding:24px 26px;text-align:center;border-radius:var(--radius-xl);box-shadow:var(--shadow-green)}
.about-exp-badge .num{display:block;font-size:2.4rem;font-weight:900;line-height:1}
.about-exp-badge .lbl{font-size:12px;font-weight:600;letter-spacing:.5px}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.af-item{display:flex;gap:14px;align-items:flex-start;padding:14px;background:var(--light-bg);border-radius:var(--radius);transition:var(--transition)}
.af-item:hover{background:#fff;box-shadow:var(--shadow-sm)}
.af-icon{width:46px;height:46px;background:linear-gradient(135deg,var(--green-light),#c8f0cf);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:1.1rem;flex-shrink:0}
.af-item h5{font-size:14px;font-weight:700;color:var(--text-dark);margin:0 0 4px}
.af-item p{font-size:13px;color:var(--text);margin:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}

/* ===================== CONTACT PAGE ===================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:52px}
.contact-info-box h3{font-size:1.6rem;font-weight:900;color:var(--text-dark);margin-bottom:8px}
.contact-info-box h3 span{color:var(--dark)}
.ci-list{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.ci-row{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:#fff;border-radius:var(--radius-xl);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:var(--transition)}
.ci-row:hover{border-color:var(--green);box-shadow:var(--shadow-teal);transform:translateX(4px)}
.ci-ico{width:44px;height:44px;background:linear-gradient(135deg,var(--green),var(--dark));border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;flex-shrink:0}
.ci-row h6{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text);margin:0 0 4px}
.ci-row p,.ci-row a{font-size:14.5px;color:var(--text-dark);margin:0;line-height:1.5;font-weight:600}
.ci-row a:hover{color:var(--green)}
.contact-form-card{background:#fff;border-radius:var(--radius-xl);padding:40px;box-shadow:0 20px 60px rgba(27,106,140,.14);border:1px solid rgba(27,106,140,.1)}
.contact-form-card h4{font-size:1.4rem;font-weight:900;color:var(--text-dark);margin-bottom:26px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg{margin-bottom:18px}
.fg label{display:block;font-size:13px;font-weight:700;color:var(--text-dark);margin-bottom:7px;letter-spacing:.3px}
.fg input,.fg textarea{width:100%;padding:13px 18px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:inherit;font-size:14.5px;color:var(--text-dark);background:var(--light-bg);outline:none;transition:var(--transition)}
.fg input:focus,.fg textarea:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(59,184,74,.08)}
.fg textarea{min-height:140px;resize:vertical}
.btn-send{width:100%;background:linear-gradient(135deg,var(--green),var(--dark));color:#fff;border:none;padding:15px;border-radius:var(--radius-full);font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.5px;box-shadow:var(--shadow-green)}
.btn-send:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(59,184,74,.35)}
.success-msg{background:var(--green-light);border:1px solid rgba(59,184,74,.3);color:#1e7e34;padding:14px 18px;border-radius:var(--radius);font-weight:600;display:none;align-items:center;gap:8px;margin-bottom:18px}
.success-msg.show{display:flex}

/* ===================== SERVICES FULL PAGE ===================== */
.svc-full-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}

/* ===================== BUTTON PRIMARY ===================== */
.btn-primary{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--green),var(--dark));color:#fff;font-weight:700;font-size:15px;padding:13px 30px;border-radius:var(--radius-full);transition:var(--transition);box-shadow:var(--shadow-green);letter-spacing:.3px}
.btn-primary:hover{background:linear-gradient(135deg,var(--dark),var(--green));color:#fff;transform:translateY(-3px);box-shadow:0 14px 36px rgba(59,184,74,.35)}

/* ===================== ABOUT STRIP ===================== */
.about-strip{background:linear-gradient(140deg,#071e28 0%,var(--dark2) 55%,#0b3d52 100%);padding:80px 0;position:relative;overflow:hidden}
.about-strip::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(59,184,74,.09) 1.5px,transparent 1.5px);background-size:32px 32px;pointer-events:none;animation:gridDrift 28s linear infinite}

/* Canvas particle network */
.as-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.about-strip-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:2}
.about-strip-text .strip-label{display:inline-flex;align-items:center;gap:7px;background:rgba(59,184,74,.15);border:1px solid rgba(59,184,74,.35);color:var(--green);font-size:12px;font-weight:700;padding:5px 16px;border-radius:var(--radius-full);margin-bottom:18px;letter-spacing:.8px;text-transform:uppercase}
.about-strip-text h2{font-size:clamp(1.9rem,3vw,2.7rem);font-weight:900;color:#fff;margin-bottom:18px;line-height:1.2;letter-spacing:-.5px}
.about-strip-text h2 span{color:var(--green)}
.about-strip-text p{color:rgba(255,255,255,.68);font-size:16px;line-height:1.82;margin-bottom:26px}
.strip-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.strip-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.8);font-size:13px;font-weight:600;padding:7px 16px;border-radius:var(--radius-full)}
.strip-badge i{color:var(--green);font-size:13px}
.btn-strip{display:inline-flex;align-items:center;gap:9px;background:var(--green);color:#fff;font-weight:700;font-size:15px;padding:13px 28px;border-radius:var(--radius-full);transition:var(--transition);box-shadow:var(--shadow-green)}
.btn-strip:hover{background:#28a745;color:#fff;transform:translateY(-3px);box-shadow:0 12px 32px rgba(59,184,74,.4)}
.about-strip-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.as-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:30px 20px;text-align:center;transition:var(--transition);backdrop-filter:blur(8px)}
.as-stat:hover{background:rgba(255,255,255,.11);transform:translateY(-5px);border-color:rgba(59,184,74,.3)}
.as-stat-num{display:block;font-size:3rem;font-weight:900;color:#fff;line-height:1;letter-spacing:-2px}
.as-stat-num em{font-style:normal;color:var(--green);font-size:2.2rem}
.as-stat-label{display:block;color:rgba(255,255,255,.5);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;margin-top:8px}

/* ===================== APPROACH SECTION ===================== */
.approach-section{background:#fff;padding:90px 0}
.approach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;position:relative}
.approach-grid::before{content:'';position:absolute;top:56px;left:12.5%;width:75%;height:2px;background:linear-gradient(90deg,var(--green),rgba(27,106,140,.3),var(--green));z-index:0;opacity:.25}
.approach-card{text-align:center;padding:0 18px 40px;position:relative;transition:var(--transition)}
.approach-card:hover{transform:translateY(-6px)}
.ap-step{font-size:5rem;font-weight:900;color:rgba(27,106,140,.05);line-height:1;margin-bottom:-28px;letter-spacing:-4px;user-select:none}
.ap-icon{width:76px;height:76px;background:linear-gradient(135deg,var(--green),var(--dark));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-size:26px;color:#fff;position:relative;z-index:1;box-shadow:0 8px 28px rgba(59,184,74,.3);border:5px solid #fff;transition:var(--transition)}
.approach-card:hover .ap-icon{transform:scale(1.1);box-shadow:0 14px 40px rgba(59,184,74,.4)}
.approach-card h4{font-size:19px;font-weight:800;color:var(--text-dark);margin-bottom:12px}
.approach-card p{font-size:14px;color:var(--text);line-height:1.78;max-width:220px;margin:0 auto}
.ap-connector{position:absolute;top:54px;right:-18px;width:36px;height:36px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--green);font-size:13px;z-index:2;box-shadow:0 2px 12px rgba(0,0,0,.1);border:1.5px solid var(--border)}
.approach-card:last-child .ap-connector{display:none}

/* ===================== SERVICES SECTION — enhance ===================== */
.services-view-all{text-align:center;margin-top:48px}
.btn-view-all{display:inline-flex;align-items:center;gap:10px;background:transparent;border:2px solid var(--dark);color:var(--dark);font-weight:700;font-size:15px;padding:13px 32px;border-radius:var(--radius-full);transition:var(--transition)}
.btn-view-all:hover{background:var(--dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-teal)}

/* ===================== ENHANCED ANIMATIONS ===================== */

/* --- Feature card shimmer sweep on hover --- */
.feature-card::after{
    content:'';
    position:absolute;
    top:-80%;left:-70%;
    width:55%;height:280%;
    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
    transform:rotate(10deg);
    pointer-events:none;
    opacity:0;
}
.feature-card:hover::after{opacity:1;animation:shimmerSlide .65s ease forwards}
@keyframes shimmerSlide{0%{left:-70%}100%{left:130%}}

/* --- Service card icon bounce on hover --- */
.svc-card:hover .svc-icon-circle{animation:iconBounce .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes iconBounce{0%{transform:translateY(0)}35%{transform:translateY(-9px)}70%{transform:translateY(-3px)}100%{transform:translateY(0)}}

/* --- Approach icon pulsing outer ring --- */
.ap-icon{overflow:visible}
.ap-icon::before{
    content:'';
    position:absolute;
    inset:-9px;
    border-radius:50%;
    border:2px solid rgba(59,184,74,.28);
    pointer-events:none;
    animation:apRingPulse 2.8s ease-in-out infinite;
}
@keyframes apRingPulse{0%,100%{transform:scale(1);opacity:.28}50%{transform:scale(1.2);opacity:.7}}

/* --- Section badge shimmer --- */
.section-badge{position:relative;overflow:hidden}
.section-badge::after{
    content:'';
    position:absolute;
    top:0;left:-100%;
    width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    animation:badgeShimmer 4s ease-in-out infinite;
}
@keyframes badgeShimmer{0%,60%{left:-100%}100%{left:220%}}

/* --- Strip badge hover lift + glow --- */
.strip-badge{transition:var(--transition)}
.strip-badge:hover{
    background:rgba(59,184,74,.2);
    border-color:rgba(59,184,74,.55);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 6px 20px rgba(59,184,74,.22);
}

/* --- CTA pill hover glow --- */
.cta-pill{transition:var(--transition)}
.cta-pill:hover{
    background:rgba(59,184,74,.2);
    border-color:var(--green);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(59,184,74,.25);
}

/* --- Stat numbers pulse green on parent hover --- */
.as-stat:hover .as-stat-num{color:var(--green);transition:color .3s}
.cta-stat:hover .cta-stat-num{color:var(--green);transition:color .3s}

/* --- Nav CTA pulsing attention glow --- */
@keyframes navBtnGlow{0%,100%{box-shadow:none}50%{box-shadow:0 0 16px 4px rgba(59,184,74,.38)}}
.btn-get-touch{animation:navBtnGlow 3.5s ease-in-out infinite}
.btn-get-touch:hover{animation:none}

/* --- Hero slide label dot breathe --- */
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}
.slide-label::before{animation:breathe 2s ease-in-out infinite}

/* --- Footer info icon spin on hover --- */
.fi-item:hover .fi-icon{transform:scale(1.1) rotate(8deg)}

/* --- Service detail card shimmer --- */
.sd-offer-card{overflow:hidden;position:relative}
.sd-offer-card::after{
    content:'';
    position:absolute;
    top:-80%;left:-70%;
    width:55%;height:280%;
    background:linear-gradient(105deg,transparent 40%,rgba(59,184,74,.07) 50%,transparent 60%);
    pointer-events:none;
    opacity:0;
}
.sd-offer-card:hover::after{opacity:1;animation:shimmerSlide .65s ease forwards}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1024px){
    .features-grid{grid-template-columns:repeat(2,1fr)}
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    .fi-grid{grid-template-columns:repeat(2,1fr)}
    .approach-grid{grid-template-columns:repeat(2,1fr)}
    .approach-grid::before{display:none}
    .about-strip-inner{grid-template-columns:1fr;gap:50px}
}
@media(max-width:860px){
    .nav-links{display:none;position:fixed;top:0;right:0;bottom:0;width:280px;background:#fff;z-index:200;flex-direction:column;padding:90px 20px 20px;box-shadow:-4px 0 40px rgba(0,0,0,.14);transform:translateX(100%);transition:transform .35s ease}
    .nav-links.open{display:flex;transform:translateX(0)}
    .nav-links a{padding:14px 4px;border-bottom:1px solid var(--border)}
    .nav-links a::after{display:none}
    .hamburger{display:flex}
    .hero-slider{height:500px}
    .two-col,.contact-grid{grid-template-columns:1fr}
    .svc-full-grid{grid-template-columns:repeat(2,1fr)}
    .cta-band-img{display:none}
}
@media(max-width:600px){
    .features-grid,.services-grid,.blog-grid,.svc-full-grid,.approach-grid{grid-template-columns:1fr}
    .ap-connector{display:none}
    .about-strip-stats{grid-template-columns:1fr 1fr}
    .fi-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .hero-slider{height:420px}
    .slide-content h2{font-size:1.8rem}
    .cta-band-btns{flex-direction:column}
    .top-bar{height:auto;overflow:visible}
    .top-bar-left{padding:8px 0}.top-bar-left::after{display:none}
    .top-bar-right{padding:8px 0}
    .tbr-inner{padding:0 0 0 16px;gap:6px}
    .form-row-2{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
    .top-soc:nth-child(n+3){display:none}
    .about-exp-badge{right:0;bottom:-16px}
    .two-col{gap:40px}
}