:root{
    --green:#2ECC71;
    --green-dark:#27AE60;
    --black:#191818;
    --dark:#191818;
    --white:#ffffff;
    --muted:#5e5e5e;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f7f6;
    color:#050505;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

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

.main-header{
    width:100%;
    background:#191818;
    position:sticky;
    top:0;
    z-index:999;
    box-shadow:0 6px 25px rgba(0,0,0,.35);
    animation:headerDrop .8s ease forwards;
}

@keyframes headerDrop{
    from{
        opacity:0;
        transform:translateY(-100%);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.navbar{
    padding:16px 0;
    width:100%;
}

.navbar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1300px;
    margin:0 auto;
    padding:0 40px;
    width:100%;
}

.navbar .navbar-brand{
    flex-shrink:0;
    margin-right:30px;
}

.navbar-menu-desktop{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 30px;
}

.navbar-menu-desktop .navbar-nav{
    display:flex;
    align-items:center;
    margin:0;
}

.navbar-menu-desktop .header-btn{
    margin-left:auto;
    flex-shrink:0;
}

.logo{
    color:#fff;
    font-size:40px;
    line-height:.85;
    font-weight:900;
    letter-spacing:3px;
}

.logo span{
    color:var(--green);
}

.logo small{
    display:block;
    font-size:10px;
    letter-spacing:1.8px;
    margin-top:8px;
    font-weight:700;
}

.site-logo{
    max-height:70px;
    width:auto;
    display:block;
}

.navbar-nav .nav-link{
    color:#fff;
    font-size:13px;
    font-weight:900;
    margin:0 20px;
    position:relative;
    padding:10px 0;
}

.navbar-nav .nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:3px;
    background:var(--green);
    transition:.35s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
    color:#fff;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{
    width:100%;
}

.header-btn{
    color:#fff;
    border:2px solid var(--green);
    padding:13px 28px;
    border-radius:8px;
    font-size:14px;
    font-weight:900;
    transition:.35s ease;
}

.header-btn i{
    color:var(--green);
    transition:.35s ease;
}

.header-btn:hover{
    background:var(--green);
    color:#000;
    box-shadow:0 0 30px rgba(46,204,113,.7);
    transform:translateY(-3px);
}

.header-btn:hover i{
    color:#000;
    transform:translateX(5px);
}

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

.mobile-nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:40px;
    height:40px;
    background:none;
    border:none;
    cursor:pointer;
    gap:5px;
}

.mobile-nav-toggle span{
    width:28px;
    height:2.5px;
    background:#fff;
    border-radius:2px;
    transition:.35s ease;
    display:block;
}

.mobile-nav-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(8px, 8px);
}

.mobile-nav-toggle.active span:nth-child(2){
    opacity:0;
}

.mobile-nav-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(7px, -8px);
}



.mobile-nav-sidebar{
    position:fixed;
    left:-280px;
    top:0;
    width:280px;
    height:100vh;
    background:#191818;
    z-index:1000;
    padding:30px 20px;
    overflow-y:auto;
    transition:left .35s ease;
    box-shadow:-10px 0 30px rgba(0,0,0,.5);
}

.mobile-nav-sidebar.active{
    left:0;
}

.mobile-nav-close{
    display:flex;
    justify-content:flex-end;
    margin-bottom:20px;
}

.mobile-nav-close button{
    background:none;
    border:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;
    padding:0;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s ease;
}

.mobile-nav-close button:hover{
    color:var(--green);
    transform:rotate(90deg);
}

.mobile-nav-logo{
    text-align:center;
    margin-bottom:30px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.mobile-nav-logo img{
    max-height:60px;
    width:auto;
}

.mobile-nav-menu{
    list-style:none;
    padding:0;
    margin:0 0 30px;
}

.mobile-nav-menu li{
    margin:0;
}

.mobile-nav-link{
    display:block;
    color:#d8d8d8;
    text-decoration:none;
    padding:16px 12px;
    font-size:15px;
    font-weight:800;
    border-left:3px solid transparent;
    transition:.25s ease;
    letter-spacing:.5px;
}

.mobile-nav-link:hover,
.mobile-nav-link.active{
    color:var(--green);
    border-left-color:var(--green);
    background:rgba(46,204,113,.08);
    padding-left:18px;
}

.mobile-nav-btn{
    display:block;
    width:100%;
    color:#fff;
    background:linear-gradient(135deg,#27AE60,#2ECC71);
    border:none;
    padding:14px;
    border-radius:8px;
    font-size:13px;
    font-weight:900;
    text-align:center;
    text-decoration:none;
    margin-bottom:30px;
    transition:.35s ease;
}

.mobile-nav-btn:hover{
    box-shadow:0 8px 20px rgba(46,204,113,.4);
    transform:translateY(-2px);
}

.mobile-nav-contact{
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.1);
}

.mobile-nav-contact h5{
    color:#fff;
    font-size:13px;
    font-weight:900;
    margin-bottom:16px;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.mobile-contact-link{
    display:flex;
    align-items:center;
    gap:10px;
    color:#d8d8d8;
    text-decoration:none;
    padding:10px 0;
    font-size:13px;
    transition:.25s ease;
}

.mobile-contact-link i{
    color:var(--green);
    width:16px;
}

.mobile-contact-link:hover{
    color:var(--green);
    padding-left:6px;
}

.mobile-nav-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0);
    z-index:999;
    pointer-events:none;
    transition:background .35s ease;
}

.mobile-nav-overlay.active{
    background:rgba(0,0,0,.6);
    pointer-events:auto;
}

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

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

.hero .container{
    max-width:1200px;
}

.hero .row{
    width:100%;
}

.hero::before{
    content:"";
    position:absolute;
    left:-120px;
    top:-120px;
    width:480px;
    height:480px;
    background:radial-gradient(circle,rgba(46,204,113,.13),transparent 65%);
    z-index:1;
}

.hero-content{
    position:relative;
    z-index:5;
    padding:82px 0 72px;
    max-width:550px;
}

.hero-kicker{
    color:#2ECC71;
    font-weight:900;
    font-size:17px;
    margin-bottom:24px;
    letter-spacing:.3px;
    animation:fadeUp .8s ease forwards;
}

.hero-title{
    font-size:64px;
    line-height:1.08;
    font-weight:950;
    color:#000;
    margin-bottom:24px;
    letter-spacing:-2px;
    animation:fadeUp 1s ease .15s both;
}

.hero-title span{
    color:#2ECC71;
}

.hero-desc{
    max-width:535px;
    font-size:17px;
    line-height:1.6;
    color:#111;
    margin-bottom:34px;
    animation:fadeUp 1s ease .3s both;
}

.hero-features{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px;
    margin-bottom:36px;
}

.hero-feature{
    min-height:118px;
    padding:20px 16px;
    text-align:center;
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;
    background:#fff;
    animation:fadeUp .85s ease both;
}

.hero-feature:nth-child(1){animation-delay:.45s;}
.hero-feature:nth-child(2){animation-delay:.6s;}
.hero-feature:nth-child(3){animation-delay:.75s;}
.hero-feature:nth-child(4){animation-delay:.9s;}

.hero-feature i{
    color:var(--green-dark);
    font-size:36px;
    margin-bottom:13px;
    animation:iconPulse 2.4s infinite ease-in-out;
}

.hero-feature h5{
    font-size:12px;
    font-weight:950;
    margin-bottom:6px;
}

.hero-feature p{
    font-size:11px;
    line-height:1.35;
    color:#111;
    margin:0;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:22px;
    animation:fadeUp 1s ease 1s both;
}

.btn-main{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:linear-gradient(135deg,#27AE60,#2ECC71);
    color:#fff;
    padding:15px 26px;
    border-radius:8px;
    font-size:13px;
    font-weight:950;
    border:0;
    box-shadow:0 12px 30px rgba(46,204,113,.35);
    transition:.35s ease;
}

.btn-main:hover{
    color:#fff;
    transform:translateY(-5px);
    box-shadow:0 18px 45px rgba(46,204,113,.65);
}

.btn-main i{
    transition:.35s ease;
}

.btn-main:hover i{
    transform:translateX(6px);
}

.btn-light-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:155px;
    color:#27AE60;
    background:#fff;
    border:2px solid #27AE60;
    padding:14px 28px;
    border-radius:8px;
    font-size:13px;
    font-weight:950;
    transition:.35s ease;
}

.btn-light-outline:hover{
    background:#27AE60;
    color:#fff;
    box-shadow:0 12px 30px rgba(39,174,96,.35);
    transform:translateY(-5px);
}

.hero-visual{
    position:absolute;
    right:0;
    top:0;
    width:52.5%;
    height:100%;
    z-index:2;
    background:url("images/home.png");
    background-size:cover;
    background-position:center;
}

.wall-battery{
    position:absolute;
    width:155px;
    height:260px;
    background:linear-gradient(135deg,#fff,#e9edf2);
    border-radius:4px;
    box-shadow:0 25px 55px rgba(0,0,0,.35);
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-weight:900;
    color:#111;
    animation:floatBattery 4s infinite ease-in-out;
}

.wall-battery .m{
    font-size:44px;
    line-height:1;
    font-family:Georgia,serif;
}

.wall-battery small{
    display:block;
    font-size:13px;
    letter-spacing:1px;
}

.battery-one{
    left:33%;
    top:18%;
}

.battery-two{
    right:10%;
    top:8%;
    animation-delay:1.2s;
}

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

.stats-bar{
    background:#191818;
    color:#fff;
    padding:24px 0;
    position:relative;
    z-index:5;
    box-shadow:0 -10px 35px rgba(0,0,0,.35);
}

.stat-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:0 18px;
    min-height:64px;
    border-right:1px solid rgba(255,255,255,.16);
    transition:.35s ease;
}

.stat-item:hover{
    transform:translateY(-8px);
}

.stat-item i{
    font-size:34px;
    color:var(--green);
    text-shadow:0 0 18px rgba(46,204,113,.65);
}

.stat-item h3{
    font-size:28px;
    line-height:.95;
    font-weight:950;
    margin:0;
    color:#fff;
}

.stat-item p{
    font-size:12px;
    line-height:1.1;
    font-weight:900;
    margin:0;
    color:#fff;
}

/* ================= ENERGY SYSTEM ================= */

.energy-system{
    position:relative;
    padding:58px 0 64px;
    overflow:hidden;
    background-color:#F2F2F4;
    background-image:url("images/bg.png");
    background-position:right center;
    background-size:auto 100%;
    background-repeat:no-repeat;
}

@media(max-width:768px){
    .energy-system{
        background-image:none;
        background-color:#F2F2F4;
    }
}

.section-kicker{
    color:#2ECC71;
    font-size:13px;
    font-weight:950;
    margin-bottom:12px;
}

.energy-system h2{
    font-size:38px;
    line-height:1.1;
    font-weight:950;
    margin-bottom:20px;
    color:#000;
}

.energy-system p{
    font-size:15px;
    line-height:1.5;
    color:#111;
}

.energy-list{
    list-style:none;
    padding:0;
    margin-top:28px;
}

.energy-list li{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:12px;
    font-size:13px;
    color:#111;
    font-weight:700;
}

.energy-list i{
    color:#2ECC71;
}

.diagram{
    position:relative;
    min-height:370px;
    z-index:3;
    border-radius:18px;
}

.device-box{
    position:absolute;
    width:98px;
    height:145px;
    background:linear-gradient(180deg,#fff,#f1f3f5);
    border:1px solid #e0e4e8;
    border-radius:8px;
    box-shadow:0 18px 38px rgba(0,0,0,.13);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:11px;
    font-weight:800;
    color:#111;
    animation:floatSmall 4s infinite ease-in-out;
}

.device-box::before{
    position:absolute;
    top:-30px;
    width:120px;
    text-align:center;
    font-size:11px;
    color:#111;
    font-weight:800;
}

.inverter{left:55px;top:80px;}
.inverter::before{content:"Solar Inverter";}

.load{left:230px;top:95px;animation-delay:.5s;}
.load::before{content:"Essential Load";}

.gateway{left:395px;top:55px;animation-delay:1s;}
.gateway::before{content:"Backup Gateway";}

.panel{left:565px;top:80px;animation-delay:1.5s;}
.panel::before{content:"Main Panel";}

.meter{right:125px;top:100px;animation-delay:2s;}
.meter::before{content:"Utility Meter";}

.device-screen{
    width:42px;
    height:52px;
    background:#e7edf3;
    border-radius:4px;
    border:1px solid #d5dce2;
}

.center-battery{
    position:absolute;
    width:160px;
    height:225px;
    left:365px;
    bottom:0;
    background:linear-gradient(135deg,#fff,#edf1f4);
    border-radius:5px;
    box-shadow:0 25px 45px rgba(0,0,0,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    z-index:4;
    animation:floatBattery 4.5s ease-in-out infinite;
}

.center-battery .m{
    font-size:43px;
    font-family:Georgia,serif;
    line-height:1;
}

.center-battery small{
    display:block;
    font-size:12px;
    font-weight:900;
}

.line{
    position:absolute;
    height:4px;
    background:#4caaff;
    border-radius:20px;
    box-shadow:0 0 12px rgba(76,170,255,.6);
    z-index:1;
}

.line.green{
    background:#2ECC71;
    box-shadow:0 0 12px rgba(46,204,113,.6);
}

.line1{left:150px;top:205px;width:130px;}
.line2{left:278px;top:205px;width:4px;height:82px;}
.line3{left:278px;top:284px;width:160px;}
.line4{left:325px;top:210px;width:125px;}
.line5{left:450px;top:125px;width:150px;}
.line6{left:640px;top:210px;width:4px;height:112px;}
.line7{left:640px;top:320px;width:210px;}
.line8{right:170px;top:225px;width:4px;height:95px;}

.bicycle{
    position:absolute;
    right:20px;
    bottom:10px;
    font-size:105px;
    color:#111;
    opacity:.88;
    animation:bikeMove 5s ease-in-out infinite;
}

/* ================= PRODUCTS ================= */

.products-section{
    background:#edf3f2;
    padding:35px 0 42px;
    position:relative;
}

.section-title{
    text-align:center;
    margin-bottom:26px;
}

.section-title small{
    color:#2ECC71;
    font-size:12px;
    font-weight:950;
}

.section-title h2{
    font-size:30px;
    font-weight:950;
    color:#000;
}

.product-card{
    display:block;
    height:100%;
    background:#D9D9D9;
    border-radius:13px;
    padding:22px 14px 18px;
    text-align:center;
    box-shadow:0 13px 28px rgba(0,0,0,.12);
    border:1px solid rgba(255,255,255,.75);
    transition:.4s ease;
    position:relative;
    overflow:hidden;
}

.product-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(46,204,113,.12),transparent 50%);
    opacity:0;
    transition:.4s;
}

.product-card:hover{
    transform:translateY(-12px);
    box-shadow:0 24px 48px rgba(46,204,113,.28);
}

.product-card:hover::before{
    opacity:1;
}

.product-img{
    height:160px;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2;
}

.product-img img{
    max-width:92%;
    max-height:100%;
    object-fit:contain;
    display:block;
}

.product-shape{
    width:82px;
    height:108px;
    background:linear-gradient(135deg,#fff,#dfe5e8);
    border-radius:6px;
    box-shadow:0 12px 24px rgba(0,0,0,.16);
    position:relative;
}

.product-shape.black{
    background:linear-gradient(135deg,#1b1d1f,#070707);
}

.product-shape.wide{
    width:145px;
    height:82px;
}

.product-shape.container-box{
    width:150px;
    height:88px;
    border-radius:5px;
}

.product-shape::after{
    content:"M";
    position:absolute;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    font-family:Georgia,serif;
    font-size:25px;
    color:#111;
}

.product-shape.black::after{
    color:#fff;
}

.product-card h5{
    position:relative;
    z-index:2;
    font-size:14px;
    font-weight:950;
    color:#000;
    margin-bottom:5px;
}

.product-card p{
    position:relative;
    z-index:2;
    color:#2ECC71;
    font-size:12px;
    font-weight:950;
    margin:0;
}

/* ================= WHY CHOOSE ================= */

.why-section{
    background:#191818;
    color:#fff;
    padding:50px 0;
    position:relative;
    overflow:hidden;
}

.why-section::before{
    content:"";
    position:absolute;
    right:-140px;
    top:-120px;
    width:420px;
    height:420px;
    background:radial-gradient(circle,rgba(46,204,113,.22),transparent 65%);
}

.why-content small{
    color:#2ECC71;
    font-weight:950;
    font-size:12px;
}

.why-content h2{
    font-size:35px;
    line-height:1.08;
    font-weight:950;
    margin:12px 0 18px;
}

.why-content p{
    color:#d8d8d8;
    font-size:14px;
    line-height:1.55;
    margin-bottom:24px;
}

.why-card{
    height:100%;
    display:flex;
    gap:17px;
    padding:18px;
    border:1px solid rgba(46,204,113,.42);
    border-radius:12px;
    background:rgba(255,255,255,.02);
    transition:.35s ease;
}

.why-card:hover{
    transform:translateY(-9px);
    background:rgba(46,204,113,.08);
    box-shadow:0 0 35px rgba(46,204,113,.22);
}

.why-icon{
    min-width:45px;
    width:45px;
    height:45px;
    border-radius:50%;
    background:rgba(46,204,113,.12);
    display:flex;
    align-items:center;
    justify-content:center;
}

.why-icon i{
    color:var(--green);
    font-size:22px;
}

.why-card h5{
    font-size:15px;
    font-weight:950;
    margin-bottom:7px;
}

.why-card p{
    color:#cfcfcf;
    font-size:12px;
    line-height:1.45;
    margin:0;
}

/* ================= SOLUTIONS ================= */

.solutions-section{
    background:#fff;
    padding:48px 0 55px;
}

.solution-card{
    height:168px;
    border-radius:14px;
    overflow:hidden;
    position:relative;
    background-size:cover;
    background-position:center;
    box-shadow:0 16px 35px rgba(0,0,0,.24);
    transition:.4s ease;
}

.solution-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.88));
    z-index:1;
}

.solution-card span{
    position:absolute;
    left:0;
    bottom:19px;
    width:100%;
    text-align:center;
    z-index:2;
    color:white;
    font-weight:950;
    font-size:16px;
}

.solution-card:hover{
    transform:scale(1.045);
    box-shadow:0 22px 45px rgba(0,0,0,.32);
}

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

.about-section{
    background:#eef3f2;
    padding:50px 0;
}

.about-big-img{
    height:100%;
    min-height:520px;
    border-radius:18px;
    overflow:hidden;
    background-image:url("images/abthero.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.about-content small{
    color:#2ECC71;
    font-size:12px;
    font-weight:950;
}

.about-content h2{
    font-size:36px;
    line-height:1.08;
    font-weight:950;
    margin:12px 0 18px;
}

.about-content p{
    color:#222;
    font-size:14px;
    line-height:1.6;
}

.cert-row{
    display:flex;
    gap:18px;
    margin-top:27px;
}

.cert-box{
    text-align:center;
    flex:1;
}

.cert-box i{
    color:var(--green-dark);
    font-size:34px;
    margin-bottom:10px;
}

.cert-box h6{
    font-size:11px;
    font-weight:950;
    line-height:1.25;
}

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

.gallery-img{
    min-height:190px;
    border-radius:14px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    box-shadow:0 12px 28px rgba(0,0,0,.16);
    transition:.35s ease;
}

.gallery-img:first-child{
    grid-column:1/3;
    min-height:195px;
}

.gallery-img:hover{
    transform:scale(1.04);
}

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

.cta-section{
    background:linear-gradient(120deg,#191818,#04290e,#191818);
    color:#fff;
    padding:48px 0;
    position:relative;
    overflow:hidden;
}

.cta-section::before{
    content:"";
    position:absolute;
    left:-90px;
    top:-130px;
    width:370px;
    height:370px;
    background:radial-gradient(circle,rgba(46,204,113,.22),transparent 65%);
}

.cta-section h2{
    font-size:34px;
    font-weight:950;
    margin-bottom:9px;
}

.cta-section p{
    color:#ddd;
    margin:0;
}

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

.footer{
    background:#191818;
    color:#fff;
    padding:55px 0 24px;
}

.footer-logo{
    color:#fff;
    font-size:38px;
    line-height:.85;
    font-weight:900;
    letter-spacing:3px;
    margin-bottom:18px;
}

.footer-logo span{
    color:var(--green);
}

.footer-logo small{
    display:block;
    font-size:10px;
    letter-spacing:1.8px;
    margin-top:8px;
}

.footer p{
    color:#d8d8d8;
    font-size:14px;
    line-height:1.55;
}

.footer h5{
    font-size:16px;
    font-weight:950;
    margin-bottom:20px;
}

.footer ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer ul li{
    color:#d8d8d8;
    font-size:14px;
    margin-bottom:11px;
}

.footer ul li i{
    color:var(--green);
    margin-right:8px;
}

.footer ul li a{
    color:#d8d8d8;
    text-decoration:none;
}

.footer ul li a:hover{
    color:var(--green);
    text-decoration:none;
    transition:color .2s ease;
}

/* Products list in condensed footer (products page) */
.footer-products-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.footer-products-list li a{
    color:#d8d8d8;
    text-decoration:none;
    font-size:14px;
}
.footer-products-list li a:hover{
    color:var(--green);
    text-decoration:none;
    transition:color .2s ease;
}

.social-icons{
    display:flex;
    gap:10px;
    margin-top:20px;
}

.social-icons a{
    width:36px;
    height:36px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s ease;
}

.social-icons a:hover{
    background:var(--green);
    color:#000;
    transform:translateY(-5px);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.13);
    margin-top:34px;
    padding-top:20px;
    text-align:center;
}

.footer-bottom p{
    margin:0;
    font-size:13px;
}

/* Footer alignment fixes for product detail pages */
.footer .row.align-items-start > [class*="col-"]{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.footer .row{
    display:flex;
    flex-wrap:wrap;
    gap:30px;
}
.footer .col-lg-3{
    flex:0 0 25%;
    max-width:25%;
    min-width:25%;
}
.footer h5{ text-align:left; }
.footer ul{ text-align:left; }

    /* Footer Desktop Layout */
    @media (min-width: 992px) {
        .footer .row{
            flex-wrap:nowrap;
            justify-content:space-between;
            align-items:flex-start;
        }
        .footer .col-lg-3{
            flex:0 0 calc(25% - 22.5px);
            max-width: calc(25% - 22.5px);
            min-width: calc(25% - 22.5px);
        }
    }

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

@keyframes heroImageZoom{
    from{
        background-size:100%;
    }
    to{
        background-size:108%;
    }
}


@keyframes floatBattery{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-18px);
    }
}

@keyframes floatSmall{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-9px);
    }
}

@keyframes iconPulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.15);
    }
}

@keyframes bikeMove{
    0%,100%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(-12px);
    }
}

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

@media(max-width:1199px){
    .hero-title{
        font-size:52px;
    }

    .hero-visual{
        width:50%;
    }

    .diagram{
        transform:scale(.88);
        transform-origin:left center;
    }
}

@media(max-width:991px){
    /* Show Mobile Navbar Toggle */
    .mobile-nav-toggle{
        display:flex;
    }

    .mobile-nav-toggle.active{
        position:relative;
        z-index:1001;
    }

    .navbar-menu-desktop{
        display:none;
    }

    .navbar .container{
        max-width:100%;
        padding:0 16px;
        justify-content:space-between;
    }

    .navbar .navbar-brand{
        margin-right:auto;
    }

    /* Navbar Responsive */
    .site-logo{
        max-height:60px;
    }

    .navbar{
        padding:12px 0;
    }

    /* Hero Responsive */
    .hero{
        min-height:auto;
    }

    .hero-visual{
        position:relative;
        width:100%;
        height:460px;
        clip-path:none;
    }

    .hero-visual::before{
        left:0;
    }

    .hero-title{
        font-size:44px;
    }

    .stat-item{
        border-right:0;
        margin-bottom:18px;
    }

    .diagram{
        transform:scale(.75);
        min-height:330px;
    }

    .cert-row{
        flex-direction:column;
    }
}

@media(max-width:767px){
    /* Mobile Navbar */
    .mobile-nav-toggle{
        display:flex;
        width:36px;
        height:36px;
    }

    .mobile-nav-toggle span{
        width:24px;
        height:2px;
    }

    .navbar .container{
        max-width:100%;
        padding:0 12px;
    }

    .navbar .navbar-brand{
        margin-right:auto;
    }

    .mobile-nav-sidebar{
        width:260px;
        left:-260px;
        padding:20px 16px;
    }

    .mobile-nav-logo img{
        max-height:55px;
    }

    .mobile-nav-link{
        padding:14px 10px;
        font-size:14px;
    }

    .mobile-nav-btn{
        padding:12px;
        font-size:12px;
        margin-bottom:24px;
    }

    .mobile-contact-link{
        font-size:12px;
        padding:8px 0;
    }

    /* Hero Section Mobile - Text First, Then Image */
    .hero{
        display:block;
        min-height:auto;
    }

    .hero .container{
        padding:0 20px;
    }

    .hero .row{
        display:flex;
        flex-direction:column;
    }

    .hero-content{
        padding:40px 0;
        order:1;
        max-width:100%;
    }

    .hero-visual{
        position:relative;
        width:100%;
        height:400px;
        clip-path:none;
        order:2;
        margin-top:20px;
    }

    .hero-visual::before{
        display:none;
    }

    /* Navbar */
    .navbar{
        padding:10px 0;
    }

    .site-logo{
        max-height:55px;
    }

    /* Navbar Extra Small */
    .navbar{
        padding:10px 0;
    }

    .site-logo{
        max-height:55px;
    }

    .logo{
        font-size:28px;
    }

    .hero-content{
        padding:55px 0;
    }

    .hero-title{
        font-size:38px;
    }

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

    .hero-features{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:16px;
        margin-bottom:36px;
    }

    .hero-feature{
        min-height:120px;
        padding:18px 14px;
        border-right:0;
        border-bottom:0;
    }

    .hero-feature i{
        font-size:28px;
    }

    .hero-feature h5{
        font-size:11px;
        margin-bottom:4px;
    }

    .hero-feature p{
        font-size:10px;
    }

    .energy-system{
        padding:45px 0;
    }

    .about-big-img{
        height:300px;
    }

    .gallery-img,
    .gallery-img:first-child{
        grid-column:auto;
        min-height:170px;
    }

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

    /* Footer Responsive */
    .footer .container-fluid{
        padding-left:15px;
        padding-right:15px;
    }

    .footer .row{
        gap:30px !important;
    }

    .footer .col-lg-3{
        min-width:100%;
        max-width:100%;
        flex:0 0 100%;
    }

    .footer h5{
        font-size:15px;
        margin-bottom:15px;
    }

    .footer ul li{
        font-size:13px;
        margin-bottom:10px;
    }

    .footer-logo img{
        max-height:50px;
    }

    .social-icons{
        gap:8px;
    }

    .social-icons a{
        width:32px;
        height:32px;
        font-size:14px;
    }
}

@media(max-width:480px){
    /* Mobile Navbar Extra Small */
    .mobile-nav-toggle{
        width:34px;
        height:34px;
    }

    .mobile-nav-toggle span{
        width:22px;
        height:2px;
    }

    .mobile-nav-sidebar{
        width:240px;
        left:-240px;
        padding:16px 12px;
    }

    .mobile-nav-close button{
        font-size:24px;
        width:36px;
        height:36px;
    }

    .mobile-nav-logo img{
        max-height:50px;
    }

    .mobile-nav-link{
        padding:12px 8px;
        font-size:13px;
    }

    .mobile-nav-btn{
        padding:11px;
        font-size:11px;
        margin-bottom:20px;
    }

    .mobile-nav-contact h5{
        font-size:12px;
        margin-bottom:12px;
    }

    .mobile-contact-link{
        font-size:11px;
        padding:6px 0;
        gap:8px;
    }

    /* Navbar Extra Small */
    .navbar{
        padding:8px 0;
    }

    .site-logo{
        max-height:50px;
    }

    .hero-title{
        font-size:32px;
        line-height:1.1;
    }

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

    .hero-desc{
        font-size:14px;
    }

    .hero-feature{
        width:100%;
        border-right:0;
        border-bottom:1px solid #eee;
        padding:10px 5px;
    }

    .battery-one{
        left:18%;
    }

    .battery-two{
        right:5%;
    }

    /* Footer Extra Small */
    .footer {
        padding: 30px 0 20px;
    }

    .footer h5{
        font-size:14px;
        margin-bottom:12px;
    }

    .footer ul li{
        font-size:12px;
        margin-bottom:8px;
    }

    .footer p{
        font-size:12px;
        line-height:1.4;
    }

    .footer-bottom p{
        font-size:11px;
    }

    .social-icons a{
        width:28px;
        height:28px;
        font-size:12px;
    }
}
/* ===========================
   ABOUT PAGE
=========================== */

.about-page-hero{
    position:relative;
    min-height:700px;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:
    linear-gradient(
        90deg,
        rgba(25,24,24,.95) 0%,
        rgba(25,24,24,.85) 30%,
        rgba(25,24,24,.25) 60%,
        rgba(25,24,24,0) 100%
    ),
    url("images/abthero.png");
    background-size:cover;
    background-position:center;
}

.about-page-hero::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:55%;
    height:100%;
    background:transparent;
    clip-path: polygon(0 0, 85% 0, 68% 100%, 0 100%);
    z-index:2;
    display:none;
}

.about-page-hero .hero-content{
    position:relative;
    z-index:4;
    padding-left:48px;
}

.about-page-hero .hero-content h1{
    color:#ffffff;
}

.about-page-hero .hero-content p{
    color:#ffffff;
}

.about-page-hero .hero-visual{
    position:absolute;
    right:0;
    top:0;
    width:48%;
    height:100%;
    z-index:1;
    background-image:url("images/abthero.png");
    background-position:right center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    display:none;
}

.about-mission{
    padding:90px 0;
    background:#fff;
}

.mission-image{
    height:520px;
    border-radius:30px;
    overflow:hidden;
    position:relative;
    background:url('images/abt2.png');
    background-size:cover;
    background-position:center;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.mission-image::after{
    content:'';
    position:absolute;
    inset:-15px;
    border:2px solid #2ECC71;
    border-radius:35px;
    z-index:-1;
}

.about-heading{
    font-size:58px;
    font-weight:900;
    line-height:1.05;
    color:#191818;
    margin-bottom:25px;
}

.about-text{
    font-size:17px;
    line-height:1.8;
    color:#555;
}

.about-icon-box{
    text-align:center;
    padding:25px 15px;
    border-right:1px solid #eee;
}

.about-icon-box:last-child{
    border-right:0;
}

.about-icon-box i{
    font-size:48px;
    color:#2ECC71;
    margin-bottom:20px;
}

.about-icon-box h5{
    font-size:18px;
    font-weight:800;
    margin-bottom:12px;
}

.about-icon-box p{
    font-size:14px;
    line-height:1.6;
    color:#666;
}

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

.about-stats{
    background:#191818;
    padding:45px 0;
}

.about-stat{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    padding:25px;
    border-right:1px solid rgba(255,255,255,.15);
}

.about-stat i{
    color:#2ECC71;
    font-size:42px;
}

.about-stat h3{
    color:#2ECC71;
    font-size:42px;
    font-weight:900;
    margin:0;
}

.about-stat p{
    color:#fff;
    margin:0;
    font-size:15px;
}

/* ===========================
   VALUES
=========================== */

.values-section{
    padding:90px 0;
    background:#fff;
}

.value-card{
    text-align:center;
    padding:25px;
    height:100%;
    transition:.4s;
}

.value-card:hover{
    transform:translateY(-10px);
}

.value-card i{
    color:#2ECC71;
    font-size:52px;
    margin-bottom:20px;
}

.value-card h5{
    font-weight:800;
    margin-bottom:15px;
}

.value-card p{
    color:#666;
    font-size:14px;
    line-height:1.6;
}

/* ===========================
   JOURNEY
=========================== */

.journey-section{
    background:#f7f7f7;
    padding:90px 0;
}

.journey-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    height:100%;
    transition:.4s;
}

.journey-card:hover{
    transform:translateY(-10px);
}

.journey-img{
    height:220px;
    background-size:cover;
    background-position:center;
}

.journey-body{
    padding:25px;
}

.journey-year{
    color:#2ECC71;
    font-weight:800;
    margin-bottom:15px;
}

.journey-year span{
    width:35px;
    height:35px;
    background:#2ECC71;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    margin-right:10px;
}

.journey-body h5{
    font-weight:800;
    margin-bottom:15px;
}

.journey-body p{
    color:#666;
    font-size:14px;
    line-height:1.7;
}

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

@media(max-width:991px){

    .about-heading{
        font-size:42px;
    }

    .mission-image{
        height:400px;
    }

    .about-stat{
        border-right:0;
        justify-content:flex-start;
    }
}

@media(max-width:767px){

    .about-page-hero{
        min-height:auto;
    }

    .about-heading{
        font-size:34px;
    }

    .about-icon-box{
        border-right:0;
        border-bottom:1px solid #eee;
    }

    .mission-image{
        height:320px;
    }

    .journey-img{
        height:180px;
    }

    .about-stat{
        margin-bottom:20px;
    }
}
/* ===================================
   PROJECTS SHOWCASE PAGE
=================================== */

.project-header-light{
    background:#fff;
    box-shadow:0 1px 20px rgba(0,0,0,.06);
}

.project-header-light .nav-link{
    color:#191818 !important;
}

.projects-showcase-hero{
    min-height:700px;
    display:flex;
    align-items:center;
    background:
    linear-gradient(
        90deg,
        rgba(25,24,24,.95) 0%,
        rgba(25,24,24,.85) 22%,
        rgba(25,24,24,.55) 42%,
        rgba(25,24,24,0) 60%
    ),
    url("images/prjctshero.png");
    background-size:cover;
    background-position:center;
}

.projects-showcase-hero .hero-kicker{
    color:#2ECC71;
    font-size:14px;
    font-weight:900;
    margin-bottom:20px;
}

.projects-showcase-hero .hero-title{
    font-size:72px;
    line-height:1.05;
    font-weight:900;
    color:#ffffff;
    margin-bottom:30px;
}

.projects-showcase-hero .hero-title span{
    color:#2ECC71;
}

.projects-showcase-hero .hero-desc{
    max-width:430px;
    line-height:2;
    color:#ffffff;
    font-size:17px;
}

.projects-showcase-hero .hero-desc::before{
    content:"";
    display:block;
    width:40px;
    height:3px;
    background:#2ECC71;
    margin-bottom:25px;
}

/* ===================================
PROJECT CATEGORY
=================================== */

.project-category-section{
    padding:90px 0;
    background:#fff;
}

.project-category-section.light-bg{
    background:#fafafa;
}

.project-category-text span{
    color:#2ECC71;
    font-size:14px;
    font-weight:900;
    display:block;
    margin-bottom:20px;
}

.project-category-text h2{
    font-size:52px;
    line-height:1.1;
    font-weight:900;
    color:#191818;
    margin-bottom:30px;
}

.project-category-text p{
    color:#444;
    font-size:17px;
    line-height:2;
    margin-bottom:35px;
}

.project-outline-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    border:2px solid #dcdcdc;
    color:#191818;
    padding:16px 25px;
    border-radius:6px;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    transition:.3s;
}

.project-outline-btn:hover{
    border-color:#2ECC71;
    color:#2ECC71;
}

/* ===================================
MASONRY
=================================== */

.project-masonry{
    display:grid;
    gap:12px;
}

.commercial-layout{
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:220px 220px;
}

.residential-layout{
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:220px 220px;
}

.industrial-layout{
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:220px 220px;
}

.utility-layout{
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:220px 220px;
}

.project-tile{
    border-radius:10px;
    overflow:hidden;
    position:relative;
    background-size:cover;
    background-position:center;
    transition:.4s;
}

.project-tile:hover{
    transform:translateY(-6px);
}

.project-tile::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.05)
    );
}

.project-tile.big{
    grid-row:span 2;
}

.project-tile.tall{
    grid-row:span 2;
}

.project-tile.wide{
    grid-column:span 2;
}

.tile-label{
    position:absolute;
    left:20px;
    bottom:20px;
    z-index:2;
}

.tile-label h5{
    color:#fff;
    font-size:22px;
    font-weight:800;
    margin-bottom:4px;
}

.tile-label p{
    color:#fff;
    font-size:14px;
    margin:0;
}

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

.projects-bottom-stats{
    padding:20px 0 80px;
    background:#fff;
}

.projects-bottom-stats-box{
    background:#050505;
    border-radius:10px;
    padding:35px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.bottom-stat{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    border-right:1px solid rgba(255,255,255,.15);
}

.bottom-stat:last-child{
    border-right:none;
}

.bottom-stat i{
    font-size:42px;
    color:#2ECC71;
}

.bottom-stat h3{
    color:#fff;
    font-size:42px;
    font-weight:900;
    margin:0;
}

.bottom-stat p{
    color:#d7d7d7;
    margin:0;
}

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

.project-showcase-cta{
    padding-bottom:80px;
    background:#fff;
}

.project-showcase-cta-box{
    background:
    radial-gradient(circle at right,#2ECC7120,transparent 40%),
    #050505;
    border-radius:12px;
    padding:50px 60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.project-showcase-cta-box h2{
    color:#fff;
    font-size:46px;
    font-weight:900;
    margin-bottom:10px;
}

.project-showcase-cta-box p{
    color:#d7d7d7;
    margin:0;
}

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

@media(max-width:1200px){

    .projects-showcase-hero .hero-title{
        font-size:58px;
    }

    .project-category-text h2{
        font-size:42px;
    }
}

@media(max-width:991px){

    .projects-showcase-hero{
        min-height:auto;
        padding:120px 0 80px;
    }

    .projects-showcase-hero .hero-title{
        font-size:48px;
    }

    .project-masonry,
    .commercial-layout,
    .residential-layout,
    .industrial-layout,
    .utility-layout{
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto;
    }

    .project-tile.big,
    .project-tile.tall,
    .project-tile.wide{
        grid-column:auto;
        grid-row:auto;
        min-height:280px;
    }

    .projects-bottom-stats-box{
        grid-template-columns:1fr 1fr;
        gap:25px;
    }

    .bottom-stat{
        border:none;
        justify-content:flex-start;
    }

    .project-showcase-cta-box{
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
    }
}

@media(max-width:767px){

    .projects-showcase-hero .hero-title{
        font-size:42px;
    }

    .project-category-text h2{
        font-size:34px;
    }

    .project-masonry,
    .commercial-layout,
    .residential-layout,
    .industrial-layout,
    .utility-layout{
        grid-template-columns:1fr;
    }

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

    .project-showcase-cta-box{
        padding:35px 25px;
    }

    .project-showcase-cta-box h2{
        font-size:34px;
    }
}
/* ==========================================
   CONTACT PAGE
========================================== */

.contact-hero{
    min-height:650px;
    display:flex;
    align-items:center;
    background:
    linear-gradient(
        90deg,
        rgba(25,24,24,.95) 0%,
        rgba(25,24,24,.85) 30%,
        rgba(25,24,24,.25) 60%,
        rgba(25,24,24,0) 100%
    ),
    url("images/cntacthe.png");
    background-size:cover;
    background-position:center;
}

.contact-hero-title{
    font-size:72px;
    font-weight:900;
    line-height:1.05;
    color:#fff;
    margin-bottom:25px;
}

.contact-hero-title span{
    color:#2ECC71;
}

.contact-hero-text{
    color:#fff;
    font-size:17px;
    line-height:1.9;
    max-width:600px;
    margin-bottom:35px;
}

.contact-hero-features{
    display:flex;
    gap:40px;
    flex-wrap:wrap;
}

.contact-hero-features div{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-weight:700;
}

.contact-hero-features i{
    color:#2ECC71;
    font-size:22px;
}

/* ==========================================
   MAIN SECTION
========================================== */

.contact-main-section{
    padding:90px 0;
    background:#fff;
}

.contact-card{
    background:#fff;
    border-radius:12px;
    padding:40px;
    border:1px solid #ececec;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    height:100%;
}

.contact-card h2{
    font-size:32px;
    font-weight:900;
    color:#191818;
}

.green-line{
    width:60px;
    height:4px;
    background:#2ECC71;
    margin:15px 0 25px;
}

.contact-card input,
.contact-card select,
.contact-card textarea{
    width:100%;
    border:1px solid #ddd;
    border-radius:8px;
    padding:15px 18px;
    font-size:15px;
    outline:none;
    transition:.3s;
}

.contact-card textarea{
    height:180px;
    resize:none;
}

.contact-card input:focus,
.contact-card select:focus,
.contact-card textarea:focus{
    border-color:#2ECC71;
    box-shadow:0 0 0 4px rgba(46,204,113,.1);
}

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

.contact-info-item{
    display:flex;
    gap:20px;
    padding:22px 0;
    border-bottom:1px solid #eee;
}

.contact-info-item:last-child{
    border:none;
}

.contact-info-item i{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#2ECC71;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;
}

.contact-info-item h5{
    font-size:18px;
    font-weight:800;
    color:#191818;
    margin-bottom:5px;
}

.contact-info-item p{
    margin:0;
    color:#666;
    line-height:1.7;
}

/* ==========================================
   FEATURE STRIP
========================================== */

.contact-feature-strip{
    padding-bottom:80px;
    background:#fff;
}

.contact-feature-box{
    background:#191818;
    border-radius:12px;
    overflow:hidden;
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.contact-feature-item{
    padding:35px 25px;
    display:flex;
    align-items:center;
    gap:20px;
    border-right:1px solid rgba(255,255,255,.08);
}

.contact-feature-item:last-child{
    border:none;
}

.contact-feature-item i{
    font-size:42px;
    color:#2ECC71;
}

.contact-feature-item h5{
    color:#fff;
    font-size:18px;
    font-weight:800;
    margin-bottom:5px;
}

.contact-feature-item p{
    color:#bdbdbd;
    margin:0;
}

/* ==========================================
   FAQ
========================================== */

.contact-faq-map{
    padding-bottom:100px;
    background:#fff;
}

.faq-list{
    border:1px solid #e5e5e5;
    border-radius:8px;
    overflow:hidden;
}

.faq-item{
    border-bottom:1px solid #e5e5e5;
}

.faq-item:last-child{
    border-bottom:none;
}

.faq-question{
    width:100%;
    background:#fff;
    border:none;
    padding:20px;
    text-align:left;
    font-size:16px;
    font-weight:700;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.faq-question i{
    transition:.3s;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    background:#fafafa;
}

.faq-answer p{
    padding:0 20px 20px;
    margin:0;
    line-height:1.8;
    color:#666;
}

.faq-item.active .faq-answer{
    max-height:250px;
}

.faq-item.active .faq-question{
    color:#2ECC71;
}

.faq-item.active .faq-question i{
    transform:rotate(180deg);
}

/* ==========================================
   MAP
========================================== */

.map-box{
    height:500px;
    border-radius:12px;
    overflow:hidden;
    position:relative;
    box-shadow:0 4px 15px rgba(0,0,0,.1);
}

.map-box iframe{
    display:block;
    width:100%;
    height:100%;
}

.map-box h3{
    position:absolute;
    bottom:15px;
    left:15px;
    background:rgba(255,255,255,.95);
    padding:8px 15px;
    border-radius:6px;
    margin:0;
    font-size:16px;
    font-weight:600;
    color:#191818;
    z-index:1;
}

.map-pin{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:none;
}

.map-pin i{
    color:#2ECC71;
    font-size:70px;
    filter:drop-shadow(0 10px 20px rgba(0,0,0,.2));
}

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

@media(max-width:991px){

    .contact-hero{
        min-height:auto;
        padding:120px 0 80px;
    }

    .contact-hero-title{
        font-size:52px;
    }

    .contact-feature-box{
        grid-template-columns:1fr 1fr;
    }

    .contact-feature-item{
        border-bottom:1px solid rgba(255,255,255,.08);
    }
}

@media(max-width:767px){

    .contact-hero-title{
        font-size:42px;
    }

    .contact-card{
        padding:25px;
    }

    .contact-feature-box{
        grid-template-columns:1fr;
    }

    .contact-feature-item{
        border-right:none;
    }

    .map-box{
        height:320px;
    }

    .contact-hero-features{
        gap:20px;
    }
}
/* ===================================
   PRODUCTS PAGE
=================================== */

.products-page-hero{
    min-height:700px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            90deg,
            rgba(25,24,24,.92) 0%,
            rgba(25,24,24,.78) 32%,
            rgba(25,24,24,.22) 58%,
            rgba(25,24,24,.05) 100%
        ),
        url("images/products%20page.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.products-page-hero .hero-kicker{
    color:#2ECC71;
    font-size:14px;
    font-weight:950;
    margin-bottom:18px;
}

.products-hero-title{
    color:#fff;
    font-size:58px;
    line-height:1.1;
    font-weight:950;
    margin-bottom:22px;
}

.hero-line{
    width:55px;
    height:3px;
    background:#2ECC71;
    margin-bottom:28px;
}

.products-hero-text{
    color:#fff;
    font-size:17px;
    line-height:1.8;
    max-width:470px;
}

/* PRODUCT RANGE */

.product-range-section{
    background:#fff;
    padding:70px 0 35px;
}

.product-section-title{
    font-size:38px;
    font-weight:950;
    color:#191818;
    margin:0;
}

.product-intro-text{
    color:#191818;
    font-size:15px;
    line-height:1.8;
    max-width:620px;
}

.product-page-card{
    background:#fff;
    border:1px solid #e1e1e1;
    border-radius:8px;
    overflow:hidden;
    height:100%;
    transition:.35s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.product-page-card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 45px rgba(0,0,0,.13);
}

.product-page-img{
    height:285px;
    background:linear-gradient(180deg,#fafafa,#fff);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    border-bottom:1px solid #f0f0f0;
}

.product-page-img img{
    max-height:235px;
    width:auto;
    object-fit:contain;
    transition:.45s ease;
}

.product-page-card:hover .product-page-img img{
    transform:scale(1.06);
}

.product-page-body{
    padding:24px 22px 22px;
}

.product-page-body h3{
    font-size:23px;
    font-weight:950;
    color:#191818;
    margin-bottom:8px;
}

.product-page-body h6{
    color:#2ECC71;
    font-size:14px;
    font-weight:900;
    margin-bottom:16px;
}

.product-page-body p{
    color:#333;
    font-size:15px;
    line-height:1.65;
    min-height:50px;
    margin-bottom:24px;
}

.product-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:22px;
}

.product-features div{
    display:flex;
    align-items:center;
    gap:8px;
}

.product-features i{
    color:#191818;
    font-size:22px;
}

.product-features span{
    color:#191818;
    font-size:11px;
    line-height:1.25;
    font-weight:800;
}

.product-details-btn{
    width:100%;
    height:48px;
    border:1px solid #cfcfcf;
    border-radius:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:#191818;
    font-size:14px;
    font-weight:950;
    transition:.35s ease;
}

.product-details-btn i{
    color:#2ECC71;
    transition:.35s ease;
}

.product-details-btn:hover{
    background:#2ECC71;
    color:#fff;
    border-color:#2ECC71;
}

.product-details-btn:hover i{
    color:#fff;
    transform:translateX(5px);
}

/* WHY PRODUCTS */

.product-why-section{
    background:#fff;
    padding:30px 0 55px;
}

.product-why-section .section-title h2{
    font-size:36px;
    font-weight:950;
    color:#191818;
}

.product-why-item{
    text-align:center;
    padding:25px 20px;
    border-right:1px solid #ddd;
    height:100%;
}

.product-why-item:last-child{
    border-right:0;
}

.product-why-item i{
    color:#2ECC71;
    font-size:38px;
    margin-bottom:18px;
}

.product-why-item h5{
    color:#191818;
    font-size:14px;
    font-weight:950;
    margin-bottom:12px;
}

.product-why-item p{
    color:#555;
    font-size:13px;
    line-height:1.55;
    margin:0;
}

/* CTA */

.product-cta-section{
    background:#fff;
    padding:0 0 55px;
}

.product-cta-box{
    background:
        radial-gradient(circle at right bottom,rgba(46,204,113,.18),transparent 35%),
        #191818;
    border-radius:12px;
    padding:38px 55px;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    box-shadow:0 18px 45px rgba(0,0,0,.16);
}

.product-cta-left{
    display:flex;
    align-items:center;
    gap:30px;
}

.product-cta-icon{
    width:75px;
    height:75px;
    border-radius:50%;
    border:1px solid rgba(46,204,113,.7);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#2ECC71;
    font-size:34px;
    flex-shrink:0;
}

.product-cta-box h2{
    font-size:28px;
    font-weight:950;
    margin-bottom:8px;
}

.product-cta-box p{
    margin:0;
    color:#e5e5e5;
    font-size:15px;
}

/* RESPONSIVE */

@media(max-width:991px){

    .products-page-hero{
        min-height:auto;
        padding:90px 0;
    }

    .products-hero-title{
        font-size:45px;
    }

    .product-page-img{
        height:250px;
    }

    .product-why-item{
        border-right:0;
        border-bottom:1px solid #eee;
    }

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

@media(max-width:767px){

    .products-hero-title{
        font-size:38px;
    }

    .product-section-title{
        font-size:32px;
    }

    .product-features{
        grid-template-columns:1fr;
    }

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

    .product-cta-box{
        padding:32px 24px;
    }

    .product-page-body h3{
        font-size:21px;
    }
}
/* ===================================
   PRODUCT DETAIL PAGE
=================================== */

.product-detail-header{
    background:#fff;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
}

.product-detail-header .nav-link{
    color:#191818 !important;
}

.product-detail-logo{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.logo-mark{
    font-size:42px;
    font-weight:900;
    color:#191818;
    line-height:1;
}

.product-detail-logo small{
    font-size:11px;
    letter-spacing:2px;
}

.detail-header-icons{
    display:flex;
    align-items:center;
    gap:20px;
}

.detail-header-icons a{
    color:#191818;
    text-decoration:none;
}

.detail-header-btn{
    margin-left:10px;
}

/* HERO */

.product-detail-hero{
    padding:80px 0;
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.82) 35%,
        rgba(0,0,0,.24) 55%,
        rgba(0,0,0,.75) 100%
    ),
    url("images/all-in-one hero.png");
    background-size:cover;
    background-position:center;
    color:#fff;
}

.breadcrumb-line{
    margin-bottom:25px;
    font-size:14px;
}

.breadcrumb-line a{
    color:#f4f4f4;
    text-decoration:none;
}

.breadcrumb-line span{
    margin:0 10px;
    color:#ccc;
}

.product-detail-hero h1{
    font-size:62px;
    font-weight:950;
    line-height:1.05;
    color:#ffffff;
    margin-bottom:10px;
}

.product-detail-hero h1 span{
    color:#2ECC71;
}

.product-detail-hero h1 small{
    font-size:28px;
    color:#dcdcdc;
    display:inline-block;
    margin-left:15px;
}

.product-detail-hero h5{
    font-size:24px;
    font-weight:800;
    color:#f0f0f0;
    margin-bottom:25px;
}

.product-detail-hero p{
    font-size:16px;
    line-height:1.8;
    color:#e5e5e5;
    max-width:580px;
}

.detail-feature-grid div{
    display:flex;
    align-items:center;
    gap:12px;
}

.detail-feature-grid i{
    color:#2ECC71;
    font-size:28px;
}

.detail-feature-grid span{
    font-size:14px;
    font-weight:700;
    color:#fff;
}

.detail-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin:35px 0;
}

.detail-feature-grid div{
    display:flex;
    align-items:center;
    gap:12px;
}

.detail-feature-grid i{
    color:#2ECC71;
    font-size:28px;
}

.detail-feature-grid span{
    font-size:14px;
    font-weight:700;
    color:#ffffff;
}

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

.btn-light-outline{
    border:2px solid #d8d8d8;
    padding:14px 25px;
    border-radius:8px;
    text-decoration:none;
    color:#191818;
    font-weight:800;
}

.detail-product-image{
    text-align:center;
}

.detail-product-image img{
    max-width:100%;
    max-height:600px;
}

/* MODEL SECTION */

.model-selector-section{
    padding:70px 0;
    background:#fff;
}

.model-slider-wrap{
    display:flex;
    align-items:center;
    gap:20px;
}

.model-arrow{
    width:50px;
    height:50px;
    border-radius:50%;
    border:1px solid #ddd;
    background:#fff;
}

.model-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    flex:1;
}

.model-card{
    border:1px solid #e5e5e5;
    border-radius:10px;
    padding:25px;
    text-align:center;
    transition:.3s;
}

.model-card.active,
.model-card:hover{
    border-color:#2ECC71;
    box-shadow:0 10px 30px rgba(46,204,113,.15);
}

.model-card h4{
    font-weight:900;
    color:#191818;
}

.model-card p{
    color:#2ECC71;
    font-weight:700;
    font-size:13px;
}

.model-card img{
    height:90px;
    margin-top:15px;
}

/* TECH TABLE */

.technical-section{
    padding:70px 0;
    background:#fff;
}

.spec-table-wrap{
    overflow-x:auto;
}

.spec-table{
    width:100%;
    border-collapse:collapse;
}

.spec-table th,
.spec-table td{
    border:1px solid #e5e5e5;
    padding:12px;
    text-align:center;
}

.spec-table th{
    background:#f8f8f8;
    font-weight:900;
}

.spec-table .highlight{
    background:#eafaf0;
    color:#2ECC71;
    font-weight:900;
}

/* POWER SECTION */

.detail-power-section{
    padding:70px 0;
}

.power-image-box{
    position:relative;
    overflow:hidden;
    border-radius:10px;
    min-height:740px;
    background:url("images/power-home.png");
    background-size:cover;
    padding:40px;
    color:#fff;
}

.power-image-box h2{
    font-size:48px;
    font-weight:900;
}

.power-image-box img{
    position:absolute;
    right:30px;
    bottom:20px;
    height:220px;
}

.power-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.power-feature{
    border:1px solid #ececec;
    border-radius:8px;
    padding:20px;
    text-align:center;
}

.power-feature i{
    color:#2ECC71;
    font-size:30px;
    margin-bottom:12px;
}

.power-feature h5{
    font-size:15px;
    font-weight:900;
}

.power-feature p{
    font-size:13px;
    color:#555;
}

/* APPLICATIONS */

.detail-applications-section{
    padding:70px 0;
}

.applications-row{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:15px;
}

.application-card{
    text-align:center;
}

.application-card img{
    width:100%;
    height:120px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:10px;
}

.application-card span{
    font-size:13px;
    font-weight:800;
}

/* STATS */

.detail-stats-strip{
    padding:0 0 70px;
}

.detail-stats-box{
    background:#191818;
    border-radius:10px;
    padding:35px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.detail-stat{
    text-align:center;
}

.detail-stat i{
    color:#2ECC71;
    font-size:35px;
}

.detail-stat h3{
    color:#fff;
    font-size:36px;
    font-weight:900;
}

.detail-stat p{
    color:#d6d6d6;
}

/* DOWNLOADS */

.detail-downloads-section{
    padding:0 0 70px;
}

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

.download-card{
    border:1px solid #e5e5e5;
    border-radius:8px;
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    color:#191818;
}

.download-card:hover{
    border-color:#2ECC71;
}

.download-card i:first-child{
    color:#2ECC71;
    font-size:28px;
}

/* CTA */

.detail-final-cta{
    padding:0 0 80px;
}

.detail-final-cta-box{
    background:
    linear-gradient(rgba(46,204,113,.9),rgba(46,204,113,.9)),
    url("images/cta-bg.jpg");
    background-size:cover;
    border-radius:10px;
    padding:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.detail-final-cta-box h2{
    color:#fff;
    font-size:42px;
    font-weight:900;
}

.detail-final-cta-box p{
    color:#fff;
}

.white-btn{
    background:#fff !important;
    color:#191818 !important;
}

/* RESPONSIVE */

@media(max-width:991px){

    .product-detail-hero h1{
        font-size:48px;
    }

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

    .applications-row{
        grid-template-columns:repeat(3,1fr);
    }

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

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

    .detail-stats-box{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }
}

@media(max-width:767px){

    .product-detail-hero{
        padding:60px 0;
    }

    .product-detail-hero h1{
        font-size:38px;
    }

    .product-detail-hero h1 small{
        display:block;
        margin-left:0;
        margin-top:10px;
    }

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

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

    .applications-row{
        grid-template-columns:1fr 1fr;
    }

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

    .power-feature-grid{
        grid-template-columns:1fr;
    }

    .detail-final-cta-box{
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
    }

    .detail-stats-box{
        grid-template-columns:1fr;
    }
}
/* ===================================
   BESS PRODUCT DETAIL PAGE
=================================== */

.bess-hero{
    padding:80px 0 70px;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.85) 32%,
            rgba(0,0,0,.4) 55%,
            rgba(0,0,0,.8) 70%
        ),
        url("images/bess-hero.png");
}

.bess-hero h1{
    font-size:62px;
    line-height:1.05;
    font-weight:950;
    color:#ffffff;
    margin-bottom:18px;
}

.bess-hero h1 span{
    color:#2ECC71;
}

.bess-hero h5{
    font-size:20px;
    font-weight:900;
    color:#f3f3f3;
    margin-bottom:18px;
}

.bess-hero p{
    max-width:520px;
    color:#ddd;
    font-size:15px;
    line-height:1.85;
    margin-bottom:30px;
}

.bess-feature-icons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:30px;
}

.bess-feature-icons div{
    display:flex;
    align-items:center;
    gap:10px;
}

.bess-feature-icons i{
    color:#2ECC71;
    font-size:26px;
}

.bess-feature-icons span{
    font-size:12px;
    font-weight:850;
    color:#fff;
    line-height:1.3;
}

.bess-hero-image{
    text-align:right;
}

.bess-hero-image img{
    max-width:100%;
    max-height:520px;
    object-fit:contain;
}

/* TOP STATS */

.bess-top-stats{
    background:#fff;
    padding:0 0 65px;
    margin-top:-35px;
    position:relative;
    z-index:5;
}

.bess-stats-box{
    background:#111;
    color:#fff;
    border-radius:10px;
    padding:32px 34px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.bess-stat{
    display:flex;
    align-items:center;
    gap:18px;
    padding:0 26px;
    border-right:1px solid rgba(255,255,255,.18);
}

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

.bess-stat i{
    color:#2ECC71;
    font-size:34px;
}

.bess-stat h3{
    color:#fff;
    font-size:25px;
    font-weight:950;
    margin:0 0 4px;
}

.bess-stat p{
    color:#fff;
    font-size:13px;
    margin:0;
}

/* OVERVIEW */

.bess-overview{
    background:#fff;
    padding:25px 0 80px;
}

.section-label,
.section-title-left span{
    color:#2ECC71;
    font-size:13px;
    font-weight:950;
    display:block;
    margin-bottom:15px;
}

.bess-overview h2,
.section-title-left h2{
    font-size:36px;
    line-height:1.15;
    font-weight:950;
    color:#191818;
    margin-bottom:24px;
}

.bess-overview p{
    color:#444;
    font-size:15px;
    line-height:1.8;
    margin-bottom:25px;
}

.overview-list{
    list-style:none;
    padding:0;
    margin:0;
}

.overview-list li{
    position:relative;
    padding-left:28px;
    margin-bottom:12px;
    color:#333;
    font-size:14px;
    font-weight:650;
}

.overview-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    width:18px;
    height:18px;
    background:#2ECC71;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
}

.overview-diagram{
    background:#f8f8f8;
    border-radius:12px;
    min-height:400px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:35px;
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.overview-diagram img{
    max-width:100%;
    max-height:360px;
    object-fit:contain;
}

/* SPECS */

.bess-specs{
    background:#f4f8fa;
    padding:75px 0;
}

.bess-table{
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.05);
}

.bess-table th{
    background:#2ECC71 !important;
    color:#fff;
    font-size:14px;
    text-align:center;
    padding:15px;
    border:1px solid #e3e3e3;
}

.bess-table th:first-child{
    background:#fff !important;
    color:#191818;
}

.bess-table td{
    text-align:center;
    padding:13px;
    color:#333;
    border:1px solid #e5e5e5;
    font-size:14px;
}

.bess-table td:first-child{
    text-align:left;
    font-weight:800;
    color:#191818;
    background:#fbfbfb;
}

/* APPLICATIONS */

.bess-applications{
    background:#fff;
    padding:75px 0 85px;
}

.application-card-v2{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.07);
    text-align:center;
    height:100%;
    transition:.35s ease;
}

.application-card-v2:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(0,0,0,.13);
}

.application-card-v2 img{
    width:100%;
    height:155px;
    object-fit:cover;
}

.application-card-v2 h5{
    font-size:15px;
    font-weight:900;
    color:#191818;
    padding:22px 16px;
    margin:0;
    line-height:1.4;
}

/* WHY BESS */

.why-bess-section{
    background:#111;
    padding:70px 0 45px;
    color:#fff;
    position:relative;
    overflow:hidden;
}

.why-bess-section::after{
    content:"";
    position:absolute;
    right:-120px;
    bottom:-140px;
    width:500px;
    height:350px;
    background:radial-gradient(circle,rgba(46,204,113,.22),transparent 65%);
}

.why-bess-box{
    position:relative;
    z-index:2;
}

.why-bess-box span{
    color:#2ECC71;
    font-size:13px;
    font-weight:950;
    display:block;
    margin-bottom:16px;
}

.why-bess-box h2{
    font-size:38px;
    line-height:1.15;
    font-weight:950;
    color:#fff;
}

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

.why-bess-grid div{
    position:relative;
    padding-left:42px;
    color:#fff;
    font-size:15px;
    font-weight:850;
}

.why-bess-grid div::before{
    content:"";
    position:absolute;
    left:0;
    top:-4px;
    width:28px;
    height:28px;
    border:2px solid #2ECC71;
    border-radius:7px;
}

.why-bess-grid div::after{
    content:"✓";
    position:absolute;
    left:8px;
    top:0;
    color:#2ECC71;
    font-weight:900;
}

/* CTA */

.bess-cta{
    background:#111;
    padding:0 0 65px;
}

.bess-cta-box{
    background:
        linear-gradient(90deg,rgba(46,204,113,.92),rgba(46,204,113,.75)),
        url("images/bess-cta.jpg");
    background-size:cover;
    background-position:center;
    border-radius:12px;
    padding:45px 55px;
    display:grid;
    grid-template-columns:1.2fr 1fr auto;
    align-items:center;
    gap:35px;
    color:#fff;
    position:relative;
    z-index:3;
}

.bess-cta-box h2{
    font-size:34px;
    font-weight:950;
    margin:0;
    color:#fff;
}

.bess-cta-box p{
    color:#fff;
    font-size:15px;
    margin:0;
}

.bess-cta-box .btn-main{
    background:#fff;
    color:#191818;
    box-shadow:none;
}

/* RESPONSIVE */

@media(max-width:991px){

    .bess-hero{
        padding:70px 0;
    }

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

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

    .bess-stats-box{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .bess-stat{
        border-right:0;
        padding:0;
    }

    .why-bess-grid{
        grid-template-columns:repeat(2,1fr);
        margin-top:35px;
    }

    .bess-cta-box{
        grid-template-columns:1fr;
    }
}

@media(max-width:767px){

    .bess-hero h1{
        font-size:38px;
    }

    .bess-feature-icons{
        grid-template-columns:1fr;
    }

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

    .bess-overview h2,
    .section-title-left h2{
        font-size:30px;
    }

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

    .bess-cta-box{
        padding:35px 25px;
    }

    .bess-cta-box h2{
        font-size:28px;
    }
}
/* ===================================
   CORE BATTERIES INNER PAGE
=================================== */

.core-header{
    background:#050505;
    position:sticky;
    top:0;
    z-index:999;
    box-shadow:0 8px 30px rgba(0,0,0,.35);
}

.core-header .navbar{
    padding:14px 0;
}

.core-logo{
    color:#fff;
    text-align:center;
    line-height:1;
}

.core-logo div{
    font-family:Georgia,serif;
    font-size:42px;
    font-weight:500;
}

.core-logo small{
    display:block;
    font-size:11px;
    letter-spacing:2px;
    margin-top:2px;
}

.core-header .nav-link{
    color:#fff !important;
    font-size:14px;
    font-weight:800;
    margin:0 14px;
    position:relative;
    padding:10px 0;
}

.core-header .nav-link.active,
.core-header .nav-link:hover{
    color:#2ECC71 !important;
}

.core-header .nav-link.active::after,
.core-header .nav-link:hover::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-3px;
    width:100%;
    height:3px;
    background:#2ECC71;
}

.core-header-actions{
    display:flex;
    align-items:center;
    gap:20px;
}

.core-header-actions a{
    color:#fff;
    font-size:18px;
}

.core-quote-btn{
    background:#2ECC71;
    color:#fff !important;
    padding:13px 24px;
    border-radius:5px;
    font-size:13px !important;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    gap:10px;
}

/* HERO */

.core-hero{
    min-height:560px;
    display:flex;
    align-items:center;
    background:
        linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.76) 36%,rgba(0,0,0,.2) 63%,rgba(0,0,0,.65) 100%),
        url("images/core-batteries-hero.png");
    background-size:cover;
    background-position:center;
    color:#fff;
    overflow:hidden;
}

.core-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    margin-bottom:35px;
}
.core-breadcrumb a,
.core-breadcrumb span,
.core-breadcrumb strong{
    color:#fff;
}

.core-hero h1{
    font-size:66px;
    line-height:.98;
    font-weight:950;
    margin-bottom:18px;
}

.core-hero h1 span{
    color:#2ECC71;
}

.core-hero h5{
    font-size:20px;
    font-weight:900;
    margin-bottom:8px;
}

.core-hero p{
    color:#fff;
    font-size:16px;
    line-height:1.6;
    margin-bottom:25px;
}

.core-hero-features{
    display:flex;
    gap:35px;
    margin:25px 0 30px;
}

.core-hero-features div{
    display:flex;
    align-items:center;
    gap:12px;
}

.core-hero-features i{
    color:#fff;
    font-size:26px;
}

.core-hero-features span{
    color:#fff;
    font-size:12px;
    font-weight:850;
    line-height:1.25;
}

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

.core-green-btn{
    background:#2ECC71;
    color:#fff;
    padding:15px 28px;
    border-radius:5px;
    font-weight:900;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:.35s ease;
}

.core-green-btn:hover{
    color:#fff;
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(46,204,113,.35);
}

.core-outline-btn{
    color:#191818;
    border:1px solid #cfcfcf;
    padding:15px 28px;
    border-radius:5px;
    font-weight:900;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:.35s ease;
}

.core-outline-btn.dark{
    color:#fff;
    border-color:rgba(255,255,255,.65);
}

.core-outline-btn:hover{
    border-color:#2ECC71;
    color:#2ECC71;
}

.core-hero-product{
    text-align:center;
}

.core-hero-product img{
    max-height:445px;
    width:auto;
    max-width:100%;
    filter:drop-shadow(0 25px 35px rgba(0,0,0,.35));
}

/* SECTION TITLE */

.core-section-title{
    text-align:center;
    margin-bottom:35px;
}

.core-section-title h2{
    font-size:24px;
    font-weight:950;
    color:#191818;
    margin-bottom:8px;
}

.core-section-title span{
    width:42px;
    height:3px;
    background:#2ECC71;
    display:block;
    margin:auto;
}

/* CAPACITY */

.capacity-section{
    background:#fff;
    padding:38px 0 45px;
}

.capacity-tabs{
    max-width:930px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.capacity-card{
    background:#fff;
    border:1px solid #e4e4e4;
    border-radius:10px;
    padding:25px 20px 22px;
    text-align:center;
    cursor:pointer;
    transition:.35s ease;
}

.capacity-card.active,
.capacity-card:hover{
    border-color:#2ECC71;
    box-shadow:0 15px 35px rgba(46,204,113,.12);
}

.capacity-card h3{
    color:#191818;
    font-size:31px;
    font-weight:950;
    margin-bottom:4px;
}

.capacity-card.active h3{
    color:#2ECC71;
}

.capacity-card h5{
    color:#191818;
    font-size:13px;
    font-weight:900;
    margin-bottom:13px;
}

.capacity-card img{
    height:112px;
    object-fit:contain;
    margin-bottom:18px;
}

.capacity-specs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.capacity-specs strong{
    display:block;
    font-size:11px;
    color:#191818;
}

.capacity-specs small{
    display:block;
    font-size:9px;
    color:#555;
}

/* PERFORMANCE */

.core-performance-section{
    background:#fff;
    padding:25px 0 45px;
}

.core-showcase-img{
    background:#f3f3f3;
    border-radius:10px;
    min-height:410px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.core-showcase-img img{
    max-width:100%;
    max-height:390px;
    object-fit:contain;
}

.core-small-title{
    color:#2ECC71;
    font-size:13px;
    font-weight:950;
    display:block;
    margin-bottom:10px;
}

.core-performance-section h2{
    font-size:36px;
    line-height:1.12;
    font-weight:950;
    color:#191818;
    margin-bottom:17px;
}

.core-performance-section p{
    color:#333;
    font-size:15px;
    line-height:1.65;
}

.core-feature-boxes{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:24px;
}

.core-feature-boxes div{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:8px;
    padding:18px 12px;
    text-align:center;
    box-shadow:0 8px 24px rgba(0,0,0,.05);
}

.core-feature-boxes i{
    color:#2ECC71;
    font-size:27px;
    margin-bottom:9px;
}

.core-feature-boxes h5{
    color:#191818;
    font-size:14px;
    font-weight:950;
    margin:0 0 4px;
}

.core-feature-boxes p{
    color:#555;
    font-size:12px;
    line-height:1.2;
    margin:0;
}

/* TECH SPECS */

.core-spec-section{
    background:#fff;
    padding:35px 0 45px;
}

.spec-tabs{
    max-width:430px;
    margin:0 auto 20px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.spec-tab-btn{
    border:1px solid #e2e2e2;
    background:#fff;
    height:32px;
    font-size:12px;
    font-weight:850;
    color:#191818;
    border-radius:3px;
    transition:.3s;
}

.spec-tab-btn.active,
.spec-tab-btn:hover{
    background:#2ECC71;
    color:#fff;
    border-color:#2ECC71;
}

.spec-content{
    display:none;
}

.spec-content.active{
    display:block;
    animation:coreFade .35s ease;
}

.core-spec-grid{
    max-width:1010px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}

.core-spec-grid table{
    width:100%;
    border-collapse:collapse;
}

.core-spec-grid th,
.core-spec-grid td{
    border:1px solid #e4e4e4;
    padding:9px 14px;
    font-size:12px;
}

.core-spec-grid th{
    font-weight:950;
    color:#191818;
    background:#fff;
}

.core-spec-grid td{
    color:#333;
}

.spec-image-box{
    max-width:1060px;
    margin:auto;
    text-align:center;
    background:#f4f4f4;
}

.spec-image-box img{
    width:100%;
    display:block;
}

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

/* APPLICATIONS */

.core-app-section{
    background:#fff;
    padding:20px 0 55px;
}

.core-app-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.core-app-card{
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 10px 28px rgba(0,0,0,.08);
    text-align:center;
    padding-bottom:20px;
    position:relative;
}

.core-app-card img{
    width:100%;
    height:135px;
    object-fit:cover;
}

.core-app-icon{
    width:67px;
    height:50px;
    border-radius:50%;
    background:#e9fff1;
    border:2px solid #2ECC71;
    color:#2ECC71;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:-25px auto 12px;
    position:relative;
    z-index:2;
    font-size:22px;
}

.core-app-card h5{
    color:#191818;
    font-size:15px;
    font-weight:950;
    margin-bottom:8px;
}

.core-app-card p{
    color:#555;
    font-size:12px;
    line-height:1.45;
    padding:0 18px;
    margin:0;
}

/* BLACK STATS */

.core-black-stats{
    background:#fff;
}

.core-black-stats-box{
    background:#050505;
    color:#fff;
    display:grid;
    grid-template-columns:1.45fr repeat(4,1fr);
    align-items:center;
    padding:35px 45px;
    gap:30px;
}

.core-stat-title span{
    color:#2ECC71;
    font-size:15px;
    font-weight:950;
}

.core-stat-title h3{
    color:#fff;
    font-size:23px;
    font-weight:950;
    margin:0;
}

.core-stat{
    display:flex;
    align-items:center;
    gap:14px;
}

.core-stat i{
    color:#2ECC71;
    font-size:34px;
}

.core-stat h4{
    color:#fff;
    font-size:24px;
    font-weight:950;
    margin:0;
}

.core-stat p{
    color:#fff;
    font-size:12px;
    font-weight:800;
    line-height:1.15;
    margin:0;
}

/* DOWNLOAD + FAQ */

.core-download-faq{
    background:#fff;
    padding:38px 0 50px;
}

.core-download-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.core-download-grid a{
    border:1px solid #e3e3e3;
    border-radius:8px;
    padding:21px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:18px;
    color:#191818;
    box-shadow:0 8px 24px rgba(0,0,0,.04);
}

.core-download-grid i{
    color:#2ECC71;
    font-size:28px;
}

.core-download-grid h5{
    font-size:14px;
    font-weight:950;
    margin:0 0 3px;
}

.core-download-grid p{
    font-size:12px;
    margin:0;
    color:#555;
}

.core-faq-list{
    border:0;
}

.core-faq-list .faq-item{
    margin-bottom:9px;
    border:1px solid #e4e4e4;
    border-radius:5px;
    overflow:hidden;
}

.core-faq-list .faq-question{
    padding:13px 18px;
    font-size:13px;
}

/* CTA */

.core-final-cta{
    background:#fff;
    padding:0 0 30px;
}

.core-final-box{
    background:
        linear-gradient(90deg,rgba(18,143,64,.92),rgba(8,111,45,.88)),
        url("images/core-cta-bg.jpg");
    background-size:cover;
    background-position:center;
    border-radius:8px;
    padding:38px 55px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    color:#fff;
}

.core-final-box h2{
    font-size:30px;
    font-weight:950;
    margin-bottom:8px;
}

.core-final-box p{
    color:#fff;
    font-size:14px;
    margin:0;
}

.core-white-btn{
    background:#fff;
    color:#191818;
    border-radius:6px;
    padding:17px 32px;
    font-weight:950;
    display:inline-flex;
    gap:10px;
    align-items:center;
}

/* FOOTER OVERRIDE */

.footer .footer-logo{
    font-family:Georgia,serif;
    font-size:42px;
}

.footer .footer-logo small{
    display:block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    letter-spacing:2px;
}

/* RESPONSIVE */

@media(max-width:991px){

    .core-hero{
        padding:70px 0;
    }

    .core-hero h1{
        font-size:48px;
    }

    .capacity-tabs{
        grid-template-columns:1fr;
        max-width:430px;
    }

    .core-spec-grid{
        grid-template-columns:1fr;
    }

    .core-app-grid{
        grid-template-columns:1fr 1fr;
    }

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

    .core-stat-title{
        grid-column:1/3;
    }

    .core-final-box{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media(max-width:767px){

    .core-header-actions{
        flex-wrap:wrap;
        margin-top:15px;
    }

    .core-hero h1{
        font-size:38px;
    }

    .core-hero-features{
        flex-direction:column;
        gap:15px;
    }

    .core-feature-boxes{
        grid-template-columns:1fr 1fr;
    }

    .core-app-grid{
        grid-template-columns:1fr;
    }

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

    .core-stat-title{
        grid-column:auto;
    }

    .core-download-grid{
        grid-template-columns:1fr;
    }

    .core-final-box{
        padding:30px 24px;
    }
}