nav.largeScreeen {
    display: flex;
}

nav.tabAndMobileScreeen {
    display: none;
    background-color: transparent !important;
}

.navigationDrawer>button {
    height: 45px;
    width: 55px;
    background-color: transparent;
    border: solid 1px #475467;
    border-radius: 8px;
}

.navigationDrawer .toggleIcon::before {
    font-size: 30px;
    color: #101828;
}

.navigationDrawer>button:hover .toggleIcon::before {
    font-size: 32px;
    color: #0C60AE;
}

header>nav {
    width: 100vw;
    position: fixed !important;
    z-index: 10;
    top: 0;
}
.heroContainer {
    margin-top: 95px;
}

/* Navigation Starts */
.navContainer {
    background-color: #fdfaf5 !important;
    padding: 32px 32px 18px 32px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navCenterLinks {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navCenterLinks>div {
    padding: 0 12px;
}


.menuText {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    transform: scale(1);
    color: #475467;
    transition: transform .2s ease-in-out;
}

.menuText:hover {
    cursor: pointer;
    color: #0C60AE;
    transform: scale(1.05);
}

.navEndLinks .bookinghub {
    width: 188px;
    height: 44px;
    text-align: center;
    background-color: #101828;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -10px;
    border-radius: 60px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.bookingHubCloudIcon::before {
    margin-bottom: 2px;
    padding-left: 8px;
    vertical-align: bottom;
    font-size: 18px;
    font-weight: 600 !important;
}

.chevronDownIcon::before {
    padding-left: 4px;
    font-size: 14px;
    font-weight: 600 !important;
}


/* YOGA image */
.yogaImageContainer {
    width: 70%;
    height: 328px;
    padding: 20px;
}

.yogaImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.servicesContainer,
.newServicesContainer {
    position: relative;
}

/* Service */
.menuOptions {
    width: 30%;
}

.servicesContainer {
    width: 100px;
    height: 25px;
}

.servicesContainer>a {
    width: 100px;
    height: 45px;
}

.serviceDropdownMenuContainer {
    width: 835px;
    height: 380px;
    position: relative;
    z-index: 10;
    backdrop-filter: blur(100px);
    box-shadow: 6px 6px 15px #9b9b9b42;
    border-radius: 12px;
    padding: 20px;
    display: none;
}

.servicesContainer:hover .serviceDropdownMenuContainer {
    display: flex;
    justify-content: space-between;
}

.servicesheading {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #0C60AE;
}

.menuOptions {
    padding: 12px;
}

.menu {
    padding-top: 24px !important;
}

/* INDIVIDUAL, RELATIONSHIP, TEEN and CHILDREN, GROUP THERAPY, GERIATRICS  */
/* Specific Disorder, Life Crises Specific Event, Relationship Issues, Career */
.individual,
.relationship,
.teenAndChildren,
.neurodevelopmentalDisorders,
.groupTherapy,
.geriatrics {
    position: relative;
    width: 100%;
}

.individual>a,
.relationship>a,
.teenAndChildren>a,
.groupTherapy>a,
.geriatrics>a {
    padding: 12px 0 !important;
}

.individualMenuOptions,
.relationshipMenuOptions,
.teenAndChildrenMenuOptions,
.neurodevelopmentalDisordersMenuOptions,
.groupTherapyMenuOptions,
.geriatricsMenuOptions,
.specificDisorderMenuOptions,
.lifeCrisesSpecificEventMenuOptions,
.relationshipIssuesMenuOptions,
.careerMenuOptions {
    width: 300px;
    position: absolute;
    z-index: 1;
    padding: 12px 22px 22px 22px;
    background-color: #fff;
    border-radius: 12px;
    display: none;
    box-shadow: 6px 6px 15px #9b9b9b42;
}

.individualMenuOptions a {
    padding: 12px 0 !important;
}

.relationshipMenuOptions a,
.teenAndChildrenMenuOptions a,
.neurodevelopmentalDisordersMenuOptions a,
.groupTherapyMenuOptions a,
.geriatricsMenuOptions a,
.specificDisorderMenuOptions a,
.lifeCrisesSpecificEventMenuOptions a,
.relationshipIssuesMenuOptions a,
.careerMenuOptions a {
    padding: 12px 0 !important;
    border-bottom: dashed 1px #D0D5DD;
}

.individual:hover .individualMenuOptions,
.relationship:hover .relationshipMenuOptions,
.teenAndChildren:hover .teenAndChildrenMenuOptions,
.neurodevelopmentalDisorders:hover .neurodevelopmentalDisordersMenuOptions,
.groupTherapy:hover .groupTherapyMenuOptions,
.geriatrics:hover .geriatricsMenuOptions,
.specificDisorder:hover .specificDisorderMenuOptions,
.lifeCrisesSpecificEvent:hover .lifeCrisesSpecificEventMenuOptions,
.relationshipIssues:hover .relationshipIssuesMenuOptions,
.career:hover .careerMenuOptions {
    display: block;
}

/* INDIVIDUAL */
.individualMenuOptions {
    top: -10px;
    left: 60%;
}

/* Specific Disorder, Life Crises Specific Event, Relationship Issues, Career */
.specificDisorder,
.lifeCrisesSpecificEvent,
.relationshipIssues,
.career {
    position: relative;
    background-color: transparent;
    width: 350px;
}

.specificDisorder>a,
.lifeCrisesSpecificEvent>a,
.relationshipIssues>a,
.career>a {
    width: 255px;
    padding: 12px 0 !important;
    border-bottom: dashed 1px #D0D5DD;
}

.specificDisorder>a .chevronDownIcon {
    padding-left: 112px;
}

.lifeCrisesSpecificEvent>a .chevronDownIcon {
    padding-left: 52px;
}

.relationshipIssues>a .chevronDownIcon {
    padding-left: 96px;
}

.career>a .chevronDownIcon {
    padding-left: 179px;
}

.specificDisorderMenuOptions,
.lifeCrisesSpecificEventMenuOptions,
.relationshipIssuesMenuOptions,
.careerMenuOptions {
    left: 82%;
    top: -24%;
}


/* RELATIONSHIP */
.relationshipMenuOptions {
    top: 0px;
    left: 60%;
}

/* TEEN and CHILDREN */
.teenAndChildrenMenuOptions {
    top: 0px;
    left: 75%;
}

/* Neurodevelopmental Disorders */
.neurodevelopmentalDisorders {
    width: 350px;
    background-color: transparent;
}

.neurodevelopmentalDisorders>a {
    width: 255px;
}

.neurodevelopmentalDisorders>div {
    position: absolute;
    top: -303px;
    left: 62%;
    height: 450px;
    width: 150%;
}

.neurodevelopmentalDisorders>a .chevronDownIcon {
    padding-left: 20px;
}

.neurodevelopmentalDisordersMenuOptions {
    top: 61px;
    left: 14%;
}

/* GROUP THERAPY */
.groupTherapyMenuOptions {
    top: 10px;
    left: 65%;
}

/* GERIATRICS */
.geriatricsMenuOptions {
    top: -10px;
    left: 60%;
}


/* New services */
.newServicesStar::before {
    color: #ffce22;
    padding-left: 4px;
    font-size: 18px;
    font-weight: 600 !important;
}

.newServicesContainer {
    position: relative;
    width: 170px;
    height: 25px;
}

.newServicesContainer>a {
    height: 45px;
}

.newServicesMenuOptions {
    width: 300px;
    position: relative;
    z-index: 10;
    padding: 12px 22px 22px 22px;
    backdrop-filter: blur(100px);
    box-shadow: 6px 6px 15px #9b9b9b42;
    border-radius: 12px;
    display: none;
}

.newServicesMenuOptions>a {
    padding: 12px 0 !important;
    border-bottom: dashed 1px #D0D5DD;

}

.newServicesContainer:hover .newServicesMenuOptions {
    display: block;
}

.navEndLinks {
    padding-top: 12px;
}

.joinWhatsappCommunity i::before {
    font-size: 16px;
    color: #0CAA08;
}

.bookingHubModal {
    border: solid 1px red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: space-around;
    align-items: center;
}

.modalContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bookingHubCard {
    padding: 30px;
    width: 560px !important;
    height: 310px !important;
    background-color: #101828 !important;
    margin: 0 10px;
    border-radius: 24px !important;
}

.bookingHubCard h5 {
    color: white;
    font-size: 36px;
    font-weight: bold;
    line-height: 40px;
    margin-bottom: 20px;
}

.bookingHubCard p {
    color: white;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 30px;
}

.bookingBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer !important;
    height: 64px;
    font-size: 24px;
    border-radius: 60px !important;
    border: none !important;
    color: #FFF;
    background-color: #9747FF;
}

.bookingBtn:hover {
    color: #9747FF;
    background-color: #fff;
}

@media only screen and (max-width: 576px) {
    .logoContainer img {
        height: 25px;
        width: 100px;
    }

    nav.largeScreeen {
        display: none;
    }

    nav.tabAndMobileScreeen {
        /* width: 100vw;
        position: fixed !important;
        z-index: 10; */
        background-color: #fdfaf5 !important;
        display: block;
        padding: 21px 20px 6px 20px !important;
    }

    .offcanvas {
        overflow-y: scroll;
    }

    .offcanvas::-webkit-scrollbar {
        display: none;
        scrollbar-width: 0;
    }

    .offcanvas {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .navCenterLinks {
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }


    .servicesContainer {
        width: 100%;
        height: auto;
    }

    .servicesContainer>a {
        width: 100px;
        height: auto;
    }

    a>.chevronDownIcon {
        padding: 0 !important;
    }

    .serviceDropdownMenuContainer {
        width: 100%;
        height: auto;
        display: none;
        box-shadow: 6px 6px 15px #9b9b9b42;
        border: solid 1px #9b9b9b42;
    }


    .servicesContainer:hover .serviceDropdownMenuContainer {
        display: none;
    }

    .menuOptions {
        width: 100%;
        padding: 0;
    }

    .specificDisorder,
    .lifeCrisesSpecificEvent,
    .relationshipIssues,
    .career {
        width: 100% !important;
    }

    .individualMenuOptions,
    .relationshipMenuOptions,
    .teenAndChildrenMenuOptions,
    .neurodevelopmentalDisordersMenuOptions,
    .groupTherapyMenuOptions,
    .geriatricsMenuOptions,
    .specificDisorderMenuOptions,
    .lifeCrisesSpecificEventMenuOptions,
    .relationshipIssuesMenuOptions,
    .careerMenuOptions {
        width: 100% !important;
        height: auto;
        position: relative !important;
        left: 0;
        box-shadow: 6px 6px 15px #9b9b9b42;
        border: solid 1px #9b9b9b42;
    }

    .individual:hover .individualMenuOptions,
    .relationship:hover .relationshipMenuOptions,
    .teenAndChildren:hover .teenAndChildrenMenuOptions,
    .neurodevelopmentalDisorders:hover .neurodevelopmentalDisordersMenuOptions,
    .groupTherapy:hover .groupTherapyMenuOptions,
    .geriatrics:hover .geriatricsMenuOptions,
    .specificDisorder:hover .specificDisorderMenuOptions,
    .lifeCrisesSpecificEvent:hover .lifeCrisesSpecificEventMenuOptions,
    .relationshipIssues:hover .relationshipIssuesMenuOptions,
    .career:hover .careerMenuOptions {
        display: none;
    }

    /* RELATIONSHIP */
    .relationshiMpenuOptions {
        top: 0px;
        left: 60%;
    }

    /* TEEN and CHILDREN */
    .teenAndChildrenMenuOptions {
        top: 0px;
        left: 0;
    }

    /* Neurodevelopmental Disorders */
    .neurodevelopmentalDisorders {
        width: 100%;
        background-color: transparent;
        top: 0;
        left: 0;
    }

    .neurodevelopmentalDisorders>a {
        width: 100%;
    }

    .neurodevelopmentalDisorders>div {
        position: relative !important;
        height: auto;
        width: 100%;
        top: 0;
        left: 0;
    }


    .neurodevelopmentalDisordersMenuOptions {
        top: 0;
        left: 0;
    }

    /* GROUP THERAPY */
    .groupTherapyMenuOptions {
        top: 0;
        left: 0;
    }

    /* GERIATRICS */
    .geriatricsMenuOptions {
        top: 0;
        left: 0;
    }

    /* NEW SERVICES */
    .newServicesContainer {
        width: 100%;
        height: auto;
    }

    .newServicesContainer>a {
        height: auto;
    }

    .newServicesMenuOptions {
        width: 100%;
        height: auto;
    }

    .newServicesContainer:hover .newServicesMenuOptions {
        display: none;
    }

    .joinWhatsappCommunity {
        padding: 0 12px !important;
        margin-bottom: 16px;
    }

    .modalContainer {
        flex-direction: column;
    }

    #bookinghub {
        padding: 0 12px !important;
        border: none;
    }

    #bookinghub:hover {
        background-color: transparent;
    }

    .bookingHubCard {
        padding: 10px;
        width: 343px !important;
        height: 297px !important;
        border-radius: 19px !important;
        margin: 10px 0;
    }

    .bookingHubCard h5 {
        font-size: 26px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .bookingHubCard p {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 24px;
    }

    .bookingBtn {
        margin: 0 12px !important;
    }

    .bookingBtn {
        height: 45px;
        font-size: 16px;
        border-radius: 40px !important;
    }
}

@media only screen and (min-width: 576px) and (max-width: 992px) {
    nav.largeScreeen {
        display: none;
    }

    nav.tabAndMobileScreeen {
        /* width: 100vw;
        position: fixed !important;
        z-index: 10; */
        display: block;
        background-color: #fdfaf5 !important;
        padding: 20px 32px 15.5px 32px !important;
    }

    .offcanvas {
        overflow-y: scroll;
    }

    .offcanvas::-webkit-scrollbar {
        display: none;
        scrollbar-width: 0;
    }

    .offcanvas {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .navCenterLinks {
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }

    .servicesContainer {
        width: 100%;
        height: auto;
    }

    .servicesContainer>a {
        width: 100px;
        height: auto;
    }

    a>.chevronDownIcon {
        padding: 0 !important;
    }

    .serviceDropdownMenuContainer {
        width: 100%;
        height: auto;
        display: none;
        box-shadow: 6px 6px 15px #9b9b9b42;
        border: solid 1px #9b9b9b42;
    }


    .servicesContainer:hover .serviceDropdownMenuContainer {
        display: none;
    }

    .menuOptions {
        width: 100%;
        padding: 0;
    }

    .specificDisorder,
    .lifeCrisesSpecificEvent,
    .relationshipIssues,
    .career {
        width: 100% !important;
    }

    .individualMenuOptions,
    .relationshipMenuOptions,
    .teenAndChildrenMenuOptions,
    .neurodevelopmentalDisordersMenuOptions,
    .groupTherapyMenuOptions,
    .geriatricsMenuOptions,
    .specificDisorderMenuOptions,
    .lifeCrisesSpecificEventMenuOptions,
    .relationshipIssuesMenuOptions,
    .careerMenuOptions {
        width: 100% !important;
        height: auto;
        position: relative !important;
        left: 0;
        box-shadow: 6px 6px 15px #9b9b9b42;
        border: solid 1px #9b9b9b42;
    }

    .individual:hover .individualMenuOptions,
    .relationship:hover .relationshipMenuOptions,
    .teenAndChildren:hover .teenAndChildrenMenuOptions,
    .neurodevelopmentalDisorders:hover .neurodevelopmentalDisordersMenuOptions,
    .groupTherapy:hover .groupTherapyMenuOptions,
    .geriatrics:hover .geriatricsMenuOptions,
    .specificDisorder:hover .specificDisorderMenuOptions,
    .lifeCrisesSpecificEvent:hover .lifeCrisesSpecificEventMenuOptions,
    .relationshipIssues:hover .relationshipIssuesMenuOptions,
    .career:hover .careerMenuOptions {
        display: none;
    }

    /* RELATIONSHIP */
    .relationshiMpenuOptions {
        top: 0px;
        left: 60%;
    }

    /* TEEN and CHILDREN */
    .teenAndChildrenMenuOptions {
        top: 0px;
        left: 0;
    }

    /* Neurodevelopmental Disorders */
    .neurodevelopmentalDisorders {
        width: 100%;
        background-color: transparent;
        top: 0;
        left: 0;
    }

    .neurodevelopmentalDisorders>a {
        width: 100%;
    }

    .neurodevelopmentalDisorders>div {
        position: relative !important;
        height: auto;
        width: 100%;
        top: 0;
        left: 0;
    }


    .neurodevelopmentalDisordersMenuOptions {
        top: 0;
        left: 0;
    }

    /* GROUP THERAPY */
    .groupTherapyMenuOptions {
        top: 0;
        left: 0;
    }

    /* GERIATRICS */
    .geriatricsMenuOptions {
        top: 0;
        left: 0;
    }

    /* NEW SERVICES */
    .newServicesContainer {
        width: 100%;
        height: auto;
    }

    .newServicesContainer>a {
        height: auto;
    }

    .newServicesMenuOptions {
        width: 100%;
        height: auto;
    }

    .newServicesContainer:hover .newServicesMenuOptions {
        display: none;
    }

    .joinWhatsappCommunity {
        padding: 0 12px !important;
        margin-bottom: 16px;
    }

    .modalContainer {
        flex-direction: column;
    }

    #bookinghub {
        padding: 0 12px !important;
        border: none;
    }

    #bookinghub:hover {
        background-color: transparent;
    }

    .bookingHubCard {
        padding: 10px;
        width: 300px !important;
        height: 200px !important;
        border-radius: 19px !important;
    }

    .bookingHubCard h5 {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .bookingHubCard p {
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 16px;
    }

    .bookingBtn {
        height: 45px;
        font-size: 16px;
        border-radius: 40px !important;
    }

}