/* =====================================
   DARA AFFILIATION
   RESPONSIVE DESIGN
===================================== */


/* TABLETTE */

@media(max-width:1024px){


.container{

    width:90%;

}


/* HERO */

.hero-container{

    gap:30px;

}


.hero-content h1{

    font-size:48px;

}



/* FOOTER */

.footer-container{

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

}



/* CONTACT */

.contact-wrapper{

    gap:30px;

}


}




/* MOBILE */

@media(max-width:768px){


/* NAVBAR */


.nav-container{

    padding:0 20px;

}


.nav-links{

    position:absolute;

    top:85px;

    left:0;

    width:100%;

    background:#050914;

    flex-direction:column;

    align-items:center;

    padding:30px 0;

    display:none;

}


.nav-links.active{

    display:flex;

}



.btn-nav{

    display:none;

}


.menu-toggle{

    display:block;

}





/* HERO */


.hero-container{

    flex-direction:column;

    text-align:center;

}


.hero-content{

    width:100%;

}


.hero-content h1{

    font-size:38px;

}



.hero-content p{

    font-size:16px;

}



.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}



.hero-image{

    width:100%;

}




/* ABOUT */


.about-container{

    flex-direction:column;

    text-align:center;

}


.about-image,

.about-content{

    width:100%;

}


.about-features{

    grid-template-columns:1fr;

}





/* WHY */


.why-container{

    flex-direction:column;

    text-align:center;

}



.why-image,

.why-content{

    width:100%;

}





/* ROADMAP */


.roadmap-circle-line::before{

    left:40px;

}



.roadmap-step,
.roadmap-step:nth-child(even){

    flex-direction:row;

    justify-content:flex-start;

    gap:20px;

}



.circle{

    width:70px;

    height:70px;

    font-size:20px;

}



.roadmap-text{

    width:auto;

}





/* GALLERY */


.gallery-track img{

    width:250px;

    height:180px;

}





/* CONTACT */


.contact-wrapper{

    flex-direction:column;

}



.contact-email,
.contact-form{

    width:100%;

}





/* FOOTER */


.footer-container{

    grid-template-columns:1fr;

    text-align:center;

}



.social-icons{

    justify-content:center;

}





/* CONTACT EMAIL MOBILE FIX */
.email-link{
    font-size:15px;
    padding:0 10px;
    overflow-wrap:anywhere;
}

}