@media (max-width: 117.25em) {
    
    .quad-header {
        font-size: 3.6rem;
    }

    .quad-text-box {
        padding: 1.2rem;
    }

    .quad-text,
    .quad-btn {
        font-size: 2.4rem;
    }
}

@media (max-width: 88.4em) {

    .nav-link {
        padding: 1.2rem;
    }


}

@media (max-width: 47.3em) {

    .cta-form-page {
        width: 30rem;
    }
    


}


@media (max-width: 78.1em) {

    .open-nav {
        display: block;
    }

    .nav-list {
        display: none;
    }


}

@media (max-width: 94.25em) {

    .backdrop-img {
        width: 80rem;
    }

    .web-dev-backdrop {
        position: absolute;
        bottom: -35%;
        left: -20%;
    }

    .testimonial-chakra {
        bottom: -25%;
        left: -50%;
    }

    .moon-chakra {
        bottom: -160%;
        right:0;
    }

    .quad-chakra {
        bottom: -75%;
        left: -20%;
    }


    .testimonial-vid {
        margin-bottom: auto;
    }
    
    .quad-header {
        font-size: 3.6rem;
    }

    .quad-text,
    .quad-btn {
        font-size: 2rem;
    }

    .quad-text {
        padding-bottom: 1.2rem;
    }
}
   


@media (max-width: 83.25em) {


    .quad-chakra {
        bottom: -175%;
        left: -20%;
    }

    
    
    
    .quad-img {
        display: none;
    }
    
    .quad-text {
        margin-bottom: auto;
    }
    
}

@media (max-width: 75em) {

    .backdrop-img {
        width: 70rem;
    }

    .moon-chakra {
        bottom: -200%;
        right:0;
    }

    .quad-chakra {
        bottom: -30%;
        left: -20%;
    }


    .hero {
        height: 80vh;
        padding: 1.2rem 0;
    }

    .moon-banner {
        height: 9.6rem;
    }



    .btn,
    .orange-text,
    .white-text {
        font-size: 2.4rem;
    }


    .nav-logo {
        width: 10rem;
    }

    .nav-social {
        width: 3rem;
        height: 3rem;
        margin-top: 0.4rem;
    }

    .hero-container {
        width: 60rem;
        gap:1.2rem;
        padding: 1.2rem;
    }

    .hero-header {
        font-size: 4.8rem;
    }
    
    .hero-caption {
        font-size: 2.4rem;
    }
    
    .hero-btns {
        gap: 3.6rem;
    }
    

    .web-dev-header,
    .portfolio-header,
    .testimonial-header {
        font-size: 3.6rem;
    }

    .pricing-container {
        grid-template-columns: 1fr;
        row-gap: 3.6rem;
    }

    .pricing-item {
        width: 40rem;
        margin: auto;
    }

    .pricing-backdrop {
        bottom: -20%;
        left: 30%;
    }

    .pricing-item-basic {
        border: 3px solid #F8B4C3;
        border-radius: 26px;
    }

    .quad-container {
        grid-template-columns: 1fr 1fr;
    }

    .quad-img {
        display: block;
        grid-column: 2/3;
    }

    .quad-text-box {
        grid-column: 1/2;
        padding: 4.8rem 2.4rem;
    }

    .quad-text {
        margin-bottom: 0;
        text-align: center;
    }

    .quad-design {
        grid-row: 1/2;
    }

    .quad-writing {
        grid-row: 2/3;
    }

    .quad-smm {
        grid-row: 3/4;
    }

    .footer-container {
        grid-template-columns: 1fr;
        row-gap: 3.6rem;
    }


    .footer-link {
        text-align: center;
    }

    .footer-logo {
        width: 15rem;
    }

}
    
@media (max-width: 65.6em) {


    .testimonial-chakra {
        bottom: 50%;
        left: -30%;
    }


    .moon-chakra {
        bottom: -30rem;
        right:15%;
    }

    .moon-banner {
        height: 2.4rem;
    }

}

@media (max-width: 56.25em) {

    .backdrop-img {
        width: 40rem;
    }

    .web-dev-backdrop {
        bottom: -5%;
        left: -20%;
    }

    .portfolio-chakra {
        top: -5%;
        right: 5%;
    }

    .pricing-backdrop {
        bottom: 10%;
        left: 30%;
    }

    .quad-chakra {
        bottom: -25%;
        left: -20%;
    }


    .web-dev-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .web-dev-img {
        width: 30rem;
    }

    .web-dev-icons {
        display: none;
    }

    .web-dev-btn {
        margin: auto;
    }

    .portfolio-container {
        grid-template-columns: 1fr;
    }

    .portfolio-img-one {
        grid-row: 2/3;
    }

    .portfolio-anna {
        grid-row: 1/2;
    }

    .testimonial-container {
        grid-template-columns: 1fr;
    }

    .testimonial-vid {
        display: none;
    }

    .quad-container {
        grid-template-columns: 1fr;
    }

    .quad-img {
        display: none;
    }

    .quad-text-box {
        padding: 2.4rem;
        gap:2.4rem;
    }

    .cta-container {
        grid-template-columns: 1fr;
    }

    .cta-title {
        font-size: 3.6rem;
    }

}



@media (max-width: 37.5em) {

    .hero {
        height: 100%;
    }

    .hero-box {
        grid-template-columns: 1fr;
    }

    .hero-container {
        width: 40rem;
    }

    .fifty-off {
        font-size: 2.4rem;
    }

    .web-dev-img {
        width: 20rem;
    }

    .portfolio-img {
        width: 80%;
        margin: auto;
    }

    .page-heading {
        font-size: 4rem;
        color: #69995d;
    }

}


@media (max-width: 30em) {


    .sidenav {
        border-left: none;
    }

    .hero-container {
        width: 33rem;
    }

    .nav-logo {
        width: 8rem;
    }

    .pricing-item {
        width: 30rem;
    }

    .email-text {
        font-size: 1.8rem;
    }

}