/* =========================================================
   HIMALAYA MEDICAL SERVICES
   CONTACT PAGE CSS
   ========================================================= */


/* =========================================================
   1. CONTACT HERO SECTION
   ========================================================= */

.contact-hero-section {

    position: relative;

    overflow: hidden;

    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            #F7FAFD 0%,
            #EEF6FF 100%
        );

}


.contact-hero-container {

    display: grid;

    grid-template-columns:
        1fr
        0.9fr;

    align-items: center;

    gap: 70px;

}


.contact-hero-content {

    max-width: 650px;

}


.contact-hero-content h1 {

    margin-bottom: 22px;

    color: #123B70;

    font-size: clamp(
        42px,
        5vw,
        64px
    );

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;

}


.contact-hero-content h1 span {

    display: block;

    color: #2F80ED;

}


.contact-hero-content > p {

    max-width: 620px;

    margin-bottom: 30px;

    color: #5B6B82;

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================================
   2. CONTACT HERO ACTIONS
   ========================================================= */

.contact-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

}


.contact-hero-actions .btn {

    min-width: 160px;

}


/* =========================================================
   3. CONTACT HERO VISUAL
   ========================================================= */

.contact-hero-visual {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.contact-hero-visual::before {

    content: "";

    position: absolute;

    top: -30px;

    right: -20px;

    width: 150px;

    height: 150px;

    border: 25px solid rgba(47, 128, 237, 0.08);

    border-radius: 50%;

}


.contact-hero-visual::after {

    content: "";

    position: absolute;

    bottom: -30px;

    left: -20px;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: rgba(50, 196, 141, 0.10);

}


.contact-hero-visual img {

    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

    max-width: 560px;

    height: 420px;

    object-fit: cover;

    border-radius:
        24px
        80px
        24px
        24px;

    box-shadow:
        0 25px 55px rgba(18, 59, 112, 0.15);

}


/* =========================================================
   4. CONTACT DETAILS SECTION
   ========================================================= */

.contact-details-section {

    background: #FFFFFF;

}


/* =========================================================
   5. CONTACT CARDS GRID
   ========================================================= */

.contact-cards-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

}


/* =========================================================
   6. CONTACT INFO CARD
   ========================================================= */

.contact-info-card {

    display: flex;

    flex-direction: column;

    min-height: 260px;

    padding: 28px 24px;

    background: #FFFFFF;

    border: 1px solid #D8E5F2;

    border-radius: 18px;

    box-shadow:
        0 6px 22px rgba(18, 59, 112, 0.04);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.contact-info-card:hover {

    transform: translateY(-6px);

    border-color: rgba(47, 128, 237, 0.30);

    box-shadow:
        0 18px 35px rgba(18, 59, 112, 0.09);

}


/* =========================================================
   7. CONTACT INFO ICON
   ========================================================= */

.contact-info-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 12px;

    background: #EAF3FF;

    color: #2F80ED;

    font-size: 20px;

}


/* =========================================================
   8. CONTACT INFO CONTENT
   ========================================================= */

.contact-info-content {

    display: flex;

    flex-direction: column;

}


.contact-info-content > span {

    margin-bottom: 7px;

    color: #1769C2;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.contact-info-content h3 {

    margin-bottom: 10px;

    color: #123B70;

    font-size: 19px;

    font-weight: 700;

}


.contact-info-content p {

    margin-bottom: 14px;

    color: #5B6B82;

    font-size: 13px;

    line-height: 1.7;

}


.contact-info-content a {

    width: fit-content;

    margin-top: auto;

    color: #1769C2;

    font-size: 13px;

    font-weight: 700;

}


.contact-info-content a:hover {

    color: #2F80ED;

}


/* =========================================================
   9. ENQUIRY SECTION
   ========================================================= */

.enquiry-section {

    background: #F7FAFD;

}


.enquiry-container {

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    align-items: start;

    gap: 80px;

}


/* =========================================================
   10. ENQUIRY CONTENT
   ========================================================= */

.enquiry-content {

    max-width: 560px;

    padding-top: 20px;

}


.enquiry-content .section-title {

    margin-bottom: 22px;

}


.enquiry-content > p {

    margin-bottom: 30px;

    color: #5B6B82;

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================================
   11. ENQUIRY POINTS
   ========================================================= */

.enquiry-points {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


.enquiry-point {

    display: flex;

    align-items: flex-start;

    gap: 14px;

}


.enquiry-point > span {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    margin-top: 2px;

    border-radius: 50%;

    background: rgba(50, 196, 141, 0.12);

    color: #32C48D;

    font-size: 12px;

    font-weight: 800;

}


.enquiry-point strong {

    display: block;

    margin-bottom: 4px;

    color: #123B70;

    font-size: 14px;

    font-weight: 700;

}


.enquiry-point p {

    color: #5B6B82;

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================================
   12. ENQUIRY FORM WRAPPER
   ========================================================= */

.enquiry-form-wrapper {

    padding: 35px;

    background: #FFFFFF;

    border: 1px solid #D8E5F2;

    border-radius: 20px;

    box-shadow:
        0 12px 35px rgba(18, 59, 112, 0.07);

}


/* =========================================================
   13. ENQUIRY FORM
   ========================================================= */

.enquiry-form {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;

}


.form-group {

    display: flex;

    flex-direction: column;

}


.form-group:nth-last-of-type(2),
.form-group:nth-last-of-type(1) {

    grid-column: span 2;

}


/* =========================================================
   14. FORM LABEL
   ========================================================= */

.form-label {

    margin-bottom: 8px;

    color: #172B4D;

    font-size: 12px;

    font-weight: 700;

}


.form-label span {

    color: #E55353;

}


/* =========================================================
   15. FORM CONTROLS
   ========================================================= */

.form-control {

    width: 100%;

    min-height: 48px;

    padding: 12px 14px;

    border: 1px solid #D8E5F2;

    border-radius: 8px;

    outline: none;

    background: #FFFFFF;

    color: #172B4D;

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}


.form-control::placeholder {

    color: #8A98AA;

}


.form-control:focus {

    border-color: #2F80ED;

    box-shadow:
        0 0 0 3px rgba(47, 128, 237, 0.10);

}


textarea.form-control {

    min-height: 130px;

    resize: vertical;

    line-height: 1.6;

}


select.form-control {

    cursor: pointer;

}


/* =========================================================
   16. ENQUIRY SUBMIT
   ========================================================= */

.enquiry-submit {

    grid-column: span 2;

    width: 100%;

    min-height: 50px;

    margin-top: 2px;

    border: none;

    cursor: pointer;

}


.enquiry-submit:disabled {

    opacity: 0.65;

    cursor: not-allowed;

}


/* =========================================================
   17. FORM STATUS
   ========================================================= */

.form-status {

    grid-column: span 2;

    display: none;

    padding: 12px 14px;

    border-radius: 8px;

    font-size: 12px;

    line-height: 1.5;

}


.form-status.success {

    display: block;

    background: rgba(50, 196, 141, 0.10);

    border: 1px solid rgba(50, 196, 141, 0.25);

    color: #218B65;

}


.form-status.error {

    display: block;

    background: rgba(229, 83, 83, 0.08);

    border: 1px solid rgba(229, 83, 83, 0.20);

    color: #C53F3F;

}


/* =========================================================
   18. LOCATION SECTION
   ========================================================= */

.location-section {

    background: #FFFFFF;

}


.location-container {

    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    align-items: center;

    gap: 70px;

}


.location-content {

    max-width: 520px;

}


.location-content .section-title {

    margin-bottom: 20px;

}


.location-content > p {

    margin-bottom: 20px;

    color: #5B6B82;

    font-size: 14px;

    line-height: 1.8;

}


.location-content address {

    margin-bottom: 25px;

    padding-left: 16px;

    border-left: 3px solid #2F80ED;

    color: #172B4D;

    font-size: 13px;

    font-style: normal;

    line-height: 1.8;

}


/* =========================================================
   19. LOCATION MAP
   ========================================================= */

.location-map {

    position: relative;

    min-height: 430px;

    overflow: hidden;

    border: 1px solid #D8E5F2;

    border-radius: 20px;

    background: #EEF6FF;

}


.location-map iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: none;

}


.map-placeholder {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background:
        linear-gradient(
            135deg,
            #EEF6FF,
            #F7FAFD
        );

    text-align: center;

    pointer-events: none;

}


.map-placeholder span {

    font-size: 35px;

}


.map-placeholder strong {

    color: #123B70;

    font-size: 17px;

}


.map-placeholder small {

    color: #5B6B82;

    font-size: 11px;

}


/* =========================================================
   20. CONTACT CTA
   ========================================================= */

.contact-cta-section {

    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            #123B70 0%,
            #1769C2 100%
        );

}


.contact-cta-content {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

}


.contact-cta-content .section-label {

    color: #A9D1FF;

}


.contact-cta-content h2 {

    margin-bottom: 18px;

    color: #FFFFFF;

    font-size: clamp(
        32px,
        4vw,
        50px
    );

    font-weight: 800;

    line-height: 1.15;

}


.contact-cta-content h2 span {

    color: #8FC4FF;

}


.contact-cta-content > p {

    max-width: 680px;

    margin: 0 auto 30px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   21. CTA ACTIONS
   ========================================================= */

.contact-cta-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

}


/* =========================================================
   22. OUTLINE WHITE BUTTON
   ========================================================= */

.btn-outline-white {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 12px 24px;

    border: 1px solid rgba(255, 255, 255, 0.40);

    border-radius: 8px;

    background: transparent;

    color: #FFFFFF;

    font-size: 14px;

    font-weight: 700;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.btn-outline-white:hover {

    transform: translateY(-2px);

    background: rgba(255, 255, 255, 0.10);

    border-color: #FFFFFF;

}


/* =========================================================
   23. LARGE TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .contact-hero-container {

        gap: 45px;

    }


    .contact-cards-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .enquiry-container {

        gap: 45px;

    }

}


/* =========================================================
   24. TABLET
   ========================================================= */

@media (max-width: 992px) {

    .contact-hero-section {

        padding: 70px 0;

    }


    .contact-hero-container {

        grid-template-columns: 1fr;

    }


    .contact-hero-content {

        max-width: 750px;

        margin: 0 auto;

        text-align: center;

    }


    .contact-hero-content h1 {

        font-size: 50px;

    }


    .contact-hero-content > p {

        margin-inline: auto;

    }


    .contact-hero-actions {

        justify-content: center;

    }


    .contact-hero-visual {

        max-width: 650px;

        width: 100%;

        margin: 0 auto;

    }


    .enquiry-container {

        grid-template-columns: 1fr;

    }


    .enquiry-content {

        max-width: 750px;

        margin: 0 auto;

        padding-top: 0;

        text-align: center;

    }


    .enquiry-points {

        align-items: flex-start;

        max-width: 500px;

        margin: 0 auto;

        text-align: left;

    }


    .location-container {

        grid-template-columns: 1fr;

    }


    .location-content {

        max-width: 750px;

        margin: 0 auto;

        text-align: center;

    }


    .location-content address {

        text-align: left;

        max-width: 400px;

        margin-left: auto;

        margin-right: auto;

    }


    .location-map {

        max-width: 750px;

        width: 100%;

        margin: 0 auto;

    }

}


/* =========================================================
   25. MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .contact-hero-section {

        padding: 55px 0 65px;

    }


    .contact-hero-content h1 {

        font-size: 38px;

        letter-spacing: -1px;

    }


    .contact-hero-content > p {

        font-size: 14px;

    }


    .contact-hero-actions {

        flex-direction: column;

        width: 100%;

    }


    .contact-hero-actions .btn {

        width: 100%;

    }


    .contact-hero-visual img {

        height: 330px;

        border-radius:
            20px
            60px
            20px
            20px;

    }


    .contact-cards-grid {

        grid-template-columns: 1fr;

    }


    .contact-info-card {

        min-height: auto;

        padding: 24px 22px;

    }


    .enquiry-form-wrapper {

        padding: 23px;

        border-radius: 16px;

    }


    .enquiry-form {

        grid-template-columns: 1fr;

        gap: 17px;

    }


    .form-group:nth-last-of-type(2),
    .form-group:nth-last-of-type(1) {

        grid-column: span 1;

    }


    .enquiry-submit {

        grid-column: span 1;

    }


    .form-status {

        grid-column: span 1;

    }


    .location-map {

        min-height: 320px;

    }


    .contact-cta-section {

        padding: 65px 0;

    }


    .contact-cta-content h2 {

        font-size: 34px;

    }


    .contact-cta-actions {

        flex-direction: column;

    }


    .contact-cta-actions .btn,
    .contact-cta-actions .btn-outline-white {

        width: 100%;

    }

}


/* =========================================================
   26. EXTRA SMALL DEVICES
   ========================================================= */

@media (max-width: 400px) {

    .contact-hero-content h1 {

        font-size: 34px;

    }


    .contact-hero-visual img {

        height: 290px;

    }


    .enquiry-form-wrapper {

        padding: 18px;

    }


    .location-map {

        min-height: 280px;

    }

}