/* =========================================================
   WBC DR SHIVANI DUA
   COMPLETE STANDALONE CSS
   Namespace: wbc-shivani-
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

.wbc-shivani-appointment-section {

    width: 100%;

    padding: 22px 15px;

    box-sizing: border-box;

   font-family: 'Poppins', sans-serif;
}


/* =========================================================
   MAIN CARD
========================================================= */

.wbc-shivani-appointment-card {

    position: relative;

    width: 100%;

    max-width: 1280px;

    min-height: 300px;

    margin: 0 auto;

    display: flex;

    align-items: stretch;

    background: #ffffff;

    border: 1px solid #e2e8ef;

    border-radius: 21px;

    overflow: hidden;

    box-shadow:
        0 14px 40px rgba(9, 47, 98, 0.08),
        0 2px 8px rgba(9, 47, 98, 0.035);

    box-sizing: border-box;
}


/* =========================================================
   MINIMAL BACKGROUND DECORATION
========================================================= */

.wbc-shivani-bg-decoration {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


/* Very subtle navy curve */

.wbc-shivani-bg-blue {

    position: absolute;

    width: 58%;

    height: 120px;

    right: -7%;

    top: -65px;

    border-bottom:
        1px solid rgba(9, 47, 98, 0.045);

    border-radius: 50%;
}


/* Very subtle orange curve */

.wbc-shivani-bg-orange {

    position: absolute;

    width: 48%;

    height: 90px;

    right: -4%;

    bottom: -50px;

    border-top:
        1px solid rgba(255, 105, 0, 0.04);

    border-radius: 50%;
}


/* =========================================================
   IMAGE COLUMN
========================================================= */

.wbc-shivani-image-column {

    position: relative;

    z-index: 2;

    width: 39%;

    min-width: 390px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        14px
        12px
        14px
        18px;

    box-sizing: border-box;
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.wbc-shivani-image-frame {

    position: relative;

    width: 100%;

    max-width: 390px;

    height: 272px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fafcff;

    border:
        1px solid
        rgba(9, 47, 98, 0.12);

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
        inset 0 0 0 4px rgba(255,255,255,0.95),
        0 8px 24px rgba(9,47,98,0.08);

    box-sizing: border-box;
}


/* =========================================================
   SMALL WBC ORANGE IMAGE ACCENT
========================================================= */

.wbc-shivani-image-frame::before {

    content: "";

    position: absolute;

    top: 17px;

    left: 18px;

    width: 44px;

    height: 3px;

    background: #ff6900;

    border-radius: 20px;

    z-index: 3;
}


/* =========================================================
   DOCTOR IMAGE
   COMPLETE IMAGE — NO CROPPING
========================================================= */

.wbc-shivani-doctor-image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center center;

    padding: 0;

    box-sizing: border-box;
}


/* =========================================================
   INFORMATION COLUMN
========================================================= */

.wbc-shivani-information {

    position: relative;

    z-index: 2;

    flex: 1;

    min-width: 0;

    padding:
        27px
        27px
        25px
        14px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    box-sizing: border-box;
}


/* =========================================================
   KICKER
========================================================= */

.wbc-shivani-kicker {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: #092f62;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.3px;

    text-transform: uppercase;
}


.wbc-shivani-kicker-line {

    width: 42px;

    height: 3px;

    flex: 0 0 42px;

    background: #ff6900;

    border-radius: 10px;
}


/* =========================================================
   DOCTOR NAME
========================================================= */

.wbc-shivani-doctor-name {

    margin: 0;

    padding: 0;

    color: #092f62;

    font-size:
        clamp(42px, 4vw, 57px);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -1.7px;
}


/* =========================================================
   QUALIFICATION
========================================================= */

.wbc-shivani-qualification {

    margin-top: 8px;

    color: #092f62;

    font-size: 22px;

    font-weight: 500;

    line-height: 1.2;
}


/* =========================================================
   TAGLINE
========================================================= */

.wbc-shivani-tagline {

    margin:
        7px
        0
        17px;

    padding: 0;

    color: #3c5876;

    font-size: 16px;

    line-height: 1.45;
}


/* =========================================================
   AVAILABILITY ROW
========================================================= */

.wbc-shivani-availability-row {

    display: flex;

    align-items: center;

    gap: 32px;

    margin-bottom: 18px;
}


/* =========================================================
   AVAILABILITY ITEM
========================================================= */

.wbc-shivani-availability-item {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


/* =========================================================
   CALENDAR ICON
========================================================= */

.wbc-shivani-calendar-icon {

    width: 48px;

    height: 48px;

    flex:
        0 0
        48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;
}


.wbc-shivani-calendar-icon svg {

    width: 23px;

    height: 23px;

    fill: none;

    stroke-width: 1.8;
}


/* Orange */

.wbc-shivani-calendar-orange {

    background:
        rgba(255, 105, 0, 0.08);
}


.wbc-shivani-calendar-orange svg {

    stroke: #ff6900;
}


/* Navy */

.wbc-shivani-calendar-blue {

    background:
        rgba(9, 47, 98, 0.065);
}


.wbc-shivani-calendar-blue svg {

    stroke: #092f62;
}


/* =========================================================
   AVAILABILITY TEXT
========================================================= */

.wbc-shivani-availability-content strong {

    display: block;

    color: #092f62;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.15;
}


.wbc-shivani-availability-content span {

    display: block;

    margin-top: 4px;

    color: #405a76;

    font-size: 16px;

    line-height: 1.2;
}


.wbc-shivani-availability-content small {

    display: block;

    margin-top: 3px;

    color: #405a76;

    font-size: 14px;

    line-height: 1.2;
}


/* =========================================================
   AVAILABILITY DIVIDER
========================================================= */

.wbc-shivani-availability-divider {

    width: 1px;

    height: 48px;

    flex: 0 0 1px;

    background:
        rgba(9, 47, 98, 0.13);
}


/* =========================================================
   CTA ROW
========================================================= */

.wbc-shivani-cta-row {

    width: 100%;

    display: flex;

    align-items: stretch;

    gap: 12px;
}


/* =========================================================
   PRIMARY CTA
========================================================= */

.wbc-shivani-primary-cta {

    position: relative;

    flex: 1.35;

    min-height: 68px;

    display: flex;

    align-items: center;

    padding:
        8px
        16px;

    box-sizing: border-box;

    color: #ffffff !important;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #ff6900 0%,
            #ff7815 100%
        );

    border:
        1px solid
        rgba(255, 105, 0, 0.3);

    border-radius: 12px;

    box-shadow:
        0 9px 22px
        rgba(255, 105, 0, 0.20);

    transition:
        box-shadow .25s ease,
        background .25s ease;
}


/* =========================================================
   PRIMARY CTA HOVER
   Keep it ORANGE + WHITE
========================================================= */

.wbc-shivani-primary-cta:hover,
.wbc-shivani-primary-cta:focus,
.wbc-shivani-primary-cta:active {

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #ff6900 0%,
            #ff7815 100%
        );

    box-shadow:
        0 12px 30px
        rgba(255, 105, 0, 0.30);

    transform: none;
}


/* =========================================================
   PHONE ICON
========================================================= */

.wbc-shivani-primary-icon {

    width: 48px;

    height: 48px;

    flex:
        0 0
        48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 12px;

    background: #ffffff;

    border-radius: 50%;
}


.wbc-shivani-primary-icon svg {

    width: 23px;

    height: 23px;

    fill: none;

    stroke: #ff6900;

    stroke-width: 2;
}


/* =========================================================
   PRIMARY CTA TEXT
========================================================= */

.wbc-shivani-primary-text {

    min-width: 0;
}


.wbc-shivani-primary-text strong {

    display: block;

    color: #ffffff !important;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.15;

    white-space: nowrap;
}


.wbc-shivani-primary-text small {

    display: block;

    margin-top: 5px;

    color: #ffffff !important;

    font-size: 14px;

    line-height: 1.15;

    white-space: nowrap;
	font-weight: 600;
}


.wbc-shivani-primary-text small b {

    color: #ffffff !important;

    font-weight: 400;

    padding:
        0
        2px;
}


/* =========================================================
   CTA ARROW
========================================================= */

.wbc-shivani-cta-arrow {

    margin-left: auto;

    padding-left: 10px;

    color: inherit;

    font-size: 28px;

    line-height: 1;

    transition:
        transform .2s ease;
}


.wbc-shivani-primary-cta:hover
.wbc-shivani-cta-arrow,

.wbc-shivani-secondary-cta:hover
.wbc-shivani-cta-arrow {

    transform: translateX(4px);
}


/* =========================================================
   SECONDARY CTA
========================================================= */

.wbc-shivani-secondary-cta {

    flex:
        0 1
        43%;

    min-height: 68px;

    display: flex;

    align-items: center;

    padding:
        8px
        17px;

    box-sizing: border-box;

    color: #092f62 !important;

    text-decoration: none;

    background: #ffffff !important;

    border:
        1.5px solid
        rgba(9, 47, 98, 0.65);

    border-radius: 12px;

    box-shadow: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   SECONDARY HOVER
   WHITE — NEVER BLUE
========================================================= */

.wbc-shivani-secondary-cta:hover,
.wbc-shivani-secondary-cta:focus,
.wbc-shivani-secondary-cta:active {

    background: #ffffff !important;

    color: #092f62 !important;

    border-color: #ff6900;

    box-shadow:
        0 8px 22px
        rgba(9, 47, 98, 0.09);

    transform: none;
}


/* =========================================================
   SECONDARY ICON
========================================================= */

.wbc-shivani-secondary-icon {

    width: 46px;

    height: 46px;

    flex:
        0 0
        46px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 11px;

    background:
        rgba(9, 47, 98, 0.06);

    border-radius: 50%;
}


.wbc-shivani-secondary-icon svg {

    width: 22px;

    height: 22px;

    fill: none;

    stroke: #092f62;

    stroke-width: 1.8;
}


/* Orange icon on hover */

.wbc-shivani-secondary-cta:hover
.wbc-shivani-secondary-icon {

    background:
        rgba(255, 105, 0, 0.08);
}


.wbc-shivani-secondary-cta:hover
.wbc-shivani-secondary-icon svg {

    stroke: #ff6900;
}


/* =========================================================
   SECONDARY TEXT
========================================================= */

.wbc-shivani-secondary-cta strong {

    color: #092f62 !important;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.2;

    white-space: nowrap;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .wbc-shivani-appointment-card {

        min-height: 290px;
    }


    .wbc-shivani-image-column {

        width: 37%;

        min-width: 320px;

        padding:
            14px
            10px
            14px
            12px;
    }


    .wbc-shivani-image-frame {

        height: 260px;
    }


    .wbc-shivani-information {

        padding:
            24px
            20px
            22px
            10px;
    }


    .wbc-shivani-doctor-name {

        font-size: 42px;
    }


    .wbc-shivani-qualification {

        font-size: 19px;
    }


    .wbc-shivani-tagline {

        font-size: 14px;
    }


    .wbc-shivani-availability-row {

        gap: 17px;
    }


    .wbc-shivani-availability-content strong {

        font-size: 16px;
    }


    .wbc-shivani-availability-content span {

        font-size: 14px;
    }


    .wbc-shivani-availability-content small {

        font-size: 12px;
    }


    .wbc-shivani-primary-text strong {

        font-size: 15px;
    }


    .wbc-shivani-primary-text small {

        font-size: 10px;
    }


    .wbc-shivani-secondary-cta strong {

        font-size: 14px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .wbc-shivani-appointment-section {

        padding:
            14px
            10px;
    }


    .wbc-shivani-appointment-card {

        display: block;

        min-height: auto;

        border-radius: 18px;
    }


    /* =====================================================
       MOBILE IMAGE
       Large enough for COMPLETE photograph
    ====================================================== */

    .wbc-shivani-image-column {

        width: 100%;

        min-width: 0;

        height: 330px;

        padding:
            12px
            12px
            0;

        display: flex;

        align-items: center;

        justify-content: center;

        box-sizing: border-box;
    }


    .wbc-shivani-image-frame {

        width: 100%;

        max-width: 390px;

        height: 315px;

        border-radius: 24px;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    /*
       COMPLETE IMAGE
       No zoom
       No crop
    */

    .wbc-shivani-doctor-image {

        width: 100%;

        height: 100%;

        object-fit: contain;

        object-position: center center;

        padding: 0;
    }


    /* =====================================================
       MOBILE INFORMATION
    ====================================================== */

    .wbc-shivani-information {

        padding:
            22px
            16px
            20px;

        text-align: center;
    }


    .wbc-shivani-kicker {

        justify-content: center;

        font-size: 13px;

        letter-spacing: 1.5px;
    }


    .wbc-shivani-kicker-line {

        width: 28px;

        flex-basis: 28px;
    }


    .wbc-shivani-doctor-name {

        font-size: 34px;

        letter-spacing: -.8px;
    }


    .wbc-shivani-qualification {

        font-size: 18px;
    }


    .wbc-shivani-tagline {

        font-size: 14px;

        margin:
            7px
            0
            18px;
    }


    /* =====================================================
       MOBILE AVAILABILITY
    ====================================================== */

    .wbc-shivani-availability-row {

        justify-content: center;

        gap: 20px;

        margin-bottom: 19px;
    }


    .wbc-shivani-calendar-icon {

        width: 42px;

        height: 42px;

        flex-basis: 42px;
    }


    .wbc-shivani-calendar-icon svg {

        width: 20px;

        height: 20px;
    }


    .wbc-shivani-availability-content {

        text-align: left;
    }


    .wbc-shivani-availability-content strong {

        font-size: 15px;
    }


    .wbc-shivani-availability-content span {

        font-size: 13px;
    }


    .wbc-shivani-availability-content small {

        font-size: 12px;
    }


    /* =====================================================
       MOBILE CTA
    ====================================================== */

    .wbc-shivani-cta-row {

        flex-direction: column;

        gap: 9px;
    }


    .wbc-shivani-primary-cta,
    .wbc-shivani-secondary-cta {

        width: 100%;

        min-height: 68px;
    }


    .wbc-shivani-primary-cta {

        flex: none;

        padding:
            8px
            14px;
    }


    .wbc-shivani-primary-icon {

        width: 48px;

        height: 48px;

        flex-basis: 48px;
    }


    .wbc-shivani-primary-text {

        text-align: left;
    }


    .wbc-shivani-primary-text strong {

        font-size: 17px;
    }


    .wbc-shivani-primary-text small {

        font-size: 11px;

        white-space: normal;
    }


    .wbc-shivani-secondary-cta {

        flex: none;

        padding:
            8px
            14px;

        text-align: left;
    }


    .wbc-shivani-secondary-cta strong {

        font-size: 16px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wbc-shivani-image-column {

        height: 315px;
    }


    .wbc-shivani-image-frame {

        height: 300px;
    }


    .wbc-shivani-doctor-name {

        font-size: 31px;
    }


    .wbc-shivani-qualification {

        font-size: 17px;
    }


    .wbc-shivani-availability-row {

        gap: 12px;
    }


    .wbc-shivani-calendar-icon {

        width: 38px;

        height: 38px;

        flex-basis: 38px;
    }


    .wbc-shivani-availability-content strong {

        font-size: 14px;
    }


    .wbc-shivani-availability-content span {

        font-size: 12px;
    }


    .wbc-shivani-availability-content small {

        font-size: 11px;
    }


    .wbc-shivani-primary-text strong {

        font-size: 16px;
    }


    .wbc-shivani-secondary-cta strong {

        font-size: 15px;
    }

}