/*====================================================
        GENERIC FEATURE CARD (reusable across pages)
====================================================*/

.feature-section{
    padding:8px 0 35px;
    background:#f7fbff;
}

/*-----------------------------------
            CARD
-----------------------------------*/

.feature-card{
    background:#fff;
    border:1px solid #e5edf8;
    border-radius:14px;
    padding:18px 20px;
    box-shadow:0 4px 14px rgba(4,55,105,.08);
    overflow:hidden;
    margin-bottom:20px;
}

.feature-card:last-child{
    margin-bottom:0;
}

.feature-card .row{
    align-items:center;
    row-gap:14px;
}

/*-----------------------------------
            IMAGE
-----------------------------------*/

.feature-image-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

.feature-image{
    width:100%;
    max-width:100%;
    height:200px;
    object-fit:cover;
    object-position:center;
    border-radius:12px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
    display:block;
    margin:0 auto;
}

/*-----------------------------------
            TAG (optional, like service-tag)
-----------------------------------*/

.feature-tag{
    display:inline-block;
    background:#eaf4ff;
    color:#0d5ea8;
    padding:4px 10px;
    border-radius:24px;
    font-size:.72rem;
    font-weight:600;
    margin-bottom:8px;
}

/*-----------------------------------
            TITLE
-----------------------------------*/

.feature-title{
    color:#043769;
    font-size:1.35rem;
    font-weight:700;
    line-height:1.25;
    margin-bottom:6px;
}

.feature-subtitle{
    color:#0d5ea8;
    font-size:.92rem;
    font-weight:700;
    margin-bottom:10px;
}

/*-----------------------------------
            PARAGRAPH
-----------------------------------*/

.feature-card p{
    color:#5f6f86;
    font-size:.82rem;
    line-height:1.6;
    text-align:justify;
    margin-bottom:10px;
}

/*-----------------------------------
        LIST LABEL (e.g. "Benefits:")
-----------------------------------*/

.feature-list-label{
    color:#043769;
    font-size:.88rem;
    font-weight:700;
    margin-bottom:8px;
}

/*-----------------------------------
        CHECK LIST
-----------------------------------*/

.feature-list{
    list-style:none !important;
    padding-left:0 !important;
    margin:0 0 14px !important;
}

.feature-list li{
    display:flex !important;
    align-items:flex-start;
    gap:8px;
    color:#5f6f86;
    font-size:.82rem;
    line-height:1.5;
    margin-bottom:7px;
}

.feature-list li::before{
    content:"\f00c";
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    color:#0d5ea8;
    background:#eaf4ff;
    width:18px;
    height:18px;
    min-width:18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.55rem;
    margin-top:2px;
}

.feature-list li strong{
    color:#043769;
    font-weight:700;
}

/*-----------------------------------
        PLAIN DISC LIST (alt variant)
-----------------------------------*/

.feature-list.feature-list--disc{
    list-style:disc outside !important;
    padding-left:20px !important;
}

.feature-list.feature-list--disc li{
    display:list-item !important;
    list-style:disc !important;
    padding-left:2px;
}

.feature-list.feature-list--disc li::before{
    content:none;
}

/*-----------------------------------
        BANNER IMAGE (secondary/wide image)
-----------------------------------*/

.feature-banner-wrap{
    margin-top:14px;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
    border:1px solid #e5edf8;
    max-width:100%;
}

.feature-banner{
    width:100%;
    height:140px;
    object-fit:cover;
    object-position:center;
    display:block;
    margin:0 auto;
}

/*-----------------------------------
            NOTE / CTA
-----------------------------------*/

.feature-note{
    margin-top:14px;
    background:#eef6ff;
    border-left:4px solid #043769;
    border-radius:10px;
    padding:12px 16px;
}

.feature-note h4{
    color:#043769;
    font-size:.95rem;
    font-weight:700;
    margin-bottom:6px;
}

.feature-note p{
    color:#5f6f86;
    font-size:.82rem;
    line-height:1.55;
    margin-bottom:0;
    text-align:left;
}

.feature-note a{
    color:#0d5ea8;
    font-weight:600;
    text-decoration:none;
}

.feature-note a:hover{
    text-decoration:underline;
}

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

@media (max-width:768px){

    .feature-card{
        padding:14px;
        border-radius:12px;
        margin-bottom:14px;
    }

    .feature-image{
        height:170px;
    }

    .feature-banner{
        height:110px;
    }

    .feature-title{
        font-size:1.1rem;
    }

    .feature-subtitle{
        font-size:.85rem;
    }

    .feature-card p,
    .feature-list li,
    .feature-note p{
        font-size:.76rem;
    }

    .feature-tag{
        font-size:.64rem;
        padding:3px 9px;
    }

    .feature-list-label{
        font-size:.82rem;
    }

    .feature-note{
        padding:10px 12px;
        margin-top:10px;
    }

}

/*=====================================
      TEETH WHITENING IMAGE
=====================================*/

.teeth-whitening-image-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:520px;
    background:#fff;
    border:1px solid #e5edf8;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
    padding:20px;
}

.teeth-whitening-image{
    width:auto;
    height:500px;
    max-width:100%;
    object-fit:contain;
    border:none;
    box-shadow:none;
    border-radius:0;
}

@media (max-width:768px){

    .teeth-whitening-image-wrap{
        min-height:auto;
        padding:15px;
    }

    .teeth-whitening-image{
        height:320px;
    }

}

/*=====================================
        MOUTHGUARD IMAGE
=====================================*/

.mouthguard-image-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:300px;
    padding:10px;
}

.mouthguard-image{
    width:100%;
    max-width:400px;   /* image ko chhota rakhega */
    height:auto;
    object-fit:contain;
    border-radius:12px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

@media (max-width:768px){

    .mouthguard-image{
        max-width:260px;
    }

}

/* Teeth Whitening Appointment Link */

.teeth-whitening-link{
    color:#0d5ea8;
    font-weight:600;
    text-decoration:none;
    transition:all .3s ease;
}

.teeth-whitening-link:hover{
    color:#043769;
    text-decoration:None;
}

/*====================================================
            LASER DENTISTRY 
====================================================*/

.laser-dentistry-card .row{
    align-items:flex-start;
}

/*-----------------------------------
        LEFT COLUMN — STACKED IMAGES
-----------------------------------*/

/* .laser-top-image{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:12px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
    margin-bottom:16px;
    display:block;
}

.laser-bottom-image{
    width:100%;
    max-width:220px;
    height:auto;
    display:block;
    margin:0 auto;
    border-radius:12px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
} */

/*-----------------------------------
        RIGHT CONTENT
-----------------------------------*/

.laser-content{
    position:relative;
}

.laser-content h2{
    color:#043769;
    font-size:1.35rem;
    font-weight:700;
    margin-bottom:8px;
}

.laser-content p{
    color:#5f6f86;
    font-size:.82rem;
    line-height:1.6;
    text-align:justify;
    margin-bottom:10px;
}

.laser-content p.laser-intro{
    font-weight:600;
    color:#043769;
}

.laser-content hr{
    margin:16px 0;
    border-top:1px solid #e5edf8;
    opacity:1;
}

/* Small floating image, top-right of content */

/* .laser-side-image{
    float:right;
    width:140px;
    height:auto;
    margin:0 0 14px 16px;
    border-radius:10px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
    display:block;
} */

/* Note / CTA line at the bottom */

.laser-content .feature-note{
    clear:both;
}

/*-----------------------------------
            MOBILE
-----------------------------------*/

@media (max-width:991px){

    .laser-top-image{
        height:auto;
    }

    .laser-bottom-image{
        max-width:200px;
        margin-bottom:16px;
    }

    .laser-side-image{
        float:none;
        display:block;
        width:200px;
        margin:0 auto 16px;
    }

}

@media (max-width:768px){

    .laser-content h2{
        font-size:1.1rem;
    }

    .laser-content p{
        font-size:.76rem;
    }

}

/* Laser Layout */

.feature-card .row{
    align-items:flex-start !important;
}

.laser-top-image{
    width:100%;
    height:215px;
    object-fit:cover;
    border-radius:12px;
    margin-bottom:18px;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

.laser-bottom-image{
    width:230px;
    display:block;
    margin:0 auto;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

.laser-side-image{
    float:right;
    width:145px;
    margin:0 0 12px 20px;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

.laser-content{
    padding-left:10px;
}

@media(max-width:991px){

    .laser-side-image{
        float:none;
        width:220px;
        display:block;
        margin:0 auto 18px;
    }

    .laser-bottom-image{
        width:220px;
        margin-bottom:20px;
    }

}

/* Top Image (Smaller) */

.laser-top-image{
    width:85%;              /* Pehle 100% tha */
    max-width:420px;
    height:180px;           /* Chhoti height */
    object-fit:cover;
    display:block;
    margin:0 auto 20px;
    border-radius:12px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

/* Bottom Image (Larger) */

.laser-bottom-image{
    width:100%;
    max-width:420px;
    height:320px;           /* Badi height */
    object-fit:contain;
    display:block;
    margin:0 auto;
    border-radius:12px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

/*=====================================
            VENEERS IMAGE
=====================================*/

.veneers-image-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:260px;
    padding:10px;
}

.veneers-image{
    width:100%;
    max-width:460px;
    height:auto;              /* Full image visible */
    object-fit:contain;
    border-radius:12px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

@media (max-width:768px){

    .veneers-image{
        max-width:100%;
    }

}

/*=====================================
        CLEAR BRACES IMAGE
=====================================*/

.clear-braces-image-wrap{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:10px;
}

.clear-braces-image{
    width:30%;
    max-width:340px;
    height:auto;
    object-fit:contain;
    border-radius:10px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

@media (max-width:768px){

    .clear-braces-image{
        max-width:260px;
    }

}

/*=====================================
        BOTOX IMAGE
=====================================*/

.botox-image-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
}

.botox-image{
    width:100%;
    max-width:420px;
    height:auto;
    object-fit:contain;
    border-radius:12px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

@media (max-width:768px){

    .botox-image{
        max-width:100%;
    }

}

/*=====================================
        TMD IMAGE
=====================================*/

.tmd-image-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
}

.tmd-image{
    width:100%;
    max-width:420px;
    height:auto;
    object-fit:contain;
    border-radius:12px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

@media (max-width:768px){

    .tmd-image{
        max-width:100%;
    }

}

/*=====================================
            3D IMAGING
=====================================*/

.imaging-image-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
}

.imaging-image{
    width:100%;
    max-width:420px;
    height:auto;
    object-fit:contain;
    border-radius:12px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

@media (max-width:768px){

    .imaging-image{
        max-width:100%;
    }

}

/*=====================================
        ANESTHETIC REVERSAL
=====================================*/

/* Left Image */

.anesthetic-image-wrap{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:10px;
}

.anesthetic-image{
    width:100%;
    max-width:320px;      /* Pehle 420px tha */
    height:320px;         /* Smaller */
    object-fit:cover;
    border-radius:12px;
    border:1px solid #e5edf8;
    box-shadow:0 4px 12px rgba(4,55,105,.08);
}

/* Right Product Image */

.anesthetic-side-image{
    float:right;
    width:270px;          /* Pehle 220px tha */
    max-width:100%;
    height:auto;
    margin:0 0 18px 25px;
    border-radius:10px;
}

/* Text */

.feature-card .row{
    align-items:flex-start;
}

/* Mobile */

@media(max-width:991px){

    .anesthetic-image{
        max-width:280px;
        height:auto;
    }

    .anesthetic-side-image{
        float:none;
        display:block;
        width:240px;
        margin:0 auto 20px;
    }

}

/*====================================================
                    DIAGNODENT
====================================================*/

/*-----------------------------------
            IMAGE
-----------------------------------*/

.diagnodent-image-wrap{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:10px;
}

.diagnodent-image{
    width:100%;
    max-width:430px;
    height:auto;
    object-fit:contain;
    background:#fff;
    padding:8px;
    border:1px solid #dfe9f7;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(4,55,105,.10);
    transition:all .35s ease;
}

.diagnodent-image:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(4,55,105,.16);
}

/*-----------------------------------
        DIVIDER
-----------------------------------*/

.diagnodent-divider{
    width:65px;
    height:4px;
    border:none;
    border-radius:30px;
    background:linear-gradient(90deg,#043769,#0d5ea8);
    margin:10px 0 20px;
    opacity:1;
}

/*-----------------------------------
        SUB HEADINGS
-----------------------------------*/

.diagnodent-heading{

    color:#0d5ea8;
    font-size:.95rem;
    font-weight:700;
    letter-spacing:.2px;

    margin:22px 0 14px;

    position:relative;
    padding-bottom:6px;

}

/* Blue underline */

/* .diagnodent-heading::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:42px;
    height:3px;

    border-radius:20px;

    background:#0d5ea8;

} */

/*-----------------------------------
            LIST
-----------------------------------*/

.diagnodent-list{

    list-style:none;
    padding-left:28px;
    margin:0 0 22px;

}

.diagnodent-list li{

    position:relative;

    padding-left:28px;

    color:#5f6f86;
    font-size:.82rem;
    line-height:1.72;

    margin-bottom:10px;

}

.diagnodent-list li::before{

    content:"";

    position:absolute;

    left:0;
    top:10px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#0d5ea8;

    box-shadow:0 0 0 4px rgba(13,94,168,.10);

}

/*-----------------------------------
            MOBILE
-----------------------------------*/

@media(max-width:768px){

    .diagnodent-image{

        max-width:100%;
        padding:6px;

    }

    .diagnodent-divider{

        width:50px;
        margin-bottom:16px;

    }

    .diagnodent-heading{

        font-size:.88rem;
        margin:18px 0 10px;

    }

    .diagnodent-heading::after{

        width:34px;
        height:2px;

    }

    .diagnodent-list{

        padding-left:18px;

    }

    .diagnodent-list li{

        font-size:.78rem;
        line-height:1.65;
        padding-left:22px;
        margin-bottom:8px;

    }

    .diagnodent-list li::before{

        width:6px;
        height:6px;
        top:9px;

    }

}

/*====================================================
                INVISALIGN
====================================================*/

.invisalign-logo-wrap{
    margin-bottom:18px;
    display:flex;
    justify-content:center;
}

.invisalign-logo{
    width:70%;
    height:120px;
    object-fit:contain;
    background:#fff;
    border:1px solid #dfe9f7;
    border-radius:12px;
    padding:12px;
    box-shadow:0 6px 18px rgba(4,55,105,.08);
}

.invisalign-poster-wrap{
    display:flex;
    justify-content:center;
}

.invisalign-poster{
    width:70%;
    height:auto;
    border-radius:12px;
    border:1px solid #dfe9f7;
    box-shadow:0 6px 18px rgba(4,55,105,.08);
}

/* 👇 ONLY spacing between image column and text column */

.invisalign-content{
    padding-left:40px;
}

/* OR if you don't want to add a class in HTML, use this instead */

.feature-card .row > .col-lg-7{
    padding-left:40px;
}

.invisalign-heading{
    color:#0d5ea8;
    font-size:1rem;
    font-weight:700;
    margin:18px 0 12px;
}

.invisalign-list{
    padding-left:24px;
    color:#5f6f86;
}

.invisalign-list li{
    font-size:.82rem;
    line-height:1.75;
    margin-bottom:10px;
    padding-left:4px;
}

.invisalign-link{
    color:#0d5ea8;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.invisalign-link:hover{
    color:#043769;
    text-decoration:none;
}

@media(max-width:768px){

    .feature-card .row > .col-lg-7{
        padding-left:15px;
        margin-top:20px;
    }

    .invisalign-logo{
        height:90px;
    }

    .invisalign-heading{
        font-size:.9rem;
    }

    .invisalign-list li{
        font-size:.78rem;
    }

}

/*====================================================
                DIGITAL X-RAYS
====================================================*/

.digitalxray-image-wrap{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:10px;
}

.digitalxray-image{
    width:100%;
    max-width:430px;
    height:auto;
    object-fit:contain;
    border-radius:12px;
    border:1px solid #dfe9f7;
    box-shadow:0 6px 18px rgba(4,55,105,.08);
}

.digitalxray-divider{
    border:0;
    border-top:1px solid #dbe7f5;
    margin:16px 0 18px;
    opacity:1;
}

.feature-subheading{
    color:#0d5ea8;
    font-size:1rem;
    font-weight:700;
    margin:0 0 12px;
    display:flex;
    align-items:center;
    gap:8px;
}

.feature-subheading::before{
    content:"";
    width:6px;
    height:22px;
    background:#0d5ea8;
    border-radius:6px;
}

@media(max-width:768px){

    .digitalxray-image{
        max-width:100%;
    }

    .feature-subheading{
        font-size:.92rem;
    }

}

/*====================================================
                    SEALANTS
====================================================*/

.sealants-image-wrap{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:10px;
}

.sealants-image{
    width:100%;
    max-width:430px;
    height:auto;
    object-fit:contain;
    border-radius:12px;
    border:1px solid #dfe9f7;
    box-shadow:0 6px 18px rgba(4,55,105,.08);
}

.sealants-divider{
    border:0;
    border-top:1px solid #dbe7f5;
    margin:12px 0 18px;
    opacity:1;
}

.feature-subheading{
    color:#0d5ea8;
    font-size:1rem;
    font-weight:700;
    margin:20px 0 10px;
    display:flex;
    align-items:center;
    gap:8px;
}

.feature-subheading::before{
    content:"";
    width:6px;
    height:22px;
    background:#0d5ea8;
    border-radius:6px;
}

.feature-note{
    margin-top:18px;
    background:#eef6ff;
    border-left:4px solid #0d5ea8;
    border-radius:10px;
    padding:12px 16px;
}

.feature-note p{
    margin:0;
    color:#5f6f86;
}

.feature-note a{
    color:#0d5ea8;
    font-weight:600;
    text-decoration:none;
}

.feature-note a:hover{
    color:#043769;
}

@media(max-width:768px){

    .sealants-image{
        max-width:100%;
    }

    .feature-subheading{
        font-size:.92rem;
    }

}