/* Contact Us */

.contactBanner {
    padding: 7.5% 10% 7.5% 10%;
}

.contactBanner.arabic {
    direction: rtl;
}

.contactBanner h5 {
    color: var(--main);
    font-size: 14px;
    font-family: Plus Jakarta Sans;
    font-weight: 600;
}

.contactBanner h1 {
    color: var(--main);
    font-size: 50px;
    font-family: Plus Jakarta Sans;
    font-weight: 700;
}

.contactBanner h1 span {
    color: var(--main2);
}

.contactInfomration {
    padding: 0% 10% 7.5% 10%;
    display: flex;
}
.contactInfomration.arabic {
    direction: rtl;
}
.contactBlocks {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
}

.contactBlocks h5 {
    color: var(--main);
    font-size: 16px;
    font-family: Plus Jakarta Sans;
    font-weight: 700;
}

.contactBlocks p {
    color: var(--main);
    font-size: 14px;
    font-family: Plus Jakarta Sans;
    font-weight: 500;
}

.contactForm {
    padding: 7.5% 10% 7.5% 10%;
    display: flex;
    align-items: center;
}

.contactForm.arabic {
    direction: rtl;
}

.contactFormPartOne {
    width: 50%;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.contactFormPartTwo {
    width: 50%;
}

.contactFormPartOne ul {
    list-style: none;
    display: flex;
    column-gap: 10px;
}

.contactFormPartTwo form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 25px;
}

.contactFormPartTwo form input {
    width: 40%;
    padding: 15px 9px 15px 9px;
    border-width: 0px 0px 1px 0px;
    border-color: var(--main);
    border-style: solid;
    padding-left: 25px;
    background-repeat: no-repeat;
    background-position: left center;
}

.contactFormPartTwo input#name-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22https://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22%3E%3Cg opacity=%220.8%22%3E%3Cpath d=%22M9.99992 9.99984C12.3011 9.99984 14.1666 8.13436 14.1666 5.83317C14.1666 3.53198 12.3011 1.6665 9.99992 1.6665C7.69873 1.6665 5.83325 3.53198 5.83325 5.83317C5.83325 8.13436 7.69873 9.99984 9.99992 9.99984Z%22 stroke=%22%23194F90%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M17.1582 18.3333C17.1582 15.1083 13.9499 12.5 9.99988 12.5C6.04988 12.5 2.84155 15.1083 2.84155 18.3333%22 stroke=%22%23194F90%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E");
}

.contactFormPartTwo input#email-input {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="https://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"%3E%3Cg opacity="0.8"%3E%3Cpath d="M14.1667 17.0832H5.83341C3.33341 17.0832 1.66675 15.8332 1.66675 12.9165V7.08317C1.66675 4.1665 3.33341 2.9165 5.83341 2.9165H14.1667C16.6667 2.9165 18.3334 4.1665 18.3334 7.08317V12.9165C18.3334 15.8332 16.6667 17.0832 14.1667 17.0832Z" stroke="%23194F90" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M14.1666 7.5L11.5582 9.58333C10.6999 10.2667 9.29158 10.2667 8.43325 9.58333L5.83325 7.5" stroke="%23194F90" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3C/svg%3E');
}

.contactFormPartTwo input#doctor-input {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="https://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"%3E%3Cg opacity="0.8"%3E%3Cpath d="M10.0001 15.1667C11.841 15.1667 13.3334 13.6743 13.3334 11.8333C13.3334 9.99238 11.841 8.5 10.0001 8.5C8.15913 8.5 6.66675 9.99238 6.66675 11.8333C6.66675 13.6743 8.15913 15.1667 10.0001 15.1667Z" stroke="%23194F90" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M10.0057 13.1254L10.0112 10.6328" stroke="%23194F90" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M11.241 11.9053L8.74261 11.8948" stroke="%23194F90" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M6.6666 18.3333H13.3333C16.6833 18.3333 17.2833 16.9917 17.4583 15.3583L18.0833 8.69167C18.3083 6.65833 17.7249 5 14.1666 5H5.83327C2.27494 5 1.6916 6.65833 1.9166 8.69167L2.5416 15.3583C2.7166 16.9917 3.3166 18.3333 6.6666 18.3333Z" stroke="%23194F90" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M6.66675 4.99984V4.33317C6.66675 2.85817 6.66675 1.6665 9.33341 1.6665H10.6667C13.3334 1.6665 13.3334 2.85817 13.3334 4.33317V4.99984" stroke="%23194F90" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M18.0416 9.1665C16.5999 10.2165 14.9999 10.9498 13.3416 11.3665" stroke="%23194F90" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M2.18335 9.3916C3.57502 10.3416 5.09168 11.0166 6.66668 11.3999" stroke="%23194F90" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3C/svg%3E');
}

.contactFormPartTwo input#message-input {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="https://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"%3E%3Cg opacity="0.8"%3E%3Cpath d="M7.08325 8.75H12.9166" stroke="%23194F90" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M5.83341 15.3582H9.16675L12.8751 17.8249C13.4251 18.1916 14.1667 17.7999 14.1667 17.1332V15.3582C16.6667 15.3582 18.3334 13.6916 18.3334 11.1916V6.19157C18.3334 3.69157 16.6667 2.0249 14.1667 2.0249H5.83341C3.33341 2.0249 1.66675 3.69157 1.66675 6.19157V11.1916C1.66675 13.6916 3.33341 15.3582 5.83341 15.3582Z" stroke="%23194F90" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3C/svg%3E');
}

.contactFormPartTwo form input::placeholder {
    color: var(--main);
    font-size: 14px;
    font-family: Plus Jakarta Sans;
    font-weight: 500;
    line-height: 25.6px;
}

.contactFormPartTwo form button {
    width: 30%;
    background-color: var(--main);
    color: var(--main3);
    border-radius: 50px;
    padding: 10px;
    border-color: var(--main);
    color: white;
    font-size: 14px;
    font-family: Plus Jakarta Sans;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 16.8px;
    border: 1px solid;
}

.googleMapScrollContainer {
    width: 100%;
    overflow: auto;
}

.buttonsContiner {
    white-space: nowrap;
    overflow: auto; /* Add overflow property to handle overflow issues */
    display: flex;
}

.googleMapButton {
    padding: 20px; /* Remove margin on buttons */
    background-color: #fafbfe;
    border: 0px;
    color: #194f90;
}
.googleMapContiner iframe {
    display: none;
    border: 0px;
}
.googleMapButton.active {
    background-color: #d0e0f1;
}

.googleMapsSectionContainer.arabic {
    direction: rtl;
}

/* ************************************************************************************************************ */
@media screen and (min-width: 427px) and (max-width: 768px) {
    /* Contact Us */

    .contactBanner {
        padding: 7.5% 10% 7.5% 10%;
    }

    .contactBanner h5 {
        font-size: 12px;
    }

    .contactBanner h1 {
        font-size: 35px;
    }

    .contactBlocks h5 {
        font-size: 14px;
    }

    .contactBlocks p {
        font-size: 12px;
    }

    /* form */
    .contactForm {
        padding: 7.5% 10% 7.5% 10%;
        display: flex;
        align-items: center;
    }

    .contactFormPartOne {
        width: 50%;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }

    .contactFormPartTwo {
        width: 50%;
    }

    .contactFormPartOne ul {
        list-style: none;
        display: flex;
        column-gap: 10px;
    }

    .contactFormPartTwo form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 25px;
    }

    .contactFormPartTwo form input {
        width: 40%;
        padding: 15px 9px 15px 9px;
        border-width: 0px 0px 1px 0px;
        border-color: var(--main);

        padding-left: 25px;
        background-repeat: no-repeat;
        background-position: left center;
    }

    .contactFormPartTwo form input::placeholder {
        font-size: 12px;
    }
    ul li svg {
        width: 40px;
    }
}

/* ***********************************************************************************************8 */
@media screen and (max-width: 426px) {
    /* Contact Us */
    .contactBlocks svg {
        width: 50px;
    }

    ul li svg {
        width: 35px;
    }
    .contactBanner h5 {
        font-size: 10px;
    }

    .contactBanner h1 {
        font-size: 25px;
    }

    .contactBlocks {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 10px;
    }

    .contactBlocks h5 {
        font-size: 14px;
    }

    .contactBlocks p {
        font-size: 10px;
    }

    .contactForm {
        padding: 5%;
    }

    .contactForm {
        display: inline-block;
    }
    .contactFormPartOne {
        width: 100%;
        row-gap: 10px;
    }

    .contactFormPartTwo {
        width: 100%;
    }

    .contactFormPartTwo form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 25px;
    }

    .contactFormPartTwo form input::placeholder {
        color: var(--main);
        font-size: 14px;
        font-family: Plus Jakarta Sans;
        font-weight: 500;
        line-height: 25.6px;
    }

    .contactFormPartTwo form button {
        width: 30%;
        background-color: var(--main);
        color: var(--main3);
        border-radius: 50px;
        padding: 10px;
        border-color: var(--main);
        color: white;
        font-size: 14px;
        font-family: Plus Jakarta Sans;
        font-weight: 500;
        text-transform: capitalize;
        line-height: 16.8px;
    }
}


@media (max-width: 737px) {
    .contactForm {
        flex-wrap: wrap !important;
    }
    .contactFormPartOne {
        width: 100%;
    }
    .contactFormPartTwo {
        width: 100%;
        padding-top: 20px;
    }
    .contactInfomration{
        flex-wrap: wrap;
    }
    .contactBlocks{
        width: 100%;
        padding-bottom: 20px;
    }
    .contactFormPartTwo input{
        width: 100% !important;

    }
}