/* ===================================
   GLOBAL STYLE
=================================== */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{

    background:#f8faf5;
    color:#1f2937;
    overflow-x:hidden;

}


img{

    width:100%;
    display:block;

}


a{

    text-decoration:none;
    color:inherit;

}


ul{

    list-style:none;

}



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


:root{

    --green:#166534;
    --dark-green:#14532d;
    --light-green:#dcfce7;

    --brown:#78350f;
    --gold:#d97706;

    --white:#ffffff;

    --shadow:
    0 20px 40px rgba(0,0,0,.08);

}




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


header{

    position:fixed;
    top:0;
    width:100%;
    z-index:1000;

}



.navbar{

    width:90%;
    margin:auto;

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

    padding:10px 0;


}



.logo{

    font-size:32px;
    font-weight:800;

    color:var(--green);

    letter-spacing:2px;

}



.nav-menu{

    display:flex;
    gap:35px;

}



.nav-menu a{

    font-weight:500;
    transition:.3s;

}



.nav-menu a:hover{

    color:var(--green);

}



.menu-toggle{

    display:none;
    font-size:30px;
    cursor:pointer;

}





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


.hero{

    min-height:100vh;

    padding:
    120px 8% 80px;


    display:grid;

    grid-template-columns:
    1fr 1fr;


    align-items:center;


    background:

    linear-gradient(
    135deg,
    #f0fdf4,
    #ffffff
    );


}
.hero-image{

position:relative;

z-index:1;

}


.hero-content{

position:relative;

z-index:2;

}


.hero-content h1{


    font-size:80px;

    color:var(--green);

    font-weight:800;


}



.hero-content h2{


    font-size:32px;

    line-height:1.4;

    margin:20px 0;


}



.hero-content p{


    line-height:1.8;

    margin-bottom:15px;

    color:#4b5563;

}



.hero-image img{

animation:floating 5s infinite ease-in-out;

}



@media(max-width:600px){

.hero-image img{

animation:none;

transform:none;

}

}



@keyframes floating{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-20px);

    }


}




/* BUTTON */


.hero-button{

    display:flex;
    gap:20px;
    margin-top:30px;

}



.btn{

    padding:14px 30px;

    border-radius:50px;

    font-weight:600;

    display:inline-block;

    transition:.4s;


}



.primary{


    background:var(--green);

    color:white;

}


.primary:hover{


    background:var(--dark-green);

    transform:translateY(-5px);


}



.secondary{


    border:2px solid var(--green);

    color:var(--green);

}



.secondary:hover{

    background:var(--green);

    color:white;

}





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


section{

    padding:90px 8%;

}



.section-title{

    text-align:center;

    margin-bottom:50px;

}



.section-title h2{


    font-size:42px;

    color:var(--green);


}



.section-title p{

    color:#6b7280;

}





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


.about-content{


    display:grid;

    grid-template-columns:
    1fr 1fr;


    gap:40px;

}



.about-text{

    font-size:18px;

    line-height:1.9;

}



.about-card{


    background:white;

    padding:35px;

    border-radius:25px;

    box-shadow:var(--shadow);


}



.about-card h3{

    color:var(--green);

    margin-bottom:15px;

}



.about-card li{

    margin:10px 0;

}





/* ===================================
 PRODUCT
=================================== */


.products{


    background:#f0fdf4;


}



.product-container{


    display:grid;

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


    gap:30px;


}



.product-card{


    background:white;

    border-radius:25px;

    overflow:hidden;


    box-shadow:var(--shadow);

    transition:.4s;


}



.product-card:hover{


    transform:
    translateY(-15px);


}



.product-card img{


    height:230px;

    object-fit:cover;


}



.product-card h3{


    padding:20px 20px 10px;

    color:var(--green);


}



.product-card p{


    padding:0 20px;

    line-height:1.7;


}



.product-card ul{


    padding:20px;


}



.product-card li{


    margin:10px 0;

}





/* ===================================
 ADVANTAGE
=================================== */


.advantage-grid{


    display:grid;

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

    gap:20px;


}



.advantage-card{


    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:var(--shadow);


    transition:.3s;


}



.advantage-card:hover{


    transform:
    translateY(-10px);


}



.advantage-card h3{


    color:var(--green);

    margin-bottom:15px;


}





/* ===================================
 GALLERY
=================================== */


.gallery{

    text-align:center;

}



.gallery-grid{


    display:grid;

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

    gap:20px;

    margin-bottom:40px;


}



.gallery-grid img{


    height:250px;

    object-fit:cover;

    border-radius:20px;


}



.qr{


    margin-top:40px;

}



.qr img{


    width:180px;

    margin:auto;


}





/* ===================================
 LOCATION
=================================== */


.location{


    background:#f0fdf4;

    text-align:center;

}



.map iframe{

    width:100%;

    height:450px;

    border:0;

    border-radius:25px;

    margin-top:30px;

}



@media(max-width:600px){

.map iframe{

    height:350px;

}

}





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


.contact{


    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:40px;


}



.contact-card,
.partnership{


    background:white;

    padding:40px;

    border-radius:25px;

    box-shadow:var(--shadow);


}



.whatsapp{

    background:#16a34a;

    color:white;

    margin-top:20px;

}



.email{

    background:var(--gold);

    color:white;

    margin-top:20px;

}



.partnership li{

    margin:12px 0;

}





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


footer{


    background:
    var(--dark-green);


    color:white;

    text-align:center;

    padding:50px;


}


footer h2{


    font-size:40px;

}





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



@media(max-width:1000px){



.hero,
.about-content,
.contact{


    grid-template-columns:1fr;


}



.hero-content h1{


    font-size:55px;

}



.product-container{


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


}



.advantage-grid{


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

}



.gallery-grid{


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


}



}




@media(max-width:600px){



.nav-menu{


    display:none;

}



.menu-toggle{


    display:block;

}



.hero{


    padding-top:120px;

}



.hero-content h1{


    font-size:45px;

}



.hero-content h2{


    font-size:22px;

}



.hero-button{


    flex-direction:column;

}



.product-container,
.advantage-grid,
.gallery-grid{


    grid-template-columns:1fr;


}



.section-title h2{


    font-size:32px;

}



.contact-card,
.partnership,
.about-card{


    padding:25px;

}



footer h2{


    font-size:32px;

}



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

.nav-menu.active{

display:flex;

position:absolute;

top:80px;

left:0;

width:100%;

background:white;

flex-direction:column;

align-items:center;

padding:30px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

}

}
/* ================================
 CIRCULAR ECONOMY
================================ */


.circular{

background:#ecfdf5;

}



.circle-flow{


display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;


}



.circle-box{


background:white;

width:230px;

padding:30px;

border-radius:30px;

text-align:center;

box-shadow:var(--shadow);

transition:.4s;


}



.circle-box:hover{


transform:translateY(-15px);

}



.circle-box .icon{


font-size:50px;

margin-bottom:15px;

}



.arrow{


font-size:40px;

color:var(--green);

}




/* ================================
 STATISTIC
================================ */


.statistics{


background:
linear-gradient(
135deg,
#14532d,
#166534
);


display:grid;

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

gap:30px;


}



.stat-box{


text-align:center;

color:white;

}



.stat-box h2{


font-size:60px;

}





/* ================================
 TESTIMONIAL
================================ */


.testimonial-grid{


display:grid;

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

gap:30px;


}



.test-card{

background:white;

padding:35px;

border-radius:25px;

box-shadow:var(--shadow);

font-style:italic;

color:#1f2937;

position:relative;

z-index:2;

}



.test-card p{

color:#374151;

font-size:16px;

line-height:1.8;

margin-bottom:20px;

}



.test-card h4{

color:#166534;

font-weight:600;

margin-top:15px;

}



.test-card h4{


margin-top:20px;

color:var(--green);

}






@media(max-width:700px){


.circle-flow{

flex-direction:column;

}



.arrow{

transform:rotate(90deg);

}



.statistics{


grid-template-columns:1fr 1fr;

}



.testimonial-grid{


grid-template-columns:1fr;

}



}
.logo img{

width:100px;

height:auto;

}
.hero-image img{

max-width:480px;

filter:
drop-shadow(
0 25px 40px rgba(0,0,0,.15)
);

}
.research-badge{

display:inline-block;

margin-top:20px;

padding:12px 20px;

background:#dcfce7;

color:#166534;

border-radius:50px;

font-weight:600;

}




@media(max-width:600px){

.logo img{

width:80px;

}

}
.hero-content{

position:relative;

z-index:5;

visibility:visible;

opacity:1;

}


.hero-image{

position:relative;

z-index:4;

visibility:visible;

opacity:1;

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

header{

height:80px;

}


.hero{

padding-top:100px;

}

}
/* =============================
   TEKNOLOGI BSF
============================= */


.technology-bsf{

padding:80px 8%;

background:#f4fbf5;

}



.bsf-wrapper{

display:flex;

justify-content:center;

margin-top:40px;

}



.bsf-wrapper img{

width:100%;

max-width:1000px;

border-radius:30px;

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

transition:.5s;

}



.bsf-wrapper img:hover{

transform:scale(1.02);

}



@media(max-width:600px){

.technology-bsf{

padding:50px 5%;

}


.bsf-wrapper img{

border-radius:20px;

}

}
@media(min-width:1001px){

.logo img{

width:110px;

}


.nav-menu{

gap:30px;

}


.nav-menu a{

font-size:16px;

}


.hero-content h1{

font-size:60px;

}


.hero-image img{

max-width:480px;

}

}