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

@media(max-width:768px){

.nav-icons{
    display:block;
}

.nav-links{

    position:fixed;

    top:80px;
    right:-100%;

    width:280px;
    height:100vh;

    background:#111;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    padding:30px;

    gap:20px;

    transition:.35s;

}

.nav-links.active{

    right:0;

}

.hero{

    flex-direction:column;
    text-align:center;

}

.hero-content,
.hero-image{

    width:100%;

}

}

@media(max-width:768px){

.hero{
    width:100%;
    padding:110px 20px 40px;
}

.featured,
.categories,
.why-us,
.reviews,
.contact-cta,
footer{

    width:100%;
    padding-left:20px;
    padding-right:20px;

}

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

.about,
.contact-section,
.contact-cta{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    padding:20px;
    gap:25px;
}

.about img,
.contact-section img,
.contact-cta iframe{
    width:100%;
    max-width:100%;
}

.contact-form,
.contact-info{
    width:100%;
    padding:20px;
}

}