/* navbar and hero */
@media (width < 1200px) {
    .about {
        grid-template-columns: 1fr;
        padding: 50px 3% 60px;
        text-align: center;
    }
    .about-img {
        text-align: center;
    }
    .about .btn-container {
        flex-direction: column;
        align-items: center;
        gap: .6rem;
    }
    .reviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (width < 990px) {
    nav ul {
        position: absolute;
        width: 100%;
        background-color: var(--secondary-color);
        color: var(--extra-light);
        left: 0;
        top: 100%;
        text-align: center;
        box-shadow: 0px 0px 1px 3px var(--primary-color);
    }
    nav .logo { max-width: 130px;}
    .hero h1 {font-size: 3.5rem;}
    .hero h2 {font-size: 2rem;}
    section {
        padding: 110px 10% 60px;
    }
    .about-text p {
        text-align: center;
        padding: 0 10%;
    }
   .box img {
        width: 100px;
        height: 100px;
    }

    .box h3 {
        font-size: 1rem;
    }
    .box p {
        font-size: .8rem;
        line-height: 20px;
    }
    
    
    .contact-form form, .request-form form {
         padding-top: 5%;
    }
    .contact, .request {
            margin-top: 100px;
    }
    .cta__container { flex-direction: column; align-items: flex-start; }
    
    footer span {
        color: #fff;
        font-size: .7rem;
    }
    footer i {
        font-size: .8rem;
    }

}

@media (width < 690px) {
     .services-content {
        grid-template-columns: 1fr;
     }
    .hero { align-items: flex-start; }
    .hero h1, .hero h2, .hero p, .btn-container { text-align: left; }
    .reviews__grid { grid-template-columns: 1fr; }
}

@media (width < 480px) {
    nav ul li {
        margin: 10px;
    }
    .hero .btn-container {
        flex-direction: column;
        gap: .6rem;
        margin: 10px 0 20px;
    }
     .hero h1 {
        margin-top: 280px;
    }
    
    
}

@media (width < 380px) {

    nav ul li {
        margin: 10px;
    }
    .hero .btn-container {
        flex-direction: column;
        gap: .5rem;
        margin: 10px 0 20px;
    }
    
     .hero h1 {
        font-size:3rem;
        margin-top: 300px;
    }
    
}