/* =====================================================
   SOGETRAP Sarl - Corporate Website CSS
===================================================== */


/* ================= RESET ================= */

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


html{
    scroll-behavior:smooth;
}


body{

    font-family:
    'Segoe UI',
    Arial,
    sans-serif;

    color:#333;
    background:#fff;

    overflow-x:hidden;

}


a{

    text-decoration:none;
    color:inherit;

}


img{

    max-width:100%;
    display:block;

}


.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}



/* ================= COLORS ================= */

:root{

    --green:#1b7f3a;
    --dark:#1d2529;
    --orange:#f28c28;
    --light:#f5f7f8;
    --white:#fff;

}



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


header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:80px;

    background:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 6%;

    z-index:1000;

    box-shadow:
    0 3px 15px rgba(0,0,0,.1);

}



.logo{

    font-size:28px;

    font-weight:900;

    color:var(--green);

}



.logo small{

    display:block;

    font-size:13px;

    color:#555;

    letter-spacing:3px;

}




nav{

    display:flex;

    gap:30px;

}


nav a{

    font-weight:600;

    transition:.3s;

}



nav a:hover{

    color:var(--green);

}



.menu{

    display:none;

    font-size:28px;

    cursor:pointer;

}





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


.hero{

    height:100vh;

    position:relative;

    overflow:hidden;

}



.slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    transition:1s;

}



.slide.active{

    opacity:1;

}



.overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.55)
    );

}



.hero-content{

    position:absolute;

    top:50%;

    left:8%;

    transform:translateY(-50%);

    max-width:650px;

    color:white;

}



.hero-content h1{

    font-size:55px;

    line-height:1.1;

    margin-bottom:20px;

}



.hero-content p{

    font-size:20px;

    line-height:1.7;

    margin-bottom:30px;

}



.btn{

    display:inline-block;

    padding:15px 35px;

    background:var(--orange);

    color:white;

    border-radius:5px;

    font-weight:bold;

    transition:.3s;

}



.btn:hover{

    background:var(--green);

}





/* ================= TITLES ================= */


section{

    padding:90px 0;

}



h2{

    text-align:center;

    font-size:38px;

    margin-bottom:50px;

    color:var(--dark);

}



h2:after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:var(--orange);

    margin:15px auto;

}



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


.about .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}



.image-box img{

    border-radius:15px;

    height:450px;

    width:100%;

    object-fit:cover;

}



.text-box p{

    line-height:1.8;

    margin-bottom:15px;

}



.identity{

    display:flex;

    gap:20px;

    margin-top:30px;

}



.identity div{

    background:var(--light);

    padding:20px;

    border-left:4px solid var(--green);

}





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


.services{

    background:var(--light);

}



.cards{

    display:grid;

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

    gap:30px;

}



.card{

    background:white;

    padding:35px;

    text-align:center;

    border-radius:12px;

    transition:.4s;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);

}



.card:hover{

    transform:translateY(-10px);

}



.card i{

    font-size:45px;

    color:var(--green);

    margin-bottom:20px;

}



.card h3{

    margin-bottom:15px;

}



.card p{

    line-height:1.6;

}




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


.stats{

    background:
    linear-gradient(
    90deg,
    var(--green),
    #124d25
    );

    color:white;

    display:grid;

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

    text-align:center;

}



.stats h3{

    font-size:45px;

}



.stats p{

    margin-top:10px;

}




/* ================= EQUIPMENT ================= */


.center{

    text-align:center;

    max-width:800px;

    margin:auto;

    line-height:1.8;

}



.equipment-grid{

    margin-top:50px;

    display:grid;

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

    gap:25px;

}



.equipment-grid div{

    text-align:center;

    padding:30px;

    background:#fff;

    box-shadow:
    0 5px 20px rgba(0,0,0,.1);

    border-radius:10px;

}



.equipment-grid i{

    font-size:40px;

    color:var(--orange);

}



/* ================= PROJECTS ================= */


.projects{

    background:var(--light);

}



table{

    width:100%;

    border-collapse:collapse;

    background:white;

}



th{

    background:var(--green);

    color:white;

}



th,td{

    padding:18px;

    border-bottom:1px solid #ddd;

}



tr:hover{

    background:#fafafa;

}





/* ================= PARTNERS ================= */


.partners{

    text-align:center;

}



.partners p{

    font-size:20px;

    color:#555;

    line-height:2;

}





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


.contact{

    background:

    linear-gradient(
    rgba(0,0,0,.7),
    rgba(0,0,0,.7)
    ),
    url(
    "https://images.unsplash.com/photo-1503387762-592deb58ef4e"
    );

    background-size:cover;

    color:white;

    text-align:center;

}



.contact h2{

    color:white;

}





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


footer{

    background:#111;

    color:white;

    padding:30px 6%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



footer a{

    margin-left:20px;

    color:#ddd;

}





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



@media(max-width:900px){


header{

    height:70px;

}



nav{

    position:absolute;

    top:70px;

    left:0;

    width:100%;

    background:white;

    flex-direction:column;

    text-align:center;

    padding:30px;

    display:none;

}



nav.active{

    display:flex;

}



.menu{

    display:block;

}



.hero-content h1{

    font-size:38px;

}



.about .container{

    grid-template-columns:1fr;

}



.cards{

    grid-template-columns:1fr;

}



.stats{

    grid-template-columns:1fr 1fr;

    gap:40px;

}



.equipment-grid{

    grid-template-columns:1fr 1fr;

}


table{

    font-size:13px;

}


footer{

    flex-direction:column;

    gap:20px;

}


}




@media(max-width:500px){


.hero-content{

    left:5%;

    right:5%;

}



.hero-content h1{

    font-size:32px;

}



.stats{

    grid-template-columns:1fr;

}



.equipment-grid{

    grid-template-columns:1fr;

}


.identity{

    flex-direction:column;

}


}
/* ================= SCROLL ANIMATION ================= */


.hidden{

    opacity:0;

    transform:
    translateY(40px);

    transition:
    all .8s ease;

}



.show{

    opacity:1;

    transform:
    translateY(0);

}
/* =====================================================
   TRUST BAR
===================================================== */


.trust-bar{

    width:90%;

    max-width:1200px;

    margin:-50px auto 0;

    position:relative;

    z-index:10;

    background:white;

    display:grid;

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

    gap:25px;

    padding:35px 30px;

    border-radius:12px;

    box-shadow:
    0 10px 35px rgba(0,0,0,.12);

}



.trust-bar div{

    text-align:center;

    padding:15px;

    border-right:1px solid #eee;

}



.trust-bar div:last-child{

    border-right:none;

}



.trust-bar i{

    font-size:38px;

    color:var(--green);

    margin-bottom:15px;

}



.trust-bar h3{

    font-size:20px;

    color:var(--dark);

    margin-bottom:8px;

}



.trust-bar p{

    color:#666;

    font-size:15px;

}






/* ==============================
   TRUST BAR RESPONSIVE
================================ */


@media(max-width:900px){


.trust-bar{

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

    margin-top:20px;

}



.trust-bar div:nth-child(2){

    border-right:none;

}



}



@media(max-width:500px){


.trust-bar{

    grid-template-columns:1fr;

    width:90%;

}



.trust-bar div{

    border-right:none;

    border-bottom:1px solid #eee;

}



.trust-bar div:last-child{

    border-bottom:none;

}


}