:root {
    --primary-color: #d2e7f8;
    --secondary-color: #0073ff;
    --fourth-color: #f9faff;
    --pri-fontColor: #4A6379;
    --secondary-fontColor: #1E3056;
    --pri-fontFamily: "Poppins", serif;
    --sec-fontFamily: "Vollkorn", serif;
    --text-white: white;
    --text-dark: black;
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}




.socialmedia-sidebar {
    position: fixed;
    top: 45%;
    left: 0%;
    transform: translateY(-50%);
    z-index: 777;
    /* background-color: rgb(183, 151, 151); */
}

.socialmedia-sidebar .socialmedia-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    padding: 1rem;
    border-radius: 50px;
    box-shadow: 0 0 8px rgba(94, 94, 94, 0.377);
}

.socialmedia-sidebar .socialmedia-icons a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    margin: 1.1rem 0;
    font-size: 1.2rem;
    position: relative;
}

.socialmedia-sidebar .socialmedia-icons .Message::after {
    content: attr(data-text);
    position: absolute;
    top: -60%;
    left: -200px;
    z-index: -1;
    background-color: rgb(245, 245, 245);
    width: 7.7rem;
    border-radius: 0 50px 50px 0;
    text-align: center;
    color: var(--secondary-color);
    padding: 0.7rem 0;
    margin-left: 1.3rem;
    font-size: 15px;
    font-weight: 700;
    transition: left 0.4s ease;
    box-shadow: 0 0 7px rgba(94, 94, 94, 0.419);
}

.socialmedia-sidebar .socialmedia-icons .Message:hover::after {
    left: 0;
}

.socialmedia-sidebar .socialmedia-icons .Phone::after {
    content: attr(data-text);
    position: absolute;
    top: -60%;
    left: -200px;
    z-index: -1;
    background-color: rgb(245, 245, 245);
    width: 7.7rem;
    border-radius: 0 50px 50px 0;
    text-align: center;
    color: var(--secondary-color);
    padding: 0.7rem 0;
    margin-left: 1.3rem;
    font-size: 15px;
    font-weight: 700;
    transition: left 0.4s ease;
    box-shadow: 0 0 7px rgba(94, 94, 94, 0.419);
}

.socialmedia-sidebar .socialmedia-icons .Phone:hover::after {
    left: 0;
}

.socialmedia-sidebar .socialmedia-icons .Location::after {
    content: attr(data-text);
    position: absolute;
    top: -60%;
    left: -200px;
    z-index: -1;
    background-color: rgb(245, 245, 245);
    width: 7.7rem;
    border-radius: 0 50px 50px 0;
    text-align: center;
    color: var(--secondary-color);
    padding: 0.7rem 0;
    margin-left: 1.3rem;
    font-size: 15px;
    font-weight: 700;
    transition: left 0.4s ease;
    box-shadow: 0 0 7px rgba(94, 94, 94, 0.419);
}

.socialmedia-sidebar .socialmedia-icons .Location:hover::after {
    left: 0;
}

.whatsapp-icon {
    position: fixed;
    top: 93%;
    left: 1.1%;
    transform: translateY(-50%);
    z-index: 777;
}

.whatsapp-icon .whatsapp {
    text-decoration: none;
    cursor: pointer;
}

.whatsapp-icon .whatsapp img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}





::-webkit-scrollbar {
    width: 7px;
    /* Width of the scrollbar */
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    /* Color of the scrollbar handle */
    border-radius: 5px;
    /* Rounded corners for the scrollbar handle */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
    /* Color on hover */
}

::-webkit-scrollbar-track {
    background: var(--secondary-fontColor);
    /* Color of the scrollbar track */
    border-radius: 5px;
    /* Rounded corners for the scrollbar track */
}

.navbar-info-body {
    border-bottom: 1px solid #ccc;
}

.navbar-info-section {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
    height: 2.5rem;
    /* border: 1px solid red; */
}

.navbar-info-section .enquiry-and-info {
    display: flex;
    justify-content: center;
    gap: 6%;
    text-wrap: nowrap;
    padding-top: 9px;
}

.navbar-info-section .enquiry-and-info .icon-withDetail {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 3%;
    width: 100%;
}

.navbar-info-section .enquiry-and-info .icon-withDetail i {
    font-size: 13px;
    color: var(--secondary-color);
}

.navbar-info-section .enquiry-and-info .icon-withDetail h6 {
    font-family: var(--pri-fontFamily);
    font-size: 13px;
    color: var(--pri-fontColor);
    font-weight: 400;
}

.navbar-info-section .socialmedia-icons {
    display: flex;
    justify-content: end;
    gap: 3%;
    width: auto;
    /* border: 2px solid green; */
}

.navbar-info-section .socialmedia-icons .social-icons {
    display: flex;
    align-items: center;
    gap: 0%;
}

.navbar-info-section .socialmedia-icons .social-icons i {
    font-size: 14.5px;
}

.navbar-info-section .socialmedia-icons .social-icons a {
    text-decoration: none;
    color: #929292;
    margin-right: 1.5rem;
}
.navbar-info-section .socialmedia-icons .social-icons a:last-child {
    margin-right: 0rem;
}

.navbar-info-section .socialmedia-icons .social-icons a:hover {
    color: var(--secondary-color);
}

/* position absolute */
.navbar-body-abs {
    padding-bottom: 0rem;
    padding-top: 0rem;
    width: 100%;
    height: 4.1rem;
    position: absolute;
    z-index: 990;
    background-color: white;
}

.nav-sticky {
    background-color: white;
    box-shadow: 0 4px 8px rgba(78, 78, 78, 0.3);
}

.navbar-section-abs {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    height: 4.1rem;
}

.navbar-linkss-abs ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
    position: relative;
    margin: 0;
}

.navbar-linkss-abs ul li .navbar-item-anchor {
    text-decoration: none;
    color: #292929;
    font-family: var(--pri-fontFamily);
    font-size: 15.5px;
    transition: all 0.2s ease;
    cursor: pointer;
    padding: 1.1rem 0.9rem;
    border-bottom: 4px solid transparent;
    overflow: hidden;
}

.navbar-linkss-abs ul li .navbar-item-anchor:hover {
    color: var(--secondary-color);
    font-size: 15.5px;
    box-shadow: 0px 2px 7px rgba(91, 91, 91, 0.28);
    border-radius: 4px;
    border-bottom: 4px solid var(--secondary-color) !important;
}

.navbar-linkss-abs ul a:hover {
    color: var(--secondary-color);
}

.current-link {
    border-bottom: 4px solid var(--secondary-color) !important;
    text-decoration: none;
    color: var(--secondary-color) !important;
    margin-top: 0;
    margin: 0 2.6px;
    padding: 1.1rem 0.9rem;
    border-radius: 4px;
}

.nav-appointment-btnn {
    padding: 0.65rem 1.1rem;
    padding-top: 0.55rem;
    border: 1px solid var(--secondary-color);
    border-radius: 50px;
    color: white;
    text-decoration: none;
    background-color: var(--secondary-color);
    transition: all 0.2s ease;
    font-size: 16px;
    font-weight: 500;
}
.nav-appointment-btnn:hover {
    padding: 0.65rem 1.1rem;
    padding-top: 0.55rem;
    border: 1px solid var(--secondary-color);
    border-radius: 50px;
    color: var(--secondary-color);
    background-color: transparent;
    transition: all 0.2s ease;
    font-size: 16px;
    font-weight: 500;
}


.menu-btn-small-screen {
    display: none;
}

.small-screen-display-only{
    display: none;
}



/* dropdown functionality css */
/* Default state: Hide dropdown */
.dropdown-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: -50%;
    width: 220px;
    max-width: 225px;
    background-color: white;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    box-shadow: 0px 2px 5px rgba(54, 54, 54, 0.337);
    border: none;
    border-radius: 5px;
    padding: 0.6rem 0rem;
    margin-top: 1.25rem;
}

.dropdown-menu a {
    display: flex;
    text-decoration: none;
    font-size: 14.4px;
    font-family: var(--pri-fontFamily);
    text-align: left;
    margin-left: 0 !important;
    padding: 0.6rem 1rem !important;
    /* border: 2px solid white; */
    justify-content: space-between;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    color: #292929;
    transition: color 0.3s ease;
}
.dropdown-menu a:hover {
    color: var(--secondary-color) !important;
}


.dropdown-icon i {
    font-size: 12px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-icon i {
    transform: rotate(90deg);
}

.dropdown-toggle::after {
    display: none !important;
    /* Hides Bootstrap's default dropdown icon */
}

/* Show dropdown on hover for large screens */
@media screen and (min-width: 982px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* dropdown functionality css ends here */



/* sub dropdown twice */
.sub-dropdown-twice {
    list-style: none;
    position: absolute;
    top: auto;
    left: 100.15%;
    background-color: white;
    width: 190px;
    max-width: 195px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0px 2px 5px rgba(54, 54, 54, 0.337);
    border-radius: 5px;
    padding: 0.6rem 0rem;
    margin-top: -47px;
}

.sub-twice-class .dropdown-icon-twice {
    justify-content: right;
    /* border: 1px solid red; */
}

.dropdown-icon-twice i {
    font-size: 12px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.dropdown .sub-twice-class:hover .dropdown-icon-twice i {
    transform: rotate(90deg);
}

/* Show dropdown on hover for large screens */
@media screen and (min-width: 982px) {
    .dropdown .sub-twice-class:hover .sub-dropdown-twice {
        opacity: 1;
        visibility: visible;
    }
}

/* sub dropdown twice ends */




/* sub dropdown thrice added */
.sub-dropdown-thrice {
    list-style: none;
    position: absolute;
    top: auto;
    left: 100.2%;
    width: 180px;
    max-width: 185px;
    background-color: white;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0px 2px 5px rgba(54, 54, 54, 0.337);
    border-radius: 5px;
    padding: 0.6rem 0rem;
    margin-top: -47px;
}


.sub-thrice-class .dropdown-icon-thrice {
    justify-content: right;
    /* border: 1px solid red; */
}

.dropdown-icon-thrice i {
    font-size: 12px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.dropdown .sub-thrice-class:hover .dropdown-icon-thrice i {
    transform: rotate(90deg);
}

/* Show dropdown on hover for large screens */
@media screen and (min-width: 982px) {
    .dropdown .sub-thrice-class:hover .sub-dropdown-thrice {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

/* sub dropdown thrice added ends */







/* Carousel Section */


.carousel-control-prev {
    border: 0.2px solid rgb(194, 194, 194);
    width: 38px;
    height: 68px;
    position: absolute;
    top: 45%;
    left: 0;
    padding-right: 0.4rem;
    border-radius: 0 50px 50px 0;
    background-color: #025576bf;
}

.carousel-control-prev span {
    border-radius: 50%;
}

.carousel-control-next {
    border: 0.2px solid rgb(194, 194, 194);
    width: 38px;
    height: 68px;
    position: absolute;
    right: 0%;
    top: 45%;
    padding-left: 0.4rem;
    border-radius: 50px 0 0 50px;
    background-color: #025576bf;
}

.carousel-control-next span {
    border-radius: 50%;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #00596f2c;
    z-index: 2;
}

.carousel-main-index {
    width: 100%;
    position: relative;
    margin-top: 4.1rem;
}

.carousel-img-container {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: -1;
}

.carousel-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    position: relative;
    z-index: -1;
}

.carousel-caption {
    color: white;
    position: absolute;
    top: 45%;
    z-index: 6;
    border-radius: 100px;
    padding: 1.5rem 2rem;
    padding-bottom: 0;
    margin-bottom: 0;
}

.carousel-caption h5 {
    font-size: 3.3rem;
    font-family: var(--pri-fontFamily);
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.89);
}

.carousel-caption p {
    font-size: 21px;
    font-weight: 400;
    text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.89);
    letter-spacing: 1px;
}

.carousel-btnn {
    background: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
    color: white;
    border: none;
    border-radius: 27px;
    padding: 0.8rem 2.4rem;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
}





.custom-btnn {
    padding: 11px 22px;
    border: none;
    background: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
    border-radius: 20px;
    color: white;
    padding-top: 8px;
    font-weight: 600;
    transition: all 0.5s ease;
    text-decoration: none;
}

.custom-btnn:hover {
    background: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
    transition: all 1s ease;
}



.about-company-section-cont {
    width: 100%;
    padding: 5rem 0;
}

.about-company-section-cont .about-index-divider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4%;
}

.about-company-section-cont .about-index-divider .left-image {
    width: 55%;
}

.about-company-section-cont .about-index-divider .left-image .img-abt-container {
    width: 100%;
    height: 500px;
}

.about-company-section-cont .about-index-divider .left-image .img-abt-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.about-company-section-cont .about-index-divider .right-desc {
    width: 45%;
}

.about-company-section-cont .about-index-divider .right-desc h3 {
    font-size: 2.3rem;
    color: var(--pri-fontColor);
    font-family: var(--pri-fontFamily);
}

.about-company-section-cont .about-index-divider .right-desc h3 span {
    color: var(--secondary-color);
}

.about-company-section-cont .about-index-divider .right-desc p {
    width: 85%;
    text-align: justify;
    margin-top: 1.4rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: #6f6f6f;
    font-size: 15px;
    font-family: var(--pri-fontFamily);
}


/* Department in Index Page Starts Here -------------------------- */

.department-section {
    width: 100%;
    height: 100%;
    background-color: var(--fourth-color);
    padding: 4.5rem 0;
}

.department-body {
    width: 100%;
}

.department-body .heading-department {
    text-align: center;
}

.department-body .heading-department h4 {
    font-size: 28px;
    font-weight: 400;
    font-family: var(--pri-fontFamily);
    color: var(--pri-fontColor);
    margin-bottom: 0.6rem;
}

.department-body .heading-department h5 {
    font-size: 18px;
    font-weight: 400;
    color: var(--secondary-color);
}

.department-body .heading-department p {
    font-size: 14px;
    font-weight: 400;
    color: var(--pri-fontColor);
    width: 50%;
    margin: auto;
    margin-bottom: 2rem;
}

.department-body .department-detial-box {
    text-align: center;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.06);
    padding: 1rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 8;
    margin: 1rem 0;
    border-radius: 8px;
}

.department-body .department-detial-box::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: -2;
    scale: 84%;
    color: white;
    /* background-color: #1E3056; */
    transition: all 0.5s ease;
}

.department-body .department-detial-box:hover::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: -5;
    scale: 100%;
    background: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
    color: white;
    border-radius: 8px;
}

.department-body .department-detial-box:hover {
    color: white;
}

.current-selected-department {
    background: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
    color: white;
}

.department-body .department-detial-box .img-container {
    width: 100%;
    height: 210px;
}

.department-body .department-detial-box .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.department-body .department-detial-box h6 {
    margin-top: 1.2rem;
    margin-bottom: 1rem;
}

.bd-selected-radius-left {
    border-top-left-radius: 25px;
}

.bd-selected-radius-right {
    border-top-right-radius: 25px;
}

/* Department in Index Page Ends Here --------------------------- */



/* Services Section in Index Page Starts Here --------------------------- */

.Services-section {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 4.5rem 0;
}

.Services-body {
    width: 100%;
}

.Services-body .heading-department {
    text-align: center;
}

.Services-body .heading-department h4 {
    font-size: 28px;
    font-weight: 400;
    font-family: var(--pri-fontFamily);
    color: var(--pri-fontColor);
    margin-bottom: 1.5rem;
}

.Services-body .heading-department h5 {
    font-size: 18px;
    font-weight: 400;
    color: var(--secondary-color);
}

.Services-body .heading-department p {
    font-size: 14px;
    font-weight: 400;
    color: var(--pri-fontColor);
    width: 50%;
    margin: auto;
    margin-bottom: 3.2rem;
}

.services-box {
    height: 100%;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    top: 1.5%;
    background-color: white;
    border-radius: 5px;
    border-top-right-radius: 30px;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    z-index: 8;
    margin-bottom: 1.7rem;
    transition: all 0.2s ease;
}

.services-box::after {
    content: "";
    width: 100%;
    height: 360px;
    position: absolute;
    bottom: -200px;
    left: 0;
    transition: all 0.2s ease;
    opacity: 0;
    border-radius: 0px;
    z-index: -2;
}

.services-box:hover::after {
    position: absolute;
    bottom: 0px;
    z-index: -5 !important;
    scale: 100%;
    opacity: 1;
    border-radius: 0px;
    background: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
}

.services-box:hover {
    top: -0.5%;
    border-radius: 0px;
}

.services-box i {
    font-size: 2.4rem;
    color: var(--secondary-color);
    transition: color 0.2s ease;
    margin-top: 1.1rem;
}

.services-box:hover i {
    color: white;
}

.services-box h5 {
    margin: 1rem auto;
    transition: color 0.2s ease;
    color: var(--secondary-fontColor);
    font-family: var(--pri-fontFamily);
    font-size: 19px;
}

.services-box:hover h5 {
    color: white;
}

.services-box p {
    font-size: 13px;
    color: #898989;
    margin-bottom: 3.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
    font-family: var(--pri-fontFamily);
}

.services-box:hover p {
    color: white
}


.services-box .circle-btn {
    border: none;
    background-color: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding-bottom: 1rem;
    padding-right: 0.1rem;
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
}

.services-box:hover .circle-btn {
    background-color: var(--text-white);
}

.circle-btn i {
    color: white;
    font-size: 15px;
}

.services-box:hover .circle-btn i {
    color: var(--secondary-color);
}

/* Services Section in Index Page Ends Here --------------------------- */



/* Successful Numbers in Index Page Starts Here --------------------------- */

.successful-numbers {
    position: relative;
    width: 100%;
    height: 320px;
    background-image: linear-gradient(to right, var(--secondary-fontColor) 10%, var(--secondary-color) 90%);
    background-size: cover;
    background-position: top right;
    background-blend-mode: hard-light;
    background-repeat: no-repeat;
    z-index: 2;
}

.bg-overlay-numbers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -5;
    background: linear-gradient(to right, var(--secondary-color), var(--secondary-fontColor));
    opacity: 0.8;
}

.successful-numbers .numbers-desc {
    width: 100%;
    height: 300px;
    text-align: center;
    padding-top: 27%;
}

.successful-numbers .numbers-desc i {
    font-size: 2.2rem;
    color: white;
    z-index: 100;
    padding-bottom: 1.2rem;
}

.successful-numbers .numbers-desc h2 {
    font-size: 3rem;
    color: white;
}

.successful-numbers .numbers-desc h5 {
    font-size: 20px;
    font-weight: 400;
    color: white;
}

/* Successful Numbers in Index Page Ends Here --------------------------- */



/* Galllery Section starts here */
.Gallery-section {
    width: 100%;
    height: 100%;
    padding: 4.5rem 0rem;
    padding-bottom: 1rem;
}

.hidden{
    display: none !important;
}

.Gallery-body {
    width: 100%;
    margin: auto;
}

.Gallery-body .heading-department {
    width: 50%;
    margin: auto;
    margin-bottom: 2rem;
    text-align: center;
}

.Gallery-body .heading-department h4 {
    font-size: 28px;
    font-weight: 400;
    font-family: var(--pri-fontFamily);
    color: var(--pri-fontColor);
}

.Gallery-body .heading-department h5 {
    font-size: 18px;
    font-weight: 400;
    color: var(--secondary-color);
}

.Gallery-body .heading-department p {
    font-size: 14px;
    font-weight: 400;
    color: var(--pri-fontColor);
    width: 90%;
    margin: auto;
    margin-bottom: 1.5rem;
}


.Gallery-body .gallery-boxes {
    width: 100%;
    border: none;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.Gallery-body .gallery-boxes a {
    text-decoration: none;
}

.Gallery-body .gallery-boxes .img-container {
    width: 100%;
    height: 230px;
}

.Gallery-body .gallery-boxes .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    scale: 100%;
    transition: scale 0.3s ease;
}

.Gallery-body .gallery-boxes:hover .img-container img {
    scale: 108%;
}

.gallery-select-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2%;
    margin-bottom: 2.4rem;
}

.gallery-select-buttons .gallery-btn {
    padding: 0.7rem 1.6rem;
    font-size: 16px;
    font-weight: 500;
    background-color: white;
    color: black;
    border: none;
    border-radius: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.17);
}

.gallery-select-buttons .gallery-btn:hover {
    background-color: var(--secondary-color);
    color: white !important;
}

.current-btn-selected {
    padding: 0.7rem 1.6rem;
    font-size: 16px;
    font-weight: 500;
    background-color: var(--secondary-color) !important;
    color: white !important;
    border: none;
    border-radius: 25px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
}



.pagination-controls {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    gap: 0.5rem;
}

.pagination-controls .pagination-btn {
    padding: 0.5rem 1rem;
    border: none;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.pagination-controls .pagination-btn.active {
    background-color: var(--secondary-color);
    color: white;
    font-weight: bold;
}

.pagination-controls .pagination-btn:hover {
    background-color: #ddd;
}


/* Gallery Page CSS Ends Here ------------------------------------ */



/* Testimonials in Index Page Starts Here --------------------------- */

.testimonial-section {
    width: 100%;
    height: 100%;
    background-color: var(--fourth-color);
    padding: 4.5rem 0;
}

.testimonial-body {
    width: 100%;
}

.testimonial-body .heading-department {
    text-align: center;
}

.testimonial-body .heading-department h4 {
    font-size: 28px;
    font-weight: 400;
    font-family: var(--pri-fontFamily);
    color: var(--pri-fontColor);
    margin-bottom: 1.5rem;
}

.testimonial-body .heading-department h5 {
    font-size: 18px;
    font-weight: 400;
    color: #1677BD;
}

.testimonial-body .heading-department p {
    font-size: 14px;
    font-weight: 400;
    color: var(--pri-fontColor);
    width: 50%;
    margin: auto;
    margin-bottom: 3.2rem;
}

.testimonial-body .testi-box {
    width: 90%;
    margin: auto;
    padding: 2rem;
}

.testimonial-body .testi-box .img-container {
    width: 80px;
    height: 80px;
}

.testimonial-body .testi-box .img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.testimonial-body .testi-box .icon-and-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
    margin-bottom: 1.7rem;
}

.testimonial-body .testi-box .icon-and-heading i {
    font-size: 2.5rem;
    color: #6f6f6f;
}

.testimonial-body .testi-box .icon-and-heading .heading h6 {
    color: #1677BD;
}

.testimonial-body .testi-box p {
    font-size: 14px;
    color: #6f6f6f;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.swiper {
    width: 100%;
    height: 100%;
    padding-left: 4rem;
    padding-right: 4rem;
    padding-bottom: 2.5rem;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Testimonials in Index Page Ends Here --------------------------- */



/* Blogs in Index Page Starts Here --------------------------- */
.Blogs-section {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 4.5rem 0;
    padding-top: 3.5rem;
}
.Blogs-section .mySwiperBlogs{
    overflow: hidden;
    padding: 1.5rem;
}

.Blogs-section .swiper-slide {
    text-align: start;
}

.Blogs-body {
    width: 100%;
}

.Blogs-body .heading-department {
    text-align: center;
}

.Blogs-body .heading-department h4 {
    font-size: 28px;
    font-weight: 400;
    font-family: var(--pri-fontFamily);
    color: var(--pri-fontColor);
    margin-bottom: 1.5rem;
}

.blog-box {
    box-shadow: 2px 5px 20px rgba(7, 7, 7, 0.09);
    border-radius: 20px;
    height: 28.5rem;
}

.blog-box .img-container {
    width: 100%;
    height: 250px;
}

.blog-box .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.blog-box h5 {
    padding: 1rem 1.3rem;
    margin-top: 0rem;
    padding-bottom: 0rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-box p {
    padding: 1.3rem;
    padding-top: 0.1rem;
    padding-bottom: 0rem;
    font-size: 14px;
    color: #898989;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-box .custom-btnn {
    margin-left: 1.3rem;
    margin-bottom: 1.1rem;
    position: absolute;
    font-size: 15.5px;
    padding: 0.6rem 1.3rem;
    top: 86.5%;
}

/* Blogs in Index Page Ends Here --------------------------- */




/* Clients section Part CSS Starts Here*/

.Clients-section {
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding-top: 5rem;
    padding-bottom: 0rem;
}

.Clients-body {
    width: 100%;
}


.Clients-body .heading-department {
    text-align: center;
}

.Clients-body .heading-department .hr-and-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4%;
    margin-bottom: 2.4rem;
}

.Clients-body .heading-department .hr-and-head .initial-hr {
    border: 2px solid black;
    width: 15%;
}

.Clients-body .heading-department .hr-and-head .end-hr {
    border: 2px solid black;
    width: 15%;
}

.Clients-body .heading-department .hr-and-head h4 {
    font-size: 3rem;
    font-weight: 600;
    font-family: var(--pri-fontFamily);
    color: var(--pri-fontColor);
}

.Clients-body .Client-box {
    width: 100%;
    margin: auto;
    padding: 2rem;
    transition: all 0.4s ease;
}

.Clients-body .Client-box:hover {
    box-shadow: 2px 4px 9px rgba(0, 0, 0, 0.215);
}

.Clients-body .Client-box .img-container {
    width: 130px;
}

.Clients-body .Client-box .img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Clients section Part CSS Ends Here  */



/* Footer Section */

.footer-section {
    width: 100%;
    height: 100%;
    padding-top: 0.8rem;
    background-color: #01162e;
}

.footer-banner {
    width: 100%;
    margin: auto;
    background-color: var(--fourth-color);
    border: none;
    overflow: hidden;
    color: white;
}

.footer-banner .banner-boxes {
    padding: 3rem;
    text-align: center;
}

.footer-banner .banner-boxes i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--secondary-fontColor);
}

.footer-banner .banner-boxes .fa-phone {
    font-size: 2.3rem;
    margin-bottom: 1rem;
}

.telephone {
    text-decoration: none;
    line-height: 2.1;
    font-weight: 600;
}

.footer-banner .banner-boxes .fa-whatsapp {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.footer-banner .banner-boxes .fa-envelope {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.footer-banner .banner-boxes h4 {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    font-family: var(--pri-fontFamily);
    margin-bottom: 1rem;
    color: var(--pri-fontColor);
}

.footer-banner .banner-boxes h6 {
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: rgb(236, 236, 236);
    font-family: var(--pri-fontFamily);
    color: var(--pri-fontColor);
}

.footer-banner .banner-boxes .email-banner {
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    color: rgb(236, 236, 236);
    font-family: var(--pri-fontFamily);
    color: var(--pri-fontColor);
}

.footer-banner .banner-boxes p {
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: var(--pri-fontColor);
    font-family: var(--pri-fontFamily);
}

.footer-banner .banner-boxes a {
    text-decoration: none;
    color: var(--pri-fontColor);
}

.footer-banner .banner-boxes a h4 {
    color: var(--pri-fontColor);
}

.footer-section h5 {
    color: var(--text-white);
}

.foot-log {
    margin-top: 2.5rem;
}

.footer-section .footer-logo {
    background-color: white;
    padding-right: 6px;
    width: 140px;
}

.logo-hr {
    width: 30%;
    margin: 1.2rem 0;
    border: 2px solid white;
}

.footer-social-links {
    text-align: center;
    display: flex;
    gap: 3.5%;
    flex-wrap: wrap;
}

.footer-social-links a {
    text-decoration: none;
    color: var(--text-white);
    font-size: 1.2rem;
    margin: 0.4rem 0;
}

.footer-social-links a i {
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-social-links a .fa-facebook-f:hover {
    background-color: #1877F2;
    color: white;
}

.footer-social-links a .fa-instagram:hover {
    background: linear-gradient(45deg, #E4405F, #F77737, #833AB4, #405DE6);
    color: white;
}

.footer-social-links a .fa-linkedin-in:hover {
    background-color: #0077B5;
    color: white;
}

.footer-social-links a .fa-github:hover {
    color: white;
    background-color: black;
}

.footer-social-links a .fa-x-twitter:hover {
    color: white;
    background-color: black;
}


.footer-section ul li a {
    transition: all 0.4s ease;
}

.footer-section ul li a:hover {
    letter-spacing: 1.6px;
    color: var(--secondary-color) !important;
}


.QR-code img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    background-color: white;
    margin-top: 0.4rem;
}

.Visitors {
    color: #a8a8a8;
    font-size: 16.5px;
    margin-top: 0.5rem;
}

.Visitors span {
    color: var(--secondary-color);
    font-size: 22px;
    font-weight: 600;
}

.phone-email-footer h6 {
    font-size: 18px;
    color: var(--text-white);
}

.phone-email-footer h6 span a {
    font-size: 17px;
    color: var(--secondary-color);
    text-decoration: none;
}


/* footer tag seo links */
.footer-tag-links {
    width: 100%;
}

.footer-tag-links hr {
    border: 2px solid white;
    margin: 0.5rem 0;
}

.footer-tag-links .footer-multiple-seo-links-cont {
    width: 100%;
    display: inline-block;
    margin-bottom: 2rem;
    overflow: scroll !important;
}

.footer-tag-links .footer-multiple-seo-links-cont::-webkit-scrollbar {
    width: 0px;
    height: 4px;
}

.footer-tag-links .footer-multiple-seo-links-cont .seo-links {
    width: 1000000px;
    padding-bottom: 0.6rem;
}

.footer-tag-links .footer-multiple-seo-links-cont .seo-links a {
    border: 1px solid #ccc;
    text-decoration: none;
    padding: 2px 6px;
    line-height: 1.93;
    color: var(--text-white);
    font-size: 12px;
    font-weight: 500;
    opacity: 0.8;
}

/* footer tag seo links ends */


/* About Us Page */


.carousel-back-about {
    position: relative;
    height: 250px;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 4.1rem;
}

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
    opacity: 0.5;
    z-index: -2;
    /* Adjust the opacity of the overlay */
}

.carousel-index-about {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6rem;
}

.carousel-index-about h1 {
    color: white;
    font-size: 3rem;
    font-family: "Sora", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 2px 2px 5px rgba(0, 0, 0);
}

.carousel-index-about h5 {
    text-shadow: 1px 1px 3px rgba(0, 0, 0);
    font-size: 22px;
    font-weight: 600;
}

.breadcrumb-manually {
    display: flex;
    justify-content: center;
    color: white;
    font-family: "Sora", sans-serif;
    font-weight: 600;
}

.breadcrumb-manually a {
    text-decoration: none;
    color: white;
}

.breadcrumb-manually i {
    font-size: 1rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.breadcrumb-manually h4 {
    font-size: 24px;
}


.why-choose-us-body {
    width: 95%;
    margin: auto;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.why-choose-us-divider {
    width: 100%;
    display: flex;
    gap: 3%;
}

.why-choose-us-divider .left-images {
    width: 45%;
}

.why-choose-us-divider .left-images img {
    width: 100%;
    margin-bottom: 1.5rem;
    border-top-right-radius: 30px;
}



.why-choose-us-divider .right-desc {
    width: 52%;
    padding-top: 2rem;
}

.why-choose-us-divider .right-desc h3 {
    font-family: var(--pri-fontFamily);
    color: var(--secondary-fontColor);
}

.why-choose-us-divider .right-desc .dash-with-heading {
    display: flex;
    gap: 3%;
    align-items: end;
}

.why-choose-us-divider .right-desc .dash-with-heading hr {
    width: 5%;
    border: 2px solid black;
}

.why-choose-us-divider .right-desc .dash-with-heading h5 {
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 17px;
    font-family: var(--pri-fontFamily);
}

.why-choose-us-divider .right-desc ul {
    list-style: none;
    padding: 0;
}

.why-choose-us-divider .right-desc p {
    line-height: 1.7;
    color: var(--pri-fontColor);
    font-size: 15px;
}

.why-choose-us-divider .right-desc li {
    line-height: 1.7;
    color: var(--pri-fontColor);
    font-size: 15px;
    margin-bottom: 0.5rem;
}

.why-choose-us-divider .right-desc li i {
    color: var(--secondary-color);
    margin-right: 6px;
}


/* Who we are in about */

.who-we-are-section {
    width: 100%;
    background-color: var(--fourth-color);
    padding-top: 4.5rem;
    padding-bottom: 2rem;
    overflow: hidden;
}

.meetTeam-section {
    width: 96%;
    margin: auto;
}

.meetTeam-section .heading-department {
    text-align: center;
}

.meetTeam-section .heading-department h4 {
    font-size: 28px;
    font-weight: 400;
    font-family: var(--pri-fontFamily);
    color: var(--pri-fontColor);
}

.meetTeam-section .heading-department h5 {
    font-size: 18px;
    font-weight: 400;
    color: #1677BD;
}

.meetTeam-section .heading-department p {
    font-size: 14px;
    font-weight: 400;
    color: var(--pri-fontColor);
    width: 50%;
    margin: auto;
    margin-bottom: 3.2rem;
}

.meetTeam-Box-details {
    background-color: white;
    text-align: center;
    margin-bottom: 1.62rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
    border-radius: 5px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.147);
}

.meetTeam-Box-details .img-container {
    width: 100%;
    height: 45vw;
    max-height: 320px;
}

.meetTeam-Box-details .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.meetTeam-Box-details .info-box {
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
    z-index: 6;
    background-color: white;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: default;
    transition: all 0.3s ease;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-family: var(--pri-fontFamily);
}

/* Info Content */
.meetTeam-Box-details .info-box h3 {
    margin: 0;
    font-weight: 600;
    font-size: 21px;
    padding: 1.2rem 0.7rem;
    padding-bottom: 0.6rem;
}

.meetTeam-Box-details .info-box p {
    font-weight: 500;
    font-size: 14.5px;
    color: var(--secondary-color);
    text-transform: uppercase;
    padding: 0 0.8rem;
    padding-bottom: 0.6rem;
}

/* Social Media Icons */
.meetTeam-Box-details .info-box .social-icons {
    margin-top: 0.2rem;
    display: flex;
    justify-content: center;
    gap: 10%;
}

.meetTeam-Box-details .info-box .social-icons a {
    color: white;
    background-color: transparent;
    border: 0.5px solid white;
    padding: 0.25rem 0.5rem;
    font-size: 1.2rem;
    transition: color 0.3s ease;
    border-radius: 5px;
}


.meetTeam-Box-details:hover .info-box {
    bottom: 0;
    background-color: var(--secondary-color);
}

.meetTeam-Box-details:hover .info-box h3 {
    color: white;
}

.meetTeam-Box-details:hover .info-box p {
    color: var(--primary-color);
}





/* Appointment Page CSS starts here ----------------------------------------------------------------- */

.appointment-section {
    width: 100%;
    padding: 4rem 0;
    position: relative;
    z-index: 20;
}


/* registration Poppup */

.form-body {
    position: fixed;
    top: 3.5rem;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 21;
    width: 100%;
    height: 105vh;
    display: none;
    background-color: #000f20d7;
}

.registration-form-poppup {
    width: 50%;
    background-color: white;
    border: 1px solid black;
    position: fixed;
    top: 18%;
    left: 25%;
    z-index: 80;
    display: none;
    transform: scale(0%);
    transition: all 0.6s ease;
    padding: 1.9rem 0rem;
    background-position: center;
    border-radius: 8px;
}

.registration-form-poppup .heading-with-closeBTN {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.registration-form-poppup .heading-with-closeBTN h3 {
    font-size: 1.4rem;
    font-weight: 600;
    font-family: var(--pri-fontFamily);
    color: var(--secondary-fontColor);
    text-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.844);
    margin-bottom: 1em;
}

.registration-form-poppup .heading-with-closeBTN i {
    position: absolute;
    top: -40px;
    right: -10px;
    font-size: 1.5rem;
    font-family: var(--pri-fontFamily);
    color: var(--pri-fontColor);
    padding: 0 0.4rem;
    padding-top: 3px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.782);
}

.registration-form-heading h6 {
    color: #6e7e87;
    font-size: 17px;
    font-weight: 500;
    line-height: 0.8;
    padding: 0 1rem;
}

.registration-form-heading hr {
    width: 94.5%;
    margin: auto;
    margin-top: 0;
    margin-bottom: 0.8rem;
}

.registration-form-poppup form {
    max-height: 60vh;
    overflow: auto;
    padding: 0 1.5rem;
    padding-bottom: 1.2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-fontColor) #f1f1f1;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.registration-form-poppup form input {
    padding: 0.7rem 0.6rem;
/*    margin-bottom: 1rem;*/
    border: 1px solid var(--secondary-color);
}

.registration-form-poppup form .form-check input {
    padding: 0rem 0rem;
    margin-bottom: 1rem;
    border: 1px solid var(--secondary-color);
}

.registration-form-poppup form select {
    padding: 0.7rem 0.6rem;
    margin-bottom: 1rem;
    width: 100%;
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
}

.registration-form-poppup form textarea {
    padding: 0.7rem;
    margin-bottom: 1rem;
    width: 100%;
    resize: none;
    border: 1px solid var(--secondary-color);
    border-radius: 7px;
}

.registration-form-poppup form textarea {
    padding: 0.7rem;
    margin-bottom: 1rem;
    width: 100%;
    resize: none;
    border: 1px solid var(--secondary-color);
}






.appointment-divider {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0rem;
    gap: 5%;
}

.appointment-divider .left-desc-appointment {
    width: 50%;
}

.appointment-divider .left-desc-appointment .img-container {
    width: 100%;
    height: 500px;
}

.appointment-divider .left-desc-appointment .img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
}




.appointment-divider .right-form-appointment {
    position: relative;
    width: 50%;
    margin-top: 0;
}

.appointment-divider .right-form-appointment h3 {
    font-family: var(--pri-fontFamily);
    color: var(--secondary-fontColor);
}

.appointment-divider .right-form-appointment .dash-with-heading {
    display: flex;
    gap: 3%;
    align-items: end;
}

.right-form-appointment .head-with-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.right-form-appointment .head-with-btn a {
    text-decoration: none;
    color: white;
    background-color: var(--secondary-color);
    font-weight: 400;
    font-size: 15px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    padding: 7px 13px;
    font-family: "Patua One", serif;
    padding-top: 9px;
    letter-spacing: 1px;
    border-top-left-radius: 20px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 5px;
}

.right-form-appointment .head-with-btn a:hover {
    background-color: var(--secondary-color);
}

.right-form-appointment .form-fields {
    border: 1px solid var(--secondary-color);
    padding-top: 0.2rem;
}

.right-form-appointment .form-fields form {
    margin-top: 0.5rem;
    padding: 2rem;
    padding-top: 0.8rem;
    padding-bottom: 1.5rem;
}

.right-form-appointment .form-fields form select {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    margin-bottom: 0.5rem;
}

.right-form-appointment .form-fields form input {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    margin-bottom: 0.5rem;
}

.right-form-appointment .form-fields form input::placeholder {
    font-weight: 500;
}

.right-form-appointment .form-fields form textarea {
    margin-bottom: 1.5rem;
    width: 100%;
    height: 110px;
    resize: none;
    border-radius: 8px;
    padding-top: 1rem;
}

.right-form-appointment .form-fields form textarea::placeholder {
    font-weight: 500;
}


.right-form-appointment .form-fields form button {
    padding: 9px 20px;
    border: 1px solid var(--secondary-color);
    background-color: transparent;
    border-radius: 20px;
    color: var(--secondary-color);
    padding-top: 7px;
    transition: all 0.2s ease;
    font-size: 16px;
    font-weight: 500;

}

.right-form-appointment .form-fields form button:hover {
    padding: 9px 20px;
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    color: #fff;
    padding-top: 7px;
    transition: all 0.2s ease;
    background-color: var(--secondary-color);

}


/* Appointment Page CSS Ends here ----------------------------------------------------------------- */





/* Department Page Main CSS Starts Here ----------------------------------- */

.department-main {
    width: 100%;
    margin-top: 4rem;
}

.department-main-divider {
    width: 100%;
    display: flex;
    gap: 3%;
    position: relative;
    padding-bottom: 2.6rem;
}

.position-depart {
    position: sticky;
    top: 15%;
}

.department-main-divider .left-images h3 {
    display: none;
}

.department-main-divider .left-images .dash-with-heading {
    display: none;
}

.department-main-divider .left-images {
    width: 46%;
}

.department-main-divider .left-images img {
    width: 100%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border-top-right-radius: 30px;
}



.department-main-divider .right-desc {
    width: 50%;
    padding-top: 2rem;
}

.department-main-divider .right-desc h3 {
    font-family: var(--pri-fontFamily);
    color: var(--secondary-fontColor);
}

.department-main-divider .right-desc .dash-with-heading {
    display: flex;
    gap: 3%;
    align-items: end;
}

.department-main-divider .right-desc .dash-with-heading hr {
    width: 5%;
    border: 2px solid black;
}

.department-main-divider .right-desc .dash-with-heading h5 {
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 17px;
    font-family: var(--pri-fontFamily);
}

.department-main-divider .right-desc ul {
    list-style: none;
    padding: 0;
}

.department-main-divider .right-desc p {
    line-height: 1.7;
    color: var(--pri-fontColor);
    font-size: 15px;
}

.department-main-divider .right-desc li {
    line-height: 1.7;
    color: var(--pri-fontColor);
    font-size: 15px;
    margin-bottom: 0.5rem;
}

.department-main-divider .right-desc i {
    color: var(--secondary-color);
    margin-right: 7px;
}


.meet-the-team-depart {
    width: 100%;
    height: 100%;
    background-color: var(--fourth-color);
    padding: 4rem 0;
}

.meet-the-team-depart:last-child {
    width: 100%;
    height: 100%;
    background-color: var(--fourth-color);
    padding: 4rem 0;
    padding-bottom: 0.2rem;
}

.meet-the-team-depart .heading-department {
    text-align: center;
}

.meet-the-team-depart .heading-department h4 {
    font-size: 31px;
    font-weight: 400;
    font-family: var(--pri-fontFamily);
    color: var(--pri-fontColor);
}


.doctors-profile-depart {
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.profile-img-desc-divider {
    width: 100%;
    display: flex;
    gap: 3%;
}

.profile-img-desc-divider .left-images {
    width: 25%;
}

.profile-img-desc-divider .left-images img {
    width: 100%;
    margin-bottom: 1.5rem;
    border-top-right-radius: 40px;
    border: 1px solid #ddd;
    padding: 0.5rem;
}

.profile-img-desc-divider .right-doc-desc {
    width: 75%;
    padding-top: 1rem;
}

.profile-img-desc-divider .right-doc-desc h3 {
    font-family: var(--pri-fontFamily);
    color: var(--secondary-fontColor);
}

.profile-img-desc-divider .right-doc-desc ul {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}

.profile-img-desc-divider .right-doc-desc ul div {
    margin-top: 1rem;
}

.profile-img-desc-divider .right-doc-desc ul li {
    line-height: 1.6;
    color: var(--pri-fontColor);
    font-size: 16px;
}

.right-doc-desc ul div i {
    color: var(--secondary-color);
    margin-right: 6px;
}


.department-video-section {
    width: 100%;
    padding: 5rem 0;
}

.department-video-section .video-depart-divider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
}


.left-desc {
    width: 52%;
}

.left-desc h3 {
    font-size: 2.2rem;
    color: var(--pri-fontColor);
    font-family: var(--pri-fontFamily);
}

.left-desc h3 span {
    color: var(--secondary-color);
}

.left-desc p {
    width: 99%;
    text-align: justify;
    margin-top: 1.4rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: #6f6f6f;
    font-size: 15.5px;
    font-family: var(--pri-fontFamily);
}


.right-video {
    width: 43%;
}

.right-video .vid-cont video {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

/* Department Page Main CSS Ends Here ----------------------------------- */




/* Contact Us Page CSS Starts here */

.contactus-section {
    width: 100%;
    padding: 3rem 0;
    padding-top: 1.5rem;
}

.contactus-div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 5%;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.contactus-div .left-form {
    width: 53%;
    margin-top: 1rem;
}

.contactus-div .left-form h3 {
    color: var(--secondary-color);
    font-size: 2.7rem;
    font-weight: 600;
    font-family: var(--pri-fontFamily);
}

.contactus-div .left-form p {
    font-size: 17.5px;
    color: #656565;
}

.contactus-div .left-form form textarea {
    resize: none;
}

.contactus-div .left-form .cont-btn {
    background-color: var(--secondary-color);
    border: none;
    padding: 0.7rem 2rem;
    font-size: 16.5px;
    font-weight: 600;
    text-transform: capitalize;
    color: white;
    width: 100%;
    border-radius: 5px;
    position: relative;
    z-index: 30;
    overflow: hidden;
    transition: all 0.3s ease;
}

.contactus-div .left-form .cont-btn:hover {
    background-color: var(--secondary-color);
}

.contactus-div .right-details {
    width: 42%;
    margin-top: 2.1rem;
}

.contactus-div .right-details .img-cont {
    width: 53%;
    margin: 0;
    position: relative;
    margin: auto;
    z-index: 60;
}

.contactus-div .right-details .img-cont img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.contactus-div .right-details .img-cont .icon-place-absolute {
    width: 100%;
    height: 100%;
}

.contactus-div .right-details .img-cont .icon-place-absolute .call-icon {
    width: 40px;
    height: 40px;
    padding: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    border-radius: 100%;
    position: absolute;
    left: 92%;
    top: 29%;
    background-color: var(--secondary-color);
    box-shadow: 0 2px 3px rgba(116, 116, 116, 0.603);
}

.contactus-div .right-details .img-cont .icon-place-absolute .call-icon i {
    font-size: 1.9rem;
    color: white;
}

.contactus-div .right-details .img-cont .icon-place-absolute .headphone-icon {
    width: 40px;
    height: 40px;
    padding: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    border-radius: 100%;
    position: absolute;
    left: -8%;
    top: 45%;
    background-color: var(--secondary-color);
    box-shadow: 0 2px 3px rgba(116, 116, 116, 0.603);
}

.contactus-div .right-details .img-cont .icon-place-absolute .headphone-icon i {
    font-size: 1.4rem;
    color: white;
}

.contactus-div .right-details .img-cont .icon-place-absolute .comment-icon {
    width: 40px;
    height: 40px;
    padding: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    border-radius: 100%;
    position: absolute;
    left: 31%;
    top: -1%;
    background-color: var(--secondary-color);
    box-shadow: 0 2px 3px rgba(116, 116, 116, 0.603);
}

.contactus-div .right-details .img-cont .icon-place-absolute .comment-icon i {
    font-size: 1.3rem;
    color: white;
}

.contactus-div .right-details .content {
    width: 100%;
    margin-top: 0rem;
}

.contactus-div .right-details .content .phone-num {
    display: flex;
    align-items: center;
    gap: 10%;
}

.contactus-div .right-details .content .phone-num a {
    color: #3a3a3a;
    font-family: var(--pri-fontFamily);
    font-weight: 500;
    transition: color 0.25s ease;
    text-decoration: none;
}

.contactus-div .right-details .content .phone-num a:hover {
    color: var(--secondary-color);
}

.contactus-div .right-details .content .icon-text {
    display: flex;
    align-items: center;
    gap: 5%;
    margin-bottom: 1.1rem;
    margin-left: 1rem;
}

.contactus-div .right-details .content .icon-text:last-child {
    display: flex;
    align-items: center;
    gap: 5%;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
}

.contactus-div .right-details .content .icon-text .icon {
    width: 35px;
    height: 35px;
    padding: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--secondary-color);
    border-radius: 100%;
}

.contactus-div .right-details .content .icon-text .icon i {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.contactus-div .right-details .content .icon-text h5 {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #3a3a3a;
    font-family: var(--pri-fontFamily);
    padding: 0;
    margin: 0;
    line-height: 1.5;
}
.contactus-div .right-details .content .icon-text h5 a{
    text-decoration: none;
    width: 100%;
    font-size: 15.7px;
    font-weight: 500;
    color: #3a3a3a;
    font-family: var(--pri-fontFamily);
    padding: 0;
    margin: 0;
    line-height: 1.5;
}
.contactus-div .right-details .content .icon-text h5 a:hover{
    color: var(--secondary-color);
}

.office-time {
    width: 100%;
}
/* Contact Us Page CSS ends here */





/* Blogs Page CSS starts here */
.blogs-Complete-Page {
    width: 100%;
    padding: 4rem 0;
}

.blog-completepage-divider {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 3%;
}

.blog-completepage-divider .left-numberofBlogs {
    width: 64%;
}

/* .blog-completepage-divider .left-numberofBlogs .blogs-container{
    width: 100%;
} */
.blog-completepage-divider .left-numberofBlogs .blog-single-detail-box {
    width: 100%;
    border: 1px solid #ccc;
    padding-bottom: 1rem;
    margin-bottom: 2.2rem;
}

.blog-completepage-divider .left-numberofBlogs .blog-single-detail-box .img-cont {
    width: 100%;
    height: 400px;
}

.blog-completepage-divider .left-numberofBlogs .blog-single-detail-box .img-cont img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blog-completepage-divider .left-numberofBlogs .blog-single-detail-box .date-author {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    background-color: var(--secondary-color);
}

.blog-completepage-divider .left-numberofBlogs .blog-single-detail-box .date-author .icon-text {
    display: flex;
    align-items: baseline;
    padding-top: 0.5rem;
}

.blog-completepage-divider .left-numberofBlogs .blog-single-detail-box .date-author .icon-text i {
    margin-right: 6px;
    font-size: 14px;
    color: white;
}

.blog-completepage-divider .left-numberofBlogs .blog-single-detail-box .date-author .icon-text h6 {
    font-size: 15px;
    color: white;
    font-family: var(--pri-fontFamily);
}

.blog-completepage-divider .left-numberofBlogs .blog-single-detail-box .title-and-para {
    padding: 0.5rem 1rem;
}

.blog-completepage-divider .left-numberofBlogs .blog-single-detail-box .title-and-para h3 {
    font-size: 2.1rem;
    font-weight: 500;
    font-family: var(--sec-fontFamily);
    color: #373737f8;
}

.blog-completepage-divider .left-numberofBlogs .blog-single-detail-box .title-and-para p {
    font-size: 16.2px;
    display: -webkit-box;
    color: #6c6c6c;
    padding-bottom: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}



.blog-completepage-divider .right-recents-blogs {
    width: 33%;
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-container {
    width: 100%;
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-container h3 {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--pri-fontFamily);
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-container hr {
    border: 2px solid var(--pri-fontColor);
    margin: 0;
    margin-bottom: 1.2rem;
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-box {
    width: 100%;
    padding: 1rem;
    background-color: rgb(236, 236, 253);
    margin-bottom: 1.6rem;
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-box a {
    text-decoration: none;
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-box a .date-author-img {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 3%;
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-box a .date-author-img .img-cont {
    width: 34%;
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-box a .date-author-img .img-cont img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-box a .date-author-img .date-author {
    display: flex;
    flex-direction: column;
    width: 73%;
    background: linear-gradient(to left, transparent, white);
    padding: 0.5rem;
    padding-bottom: 0;
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-box a .date-author-img .date-author .icon-text {
    display: flex;
    align-items: baseline;
    color: #656565;
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-box a .date-author-img .date-author .icon-text i {
    font-size: 12.5px;
    margin-right: 5px;
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-box a .date-author-img .date-author .icon-text h6 {
    font-size: 13px;
}


.blog-completepage-divider .right-recents-blogs .recent-blog-post-box a h5 {
    margin-top: 0.5rem;
    font-size: 21px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--secondary-fontColor);
}

.blog-completepage-divider .right-recents-blogs .recent-blog-post-box a p {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #4f4f4f;
    margin-bottom: 0.1rem;
}



#pagination-controls-blogs {
    text-align: center;
    margin: 24px 0;
}

#pagination-controls-blogs::before {
    content: "—";
    margin-right: 6px;
}

#pagination-controls-blogs::after {
    content: "—";
    margin-left: 6px;
}

#pagination-controls-blogs .pagination-button {
    padding: 0.8rem 1.3rem;
    margin: 0 5px;
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
}

#pagination-controls-blogs .pagination-button.active {
    background-color: #007bff;
    color: #fff;
}


/* Blog Details Complete Page on click of read more button it opens*/
.blog-detail-complete-container {
    position: relative;
    padding: 15px 0;
    background-color: #fff;
    border-radius: 10px;
    margin: auto;
}

.blog-detail-complete-container .blogs-details-cmplte {
    width: 100%;
    padding-bottom: 3rem;
    position: relative;
}

.img-date-author {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 2.5%;
    width: 90%;
    margin: auto;
    margin-top: 2.4rem;
    background-color: rgb(245, 245, 255);
    padding: 2rem 1.6rem;
    border-radius: 10px;
}

.img-date-author .left-img {
    width: 41.5%;
    margin: auto;
}

.blog-detail-complete-container .blogs-details-cmplte .img-cont {
    width: 100%;
    height: 21rem;
    border: none;
    background-position: center !important;
    background-repeat: no-repeat;
    background-size: cover;
}

.blog-detail-complete-container .blogs-details-cmplte .img-cont img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    backdrop-filter: blur(9px) brightness(50%);
}

.blog-detail-complete-container .blogs-details-cmplte .content {
    width: 90%;
    margin: auto;
    padding: 0.6rem 1rem;
    padding-bottom: 1rem;
}


.blog-detail-complete-container .blogs-details-cmplte .date-author {
    gap: 8%;
    width: 56%;
}

.blog-detail-complete-container .blogs-details-cmplte .date-author .bg-icon-text {
    background: linear-gradient(to right, var(--secondary-color), transparent);
    padding: 0.8rem 1rem;
}

.blog-detail-complete-container .blogs-details-cmplte .date-author .icon-text {
    display: flex;
    align-items: baseline;
    color: white;
    margin-top: 0.4rem;
}

.blog-detail-complete-container .blogs-details-cmplte .date-author .icon-text i {
    font-size: 17px;
    margin-right: 7px;

}

.blog-detail-complete-container .blogs-details-cmplte .date-author .icon-text h6 {
    font-size: 17px;
    font-weight: 500;
}

.blog-detail-complete-container .blogs-details-cmplte h4 {
    font-size: 2.3rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: #37383f;
    letter-spacing: -0.2px;
    font-family: var(--pri-fontFamily);
}

.blog-detail-complete-container .blogs-details-cmplte .heading-paragrapgh p {
    font-size: 17.5px;
    width: 100%;
    text-align: justify;
    margin: 0.1rem 0;
    color: #6a6b71;
}

.blog-detail-complete-container .blogs-details-cmplte .heading-paragrapgh ul {
    font-size: 17.5px;
    width: 100%;
    text-align: justify;
    margin: 0.3rem 0;
    color: #6a6b71;
    list-style: disc;
    padding-left: 20px;
}

/* Blog Details Complete Page on click of read more button it opens ends*/

/* Blogs Page CSS ends here */



/* Services Page CSS Starts here */
.herosection-service {
    width: 100%;
    padding: 5rem 0;
    padding-bottom: 3rem;
}

.herosection-service .hero-servicePage-divider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3%;
}

.herosection-service .hero-servicePage-divider .left-img {
    width: 48%;
}

.herosection-service .hero-servicePage-divider .left-img .img-cont-serv-hero {
    width: 100%;
    height: 22rem;
}

.herosection-service .hero-servicePage-divider .left-img .img-cont-serv-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.herosection-service .hero-servicePage-divider .right-desc-serv-hero {
    width: 49%;
}

.herosection-service .hero-servicePage-divider .right-desc-serv-hero h3 {
    font-size: 2.5rem;
    color: var(--pri-fontColor);
    font-family: var(--pri-fontFamily);
}

.herosection-service .hero-servicePage-divider .right-desc-serv-hero h3 span {
    color: var(--secondary-color);
}

.herosection-service .hero-servicePage-divider .right-desc-serv-hero p {
    width: 99%;
    text-align: justify;
    margin-top: 1.4rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: #6f6f6f;
    font-size: 15.5px;
    font-family: var(--pri-fontFamily);
}

/* Services Page CSS ends here */



/* Service details page CSS Starts here */
.serv-details-page {
    width: 100%;
    padding: 4.5rem 0;
}

.serv-details-page .head {
    width: 100%;
    margin-bottom: 3rem;
    text-align: center;
    background-color: var(--primary-color);
    border-radius: 25px;
}

.serv-details-page .head .section-heading {
    font-size: 2.9rem;
    padding: 1rem;
    padding-bottom: 1.1rem;
    color: var(--text-white);
}

.serv-details-page .serv-detail-div {
    width: 100%;
    display: flex;
    gap: 3%;
}

.serv-details-page .serv-detail-div .left-img-btn {
    width: 27%;
}
.serv-details-page .serv-detail-div .left-img-btn .pos-imag-servBTN{
    position: sticky;
    top: 13%;
    margin-top: 0.4rem;
    padding-bottom: 2rem;
}

.serv-details-page .serv-detail-div .left-img-btn .img-cont {
    width: 100%;
    height: 15.6vw;
    max-height: 230px;
    /* border: 2px solid white; */
    margin-bottom: 1.8rem;
    border-radius: 12px;
}

.serv-details-page .serv-detail-div .left-img-btn .img-cont img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}



.serv-details-page .serv-detail-div .right-serv-desc {
    width: 70%;
}

.serv-details-page .serv-detail-div .right-serv-desc .serv-title {
    font-size: 2.4rem !important;
    font-family: var(--pri-fontFamily);
    font-weight: 500 !important;
    color: var(--secondary-color);
    margin: 0 !important;
    margin-bottom: 0.5rem !important;
}

.serv-details-page .serv-detail-div .right-serv-desc h4 {
    font-size: 1.5rem;
    font-family: var(--pri-fontFamily);
    font-weight: 400;
    color: #37383f;
    margin: 2rem 0;
    margin-bottom: 0.6rem;
}

.serv-details-page .serv-detail-div .right-serv-desc p {
    font-size: 15.5px;
    color: var(--pri-fontColor);
    font-family: var(--pri-fontFamily);
}

.serv-details-page .serv-detail-div .right-serv-desc ul {
    padding-left: 0;
    list-style: none;
}

.serv-details-page .serv-detail-div .right-serv-desc ul li {
    font-size: 15.5px;
    color: var(--pri-fontColor);
    font-family: var(--pri-fontFamily);
    margin: 0.6rem 0;
}

.serv-check-icon {
    color: var(--secondary-color) !important;
    margin-right: 10px;
}
/* Service details page CSS ends here */



/* middlebanner section css starts here */

.lets-work-together {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 5rem 0;
    position: relative;
    z-index: 2;
    text-align: center;
}

.lets-work-together .section-title {
    color: var(--text-white);
    font-weight: 500;
}

.lets-work-together .section-heading {
    font-size: 3.15rem;
    color: var(--text-white);
}

.lets-work-together .bg-img-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: linear-gradient(15deg, var(--secondary-color), transparent);
    filter: brightness(20%);
    opacity: 1;
    z-index: -2;
}

.lets-work-together-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2%;
    margin-top: 2.5rem;
    overflow: hidden;
}

.lets-work-together-btns a {
    padding: 0.8rem 1.2rem;
    border-radius: 60px;
    font-size: 15px;
    cursor: pointer;
    font-family: var(--pri-fontFamily);
}

/* middlebanner section css ends here */

#loadServices ul {
    color: white;
    list-style: none;
    padding: 0px;
}