@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

*{
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
}
/*** Spinner Start ***/
/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    transition: 0.5s;
    z-index: 99;
}
/*logo text*/
.custom-logo-text {
    color: #6884d3 !important;
}

/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-xl-square {
    width: 66px;
    height: 66px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;/*back of serch color*/
    background-color: #6495ed;
}

.btn.btn-primary {
    color: var(--bs-white);
}
/*color change code*/
:root{
     --bs-primary: #6884d3;
     --bs-secondary: #4D6FCC; 
}
/* Override Bootstrap primary button */
.btn-primary {
    background-color: #6884d3 !important;      /* Your preferred primary */
    border-color: #6884d3 !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:visited {
    background-color: #6884d3 ;  /* Darker shade for hover/click */
    border-color: #5268a8;       /*inner color of login or serch*/
    box-shadow: 0 0 0 0.2rem rgba(114, 145, 233, 0.5) !important; /* Optional focus color popup */
}


.btn.btn-primary:hover {
    background: var(--bs-secondary) ;
    border: 1px solid var(--bs-secondary) ;
}

.btn.btn-secondary {
    color: var(--bs-white);
   
}

.btn.btn-secondary:hover {
    background: var(--bs-primary) !important;
    border: 1px solid var(--bs-primary) !important;
}
/*** Topbar Start ***/

/*** Navbar ***/

.navbar-light .navbar-nav .nav-link {
    position: relative;
    margin-right: 25px;
    padding: 35px 0;
    color: var(--bs-white);
    font-size: 17px;
    font-weight: 400;
    outline: none;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 20px 0;
    color: var(--bs-dark);
}
/*button hover in navbar*/
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--bs-primary);
}
/*logo*/
.navbar-light .navbar-brand img {
    max-height: 100px;/*60 px oroginal*/
    width: auto; /*added till object fit*/
    max-width: none;
    object-fit: contain;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    transition: .5s;
}
/*stickylogo*/
.sticky-top.navbar-light .navbar-brand img {
    max-height: 60px;
}
/*pages : dropdown style arrow*/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
}

.dropdown .dropdown-menu a:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}
/*page box color*/
.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-primary);
    transition: .5s;
    opacity: 1;
}
/*For mobile app adjustment*/
@media (max-width: 991.98px) {
    .sticky-top.navbar-light {
        position: relative;
        background: var(--bs-white);
    }

    .navbar.navbar-expand-lg .navbar-toggler {
        padding: 10px 20px;
        border: 1px solid var(--bs-primary);
        color: var(--bs-primary);
    }

    .navbar-light .navbar-collapse {
        margin-top: 15px;
        border-top: 1px solid rgba(0, 0, 0, .08);
    }

    .navbar-light .navbar-nav .nav-link,
    .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
        margin-left: 0;
        color: var(--bs-dark);
    }

    .navbar-light .navbar-brand img {
        max-height: 45px;
    }
}
/*This CSS code defines a responsive, modern navbar with hover effects, sticky behavior, dropdown menus, and smooth transitions. It also adapts to mobile and desktop views using media queries, making the navbar behave differently depending on screen size.*/
@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        border-radius: 10px;
        transition: .5s;
        opacity: 0;
    }

    .navbar-light {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid;
        border-left: 0;
        /*border-style: dotted;*/
        border-style: double;
        z-index: 999;
    }
    
    .sticky-top.navbar-light {
        position: fixed;
        background: var(--bs-light);
        border: none;
    }

    .navbar-light .navbar-nav .nav-item::before {
        position: absolute;
        content: "";
        width: 0;
        height: 2px;
        bottom: -1px;
        left: 50%;
        background: var(--bs-primary);
        transition: .5s;
    }

    .sticky-top.navbar-light .navbar-nav .nav-item::before {
        bottom: 0;
    }

    .navbar-light .navbar-nav .nav-item::after {
        content: "";
        position: absolute;
        bottom: 1px;
        left: 50%;
        transform: translateX(-50%);
        border: 10px solid;
        border-color: transparent transparent var(--bs-primary) transparent;
        opacity: 0;
        transition: 0.5s;
    }

    .navbar-light .navbar-nav .nav-item:hover::after,
    .navbar-light .navbar-nav .nav-item.active::after {
        bottom: 1px;
        opacity: 1;
    }

    .navbar-light .navbar-nav .nav-item:hover::before,
    .navbar-light .navbar-nav .nav-item.active::before {
        width: calc(100% - 2px);
        left: 1px;
    }

    .navbar-light .navbar-nav .nav-link.nav-contact::before {
        display: none;
    }
}
/*dark or english button */
.theme-toggle, .language-toggle {
            background: none;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            margin-left: 15px;
            color: var(--text);
            transition: color 0.3s;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .theme-toggle:hover, .language-toggle:hover {
            background-color: var(--primary-lighter);
            color: var(--primary-dark);
        }
/*** Carousel Hero Header Start ***/
.service-heading{
    color: #5b72b7 !important;
    font-weight: 700 !important;
}
.hero-heading {
    color: #28375f !important;
}
.carousel-header {
    position: relative;
    overflow: hidden;
}

.carousel-indicators {
    display: none;
}

.carousel .carousel-control-prev,
.carousel .carousel-control-next {
    width: 0;
}

.carousel .carousel-control-prev .carousel-control-prev-icon,
.carousel .carousel-control-next .carousel-control-next-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 25px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    transition: 0.5s;
    /*new code added by me*/
     background-color: rgba(0, 0, 0, 0.3); /* Transparent dark background */
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;

}

.carousel .carousel-control-prev .carousel-control-prev-icon {
    left: 0;
    border-left: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 50px;

}

.carousel .carousel-control-next .carousel-control-next-icon {
    right: 0;
    border-right: 0;
    border-top-left-radius: 50px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 0;
}

.carousel .carousel-control-prev .carousel-control-prev-icon:hover,
.carousel .carousel-control-next .carousel-control-next-icon:hover {
    background: var(--bs-secondary);
}

.carousel .carousel-inner .carousel-item {
    position: relative;
}

.carousel .carousel-inner .carousel-item .carousel-caption-1  {
    font-family: 'font-family: 'Roboto', 'Inter', sans-serif';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 100px;
    display: flex;
    align-items: center;
    justify-content: end;
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.5));
    background-size: cover;
}

.carousel-caption-1-content {
    text-align: end;
    padding-right: 100px;
}

.carousel-caption-1-content .carousel-caption-1-content-btn {
    display: flex;
    justify-content: end;
}

.carousel .carousel-inner .carousel-item .carousel-caption-2  {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 100px;
    display: flex;
    align-items: center;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.5));
    background-size: cover;
}

.carousel-caption-2-content {
    text-align: start;
    padding-left: 100px;
}

.carousel-caption-2-content .carousel-caption-2-content-btn {
    display: flex;
    justify-content: start;
}


@media (max-width: 992px) {
    .carousel .carousel-inner .carousel-item {
        height: 700px;
        margin-top: -100px;
    }

    .carousel .carousel-inner .carousel-item img {
        height: 700px;
        object-fit: cover;
    }


    .carousel .carousel-inner .carousel-item .carousel-caption-1 {
        max-width: 100% !important;
        justify-content: center;
    }

    .carousel-caption-1-content {
        padding: 0 20px !important;
        text-align: center !important;
    }

    .carousel-caption-1-content .carousel-caption-1-content-btn {
        justify-content: center;
    }


    .carousel .carousel-inner .carousel-item .carousel-caption-2 {
        max-width: 100% !important;
        justify-content: center;
    }

    .carousel-caption-2-content {
        padding: 0 20px !important;
        text-align: center !important;
    }

    .carousel-caption-2-content .carousel-caption-2-content-btn {
        justify-content: center;
    }



    .carousel .carousel-control-prev .carousel-control-prev-icon,
    .carousel .carousel-control-next .carousel-control-next-icon {
        display: none;
    }
}

.modal .modal-header {
    height: 100px;
}

#searchModal .modal-content {
    background: rgba(255, 255, 255, .6);
}
/*** Carousel Hero Header End ***/

/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(0, 20, 66, 0.7), rgba(0, 20, 66, 0.7)), url(../img/singleheader.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px 0 60px 0; 
    transition: 0.5s;
}

.bg-breadcrumb .breadcrumb {
    position: relative;
}

.bg-breadcrumb .breadcrumb .breadcrumb-item a {
    color: var(--bs-white);
}

/* Light Theme Breadcrumb Hover/Active Fix */
.bg-breadcrumb .breadcrumb .breadcrumb-item a:hover {
    color: #8fa4e0 !important;
}

.bg-breadcrumb .breadcrumb .breadcrumb-item.active {
    color: #8fa4e0 !important;
}

@media (max-width: 992px) {
    .bg-breadcrumb {
        padding: 60px 0 60px 0;
    }
}
/*** Single Page Hero Header End ***/


/*** Features Start ***/
.feature .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--bs-white);
    border-radius: 10px;
    transition: 0.5s;
}

.feature .feature-item:hover {
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.feature .feature-item .feature-icon {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
}

.feature .feature-item .feature-icon i {
    transition: 0.5s;
}

.feature .feature-item:hover .feature-icon i {
    transform: rotate(360deg);
}

.feature .feature-item a.btn {
    transition: 0.5s;
}

.feature .feature-item:hover a.btn:hover {
    color: var(--bs-primary) !important;
}
/*** Features End ***/

/*** About Start ***/
.about .about-img {
    position: relative;
    padding-bottom: 30px;
    margin-top: 30px; 
    margin-left: 30px;
}

.about .about-img::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    top: -30px;
    right: 0;
    border-radius: 10px;
    background: var(--bs-secondary);

}

.about .about-img::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 100%;
    left: -30px;
    bottom: 30px;
    border-radius: 10px;
    background: var(--bs-secondary);
}

.about .about-img .about-exp {
    position: absolute;
    top: 0;
    left: 0;
    padding: 25px;
    font-size: 30px;
    font-weight: bold;
    background: var(--bs-secondary);
    color: var(--bs-white);
    border: 1px solid var(--bs-secondary);
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 10px;
}
.blog-txt.breadcrumb-item.active {
         color : #6884d3 !important;
             }
/*** About End ***/

/*** Service Start ***/
.service-item {
    position: relative;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.service-item::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    bottom: 0;
    border-radius: 10px;
    background: var(--bs-primary);
    transition: 0.5s;
    z-index: 1;
}

.service-item:hover::after {
    width: 100%;
    height: 100%;
}

.service-item:hover .service-content,
.service-item:hover .service-btn {
    position: relative;
    z-index: 2;
}

.service-item .service-content a,
.service-item .service-content p {
    transition: 0.5s;
}

.service-item:hover .service-content a:hover {
    color: var(--bs-secondary);
}

.service-item:hover .service-content p {
    color: var(--bs-white);
} 

.service-item .service-btn {
    width: 80px;
    height: 80px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    transition: 0.5s;
}

.service-item .service-btn i {
    transition: 0.5s;
}

.service-item:hover .service-btn {
    background: var(--bs-white);
}

.service-item:hover .service-btn i {
    transform: rotate(360deg);
    color: var(--bs-primary) !important;
}
/*** Service End ***/


/*** Counter Start ***/
.counter {
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(25, 64, 154, 0.9), rgba(25, 64, 154, 1)), url(../img/fact-bg.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

.counter .counter-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.counter .counter-item .counter-item-icon {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/*** Counter End ***/


/*** Products Start ***/
.product .product-item {
    border: 1px solid rgba(196, 211, 211, 0.9);
    border-radius: 10px;
}

/*** Products End ***/

/*** Blog Start ***/
.blog .blog-item {
    border-radius: 10px;
    background: var(--bs-light);
    transition: 0.5s;
}

.blog .blog-item:hover {
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
}

.blog .blog-item .blog-img {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.blog .blog-item .blog-img::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: 0.5s;
    z-index: 1;
}

.blog .blog-item .blog-img img {
    transition: 0.5s;
}

.blog .blog-item:hover .blog-img img {
    transform: scale(1.2);
}

.blog .blog-item:hover .blog-img::after {
    background: rgba(0, 209, 249, 0.2);
}

.blog .blog-item .blog-date {
    position: absolute;
    top: 25px;
    left: 25px;
    border-radius: 10px;
    background: var(--bs-primary);
    color: var(--bs-white);
    z-index: 2;
}

.blog .blog-item .blog-content a {
    transition: 0.5s;
}

.blog .blog-item:hover .blog-content a:hover {
    color: var(--bs-primary) !important;
}
/* Force equal height for all blog images */
.blog .blog-item .blog-img {
    width: 100%;
    height: 230px;        /* Adjust this value if you want taller images */
    overflow: hidden;
}

/* Make images fill container equally */
.blog .blog-item .blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Crop nicely without distortion */
    display: block;
}

/*** Blog End ***/

/*** Team Start ***/
.team .team-item {
    position: relative;
    overflow: hidden;
    background: var(--bs-white);
    border: 1px solid var(--bs-secondary);
    border-radius: 10px;
}

.team .team-item .team-inner {
    transition: 0.5s;
}
.team .team-item:hover .team-inner {
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
}

.team .team-item .team-inner .team-img {
    position: relative;
    z-index: 2;
}

.team .team-item .team-inner .team-img::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: rgba(0, 209, 249, 0.2);
    transition: 0.5s;
    z-index: 3;
}

.team .team-item:hover .team-inner .team-img::after {
    height: 100%;
}

.team .team-item .team-inner .team-img .team-share {
    position: absolute;
    left: 10px;
    bottom: 10px;
    transition: 0.5s;
    z-index: 2;
}

.team .team-item:hover .team-inner .team-img .team-share {
    opacity: 0;
}

.team .team-item .team-inner .team-img .team-icon {
    position: absolute;
    bottom: 0;
    left: -100%;
    border-bottom-left-radius: 0 !important; 
    border-top-left-radius: 0 !important;
    display: inline-flex;
    background: var(--bs-primary);
    transition: 0.5s;
    z-index: 4;
}

.team .team-item:hover .team-inner .team-img .team-icon { 
    left: -25px; 
}
/*** Team End ***/


/*** testimonial Start ***/
.testimonial .owl-nav .owl-prev {
    position: absolute;
    top: -58px;
    right: 0;
    background: var(--bs-primary);
    color: var(--bs-white);
    padding: 5px 30px;
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .owl-nav .owl-prev:hover {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

.testimonial .owl-nav .owl-next {
    position: absolute;
    top: -58px;
    right: 88px;
    background: var(--bs-primary);
    color: var(--bs-white);
    padding: 5px 30px;
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .owl-nav .owl-next:hover {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

.testimonial-carousel .owl-dots {
    display: flex;
    justify-content: center;
    margin-left: 20px;
    margin-top: 20px;
}

.testimonial-carousel .owl-dots .owl-dot {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    margin-right: 15px;
    border: 1px solid var(--bs-secondary);
    background: var(--bs-primary);
    transition: 0.5s;
}

.testimonial-carousel .owl-dots .owl-dot.active {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 1px solid var(--bs-primary);
    background: var(--bs-secondary) !important;
    transition: 0.5s;
}

.testimonial-carousel .owl-dots .owl-dot span {
    position: relative;
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.testimonial-carousel .owl-dots .owl-dot span::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bs-white);
}

@media (max-width: 992px) {
    .owl-carousel.testimonial-carousel {
        padding-top: 30px;
    }

    .testimonial .owl-nav .owl-prev,
    .testimonial .owl-nav .owl-next {
        top: -30px;
    }
}
/*** testimonial End ***/

/*** Footer Start ***/
.footer {
    /*background: var(--bs-secondary);*/
    background: #28375f !important;
}

.footer .footer-item a {
    line-height: 35px;
    /*color: var(--bs-body);*/
    color: var(--bs-white);
    transition: 0.5s;
}

.footer .footer-item p {
    line-height: 35px;
    color: var(--bs-white);
}

.footer .footer-item a:hover {
    letter-spacing: 1px;
    color: var(--bs-primary);
}

.footer .footer-item .footer-btn a,
.footer .footer-item .footer-btn a i {
    transition: 0.5s;
}

.footer .footer-item .footer-btn a:hover {
    background: var(--bs-white);
}

.footer .footer-item .footer-btn a:hover i {
    color: var(--bs-primary) !important;
}
/*** Footer End ***/


/* BASE DARK THEME STYLE */
:root {
    --light-bg: #ffffff;
    --light-text: #333333;
    --dark-bg: #0b0d12;
    --dark-text: #e8e8e8;
    --card-bg: #151a28;
    --card-border: #2a3348;
}

/* Dark Theme Base */
body.dark-theme,
html body.dark-theme {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background-color: rgba(104, 132, 211, 0.2);
    transform: scale(1.1);
}

/* Force all common text elements to a readable light color in dark mode
   (this also overrides inline style="color:#28375f" etc. since an
   !important rule in the stylesheet beats a plain inline style) */
body.dark-theme p,
body.dark-theme li,
body.dark-theme label,
body.dark-theme td,
body.dark-theme th,
body.dark-theme strong,
body.dark-theme b,
body.dark-theme small,
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
    color: #e8e8e8 !important;
}

body.dark-theme span:not(.vtag):not(.center-badge):not(.stat-num):not(.stat-txt) {
    color: #e8e8e8 !important;
}

/* Accent / heading colors that were hardcoded dark-navy — now a visible light blue */
body.dark-theme .hero-heading,
body.dark-theme .service-heading,
body.dark-theme .custom-h1-color,
body.dark-theme .custom-h6-color,
body.dark-theme .custom-hover,
body.dark-theme .blog-txt.breadcrumb-item.active,
body.dark-theme .disease h2 a {
    color: #8fa4e0 !important;
}

body.dark-theme .custom-h4-color {
    color: #8fa4e0 !important;
}

body.dark-theme a {
    color: #8fa4e0;
}
body.dark-theme a:hover {
    color: #6884d3;
}

/* Buttons that happen to be <a> tags (Read More, Login, product
   card CTAs, etc.) should keep white text like real buttons —
   not the generic link color above, which becomes invisible on
   the light-blue hover background (both landing near #6884d3). */
body.dark-theme a.btn.btn-secondary,
body.dark-theme a.btn.btn-primary {
    color: #ffffff !important;
}
body.dark-theme a.btn.btn-secondary:hover,
body.dark-theme a.btn.btn-primary:hover {
    color: #ffffff !important;
}

/* ── NAVBAR — transparent over the header image before scrolling
   (matches the home page's cinematic look), solid once scrolled ──
   A subtle bottom border keeps it visually separated from the header
   below even while transparent. */
body.dark-theme .navbar-light {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

body.dark-theme .sticky-top.navbar-light {
    background: #12172a !important;
    border-bottom: 1px solid #2a3348 !important;
}

body.dark-theme .navbar-light .navbar-nav .nav-link {
    color: #c3cbe0;
}

body.dark-theme .navbar-light .navbar-nav .nav-link:hover,
body.dark-theme .navbar-light .navbar-nav .nav-link.active {
    color: #8fa4e0;
}

body.dark-theme .navbar-brand h1.custom-logo-text {
    color: #8fa4e0 !important;
}

/* Dropdown menus (user menu, nav dropdowns) */
body.dark-theme .dropdown-menu {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
}
body.dark-theme .dropdown-item {
    color: #e8e8e8 !important;
}
body.dark-theme .dropdown-item:hover {
    background: #6884d3 !important;
    color: #fff !important;
}

/* ── HEADER / BREADCRUMB — keep the background image visible with a lighter overlay ── */
body.dark-theme .bg-breadcrumb {
    background-image: linear-gradient(rgba(0, 20, 66, 0.7), rgba(0, 20, 66, 0.7)), url(../img/singleheader.jpg) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

body.dark-theme .carousel-caption-1,
body.dark-theme .carousel-caption-2 {
    background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0.55)) !important;
}

/* ── BREADCRUMB LINKS IN DARK THEME (Home, Our Blog) ── */
body.dark-theme .bg-breadcrumb .breadcrumb-item a {
    color: #e8e8e8 !important;
}
body.dark-theme .bg-breadcrumb .breadcrumb-item a:hover {
    color: #8fa4e0 !important;
}
body.dark-theme .bg-breadcrumb .breadcrumb-item.active {
    color: #8fa4e0 !important;
}

/* ── CARDS / SECTIONS used across the site ── */
body.dark-theme .feature-item,
body.dark-theme .service-item,
body.dark-theme .product-content,
body.dark-theme .blog-item,
body.dark-theme .blog-content,
body.dark-theme .center-card,
body.dark-theme .dispensary-card,
body.dark-theme .dispensary-card-header,
body.dark-theme .dispensary-card-body,
body.dark-theme .stat-box,
body.dark-theme .stat-pill,
body.dark-theme .faq-item,
body.dark-theme .faq-question,
body.dark-theme .faq-answer,
body.dark-theme .disease,
body.dark-theme .service-detail-card,
body.dark-theme .why-card,
body.dark-theme .journey-card .jc-body,
body.dark-theme .map-outer,
body.dark-theme .search-card,
body.dark-theme .appointment-floating-bar,
body.dark-theme .category-label {
    background-color: var(--card-bg) !important;
    color: #e8e8e8 !important;
    border-color: var(--card-border) !important;
}

body.dark-theme .appointment-text h4,
body.dark-theme .appointment-text p {
    color: #e8e8e8 !important;
}

body.dark-theme .view-map-btn-container {
    background: var(--dark-bg) !important;
}

/* ── VACCINATION SCHEDULE CHART (scheduling page) ──
   Same rounded alternating-box design as light theme —
   only the colors change for dark mode, matching the
   site's own dark palette (--card-bg / --card-border).
   Selector specificity here (table.chart + nth-child)
   is higher than the generic "body.dark-theme td/th"
   text-color rule above, and scheduling.css loads after
   this file, so !important is used to guarantee these
   win regardless of load order. ── */

body.dark-theme table.chart {
    border: 1px solid #2a3348 !important;
    border-radius: 15px !important;
}

/* Odd rows — lighter card tone so it still reads as a
   distinct "box" against the page background */
body.dark-theme table.chart tr:nth-child(odd) th,
body.dark-theme table.chart tr:nth-child(odd) td {
    background-color: #2a3763 !important;
    color: #f5f7fc !important;
}

/* Even rows — lightened so the box still stands out against the
   page background (--dark-bg: #0b0d12) instead of blending into
   it like #151a28 did */
body.dark-theme table.chart tr:nth-child(even) th,
body.dark-theme table.chart tr:nth-child(even) td {
    background-color: #1f2a4d !important;
    color: #f5f7fc !important;
}

body.dark-theme table.chart th {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Vaccine name text inside each "data" cell — bright and
   bold so it stays clearly prominent on both row shades */
body.dark-theme table.chart .data span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

body.dark-theme #cap {
    color: #8fa4e0 !important;
}

body.dark-theme .who-reference {
    background: rgba(104, 132, 211, 0.15) !important;
    color: #e8e8e8 !important;
}

/* Form fields (newsletter box, search inputs, etc.) */
body.dark-theme .form-control {
    background-color: var(--card-bg) !important;
    color: #e8e8e8 !important;
    border-color: var(--card-border) !important;
}
body.dark-theme .form-control::placeholder {
    color: #8a93ab !important;
}

body.dark-theme .text-muted {
    color: #a9b3cc !important;
}

/* ── FOOTER — visually separated from body with its own darker shade + top border ── */
body.dark-theme .footer {
    background: #070911 !important;
    border-top: 1px solid #22283a !important;
}

body.dark-theme .text-dark {
    color: #e8e8e8 !important;
}

body.dark-theme .text-secondary {
    color: #a9b3cc !important;
}

body.dark-theme .btn-primary {
    background-color: #6884d3 !important;
    border-color: #6884d3 !important;
}

body.dark-theme .border-primary {
    border-color: #5268a8 !important;
}

body.dark-theme .bg-light,
body.dark-theme .container-fluid.bg-light,
body.dark-theme .container-fluid.feature,
body.dark-theme .container-fluid.service,
body.dark-theme .container-fluid.product,
body.dark-theme .container-fluid.about,
body.dark-theme .container-fluid.blog {
    background-color: var(--dark-bg) !important;
    color: #e8e8e8;
}

body.dark-theme .bg-white {
    background-color: var(--dark-bg) !important;
    color: #e8e8e8;
}

body.dark-theme .about-item {
    color: #e8e8e8;
}

body.dark-theme .about-item p {
    color: #a9b3cc;
}

body.dark-theme .counter {
    background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .85)), url(../img/fact-bg.jpg) !important;
}

/* ── FULL-PAGE SECTION BACKGROUNDS — these wrapper sections had their own
   light background color set in nearby.css / FAQ.css / vpd pages, which was
   never covered before, leaving the page white even though the small boxes
   inside had turned dark ── */
body.dark-theme .stats-bar-section,
body.dark-theme .map-section,
body.dark-theme .centers-section,
body.dark-theme .view-map-btn-container,
body.dark-theme .faq-container,
body.dark-theme .faq-stats,
body.dark-theme .service-detail-section,
body.dark-theme .who-stats-banner,
body.dark-theme .how-section,
body.dark-theme .why-tig-section,
body.dark-theme section {
    background-color: var(--dark-bg) !important;
}

/* Location page — the "allow location" permission popup over the map
   was still solid white/light */
body.dark-theme .loc-overlay {
    background: rgba(11, 13, 18, 0.94) !important;
}
body.dark-theme .loc-prompt-card,
body.dark-theme .loc-prompt-card h4,
body.dark-theme .loc-prompt-card p {
    color: #e8e8e8 !important;
}
body.dark-theme .loc-icon {
    background: #1c2338 !important;
    color: #8fa4e0 !important;
}
body.dark-theme .skip-link {
    color: #a9b3cc !important;
}

/* Map top bar (title + "My Location" button strip) was still white */
body.dark-theme .map-topbar,
body.dark-theme .map-title,
body.dark-theme .map-status-badge {
    background-color: var(--card-bg) !important;
    color: #e8e8e8 !important;
    border-color: var(--card-border) !important;
}

/* Extra safety net for stray white gaps (e.g. FAQ page top/bottom) that
   come from wrapper elements not covered by the specific selectors above */
html body.dark-theme,
body.dark-theme .faq-container,
body.dark-theme .faq-items-container {
    background-color: var(--dark-bg) !important;
}

/* Map/Satellite toggle buttons on the nearby page map */
body.dark-theme .map-layer-toggle {
    background: var(--card-bg) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}
body.dark-theme .map-toggle-btn {
    color: #c3cbe0 !important;
}
body.dark-theme .map-toggle-btn:hover {
    background: rgba(104, 132, 211, 0.15) !important;
}
body.dark-theme .map-toggle-btn.active {
    background: #6884d3 !important;
    color: #ffffff !important;
}

/* ── CHATBOT WIDGET (chatbot.html, included on every page) ──
   Same layout/design as light theme — only colors change,
   matched to the site's dark palette (--card-bg, --card-border,
   accent #6884d3 / #8fa4e0). Kept here with the rest of the
   dark-theme rules (not in chatbot.css) since chatbot.html is
   included inside the same <body>, so body.dark-theme already
   covers it once style.css is loaded — no need for a second file. ── */

body.dark-theme #chatbot-box {
    background: #151a28 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #2a3348 !important;
}

body.dark-theme .chat-header {
    background: linear-gradient(135deg, #3d4f8f, #28375f) !important;
    color: #fff !important;
}

body.dark-theme .chat-body {
    background: #0f1420 !important;
}

body.dark-theme .bot-msg {
    background: #1e2740 !important;
    color: #e8e8e8 !important;
}

body.dark-theme .bot-msg strong {
    color: #ffffff !important;
}

body.dark-theme .chat-text {
    color: #e8e8e8 !important;
}

body.dark-theme .chat-num {
    color: #8fa4e0 !important;
}

body.dark-theme .user-msg {
    background: linear-gradient(135deg, #4f6bc4, #6884d3) !important;
    color: #fff !important;
}

body.dark-theme .chat-footer {
    background: #151a28 !important;
    border-top: 1px solid #2a3348 !important;
}

body.dark-theme #chat-input {
    background: #151a28 !important;
    color: #e8e8e8 !important;
}

body.dark-theme #chat-input::placeholder {
    color: #8a93ab !important;
}

body.dark-theme #chat-input:disabled {
    background: #10141f !important;
    color: #6b7280 !important;
}

body.dark-theme .chat-footer button {
    background: #6884d3 !important;
}

body.dark-theme .chat-body::-webkit-scrollbar-track {
    background: #10141f !important;
}

body.dark-theme .chat-body::-webkit-scrollbar-thumb {
    background: #3a4670 !important;
}

body.dark-theme #chatbot-btn {
    background: linear-gradient(135deg, #4f6bc4, #6884d3) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

body.dark-theme #chatbot-btn:hover {
    background: #1e2740 !important;
    border-color: #2a3348 !important;
}

body.dark-theme .fab-tooltip {
    background: #1e2740 !important;
    color: #e8e8e8 !important;
}

/* ── HOME PAGE "Our Services" FEATURE CARDS ──
   (Schedule Appointments / Track Your Records / Location
   nearby / Vaccine Information). These headings and "Read
   More" links use hardcoded !important navy colors in the
   light-theme rules above, which otherwise beat the generic
   "body.dark-theme a" rule and stay invisible-dark on the
   dark card background. Override them specifically here. ── */

body.dark-theme .feature-item a.h4 {
    color: #8fa4e0 !important;
}

body.dark-theme .feature-item a.h4:hover {
    color: #6884d3 !important;
}

body.dark-theme .feature-item .btn.text-secondary {
    color: #8fa4e0 !important;
}

body.dark-theme .feature-item .btn.text-secondary:hover {
    color: #6884d3 !important;
}
/*END DARK THEME STYLES */


/*** copyright Start ***/
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bs-dark);
}
/*** copyright end ***/


/*** Button Focus States Fix ***/
.feature-item .btn:focus {
    outline: none;
    box-shadow: none;
}

.feature-item .btn:hover {
    color: var(--bs-primary) !important;
}

/* Remove the default Bootstrap focus styles from feature buttons */
.feature-item a.btn:focus,
.feature-item a.btn:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Specific fix for the "Read More" buttons to make specific design*/
.feature-item .btn.text-secondary {
    background: transparent !important;
    border: none !important;
    padding: 10px !important;
    color: #28375f !important;
}

.feature-item .btn.text-secondary:focus {
    outline: none !important;
    box-shadow: none !important;
}

.feature-item .btn.text-secondary:hover {
    color: var(--bs-primary) !important;
    transform: translateX(5px);
    transition: all 0.3s ease;
}

/*** Specific Feature (schedule appointment etc) Heading Styles ***/
.feature-item a.h4 {
    text-decoration: none;
    color: #28375f !important; /* Your current hero-heading color */
    transition: all 0.3s ease;
}

.feature-item a.h4:focus {
    outline: none;
    box-shadow: none;
}

.feature-item a.h4:hover {
    color: var(--bs-primary) !important; /* Changes to #6884d3 on hover */
    transform: translateY(-2px); /* Optional: subtle lift effect */
}

/*About this platform color control*/
.custom-h4-color{
    color: #6884d3 !important;
}
.custom-h1-color{
    color: #243153 !important;
}
.custom-h6-color{
    color: #243153 !important;
}
.custom-hover:hover{
    color: #6884d3 !important;
}
.custom-hover{
    color: #28375f !important;
}
.custom-circle-color{
    background-color:  #6884d3 !important;
}
.custom-read{
    background-color: #303f67 !important ;
}
/*About ended*/
/*Footer personalized color code*/
.button-color{
    background-color: #28375f !important;
    color: #ffffff !important;
}
.button-app{
    background-color: #6884d3 !important;
    color: #ffffff !important;
}
/*Footer end*/
.text-syringe{
    color: #6884d3 !important;
}