
@media (max-width: 93.75em) {


    .nav-menu {
        display: none;
    }
    
    .open-nav {
        display: block;
    }

}

@media (max-width: 86em) {


    .hero-img {
        width: 60rem;
        position: absolute;
        bottom: -60%;
        left: -25%;
    }

}

@media (max-width: 75em) {

    .events {
        padding: 4.8rem 1.2rem;
    }

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

    .events-item {
        width: 60rem;
        justify-self: center;
        align-self: center;
    }

}

@media (max-width: 68.75em) {

    .hero::before {
        display: none;
    }

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

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

    .mobile-hero {
        display: block;
    }

    .slides {
        padding: 9.6rem 4.8rem 9.6rem;
    }

    .parallax1,
    .parallax2 {
        height: 40rem;
    }

    .parallax2 {
        background-position: center;
    }

    .grid-item {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
    }

    .grid-bottom {
        grid-row: 2/3;
    }

    .prevtest,
    .nexttest {
        display: none;
    }

    .home-about {
        padding: 9.6rem 0.6rem;
    }

}


@media (max-width: 62em) {

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

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

}


@media (max-width: 53.5em)  {

    .home-about {
        padding: 9.6rem 0.6rem;
    }

    .home-about-container {
        flex-direction: column;
    }

    .home-about-img-box {
        justify-content: center;
        align-items: center;
        margin: auto;
    }


    html {
        font-size: 58%;
    }

    .header-logo {
        width: 19rem;
    }

    .hero-info-box {
        padding: 1.2rem 0.6rem;
    }

    .hero-gif {
        display: none;
    }

    .prev, .next {
        font-size: 6rem;
        top: 40%
    }

    .cards {
        padding: 9.6rem 1.2rem;
    }

    .cards-title-box {
        max-width: 40rem;
    }

    .card-item {
        padding: 1.2rem 0.6rem;
        max-width: 40rem;
    }

    .grid-caption {
        text-align: center;
    }

    .grid-img {
        width: 30rem;
    }

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

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

    .page-heading,
    .indian-page-headings {
        padding: 14.4rem 1.2rem 4.8rem;
    }

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

    .indian-page-heading {
        font-size: 4.8rem;
        color: #3c5026;
    }

    .aroma-parallax1,
    .massage-parallax5,
    .massage-parallax4,
    .massage-parallax3,
    .massage-parallax2,
    .massage-parallax1,
    .reflex-parallax6,
    .reflex-parallax5,
    .reflex-parallax4,
    .reflex-parallax3,
    .reflex-parallax2,
    .reflex-parallax1 {
        height: 40rem;
    }

    .aroma-parallax1 {
        background-position: center;
    }

    .massage-parallax5 {
        background-position: center;
    }

    .reflex-parallax4 {
        background-position: 25%;
    }

    .massage-parallax1 {
        background-position: 45%;
    }

    .reflex-parallax6 {
        background-position: 60%;
    }

    .massage-parallax4 {
        background-position: 70%;
    }

    .reflex-parallax5 {
        background-position: 52%;
    }

    .reflex-parallax3 {
        background-position: 70%;   
    }

    .massage-parallax3 {
        background-position: 25%;
    }

    .reflex-parallax1 {
        background-position: 40%;
    }

    .reflex-parallax2 {
        background-position: 60%;
    }

    .massage-parallax2 {
        background-position: 40%;
    }

    .trimester-cards-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 3.6rem;
    }

    .tabbed-container {
        grid-template-columns: repeat(1,1fr);
    }

    .tabbed-text-box {
        grid-column: 1/2;
    }

    .tabbed {
        padding: 4.8rem 0.6rem;
    }

    .cta {
        padding: 14.4rem 1.2rem 9.6rem;
    }


    .bullet-points {
        padding: 9.6rem 1.2rem;
    }

    .bullet-points-container {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        align-items: center;
        justify-content: center;
    }

    .bullet-pints-row-one {
        margin-bottom: 2rem;
    }

    .bullet-points-list {
        text-align: center;
    }

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

    .testimonials {
        padding: 0rem 0.6rem 14.4rem;
    }

}


@media (max-width: 37.5em) {

    .events-item {
        width: 35rem;
    }

    .events-date {
        font-size: 2.4rem;
    }

    .events-header {
        font-size: 2.4rem;
    }

}


@media (max-width: 34.5em) {

    html {
        font-size: 50%;
    }

    .hero::after,
    .hero-box::after,
    .hero-info-box::after {
        display: none;
    }

    .hero {
        padding: 4.8rem 0.6rem;
    }

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

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

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

    .hero-info-box {
        max-width: 40rem;
        padding: 1.2rem 0.6rem;
    }

    .hero-button {
        align-self: center;
    }

    .hero-text-caption {
        text-align: center;
    }

    .mobile-hero-img {
        max-width: 35rem;
    }

    .slides {
        padding: 9.6rem 1.2rem;
    }

    .home-about {
        padding: 9.6rem 0.6rem;
    }

    .prev, .next {
        font-size: 4rem;
        top: 40%
    }

    .cards-title-box {
        max-width: 30rem;
    }

    .card-item {
        padding: 1.2rem 0.6rem;
        max-width: 30rem;
    }

    .parallax2 {
        background-position:70%;
    }

    .grid-btn {
        padding: 0.6rem 1.2rem;
        width:14rem;
        text-align: center;
    }
}