/** ====== CSS FOR TOP NAVBAR MAINTANCE NOTICE ====== **/
/* #main_navbar {
    margin-top: 30px;
} */

#maintance-notice {
    top: -30px;
    left: 0;
    padding: 4px;
    background-color: purple;
    text-align: center;
    width: 100%;
    color: white;
    /* display: none; */
}

@media (max-width: 768px) {
    #main_navbar {
        margin-top: 0px;
    }

    .sticky-active {
        margin-top: 0px;
    }

    #maintance-notice {
        font-size: 12px;
        display: none;
    }
}

/** ====== CSS FOR NAVBAR LANGUAGE DROPDOWN ====== **/
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

@media (max-width: 768px) {
    .custom-select-wrapper {
        width: 30%;
    }
}

.custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-selected {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    padding: 4px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.select-selected img {
    margin-right: 10px;
}

.select-items {
    position: absolute;
    background-color: #f1f1f1;
    width: 100%;
    border: 1px solid #ccc;
    z-index: 99;
    display: none;
}

.select-items div {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.select-items div img {
    margin-right: 10px;
}

.select-items div:hover,
.same-as-selected {
    background-color: #ddd;
}

/** ====== CSS FOR HERO SECTION SECTION CARD  ====== **/

@media (max-width: 768px) {
    #slider {
        margin-top: 85px;
    }

    .carousel-caption {
        text-align: center !important;
        margin-top: -40px;
    }

    .carousel-caption h1:nth-child(1) {
        font-size: 20px;
    }
    .carousel-caption h1:nth-child(2) {
        font-size: 20px;
    }
    .carousel-caption h1:nth-child(3) {
        font-size: 16px;
    }

    .carousel-caption a {
        margin-top: -30px;
    }

    #main-feature {
        margin-top: 0px !important;
        position: relative;
    }

    #main-feature .service_card:nth-child(1) {
        height: auto;
    }

    #main-feature .main-feature-first-card {
        margin-top: 130px;
    }

    #why-patient-choose .title1,
    .title2 {
        text-align: center;
    }

    #why-patient-choose .desc-text {
        text-align: center;
        margin-top: -50px;
    }

    #why-patient-choose .service-cards .service-item {
        text-align: center;
        width: 175px;
    }

    #why-patient-choose .service-cards .service-item span i {
        margin-top: 25px;
    }

    #why-patient-choose .service-cards .service-item:nth-child(2) {
        margin-top: 0;
    }

    #why-patient-choose .service-cards .service-item:nth-child(3) {
        margin-top: 0;
    }

    #why-patient-choose .service-cards .service-item:nth-child(5) {
        margin-top: 0;
    }

    #service .service_card {
        width: 160px;
        height: 160px;
        position: relative;
        text-align: center;
        background-color: #ccc;
        /* background: white; */
        -webkit-backface-visibility: hidden;
        z-index: 1;
        border-radius: var(--bs-border-radius-xxl) !important;
        border: none;
        background: white;
        box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.25);
    }

    #service .service_card span {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #service .service_card span .card-title {
        font-size: 12px;
    }

    #service .service_background {
        height: 900px;
        background-size: cover;
        background-image: none;
    }

    #technology {
        margin-top: 30px;
        padding: 60px 0px;
    }

    #technology .technology-desc {
        text-align: justify !important;
    }

    .hot-line {
        position: absolute;
        left: 90px;
        bottom: 25px;
    }

    .send-message-box {
        height: 150px;
    }

    .send-message-btn {
        width: 100%;
        margin-bottom: 30px;
        margin-top: 15px;
    }

    #get-in-touch > .service-card:nth-child(2) {
        min-height: 200px;
    }

    .location-desc {
        font-size: 12px;
    }
}

/** ====== CSS FOR CENTRE OF EXCELLENCE SECTION CARD  ====== **/
.service_card:hover .icon-box {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

.icon-box {
    width: 60px;
    height: 60px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    transition: all 0.3s;
}

.icon-box img {
    padding: 5px;
}

.slick-prev:before,
.slick-next:before {
    color: black;
    padding: 0px;
}

.slick-arrow {
    z-index: 1;
    width: 40px;
    height: 40px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

.slick-arrow:hover {
    color: #fff !important;
    background: linear-gradient(
        90deg,
        #8055a0 0%,
        #7a68aa 44.05%,
        #5bc1da 98.86%
    );
    /* mix-blend-mode: multiply; */
}

.slick-arrow:before {
    font-size: 22px;
}

.slick-arrow:hover::before {
    color: #fff !important;
}

.slick-next {
    right: -10px;
}

.slick-next:hover {
    color: #fff !important;
    background: linear-gradient(
        -90deg,
        #8055a0 0%,
        #7a68aa 44.05%,
        #5bc1da 98.86%
    );
}

.slick-prev {
    left: -10px;
}

#main-feature .service_card {
    position: relative;
    height: 400px;
    background-color: #ccc;
    /* background: white; */
    -webkit-backface-visibility: hidden;
    z-index: 1;
    border-radius: var(--bs-border-radius-xxl) !important;
    border: none;
    background: linear-gradient(
        180deg,
        rgb(73, 194, 238) 0%,
        rgb(108, 92, 168) 100%
    );
}

/** ====== CSS FOR ABOUT US PAGE SECTION CARD  ====== **/

.about-left-content {
    margin-left: 100px;
}

@media (max-width: 768px) {
    .about-left-content {
        margin-left: 10px;
    }

    .about-left-content img {
        margin-bottom: 20px;
    }
}