/* NORMAL - variable weight */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ITALIC - variable weight */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}



body {
    font-family: 'Montserrat', sans-serif !important;
    color: #1a1a1a;
    overflow-x: hidden;

}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}

#spacing {
    margin-top: 5%;
}

/* topbar */
#topbar {
    background-color: #000;
}

.topbar-contact {
    gap: 0.5rem;
    font-weight: 600;
    height: 30px;
}

.topbar-contact a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: left;
    gap: 0.2rem;
    transition: color 0.3s;
    margin-top: -2px;
    flex-shrink: 1;
}

.topbar-contact a span {
    white-space: nowrap;
    flex-shrink: 1;
}

.topbar-contact a svg {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.topbar-contact a:hover {
    color: #cc4192;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #000;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-links a:hover {
    background-color: #cc4192;
    color: #fff;
}

/* navbar */
.sticky-top {
    position: sticky !important;
    z-index: 1000;
    top: 0;
}

/* .container,
.container-fluid {
    overflow-x: hidden;
} */

.navbar {
    padding: 0 45px !important;
}

.navbar-brand img {
    max-height: 100px;
    padding: 0;
    margin: 0;
}

.navbar-brand h6 {
    line-height: 1.5;
    padding-left: 10px;
    font-weight: 600;
}

#navbarNav #navlink {
    position: relative;
    color: #000;
    font-size: 16px !important;
    font-weight: 600;
    padding: 0.5rem;
    margin: 0 0.25rem;
    transition: color 0.3s;
}


#navbarNav #navlink:hover,
#navbarNav #navlink.active {
    color: #cc4192 !important;
}

.navbar-nav .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.2rem;
}

.nav-link {
    color: #000 !important;
    font-weight: 600;
}

.contact-info .btn {
    color: #fff;
    width: fit-content;
    background-color: #cc4192;
    border: none;
    font-weight: 600;
    margin-top: -1.5%;
    margin-bottom: 1%;
    border-radius: 3px;
}

.contact-info .btn:hover {
    color: #fff;
    background-color: #063ddd;
}

/* tiltles */
.title {
    text-align: center;
    font-weight: 700;
    margin: 0px 0 30px;
}

.sub-title {
    text-align: center;
    font-weight: 600;
    margin: 30px 0px 50px;
}

/* banner */
.banner {
    background-image: url("../images/homebanner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    min-height: 600px;
}

.banner h1 {
    font-size: 40px;
    font-weight: 600;
    margin-top: -30px;
    margin-bottom: 20px;
    color: #cc4192;
}

.banner p {
    line-height: 1.8;
}

.banner .btn {
    color: #fff;
    font-weight: 500;
    background-color: #cc4192;
    transition: 0.3s ease;
}

.banner .btn:hover {
    color: #fff;
    background-color: #063ddd;
}


/* about */
.about p {
    height: 580px;
    font-weight: 600;
    font-size: 15px;
    line-height: 2;
    overflow-y: auto;
    scrollbar-width: none;
}

/* Chrome, Edge, Safari */
.about p::-webkit-scrollbar {
    display: none;
}

.image-wrap {
    position: relative;
    display: inline-block;
}

.image-wrap img {
    display: block;
    max-width: 100%;
    height: 650px;
    border-radius: 5%;
}

.image-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    width: 22px;
    height: 200px;
    background-color: #d63a8c;
    border-radius: 5px;
}

/* My special */
.services-section {
    padding: 80px 0;
}

.services-title {
    color: #cc4192;
    font-weight: 700;
    line-height: 1.3;
    font-size: 53px;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 32px;
}

.check-box {
    width: 44px;
    height: 44px;
    background: #f7e0ed;
    display: flex;
    align-items: center;
    justify-content: center;
}


.service-text {
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

.service-text span {
    font-size: 14px;
    margin-left: 3px;
    align-self: center;
}

/* experience counts */
#counts {
    background-color: #cc4192;
    padding: 50px 0;
}

.count-item h1,
.count-item p {
    color: #fff;
    text-align: center;
    font-weight: 600;
}

.count-item h1 {
    font-size: 75px;
    font-weight: 700;
}

/* 
awards section 
 .awards-section h1 {
    font-weight: 700;
    margin-bottom: 60px;
} */

.award {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.award-img {
    width: 320px;
    height: auto;
}

.award-text {
    position: absolute;
    top: 22%;
}

.award-text p {
    color: #B38528;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 5px;
}

.award-text span {
    color: #B38528;
    font-size: 14px;
    font-weight: 500;
}

/* publications */
.publication {
    background-color: #F9F7F8;
}

/* .publication-title {
    text-align: center;
    font-weight: 700;
    margin: 0px 0 30px;
}

.publication-sub {
    font-weight: 600;
} */

.book-card {
    background: #fff;
    border-radius: 15px;
    padding: 35px 25px;
    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
    transition: transform 0.2s ease;
}

.book-card:hover {
    transform: translateY(-4px);
}

.book-card .book-title {
    color: #222;
    font-weight: 700;
    font-size: 16px;
}

.book-card .book-author {
    color: #222;
    font-size: 15px;
}

.divider {
    width: 50%;
    height: 2px;
    margin: auto;
    background-color: #cc4192;
}

/* published books */
.books-bar1 {
    width: 90%;
    height: 700px;
    background-color: rgba(204, 65, 146, 0.2);
    border-radius: 350px;
    z-index: -10;
    position: absolute;
    top: 28%;
    left: 35%;
}

.books-bar2 {
    width: 90%;
    height: 650px;
    background-color: rgba(204, 65, 146, 0.2);
    border-radius: 350px;
    z-index: -10;
    position: absolute;
    top: 60%;
    right: 60%;
}

/* big-book */


/* .book img */
@media(min-width:776px) and (max-width:992) {
    .book img {
        height: 300px;
        padding: 0%;
        margin-top: 2%;

    }

}



@media (min-width:992px) {
    .book img {
        height: 400px;
        padding: 0%;
        margin-top: 2%;
        display: flex;
        align-items: center;
    }
}

/* book-pose-big */
@media (max-width:768px) {
    .book-pose img {
        height: 350px;
        width: 90%;
        object-position: center;
        border-radius: 20px;
    }

    .book-big {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media (min-width: 768px) and (max-width: 1600px) {

    .book-pose img {
        height: 430px;
        width: 75%;
        object-position: center;
        border-radius: 30px;
        padding: 2%;
    }
}

/* big image */

@media (max-width: 575px) {
    .book-pose-big {
        top: 20%;
    }

    .book-pose-big img {
        height: 400px;
        width: 80%;
        right: 0;
        object-fit: cover;
        object-position: center;
        border-radius: 15px;
    }

}

@media (min-width: 575px) and (max-width:992px) {
    .book-pose-big {
        right: 0;
        top: 10%;
    }

    .book-pose-big img {
        height: 300px;
        width: 90%;
        right: 0;
        object-fit: cover;
        object-position: center;
        border-radius: 20px;
    }
}

@media (min-width: 992px) and (max-width: 1500px) {
    .book-pose-big {
        position: absolute;
        right: -6%;
    }

    .book-pose-big img {
        height: 400px;
        width: 900%;
        right: 0;
        object-fit: cover;
        object-position: center;
        border-radius: 15px;
    }
}


/* med call app */
.medi-app {
    background-image: url("../images/Rectangle.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}


/* for who conttent hide place */
/* #who {
    margin: 0 !important;
    padding: 0 !important;
} */
.pill-nav-wrapper {
    background: #ffffff;
    border-radius: 18px;
    padding: 12px;
    /* max-width: 1100px; */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.pill-nav .nav-link {
    color: #fff;
    padding: 10px 28px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 20px;
    transition: all 0.3s ease;
}

.pill-nav .nav-link:hover {
    background: #f7e0ed;
}

.pill-nav .nav-link.active {
    background: #cc4192;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(199, 67, 143, 0.4);
}

.app-about {
    display: flex;
    align-items: start;
    gap: 15px;
}

.app-about .check {
    width: 40px;
    height: 40px;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

.app-about p {
    font-size: 15px;
    font-weight: 500;
    color: #222;
}

/* published articles */
.article-title {
    text-align: center;
    font-weight: 700;
    margin: 0px 0 30px;
}

.article-card {
    background: #fff;
    border-radius: 15px;
    padding: 35px 25px;
    box-shadow:
        0 0 8px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.15);
    text-align: center;
    transition: transform 0.2s ease;
}

.article-card:hover {
    transform: translateY(-4px);
}

.article-card a {
    color: #222;
    font-weight: 600;
    text-decoration: underline;
    font-size: 18px;
}

.article-card {
    margin-bottom: 4%;
}

#spacing {
    margin-bottom: 4%;
}


/* consultation */
.link {
    color: white;
}

.link:hover {
    color: #4706dd;
}

.link:active {
    color: white;
}



.consult-btn a {
    background-color: #fff;
    font-weight: 500;
    color: #cc4192;
    transition: 0.3s ease;
    box-shadow: 0 0px 5px rgba(141, 5, 118, 0.658);
    text-decoration: none;
    padding: 2%;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
}


.consult-btn a:hover {
    color: #fff;
    background-color: #4706dd;
}

.consultation {
    background-color: #cc4192;
}

.consultation-contact h3,
.consultation-contact p {
    color: #fff;
}

.consultation-contact h3 {
    font-weight: 700;
    font-size: 36px;
}

.consultation-contact p {
    font-weight: 500;
}

.contact-card {
    color: #fff;
    border-radius: 15px;
    border: 2px solid white;
}

.contact-card h4,
.contact-card p {
    font-weight: 600;
}

/* footer */
footer {
    font-weight: 550;
    font-size: 16px;
}

.footer-logo {
    display: flex;
    flex-direction: row;
}

.footer-quick {
    padding: 0 45px !important;
}

footer h4 {
    font-weight: 700;
}

.footer-bottom {
    text-align: center;
    color: #fff;
    background-color: #000;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-top: 20px;
}

.footer-links a {
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links #mail {
    text-decoration: underline !important;
}

.footer-links a:hover {
    color: #cc4192;
    padding-left: 5px;
}

.footer-links .btn {
    color: #fff;
    font-weight: 500;
    background-color: #cc4192;
    transition: 0.3s ease;
}

.footer-links .btn:hover {
    color: #fff;
    background-color: #063ddd;
}

/* expertise */
.expertise-headline {
    text-align: center;
    font-weight: 700;
    margin: 0px 0 30px;
}

.expertise-sub {
    text-align: center;
    font-weight: 600;
}

.expertise-card {
    background: #fff;
    border-radius: 15px;
    padding: 35px 25px;
    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.expertise-card:hover {
    transform: translateY(-4px);
    background-color: #cc4192;
    color: #fff;
}

.expertise-card:hover .btn {
    color: #fff;
    border: 2px solid white;
}

.expertise-card:hover .expertise-title,
.expertise-card:hover .expertise-des {
    color: #fff;
}

.expertise-card .expertise-title {
    color: #cc4192;
    font-weight: 600;
    font-size: 18px;
}

.expertise-card .expertise-des {
    color: #000;
    font-size: 15px;
    text-align: justify;
    align-items: center;
}

.expertise-card .btn {
    color: #fff;
    font-weight: 500;
    background-color: #cc4192;
    transition: 0.3s ease;
    border: 2px solid transparent;
}

.expertise-card img {
    width: 60px;
    height: 60px;
}

.expertise-card .arrow {
    width: 50px;
    height: 50px;
}

/* our services */
.service-head {
    align-items: center;
    background-color: #cc4192;
    border-radius: 999px;
}

.service-head p {
    font-weight: 500;
    /* font-size: 17px; */
    color: #fff;
    line-height: 1.6;
}

.service-head .split {
    width: 5px;
    height: 200px;
    background-color: #fff;
    margin: 0 12px;
    border-radius: 99px;
}

.ser-exp-sub {
    text-align: center;
    font-weight: 600;
}

.ser-exp-card {
    background: #fff;
    border-radius: 15px;
    padding: 35px 30px;
    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.ser-exp-card:hover {
    transform: translateY(-4px);
    background-color: #cc4192;
    color: #fff;
}

.ser-exp-card:hover .btn {
    color: #fff;
    border: 2px solid white;
}

.ser-exp-card:hover .ser-exp-title,
.ser-exp-card:hover .ser-exp-des {
    color: #fff;
}

.ser-exp-card .ser-exp-title {
    color: #cc4192;
    font-weight: 600;
    font-size: 17px;
}

.ser-exp-card .ser-exp-des {
    color: #000;
    font-size: 14px;
}

.ser-exp-card .btn {
    color: #fff;
    font-weight: 500;
    background-color: #cc4192;
    transition: 0.3s ease;
    border: 2px solid transparent;
}

.ser-exp-card img {
    width: 70px;
    height: 70px;
}

.ser-exp-card .arrow {
    width: 40px;
    height: 40px;
}

.procedure {
    background-color: #F9F7F8;
}

.procedure-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    transition: transform 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.procedure-card h6 {
    font-weight: 600;
    font-size: 18px;
}

.procedure-card span {
    font-size: 16px;
    margin-left: 3px;
    align-self: center;
}

.procedure-card .btn {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    background-color: #cc4192;
    transition: 0.3s ease;
}

.procedure-card .btn:hover {
    color: #fff;
    background-color: #063ddd;
}

.choose img {
    object-fit: cover;
    object-position: center;
    border-radius: 30px;
    width: 100%;
    height: 530px;
}

.choose-card {
    height: 90%;
    margin-right: 20px;
}

.choose-card {
    background: #fff;
    border-radius: 15px;
    padding: 35px 30px;
    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.choose-card:hover {
    transform: translateY(-4px);
    background-color: #cc4192;
    color: #fff;
}

.choose-card:hover .choose-title,
.choose-card:hover .choose-des {
    color: #fff;
}

.choose-card img {
    width: 50px;
    height: 50px;
}

.choose-title {
    font-weight: 700;
    color: #cc4192;
    font-size: 18px;
}

.choose-des {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
}

.simple {
    background-color: #cc4192;
    color: #fff;
}

.simple h3 {
    font-weight: 700;
    font-size: 36px;
}

.simple p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    width: 90%;
}

.simple img {
    opacity: 50%;
    width: 70%;
    height: 70%;
}

#hub {
    background-image: url("../images/app-bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hub-card {
    background: #fff;
    border-radius: 15px;
    padding: 35px;
    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.hub-card img {
    width: 45px;
    height: 45px;
    background-color: #f7e0ed;
    padding: 6px;
}

.hub-text p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

/* jaundice */
.bg-bar {
    width: 80%;
    height: 150px;
    position: absolute;
    top: 30%;
    right: 50%;
    background-color: #cc4192;
    z-index: -10;
}

.jaundice img {
    width: 390px;
    height: 390px;
    border-radius: 50%;
}

.jaundice h5 {
    color: #cc4192;
    font-weight: 600;
}

.jaundice p {
    font-size: 14px;
    font-weight: 600;
    line-height: 2;
}

/* liver-disorder */
.liver {
    background-color: rgba(204, 65, 146, 0.1);
    border-radius: 90px;
}

.liver h4 {
    font-weight: 600;
    color: #cc4192;
}

.liver p {
    font-weight: 500;
    line-height: 2;
}

.accordion-body {
    background-color: rgba(0, 0, 0, 0.021);
    line-height: 1.2;
}

.accordion-body p {
    font-size: 16px;
    font-weight: 500;
}

.accordion-body li {
    font-size: 14px;
    font-weight: 500;
}

ul li::marker {
    color: #cc4192;
    font-weight: 700;
    font-size: 20px;
}

#accordion-button {
    background-color: transparent !important;
}

#accordion-button:focus {
    outline: none !important;
    box-shadow: none !important;
    color: #000 !important;
}

#accordion-button.collapsed::after {
    content: "";
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 10 L16 22 M10 16 L22 16' stroke='black' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    color: white;
}

#accordion-button:not(.collapsed)::after {
    content: "";
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16 L22 16' stroke='black' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    
}

.accordion-item {
    border-bottom: 1px solid #000;
}

.circle-section {
    background-color: #cc4192;
    overflow-x: auto;
}

.circle-section h4 {
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.circle-section p {
    color: #fff;
    text-align: center;
    font-size: 14px;
    /* font-weight: 500; */
}

.circles-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.circle-box {
    width: 160px;
    height: 160px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    padding: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.9rem;
    line-height: 1.3;
    font-weight: 600;
}

.circle-box:hover {
    color: #cc4192;
    background-color: #fff;
}

.differ {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F9F7F8 100%);
    ;
}

.differ h4 {
    text-align: center;
    font-weight: 700;
    color: #cc4192;
}

.differ p {
    font-weight: 500;
    font-size: 14px;
}

.differ ul li {
    font-weight: 500;
    font-size: 14px;
}

.differ img {
    border-radius: 13px;
    max-width: 33%;
}

.differ .table-responsive {
    border-radius: 15px !important;
    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.15);
}

.differ .table thead th {
    background-color: #cc4192;
    color: #fff;
}

.differ .table-content {
    display: flex;
}

/* LEFT CARD */
.tab-navbar {
    position: sticky;
    top: 120px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    padding: 0;
    width: 95%;
}

/* for height liver-disorder-height */
/* .liver-disorder-height{
    height:510px;
}
.equal-height-row {
    align-items: stretch;
}

.left-col {
    height: 100%;
} */
/* Remove Bootstrap pill styling */
.nav-pills .nav-link {
    border-radius: 0;
    background: transparent;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    padding: 18px 22px;
    text-align: left;
    border: none;
    width: 100%;
}

/* Active state (only applies to header visually) */
.nav-pills .nav-link:hover {
    background: #f7e0ed !important;
}

.nav-pills .nav-link.active {
    background: #cc4192 !important;
    color: #fff !important;
}

.liver-tab p {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 0;
    line-height: 1.8;
}

.liver-tab h4 {
    font-weight: 600;
    color: #cc4192;
}

.liver-tab ul li p {
    margin: 0;
}

.liver-tab ul {
    margin-bottom: 3px;
}


@media screen and (max-width: 768px) {
    .navbar {
        padding: 0 !important;
    }

    .footer-logo {
        display: flex;
        flex-direction: column;
    }

    .footer-logo img {
        margin-left: 30px;
    }

    .footer-column {
        padding: 20px 60px !important;
    }

    .service-head {
        border-radius: 0;
    }

    .split {
        display: none;
    }

    .procedure-card {
        align-items: center;
    }

    .procedure-card .btn {
        white-space: nowrap;
    }

    .image-wrap img {
        display: block;
        width: 100%;
        height: 500px;
        border-radius: 5%;
    }

    .image-wrap::after {
        display: none;
    }

    .circles-row {
        flex-wrap: wrap;
        gap: 20px;
    }

    .circle-box {
        width: calc(50% - 20px);
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .differ img {
        max-width: 100% !important;
    }

    .differ .table-content {
        display: block;
    }

    .liver-tab h2 {
        margin-top: 30px;
    }
}

.accordion-item button {
    background-color: #cc4192 !important;
}

/* ========= liver transparent======== */

.paediatric-liver .col {
    background-color: #cc4192 !important;
    border-radius: 90px;
    width: 170px;
    height: 100px;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.paediatric-liver .col h6 {
    color: #fff;
    font-weight: 600;
}

.liver-transaperent {
    margin-bottom: 3%;
}

/* dr-rela-insititute */
.dr-rela-insititute h5 {
    color: #cc4192;
}

.dr-rela-insititute {
    background-color: rgba(219, 219, 216, 0.651);
    margin-bottom: 5%;
}


/* dr imgage */
.dr-image .img {
    height: 170px;
    background-color: #cc4192;
    display: flex;
    flex-direction: column;
    justify-content: center;

}


.dr-image img {
    height: 250px;
    width: 250px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    right: 30px;
    top: -30px;
}

.dr-image h5 {
    color: #cc4192;

}


.dr-image i {
    font-size: 10px;
    color: #cc4192;
    align-items: center;
}

@media screen and (max-width: 1600px) {


    .dr-image .img {

        width: 300px;
        height: 170px;


    }

    .dr-image img {
        height: 250px;
        width: 250px;

        left: 30%;
        top: -30px;
    }
}

@media screen and (max-width: 768px) {

    .dr-image .roundimg {
        margin-bottom: 8%;
    }

    .dr-image .img {
        width: 300px;
        height: 170px;
    }

    .dr-image img {
        height: 250px;
        width: 250px;
        left: 30%;
        top: -30px;
    }
}

@media screen and (max-width: 500px) {
    .dr-image .roundimg {
        margin-bottom: 18%;
    }

    .dr-image .img {

        width: 180px;
        height: 170px;
        background-color: #cc4192;
        display: flex;
        flex-direction: column;
        justify-content: center;

    }

    .dr-image img {
        height: 250px;
        width: 250px;
        left: 15%;
        top: -30px;
    }
}

/* Establishing Excellence in India */
.excellence-india {
    background-color: #cc4192;
    color: #fff;
    margin-bottom: 5%;

}

.round {
    color: #cc4192;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.15);
    border-radius: 90px;
    background-color: whitesmoke;
}

.excellence-india h1 {
    font-weight: 600;
    font-size: 60px;
}

/* Initial Evaluation &donor selection */
.intial-donor .circle {
    background-color: #cc4192;

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-bottom: 5%;
}

@media screen and (max-width: 500px) {

    .intial-donor .circle {
        width: 160px;
        height: 90px;
        padding: 3%;
    }

}

@media screen and (min-width: 500px) {

    .intial-donor .circle {
        width: 160px;
        height: 100px;
        padding: 2%;
    }

}

@media screen and (min-width: 768px) {
    .intial-donor .circle {
        width: 120px;
        height: 120px;
    }
}

.horizontal-line {
    width: 200px;
    height: 3px;
    background-color: #cc4192;
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: end;
    flex-direction: row;
    font-size: 50px;
    color: #cc4192;
}

.initial i {
    font-size: 8px;
    color: #cc4192;
    align-items: center;
}

@media screen and (min-width: 768px) {
    .boxshadow {
        height: 350px
    }
}

.boxshadow {
    padding: 5%;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.15);
}

.boxshadow p {
    text-align: justify;
    font-size: small;
}

.initial-donor {
    margin-bottom: 6%;
}

/* preferred child */

.pre-child i {
    font-size: 8px;
    color: #cc4192;
    align-items: center;
}

.pre-child h5 {
    color: #cc4192;
}

.pre-child {
    margin-bottom: 5%;
}

/*  */

.type-of-liver i {
    font-size: 8px;
    color: #cc4192;
    align-items: center;
}

.type-of-liver h4,
h5 {
    color: #cc4192;
}

.auxiliary-liver {
    margin-bottom: 6%;
}

.auxiliary-liver {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.15);
    padding: 2%;
    border-radius: 10px;

}

.auxiliary-liver img {
    height: auto;
    width: 300px;
}

.robotic-liver {
    margin-bottom: 5%;
}

.robotic-liver img {
    height: auto;
    width: 300px;
}

.robotic-liver {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.15);
    padding: 3%;
    border-radius: 10px
}

.global-leader {
    background-color: #cc4192;
    color: #fff;
    margin-bottom: 5%;

}

.global-leader .box {
    border: 2px solid #fff;
    height: 80px;
    width: 300px;
    border-radius: 10px;
    text-align: center;
}

.global-leader .box2 {
    border: 2px solid #fff;
    height: 150;
    width: 300px;
    border-radius: 10px;
    text-align: center;
}

/* =========== testimonial========= */


.testimonial .pic img {
    width: 100%;
    height: 300px !important;
}


.te_img {
    width: 100%;
    height: 100%;
    border: 7px solid rgba(209, 31, 129, 0.815);
    border-radius: 10px;
}

/* popup */


.scanner img {
    height: 130px;
}

:root {
    --pink: #e91e63;
}

.scanner {

    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 0 18px rgba(233, 30, 99, 0.25);
    background: #fff;
    background: #cc4192;
}

#clickhere {
    background-color: #cc4192;
    font-weight: 500;
    color: #fff;

    text-decoration: none;
    padding: 2%;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
}


#clickhere:hover {
    color: #fff;
    background-color: #4706dd;
    padding: 2%;
    transition: 0.3s ease;
}

.poplink {
    color: black;
}

.poplink:hover {
    color: #4f1aca;
}

.poplink:active {
    color: #5112e6;
}

/* =======liver-tumour===== */
.Chemotherapy-Cycles {
    margin-bottom: 8%;

}

#accordion button {
    color: #cc4192 !important;
}

.circle-section {
    margin-bottom: 4%;
}

.pink1 {
    color: #cc4192;
}

.SIOPEL-Approach {
    margin-bottom: 5%;
}

.procedureend {
    height: 350px;
    background-color: transparent;
}

.tab-navbar1 {

    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.15);
    padding: 0;
    width: 95%;
}

/* .sticky-col {
    position: sticky !important;
    top: 100px !important;
    height: fit-content !important;
} */

/* Change accordion arrow to WHITE */
#accordion1 .accordion-button::after {
    filter: brightness(0) invert(1);
}

#accordion1 .accordion-button {
    color: #fff;
}

#accordion1 .accordion-button::after {
    filter: brightness(0) invert(1);
}

/* ====metabolic disorder page=== */

.disorder-head {
    background-color: #cc4192;
    color: whitesmoke;

}

@media(min-width:776px) and (max-width:1500px) {
.disorder-head {
        background-color: #cc4192;
        border-radius: 999px ;
        color: whitesmoke;

    }
}

/* Make dropdown overlay, not push others */
.nav-item.dropdown {
    position: relative;
    /* parent relative for absolute positioning */
}

.nav-item.dropdown .dropdown-menu {
    position: absolute !important;
    /* overlay instead of pushing */
    top: 100%;
    /* right below the button */
    left: 0;
    width: 100%;
    /* full width like your nav */
    z-index: 1050;
    /* on top of other items */
}

/* Ensure nav allows dropdown to overflow */
.tab-navbar {
    overflow: visible !important;
}
.warningsigns {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.15);
    padding: 2%;
    min-height:250px
}




/* Diagnosed */
.Diagnosed {
    background-color: #cc4192;
    color: #f7e0ed;
    padding: 50px;
    margin-bottom: 3%;
}

.Diagnosed ul li::marker {
    color: whitesmoke;
    font-weight: 700;
    font-size: 20px;
}

/* treatment */
.treatment .accordion-button {
    color: white;
    outline-style: none;
    box-shadow: none !important;
}

.accordion-button::after {
    filter: invert(1);
    /* makes the arrow icon white */
}

.treatment h5 {
    color: #cc4192;
}


/*Living with Metabolic Disorders */
.disorder .detectionmatters {
    background-color: #cc4192;
    color: #f7e0ed;
    font-weight: 500;
}

.disorder .detectionmatters ul li::marker {
    color: #fff;
}

.detectionmatters .card-body {
    background-color: #cc4192;
    color: white;
    padding: 2%;
}

.detectionmatters .card {
    background-color: transparent;
}

.detectionmatters .card-header {
    color: #cc4192;
}

/* bottum line */

.disorder .bottum_line {
    background-color: #e2409e6c;
}

#pinkcolor th {
    background-color: #cc4192 !important;
    color: white;

}

.sup_fam .card-title {
    color: #cc4192;
}

.infro_portal h5,
.infro_portal h6 {
    color: #cc4192;
}

.infro_portal p {
    text-align: justify;
}


.treatment .accordion-button .collapsed {
    color:yellow !important;
}
.treatment .accordion-button  {
    color: white !important;
    font-weight: 600;
}

/* Sidebar Container */
.tab-navbar {
    background-color: #ffffff;
    color: #cc4192;
}

/* Topic Headings (h4 buttons) */
.tab-navbar .nav-item>button {
    background-color: #ffffff;
    color: #cc4192;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}


.tab-navbar .nav-item>button:hover {
    background-color: #cc4192 !important;
    color: #ffffff !important;
}


/* Active/Open Topic */
.tab-navbar .nav-item>button[aria-expanded="true"] {
    background-color: #cc4192;
    color: #ffffff !important;
}

/* Sub-list Container */
.tab-navbar ul.collapse {
    margin-top: 8px;
    margin-bottom: 12px;
}

/* Sub-item buttons */
.tab-navbar ul.collapse .show .nav-link {
    background-color:#cc4192 ;
    color: white ;
    border-radius: 10px;
    margin-bottom: 6px;
    transition: all 0.3s ease;
}

.tab-navbar ul.collapse .nav-link.active {
    background-color:#da15887e;
    color:white;
    font-weight: 600;
        border-radius: 15px;
}

/* Active sub-item */
.tab-navbar .nav-link:hover {
        background-color: #cc1c8323;
    font-weight: 600;
    border-radius:15px;
}