/* =========================================================
   PREMIUM.CSS
   Premium Green Industrial Theme
   Designed for Nextro Energy
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');

:root{

--green-950:#081c17;
--green-900:#0d2d27;
--green-850:#123830;
--green-800:#18463b;
--green-700:#216150;

--lime:#8ed35b;
--lime-light:#b8e986;

--gold:#c7a65b;

--white:#fff;
--off:#f8fbf8;
--line:#e4ece6;
--text:#14231d;
--muted:#65746c;

--radius:20px;

--shadow-sm:0 10px 30px rgba(0,0,0,.05);
--shadow:0 20px 60px rgba(0,0,0,.08);
--shadow-lg:0 35px 80px rgba(0,0,0,.14);

--transition:.4s ease;
}

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

html{scroll-behavior:smooth;}

body{
font-family:"Manrope",sans-serif;
background:var(--off);
color:var(--text);
line-height:1.7;
overflow-x:hidden;
}

body:before{
content:"";
position:fixed;
inset:0;
background-image:
radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
background-size:32px 32px;
pointer-events:none;
opacity:.35;
}

img{
display:block;
max-width:100%;
border-radius:18px;
transition:var(--transition);
}

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

.container{
width:min(92%,1400px);
margin:auto;
}

/* HEADER */

/* .site-header{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
background:rgba(8,28,23,.75);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.08);
} */

.nav{
display:flex;
align-items:center;
justify-content:space-between;
min-height:82px;
}

.logo{
width:170px;
}

.nav-links{
display:flex;
gap:34px;
}

.nav-links a{
font-weight:700;
color:#eef5ef;
transition:.3s;
}

.nav-links a:hover{
color:var(--lime);
}

/* BUTTONS */

.button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 30px;
border-radius:999px;
font-weight:700;
transition:var(--transition);
}

.button.primary{
background:linear-gradient(135deg,var(--lime),#63c83a);
color:#0a241d;
box-shadow:0 18px 40px rgba(142,211,91,.35);
}

.button.primary:hover{
transform:translateY(-4px);
box-shadow:0 28px 60px rgba(142,211,91,.45);
}

.button.white{
background:white;
color:var(--green-900);
}

.button.ghost{
border:1px solid rgba(255,255,255,.3);
color:white;
}

/* HERO */

.hero{
position:relative;
overflow:hidden;
padding:170px 0 110px;
background:
linear-gradient(135deg,
var(--green-950),
var(--green-900),
var(--green-800));
color:white;
}

.hero:before{
content:"";
position:absolute;
top:-250px;
right:-200px;
width:750px;
height:750px;
background:
radial-gradient(circle,
rgba(142,211,91,.18),
transparent 70%);
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:70px;
position:relative;
z-index:2;
}

.eyebrow{
display:inline-block;
letter-spacing:3px;
text-transform:uppercase;
font-size:13px;
font-weight:800;
color:var(--gold);
margin-bottom:18px;
}

h1,h2,h3{
font-family:"Space Grotesk",sans-serif;
line-height:1.1;
}

h1{
font-size:clamp(58px,7vw,92px);
margin-bottom:24px;
}

h2{
font-size:clamp(40px,4vw,60px);
margin-bottom:24px;
}

h2:after{
content:"";
display:block;
width:90px;
height:4px;
margin-top:18px;
background:linear-gradient(90deg,var(--lime),var(--gold));
border-radius:10px;
}

h3{
font-size:24px;
margin-bottom:14px;
}

.hero-lead{
font-size:28px;
font-weight:600;
margin-bottom:22px;
color:#eef8ef;
}

.hero-copy,
.section-copy{
font-size:18px;
color:#d0dfd9;
max-width:760px;
}

.hero-copy{color:rgba(255,255,255,.82);}

.hero-actions{
display:flex;
gap:16px;
margin-top:36px;
flex-wrap:wrap;
}

/* SECTIONS */

.section{
padding:140px 0;
}

.section.white{background:white;}
.section.soft{background:#f3f8f4;}
.section.dark{
background:linear-gradient(180deg,#0f2d27,#173f35);
color:white;
}
.section.dark .section-copy{
color:rgba(255,255,255,.8);
}

/* CARDS */

.service-card,
.mini-card,
.ops-card,
.stat-card,
.proof-card,
.feedstock-card,
.image-card,
.split-card{
background:white;
border-radius:20px;
border:1px solid rgba(0,0,0,.04);
box-shadow:var(--shadow-sm);
transition:var(--transition);
overflow:hidden;
}

.service-card:hover,
.mini-card:hover,
.ops-card:hover,
.stat-card:hover,
.proof-card:hover,
.feedstock-card:hover,
.image-card:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-lg);
}

.service-card,
.mini-card,
.ops-card,
.stat-card,
.proof-card{
padding:34px;
}

.metric-grid,
.service-grid,
.mini-grid,
.process-grid,
.stat-grid,
.equipment-grid,
.ops-grid{
display:grid;
gap:24px;
}

.metric-grid{
grid-template-columns:repeat(4,1fr);
margin-top:-50px;
position:relative;
z-index:10;
}

.metric{
background:white;
padding:38px;
border-radius:20px;
box-shadow:var(--shadow);
text-align:center;
}

.metric strong{
display:block;
font-size:28px;
font-family:"Space Grotesk",sans-serif;
color:var(--green-800);
}

.metric span{
display:block;
margin-top:10px;
color:var(--muted);
font-weight:600;
}

.service-grid{grid-template-columns:repeat(3,1fr);}
.mini-grid{grid-template-columns:repeat(3,1fr);}
.process-grid{grid-template-columns:repeat(2,1fr);}
.stat-grid{grid-template-columns:repeat(2,1fr);}
.equipment-grid{grid-template-columns:repeat(4,1fr);}
.ops-grid{grid-template-columns:repeat(3,1fr);}

.process-step,
.equipment-item{
padding:20px;
border-radius:16px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1);
font-weight:700;
display:flex;
align-items:center;
gap:15px;
}

.process-step span{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:50%;
background:var(--lime);
color:#09261f;
font-weight:800;
}

.split-left{
background:linear-gradient(135deg,var(--green-900),var(--green-800));
color:white;
padding:50px;
}

.split-right{
padding:50px;
display:grid;
gap:22px;
background:white;
}

/* .contact{
background:linear-gradient(135deg,#081c17,#123830);
color:white;
padding:100px 0;
}

.note{
opacity:.7;
margin-top:16px;
font-size:14px;
}

.contact-actions{
display:flex;
gap:16px;
flex-wrap:wrap;
} */

img:hover{
transform:scale(1.03);
}

@media(max-width:1100px){

.hero-grid,
.two-col,
.performance-grid,
.process-layout,
.ops-layout,
.contact-layout,
.split-card{
grid-template-columns:1fr!important;
}

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

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

}

@media(max-width:768px){

.nav-links{
display:none;
}

.section{
padding:90px 0;
}

.hero{
padding:140px 0 70px;
}

.metric-grid,
.service-grid,
.equipment-grid,
.stat-grid,
.ops-grid,
.mini-grid,
.process-grid{
grid-template-columns:1fr;
}

h1{
font-size:52px;
}

h2{
font-size:38px;
}

.hero-lead{
font-size:22px;
}

.container{
width:92%;
}

.button{
width:100%;
}
}

.performance-layout{
    display:grid;
    grid-template-columns:58% 42%;
    gap:70px;
    align-items:start;
  
}

.performance-content{
    display:flex;
    flex-direction:column;
}

.performance-image{
    width:100%;
    height:100%;
    min-height:720px;
    object-fit:cover;
    
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
   
    object-position:left top;
}

.image-card{
    height:100%;
    display:flex;
      position:sticky;
    top:120px;
    align-self:start;
}

.stat-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-top:45px;
}

.stat-card{
    padding:32px;
    border-radius:22px;
    background:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.stat-card strong{
    font-size:44px;
    line-height:1.1;
    display:block;
    margin:18px 0;
}
#performance .container{
    padding-left:40px;
    padding-right:40px;
}

.image-card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
}

.image-card a{
    display:block;
    position:relative;
}

.image-card a::after{
    content:"🔍";
    position:absolute;
    right:20px;
    top:20px;
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:22px;
    opacity:0;
    transition:.3s;
    backdrop-filter:blur(8px);
}

.image-card:hover a::after{
    opacity:1;
}

.image-card img{
    transition:.4s;
}

.image-card:hover img{
    transform:scale(1.03);
}

/* GLightbox Close Button */

.gclose{
    width:56px !important;
    height:56px !important;
    top:20px !important;
    right:20px !important;
    opacity:1 !important;
    background:rgba(0,0,0,.65) !important;
    border-radius:50% !important;
    backdrop-filter:blur(8px);
    transition:.3s;
}

.gclose svg{
    width:22px !important;
    height:22px !important;
    stroke:#fff !important;
    stroke-width:2.5px !important;
}

.gclose:hover{
    background:#8ED35B !important;
    transform:scale(1.08);
}

.gclose:hover svg{
    stroke:#081c17 !important;
}

.feedstock-layout{
    display:grid;
    grid-template-columns:48% 52%;
    gap:70px;
    align-items:center;
}

.feedstock-card{
    overflow:hidden;
    border-radius:22px;
    background:#fff;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.feedstock-card img{
    width:100%;
    display:block;
}

.chip-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding:28px;
}

.chip{
    padding:14px 18px;
    background:#f6f8f6;
    border-radius:12px;
    font-weight:600;
    border:1px solid #e6ece8;
}

.feedstock-content{
    max-width:600px;
}

.feedstock-points{
    display:grid;
    gap:18px;
    margin-top:40px;
    font-weight:600;
    color:#18463B;
}

@media(max-width:992px){

.feedstock-layout{
    grid-template-columns:1fr;
}

.feedstock-content{
    max-width:100%;
}

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

}
.feedstock-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:30px;
}

.feedstock-gallery a{
    display:block;
    overflow:hidden;
    border-radius:18px;
    position:relative;
}

.feedstock-gallery img{
    width:100%;
    height:270px;
    object-fit:cover;
    transition:.45s;
}

.feedstock-gallery a:hover img{
    transform:scale(1.08);
}

.feedstock-gallery a::after{
    content:"🔍";
    position:absolute;
    top:15px;
    right:15px;
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:.3s;
}

.feedstock-gallery a:hover::after{
    opacity:1;
}

@media(max-width:768px){

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

    .feedstock-gallery img{
        height:220px;
    }

}
@media (max-width:992px){

    .performance-layout{
        grid-template-columns:1fr;
    }

    .image-card{
        order:2;
    }

    .performance-image{
        min-height:auto;
        height:450px;
    }

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

}

.process-timeline{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin:60px 0 80px;
    padding-top:30px;
}

.timeline-line{
    position:absolute;
    top:55px;
    left:60px;
    right:60px;
    height:4px;
    background:rgba(255,255,255,.15);
    z-index:1;
    
    
}

.timeline-item{
    
      position:relative;
    z-index:2;
    flex:1;
    text-align:center;
    transition:all .35s ease;
    cursor:pointer;
}

.timeline-number{
    width:70px;
    height:70px;
    margin:0 auto 22px;
    border-radius:50%;
    background:linear-gradient(135deg,#8ED35B,#67C23A);
    color:#081C17;
    font-size:28px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 30px rgba(142,211,91,.30);
    transition:all .35s ease;
}

.timeline-item h4{
    color:#fff;
    font-size:18px;
    line-height:1.4;
    font-weight:700;
   
    transition:all .35s ease;
}

/* Hover */

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

.timeline-item:hover .timeline-number{

    transform:scale(1.12) rotate(8deg);

    box-shadow:
        0 20px 45px rgba(142,211,91,.55);

    background:
        linear-gradient(135deg,#A7EA63,#6EDB3C);

}

.timeline-item:hover h4{

    color:#8ED35B;

}

/* Animated Pulse */

.timeline-number::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(142,211,91,.35);

    opacity:0;

    transform:scale(.8);

    transition:.4s;

}

.timeline-item:hover .timeline-number::before{

    opacity:1;

    transform:scale(1.2);

}

.timeline-line{

    position:absolute;

    top:55px;

    left:60px;

    right:60px;

    height:4px;

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

    overflow:hidden;

}

.timeline-line::after{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        #8ED35B,
        transparent);

    transition:.8s;

}

.process-timeline:hover .timeline-line::after{

    left:100%;

}

.proof-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:50px;
}

.proof-card{
    background:#fff;
    padding:40px 35px;
    border-radius:22px;
    border:1px solid rgba(0,0,0,.05);
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.proof-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.15);
}

.proof-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:linear-gradient(135deg,#8ED35B,#65C53C);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#081C17;
    margin-bottom:25px;
}

.proof-card h3{
    margin-bottom:18px;
    font-size:28px;
}

.proof-card p{
    color:#6b6b6b;
    line-height:1.8;
}

@media(max-width:992px){

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

}

/* Premium Contact CSS */

.contact{background:linear-gradient(135deg,#08251F,#123C34);color:#fff;padding:110px 0 35px;position:relative;overflow:hidden}
.contact:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(142,211,91,.08),transparent 45%)}
.contact .container{position:relative;z-index:2}
.contact-wrapper{display:grid;grid-template-columns:58% 42%;gap:70px;align-items:start}
.contact-info h2{color:#fff;margin-bottom:18px;  max-width:700px;
    font-size:clamp(3rem,4vw,5rem);
    line-height:1.05;
    margin-bottom:24px;}
.contact-info .section-copy{color:rgba(255,255,255,.82);line-height:1.8; max-width:650px;
    font-size:1.15rem;
    line-height:1.8;
    margin-bottom:40px;}
.contact-details{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:45px 0}
.contact-item{display:flex;gap:18px;padding:24px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:.35s}
.contact-item:hover{transform:translateY(-6px);background:rgba(255,255,255,.08)}
.contact-icon{width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,#8ED35B,#69CB40);display:flex;align-items:center;justify-content:center;color:#08251F;font-size:22px;flex-shrink:0}
.contact-item h4{margin:0 0 10px;color:#fff}
.contact-item p,.contact-item a{margin:0;color:rgba(255,255,255,.82);text-decoration:none;line-height:1.7}
.contact-item a:hover{color:#8ED35B}
.company-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.company-info-card{padding:24px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:.35s}
.company-info-card:hover{transform:translateY(-5px)}
.company-info-card i{font-size:26px;color:#8ED35B;margin-bottom:14px}
.company-info-card h5{margin:0 0 8px;color:#fff}
.company-info-card span{color:rgba(255,255,255,.78)}
.contact-card{background:#fff;color:#1b2b25;padding:38px;border-radius:24px;box-shadow:0 25px 60px rgba(0,0,0,.18);
   
   
    max-width:500px;
    margin:auto;}
.footer-logo{width:160px;display:block;margin:0 auto 25px}
.contact-card h3,.contact-card p{text-align:center}
.contact-card p{color:#666;line-height:1.8}
.contact-buttons{display:flex;flex-direction:column;gap:16px;margin:35px 0}
.contact-buttons .button{width:100%;display:flex;justify-content:center;align-items:center;gap:10px}
.button.ghost-dark{background:#123C34;color:#fff}
.footer-divider{height:1px;background:#ddd;margin:35px 0}
.social-links{display:flex;justify-content:center;gap:18px}
.social-links a{width:54px;height:54px;border-radius:50%;background:#f4f7f5;color:#123C34;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:21px;transition:.35s}
.social-links a:hover{background:#8ED35B;color:#08251F;transform:translateY(-5px)}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:35px;text-align:center}
.footer-links a{text-decoration:none;color:#123C34;font-weight:700}
.footer-links a:hover{color:#69CB40}
.copyright{margin-top:70px;padding-top:25px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:rgba(255,255,255,.75)}
.copyright strong{color:#fff}.copyright a{color:#8ED35B;text-decoration:none}
@media(max-width:1100px){.contact-wrapper{grid-template-columns:1fr}.contact-details,.company-info-grid{grid-template-columns:1fr}.contact-card{margin-top:20px}}
@media(max-width:768px){.contact{padding:80px 0 30px}.contact-card{padding:30px}.footer-links{grid-template-columns:repeat(2,1fr)}.copyright{flex-direction:column;text-align:center}}
@media(max-width:480px){.footer-links{grid-template-columns:1fr}.contact-icon{width:52px;height:52px}}

hero-copy, .section-copy-dark {
	font-size:18px;
color: #43705e;
max-width:760px;
    
    
    
}

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

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    background:rgba(8,37,31,.92);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.06);

}

.nav{

    height:84px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}

/* Logo */

.brand{

    display:flex;

    align-items:center;

}

.logo{

    height:54px;

    width:auto;

    display:block;

}

/* Navigation */

.nav-links{

    display:flex;

    align-items:center;

    gap:38px;

}

.nav-links a{

    color:#F2F5F3;

    text-decoration:none;

    font-weight:600;

    font-size:15px;

    position:relative;

    transition:.3s;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#7AD83B;

    transition:.3s;

}

.nav-links a:hover{

    color:#8ED35B;

}

.nav-links a:hover::after{

    width:100%;

}

/* CTA */

.nav-cta{

    padding:14px 28px;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:10px;

    box-shadow:0 10px 25px rgba(122,216,59,.25);

}

.nav-cta:hover{

    transform:translateY(-2px);

}

/* Mobile */

@media(max-width:992px){

.nav{

    height:74px;

}

.logo{

    height:46px;

}

.nav-links{

    display:none;

}

.nav-cta{

    padding:12px 22px;

    font-size:14px;

}

}