@media (max-width: 79em) {

    .about-banner {
        position: absolute;
        transform: translate(-50%);
        left: 50%;
        z-index: -1;
        opacity: 0.5;
        width: 60rem;
    }

    .about-container {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .about-img-box {
        justify-self: center;
    }

}


@media (max-width: 72em) {
    
    /* .nav-menu {
        display: none;
    } */

    .nav-bar {
        font-size: 2.2rem;
        gap: 0.8rem;
    }

    .whatis-container {
        flex-direction: column;
    }

    .whatis-image {
        width: 100%;
    }

    .compare-container {
        grid-template-columns: 1fr;
        gap: 12rem;
        justify-items: center;
    }

    .container-2 {
        justify-self: center;
    }

    .compare-title {
        padding: 1.2rem;
        text-align: center;
    }

}

@media (max-width: 65em) {

    .nav-menu {
        display: none;
    }

    .spacer {
        display: none;
    }

    .header {
        position:relative;
    }

    .menu-btn {
        display: block;
    }

    .hero {
        margin-bottom: 0rem;
        
    }

    .hero-banner {
        height: 40vh;
    }

    .hero-title {
        font-size: 4.8rem;
    }
    
    .hero-caption {
        font-size: 3.2rem;
    }

    .mandala-box::before {
        transform: translate(-50%, -50%) scale(0.75);
    }

    .mandala-item {
        width: 90%;
    }

    .gallery-container {
        grid-template-columns: repeat(2, 1fr);
        height: 60rem;
    }

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

}

@media (max-width: 47em) {


    html {
        font-size: 56%;
    }

    .hero {
        height: auto;
    }

    .hero-container {
        gap: 2.4rem;
    }

    .hero-banner {
        height: 20vh;
    }

    .hero-title {
        font-size: 3.2rem;
    }

    .hero-caption {
        font-size: 2.2rem;
    }

    .hero-button {
        font-size: 2.2rem;
        width: 40%;
    }

    .hero-social {
        width: 7rem;
    }

    .parallax {
        min-height: 40rem;
    }

    .covid {
        padding: 2.4rem 1.2rem;
    }

    .covid-title {
        font-size: 2.2rem;
    }
    
    .covid-text {
        font-size: 1.8rem;
    }

    .whatis-title {
        font-size: 3.2rem;
    }

    .mandala {
        padding: 9.6rem 1.2rem 9.6rem;
    }

    .mandala-item {
        padding: 2.4rem 1.2rem;
    }

    .mandala-title {
        font-size: 2.2rem;
    }

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

    .mandala-box::before {
        display: none;
    }

    .mandala-container {
        gap: 10rem;
    }

    .mandala-item {
        width: 100%;
        align-self: center;
    }
    
    .mandala-item:last-child {
        align-self: center;
    }

    .gallery-container {
        grid-template-columns: 1fr;
        height: 120rem;
    }

    .pricing {
        padding: 4.8rem 1.2rem;
    }

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

    .compare {
        padding: 4.8rem 1.2rem;
    }

    .container-1,
    .container-2 {
      /* height: 60rem; */
      font-size: 1.4rem;
      padding: 2.4rem 1.8rem;
      width: 30rem;
    }

    .compare-title {
        font-size: 3.2rem;
        margin-left: 0;
    }

    .container-1-header,
    .container-2-header {
      font-size: 2.2rem;
    }

    .list-item {
        font-size: 1.8rem;
    }

    .btn {
        font-size: 2rem;
        padding: 1.2rem;
    }

    .menu-btn,
  .exit-btn {
      width: 4rem;
  }

  .parallax {
    /* min-height: 40rem;
    background-image: url("imgs/leavespara.jpg");
    background-attachment: scroll;
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat; */
    display: none;
}

    .page-heading {
        font-size: 4.2rem;
    }

    .page-headers {
        padding: 4.8rem 1.2rem;
    }
}

@media (max-width: 42em) {

    .about-banner {
        width: 30rem;
    }

    .about-img-box {
        justify-self: flex-start;
    }

    .about-img {
        width: 30rem;
    }

    .about-container {
        padding: 9rem 0;
    }


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

    .cta {
        padding: 9.6rem 0.6rem 9.6rem;
    }

    .cta-socials {
        padding: 0.6rem;
    }

    .social-icons {
        width: 6rem;
    }

    .covid-img {
        width: 15rem;
    }
}

@media (max-width: 31em) {
    .hero {
        height: auto;
    }

    .hero-container {
        gap: 2.4rem;
    }

    .hero-banner {
        width: 30rem;
        height: auto;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-caption {
        font-size: 2rem;
    }

    .hero-button {
        font-size: 2rem;
        width: 50%;
        padding: 1.2rem 0.6rem;
    }

    .hero-social {
        width: 5rem;
        padding: 0.6rem
    }

    .parallax {
        /* min-height: 40rem;
        background-image: url("imgs/leavespara.jpg");
        background-attachment: scroll;
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat; */
        display: none;
    }

    .page-heading {
        font-size: 3.6rem;
    }

    .page-info-header {
        font-size: 3.2rem;
    }
}