/* Haridwar Pandit Booking: Contact Us & Pandit Booking page */
.hpb-contact-page {
    padding: 64px 0 82px;
    background: linear-gradient(180deg,#fffdf8 0%,#f5fbf6 100%);
    color: #203329
}

.hpb-container {
    width: min(1180px,calc(100% - 36px));
    margin-inline: auto
}

.hpb-contact-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(68px,9vw,112px) 0;
    color: #fff;
    background-image: url('../image/contact.png');
}

    .hpb-contact-hero:before, .hpb-contact-hero:after {
        content: "";
        position: absolute;
        z-index: -1;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 50%;
        pointer-events: none
    }

    .hpb-contact-hero:before {
        width: 380px;
        height: 380px;
        right: -90px;
        top: -170px
    }

    .hpb-contact-hero:after {
        width: 260px;
        height: 260px;
        right: 70px;
        bottom: -180px
    }

.hpb-contact-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,rgba(0,25,16,.18),transparent 80%)
}

.hpb-contact-hero__content {
    position: relative
}

.hpb-eyebrow, .hpb-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #d6aa50;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

.hpb-contact-hero h1 {
    max-width: 850px;
    margin: 16px 0 14px;
    color: #fff;
    font-size: clamp(2.15rem,5vw,3.8rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.035em
}

.hpb-contact-hero__content > p {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: clamp(1rem,2vw,1.12rem);
    line-height: 1.8
}

.hpb-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    color: rgba(255,255,255,.78);
    font-size: .9rem
}

    .hpb-breadcrumb a {
        color: #fff;
        text-decoration: none
    }

        .hpb-breadcrumb a:hover {
            color: #f1cb78;
            text-decoration: underline
        }

.hpb-contact-intro {
    max-width: 780px;
    margin: 0 auto 38px;
    text-align: center
}

    .hpb-contact-intro h2 {
        margin: 10px 0 12px;
        color: #123f2b;
        font-size: clamp(1.8rem,3.5vw,2.55rem);
        font-weight: 800;
        line-height: 1.2
    }

    .hpb-contact-intro p {
        margin: 0;
        color: #617067;
        font-size: 1rem;
        line-height: 1.8
    }

.hpb-contact-layout {
    display: grid;
    grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
    align-items: start;
    gap: 28px
}

.hpb-contact-info {
    display: grid;
    gap: 16px
}

.hpb-info-card, .hpb-contact-note {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 23px;
    border: 1px solid #e1ece3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(18,63,43,.055)
}

.hpb-info-card--highlight {
    display: block;
    padding: 28px;
    border-color: rgba(214,170,80,.45);
    background: linear-gradient(135deg,#fffdf7,#f5fbf6)
}

.hpb-info-icon, .hpb-form-icon {
    display: inline-grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    color: #0b6945;
    background: #eaf6ed;
    font-size: 1.25rem
}

.hpb-info-card--highlight .hpb-info-icon {
    margin-bottom: 13px;
    color: #8d641a;
    background: #f8edcf
}

.hpb-info-card h3 {
    margin: 0 0 7px;
    color: #16452f;
    font-size: 1.08rem;
    font-weight: 800
}

.hpb-info-card p, .hpb-contact-note p {
    margin: 0;
    color: #647269;
    font-size: .94rem;
    line-height: 1.75
}

.hpb-info-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #0b7046;
    font-weight: 800;
    text-decoration: none
}

    .hpb-info-card a:hover {
        color: #08452d;
        text-decoration: underline
    }

.hpb-contact-note {
    border-color: #cfe7d5;
    background: #edf8ef;
    box-shadow: none
}

    .hpb-contact-note > i {
        margin-top: 3px;
        color: #0b7046;
        font-size: 1.2rem
    }

    .hpb-contact-note strong {
        color: #16452f
    }

.hpb-booking-card {
    padding: clamp(22px,4vw,38px);
    border: 1px solid #e0ebe2;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(18,63,43,.10)
}

.hpb-booking-card__heading {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 24px;
    margin-bottom: 25px;
    border-bottom: 1px solid #edf1ed
}

.hpb-form-icon {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    font-size: 1.35rem
}

.hpb-booking-card__heading h2 {
    margin: 6px 0 7px;
    color: #123f2b;
    font-size: clamp(1.4rem,3vw,1.85rem);
    font-weight: 800;
    line-height: 1.25
}

.hpb-booking-card__heading p {
    margin: 0;
    color: #77847b;
    font-size: .87rem
}

    .hpb-booking-card__heading p span, .hpb-field label span {
        color: #b42318
    }

.hpb-booking-form {
    display: grid;
    gap: 19px
}

.hpb-field {
    display: grid;
    gap: 8px
}

    .hpb-field label {
        color: #254333;
        font-size: .94rem;
        font-weight: 750
    }

    .hpb-field input, .hpb-field textarea {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 13px 15px;
        border: 1px solid #d8e3da;
        border-radius: 12px;
        outline: none;
        color: #203329;
        background: #fcfefc;
        font: inherit;
        font-size: .96rem;
        transition: border-color .2s ease,box-shadow .2s ease,background .2s ease
    }

    .hpb-field input {
        min-height: 49px
    }

    .hpb-field textarea {
        min-height: 100px;
        resize: vertical
    }

        .hpb-field input::placeholder, .hpb-field textarea::placeholder {
            color: #98a39b
        }

        .hpb-field input:focus, .hpb-field textarea:focus {
            border-color: #168052;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(22,128,82,.12)
        }

    .hpb-field small {
        color: #78857c;
        font-size: .8rem;
        line-height: 1.5
    }

.hpb-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #5e6e63;
    font-size: .85rem;
    line-height: 1.6;
    cursor: pointer
}

    .hpb-consent input {
        flex: 0 0 auto;
        width: 17px;
        height: 17px;
        margin-top: 3px;
        accent-color: #0b7046
    }

.hpb-submit-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 56px;
    padding: 15px 20px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(120deg,#087342,#139456);
    box-shadow: 0 12px 24px rgba(8,115,66,.2);
    font: inherit;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: transform .2s ease,box-shadow .2s ease,filter .2s ease
}

    .hpb-submit-button:hover {
        transform: translateY(-2px);
        filter: saturate(1.08);
        box-shadow: 0 16px 28px rgba(8,115,66,.25)
    }

    .hpb-submit-button:focus-visible {
        outline: 3px solid #d6aa50;
        outline-offset: 3px
    }

    .hpb-submit-button .fa-whatsapp {
        font-size: 1.35rem
    }

.hpb-form-footnote {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    margin: -5px 0 0;
    color: #78857c;
    font-size: .8rem;
    line-height: 1.5;
    text-align: center
}

    .hpb-form-footnote i {
        margin-top: 3px;
        color: #0b7046
    }

.hpb-form-error {
    margin: 0;
    color: #b42318;
    font-size: .88rem
}

@media(max-width:900px) {
    .hpb-contact-layout {
        grid-template-columns: 1fr
    }

    .hpb-contact-info {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .hpb-info-card--highlight, .hpb-contact-note {
        grid-column: 1/-1
    }
}

@media(max-width:600px) {
    .hpb-contact-page {
        padding: 44px 0 56px
    }

    .hpb-container {
        width: min(100% - 28px,1180px)
    }

    .hpb-contact-hero {
        padding: 60px 0 56px
    }

        .hpb-contact-hero h1 {
            font-size: clamp(2rem,9vw,2.65rem)
        }

    .hpb-contact-intro {
        margin-bottom: 27px;
        text-align: left
    }

    .hpb-contact-info {
        grid-template-columns: 1fr
    }

    .hpb-info-card--highlight, .hpb-contact-note {
        grid-column: auto
    }

    .hpb-info-card, .hpb-info-card--highlight, .hpb-contact-note {
        padding: 20px;
        border-radius: 15px
    }

    .hpb-booking-card {
        padding: 21px 17px;
        border-radius: 18px
    }

    .hpb-booking-card__heading {
        gap: 12px
    }

    .hpb-form-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        border-radius: 12px
    }

    .hpb-submit-button {
        padding-inline: 12px;
        font-size: .92rem
    }
}

@media(prefers-reduced-motion:reduce) {
    .hpb-field input, .hpb-field textarea, .hpb-submit-button {
        transition: none
    }

        .hpb-submit-button:hover {
            transform: none
        }
}