@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: 101.6em) {

    .intro-img-box {
        display: none;
    }

    .intro-img-box-mobile {
        display: block;
    }

    .intro-text {
        max-width: 84rem;
    }

    .intro {
        padding: 0.6rem;
    }


}

@media (max-width: 88.4em) {

    .nav-link {
        padding: 1.2rem;
    }


}

@media (max-width: 78.1em) {

    .open-nav {
        display: block;
    }

    .nav-list {
        display: none;
    }


}


@media (max-width: 94.25em) {

    .chakra-img {
        width: 80rem;
    }

    .web-dev-chakra {
        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;
    }

    .intro-text,
    .page-z-text,
    .page-text {
        color: #111;
    }
}
   


@media (max-width: 83.25em) {


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

    
    .nav-link {
        padding: 1.2rem;
    }
    
    
    .quad-img {
        display: none;
    }
    
    .quad-text {
        margin-bottom: auto;
    }

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

@media (max-width: 75em) {

    .chakra-img {
        width: 70rem;
    }

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

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

    .open-nav {
        display: block;
    }

    .nav-list {
        display: none;
    }

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


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


    .nav-logo {
        width: 10rem;
    }

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


    .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-item-basic {
        border: 3px solid #FB9F89;
        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: 75em) {

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

    .page-z-img {
        width: 80%;
    }

    .page-z-img-second {
        grid-row: 2/3;
        
    }

    .five-box {
        margin: 0 auto;
        max-width: 100rem;
    }

    .five-container {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
    }

    .five-img {
        width: 25rem;
    }

    .five-header,
    .three-header {
        font-size: 3.6rem;
    }

    .five-text,
    .three-text {
        font-size: 2.4rem;
    }

    .hero-trio-container {
        flex-direction: column;
    }

    .hero-main-img {
        height: 32.5rem;
        width: 60rem;
    }

    .hero-duo-container {
        border-right: none;
        padding-right: 0;
    }

    .hero-main-img::after {
        padding-left: 2.4rem;
        padding-top: 0;
    }
    
    
    .intro-container {
        grid-template-columns: 1fr;
        row-gap: 2.4rem;
    }
    
    .row-two {
        grid-row: 2/3;
    }

}    

@media (max-width: 69em) {

    .blog-five-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .blog-five-img {
        width: 80%;
        align-self: center;
    }


    .intro-container {
        grid-template-columns: 1fr;
        row-gap: 2.4rem;
    }
    
    .row-two {
        grid-row: 2/3;
    }


}
    

@media (max-width: 62.5em) {

    .intro {
        padding: 2.4rem 0.6rem;
    }

    .intro-container {
        grid-template-columns: 1fr;
        row-gap: 2.4rem;
    }
    
    .row-two {
        grid-row: 2/3;
    }

    .table-large-mobile, 
    .table-large-mobile thead, 
    .table-large-mobile tbody, 
    .table-large-mobile th, 
    .table-large-mobile td, 
    .table-large-mobile tr {
        display: block;
        width: 100%;
    }

    .table-large-mobile thead {
        display: none; /* Hide table header on mobile */
    }

    .table-large-mobile tr {
        border: 1px solid #ddd;
        margin-bottom: 10px;
        padding: 10px;
        background: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }

    .table-large-mobile td {
        border: none;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-size: 14px;
    }

    .table-large-mobile td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #007bff;
    }


}

@media (max-width: 56.25em) {



    .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;
    }

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


}

@media (max-width: 46.5em) {

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

    .blog-hero-header {
        font-size: 4rem;
        text-align: center;
    }

    .page-z-img {
        width: 95%;
    }

    .three-img {
        width: 25rem;
        justify-self: center;
        align-self: center;
    }

    .header-list-text {
        text-decoration: none;
        font-size: 3.6rem;
        color: #fff;
        padding: 0.6rem 0.6rem;
        width: 30rem;
        text-align: left;
    }

    .three-row-container {
        flex-direction: column;
    }

    .three-row-img {
        width: 80%;
    }
    

}

@media (max-width: 40.5em) {

    .blog-five-pack {
        grid-template-columns: 1fr;
    }

    .blog-five-pack-img {
        width: 90%;
        align-self: center;
    }

    .blog-five-img {
        width: 90%;
    }

    .hero-main-img,
    .hero-secondary-img-one,
    .hero-secondary-img-two {
        width: 30rem;
        height: 20rem;
    
    }

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

    .title-header {
        font-size: 4.8rem;
    }

    .hero-main-img::after,
    .hero-secondary-img-one::after,
    .hero-secondary-img-two::after {
        font-size: 3.6rem;
    }

    .title {
        padding: 1.2rem 0.6rem;
    }

    .table {
        font-size: 1.5rem !important;
    }

    .table-mobile, 
    .table-mobile thead, 
    .table-mobile tbody, 
    .table-mobile th, 
    .table-mobile td, 
    .table-mobile tr {
        display: block;
        width: 100%;
    }

    .table-mobile thead {
        display: none; /* Hide table header on mobile */
    }

    .table-mobile tr {
        border: 1px solid #ddd;
        margin-bottom: 10px;
        padding: 10px;
        background: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }

    .table-mobile td {
        border: none;
        display: flex;
        padding: 10px;
        font-size: 14px;
    }

    .table-mobile td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #007bff;
    }

}

@media (max-width: 37.5em) {

    /* .hero {
        height: 100%;
    } */

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

    .page-span {
        font-size: 1.8rem;
    }

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

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

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

    th, td {
        padding: 0.6rem 0.2rem;
        border: 1px solid #ddd;
    }

}


@media (max-width: 30em) {

    .sidenav {
        border-left: none;
    }


    .nav-logo {
        width: 8rem;
    }

    .intro-link {
        width: 30rem;
    }

    .ballast-text,
    .ballast-text-result,
    .ballast-input {
        font-size: 1.8rem;
    }



}