/* HERO */

.hero{

    min-height:90vh;
    display:flex;
    align-items:center;
    padding:8%;
    background:var(--light);

}


.hero-content{

    max-width:750px;

}


h1{

    font-size:55px;
    line-height:1.1;
    color: var(--primary);

}


h1 span{

    color: var(--accent);

}


.hero p{

    margin:25px 0;
    font-size:20px;
    color: var(--text);

}



/* BUTTONS */


.btn{

    display:inline-block;
    padding:14px 32px;
    background: var(--accent);
    color: var(--white);
    border-radius:30px;
    text-decoration:none;
    margin-right:12px;
    font-weight:600;
    transition: 0.3s;


}


.btn:hover{

    background: var(--primary);

}



.secondary{

    background: var(--orange);
    transition: 0.3s;


}


.secondary:hover{

    background: var(--primary);

}



/* GENERAL SECTIONS */


.section{

    padding:90px 10%;

}


.section h2{

    text-align:center;
    font-size:40px;
    color: var(--primary);
    margin-bottom:35px;

}


.section p{

    max-width:850px;
    margin:auto;
    text-align:center;
    font-size:18px;

}



/* IMPACT */


.impact{

    display:flex;
    justify-content:center;
    gap:30px;
    padding:70px 10%;
    background: var(--light);

}


.impact div{

    width:30%;
    padding:35px;
    text-align:center;
    border-radius:20px;
    background: var(--white);

    border-top:5px solid var(--accent);

}



.impact h3{

    color: var(--primary);

}



/* CARDS */


.cards{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;

}



.card{

    width:290px;
    padding:35px;
    border-radius:22px;
    background: var(--white);

    box-shadow:0 12px 35px rgba(0,7,68,0.12);

    transition: 0.3s;

}


.card:hover{

    transform:translateY(-10px);

}



.card h3{

    color: var(--accent);
    margin-bottom:15px;

}


.card p{

    text-align:left;
    font-size:16px;
    color: var(--primary);

}

/* DARK SECTION */

.dark{

    background: var(--primary);
    color: var(--white);

}


.dark h2{

    color: var(--white);

}


.dark .card{

    background: var(--white);

}



/* CONTACT */


.contact{

    padding:90px 10%;
    text-align:center;
    background: var(--light);

}



.contact h2{

    color: var(--primary);;

}


form{

    max-width:500px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:18px;

}



input, textarea{

    padding:16px;

    border-radius:12px;

    border:1px solid var(--accent);

    font-size:16px;

    outline:none;
    transition:.3s;
    resize: none;

}

input:focus,
textarea:focus{
    border-color:var(--orange);
}



button{

    padding:16px;

    background: var(--accent);

    color: var(--white);

    border:none;

    border-radius:30px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition: 0.3s;


}


button:hover{

    background: var(--primary);

}



/* FOOTER */


footer{

    padding:30px;

    text-align:center;

    background: var(--primary);

    color: var(--white);

}


/* MOBILE */

@media(max-width:800px){


nav{

    flex-direction:column;

}


ul{

    margin-top:20px;

    flex-wrap:wrap;

    justify-content:center;

}


h1{

    font-size:38px;

}



.impact{

    flex-direction:column;

}


.impact div{

    width:100%;

}


}