/*==========================
==========================

 --------- Hero section 

==========================
==========================*/
.hero-section {
    height: 50vh;
    background: #140B3D;
    overflow: hidden;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

.hero-inner {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding-left: 135px;
}

/* TEXT */
.hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 520px;
    color: #FFFFFF;
}

    .hero-text h1 {
        font-family: 'Ubuntu', sans-serif;
        font-weight: 400;
        font-size: 32px;
        line-height: 40.36px;
        margin-bottom: 12px;
        color: #FFFFFF;
    }

        .hero-text h1 span {
            font-weight: 700;
        }

    .hero-text p {
        font-family: 'Poppins', sans-serif;
        font-weight: 300;
        font-size: 16px;
        line-height: 190%;
        letter-spacing: -0.01em;
        color: #D5B9B9;
        max-width: 511px;
    }

/* IMAGE */
.hero-image {
    height: 100%;
    display: flex;
    align-items: flex-end;
}

    .hero-image img {
        height: 100%;
        max-width: 100%;
        object-fit: contain;
        display: block;
    }

@media (max-width: 992px) {


    .hero-section {
        height: auto;
        padding: 60px 24px 0px 24px;
    }

    .hero-inner {
        flex-direction: column;
        padding-left: 0;
        gap: 32px;
    }

    .hero-text {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

        .hero-text p {
            max-width: 100%;
        }

    .hero-image {
        width: 100%;
        justify-content: center;
    }

        .hero-image img {
            height: auto;
            width: 100%;
            max-width: 420px;
        }
}

/* ===== Hero Section - Small Screen Text Adjustment ===== */
@media (max-width: 576px) {
    .hero-section {
        /*height: 50vh;*/ /* keep hero section compact */
        padding: 35px 12px 0 12px; /* small padding */
    }

    .hero-text h1 {
        font-size: 19px; /* smaller heading */
        line-height: 28px;
    }

        .hero-text h1 span {
            font-weight: 700; /* keep bold, can adjust if needed */
        }

    .hero-text p {
        font-size: 12px; /* smaller paragraph */
        line-height: 18px;
    }

    .hero-image img {
        max-width: 300px; /* scale down image */
        height: auto;
    }
}

/*==========================
==========================

Hero section Completed

==========================
==========================*/

/*==========================
        Buttons Section
==========================*/

.offers-tabs {
    width: 982px;
    margin: 40px auto 0;
    z-index: 999;
    transition: all .25s ease;
}

    /* when fixed */
    .offers-tabs.fixed {
        position: fixed;
        top: 21px; /* header height */
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        padding: 10px 12px;
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    }

/* spacer height controlled by js */
#offersTabsSpacer {
    height: 0;
}

/* inner */
.offers-tabs-inner {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* button */
.offer-tab {
    height: 40px;
    padding: 0 18px;
    border-radius: 6.81px;
    border: 1.36px solid #130F3F;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #130F3F;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .offer-tab.active {
        background: #130F3F;
        color: #FFFFFF;
    }

@media (hover: hover) {
    .offer-tab:hover {
        background: #130F3F;
        color: #FFFFFF;
    }
}
.offer-tab:focus {
    outline: none;
    background: transparent;
    color: #130F3F;
}
.offer-tab.active {
    background: #130F3F;
    color: #FFFFFF;
}

/* responsive */
@media (max-width: 1200px) {
    .offers-tabs {
        width: calc(100% - 32px);
    }
}

@media (max-width: 768px) {

    .offers-tabs.fixed {
        width: calc(100% - 20px);
        top: 70px;
    }

    .offer-tab {
        flex: 1 1 45%;
        text-align: center;
    }
}

/* ===== MOBILE TABS (SCROLLABLE CHIPS) ===== */
@media (max-width: 768px) {

    .offers-tabs {
        width: 100%;
        margin: 20px 0 0;
        padding: 0 10px;
    }

        .offers-tabs.fixed {
            width: 100%;
            left: 0;
            transform: none;
            border-radius: 0;
            padding: 8px 8px;
            top: 21px;
        }

    .offers-tabs-inner {
/*        flex-wrap: nowrap;*/
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
        padding-bottom: 4px;
        /* smooth scrolling */
        scroll-behavior: smooth;
        /* hide scrollbar */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .offers-tabs-inner::-webkit-scrollbar {
            display: none;
        }

    .offer-tab {
        flex: 0 0 auto;
        font-size: 13px;
        padding: 0 16px;
        height: 36px;
    }
}
.offer-tab:first-child {
    margin-left: 4px;
}

.offer-tab:last-child {
    margin-right: 4px;
}

.offers-tabs-inner {
    padding-left: 8px;
    padding-right: 8px;
}

/* REMOVE THIS ON MOBILE */
@media (max-width: 768px) {
    .offer-tab:first-child {
        margin-left: 0;
    }
    .offers-tabs-inner {
        padding-left: 0px;
        padding-right: 0px;
    }

    .offer-tab:last-child {
        margin-right: 8px;
    }
}
@media (max-width: 768px) {
    .offers-tabs.fixed {
        top: 42px; /* adjust: 80–96px as per header */
    }
}
@media (max-width: 768px) {

    .offers-tabs-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        overflow-x: hidden; /* no horizontal scroll */
    }

    .offer-tab {
        width: 100%;
        justify-self: stretch;
        text-align: center;
    }
}
/* base state */
.offers-tabs {
    transition: transform .25s ease, opacity .25s ease;
}

/* mobile sticky animation */
@media (max-width: 768px) {
    .offers-tabs {
        transform: translateY(-10px);
/*        opacity: 0;*/
    }

        .offers-tabs.fixed {
            transform: translateY(0);
            opacity: 1;
        }
}
.offer-tab {
    transition: background .2s ease, color .2s ease, transform .15s ease;
}

    .offer-tab.active {
        transform: scale(1.05);
    }
@media (max-width: 768px) {
    .offers-tabs.fixed {
        backdrop-filter: blur(10px);
        background: rgba(255,255,255,0.92);
    }
}

@media (min-width: 992px) {
    .offers-tabs.has-headline {
        top: 58px !important;
    }
}
@media (max-width: 768px) {
    .offers-tabs.has-headline {
        top: 77px !important;
    }
}
/*
Doctor Offers Section 

==========================
==========================*/

/* ===== DOCTOR OFFERS SECTION ===== */
.doctor-offers {
    padding: 40px 0;
    background: #FFFFFF;
    clear: both;
}

.doctor-offers-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 24px;
}

/* FIX 1: Heading bold */
.offers-heading {
/*    font-family: 'Poppins', sans-serif;*/
    font-size: 32px;
    font-weight: 700;
    line-height: 44px;
    color: #130F3F;
    margin-bottom: 40px;
}

/* GRID */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* CARD */
.offer-card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden; /* FIX 2: image touches border */
    display: flex;
    flex-direction: column;
}

/* IMAGE FULL WIDTH (NO PADDING) */
.offer-image img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}

/* CARD HEADING CENTER + SEMI BOLD */
.offer-card h3 {
    font-size: 18px;
    line-height: 26px;
    color: #130F3F;
    text-align: center;
    margin: 16px 0;
    padding: 0 16px;
    font-weight: bolder !important;
    /* FIX START */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* show only 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 52px; /* 26px line-height × 2 lines */
    -webkit-line-clamp: 3;
    min-height: 78px; /* 26 × 3 */
}

/* DOCTOR INFO */
.doctor-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0 16px;
}

    .doctor-info img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
    }

    .doctor-info strong {
        font-size: 14px;
        font-weight: 600;
        color: #130F3F;
        display: block;
    }

    .doctor-info span {
        font-size: 11px;
        letter-spacing: 0.05em;
        color: #6B6B8A;
    }

/* CARD BUTTON */
.offer-btn {
    margin: auto 16px 16px;
    background: #130F3F;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 42px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    cursor: pointer;
}

/* SHOW MORE BUTTON */
.show-more-wrapper {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

.show-more-btn {
    height: 44px;
    padding: 0 32px;
    border-radius: 8px;
    border: 1.5px solid #130F3F;
    background: #130F3F;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .show-more-btn:hover {
        background: #211975;
        color: #FFFFFF;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .offers-grid {
        grid-template-columns: 1fr;
    }

    .offers-heading {
        font-size: 24px;
        line-height: 34px;
        text-align: center;
    }
}
.no-offers {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
    font-size: 16px;
    color: #6B6B8A;
}
/*=============================
===============================

Doctor Offers Section Completed

===============================
===============================*/


/*=============================
===============================

Lab Offers Section

===============================
===============================*/

.lab-offers {
    background-color: #E8E8E899;
}
.lab-offer-card{
    padding-bottom: 20px;
}

/*=============================
===============================

Lab Offers Section Completed

===============================
===============================*/



/*=============================
===============================

Hospital Offers Section 

===============================
===============================*/

/* ================= Clinic Deals Section ================= */

.clinic-deals-section {
    background: white;
    padding: 70px 0;
    font-family: 'Poppins', sans-serif;
}

.clinic-deals-container {
    width: 1180px;
    max-width: 95%;
    margin: auto;
}

/* Header */
.clinic-deals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}

    .clinic-deals-header h2 {
        font-size: 32px;
        font-weight: 700;
        color: #1b1e3f;
        line-height: 1.3;
    }

.clinic-view-all {
    text-decoration: none;
    color: #1b1e3f;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: .25s;
}

    .clinic-view-all span {
        transition: .25s;
    }

    .clinic-view-all:hover span {
        transform: translateX(5px);
    }

/* Grid */
.clinic-deals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

/* Card */
.clinic-deal-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: .25s ease;
    cursor: pointer;
}

    .clinic-deal-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    }

.clinic-deal-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .clinic-deal-icon img {
        width: 65px;
        height: 65px;
        object-fit: contain;
    }

.clinic-deal-card p {
    font-size: 16px;
    font-weight: 600;
    color: #202244;
    line-height: 1.4;
    margin: 0;
}

/* Responsive */
@media (max-width: 900px) {

    .clinic-deals-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .clinic-deals-grid {
        grid-template-columns: 1fr;
    }

    .clinic-deals-header h2 {
        font-size: 26px;
    }
}


/*=============================
===============================

Hospital Offers Section Completed

===============================
===============================*/

/*=============================
===============================

Product Offers Section 

===============================
===============================*/

/* ================= Product Deals Section ================= */

.product-deals-section {
    background: #F0F0F1;
    padding: 75px 0 90px;
    font-family: 'Poppins', sans-serif;
}

.product-deals-container {
    width: 1180px;
    max-width: 95%;
    margin: auto;
    text-align: center;
}

/* Title */
.product-deals-title {
    font-size: 34px;
    font-weight: 700;
    color: #1b1e3f;
    margin-bottom: 50px;
    line-height: 1.3;
}

/* Grid */
.product-deals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

/* Card */
.product-deal-card {
    text-align: center;
}

/* Image Box */
.product-image-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 16px rgba(0,0,0,0.06);
    transition: .25s ease;
}

    .product-image-box img {
        max-height: 150px;
        max-width: 100%;
        object-fit: contain;
    }

    .product-image-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    }

/* Name */
.product-deal-card h3 {
    font-size: 17px;
    font-weight: 600;
    color: #202244;
    margin-top: 18px;
    margin-bottom: 14px;
}

/* Bottom row */
.product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Price */
.product-price {
    font-weight: 600;
    font-size: 15px;
    color: #202244;
}

/* Button */
.product-cart-btn {
    border: 1.8px solid #2d2f75;
    background: transparent;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #2d2f75;
    cursor: pointer;
    transition: .25s;
}

    .product-cart-btn:hover {
        background: #2d2f75;
        color: white;
    }

/* Responsive */

@media (max-width: 1100px) {
    .product-deals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .product-deals-grid {
        grid-template-columns: 1fr;
    }

    .product-bottom {
        flex-direction: column;
        gap: 6px;
    }

    .product-deals-title {
        font-size: 26px;
    }
}

/*=============================
===============================

Product Offers Section Completed

===============================
===============================*/
/*=============================
===============================

Top Labs Section 

===============================
===============================*/

/* ================================
   Trusted Partner Labs Section
================================ */

.trusted-labs-section {
    background: #f3f4f6;
    padding: 70px 0 60px;
}

.trusted-labs-container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.trusted-labs-title {
    font-family: 'Ubuntu', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #1e1b4b;
    margin-bottom: 45px;
}

/* LOGO GRID */

.trusted-labs-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 45px;
}

.trusted-lab {
    background: #ffffff;
    border-radius: 10px;
    padding: 14px 22px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    transition: 0.25s ease;
}

    /* logo sizing control */
    .trusted-lab img {
        height: 55px;
        width: auto;
        object-fit: contain;
/*        filter: grayscale(100%);*/
        opacity: .75;
        transition: .25s ease;
    }

    /* hover effect (exactly like modern websites) */
    .trusted-lab:hover img {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.08);
    }

    .trusted-lab:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    }

/*=============================
===============================

Top Labs Section Completed

===============================
===============================*/
/*=============================
===============================

CTA Section 

===============================
===============================*/

/* =================================
   InstaCare CTA Section
================================= */
/* =========================================
   InstaCare CTA Section (FINAL)
========================================= */

.instacare-cta {
    background: #15124b;
    padding: 65px 20px;
}

/* CENTERED CONTENT CONTAINER */
.instacare-cta-inner {
    max-width: 950px; /* <-- THIS centers like design */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 215px; /* distance between left & right */
    flex-wrap: wrap;
}

/* BOTH SIDES TEXT */
.cta-title {
    color: #ffffff;
    font-family: 'Ubuntu', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 18px;
}

/* CONTACT ROW */
.cta-contact {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* WHATSAPP ICON CIRCLE */
.cta-whatsapp-icon {
    width: 46px;
    height: 46px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cta-whatsapp-icon img {
        width: 42px;
        height: 42px;
    }

/* PHONE NUMBER */
.cta-phone {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .5px;
}

/* STORE BUTTONS */
.cta-store-buttons {
    display: flex;
    gap: 16px;
}

.cta-store-btn {
    background: rgba(255,255,255,0.08);
    padding: 8px 14px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    transition: .25s ease;
}

    .cta-store-btn img {
        height: 38px;
    }

    .cta-store-btn:hover {
        background: rgba(255,255,255,0.18);
        transform: translateY(-3px);
    }


/* ===== Laptop / Tablet ===== */
@media (max-width: 992px) {

    .instacare-cta-inner {
        gap: 60px;
    }

    .cta-title {
        font-size: 24px;
    }

    .cta-phone {
        font-size: 21px;
    }
}

/* ===== Mobile ===== */
@media (max-width: 576px) {

    .instacare-cta {
        padding: 55px 18px;
    }

    .instacare-cta-inner {
        flex-direction: column;
        text-align: center;
        gap: 45px;
    }

    .cta-help-block,
    .cta-app-block {
        text-align: center;
    }

    .cta-contact {
        justify-content: center;
    }

    .cta-store-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .cta-title {
        font-size: 22px;
    }

    .cta-phone {
        font-size: 20px;
    }

    .cta-store-btn img {
        height: 32px;
    }
}


/*=============================
===============================

CTA Section Completed

===============================
===============================*/

/*=============================
===============================

Skeleton Section 

===============================
===============================*/

.skeleton-box {
    background: linear-gradient( 90deg, #eeeeee 25%, #dddddd 50%, #eeeeee 75% );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-card {
    padding: 15px;
}

    .skeleton-card .offer-image {
        height: 150px;
        margin-bottom: 15px;
    }

.skeleton-title {
    height: 20px;
    width: 70%;
    margin-bottom: 15px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-text {
    flex: 1;
    margin-left: 10px;
}

.skeleton-line {
    height: 12px;
    width: 80%;
    margin-bottom: 6px;
}

    .skeleton-line.small {
        width: 60%;
    }

.skeleton-button {
    height: 40px;
    margin-top: 15px;
    border-radius: 8px;
}
#loadMoreDoctors:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/*=============================
===============================

Skeleton Section Completed

===============================
===============================*/


/*=============================
===============================

Not Available Completed

===============================
===============================*/

/*=============================
===============================

Not Available Completed

===============================
===============================*/