/* Contact Heading Section */
.contactHeadingSection {
    padding: 32px 20px 64px 20px;
    margin-top: 95px;
}

.contactHeadingSection>h1 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #19C4C4;
    text-align: center;
}

.contactHeadingSection>h2 {
    margin-top: 12px;
    font-size: 48px;
    line-height: 60px;
    font-weight: 700;
    color: var(--secondary2);
    text-align: center;
}

.contactHeadingSection>p {
    margin-top: 24px;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: var(--tertiary1);
    text-align: center;
}

/* Contact Detail Section */
.contactDetailsSection {
    padding: 0 112px 64px 112px;
}

.contactDetailsSection .detailsContainer {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: center;
}

.contactDetailsSection .detailsContainer .imageCotainer {
    width: 48px;
    height: 48px;
}

.contactDetailsSection .detailsContainer .imageCotainer>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.contactDetailsSection .detailsContainer h4 {
    margin-top: 20px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--secondary2);
}

.contactDetailsSection .detailsContainer p {
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--tertiary1);
}

.contactDetailsSection .detailsContainer a {
    padding: 0 2%;
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-decoration: none;
    color: #19C4C4;
}


/* Google map section */
.googleMapSection {
    display: flex;
    justify-content: center;
    align-items: center;
}

.iframeContainer {
    width: 85%;
    height: 516px;
}

.iframeContainer>iframe {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

/* Book a Session */
.bookSessionContainer {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bookSessionContainer .cardContainer {
    position: relative;
    padding: 32px;
    width: 85%;
    background-color: rgba(25, 196, 196, 0.15);
    border-radius: 12px;
}

.bookSessionContainer .cardContainer h2 {
    width: 50%;
    font-size: 32px;
    line-height: 72px;
    font-weight: bold;
    color: #19C4C4;
}

.bookSessionContainer .cardContainer p {
    width: 50%;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    margin-bottom: 20px;
    color: var(--secondary2);
}

.bookSessionContainer .cardContainer button {
    width: 205px;
    height: 51px;
    font-size: 20px;
    font-weight: 600;
    background-color: #19C4C4;
    color: #fff;
    border-radius: 12px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Mobile Screen */
@media only screen and (max-width: 576px) {

    /* Contact Heading Section */
    .contactHeadingSection {
        padding: 32px 16px;
    }

    .contactHeadingSection>h1 {
        font-size: 14px;
        line-height: 20px;
    }

    .contactHeadingSection>h2 {
        font-size: 36px;
        line-height: 44px;
    }

    .contactHeadingSection>p {
        margin-top: 16px;
        font-size: 18px;
        line-height: 28px;
    }

    /* Contact Detail Section */
    .contactDetailsSection {
        padding: 0 16px 64px 16px;
    }

    .contactDetailsSection .officeLocation {
        margin: 40px 0;
    }

    .contactDetailsSection .detailsContainer .imageCotainer {
        width: 40px;
        height: 40px;
    }

    .contactDetailsSection .detailsContainer h4 {
        margin-top: 16px;
        font-size: 18px;
        line-height: 28px;
    }

    .contactDetailsSection .detailsContainer p {
        margin-top: 4px;
        font-size: 16px;
        line-height: 24px;
    }

    .contactDetailsSection .detailsContainer a {
        padding: 0 2%;
        margin-top: 16px;
        font-size: 16px;
        line-height: 24px;
    }

    /* Google map section */
    .iframeContainer {
        width: 95%;
        height: 236px;
    }

    .iframeContainer>iframe {
        border-radius: 8px;
    }

    /* Book a Session */
    .bookSessionContainer {
        margin-top: 32px;
        padding: 0 16px;
    }

    .bookSessionContainer .cardContainer {
        padding: 40px 24px;
        width: 100%;
        border-radius: 16px;
    }

    .bookSessionContainer .cardContainer h2,
    .bookSessionContainer .cardContainer p {
        width: 100%;
    }

    .bookSessionContainer .cardContainer h2 {
        font-size: 24px;
        line-height: 38px;
        font-weight: 700;
        margin-bottom: 16px;
    }

    .bookSessionContainer .cardContainer p {
        margin-bottom: 16px;
        font-size: 16px;
        line-height: 150%;
    }

    .bookSessionContainer .cardContainer button {
        position: relative;
        transform: translate(0%, 0%);
    }
}

/* Tab screen */
@media only screen and (min-width: 576px) and (max-width: 993px) {

    /* Contact Heading Section */
    .contactHeadingSection {
        padding: 32px 20px;
    }

    .contactHeadingSection>h2 {
        font-size: 40px;
    }

    .contactHeadingSection>p {
        font-size: 20px;
        line-height: 30px;
    }

    /* Contact Detail Section */
    .contactDetailsSection {
        padding: 0 16px 60px 16px;
    }

    .contactDetailsSection .detailsContainer .imageCotainer {
        width: 40px;
        height: 40px;
    }

    .contactDetailsSection .detailsContainer h4 {
        margin-top: 16px;
        font-size: 18px;
        line-height: 28px;
    }

    .contactDetailsSection .detailsContainer p {
        margin-top: 4px;
    }

    .contactDetailsSection .detailsContainer a {
        margin-top: 16px;
    }

    /* Google map section */
    .iframeContainer {
        height: 301px;
    }

    /* Book a Session */
    .bookSessionContainer {
        margin-top: 32px;
    }

    .bookSessionContainer .cardContainer {
        width: 90%;
    }

    .bookSessionContainer .cardContainer h2,
    .bookSessionContainer .cardContainer p {
        width: 90%;
    }

    .bookSessionContainer .cardContainer p {
        margin-bottom: 16px;
    }

    .bookSessionContainer .cardContainer button {
        position: relative;
        transform: translate(0%, 0%);
    }
}