/* =========================================================
   ROOT
========================================================= */

:root{
    --navy:#030b18;
    --navy2:#07172d;
    --green:#13c8ff;
    --green2:#087cff;
    --green:#337b0b;
    --cyan:#42e7ff;
    --white:#ffffff;
    --muted:#8fa2b9;
    --red:#e00807;
    --line:rgba(255,255,255,.10);
    --glass:rgba(255,255,255,.055);
    --container:1220px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family: "Poppins", sans-serif !important;
    background:#f4f7fb;
    color:#172238;font-size: 15px !important;
    overflow-x:hidden;
}
body,
button,
input,
textarea,
select {
     font-family: "Poppins", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif !important;
    font-weight: 600;
}
img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
textarea,
select{
    font-family:inherit;
}

.container{
    width:min(var(--container),92%);
    margin:auto;
}


/* =========================================================
   TOP INFO BAR
========================================================= */

.topbar{
    background:var(--red);
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#fff !important;
    font-size:15px;font-weight: 500;
}

.topbar-inner{
    min-height:39px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.top-message{
    display:flex;
    align-items:center;
    gap:9px;
}
.top-message span{
    color: #fff !important
}
.top-message i{
    color:#fff;
}

.top-social{
    display:flex;
    gap:7px;
}

.top-social a{
    width:25px;
    height:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    transition:.3s;
}

.top-social a:hover{
    background:var(--green);
    color:#fff;
}


/* =========================================================
   HEADER
========================================================= */

.header{
    position:sticky;
    top:0;
    z-index:1000;
    background:#fff;
    border-bottom:1px solid rgba(255,255,255,.07);
    backdrop-filter:blur(18px);
}

.navbar{
    height:112px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25x;
}

.logo img{
    width:275px;
    height:auto;
    /*filter:brightness(0) invert(1);*/
}

.nav{
    display:flex;
    align-items:center;
    gap:28px;
}

.nav > li{
    position:relative;
}

.nav > li > a{
    color:#423f3f;
    font-size:15px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:7px;
    height:82px;
    position:relative;
}

.nav > li > a:after{
    content:"";
    position:absolute;
    bottom:20px;
    left:0;
    width:0;
    height:2px;
    background:var(--green);
    /*box-shadow:0 0 10px var(--green);*/
    transition:.3s;
}

.nav > li > a:hover:after,
.nav > li > a.active:after{
    width:100%;
}


/* =========================================================
   MEGA MENU
========================================================= */

.mega-menu{
    position:absolute;
    top:100%;
    left:50%;
    transform:translate(-50%,15px);
    width:760px;
    padding:25px;
    background:#fff;
    border:1px solid rgba(34,198,255,.17);
    border-radius:14px;
    box-shadow:0 25px 70px rgba(0,0,0,.45);
    backdrop-filter:blur(25px);
    opacity:0;
    visibility:hidden;
    transition:.3s;
}

.nav > li:hover .mega-menu{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}

.mega-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.mega-item{
    padding:18px;
    border:1px solid transparent;
    border-radius:10px;
    transition:.3s;
}

.mega-item:hover{
    background:rgba(20,199,255,.07);
    border-color:rgba(20,199,255,.16);
}

.mega-icon{
    width:42px;
    height:42px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--green);
    background:rgba(19,200,255,.08);
    margin-bottom:12px;
}

.mega-item strong{
    display:block;
    color:#383636;
    font-size:15px;
    margin-bottom:5px;
}

.mega-item span{
    display:block;
    color:#222324;
    font-size:12px;
    line-height:1.5;
}

.nav-cta{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--green);
    color:#fff;
    padding:12px 18px;
    border-radius:7px;
    font-size:17px;
    font-weight:600;
    box-shadow:0 8px 25px rgba(19,200,255,.18);
    transition:.3s;
}

.nav-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 35px rgba(19,200,255,.3);
}

.menu-btn{
    display:none;
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.1);
    background:rgb(12 23 82);
    color:#fff;
    border-radius:8px;
    font-size:19px;
}


/* =========================================================
   HERO
========================================================= */

.hero{
    min-height:760px;
    position:relative;
    overflow:hidden;
    background:#020a15;
    display:flex;
    align-items:center;
}

.hero-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,
        rgba(1,8,19,.98) 0%,
        rgba(1,11,24,.93) 37%,
        rgba(1,11,24,.55) 70%,
        rgba(1,8,19,.82) 100%),
        url("https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&w=2200&q=90")
        center/cover;
    transform:scale(1.04);
}

.hero-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(25,193,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(25,193,255,.045) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(to right,black,transparent);
}


/* =========================================================
   SCANNING EFFECT
========================================================= */

.scan-line{
    position:absolute;
    top:0;
    left:-10%;
    width:5px;
    height:100%;
    background:linear-gradient(
        to bottom,
        transparent,
        var(--green),
        #fff,
        var(--green),
        transparent
    );
    box-shadow:
        0 0 12px var(--green),
        0 0 35px var(--green),
        0 0 80px rgba(19,200,255,.7);
    opacity:.75;
    animation:scan 5s ease-in-out infinite;
}

.scan-glow{
    position:absolute;
    top:0;
    left:-10%;
    width:160px;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(19,200,255,.13),
        transparent
    );
    filter:blur(5px);
    animation:scan 5s ease-in-out infinite;
}

@keyframes scan{
    0%{
        left:-12%;
        opacity:0;
    }

    10%{
        opacity:.8;
    }

    90%{
        opacity:.8;
    }

    100%{
        left:110%;
        opacity:0;
    }
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content{
    position:relative;
    z-index:5;
    max-width:690px;
    color:#fff;
    padding:50px 0 50px;
}

.hero-label{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:8px 13px;
    border-radius:50px;
    background:rgba(15,196,255,.08);
    border:1px solid rgba(30,207,255,.25);
    color:#5ce0ff;
    font-size:10px;
    letter-spacing:2px;
    font-weight:800;
    margin-bottom:22px;
}

.live-dot{
    width:7px;
    height:7px;
    background:#19d7ff;
    border-radius:50%;
    box-shadow:0 0 14px #19d7ff;
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    50%{
        transform:scale(1.5);
        opacity:.5;
    }
}

.hero h1{
    font-family: "Rajdhani", sans-serif;
    font-size:64px;
    line-height:1.04;
    letter-spacing:-2.8px;
    margin-bottom:24px;
}

.hero h1 span{
    background:linear-gradient(90deg,#fff,#30d6ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-description{
    max-width:610px;
    color:#a9b8c9;
    font-size:15px !important;
    line-height:1.8;
    margin-bottom:31px;
}

.hero-actions{
    display:flex;
    gap:13px;
    flex-wrap:wrap;
}

.btn{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 23px;
    border-radius:7px;
    font-size:12px;
    font-weight:800;
    transition:.35s;
}

.btn-primary{
    background:linear-gradient(135deg,#16d0ff,#087cf5);
    color:#001321;
    box-shadow:0 12px 35px rgba(16,192,255,.2);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 17px 45px rgba(16,192,255,.35);
}

.btn-glass{
    color:#fff;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
}

.btn-glass:hover{
    border-color:var(--green);
    background:rgba(19,200,255,.08);
}


/* =========================================================
   HERO CAMERA CARD
========================================================= */

.camera-card{
    position:absolute;
    right:7%;
    top:50%;
    transform:translateY(-50%);
    z-index:4;
    width:330px;
    padding:13px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:16px;
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(15px);
    box-shadow:0 30px 100px rgba(0,0,0,.5);
}

.camera-screen{
    height:225px;
    border-radius:10px;
    overflow:hidden;
    position:relative;
    background:
        linear-gradient(135deg,rgba(0,20,35,.25),rgba(0,0,0,.5)),
        url("https://images.unsplash.com/photo-1580983218765-f663bec07b37?auto=format&fit=crop&w=900&q=85")
        center/cover;
}

.camera-screen:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.04) 0px,
            rgba(255,255,255,.04) 1px,
            transparent 1px,
            transparent 5px
        );
}

.camera-scan{
    position:absolute;
    left:0;
    right:0;
    height:2px;
    background:#2bd8ff;
    box-shadow:0 0 20px #2bd8ff;
    z-index:5;
    animation:cameraScan 3s linear infinite;
}

@keyframes cameraScan{
    0%{top:0}
    100%{top:100%}
}

.camera-top{
    position:absolute;
    left:12px;
    top:10px;
    z-index:7;
    display:flex;
    gap:7px;
    align-items:center;
    color:#fff;
    font-size:9px;
    font-weight:700;
}

.camera-top i{
    color:#ff4d5d;
    font-size:7px;
}

.camera-bottom{
    position:absolute;
    bottom:10px;
    left:12px;
    right:12px;
    z-index:7;
    display:flex;
    justify-content:space-between;
    color:#fff;
    font-size:8px;
}

.camera-info{
    padding:14px 5px 2px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.camera-info strong{
    display:block;
    color:#fff;
    font-size:12px;
}

.camera-info span{
    color:#7890a8;
    font-size:9px;
}

.online{
    color:#3de6b1;
    font-size:9px;
    display:flex;
    gap:5px;
    align-items:center;
}

.online i{
    font-size:6px;
}


/* =========================================================
   HERO BOTTOM STATS
========================================================= */

.hero-bottom{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:7;
    background:rgba(2,12,27,.7);
    border-top:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.hero-stat{
    min-height:82px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:0 22px;
    border-right:1px solid rgba(255,255,255,.08);
}

.hero-stat:last-child{
    border-right:0;
}

.hero-stat i{
    color:var(--green);
    font-size:21px;
}

.hero-stat strong{
    display:block;
    color:#fff;
    font-size:15px;
}

.hero-stat span{
    color:#71869d;
    font-size:9px;
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.section{
    padding:55px 0;
}

.eyebrow{
    font-size:10px;
    color:var(--green);
    letter-spacing:2.5px;
    font-weight:800;
    margin-bottom:12px;
}

.heading{
    max-width:700px;
    margin-bottom:55px;
}

.heading.center{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.heading h2{
    font-family: "Rajdhani", sans-serif;
    color:#0c1a2e;
    font-size:43px;
    line-height:1.13;
    letter-spacing:-1.4px;
    margin-bottom:16px;
}

.heading p{
    color:#333;
    font-size:15px;
    line-height:1.8;
}


/* =========================================================
   ABOUT
========================================================= */

.about{
    background:#fff;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:80px;
    align-items:center;
}

.about-visual{
    position:relative;
}

.about-image{
    height:530px;
    border-radius:18px;
    overflow:hidden;
    position:relative;
}

.about-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.about-image:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(2,12,25,.45),transparent 60%);
}

.about-glass{
    position:absolute;
    bottom:28px;
    left:28px;
    right:28px;
    z-index:2;
    padding:18px;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(3,16,34,.72);
    backdrop-filter:blur(15px);
    border-radius:11px;
    color:#fff;
}

.about-glass strong{
    font-family:"Manrope";
    font-size:27px;
    color:#2bd5ff;
}

.about-glass span{
    color:#aebdce;
    font-size:11px;
    margin-left:5px;
}

.about-content h3{
    font-family:"Manrope";
    font-size:34px;color: #0c1a2e;
    line-height:1.2;
    margin-bottom:18px;
}

.about-content p{
    color: #333436;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    margin-bottom: 16px;
}

.check-list{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:12px;
    margin:27px 0;
}

.check-list li{
    display:flex;
    align-items:center;
    gap:9px;
    color:#333;
    font-size:15px;
    font-weight:700;
}

.check-list i{
    color:var(--red);
}


/* =========================================================
   SERVICES
========================================================= */

.services{
    background:#f3f7fb;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.service-card{
    position:relative;
    min-height:270px;
    padding:10px;
    overflow:hidden;
    border-radius:14px;
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.96),
        rgba(247,250,253,.88)
    );
    border:1px solid #e3eaf2;
    transition:.4s;
}
.service-card img{
    height: 260px;
}
.service-card:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--green),transparent);
    transform:translateX(-100%);
    transition:.5s;
}

.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(15,44,75,.1);
}

.service-card:hover:before{
    transform:translateX(0);
}

.service-icon{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#e6f8fe;
    color:#337b0b;
    font-size:21px;
    margin-bottom:22px;
}

.service-card h3{
    font-family: "Poppins", sans-serif !important;
    font-size:18px;color: #0c1a2e;
    margin:10px 0px;
}

.service-card p{
    color:#131313;
    font-size:15px;margin-bottom: 10px;
    line-height:1.7;
}

.service-link{
    /*position:absolute;min-height: 300px;*/
    bottom:27px;
    left:30px;
    color:#337b0b;
    font-size:15px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:7px;
}


/* =========================================================
   DARK STATS
========================================================= */

.dark-stats{
    background:
        radial-gradient(circle at 20% 50%,rgba(13,175,236,.13),transparent 30%),
        #031021;
    color:#fff;
    padding:75px 0;
    position:relative;
    overflow:hidden;
}

.dark-stats:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(25,199,255,.3),transparent);
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.stat{
    text-align:center;
    border-right:1px solid rgba(255,255,255,.08);
    position:relative;
    z-index:2;
}

.stat:last-child{
    border:0;
}

.stat i{
    color:#fff;
    font-size:22px;
    margin-bottom:12px;
}

.stat strong{
    font-family:"Manrope";
    font-size:40px;
    display:block;
}
.counter{
 font-family:"Manrope";
    font-size:40px !important;
   
}

.stat span{
    color:#fff;
    font-size:15px;
}


/* =========================================================
   WHY US
========================================================= */

.why{
    background:#fff;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.why-card{
    padding:28px;
    border:1px solid #e5ebf2;
    border-radius:12px;
    transition:.35s;
}

.why-card:hover{
    border-color:rgba(11,190,237,.3);
    /*box-shadow:0 20px 50px rgba(14,45,78,.08);*/
    transform:translateY(-5px);
}

.why-icon{
    color:var(--green);
    font-size:24px;
    margin-bottom:6px;
}

.why-card h3{
    font-family: "Poppins", sans-serif !important;
    font-size:18px;color: #0c1a2e;
    margin-bottom:7px;
}

.why-card p{
    color:#333436;
    font-size:12px;
}


/* =========================================================
   PREMIUM CTA
========================================================= */

.cta{
    padding:35px 0;
    position:relative;
    overflow:hidden;
    background:linear-gradient(100deg, rgb(54 56 53), rgb(67 68 66)), url(https://images.unsplash.com/photo-1558008258-3256797b43f3?auto=format&fit=crop&w=2000&q=85) center / cover
}

.cta:before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(10,190,255,.12);
    right:-200px;
    top:-200px;
    filter:blur(30px);
}

.cta-content{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.cta h2{
    font-family:"Manrope";
    font-size:32px;
    line-height:1.12;
    max-width:720px;color:#fff;
    margin-bottom:13px;
}

.cta p{
    color:#fff;
    max-width:650px;
    font-size:15px;
}


/* =========================================================
   CONTACT
========================================================= */

.contact{
    background:#f4f7fb;
}

.contact-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:25px;
}

.contact-info{
    padding:40px;
    border-radius:15px;
    background:
        radial-gradient(circle at 90% 10%, rgb(159 186 194 / 18%), transparent 25%), #333232;
    color:#fff;
}

.contact-info h3{
    font-family:"Manrope";
    font-size:27px;
    margin-bottom:10px;
}

.contact-info > p{
    color:#d4e0e5;
    font-size:15px;
    margin-bottom:30px;
}

.contact-row{
    display:flex;
    gap:13px;
    margin-bottom:22px;
}

.contact-row i{
    width:40px;
    height:40px;
    flex:none;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:9px;
    background:rgba(18,197,255,.09);
    color:#fff;
}

.contact-row strong{
    display:block;font-weight: 600;
    font-size:15px;
    margin-bottom:3px;
}

.contact-row span{
    color:#d4e0e5;
    font-size:15px;
    line-height:1.6;
}

.form-box{
    background:#fff;
    border:1px solid #e2e9f0;
    border-radius:15px;
    padding:40px;
}

.form-box h3{
    font-family:"Manrope";color: #0c1a2e;
    font-size:25px;
    margin-bottom:24px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.form-group{
    margin-bottom:16px;
}

.form-group.full{
    grid-column:1/-1;
}

.form-group label{
    display:block;
    font-size:10px;
    font-weight:800;
    color:#526176;
    margin-bottom:7px;
}

.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    padding:10px;
    border:1px solid #dce4ec;
    border-radius:7px;
    outline:none;
    font-size:12px;
    background:#fbfcfd;
    transition:.3s;
}

.form-group textarea{
    min-height:125px;
    resize:vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    border-color:#16c1ed;
    box-shadow:0 0 0 3px rgba(16,193,237,.08);
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
    background:#f8f8f8;
    color:#423f3f;
    padding-top:45px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 0.6fr 2fr 1.2fr;
    gap:45px;
    padding-bottom:15px;
}

.footer-logo{
    width:250px;
    margin-bottom:18px;
    /*filter:brightness(0) invert(1);*/
}

.footer p{
    color:#423f3f;
    font-size:15px;
    line-height:1.8;
}

.footer h4{
        font-size: 16px;color:#ca161f;
    font-family: "Poppins", sans-serif !important;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.footer-links{
    margin-left: 1em;
}
.footer-links li{
    margin-bottom:0px;
}

.footer-links a{
    color:#423f3f;
    font-size:15px;line-height: 30px;
    transition:.3s;
}

.footer-links a:hover{
    color:#337b0b;
}

.footer-contact li{
    display:flex;
    gap:9px;
    color:#423f3f;
    font-size:15px;
    margin-bottom:13px;
}

.footer-contact i{
    color:#444;
    margin-top:3px;
}

.footer-bottom{
    border-top:1px solid rgb(48 44 44 / 8%);
    padding:18px 0;
    text-align:center;
    color:#423f3f;
    font-size:15px;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp{
    position:fixed;
    right:23px;
    bottom:23px;
    width:57px;
    height:57px;
    border-radius:50%;
    background:#20c96b;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:27px;
    z-index:2000;
    box-shadow:
        0 10px 30px rgba(0,0,0,.25),
        0 0 0 6px rgba(32,201,107,.08);
    transition:.3s;
}

.whatsapp:hover{
    transform:translateY(-5px) scale(1.04);
    box-shadow:
        0 15px 35px rgba(0,0,0,.3),
        0 0 0 9px rgba(32,201,107,.08);
}

.whatsapp-tooltip{
    position:absolute;
    right:68px;
    white-space:nowrap;
    background:#061326;
    color:#fff;
    font-size:10px;
    font-weight:700;
    padding:8px 11px;
    border-radius:6px;
    opacity:0;
    transform:translateX(7px);
    pointer-events:none;
    transition:.3s;
}

.whatsapp:hover .whatsapp-tooltip{
    opacity:1;
    transform:translateX(0);
}


/* =========================================================
   BACK TOP
========================================================= */

#backTop{
    position:fixed;
    right:25px;
    bottom:92px;
    width:40px;
    height:40px;
    border:1px solid rgba(19,200,255,.2);
    background:#333232;
    color:#fff;
    border-radius:7px;
    display:none;
    z-index:1900;
    cursor:pointer;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal{
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .nav{
        gap:18px;
    }

    .nav-cta{
        display:none;
    }

    .camera-card{
        right:3%;
        width:290px;
    }

    .hero h1{
        font-size:54px;
    }

}

@media(max-width:850px){

    .topbar{
        display:none;
    }

    .navbar{
        height:72px;
    }

    .logo img{
        width:155px;
    }

    .menu-btn{
        display:block;
    }

    .nav{
        position:absolute;
        top:72px;
        left:0;
        right:0;
        background:rgba(3,11,24,.98);
        backdrop-filter:blur(20px);
        padding:10px 5%;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav.open{
        display:flex;
    }

    .nav > li > a{
        height:auto;
        padding:15px 0;
        border-bottom:1px solid rgba(255,255,255,.07);
    }

    .nav > li > a:after{
        display:none;
    }

    .mega-menu{
        position:static;
        transform:none;
        width:100%;
        margin:0;
        padding:10px 0;
        display:none;
        opacity:1;
        visibility:visible;
        background:transparent;
        border:0;
        box-shadow:none;
    }

    .nav > li:hover .mega-menu{
        display:block;
        transform:none;
    }

    .mega-grid{
        grid-template-columns:1fr 1fr;
    }

    .hero{
        min-height:850px;
        align-items:flex-start;
    }

    .hero-content{
        padding-top:90px;
        max-width:100%;
    }

    .hero h1{
        font-size:46px;
    }

    .camera-card{
        top:auto;
        bottom:115px;
        right:50%;
        transform:translateX(50%);
        width:285px;
    }

    .hero-bottom{
        display:none;
    }

    .about-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .service-grid,
    .why-grid{
        grid-template-columns:1fr 1fr;
    }

    .stats-grid{
        grid-template-columns:1fr 1fr;
        gap:35px 0;
    }

    .stat:nth-child(2){
        border:0;
    }

    .cta-content{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:600px){

    .container{
        width:90%;
    }

    .section{
        padding:75px 0;
    }

    .hero{
        min-height:790px;
    }

    .hero h1{
        font-size:38px;
        letter-spacing:-1.5px;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .btn{
        width:100%;
    }

    .camera-card{
        width:260px;
        bottom:75px;
    }

    .mega-grid{
        grid-template-columns:1fr;
    }

    .about-image{
        height:400px;
    }

    .check-list{
        grid-template-columns:1fr;
    }

    .service-grid,
    .why-grid{
        grid-template-columns:1fr;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .stat{
        border:0!important;
    }

    .heading h2{
        font-size:32px;
    }

    .cta h2{
        font-size:32px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .form-group.full{
        grid-column:auto;
    }

    .form-box,
    .contact-info{
        padding:27px;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .whatsapp{
        width:53px;
        height:53px;
        right:17px;
        bottom:17px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *:before,
    *:after{
        animation-duration:.01ms!important;
        transition-duration:.01ms!important;
    }

}




/* =========================================================
   HERO SLIDER
========================================================= */

.hero-slider{
    position:relative;
    width:100%;
    min-height:560px !important;
    height:100vh;
    max-height:900px;
    overflow:hidden;
    background:#333232;
}


/* =========================================================
   SLIDES
========================================================= */

.hero-slides{
    position:absolute;
    inset:0;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transform:scale(1.04);
    transition:
        opacity .8s ease,
        transform 6.5s ease,
        visibility .8s ease;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.hero-bg{
    position:absolute;
    inset:0;

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    transform:scale(1.03);
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(1,8,20,.97) 0%,
            rgba(2,12,28,.90) 38%,
            rgba(2,10,25,.66) 65%,
            rgba(2,8,20,.78) 100%
        );

    z-index:2;
}


/* =========================================================
   GRID BACKGROUND
========================================================= */

.hero-grid{
    position:absolute;
    inset:0;

    z-index:3;
    pointer-events:none;

    opacity:.24;

    background-image:
        linear-gradient(
            rgba(0,174,255,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,174,255,.12) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 35%,
            #000 100%
        );

    animation:gridMove 18s linear infinite;
}

@keyframes gridMove{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(70px,70px);
    }

}


/* =========================================================
   green SCANNING BEAM
========================================================= */

.scan-beam{
    position:absolute;

    left:0;
    right:0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,183,255,.15),
            #00c8ff,
            rgba(0,183,255,.15),
            transparent
        );

    box-shadow:
        0 0 15px #00c8ff,
        0 0 35px rgba(0,190,255,.55);

    z-index:5;

    animation:scanBeam 4.5s linear infinite;

    pointer-events:none;
}

@keyframes scanBeam{

    0%{
        top:5%;
        opacity:0;
    }

    10%{
        opacity:1;
    }

    50%{
        opacity:1;
    }

    90%{
        opacity:1;
    }

    100%{
        top:95%;
        opacity:0;
    }

}


/* =========================================================
   HERO CONTAINER
========================================================= */

.hero-container{
    position:relative;

    z-index:10;

    width:min(1240px,92%);

    height:100%;

    min-height:560px !important;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content{
    width:53%;

    position:relative;
    z-index:12;
}


/* =========================================================
   BADGE
========================================================= */

.hero-badge{
    display:inline-flex;

    align-items:center;
    gap:10px;

    padding:10px 16px;

    border:1px solid rgba(0,197,255,.32);

    background:rgba(0,148,255,.08);

    backdrop-filter:blur(12px);

    border-radius:50px;

    color:#69dfff;

    font-size:12px;

    font-weight:700;

    letter-spacing:1.8px;

    margin-bottom:25px;

    box-shadow:
        0 0 25px rgba(0,185,255,.08);
}

.hero-badge .status-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#00d9ff;

    box-shadow:
        0 0 10px #00d9ff;

    animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{

    0%,100%{
        opacity:.5;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}


/* =========================================================
   TITLE
========================================================= */

.hero-content h1{
    font-size:clamp(32px,3vw,56px) !important;

    line-height:1.04;

    font-weight:600;

    letter-spacing:-1px !important;

    max-width:780px;

    margin-bottom:24px;

    text-shadow:
        0 10px 40px rgba(0,0,0,.35);
}

.hero-content h1 span{
    color:#fff;

    text-shadow:
        0 0 25px rgba(0,200,255,.22);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description{
    max-width:680px;

    color:#fff;

    font-size:17px;

    line-height:1.8;

    margin-bottom:32px;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons{
    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;
}

.btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:54px;

    padding:0 25px;

    border-radius:8px;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:.3s ease;

    position:relative;

    overflow:hidden;
}

.btn-primary{
    color:#fff;

    background:#337b0b;

    box-shadow:
        0 0 25px rgba(0,200,255,.18);
}

.btn-primary:hover{
    transform:translateY(-3px);

    box-shadow:
        0 10px 35px rgba(0,200,255,.28);
}

.btn-outline{
    color:#fff;

    border:1px solid rgba(255,255,255,.2);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);
}

.btn-outline:hover{
    border-color:var(--green);
    background:#fff ;
    color:#333;

    transform:translateY(-3px);
}


/* =========================================================
   HERO STATS
========================================================= */

.hero-stats{
    display:flex;

    align-items:center;

    gap:35px;

    margin-top:42px;
}

.hero-stat{
    position:relative;
}

.hero-stat:not(:last-child)::after{
    content:"";

    position:absolute;

    right:-18px;

    top:3px;

    width:1px;

    height:42px;

    background:rgba(255,255,255,.16);
}

.hero-stat strong{
    display:block;

    font-size:25px;

    font-weight:800;

    color:#fff;
}

.hero-stat span{
    display:block;

    margin-top:5px;

    font-size:11px;

    color:#ebf5ff;

    text-transform:uppercase;

    letter-spacing:1px;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.monitor-area{
    width:47%;

    min-height:520px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;
}


/* =========================================================
   GLOW
========================================================= */

.visual-glow{
    position:absolute;

    width:440px;
    height:440px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,190,255,.18),
            transparent 68%
        );

    filter:blur(5px);

    animation:visualGlow 4s ease-in-out infinite;
}

@keyframes visualGlow{

    0%,100%{
        transform:scale(.9);
        opacity:.6;
    }

    50%{
        transform:scale(1.08);
        opacity:1;
    }

}


/* =========================================================
   CCTV MONITOR
========================================================= */

.cctv-monitor{
    width:min(500px,100%);

    position:relative;

    border:1px solid rgba(0,199,255,.3);

    background:
        linear-gradient(
            145deg,
            rgba(9,28,50,.95),
            rgba(2,12,25,.9)
        );

    border-radius:18px;

    padding:12px;

    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 50px rgba(0,178,255,.1);

    backdrop-filter:blur(16px);

    z-index:4;
}

.monitor-screen{
    position:relative;

    height:330px;

    border-radius:11px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #071b28,
            #020a12
        );

    border:1px solid rgba(255,255,255,.08);
}


/* =========================================================
   MONITOR CAMERA BACKGROUND
========================================================= */

.monitor-camera-bg{
    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            rgba(0,0,0,.05) 50%,
            rgba(0,0,0,.25) 50%
        ),
        url("https://images.unsplash.com/photo-1557597774-9d273605dfa9?auto=format&fit=crop&w=1000&q=80");

    background-size:cover;

    background-position:center;

    filter:saturate(.8) contrast(1.1);

    opacity:.72;
}


/* =========================================================
   MONITOR HUD
========================================================= */

.monitor-top{
    position:absolute;

    top:15px;
    left:15px;
    right:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:5;
}

.live-tag{
    display:flex;

    align-items:center;

    gap:7px;

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

    padding:7px 10px;

    border-radius:5px;

    background:rgba(0,0,0,.6);

    border:1px solid rgba(255,255,255,.12);
}

.live-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#00ff8c;

    box-shadow:
        0 0 10px #00ff8c;

    animation:pulseDot 1s infinite;
}

.camera-number{
    font-size:10px;

    letter-spacing:1px;

    color:#b6c9d8;

    padding:7px 10px;

    background:rgba(0,0,0,.5);

    border-radius:5px;
}


/* =========================================================
   CAMERA CROSSHAIR
========================================================= */

.crosshair{
    position:absolute;

    left:50%;
    top:50%;

    width:80px;
    height:80px;

    transform:translate(-50%,-50%);

    border:1px solid rgba(0,211,255,.55);

    border-radius:50%;

    z-index:4;

    box-shadow:
        0 0 20px rgba(0,190,255,.18);
}

.crosshair::before,
.crosshair::after{
    content:"";

    position:absolute;

    background:#00d0ff;
}

.crosshair::before{
    left:50%;
    top:-15px;

    width:1px;
    height:110px;
}

.crosshair::after{
    top:50%;
    left:-15px;

    height:1px;
    width:110px;
}


/* =========================================================
   MONITOR SCAN
========================================================= */

.monitor-scan{
    position:absolute;

    left:0;
    right:0;

    height:2px;

    background:#00d9ff;

    box-shadow:
        0 0 15px #00d9ff,
        0 0 35px rgba(0,217,255,.7);

    z-index:6;

    animation:monitorScan 3s linear infinite;
}

@keyframes monitorScan{

    0%{
        top:5%;
    }

    100%{
        top:95%;
    }

}


/* =========================================================
   MONITOR BOTTOM
========================================================= */

.monitor-bottom{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:13px 7px 2px;
}

.monitor-info{
    font-size:10px;

    color:#7f96a8;

    letter-spacing:.8px;
}

.monitor-online{
    display:flex;

    align-items:center;

    gap:6px;

    color:#00e39a;

    font-size:10px;

    font-weight:700;
}


/* =========================================================
   SECURITY SERVICE VISUALS
========================================================= */

/* ---------- Alarm ---------- */

.alarm-visual{
    width:min(460px,100%);

    height:430px;

    border-radius:20px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        radial-gradient(
            circle,
            rgba(0,174,255,.08),
            transparent 60%
        );

    border:1px solid rgba(0,190,255,.16);

    overflow:hidden;
}

.alarm-radar{
    width:290px;
    height:290px;

    border-radius:50%;

    border:1px solid rgba(0,200,255,.3);

    position:relative;

    box-shadow:
        0 0 70px rgba(0,190,255,.08);
}

.alarm-radar::before,
.alarm-radar::after{
    content:"";

    position:absolute;

    inset:15%;

    border:1px solid rgba(0,200,255,.18);

    border-radius:50%;
}

.alarm-radar::after{
    inset:30%;
}

.alarm-radar-line{
    position:absolute;

    width:50%;

    height:2px;

    top:50%;
    left:50%;

    transform-origin:left center;

    background:linear-gradient(
        90deg,
        #00c8ff,
        transparent
    );

    box-shadow:0 0 15px #00c8ff;

    animation:radarRotate 3s linear infinite;
}

@keyframes radarRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.alarm-shield{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:80px;
    height:90px;

    clip-path:polygon(
        50% 0,
        90% 18%,
        85% 65%,
        50% 100%,
        15% 65%,
        10% 18%
    );

    border:2px solid #00d5ff;

    background:rgba(0,180,255,.08);

    box-shadow:
        0 0 30px rgba(0,200,255,.25);

    animation:shieldPulse 2s infinite;
}

@keyframes shieldPulse{

    0%,100%{
        transform:translate(-50%,-50%) scale(1);
    }

    50%{
        transform:translate(-50%,-50%) scale(1.08);
    }

}

.intrusion-point{
    position:absolute;

    width:8px;
    height:8px;

    background:#ff3b5c;

    border-radius:50%;

    box-shadow:0 0 15px #ff3b5c;

    animation:intrusionPulse 1.5s infinite;
}

.intrusion-1{
    top:22%;
    left:22%;
}

.intrusion-2{
    top:65%;
    right:20%;
    animation-delay:.4s;
}

.intrusion-3{
    bottom:20%;
    left:35%;
    animation-delay:.8s;
}

@keyframes intrusionPulse{

    0%,100%{
        transform:scale(.7);
        opacity:.5;
    }

    50%{
        transform:scale(1.4);
        opacity:1;
    }

}

.alarm-status{
    position:absolute;

    bottom:25px;
    left:25px;
    right:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:13px 15px;

    border:1px solid rgba(0,200,255,.2);

    background:rgba(1,12,24,.7);

    backdrop-filter:blur(10px);

    border-radius:10px;

    font-size:10px;

    letter-spacing:1px;
}

.alarm-status span:last-child{
    color:#00e39a;
}


/* ---------- Biometric ---------- */

.biometric-visual{
    width:min(460px,100%);

    height:430px;

    border:1px solid rgba(0,190,255,.16);

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    background:
        radial-gradient(
            circle,
            rgba(0,170,255,.1),
            transparent 65%
        );

    overflow:hidden;
}

.fingerprint{
    position:relative;

    width:210px;
    height:250px;

    border-radius:50%;

    border:3px solid rgba(0,203,255,.6);

    box-shadow:
        0 0 40px rgba(0,200,255,.12);

    transform:rotate(8deg);
}

.fingerprint::before,
.fingerprint::after{
    content:"";

    position:absolute;

    border:2px solid rgba(0,210,255,.55);

    border-radius:50%;
}

.fingerprint::before{
    inset:20px;
}

.fingerprint::after{
    inset:42px;
}

.fingerprint-line{
    position:absolute;

    left:0;
    right:0;

    top:50%;

    height:2px;

    background:#00e0ff;

    box-shadow:
        0 0 18px #00e0ff;

    animation:fingerprintScan 2.3s ease-in-out infinite;
}

@keyframes fingerprintScan{

    0%{
        top:20%;
        opacity:0;
    }

    20%{
        opacity:1;
    }

    80%{
        opacity:1;
    }

    100%{
        top:80%;
        opacity:0;
    }

}

.access-verified{
    position:absolute;

    bottom:25px;
    left:25px;
    right:25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px;

    border-radius:10px;

    background:rgba(1,13,25,.8);

    border:1px solid rgba(0,205,255,.2);
}

.access-verified strong{
    color:#00e39a;

    font-size:11px;

    letter-spacing:1px;
}

.access-verified span{
    font-size:10px;

    color:#8aa0b2;
}


/* ---------- PABX ---------- */

.pabx-visual{
    width:min(470px,100%);

    height:430px;

    border-radius:20px;

    border:1px solid rgba(0,190,255,.16);

    background:
        linear-gradient(
            145deg,
            rgba(5,28,47,.9),
            rgba(1,10,20,.95)
        );

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;
}

.pabx-center{
    width:105px;
    height:105px;

    border-radius:20px;

    border:1px solid rgba(0,220,255,.55);

    background:
        linear-gradient(
            145deg,
            rgba(0,175,255,.2),
            rgba(0,50,80,.3)
        );

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

    box-shadow:
        0 0 40px rgba(0,190,255,.12);

    z-index:3;

    animation:pabxPulse 2.5s infinite;
}

.pabx-center strong{
    font-size:15px;
}

.pabx-center span{
    font-size:9px;

    color:#65dfff;

    letter-spacing:1px;
}

@keyframes pabxPulse{

    0%,100%{
        box-shadow:
            0 0 25px rgba(0,190,255,.1);
    }

    50%{
        box-shadow:
            0 0 55px rgba(0,190,255,.25);
    }

}

.pabx-line{
    position:absolute;

    width:145px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            #00cfff,
            rgba(0,207,255,.05)
        );

    transform-origin:left center;

    left:50%;

    top:50%;

    z-index:1;

    box-shadow:0 0 10px rgba(0,200,255,.4);
}

.pabx-line.one{
    transform:rotate(-145deg);
}

.pabx-line.two{
    transform:rotate(-35deg);
}

.pabx-line.three{
    transform:rotate(35deg);
}

.pabx-line.four{
    transform:rotate(145deg);
}

.extension{
    position:absolute;

    width:62px;
    height:62px;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    border:1px solid rgba(0,210,255,.28);

    background:rgba(0,30,50,.75);

    z-index:4;

    font-size:9px;

    color:#9ab1c2;
}

.extension strong{
    color:#fff;

    font-size:12px;
}

.ext-1{
    top:42px;
    left:70px;
}

.ext-2{
    top:42px;
    right:70px;
}

.ext-3{
    bottom:42px;
    left:70px;
}

.ext-4{
    bottom:42px;
    right:70px;
}

.pabx-features{
    position:absolute;

    bottom:20px;
    left:20px;
    right:20px;

    display:flex;

    gap:8px;
}

.pabx-feature{
    flex:1;

    padding:9px;

    border-radius:8px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    text-align:center;

    font-size:9px;

    color:#8fa5b6;
}


/* ---------- Metal Detector ---------- */

.metal-visual{
    width:min(460px,100%);

    height:430px;

    position:relative;

    border-radius:20px;

    border:1px solid rgba(0,190,255,.16);

    background:
        radial-gradient(
            circle at center,
            rgba(0,190,255,.08),
            transparent 65%
        );

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;
}

.detector-frame{
    width:220px;
    height:330px;

    position:relative;

    border:7px solid #178cb6;

    border-bottom:0;

    border-radius:18px 18px 0 0;

    box-shadow:
        0 0 30px rgba(0,200,255,.18);
}

.detector-frame::before{
    content:"";

    position:absolute;

    top:50%;
    left:-5px;
    right:-5px;

    height:2px;

    background:#00ddff;

    box-shadow:
        0 0 15px #00ddff,
        0 0 35px rgba(0,220,255,.7);

    animation:detectorScan 2s linear infinite;
}

@keyframes detectorScan{

    0%{
        top:8%;
    }

    100%{
        top:90%;
    }

}

.person{
    position:absolute;

    left:50%;
    bottom:15px;

    transform:translateX(-50%);

    width:70px;
    height:240px;

    opacity:.75;
}

.person-head{
    position:absolute;

    top:0;
    left:50%;

    width:34px;
    height:34px;

    transform:translateX(-50%);

    border-radius:50%;

    background:#9ab3c0;
}

.person-body{
    position:absolute;

    top:42px;
    left:50%;

    width:48px;
    height:110px;

    transform:translateX(-50%);

    border-radius:25px 25px 10px 10px;

    background:#547282;
}

.person-leg{
    position:absolute;

    bottom:0;

    width:15px;
    height:95px;

    background:#405966;

    border-radius:10px;
}

.person-leg.left{
    left:17px;
}

.person-leg.right{
    right:17px;
}

.detector-status{
    position:absolute;

    bottom:20px;

    left:20px;
    right:20px;

    display:flex;

    justify-content:space-between;

    padding:12px 14px;

    background:rgba(1,12,24,.8);

    border:1px solid rgba(0,200,255,.2);

    border-radius:9px;

    font-size:10px;

    letter-spacing:.8px;
}

.detector-status span:last-child{
    color:#00e39a;
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.slider-arrow{
    position:absolute;

    z-index:30;

    top:50%;

    transform:translateY(-50%);

    width:54px;
    height:54px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.16);

    background:rgba(2,15,30,.6);

    backdrop-filter:blur(12px);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:25px;

    transition:.3s ease;
}

.slider-arrow:hover{
    background:#00bfeF;

    color:#00131c;

    border-color:#00c8ff;

    box-shadow:
        0 0 25px rgba(0,200,255,.25);
}

.slider-prev{
    left:25px;
}

.slider-next{
    right:25px;
}


/* =========================================================
   SLIDER DOTS
========================================================= */

.slider-navigation{
    position:absolute;

    z-index:30;

    bottom:32px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:9px;
}

.slider-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    border:0;

    padding:0;

    background:rgba(255,255,255,.28);

    cursor:pointer;

    transition:.3s ease;
}

.slider-dot.active{
    width:30px;

    border-radius:10px;

    background:#00c8ff;

    box-shadow:
        0 0 12px rgba(0,200,255,.5);
}


/* =========================================================
   SLIDE COUNTER
========================================================= */

.slide-counter{
    position:absolute;

    right:35px;

    bottom:30px;

    z-index:30;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:11px;

    letter-spacing:1px;

    color:#8da2b4;
}

.slide-counter strong{
    color:#fff;

    font-size:15px;
}


/* =========================================================
   SERVICE LABEL
========================================================= */

.service-label{
    position:absolute;

    right:35px;

    top:35px;

    z-index:20;

    font-size:10px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#cfdfec;

    padding:8px 12px;

    border-left:2px solid #00c8ff;
}


/* =========================================================
   SLIDE ANIMATIONS
========================================================= */

.hero-slide.active .hero-badge{
    animation:fadeUp .8s both .15s;
}

.hero-slide.active h1{
    animation:fadeUp .8s both .25s;
}

.hero-slide.active .hero-description{
    animation:fadeUp .8s both .35s;
}

.hero-slide.active .hero-buttons{
    animation:fadeUp .8s both .45s;
}

.hero-slide.active .hero-stats{
    animation:fadeUp .8s both .55s;
}

.hero-slide.active .monitor-area{
    animation:visualIn 1s both .3s;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes visualIn{

    from{
        opacity:0;
        transform:translateX(45px) scale(.94);
    }

    to{
        opacity:1;
        transform:translateX(0) scale(1);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:1050px){

    .hero-container{
        gap:25px;
    }

    .hero-content{
        width:52%;
    }

    .monitor-area{
        width:48%;
    }

    .hero-content h1{
        font-size:52px;
    }

    .cctv-monitor{
        width:100%;
    }

    .monitor-screen{
        height:280px;
    }

}


@media(max-width:850px){

    .hero-slider{
        min-height:900px;
        height:auto;
    }

    .hero-container{
        min-height:900px;

        flex-direction:column;

        justify-content:center;

        padding:100px 0 100px;

        gap:50px;
    }

    .hero-content{
        width:100%;

        text-align:center;
    }

    .hero-content h1{
        max-width:700px;

        margin-left:auto;
        margin-right:auto;

        font-size:clamp(40px,8vw,58px);
    }

    .hero-description{
        margin-left:auto;
        margin-right:auto;

        font-size:15px;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-stats{
        justify-content:center;
    }

    .monitor-area{
        width:min(600px,90%);

        min-height:400px;
    }

    .monitor-screen{
        height:280px;
    }

    .slider-prev{
        left:12px;
    }

    .slider-next{
        right:12px;
    }

    .slider-arrow{
        width:45px;
        height:45px;

        font-size:20px;
    }

}


@media(max-width:600px){

    .hero-slider{
        min-height:850px;
    }

    .hero-container{
        min-height:850px;

        width:88%;

        padding-top:490px;

        padding-bottom:90px;

        gap:35px;
    }

    .hero-badge{
        font-size:9px;

        letter-spacing:1.2px;

        padding:8px 12px;
    }

    .hero-content h1{
        font-size:38px;

        letter-spacing:-1.8px;

        line-height:1.08;
    }

    .hero-description{
        font-size:15px;

        line-height:1.65;

        margin-bottom:24px;
    }

    .btn{
        width:100%;

        min-height:50px;
    }

    .hero-buttons{
        flex-direction:column;

        width:100%;
    }

    .hero-stats{
        gap:20px;

        margin-top:28px;
    }

    .hero-stat strong{
        font-size:20px;
    }

    .hero-stat span{
        font-size:9px;
    }

    .hero-stat:not(:last-child)::after{
        right:-11px;

        height:35px;
    }

    .monitor-area{
        width:100%;

        min-height:320px;
    }

    .cctv-monitor{
        padding:8px;

        border-radius:13px;
    }

    .monitor-screen{
        height:210px;
    }

    .visual-glow{
        width:300px;
        height:300px;
    }

    .service-label{
        top:15px;
        right:15px;

        font-size:8px;
    }

    .slider-arrow{
        width:38px;
        height:38px;

        font-size:17px;
    }

    .slider-navigation{
        bottom:18px;
    }

    .slide-counter{
        display:none;
    }

    /* Alarm */
    .alarm-visual,
    .biometric-visual,
    .pabx-visual,
    .metal-visual{
        height:320px;
    }

    .alarm-radar{
        width:210px;
        height:210px;
    }

    .alarm-shield{
        width:60px;
        height:70px;
    }

    /* Fingerprint */
    .fingerprint{
        width:150px;
        height:190px;
    }

    /* PABX */
    .pabx-center{
        width:80px;
        height:80px;
    }

    .pabx-line{
        width:105px;
    }

    .extension{
        width:48px;
        height:48px;

        font-size:7px;
    }

    .extension strong{
        font-size:9px;
    }

    .ext-1{
        top:30px;
        left:35px;
    }

    .ext-2{
        top:30px;
        right:35px;
    }

    .ext-3{
        bottom:35px;
        left:35px;
    }

    .ext-4{
        bottom:35px;
        right:35px;
    }

    .pabx-features{
        left:10px;
        right:10px;
        bottom:10px;
    }

    .pabx-feature{
        font-size:7px;
        padding:7px 3px;
    }

    /* Metal detector */
    .detector-frame{
        width:170px;
        height:270px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:400px){

    .hero-container{
        width:86%;
    }

    .hero-content h1{
        font-size:33px;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-stats{
        gap:15px;
    }

    .hero-stat strong{
        font-size:18px;
    }

    .hero-stat span{
        font-size:8px;
    }

    .monitor-screen{
        height:180px;
    }

    .slider-arrow{
        width:34px;
        height:34px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}
/* =========================================
   DESKTOP NAV
========================================= */

.nav {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav > li {
    position: relative;
}

.nav > li > a {
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: #423f3f;
    padding: 15px 0;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.nav > li > a i {
    font-size: 11px;
    transition: transform 0.3s ease;
}


/* Active main menu link */
.nav > li > a.active {
    color: #337b0b;
    font-weight: 600 !important;
    position: relative;
}

/* Active underline */
.nav > li > a.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 3px;
    background: #337b0b;
    border-radius: 3px;
}

/* Active dropdown parent */
.nav > li.about-menu.active > a,
.nav > li.products-menu.active > a {
    color: #337b0b;
}

/* Active dropdown item */
.about-dropdown a.active,
.mega-menu a.active {
    color: #337b0b;
    background: #eaf6ff;
    border-radius: 8px;
}

/* Keep active dropdown items visually highlighted */
.about-dropdown a.active {
    font-weight: 600;
}

.mega-menu a.active {
    border: 1px solid #337b0b;
}
/* =========================================
   PRODUCTS MEGA MENU - DESKTOP
========================================= */

.products-menu {
    position: relative;
}

.mega-menu {
    position: absolute;
    top: calc(100%);
    left: 50%;
    transform: translateX(-50%) translateY(15px);

    width: 650px;
    background: #fff;

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

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;

    z-index: 9999;
}

/* Desktop hover */
.products-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.products-menu:hover > a i {
    transform: rotate(180deg);
}


/* =========================================
   MEGA GRID
========================================= */

.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mega-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #222;

    padding: 18px 15px;
    border-radius: 10px;

    transition: all 0.3s ease;
}

.mega-item:hover {
    background: #f4f8ff;
    transform: translateY(-3px);
}

.mega-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #eef5ff;
    color: var(--green);

    margin-bottom: 12px;

    font-size: 18px;
}

.mega-item strong {
    font-size: 15px;font-weight: 600;
    margin-bottom: 6px;
    color: #172033;
}

.mega-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #777;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .nav {
        gap: 18px;
    }

    .nav > li > a {
        font-size: 14px;
    }

    .mega-menu {
        width: 560px;
    }

    .mega-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .nav {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        background: #111827;

        padding: 10px 20px 20px;

        box-shadow: 0 15px 30px rgba(0,0,0,0.15);

        z-index: 9998;
    }

    /* Add .active to #navMenu using JS */
    .nav.active {
        display: flex;
    }

    .nav > li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .nav > li:last-child {
        border-bottom: 0;
    }

    .nav > li > a {
        width: 100%;

        padding: 15px 5px;

        font-size: 15px;

        color: #fff;

        justify-content: space-between;
    }


    /* =====================================
       MOBILE PRODUCTS MENU
    ===================================== */

    .products-menu {
        position: relative;
    }

    .products-menu > a {
        cursor: pointer;
    }

    .products-menu > a i {
        transition: transform 0.3s ease;
    }

    /* Hide mega menu by default */
    .mega-menu {
        position: static;

        width: 100%;

        transform: none !important;

        padding: 8px 0 15px;

        background: transparent;

        box-shadow: none;

        border-radius: 0;

        display: none;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Open Products */
    .products-menu.open .mega-menu {
        display: block;
    }

    .products-menu.open > a i {
        transform: rotate(180deg);
    }


    /* =====================================
       MOBILE PRODUCT GRID
    ===================================== */

    .mega-grid {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 8px;
    }

    .mega-item {
        padding: 13px 10px;

        background: rgba(255,255,255,0.05);

        border: 1px solid rgba(255,255,255,0.08);

        border-radius: 8px;
    }

    .mega-item:hover {
        background: rgba(255,255,255,0.09);

        transform: none;
    }

    .mega-icon {
        width: 36px;
        height: 36px;

        margin-bottom: 8px;

        font-size: 15px;

        background: rgba(255,255,255,0.1);
        color: #55b8ff;
    }

    .mega-item strong {
        font-size: 12px;
        color: #fff;

        margin-bottom: 4px;
    }

    .mega-item span {
        font-size: 10px;
        line-height: 1.4;

        color: #b8c0cc;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .nav {
        padding-left: 15px;
        padding-right: 15px;
    }

    .mega-grid {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .mega-item {
        padding: 11px 8px;
    }

    .mega-item strong {
        font-size: 11px;
    }

    .mega-item span {
        font-size: 9px;
    }

    .mega-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
}
/* =========================================
   ABOUT US DROPDOWN - DESKTOP
========================================= */

.about-menu {
    position: relative;
}

.about-menu > a {
    display: flex;
    align-items: center;
    gap: 7px;
}

.about-menu > a i {
    font-size: 11px;
    transition: transform 0.3s ease;
}

.about-dropdown {
    position: absolute;

    top: calc(100%);
    left: 50%;

    width: 230px;

    padding: 10px;

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-50%) translateY(15px);

    transition: all 0.3s ease;

    z-index: 9999;
}


/* Desktop hover */

.about-menu:hover .about-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(-50%) translateY(0);
}

.about-menu:hover > a i {
    transform: rotate(180deg);
}


/* Dropdown links */

.about-dropdown a {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 13px;

    color: #222;

    text-decoration: none;

    font-size: 15px;

    border-radius: 8px;

    transition: all 0.25s ease;
}

.about-dropdown a i {
    width: 22px;

    color: var(--green);

    font-size: 15px;
}

.about-dropdown a:hover {
    background: #f2f7ff;

    color: var(--green);

    padding-left: 17px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .about-menu {
        width: 100%;
    }

    .about-menu > a {
        justify-content: space-between;
    }

    /* Hide by default */

    .about-dropdown {
        position: static;

        width: 100%;

        padding: 5px 0 10px;

        background: transparent;

        box-shadow: none;

        border-radius: 0;

        display: none;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: none;
    }

    /* Open on mobile */

    .about-menu.open .about-dropdown {
        display: block;
    }

    .about-menu.open > a i {
        transform: rotate(180deg);
    }

    .about-dropdown a {
        padding: 12px 15px 12px 25px;

        color: #d7dde8;

        background: rgba(255,255,255,0.04);

        margin-bottom: 4px;

        border-radius: 7px;

        font-size: 13px;
    }

    .about-dropdown a i {
        color: #55b8ff;
    }

    .about-dropdown a:hover {
        padding-left: 25px;

        background: rgba(255,255,255,0.08);

        color: #fff;
    }
}.footer-contact li a {
    color: inherit;
    text-decoration: none;
}

.footer-contact li a:hover {
    text-decoration: underline;
}span a {
    color: inherit;
    text-decoration: none;
}

span a:hover {
    text-decoration: underline;
}.eyebrow {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* green dot before the existing red dot */
.eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2196f3;
    margin-bottom: 8px;
}

/* Existing red, yellow, green dots */
.eyebrow::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow:
        18px 0 0 var(--yellow),
        36px 0 0 var(--green);
    margin-top: 8px;
}


/* Group of Companies */
.group-companies {
    position: relative;
    padding: 50px 0;
    background: linear-gradient(180deg, #f5f9fc 0%, #ffffff 100%);
    overflow: hidden;
}

.group-companies .container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

.section-heading {
    text-align: center;
    margin-bottom: 15px;
}

.heading-dot {
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto 15px;
    background: #168df5;
    border-radius: 50%;
}

.section-heading p {
    margin: 0 0 10px;
    color:#5b605a;
    font-size: 12px;
    font-weight:600;text-align: center;
    letter-spacing: 1px;
}

.section-heading h2 {
    margin-bottom: 20px;
    color: #101d32;
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 600;
    line-height: 1.2;
}

.section-heading h2 span {
    color: #ca161f;
}

.heading-line {
    width: 65px;
    height: 4px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, #287d12, #c60707);
    border-radius: 5px;
}

/* Company Cards */
.companies-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.company-card {
    position: relative;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 5px 10px;
    background: #ffffff;
    border: 1px solid #e0eaf2;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(10, 32, 55, 0.07);
    overflow: hidden;
    transition: transform 0.35s ease,
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

.company-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #287d12, #c60707);
}

.company-card:hover {
    transform: translateY(-8px);
    border-color: #168df5;
    box-shadow: 0 18px 45px rgba(10, 32, 55, 0.13);
}

.company-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #287d12;
    background: #edf8e9;
    border-radius: 14px;
    font-size: 28px;
    transition: 0.3s ease;
}

.company-card:hover .company-icon {
    color: #ffffff;
    background: #287d12;
}

.company-number {
    position: absolute;
    top: 22px;
    right: 24px;
    color: #e8eef4;
    font-size: 26px;
    font-weight: 600;
}

.company-card h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #101d32;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.company-bottom-line {
    width: 45px;
    height: 3px;
    margin-top: 8px;
    background: #287d12;
    border-radius: 5px;
    transition: width 0.3s ease;
}

.company-card:hover .company-bottom-line {
    width: 85px;
}

/* Tablet */
@media (max-width: 991px) {
    .group-companies {
        padding: 60px 0;
    }

    .companies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .company-card:last-child {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .group-companies {
        padding: 45px 0;
    }

    .group-companies .container {
        width: 92%;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .section-heading p {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .companies-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .company-card,
    .company-card:last-child {
        grid-column: auto;
        min-height: 190px;
        padding: 28px 24px;
    }

    .company-card h3 {
        font-size: 17px;
    }
}


/* =================================
   DIRECTOR'S MESSAGE SECTION
================================= */

.director-message-section {
    position: relative;
    padding: 50px 0;
    background: #f3f7fb;
    overflow: hidden;
}

.director-message-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: -100px;
    width: 350px;
    height: 350px;
    background: #edf7ff;
    border-radius: 50%;
    opacity: 0.65;
    pointer-events: none;
}

.director-container {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 75px;
    align-items: center;
}

/* Director Photo */

.director-photo-column {
    position: relative;
    padding: 0 20px 35px 0;
}

.director-photo-frame {
    position: relative;
    overflow: hidden;
    background: #eaf2f7;
    border-radius: 20px;
    box-shadow: 0 20px 55px rgba(10, 29, 50, 0.14);
}

.director-photo {
    display: block;
    width: 100%;
    height: 620px;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.6s ease;
}

.director-photo-frame:hover .director-photo {
    transform: scale(1.035);
}

/* Photo Caption */

.director-photo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px 28px;
    color: #ffffff;
    background: linear-gradient(
        to top,
        rgba(5, 19, 37, 0.96),
        rgba(5, 19, 37, 0.72),
        transparent
    );
}

.director-caption-line {
    width: 4px;
    height: 48px;
    flex-shrink: 0;
    background: #25830d;
    border-radius: 5px;
}

.director-photo-caption h3 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 600;
}

.director-photo-caption p {
    margin: 0;
    color: #d7e7f4;
    font-size: 14px;
}

/* Experience Badge */

.director-experience-badge {
    position: absolute;
    right: -5px;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px 24px;
    background: #ffffff;
    border: 1px solid #e4edf4;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(10, 29, 50, 0.12);
}

.director-experience-badge > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #287d12;
    background: #edf8e9;
    border-radius: 12px;
    font-size: 26px;
}

.director-experience-badge div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.director-experience-badge strong {
    color: #101d32;
    font-size: 21px;
    font-weight: 600;
}

.director-experience-badge div span {
    color: #687789;
    font-size: 12px;
}

/* Message Content */

.director-content {
    min-width: 0;
}

.director-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #287d12;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
}

.director-eyebrow span {
    width: 30px;
    height: 3px;
    background: #25830d;
    border-radius: 5px;
}

.director-message-section h2 {
    margin: 0;
    color: #101d32;
    font-size: clamp(34px, 3.5vw, 48px);
    font-weight: 600;
    line-height: 1.2;
}

.director-message-section h2 > span {
    color: #287d12;
}

.director-heading-line {
    width: 70px;
    height: 4px;
    margin: 13px 0 17px;
    background: linear-gradient(90deg, #287d12, #c60707);
    border-radius: 5px;
}

.director-greeting {
    margin: 0 0 18px;
    color: #101d32;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
}

/* Message Paragraphs */

.director-message-text p {
    margin: 0 0 17px;
    color: #161617;
    font-size: 15px;
    line-height: 1.95;
    text-align: justify;
}

/* Signature */

.director-signature {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e4ebf1;
}

.signature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    color: #ffffff;
    background: #287d12;
    border-radius: 14px;
    font-size: 27px;
}

.signature-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.signature-label {
    color: #758396;
    font-size: 13px;
}

.signature-details h3 {
    margin: 0;
    color: #101d32;
    font-size: 21px;
    font-weight: 600;
}

.signature-details p {
    margin: 0;
    color: #526174;
    font-size: 14px;
}

.signature-details strong {
    color: #287d12;
    font-size: 13px;
    font-weight: 700;
}

/* Tablet */

@media (max-width: 1100px) {
    .director-container {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 40px;
    }

    .director-photo {
        height: 540px;
    }

    .director-message-text p {
        font-size: 14px;
        line-height: 1.8;
    }
}

/* Mobile */

@media (max-width: 768px) {
    .director-message-section {
        padding: 65px 0;
    }

    .director-container {
        width: 90%;
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .director-photo-column {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        padding-right: 10px;
        padding-bottom: 30px;
    }

    .director-photo {
        height: auto;
        max-height: 600px;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: center top;
    }

    .director-experience-badge {
        right: 0;
        padding: 14px 17px;
    }

    .director-experience-badge > i {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }

    .director-experience-badge strong {
        font-size: 18px;
    }

    .director-content h2 {
        font-size: 36px;
    }

    .director-message-text p {
        font-size: 14px;
        line-height: 1.85;
        text-align: left;
    }
}

/* Small Mobile */

@media (max-width: 480px) {
    .director-message-section {
        padding: 45px 0;
    }

    .director-container {
        width: 92%;
        gap: 38px;
    }

    .director-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .director-content h2 {
        font-size: 31px;
    }

    .director-photo-caption {
        padding: 20px;
    }

    .director-photo-caption h3 {
        font-size: 21px;
    }

    .director-experience-badge {
        gap: 10px;
    }

    .director-greeting {
        font-size: 16px;
    }

    .director-signature {
        gap: 13px;
    }
}

/* Director's Message - Full Section Center Heading */

.director-content {
    display: contents;
}

.director-container {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    column-gap: 75px;
    row-gap: 5px;
}

/* Center heading across both columns */
.director-content .director-eyebrow,
.director-content > h2,
.director-content .director-heading-line {
    /*grid-column: 1 / -1;*/
    text-align: center;
}

.director-content .director-eyebrow {
    justify-content: center;
    margin-bottom: -20px;
}

.director-content > h2 {
    margin: 0;
}

.director-content .director-heading-line {
    margin: -15px auto 0;
}

/* Keep message content in the right column */
.director-content .director-greeting,
.director-content .director-message-text,
.director-content .director-signature {
    grid-column: 2;
}

/* Keep the photo in the left column */
.director-photo-column {
    grid-column: 1;
    grid-row: 2 / span 3;
}

/* Responsive layout */
@media (max-width: 768px) {
    .director-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .director-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .director-content .director-eyebrow,
    .director-content > h2,
    .director-content .director-heading-line {
        text-align: center;
        align-self: center;
    }

    .director-content .director-heading-line {
        margin: 20px auto 25px;
    }
}


/* Why Choose Us - Card Hover Effect */
.why-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #bfc3c6;
    border-radius: 16px;
    padding: 30px 24px;
    transition: transform 0.4s ease,
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    cursor: pointer;
    z-index: 1;
}

/* Animated background glow */
.why-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #e8ffdc;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

/* Card hover */
.why-card:hover {
    transform: translateY(-10px);
    border-color: var(--green);
    /*box-shadow: 0 18px 40px rgba(8, 125, 204, 0.20);*/
}

/* Show gradient */
.why-card:hover::before {
    opacity: 1;
}

/* Icon animation */
.why-card .why-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eaf6ff;
    color: var(--red);
    margin-bottom: 22px;
    transition: transform 0.4s ease,
                background 0.4s ease,
                color 0.4s ease;
}

.why-card .why-icon i {
    font-size: 27px;
    transition: transform 0.4s ease;
}

.why-card:hover .why-icon {
    background: #ffffff;
    color: var(--red);
    transform: scale(1.08);
}

.why-card:hover .why-icon i {
    transform: rotate(-8deg);
}

/* Heading and paragraph */
.why-card h3,
.why-card p {
    transition: color 0.35s ease;
}

.why-card h3 {
    color: #071827;
}

.why-card p {
    color: #222;font-size: 14px;
    line-height: 1.7;
}

.why-card:hover h3,
.why-card:hover p {
    color: #222;
}

/* Keyboard accessibility */
.why-card:focus-within {
    outline: 3px solid var(--red);
    outline-offset: 4px;
}

/* Mobile-friendly motion */
@media (prefers-reduced-motion: reduce) {
    .why-card,
    .why-card::before,
    .why-card .why-icon,
    .why-card .why-icon i,
    .why-card h3,
    .why-card p {
        transition: none;
    }
}

 /* ===================================
           ABOUT PAGE - INTERNAL PAGE DESIGN
        =================================== */

        :root {
            --fv-navy: #071a32;
            --fv-blue: #337b0b;
            --fv-blue-dark: #045b98;
            --fv-light: #eef7ff;
            --fv-text: #526176;
            --fv-white: #ffffff;
            --fv-border: #e2eaf2;
        }

        .fv-about-page {
            /*color: var(--fv-text);*/
            overflow: hidden;
        }

        .fv-about-page * {
            box-sizing: border-box;
        }

        .fv-container {
            width: min(1200px, 92%);
            margin: 0 auto;
        }

        .fv-section {
            padding: 40px 0;
        }

        .fv-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 16px;
            color: #ca0605;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .fv-eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            background: currentColor;
        }

        .fv-heading {
            margin: 0 0 22px;
            color: var(--fv-navy);
            font-size: clamp(30px, 4vw, 34px);
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -1.2px;
        }

        .fv-heading span {
            color: #ca161f;
        }

        .fv-description {
            font-size: 15px;
            line-height: 1.95;
        }

        /* HERO */

        .fv-inner-hero {
            position: relative;
            isolation: isolate;
            min-height: 150px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background:
                radial-gradient(circle at 85% 25%, rgb(59 60 62 / 32%), transparent 32%), linear-gradient(115deg, #131313, #3b3939 65%, #3c3838);
        }

        .fv-inner-hero::before {
            content: "";
            position: absolute;
            z-index: -1;
            inset: 0;
            opacity: .18;
            background-image:
                linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: linear-gradient(90deg, black, transparent);
        }

        .fv-inner-hero::after {
            content: "";
            position: absolute;
            z-index: -1;
            width: 360px;
            height: 360px;
            right: 7%;
            top: 15%;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 50%;
            box-shadow:
                0 0 0 40px rgba(255,255,255,.025),
                0 0 0 80px rgba(255,255,255,.02);
        }

        .fv-hero-content {
            padding: 25px 0;
            position: relative;
            z-index: 1;
            animation: fvFadeUp .8s ease both;
        }

        .fv-hero-label {
            display: inline-flex;
            align-items: center;
            gap: 9px;float: right;
            margin-bottom: 20px;margin-top:1.5em;
            padding: 9px 15px;
            border: 1px solid rgba(255,255,255,.2);
            border-radius: 30px;
            background: rgba(255,255,255,.07);
            color: #bce4a6;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .fv-hero-label i {
            color: #4eca08;
        }

        .fv-inner-hero h1 {
            max-width: 760px;
            margin: 0 0 20px;
            color: var(--fv-white);
            font-size: clamp(38px, 5vw, 38px);
            font-weight: 600;
            line-height: 1.12;
            letter-spacing: 0px;
        }

        .fv-inner-hero h1 span {
            color: #4eca08;
        }

        .fv-inner-hero p {
            max-width: 670px;
            margin: 0;
            color: #d2dfed;
            font-size: 16px;
            line-height: 1.5;
        }

        .fv-breadcrumb {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-top: 6px;
            color: #c2d3e5;
            font-size: 13px;
        }

        .fv-breadcrumb a {
            color: #fff;
            text-decoration: none;
            transition: color .25s ease;
        }

        .fv-breadcrumb a:hover {
            color: #64c5ff;
        }

        .fv-breadcrumb i {
            font-size: 10px;
            color: #fff;
        }

        /* INTRO / ABOUT */

        .fv-about-intro {
            background: #fff;
        }

        .fv-about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 65px;
            align-items: start;
        }

        .fv-about-side {
            position: sticky;
            top: 110px;
        }

        .fv-about-side-card {
            position: relative;
            padding: 28px;
            overflow: hidden;
            border-radius: 18px;
            background: #f5f5f5;
            /*box-shadow: 0 22px 55px rgba(7, 26, 50, .15);*/
        }

        .fv-about-side-card::after {
            content: "";
            position: absolute;
            width: 180px;
            height: 180px;
            right: -65px;
            bottom: -70px;
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 50%;
            box-shadow: 0 0 0 25px rgba(255,255,255,.035);
        }

        .fv-shield-icon {
            display: grid;
            place-items: center;
            width: 66px;
            height: 66px;
            margin-bottom: 8px;
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 17px;
            background: #fff;
            color: #337b0b;
            font-size: 29px;
        }

        .fv-about-side-card h3 {
            margin: 0 0 15px;
            color: #3a3636;
            font-size: 27px;
            line-height: 1.35;
        }

        .fv-about-side-card p {
            margin: 0;
            color: #3a3a3b;
            font-size: 14px;
            line-height: 1.9;
        }

        .fv-experience {
            display: flex;
            align-items: center;
            gap: 16px;
            /*margin-top: 28px;*/
            padding-top: 23px;
            border-top: 1px solid rgba(255,255,255,.18);
        }

        .fv-experience strong {
            color: #434442;
            font-size: 44px;
            line-height: 1;
        }

        .fv-experience span {
            color:#3a3a3b;
            font-size: 13px;
            line-height: 1.6;
        }

        .fv-about-copy > p {
            margin: 0 0 19px;text-align: justify;
            font-size: 14.5px;
            line-height: 2;
        }

        .fv-about-lead {
            color: var(--fv-navy);
            font-size: 16px !important;
            font-weight: 600;
            line-height: 1.7 !important;
        }

        .fv-about-lead span {
            color: var(--fv-blue);
        }

        .fv-about-highlights {
            display: grid;
            /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
            gap: 14px;
            margin-top: 30px;
        }

        .fv-highlight {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px;
            border: 1px solid var(--fv-border);
            border-radius: 11px;
            background: #f7f7f7;
            transition: transform .3s ease, box-shadow .3s ease,
                        border-color .3s ease;
        }

        .fv-highlight:hover {
            transform: translateY(-4px);
            border-color: #a8d9fb;
            box-shadow: 0 12px 25px rgba(8, 72, 120, .07);
        }

        .fv-highlight i {
            display: grid;
            place-items: center;
            flex-shrink: 0;
            width: 42px;
            height: 42px;
            border-radius: 9px;
            background: var(--fv-light);
            color: var(--fv-blue);
        }

        .fv-highlight span {
            padding-top: 5px;
            color: var(--fv-navy);
            font-size: 15px;
            font-weight: 600;
            line-height: 2;
        }

        /* VISION & MISSION */

        .fv-purpose {
            position: relative;
            background: #f3f8fd;
        }

        .fv-section-intro {
            max-width: 680px;
            margin: 0 auto 45px;
            text-align: center;
        }

        .fv-section-intro .fv-eyebrow {
            justify-content: center;
        }

        .fv-section-intro p:last-child {
            margin: 0;
            font-size: 15px;
            line-height: 1.8;
        }

        .fv-purpose-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 25px;
        }

        .fv-purpose-card {
            position: relative;
            padding: 38px;
            overflow: hidden;
            border: 1px solid #e2ebf5;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 35px rgba(8, 48, 82, .045);
            transition: transform .3s ease, box-shadow .3s ease;
        }

        .fv-purpose-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(8, 48, 82, .1);
        }

        .fv-purpose-card::after {
            content: "";
            position: absolute;
            width: 130px;
            height: 130px;
            top: -75px;
            right: -55px;
            border-radius: 50%;
            background: #edf7ff;
            transition: transform .35s ease;
        }

        .fv-purpose-card:hover::after {
            transform: scale(1.35);
        }

        .fv-purpose-icon {
            position: relative;
            z-index: 1;
            display: grid;
            place-items: center;
            width: 60px;
            height: 60px;
            margin-bottom: 25px;
            border-radius: 15px;
            background: var(--fv-light);
            color: var(--fv-blue);
            font-size: 25px;
        }

        .fv-purpose-card h3 {
            margin: 0 0 15px;
            color: var(--fv-navy);
            font-size: 24px;
            font-weight: 600;
        }

        .fv-purpose-card p {
            margin: 0;
            font-size: 14px;
            line-height: 1.95;
        }

        /* CORE VALUES */

        .fv-values {
            background: #fff;
        }

        .fv-values-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 22px;
        }

        .fv-value-card {
            position: relative;
            padding: 30px 26px;
            border: 1px solid var(--fv-border);
            border-radius: 14px;
            background: #fff;
            transition: transform .3s ease, box-shadow .3s ease,
                        border-color .3s ease;
        }

        .fv-value-card:hover {
            transform: translateY(-5px);
            border-color: #a8d9fb;
            box-shadow: 0 15px 35px rgba(8, 72, 120, .08);
        }

        .fv-value-number {
            display:none;
            margin-bottom: 20px;
            color: #b8dff8;
            font-size: 36px;
            font-weight: 600;
            line-height: 1;
        }

        .fv-value-icon {
            display: grid;
            place-items: center;
            width: 49px;
            height: 49px;
            margin-bottom: 20px;
            border-radius: 13px;
            background: var(--fv-light);
            color: var(--fv-blue);
            font-size: 21px;
        }

        .fv-value-card h3 {
            margin: 0 0 12px;
            color: var(--fv-navy);
            font-size: 18px;
            font-weight: 600;
        }

        .fv-value-card p {
            margin: 0;
            font-size: 13.5px;
            line-height: 1.9;
        }

        /* BOTTOM CTA */

        .fv-about-cta {
            padding: 0 0 40px;
            background: #fff;
        }

        .fv-cta-inner {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            padding: 25px 40px;
            overflow: hidden;
            border-radius: 18px;
            background:
                linear-gradient(120deg, #730d0e, #c51514)
            }

        .fv-cta-copy {
            position: relative;
            z-index: 1;
            max-width: 690px;
        }

        .fv-cta-copy .fv-eyebrow {
            color: #cccf39;
        }

        .fv-cta-copy h2 {
            margin: 0 0 12px;
            color: #fff;
            font-size: clamp(25px, 3vw, 24px);
            line-height: 1.3;
        }

        .fv-cta-copy p {
            margin: 0;
            color: #f5f5f5;
            font-size: 14px;
            line-height: 1.8;
        }

        .fv-cta-button {
            position: relative;
            z-index: 1;
            display: inline-flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            gap: 12px;
            min-height: 52px;
            padding: 0 23px;
            border-radius: 8px;
            background: #fff;
            color: #337b0b;
            font-size: 13px;
            font-weight: 500;
            text-decoration: none;
            transition: background .3s ease, transform .3s ease;
        }

        .fv-cta-button:hover {
            transform: translateY(-3px);
            background: #337b0b;
            color: #fff;
        }

        /* ANIMATIONS */

        .fv-reveal {
            opacity: 0;
            transform: translateY(25px);
            transition: opacity .7s ease, transform .7s ease;
        }

        .fv-reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes fvFadeUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* RESPONSIVE */

        @media (max-width: 991px) {
            .fv-section {
                padding: 70px 0;
            }

            .fv-about-grid {
                grid-template-columns: 1fr;
                gap: 35px;
            }

            .fv-about-side {
                position: relative;
                top: auto;
            }

            .fv-about-side-card {
                max-width: 100%;
            }

            .fv-values-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
            .fv-inner-hero {
                min-height: 330px;
            }

            .fv-hero-content {
                padding: 60px 0;
            }

            .fv-inner-hero h1 {
                letter-spacing: -.8px;
            }

            .fv-section {
                padding: 55px 0;
            }

            .fv-about-side-card,
            .fv-purpose-card {
                padding: 27px;
            }

            .fv-about-highlights,
            .fv-purpose-grid,
            .fv-values-grid {
                grid-template-columns: 1fr;
            }

            .fv-cta-inner {
                align-items: flex-start;
                flex-direction: column;
                padding: 32px 25px;
            }

            .fv-about-cta {
                padding-bottom: 55px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .fv-about-page *,
            .fv-about-page *::before,
            .fv-about-page *::after {
                animation: none !important;
                transition: none !important;
                scroll-behavior: auto !important;
            }

            .fv-reveal {
                opacity: 1;
                transform: none;
            }
        }


/* DIRECTOR'S MESSAGE */
.fv-director-section {
    position: relative;
    padding: 40px 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #f5faff 0%, #ffffff 55%, #edf6ff 100%);
}

.fv-director-container {
    max-width: 92%;
    margin: 0 auto;
}

.fv-director-heading {
    text-align: center;
    margin-bottom: 25px;
}

.fv-director-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #337b0b;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}

.fv-director-heading h2 {
    margin: 0 0 12px;
    color: #071827;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 600;
}

.fv-director-heading h2 span {
    color: #337b0b;
}

.fv-director-heading p {
    margin: 0;
    color: #64748b;
    font-size: 16px;
}

.fv-director-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr;
    align-items: center;
    gap: 65px;
}

/* MESSAGE CONTENT */
.fv-director-content {
    position: relative;
}

.fv-director-quote {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    border-radius: 14px;
    background: #e4f3ff;
    color: #337b0b;
    font-size: 13px;
}

.fv-director-content p {
    color: #526174;
    font-size: 15px;text-align: justify;
    line-height: 1.9;
    margin: 0 0 17px;
}

.fv-director-content .fv-director-greeting {
    color: #071827;
    font-size: 19px;
    font-weight: 700;
}

/* SIGNATURE */
.fv-director-signature {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

.fv-signature-line {
    width: 4px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 5px;
    background: linear-gradient(180deg, #337b0b, #35a854);
}

.fv-director-signature h3 {
    margin: 0 0 5px;
    color: #071827;
    font-size: 23px;
    font-weight: 600;
}

.fv-director-signature span {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 14px;
}

.fv-director-signature strong {
    color: #337b0b;
    font-size: 13px;
}

/* DIRECTOR IMAGE */
.fv-director-image-wrap {
    position: relative;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    padding: 0 12px 22px 0;
}

.fv-director-image-frame {
    position: relative;
    height: 540px;
    overflow: hidden;
    border-radius: 22px;
    background: #dceaf5;
    box-shadow: 0 25px 60px rgba(7, 24, 39, 0.16);
}

.fv-director-image-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: inherit;
    pointer-events: none;
}

.fv-director-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.7s ease;
}

.fv-director-image-frame:hover .fv-director-image {
    transform: scale(1.045);
}

.fv-director-image-overlay {
    position: absolute;
    inset: 35% 0 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(7, 24, 39, 0.92)
    );
    pointer-events: none;
}

.fv-director-image-caption {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 25px;
    left: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}

.fv-caption-icon {
    width: 48px;
    height: 48px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #337b0b;
    font-size: 20px;
}

.fv-director-image-caption h3 {
    margin: 0 0 5px;
    font-size: 22px;
    font-weight: 600;
}

.fv-director-image-caption p {
    margin: 0;
    color: #dceeff;
    font-size: 13px;
}

/* EXPERIENCE BADGE */
.fv-director-experience {
    position: absolute;
    right: -15px;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 20px;
    border: 1px solid #e3eef8;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(7, 24, 39, 0.12);
}

.fv-director-experience > i {
    color: #337b0b;
    font-size: 28px;
}

.fv-director-experience strong,
.fv-director-experience span {
    display: block;
}

.fv-director-experience strong {
    margin-bottom: 4px;
    color: #071827;
    font-size: 16px;
}

.fv-director-experience span {
    color: #64748b;
    font-size: 11px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .fv-director-section {
        padding: 65px 18px;
    }

    .fv-director-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 30px;
    }

    .fv-director-image-frame {
        height: 440px;
    }

    .fv-director-experience {
        right: -5px;
    }
}

@media (max-width: 680px) {
    .fv-director-heading {
        margin-bottom: 35px;
    }

    .fv-director-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .fv-director-image-wrap {
        max-width: 380px;
        grid-row: 1;
        margin-bottom: 10px;
    }

    .fv-director-image-frame {
        height: 460px;
    }

    .fv-director-content {
        grid-row: 2;
    }

    .fv-director-experience {
        right: 0;
    }
}

@media (max-width: 420px) {
    .fv-director-image-frame {
        height: 390px;
    }

    .fv-director-experience {
        padding: 13px;
    }

    .fv-director-content p {
        font-size: 14px;
    }
}

/* Active main menu */
.nav > li > a.active {
    color: #337b0b;
    font-weight: 700;
    position: relative;
}

/* Active underline */
.nav > li > a.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    height: 2px;
    background: #337b0b;
    border-radius: 5px;
}

/* Active dropdown and mega-menu links */
.about-dropdown a.active,
.mega-menu a.active {
    color: #337b0b;
    background: #eef7ff;
}

/* Highlight parent when a submenu page is active */
.nav > li.active-parent > a {
    color: #337b0b;
    font-weight: 700;
}
/* Introduction */

.intro-grid,
.maintenance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px;
}

.intro-image,
.maintenance-image {
    position: relative;
}

.intro-image img,
.maintenance-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: var(--fv-shadow);
}

.experience-card {
    position: absolute;
    right: -20px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--fv-shadow);
}

.experience-card strong {
    color: var(--fv-primary);
    font-size: 38px;
    font-family: 'Space Grotesk', sans-serif;
}

.experience-card span {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.intro-content > p {
    margin-bottom: 18px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    color: var(--fv-primary);
    font-weight: 700;
}

/* Section headings */

.section-heading {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-heading p {
    max-width: 620px;
    margin: 0 auto;
}

/* CCTV solutions */

.solutions-section {
    background: #f5f9fc;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.solution-card {
    padding: 32px 27px;
    background: #fff;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.solution-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--fv-shadow);
    border-color: #a5d8f9;
}

.solution-icon,
.process-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    border-radius: 12px;
    color: var(--fv-primary);
    background: var(--fv-light);
    font-size: 27px;
    transition: .3s ease;
}

.solution-card:hover .solution-icon {
    background: #337b0b;
    color: #fff;
    transform: scale(1.05);
}

.solution-card h3,
.process-card h3 {
    font-size: 19px;
    margin-bottom: 12px;
}

.solution-card p,
.process-card p {
    margin-bottom: 0;
    font-size: 14px;text-align: justify;line-height: 1.8;
}

/* Industries */

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.industry-card {
    position: relative;
    height: 310px;
    overflow: hidden;
    border-radius: var(--fv-radius);
    background: var(--fv-dark);
}

.industry-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
    transition: transform .6s ease, opacity .4s ease;
}

.industry-card:hover img {
    transform: scale(1.08);
    opacity: .62;
}

.industry-content {
    position: absolute;
    inset: auto 0 0;
    padding: 35px 25px 25px;
    color: #fff;
    background: linear-gradient(transparent, rgba(7, 24, 39, .95));
}

.industry-content i {
    color: #78caff;
    font-size: 25px;
}

.industry-content h3 {
    margin: 12px 0 0;
    font-size: 19px;
}

/* Process */

.process-section {
    background: var(--fv-light);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.process-card {
    position: relative;
    padding: 26px 19px;
    border: 1px solid #d4e8f6;
    border-radius: 13px;
    background: #fff;
    transition: transform .3s ease, box-shadow .3s ease;
}

.process-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--fv-shadow);
}

.process-number {
    display: none;
    margin-bottom: 20px;
    color: #8acaf2;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 30px;
    font-weight: 700;
}

.process-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    font-size: 23px;
}

/* Maintenance */

.maintenance-list {
    list-style: none;
    padding: 0;
    margin: 25px 0 30px;
}

.maintenance-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    /*color: var(--fv-text);*/
    font-size: 14px;
}

.maintenance-list i {
    color: #35a854;
    font-size: 17px;
    flex-shrink: 0;
}

.maintenance-badge {
    position: absolute;
    left: -20px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-radius: 12px;
    background: var(--fv-dark);
    color: #fff;
    box-shadow: var(--fv-shadow);
    font-size: 12px;
    font-weight: 700;
}

.maintenance-badge i {
    color: #72c5ff;
    font-size: 30px;
}

/* CTA */

.cta-section {
    padding: 25px 0;
    background: linear-gradient(120deg, #730d0e, #c51514);
}

.cta-inner {
    display: flex;
    align-items: center;
    gap: 25px;
}

.cta-icon {
    display: grid;
    place-items: center;
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    color: #fff;
    font-size: 32px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 16px;
}

.cta-content {
    flex: 1;
}

.cta-content .section-label {
    color:#cccf39;
    margin-bottom: 8px;
}

.cta-content h2 {
    color: #fff;
    margin-bottom: 10px;
}

.cta-content p {
    color: #fff;
    margin: 0;
}

/* Scroll reveal */

.reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */

@media (max-width: 1050px) {
    .intro-grid,
    .maintenance-grid {
        gap: 40px;
    }

    .process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .industry-card {
        height: 270px;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 70px 0;
    }

    .service-hero {
        min-height: auto;
    }

    .service-hero h1 {
        letter-spacing: -1px;
    }

    .hero-trust {
        gap: 15px;
    }

    .intro-grid,
    .maintenance-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .intro-image img,
    .maintenance-image img {
        height: 350px;
    }

    .experience-card {
        right: 10px;
    }

    .solutions-grid,
    .industries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .maintenance-badge {
        left: 10px;
    }

    .cta-inner {
        flex-wrap: wrap;
    }

    .cta-content {
        flex-basis: calc(100% - 110px);
    }

    .cta-inner > .btn {
        margin-left: 100px;
    }
}

@media (max-width: 480px) {
    .container {
        width: 91%;
    }

    .solutions-grid,
    .industries-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .industry-card {
        height: 290px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-trust {
        flex-direction: column;
    }

    .experience-card {
        padding: 14px;
        right: 8px;
        bottom: 12px;
    }

    .experience-card strong {
        font-size: 30px;
    }

    .cta-icon {
        width: 58px;
        height: 58px;
    }

    .cta-content {
        flex-basis: calc(100% - 85px);
    }

    .cta-inner > .btn {
        margin-left: 0;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

.eyebrow,
.section-label {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--fv-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Hero */

.service-hero {
    min-height: 590px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(4, 20, 35, .96) 0%,
        rgba(4, 30, 52, .84) 48%, rgba(4, 30, 52, .32) 100%),
        url('images/cctv-hero.jpg') center/cover no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(7, 24, 39, .35), transparent 55%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    padding-top: 60px;
    padding-bottom: 60px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 35px;
    font-size: 12px;
    color: #c5d5e4;
}

.breadcrumb a {
    color: #fff;
}

.breadcrumb a:hover {
    color: #72c5ff;
}

.service-hero .eyebrow {
    color: #8ed2ff;
}

.service-hero h1 {
    max-width: 780px;
    color: #fff;
    font-size: clamp(38px, 5.4vw, 64px);
    letter-spacing: -2px;
    margin-bottom: 22px;
}

.service-hero h1 span {
    color: #67c3ff;
}

.service-hero .hero-content > p {
    max-width: 680px;
    color: #d3e0ec;
    font-size: 17px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.hero-trust div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #e5eff8;
    font-size: 12px;
}

.hero-trust i {
    color: #72c5ff;
    font-size: 18px;
}

/* Introduction */

.intro-grid,
.maintenance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px;
}
.btn-light {
    background: #fff;
    color: var(--fv-dark);
    flex-shrink: 0;
}

.btn-light:hover {
    background: var(--fv-light);
    transform: translateY(-3px);
}

#backTop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

#backTop:hover {
    background: #ed4438;
    transform: translateY(-4px);
}

@media (max-width: 576px) {
    #backTop {
        right: 15px;
        bottom: 15px;
        width: 44px;
        height: 44px;
    }
}
 .alarm-hero {
            background:
                linear-gradient(90deg,
                rgba(4, 20, 35, .96) 0%,
                rgba(4, 30, 52, .83) 52%,
                rgba(4, 30, 52, .35) 100%),
                url('images/alarm-hero.jpg') center/cover no-repeat;
        }

        .alarm-hero .hero-content {
            max-width: 1160px;
            width: 90%;
            margin: auto;
        }

        .alarm-intro-image {
            position: relative;
        }

        .alarm-intro-image img {
            width: 100%;
            height: 440px;
            object-fit: cover;
            border-radius: 16px;
        }

        .alarm-image-badge {
            position: absolute;
            left: -18px;
            bottom: 25px;
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 20px 24px;
            border-radius: 12px;
            background: #071827;
            color: #fff;
            box-shadow: 0 15px 40px rgba(7, 24, 39, .18);
        }

        .alarm-image-badge i {
            font-size: 30px;
            color: #72c5ff;
        }

        .alarm-image-badge strong {
            display: block;
            font-size: 14px;
        }

        .alarm-image-badge span {
            color: #bdcbd9;
            font-size: 12px;
        }

        .alarm-features {
            background: #f5f9fc;
        }

        .alarm-feature-card {
            position: relative;
            padding: 32px 26px;
            border: 1px solid #e2eaf1;
            border-radius: 16px;
            background: #fff;
            overflow: hidden;
            transition: transform .35s ease,
                        box-shadow .35s ease,
                        border-color .35s ease;
        }

        .alarm-feature-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: #337b0b;
            transition: width .35s ease;
        }

        .alarm-feature-card:hover {
            transform: translateY(-7px);
            border-color: #b5dcf5;
            box-shadow: 0 18px 45px rgba(7, 24, 39, .09);
        }

        .alarm-feature-card:hover::before {
            width: 100%;
        }

        .alarm-feature-icon {
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            margin-bottom: 23px;
            border-radius: 13px;
            background: #eaf6ff;
            color: #337b0b;
            font-size: 27px;
            transition: .3s ease;
        }

        .alarm-feature-card:hover .alarm-feature-icon {
            background: #337b0b;
            color: #fff;
            transform: scale(1.06);
        }

        .alarm-feature-card h3 {
            margin-bottom: 12px;
            font-size: 19px;
        }

        .alarm-feature-card p {
            margin-bottom: 0;
            font-size: 14px;
            line-height: 1.8;
        }

        .alarm-feature-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 22px;
        }

        .alarm-benefits {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            margin: 28px 0;
        }

        .alarm-benefit {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 17px;
            border-radius: 10px;
            background: #f5f9fc;
        }

        .alarm-benefit i {
            color: #337b0b;
            font-size: 21px;
        }

        .alarm-benefit strong {
            display: block;
            font-size: 14px;
            margin-bottom: 4px;
        }

        .alarm-benefit span {
            color: #536476;
            font-size: 12px;
        }

        .alarm-industries {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
        }

        .alarm-industry {
            position: relative;
            height: 250px;
            overflow: hidden;
            border-radius: 14px;
            background: #071827;
        }

        .alarm-industry img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .8;
            transition: transform .5s ease, opacity .4s ease;
        }

        .alarm-industry:hover img {
            transform: scale(1.08);
            opacity: .6;
        }

        .alarm-industry-content {
            position: absolute;
            inset: auto 0 0;
            padding: 28px 20px 20px;
            color: #fff;
            background: linear-gradient(transparent, rgb(37 39 37 / 24%));
        }

        .alarm-industry-content i {
            color: #fff;
            font-size: 23px;
        }

        .alarm-industry-content h3 {
            font-size: 17px;
            margin: 8px 0 0;
        }

        .alarm-integration {
            padding: 75px 0;
            background: #071827;
            overflow: hidden;
        }

        .alarm-integration-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 65px;
        }

        .alarm-integration h2 {
            color: #fff;margin-bottom: 20px;font-size: 34px;
        }
        .alarm-integration h2 span{
            color:#4bae15;
        }

        .alarm-integration p {
            color: #bdcbd9;text-align: justify;margin-bottom: 20px;
        }

        .alarm-integration .section-label {
            color:#549e2c;
        }

        .alarm-integration-image img {
            width: 100%;
            height: 370px;
            object-fit: cover;
            border-radius: 16px;
        }

        .alarm-integration-list {
            list-style: none;
            padding: 0;
            margin: 25px 0 30px;
        }

        .alarm-integration-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 15px;
            color: #e2edf7;
            font-size: 14px;
        }

        .alarm-integration-list i {
            color: #549e2c;
            font-size: 19px;
        }

        .alarm-page-cta {
            background: linear-gradient(120deg, #045b98, #337b0b);
        }

        @media (max-width: 1000px) {
            .alarm-feature-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .alarm-industries {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .alarm-integration-grid {
                gap: 35px;
            }
        }

        @media (max-width: 768px) {
            .alarm-intro-image img {
                height: 340px;
            }

            .alarm-integration-grid {
                grid-template-columns: 1fr;
            }

            .alarm-integration-image {
                order: -1;
            }

            .alarm-benefits {
                grid-template-columns: 1fr;
            }

            .alarm-image-badge {
                left: 10px;
            }
        }

        @media (max-width: 480px) {
            .alarm-feature-grid,
            .alarm-industries {
                grid-template-columns: 1fr;
            }

            .alarm-industry {
                height: 270px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .alarm-feature-card,
            .alarm-feature-icon,
            .alarm-industry img {
                transition: none;
            }
        }

        /* ==============================
   BIOMETRIC ACCESS CONTROL
============================== */

.access-control-section {
    padding: 40px 0;
    background: #f5f9fd;
    color: #071827;
    /*font-family: 'Inter', sans-serif;*/
    overflow: hidden;
}

.access-container {
    width: min(1180px, 92%);
    margin: auto;
}

.access-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.access-subtitle {
    display: inline-block;
    color: rgb(208 16 26 / var(--tw-text-opacity, 1));
    font-size: 12px;
    background: rgb(255 240 240 / var(--tw-bg-opacity, 1));
    font-weight: 600;
    padding: 0px 10px;
    border-radius: 9999px;
    /* letter-spacing: 2px; */
    margin-bottom: 13px;
}

.access-heading h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(30px, 4vw, 36px);
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 18px;
}

.access-heading h2 span,
.benefits-intro h3 span,
.industry-heading h3 span {
    color:#ca161f;
}

.access-heading p,
.benefits-intro p {
    color: #26282b;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}

.access-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 30px;
}

.access-title h3 {
    margin: 0;
    font-size: 25px;
    font-weight: 600;
}

.access-line {
    width: 38px;
    height: 3px;
    background: #f9b900;
    border-radius: 5px;
}

/* Service Cards */

.access-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.cable-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.access-card {
    position: relative;
    min-height: 205px;
    padding: 28px 23px;
    background: #fff;
    border: 1px solid #e3edf5;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .35s ease,
                box-shadow .35s ease,
                border-color .35s ease;
}

.access-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background:#d60303;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.access-card:hover {
    transform: translateY(-8px);
    border-color: #b8dff8;
    box-shadow: 0 18px 40px rgba(4, 91, 152, .12);
}

.access-card:hover::before {
    transform: scaleX(1);
}

.access-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 14px;
    background: #eaf6ff;
    color: #337b0b;
    font-size: 27px;
    transition: background .3s ease, color .3s ease;
}

.access-card:hover .access-icon {
    background: #d60303;
    color: #fff;
}

.access-card h4 {
    position: relative;
    z-index: 1;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 600;
    margin: 0 0 11px;
}

.access-card p {
    position: relative;
    z-index: 1;
    font-size: 13.5px;
    line-height: 1.8;
    color:#121213;
    margin: 0;
}

.access-number {
    position: absolute;
    right: 15px;
    bottom: 3px;
    font-size: 18px;
    font-weight: 900;
    color: rgba(8, 125, 204, .055);
    line-height: 1;
    pointer-events: none;
}

/* Benefits */

.access-benefits {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 55px;
    align-items: center;
    margin-top: 45px;
    padding: 48px;
    border-radius: 22px;
    background: #0F172A ;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.access-benefits::after {
    content: "";
    position: absolute;
    width: 270px;
    height: 270px;
    right: -110px;
    top: -130px;
    border: 40px solid rgba(8, 125, 204, .14);
    border-radius: 50%;
    pointer-events: none;
}

.benefits-intro,
.benefits-list {
    position: relative;
    z-index: 1;
}

/*.benefits-intro .access-subtitle {
    color: #70c4ff;
}*/

.benefits-intro h3,
.industry-heading h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 34px;
    font-weight: 600;
    margin: 0 0 16px;
}

.benefits-intro h3 span {
    color: #f9b900;
}

.benefits-intro p {
    color: #c1cfdb;
}

.benefits-list {
    display: grid;
    gap: 16px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
    line-height: 1.7;
    color: #e4edf5;
}

.benefit-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.benefit-item i {
    color: #35b86b;
    font-size: 19px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Industries */

.access-industries {
    padding: 80px 0 15px;
}

.industry-heading {
    text-align: center;
    margin-bottom: 32px;
}

.industry-heading h3 {
    margin-bottom: 0;
}

.industry-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.industry-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e0ebf4;
    border-radius: 12px;
    background: #fff;
    transition: .3s ease;
}

.industry-item:hover {
    transform: translateY(-4px);
    border-color: #337b0b;
    box-shadow: 0 10px 24px rgba(4, 91, 152, .08);
}

.industry-item i {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: #eaf6ff;
    color: #045b98;
    font-size: 21px;
}

.industry-item span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

/* CTA */

.access-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 55px;
    padding: 32px 38px;
    background: #eaf6ff;
    border-left: 5px solid #337b0b;
    border-radius: 15px;
}

.access-cta h3 {
    font-size: 22px;
    line-height: 1.4;
    font-weight: 600;
    margin: 0 0 8px;
}

.access-cta p {
    font-size: 14px;
    line-height: 1.7;
    color: #657487;
    margin: 0;
}

.access-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 15px 22px;
    border-radius: 8px;
    background: #337b0b;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: .3s ease;
}

.access-btn:hover {
    background: #ca0807;
    color: #fff;
    transform: translateY(-3px);
}

.access-btn i {
    transition: transform .3s ease;
}

.access-btn:hover i {
    transform: translateX(5px);
}

/* Responsive */

@media (max-width: 992px) {
    .access-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .access-benefits {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 35px;
    }

    .industry-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .access-control-section {
        padding: 60px 0;
    }

    .access-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .access-card {
        min-height: auto;
        padding: 24px;
    }

    .access-benefits {
        margin-top: 55px;
        padding: 27px 22px;
    }

    .benefits-intro h3,
    .industry-heading h3 {
        font-size: 29px;
    }

    .industry-list {
        grid-template-columns: 1fr;
    }

    .access-cta {
        align-items: flex-start;
        flex-direction: column;
        padding: 25px 22px;
    }

    .access-btn {
        width: 100%;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .access-card,
    .access-card::before,
    .access-icon,
    .industry-item,
    .access-btn,
    .access-btn i {
        transition: none;
    }
}
/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Structured Cabling Services */
.network-services {
    --network-blue: #ca0605;
    --network-dark: #071827;
    --network-light: #eaf6ff;

    position: relative;
    overflow: hidden;
    padding: 40px 20px;
    background: #f5f9fd;
    font-family: 'Inter', sans-serif;
}

.network-services::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -100px;
    width: 350px;
    height: 350px;
    border: 65px solid rgba(8, 125, 204, 0.045);
    border-radius: 50%;
    pointer-events: none;
}

.network-container {
    position: relative;
    z-index: 1;
    max-width: 90%;
























    margin: 0 auto;
}

/* Heading */
.network-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.network-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: var(--network-blue) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}

.subtitle-line {
    width: 30px;
    height: 3px;
    background: #ed4438;
    border-radius: 5px;
}

.network-heading h2 {
    margin: 0 0 18px;
    color: var(--network-dark);
    font-size: clamp(34px, 5vw, 38px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -1.2px;
}

.network-heading h2 span {
    color: var(--network-blue);
}

.network-heading p {
    max-width: 620px;
    margin: 0 auto;
    color: #667789;
    font-size: 15px;
    line-height: 1.9;
}

/* Grid */
.network-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Service Card */
.network-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 32px 27px 25px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3edf5;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(7, 24, 39, 0.035);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.network-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--network-blue);
    transition: width 0.4s ease;
}

.network-card:hover {
    transform: translateY(-8px);
    border-color: rgba(8, 125, 204, 0.4);
    box-shadow: 0 20px 45px rgba(7, 57, 92, 0.11);
}

.network-card:hover::before {
    width: 100%;
}

/* Icon */
.network-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 25px;
    color: var(--network-blue);
    background: var(--network-light);
    border-radius: 12px;
    font-size: 25px;
    transition:
        color 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease;
}

.network-card:hover .network-icon {
    color: #fff;
    background: var(--network-blue);
    transform: rotate(-5deg) scale(1.05);
}

/* Number */
.network-number {
    position: absolute;display: none;
    top: 28px;
    right: 25px;
    color: #e9f0f6;
    font-size: 34px;
    line-height: 1;
    font-weight: 600;
    transition: color 0.3s ease;
}

.network-card:hover .network-number {
    color: #d8edfb;
}

/* Card Content */
.network-card h3 {
    margin: 0 0 13px;
    color: var(--network-dark);
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    transition: color 0.3s ease;
}

.network-card:hover h3 {
    color: var(--network-blue);
}

.network-card p {
    flex-grow: 1;
    margin: 0 0 24px;
    color: #68798a;
    font-size: 13.5px;
    line-height: 1.9;
}

/* Bottom Link */
.network-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid #edf1f5;
    color: #50657a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.network-card-bottom i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--network-blue);
    background: var(--network-light);
    border-radius: 50%;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.network-card:hover .network-card-bottom i {
    color: #fff;
    background: var(--network-blue);
    transform: translateX(4px);
}

/* Call to Action */
.network-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 45px;
    padding: 35px 40px;
    background: #192033;
    border-radius: 14px;
}

.network-cta h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.network-cta p {
    max-width: 620px;
    margin: 0;
    color: #b9c8d6;
    font-size: 13px;
    line-height: 1.8;
}

.network-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 15px 22px;
    color: #fff;
    background: var(--network-blue);
    border: 1px solid var(--network-blue);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.network-cta-btn:hover {
    color: var(--network-dark);
    background: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}

.network-cta-btn i {
    transition: transform 0.3s ease;
}

.network-cta-btn:hover i {
    transform: translateX(4px);
}

/* Tablet */
@media (max-width: 991px) {
    .network-services {
        padding: 75px 20px;
    }

    .network-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .network-cta {
        align-items: flex-start;
        flex-direction: column;
        padding: 30px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .network-services {
        padding: 60px 16px;
    }

    .network-heading {
        margin-bottom: 35px;
    }

    .network-heading h2 {
        font-size: 34px;
    }

    .network-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .network-card {
        padding: 27px 23px 22px;
    }

    .network-card h3 {
        font-size: 18px;
    }

    .network-cta {
        gap: 22px;
        margin-top: 30px;
        padding: 25px 22px;
    }

    .network-cta h3 {
        font-size: 20px;
        line-height: 1.5;
    }

    .network-cta-btn {
        width: 100%;
        padding: 15px 12px;
        font-size: 12px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .network-card,
    .network-card::before,
    .network-icon,
    .network-number,
    .network-card-bottom i,
    .network-cta-btn,
    .network-cta-btn i {
        transition: none;
    }

    .network-card:hover,
    .network-cta-btn:hover {
        transform: none;
    }
}

/* Key Benefits - Access Control */
.access-benefits1 {
    --benefit-blue: #337b0b;
    --benefit-dark: #071827;
    --benefit-muted: #68798a;

    position: relative;
    overflow: hidden;
    padding: 90px 20px;
    background: #f5f9fd;
    font-family: 'Inter', sans-serif;
}

.benefits-container {
    max-width: 1200px;
    margin: auto;
}

/* Heading */
.benefits-heading {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.benefits-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--benefit-blue);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}

.benefits-eyebrow span {
    width: 28px;
    height: 3px;
    background: #ed4438;
    border-radius: 5px;
}

.benefits-heading h2 {
    margin: 0 0 16px;
    color: var(--benefit-dark);
    font-size: clamp(34px, 5vw, 46px);
    font-weight: 600;
    letter-spacing: -1px;
}

.benefits-heading h2 span {
    color: var(--benefit-blue);
}

.benefits-heading p {
    margin: 0;
    color: var(--benefit-muted);
    font-size: 15px;
    line-height: 1.9;
}

/* Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* Cards */
.benefit-card {
    position: relative;
    min-width: 0;
    padding: 30px 27px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3edf5;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(7, 24, 39, 0.035);
    transition: transform 0.35s ease,
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

.benefit-card:hover {
    transform: translateY(-7px);
    border-color: rgba(8, 125, 204, 0.45);
    box-shadow: 0 18px 40px rgba(7, 57, 92, 0.10);
}

/* Icons */
.benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    color: var(--benefit-blue);
    background: #eaf6ff;
    border-radius: 12px;
    font-size: 25px;
    transition: all 0.35s ease;
}

.benefit-card:hover .benefit-icon {
    color: #fff;
    background: var(--benefit-blue);
    transform: scale(1.06);
}

/* Numbers */
.benefit-number {
    position: absolute;
    top: 28px;
    right: 25px;
    color: #eaf0f6;
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
}

.benefit-card h3 {
    margin: 0 0 12px;
    color: var(--benefit-dark);
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
}

.benefit-card:hover h3 {
    color: var(--benefit-blue);
}

.benefit-card p {
    margin: 0;
    color: var(--benefit-muted);
    font-size: 13.5px;
    line-height: 1.9;
}

/* Bottom Accent */
.benefit-line {
    width: 38px;
    height: 3px;
    margin-top: 22px;
    background: var(--benefit-blue);
    border-radius: 5px;
    transition: width 0.35s ease;
}

.benefit-card:hover .benefit-line {
    width: 75px;
}

/* Bottom Banner */
.benefits-banner {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 35px;
    padding: 30px 35px;
    background: var(--benefit-dark);
    border-radius: 12px;
}

.banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    color: #fff;
    background: var(--benefit-blue);
    border-radius: 12px;
    font-size: 26px;
}

.banner-content {
    flex: 1;
}

.banner-content h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
}

.banner-content p {
    margin: 0;
    color: #b9c8d6;
    font-size: 13px;
    line-height: 1.8;
}

.banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 15px 20px;
    color: #fff;
    background: var(--benefit-blue);
    border: 1px solid var(--benefit-blue);
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.banner-btn:hover {
    color: var(--benefit-dark);
    background: #fff;
    border-color: #fff;
}

.banner-btn i {
    transition: transform 0.3s ease;
}

.banner-btn:hover i {
    transform: translateX(4px);
}

/* Tablet */
@media (max-width: 991px) {
    .access-benefits {
        padding: 70px 20px;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .benefits-banner {
        flex-wrap: wrap;
    }

    .banner-btn {
        margin-left: 82px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .access-benefits {
        padding: 55px 16px;
    }

    .benefits-heading {
        margin-bottom: 32px;
    }

    .benefits-heading h2 {
        font-size: 34px;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .benefit-card {
        padding: 26px 23px;
    }

    .benefits-banner {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        padding: 25px 22px;
    }

    .banner-content h3 {
        font-size: 20px;
        line-height: 1.5;
    }

    .banner-btn {
        width: 100%;
        margin-left: 0;
        box-sizing: border-box;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .benefit-card,
    .benefit-icon,
    .benefit-line,
    .banner-btn,
    .banner-btn i {
        transition: none;
    }

    .benefit-card:hover,
    .benefit-card:hover .benefit-icon {
        transform: none;
    }
}

/* Security Services */
.security-services {
    --security-navy: #0b2340;
    --security-blue: #d61f1f;
    --security-light: #eaf6ff;
    --security-text: #536477;

    padding: 40px 20px;
    background: linear-gradient(180deg, #f5f9fd, #ffffff);
    /*font-family: 'Inter', Arial, sans-serif;*/
    overflow: hidden;
}

.security-container {
    max-width: 92%;
    margin: auto;
}

.security-heading {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.security-tag {
    display: inline-block;
    padding: 9px 17px;
    margin-bottom: 17px;
    border-radius: 30px;
    background: #e2f2ff;
    color: var(--security-blue);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.8px;
}

.security-heading h2 {
    margin: 0 0 18px;
    color: var(--security-navy);
    font-size: clamp(30px, 4vw, 45px);
    font-weight: 600;
    line-height: 1.2;
}

.security-heading h2 span {
    color: var(--security-blue);
}

.security-heading p {
    margin: 0;
    /*color: var(--security-text);*/
    font-size: 16px;
    line-height: 1.8;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.security-card {
    position: relative;
    padding: 35px;
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(11, 35, 64, 0.06);
    transition: transform .35s ease, box-shadow .35s ease,
                border-color .35s ease;
}

.security-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 35px;
    width: 65px;
    height: 4px;
    background: var(--security-blue);
    border-radius: 0 0 5px 5px;
    transition: width .35s ease;
}

.security-card:hover {
    transform: translateY(-8px);
    border-color: #b9ddf8;
    box-shadow: 0 22px 50px rgba(11, 35, 64, 0.12);
}

.security-card:hover::before {
    width: calc(100% - 70px);
}

.security-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.security-icon {
    display: flex;
    width: 66px;
    height: 66px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--security-light);
    color: var(--security-blue);
    font-size: 29px;
    transition: background .3s ease, color .3s ease,
                transform .3s ease;
}

.security-card:hover .security-icon {
    background: var(--security-blue);
    color: #fff;
    transform: rotate(-5deg) scale(1.05);
}

.security-number {
    color: #dce7f1;
    font-size: 43px;
    font-weight: 600;
}

.security-card h3 {
    margin: 0 0 14px;
    color: var(--security-navy);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

.security-description {
    margin: 0 0 25px;
    color: var(--security-text);
    font-size: 14px;
    line-height: 1.8;
}

.security-list {
    display: grid;
    gap: 17px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.security-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /*color: var(--security-text);*/
    font-size: 13.5px;
    line-height: 1.8;
}

.security-list li > i {
    flex-shrink: 0;
    margin-top: 5px;
    color: var(--security-blue);
    font-size: 14px;
}

.security-list strong {
    color: var(--security-navy);
    font-weight: 700;
}

.security-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border: 1px solid var(--security-blue);
    border-radius: 7px;
    background: var(--security-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .3s ease, color .3s ease,
                gap .3s ease;
}

.security-link:hover {
    gap: 18px;
    background: var(--security-navy);
    border-color: var(--security-navy);
    color: #fff;
}

.security-link i {
    font-size: 12px;
}

/* Tablet */
@media (max-width: 900px) {
    .security-services {
        padding: 70px 20px;
    }

    .security-grid {
        gap: 20px;
    }

    .security-card {
        padding: 27px;
    }

    .security-card h3 {
        font-size: 21px;
    }
}

/* Mobile */
@media (max-width: 650px) {
    .security-services {
        padding: 55px 16px;
    }

    .security-heading {
        margin-bottom: 35px;
    }

    .security-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .security-card {
        padding: 27px 23px;
        border-radius: 14px;
    }

    .security-card::before {
        left: 23px;
    }

    .security-card:hover::before {
        width: calc(100% - 46px);
    }

    .security-card h3 {
        font-size: 22px;
    }

    .security-number {
        font-size: 36px;
    }

    .security-list li {
        font-size: 13px;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .security-card,
    .security-icon,
    .security-link,
    .security-card::before {
        transition: none;
    }

    .security-card:hover,
    .security-card:hover .security-icon {
        transform: none;
    }
}
.fv-policy-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 65px;
    align-items: start;
}
.fv-policy-grid h3{
    font-size: 24px;
    margin-bottom: 10px;color: #2e670e;
}