/********** Template CSS **********/
:root {
    --primary: #018995;
    --secondary: #f08225;
    --light: #EEF9FF;
    --dark: #05272a;
}

h1,
h2,
.font-weight-bold {
    font-weight: 700 !important;
}

h3,
h4,
.font-weight-semi-bold {
    font-weight: 600 !important;
}

h5,
h6,
.font-weight-medium {
    font-weight: 500 !important;
}

.btn {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    transition: .5s;
}

.btn-primary,
.btn-secondary {
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.btn-secondary:hover {
    background: var(--primary);
    border-color: var(--primary);
}

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

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

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

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#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;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


.top-shape::before {
    position: absolute;
    content: "";
    width: 55px;
    height: 100%;
    top: 0;
    right: -25px; 
    background: var(--primary);
    transform: skew(40deg);
}

@media (max-width: 991px) {
    .top-shape::before {
        display: none;
        content: none;
    }
}

/* =========================
   NAVBAR LOGO RESPONSIVE
========================= */
.navbar-brand {
    flex-shrink: 0;
}


.navbar .ms-auto {
    margin-left: auto !important;
}

.location-btn {
    white-space: nowrap;
}

/* Default (Desktop) */
.navbar-logo {
    width: 280px;
    max-width: 100%;
    height: auto;
    transition: all 0.3s ease;
}

/* Large laptops */
@media (max-width: 1200px) {
    .navbar-logo {
        width: 240px;
    }
}


/* Mobile */
@media (max-width: 575px) {
    .navbar-logo {
        width: 160px;
    }
}

@media (max-width: 400px) {
    .navbar-logo {
        width: 120px;
    }
}


.navbar-light .navbar-nav .nav-link {
    font-family: 'Jost', sans-serif;
    padding: 35px 15px;
    font-size: 18px;
    color: var(--dark);
    outline: none;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 20px 15px;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link,
    .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

.call-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 2px solid #018995; 
    color: #018995;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* Wrapper */
.custom-location-dropdown {
    display: inline-block;
}

/* Button */
.custom-location-dropdown .location-btn {
    border: none;
    background: transparent;
    color: #018995; /* primary blue */
    font-weight: 600;
    padding: 6px 10px;
    box-shadow: none;
}

.custom-location-dropdown .location-btn:hover,
.custom-location-dropdown .location-btn:focus {
    background: rgba(13, 110, 253, 0.08);
    color: #018995;
}

/* Remove Bootstrap arrow styling side-effect */
.custom-location-dropdown .dropdown-toggle::after {
    margin-left: 6px;
}

/* Dropdown menu */
.custom-location-dropdown .dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    padding: 8px 0;
}

/* Items */
.custom-location-dropdown .dropdown-item {
    padding: 10px 18px;
    font-weight: 500;
    color: #333;
}

/* Hover */
.custom-location-dropdown .dropdown-item:hover {
    background: #f1f6ff;
    color: #018995;
}

/* Active (Selected Location) */
.custom-location-dropdown .dropdown-item.active {
    background: #018995;
    color: #fff;
}



.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgba(9, 30, 62, .85); */
    background: #03292c1c;
    z-index: 1;
}

@media (max-width: 576px) {
    .carousel-caption h5 {
        font-size: 14px;
        font-weight: 500 !important;
    }

    .carousel-caption h1 {
        font-size: 30px;
        font-weight: 600 !important;
    }
}

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

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}
@media (max-width: 767px) {
    .carousel-control-prev,
    .carousel-control-next {
        display: none !important;
    }
}
@media (min-width: 991.98px) {
    .banner {
        position: relative;
        margin-top: -90px;
        z-index: 1;
    }
}

.section-title h5::before {
    position: absolute;
    content: "";
    width: 45px;
    height: 3px;
    right: -55px;
    bottom: 11px;
    background: var(--primary);
}

.section-title h5::after {
    position: absolute;
    content: "";
    width: 15px;
    height: 3px;
    right: -75px;
    bottom: 11px;
    background: var(--secondary);
}

.twentytwenty-wrapper {
    height: 100%;
}

.hero-header {
    background: linear-gradient(rgba(9, 30, 62, .85), rgba(9, 30, 62, .85)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.bg-appointment {
    background: linear-gradient(rgba(9, 30, 62, .85), rgba(9, 30, 62, .85)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

/* .appointment-form {
    background: rgba(6, 163, 218, .7);
} */

.service-item img,
.service-item .bg-light,
.service-item .bg-light h5,
.team-item .team-text {
    transition: .5s;
}

.service-item:hover img {
    transform: scale(1.15);
}

.team-item .team-text::after,
.service-item .bg-light::after {
    position: absolute;
    content: "";
    top: 50%;
    bottom: 0;
    left: 15px;
    right: 15px;
    border-radius:100px / 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .7);
    opacity: 0;
    transition: .5s;
    z-index: -1;
}

.team-item:hover .team-text::after,
.service-item:hover .bg-light::after {
    opacity: 1;
}

.bg-offer {
    background:url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.offer-text {
    background: rgba(6, 163, 218, .85);
}

.price-carousel .owl-nav {
    position: absolute;
    width: calc(100% + 45px);
    height: 45px;
    top: calc(50% - 22.5px);
    left: -22.5px;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: .5s;
}

.price-carousel:hover .owl-nav {
    opacity: 1;
}

.price-carousel .owl-nav .owl-prev,
.price-carousel .owl-nav .owl-next {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 2px;
    font-size: 22px;
    transition: .5s;
}

.price-carousel .owl-nav .owl-prev:hover,
.price-carousel .owl-nav .owl-next:hover {
    background: var(--secondary);
}

.bg-testimonial {
    background: url(../img/carousel-2.jpg) center center no-repeat;
    background-size: cover;
}

.testimonial-carousel {
    background: rgba(6, 163, 218, .85);
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: calc(100% + 46px);
    height: 46px;
    top: calc(50% - 23px);
    left: -23px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 2px;
    font-size: 22px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--secondary);
}

.testimonial-carousel .owl-item img {
    width: 120px;
    height: 120px;
}

/* =========================
   TOP BAR BASE STYLES
========================= */
.topbar {
    font-size: 14px;
    background: #f8f9fa;
}

/* Email & Phone container */
.top-shape {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    padding: 10px 30px;
}

/* Email / Phone text */
.top-shape p {
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
}

/* =========================
   SOCIAL ICONS BASE
========================= */
.social-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Social button base */
.social-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin: 0 8px;
    background-color: black;
    box-shadow: 0px 0px 4px #00000027;
    transition: 0.3s;
    color: white;
}

.social-button:hover {
    background-color: #f2f2f2;
    box-shadow: 0px 0px 6px 3px #00000027;
    animation: bounce_613 0.4s linear;
}

/* Icons */
.social-button svg,
.social-button i {
    transition: 0.3s;
    fill: #f2f2f2;
    color: #fff;
}

/* =========================
   SOCIAL COLORS
========================= */
.social-button.facebook {
    background-color: #0d6efd;
}
.social-button.facebook svg {
    width: 16px;
    height: 16px;
}
.social-button.facebook:hover svg {
    fill: #fff;
}

.social-button.youtube {
    background-color: #dc3545;
}

.social-button.whatsapp {
    background-color: #12a50b;
}

.social-button.whatsapp:hover i,
.social-button.twitter:hover i,
.social-button.instagram:hover i {
    color: #fff;
}

.social-button.twitter {
    background-color: #000;
}

.social-button.instagram {
    background: linear-gradient(
        45deg,
        #f09433 0%,
        #e6683c 25%,
        #dc2743 50%,
        #cc2366 75%,
        #bc1888 100%
    );
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media (max-width: 767px) {

    /* Hide social icons on mobile */
    .social-buttons {
        display: none !important;
    }

    /* Keep email & phone in one line */
    .top-shape {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
    }

    .top-shape p {
        font-size: 12px;
    }

    .top-shape .border-end {
        border-right: 1px solid rgba(255, 255, 255, 0.4) !important;
    }
}


.product-card {
    max-width: 380px;
    position: relative;
    /* box-shadow: 0 2px 5px #333; */
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    margin: 0 auto;
    background: #018995;
    border-radius: 8px;
    padding: 8px;
}


.product-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 110px; */
    /* padding: 6px; */
    background: #018995;
    border-radius: 6px;
}

.product-thumb img {
    max-width: 100% !important;
    max-height: 100%;
}

.product-details {
   padding: 10px 0px 0px 0px;
}

.product-details h4 {
    font-weight: 500;
    display: block;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    transition: 0.3s;
    font-size: 12px;
    font-family: math;
}

.product-details h4:hover {
    color: white;
}


.product-bottom-details {
    overflow: hidden;
    border-top: 1px solid #99DDFF;
    padding-top: 20px;
}

.product-bottom-details div {
    float: left;
    width: 50%;
}

.product-price {
    font-size: 18px;
    color: #F52544;
    font-weight: 600;
}

.product-price small {
    font-size: 80%;
    font-weight: 400;
    text-decoration: line-through;
    display: inline-block;
    margin-right: 5px;
}

.product-links {
    text-align: right;
}

.product-links a {
    display: inline-block;
    margin-left: 5px;
    color: #5CE0D8;
    transition: 0.3s;
    font-size: 17px;
}

.product-links a:hover {
    color: #F52544;
}

@media (max-width: 370px) {
    .product-thumb {
    height: 110px;
}
}


/* ==================================================
   NAV DROPDOWN WRAPPER
================================================== */
.custom-nav-dropdown {
    position: relative;
}

/* ==================================================
   MAIN DROPDOWN MENU
================================================== */
.custom-nav-dropdown .dropdown-menu {
    border: none;
    border-radius: 10px;
    padding: 8px 0;
    min-width: 260px;
    margin-top: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}


/* ==================================================
   DROPDOWN ITEMS
================================================== */
.custom-nav-dropdown .dropdown-item {
    padding: 10px 18px;
    font-size: 15px;
    color: #333;
    transition: all 0.25s ease;
}

.custom-nav-dropdown .dropdown-item:hover {
    background-color: #f2f6ff;
    color: #018995;
}

.custom-nav-dropdown .dropdown-item.active {
    background-color: #018995;
    color: #fff;
}

/* ==================================================
   SUBMENU BASE
================================================== */
.dropdown-submenu {
    position: relative;
}

/* ==================================================
   SUBMENU BASE (REQUIRED)
================================================== */
.dropdown-submenu > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 6px;

    display: none; /* IMPORTANT */

    min-width: 240px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);

    z-index: 1060;
}


/* ==================================================
   DESKTOP HOVER SUPPORT
================================================== */
@media (min-width: 992px) {
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

/* ==================================================
   MOBILE CLICK SUPPORT
================================================== */
.dropdown-submenu.show > .dropdown-menu {
    display: block;
}

/* ==================================================
   SUBMENU ICON
================================================== */
.dropdown-submenu i {
    font-size: 13px;
    transition: transform 0.3s ease;
}

.dropdown-submenu.show i {
    transform: rotate(90deg);
}

/* ==================================================
   MOBILE & TABLET STYLES
================================================== */
@media (max-width: 991.98px) {

    /* Main dropdown full width */
    .custom-nav-dropdown .dropdown-menu {
        width: 100%;
        max-height: 60vh;

        /* ✅ BOTH SCROLLS */
        overflow-x: auto;
        overflow-y: auto;
    }

    /* Submenu stacked */
    .dropdown-submenu > .dropdown-menu {
        position: static;
        margin-left: 25px;
        margin-top: 6px;
        box-shadow: none;
        border-radius: 8px;
        max-height: 40vh;

        /* ✅ BOTH SCROLLS */
        overflow-x: auto;
        overflow-y: auto;
    }

    /* Submenu items indent */
    .dropdown-submenu > .dropdown-menu .dropdown-item {
        padding-left: 28px;
        font-size: 14px;
        position: relative;
    }

    /* Dash indicator */
    .dropdown-submenu > .dropdown-menu .dropdown-item::before {
        content: "-";
        position: absolute;
        left: 14px;
        color: #018995;
        font-weight: bold;
    }
}


.whatsapp-button {
    position: fixed;
    bottom: 105px;
    right: 35px;
    z-index: 1000;
}

    .call-button {
    position: fixed;
    bottom: 76px;
    right: 23px; /* space from WhatsApp button */
    z-index: 1000;
}




.swiper-wrapper {
  align-items: stretch;
}

.swiper-slide {
  height: auto;
  padding: 10px 10px;
  background: #fff;
  border-radius: 6px;

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

.horizontal_scroll_swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: aliceblue;
}

.horizontal_scroll_swiper .swiper-slide img {
  max-width: 115%;
  max-height: 200px;
  height: auto;
  object-fit: contain;

  background: #fff;
  padding: 12px;

  border: 1px solid #e5e5e5;
  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


/* Scrollbar styling */
.swiper-scrollbar {
  height: 6px;
  background: #eee;
}

.swiper-scrollbar-drag {
  background: #999;
  border-radius: 4px;
}

/* ==================================================
   FINAL MOBILE RESPONSIVE PATCH (SAFE OVERRIDES)
   Add at END of style.css
================================================== */

/* -------------------------------
   GLOBAL MOBILE SAFETY
-------------------------------- */
body {
    padding-top: 78px; /* navbar height */
}

html, body {
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

@media (max-width: 576px) {
    body {
        padding-top: 64px;
    }
}

/* -------------------------------
   NAVBAR – SMALL DEVICES
-------------------------------- */
@media (max-width: 575px) {

    /* Reduce navbar height pressure */
    .navbar {
        padding-top: 6px;
        padding-bottom: 6px;
    }


    /* Call + toggler tighter */
    .call-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .navbar-toggler {
        padding: 3px 6px;
    }

    /* Dropdown menu spacing */
    .navbar-collapse {
        margin-top: 8px;
        padding: 10px;
        border-radius: 10px;
        background: #fff;
    }
}


@media (max-width: 991.98px) {

    #navbarCollapse {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .custom-nav-dropdown > .dropdown-menu {
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .dropdown-submenu > .dropdown-menu {
        max-height: 65vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media (max-height: 700px) {

    .custom-nav-dropdown > .dropdown-menu {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* -------------------------------
   HERO / ABOUT TEXT READABILITY
-------------------------------- */
@media (max-width: 576px) {

    h1 {
        font-size: 1.35rem;
        line-height: 1.3;
    }

    h4 {
        font-size: 1rem;
    }

    p {
        font-size: 0.95rem;
        line-height: 1.6;
        word-break: break-word;
    }
}

/* -------------------------------
   SERVICE CARDS – MOBILE FIX
-------------------------------- */
@media (max-width: 576px) {

    .product-card {
        max-width: 100%;
    }

    .product-thumb {
        height: 145px;
    }

    .product-thumb img {
        max-height: 100%;
        object-fit: contain;
    }

    .product-details h4 {
        font-size: 12px;
        line-height: 1.4;
        text-align: center;
    }
}

/* -------------------------------
   SWIPER – VERY SMALL SCREENS
-------------------------------- */
@media (max-width: 400px) {

    .horizontal_scroll_swiper .swiper-slide {
        width: 150px;
        padding: 8px;
    }

    .horizontal_scroll_swiper .swiper-slide img {
        max-height: 120px;
        padding: 8px;
    }
}

/* -------------------------------
   FLOATING BUTTONS – SAFE GAP
-------------------------------- */
@media (max-width: 576px) {

    .whatsapp-button {
        right: 19px;
        bottom: 75px;
    }

    .call-button {
        right: 14px;
        bottom: 72px;
    }
}
/* ==================================================
   PREMIUM NURSING CAROUSEL – ENHANCED
================================================== */

.carousel-wrap {
    background: linear-gradient(180deg, #f4fbfd, #e9f7fb);
    border-radius: 16px;
    padding: 18px;
}

.carousel-title {
    color: #018995;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 600;
}

.carousel-title span {
    color: #f08225;
}

/* Swiper container */
.nursing-carousel {
    padding-bottom: 34px;
}

/* Slide */
.nursing-carousel .swiper-slide {
    display: flex;
    justify-content: center;
}

/* Pagination */
.nursing-carousel .swiper-pagination-bullet {
    background: #018995;
    opacity: 0.3;
}

.nursing-carousel .swiper-pagination-bullet-active {
    opacity: 1;
}

/* ==================================================
   RESPONSIVE TOPBAR – FINAL SAFE FIX
================================================== */

/* Base topbar */
.topbar {
    background: #ffffff;
    font-size: 14px;
}

/* Ensure no wrapping */
.topbar * {
    white-space: nowrap;
}

/* -------------------------------
   DESKTOP (Default)
-------------------------------- */
@media (min-width: 992px) {
    .topbar {
        padding: 6px 0;
    }

    .top-shape {
        padding: 10px 30px;
    }

    .social-buttons {
        display: flex;
    }
}

/* -------------------------------
   TABLETS (≤ 991px)
-------------------------------- */
@media (max-width: 991.98px) {

    .topbar {
        padding: 4px 0;
    }

    .top-shape {
        padding: 8px 16px;
        font-size: 13px;
    }

    .social-buttons {
        gap: 6px;
    }

    .social-button {
        width: 22px;
        height: 22px;
        margin: 0 4px;
    }
}

/* -------------------------------
   MOBILE (≤ 767px)
-------------------------------- */
@media (max-width: 767px) {

    .topbar {
        padding: 4px 0;
        border-bottom: 1px solid #eaeaea;
    }

    /* Center everything */
    .topbar .container,
    .topbar .row {
        justify-content: center !important;
        align-items: center !important;
        text-align: center;
    }

    /* Full-width compact shape */
    .top-shape {
        width: 100%;
        justify-content: center;
        padding: 6px 10px;
        border-radius: 0;
    }

    .top-shape p {
        font-size: 12px;
        margin: 0 6px;
    }

    /* Hide social icons */
    .social-buttons {
        display: none !important;
    }
}

/* -------------------------------
   VERY SMALL PHONES (≤ 360px)
-------------------------------- */
@media (max-width: 360px) {

    .top-shape p {
        font-size: 11px;
    }

    .top-shape i {
        font-size: 12px;
    }
}

/* ==================================================
   NAVBAR LOCATION – CENTER ALWAYS (FINAL FIX)
================================================== */

@media (max-width: 400px) {

    /* Navbar layout tightening */
    .navbar > .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }



 
    /* Location button compact */
    .location-btn {
        font-size: 12px;
        padding: 4px 6px;
    }

    /* Right icons tighter */
    .call-btn {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

}


/* Extra-tight phones */
@media (max-width: 400px) {

    .navbar-logo {
        width: 120px !important;
    }

    .location-btn {
        font-size: 12px;
        padding: 4px 6px;
    }

   

    .navbar-toggler {
        padding: 2px 6px;
    }
}


/* ==================================================
   VERY SMALL SCREENS (≤ 360px)
================================================== */

@media (max-width: 360px) {



    /* Location */
    .location-btn {
        font-size: 11px;
        padding: 2px 4px;
    }

    .location-btn i {
        font-size: 11px;
        margin-right: 2px;
    }

    /* Call button */
    .call-btn {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    
}

/* ==================================================
   EXTREME CASE (≤ 320px)
================================================== */

@media (max-width: 320px) {

  
    .location-btn {
        font-size: 10px;
        padding: 2px 3px;
    }

    .call-btn {
        width: 22px;
        height: 22px;
        font-size: 9px;
    }
}
/* ==================================================
   DESKTOP – LOCATION & CALL NEAR MENU (FINAL)
================================================== */

@media (min-width: 992px) {

    .navbar > .container-fluid {
        display: flex;
        align-items: center;
    }

    /* Logo stays left */
    .navbar-brand {
        flex: 0 0 auto;
    }

    /* MENU goes to right */
    #navbarCollapse {
        margin-left: auto;
    }

    /* Location + Call BEFORE menu */
    .navbar-center {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        gap: 10px;
        margin-right: 14px; /* space before menu */
    }
}


/* -------------------------------
   DESKTOP (≥ 992px)
-------------------------------- */
@media (min-width: 992px) {

    /* Menu pushed right */
    #navbarCollapse {
        margin-left: auto;
    }

    /* Location near menu */
    .navbar-center {
        flex: 0 0 auto;
        margin-right: 14px;
    }
}

/* -------------------------------
   MOBILE & TABLET (≤ 991.98px)
-------------------------------- */
@media (max-width: 991.98px) {

    .navbar-center {
        flex: 1;
        justify-content: center;
    }
}
.plain-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.plain-slide img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}
/* =========================
   LOCATION DROPDOWN – COMPACT
========================= */

.custom-location-dropdown .dropdown-menu {
    min-width: 125px;      /* smaller width */
    padding: 4px 0;        /* reduce height */
}

.custom-location-dropdown .dropdown-item {
    padding: 6px 14px;     /* compact items */
    font-size: 14px;       /* smaller text */
    line-height: 1.4;
}
/* =========================================
   MOBILE FIX – NO DROPDOWN SCROLL (IMPORTANT)
========================================= */
@media (max-width: 991.98px) {

    /* Main service dropdown */
    .custom-nav-dropdown .dropdown-menu {
        max-height: none !important;   /* remove height limit */
        overflow-y: visible !important;
        overflow-x: hidden;
    }

    /* Submenus */
    .dropdown-submenu > .dropdown-menu {
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: hidden;
    }
}
@media (max-width: 991.98px) {

    .custom-nav-dropdown .dropdown-item {
        padding: 10px 14px;
        font-size: 14px;
    }
}
/* =========================================
   DESKTOP – SERVICE DROPDOWN NORMAL ALIGN
========================================= */
@media (min-width: 992px) {

    /* Main Service dropdown */
    .custom-nav-dropdown > .dropdown-menu {
        left: 0 !important;
        right: auto !important;
        transform: none !important;
    }
}

@media (min-width: 992px) {

    .custom-nav-dropdown .dropdown-menu {
        min-width: 240px;
    }
}
/* ==================================================
   DESKTOP – ALLOW SUBMENU TO FLOAT OUTSIDE
================================================== */
@media (min-width: 992px) {

    /* Main dropdown must NOT clip submenus */
    .custom-nav-dropdown > .dropdown-menu {
        overflow: visible !important;
        max-height: none !important;
        z-index: 1050;
    }

    /* Submenu floats freely and scrolls */
    .dropdown-submenu > .dropdown-menu {
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1060;
    }
}
/* =========================================
   FINAL SAFE DROPDOWN ALIGNMENT (ALL DEVICES)
========================================= */

/* Desktop */
@media (min-width: 992px) {
    .custom-nav-dropdown > .dropdown-menu {
        left: 0;
        right: auto;
    }
}

/* Mobile & Tablet */
@media (max-width: 991.98px) {
    .custom-nav-dropdown .dropdown-menu {
        left: 0;
        right: 0;
    }
}
/* =========================================
   DESKTOP – ALLOW DROPDOWNS TO FLOAT OUT
========================================= */
@media (min-width: 992px) {

    /* Navbar must not clip dropdowns */
    .navbar,
    .navbar .container,
    .navbar .container-fluid,
    .navbar-collapse {
        overflow: visible !important;
    }
}
/* =========================================
   DESKTOP – SUBMENU OPEN TO LEFT SIDE
========================================= */
@media (min-width: 992px) {

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: auto !important;
        right: 100% !important;  
        margin-left: 0;
    }
}
/* =========================================
   DESKTOP – SUBMENU OPEN TO LEFT SIDE (FINAL)
========================================= */
@media (min-width: 992px) {

    .dropdown-submenu > .dropdown-menu {
        position: absolute;
        top: 0;
        left: auto;
        right: 100%;

        min-width: 260px;
        max-height: 60vh;
        overflow-y: auto;

        display: none;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.12);
        z-index: 1060;
    }

    /* Hover support */
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

}
/* =========================================
   SUBMENU ARROW – ROTATE ONLY WHEN OPEN
========================================= */

/* Default arrow state */
.dropdown-submenu > .submenu-toggle i {
    transition: transform 0.25s ease;
}

/* Desktop: rotate arrow ONLY on hover */
@media (min-width: 992px) {
    .dropdown-submenu:hover > .submenu-toggle i {
        transform: rotate(180deg);
    }
}

/* Mobile: rotate arrow ONLY when submenu is open */
@media (max-width: 991.98px) {
    .dropdown-submenu.show > .submenu-toggle i {
        transform: rotate(180deg);
    }
}
/* =========================================
   DESKTOP – HOVER ONLY (DISABLE CLICK STICKY)
========================================= */
@media (min-width: 992px) {

    /* Prevent click from keeping submenu open */
    .dropdown-submenu.show > .dropdown-menu {
        display: none;
    }

    /* Hover is the ONLY trigger */
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}
/* =========================================
   SUBMENU ARROW – DEFAULT STATE (DOWN)
========================================= */
.dropdown-submenu > .submenu-toggle i {
    transform: rotate(0deg);   /* DOWN */
    transition: transform 0.25s ease;
}
@media (min-width: 992px) {
    .dropdown-submenu:hover > .submenu-toggle i {
        transform: rotate(180deg); /* LEFT (submenu opens left) */
    }
}
@media (max-width: 991.98px) {
    .dropdown-submenu.show > .submenu-toggle i {
        transform: rotate(180deg);
    }
}



/* .swiper-slide.plain-slide {
    width: 289.6px !important;
} */
 /* ===================== SWIPER FINAL FIX ===================== */

/* Swiper container */
.nursing-carousel {
    width: 100%;
    overflow: hidden;
    padding-bottom: 36px;
}

/* Let Swiper control slide width */
.nursing-carousel .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

/* Image fix */
.nursing-carousel .swiper-slide img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
    display: block;
}

/* Mobile safety */
@media (max-width: 576px) {
    .nursing-carousel .swiper-slide img {
        max-height: 120px;
    }
}
/* =========================
   CLEAN CALL ICON – NAVBAR
========================= */

.btn-call {
    width: 38px;
    height: 38px;
    border-radius: 50%;

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

    background: white;
    color: #018995;

    border: none;
    text-decoration: none;

    box-shadow: 0 6px 18px rgba(1,137,149,0.35);
    cursor: pointer;

    animation: callShake 4.5s infinite;

}

/* Phone icon */
.btn-call i {
    font-size: 16px;
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    transform-origin: 50% 50%;
}

/* Hover (desktop) */
.btn-call:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(220, 232, 233, 0.45);
}

.btn-call {
    position: relative;
}

.btn-call::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: rgba(1,137,149,0.25);
    opacity: 0;
    z-index: -1;
}


/* =========================
   SMOOTH SHAKE (NOT UGLY)
========================= */

@keyframes iconShakePause {
  0%, 85% {
    transform: rotate(0);
  }
  88% {
    transform: rotate(-25deg);
  }
  90% {
    transform: rotate(25deg);
  }
  92% {
    transform: rotate(-25deg);
  }
  94% {
    transform: rotate(25deg);
  }
  96%, 100% {
    transform: rotate(0);
  }
}

.btn-call i {
    animation: iconShakePause 3.5s infinite;
}

/* @keyframes callShake {
    0% {
        transform: rotate(0);
        box-shadow: 0 6px 18px rgba(1,137,149,0.35);
    }

    3% {
        transform: rotate(-6deg);
        box-shadow: 0 0 0 0 rgba(1,137,149,0.45);
    }

    6% {
        transform: rotate(6deg);
        box-shadow: 0 0 0 6px rgba(1,137,149,0.25);
    }

    9% {
        transform: rotate(-4deg);
        box-shadow: 0 0 0 10px rgba(1,137,149,0.12);
    }

    12% {
        transform: rotate(4deg);
        box-shadow: 0 0 0 14px rgba(1,137,149,0.06);
    }

    15% {
        transform: rotate(0);
        box-shadow: 0 6px 18px rgba(1,137,149,0.35);
    }

    100% {
        transform: rotate(0);
        box-shadow: 0 6px 18px rgba(1,137,149,0.35);
    }
} */



/* =========================
   MOBILE SIZE
========================= */
@media (max-width: 767px) {
    .btn-call {
        width: 30px;
        height: 30px;
    }

    .btn-call i {
        font-size: 14px;
    }
}

/* =========================================
   FLOATING CALL BUTTON – RING STYLE (RIGHT)
========================================= */

.floating-call-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px; /* above WhatsApp */
    width: 80px;
    height: 80px;
    z-index: 9999;
    pointer-events: none;
}

.floating-call {
    position: absolute;
    inset: 0;
    margin: auto;

    width: 45px;
    height: 45px;
    border-radius: 50%;

    background: linear-gradient(135deg, #06A3DA, #06A3DA);
    color: #fff;

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

    box-shadow: 0 6px 18px rgba(1,137,149,0.4);
    text-decoration: none;

    animation: floatingCallShake 5s infinite;
    pointer-events: auto;
}

/* Phone icon */
.floating-call i {
    font-size: 20px;
}

/* Ring circles */
.floating-call-wrap::before,
.floating-call-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(1,137,149,0.4);
    animation: ringWave 3s infinite;
}

.floating-call-wrap::after {
    animation-delay: 1.5s;
}

/* Hover */
.floating-call:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 26px rgba(1,137,149,0.55);
}

/* =========================
   ANIMATIONS
========================= */

/* Slow shake */
@keyframes floatingCallShake {
    0% { transform: rotate(0); }
    3% { transform: rotate(-8deg); }
    6% { transform: rotate(8deg); }
    9% { transform: rotate(-5deg); }
    12% { transform: rotate(5deg); }
    15% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

/* Ring wave */
@keyframes ringWave {
    0% {
        transform: scale(0.6);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* =========================
   MOBILE ADJUSTMENT
========================= */
@media (max-width: 576px) {
    .floating-call-wrap {
        right: 15px;
        bottom: 15px;
        width: 70px;
        height: 70px;
    }

    .floating-call {
        width: 40px;
        height: 40px;
    }

    .floating-call i {
        font-size: 18px;
    }
}
/* =========================================
   FLOATING CALL – NUMBER BAR
========================================= */

.floating-call-text {
    position: absolute;
    right: 70px;          /* space from circle */
    top: 50%;
    transform: translateY(-50%);

    background: #06A3DA;
    padding: 10px 16px;
    border-radius: 30px;

    box-shadow: 0 6px 18px rgba(1,137,149,0.35);
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
}

/* Text */
.floating-call-text a {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    letter-spacing: 0.5px;
}

/* Show number on hover (desktop) */
@media (min-width: 992px) {
    .floating-call-wrap:hover .floating-call-text {
        opacity: 1;
        right: 76px;
        pointer-events: auto;
    }
}

/* Always show number on mobile */
@media (max-width: 991.98px) {
    .floating-call-text {
        opacity: 1;
        right: 76px;
        pointer-events: auto;
        font-size: 14px;
    }
}
.about-img-col {
    min-height: 500px;
}

@media (max-width: 767px) {
    .about-img-col {
        min-height: auto;
        margin-bottom: 20px;
    }
}
/* REMOVE EXTRA SPACE BELOW SWIPERS (MOBILE) */
@media (max-width: 576px) {
    .carousel-wrap {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .nursing-carousel {
        padding-bottom: 16px !important;
    }
}

/* ===============================
   COMMON CAROUSEL BASE
================================ */
.carousel-wrap {
    border-radius: 18px;
    padding: 26px;
    position: relative;
}

/* Header */
.carousel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.carousel-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

.carousel-title {
    margin: 0;
    font-weight: 700;
}

.carousel-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: #666;
}

/* Slide cards */
.nursing-carousel .swiper-slide {
    background: #fff;
    border-radius: 14px;
    padding: 0px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.nursing-carousel .swiper-slide:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.14);
}

.nursing-carousel img {
    border-radius: 10px;
}

/* ===============================
   SECTION 1 – SKILLED NURSING
================================ */
.section-skilled {
    background: linear-gradient(180deg, #eef9ff, #ffffff);
}

.section-skilled .carousel-icon {
    background: linear-gradient(135deg, #018995, #02b3c3);
}

/* .section-skilled .carousel-title span {
    color: #018995;
} */

/* ===============================
   SECTION 2 – ATTENDANT CARE
================================ */
.section-attendant {
    background: linear-gradient(180deg, #fff7ef, #ffffff);
}

.section-attendant .carousel-icon {
    background: linear-gradient(135deg, #f08225, #f7a25c);
}

.section-attendant .carousel-title span {
    color: #f08225;
}

/* ===============================
   SECTION 3 – MEDICAL PROCEDURE
================================ */
.section-procedure {
    background: linear-gradient(180deg, #f4f6ff, #ffffff);
}

.section-procedure .carousel-icon {
    background: linear-gradient(135deg, #5a67d8, #7f9cf5);
}

/* .section-procedure .carousel-title span {
    color: #5a67d8;
} */

/* Mobile polish */
@media (max-width: 576px) {
    .carousel-wrap {
        padding: 18px;
    }

    .carousel-subtitle {
        font-size: 12px;
    }
}
/* =========================================
   MOBILE FIX – PHONE SAME SIZE AS WHATSAPP
========================================= */
@media (max-width: 576px) {

    /* Match WhatsApp size */
    .floating-call-wrap {
        width: auto;
        height: auto;
        right: 66px;
        bottom: 40px; /* phone ABOVE WhatsApp */
        pointer-events: auto;
    }

    .floating-call i {
        font-size: 20px;
    }

    .floating-call-text {
        right: 2px;
        height: 30px;
        width: 145px;
        padding-top: 5px;
        padding-left: 10px;
    }
}
/* =========================================
   MOBILE FIX – CAROUSEL HEADER ICONS
========================================= */
@media (max-width: 576px) {

    /* Header alignment */
    .carousel-header {
        align-items: flex-start;
        gap: 10px;
    }

    /* Icon container */
    .carousel-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 10px;

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

        flex-shrink: 0;
    }

    /* Icon size */
    .carousel-icon i {
        font-size: 16px;
        line-height: 1;
    }

    /* Title block */
    .carousel-title {
        font-size: 13px;
        line-height: 1.25;
    }

    .carousel-subtitle {
        font-size: 11px;
        line-height: 1.4;
    }
}
/* ===============================
   SWIPER PAGINATION SPACING – FIX
================================ */

.nursing-carousel {
    position: relative;
    padding-bottom: 44px; /* space for pagination */
}
.nursing-carousel .swiper-pagination {
    position: absolute;
    bottom: 8px;          /* distance from bottom */
    left: 0;
    right: 0;
    text-align: center;
}
/* .nursing-carousel .swiper-slide {
    padding-bottom: 16px; 
} */
@media (max-width: 576px) {

    .nursing-carousel {
        padding-bottom: 38px;
    }

    .nursing-carousel .swiper-pagination {
        bottom: -6px;
    }

    /* .nursing-carousel .swiper-slide {
        padding-bottom: 18px;
    } */
}
@media (max-width: 576px) {
    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
    }
}

/* =====================================
   FORCE FIXED NAVBAR (SCROLL-CONTAINER SAFE)
===================================== */
#mainNavbar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}



.count{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 40px;
  font-weight: bold;
}
/* .counter-wrapper{
  background: #333;
  background: url("../img/counterimage.jpg") no-repeat center center;
    background-size: cover;
  position: relative;
} */
.counter-wrapper:after{
  content: '';
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background: rgba(0,0,0,.5);
}
.counter-inner{
  position:relative;
  z-index:2;
}
.count-icon{
  font-size: 48px;
}


.section-head h4 {
  position: relative;
  padding:0;
  color:#f08225;
  line-height: 1;
  letter-spacing:0.3px;
  font-size: 34px;
  font-weight: 700;  
  text-align:center;
  text-transform:none;
  margin-bottom:30px;
}
.section-head h4:before {
  content: '';
  width: 60px;
  height: 3px;
  background: #f08225;
  position: absolute;
  left: 0px;
  bottom: -10px;
  right:0;  
  margin:0 auto;
}
.section-head h4 span {
  font-weight: 700;
  padding-bottom: 5px;
  color:#018995
}
p.service_text{
  color:#cccccc !important;
  font-size:16px;
  line-height:28px;
  text-align:center;    
}
.section-head p, p.awesome_line{
  color:#818181;
  font-size:16px;
  line-height:28px;
  text-align:center;  
  text-align: justify;
}

.extra-text {
    font-size:34px;
    font-weight: 700;
    color:#2f2f2f;
    margin-bottom: 25px;
    position:relative;
    text-transform: none;
}
.extra-text::before {
    content: '';
    width: 60px;
    height: 3px;
    background: #f08225;
    position: absolute;
    left: 0px;
    bottom: -10px;
    right: 0;
    margin: 0 auto;
}
.extra-text span {
    font-weight: 700;
    color:#f08225;
}
.item {
    background: #fff;
    text-align: center;
    padding: 30px 25px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 12px 40px rgba(0, 0, 0, 0.10);
    border-radius: 20px;
    border:5px solid rgba(0, 0, 0, 0.07);
    margin-bottom: 30px;
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item:hover{
    background:#f08225;
    box-shadow:0 8px 20px 0px rgba(0, 0, 0, 0.2);
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item:hover .item, .item:hover span.icon{
    background:#fff;
    border-radius:10px;
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item:hover h6, .item:hover p{
    color:#fff;
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item .icon {
    font-size: 40px;
    margin-bottom:25px;
    color: #f08225;   
    width: 90px;
    height: 90px;
    line-height: 96px;
    border-radius: 50px;
}
.item .feature_box_col_one{
    background:white;
    color:#f08225
}
.item .feature_box_col_two{
    background:white;
    color:#f08225
}
.item .feature_box_col_three{
    background:white;
    color:#f08225
}

.item p{
    font-size:15px;
    line-height:26px;
}
.item h6 {
    margin-bottom:20px;
    color:#2f2f2f;
}
.mission p {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 28px;
    font-weight: 500;
}
.mission i {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #f08225;
    border-radius: 50%;
    color: #fff;
    font-size: 25px;
}
.mission .small-text {
    margin-left: 10px;
    font-size: 13px;
    color: #666;
}
.skills {
    padding-top:0px;
}
.skills .prog-item {
    margin-bottom: 25px;
}
.skills .prog-item:last-child {
    margin-bottom: 0;
}
.skills .prog-item p {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 10px;
}
.skills .prog-item .skills-progress {
    width: 100%;
    height: 10px;
    background: #e0e0e0;
    border-radius:20px;
    position: relative;
}
.skills .prog-item .skills-progress span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #f08225;
    width: 10%;
    border-radius: 10px;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.skills .prog-item .skills-progress span:after {
    content: attr(data-value);
    position: absolute;
    top: -5px;
    right: 0;
    font-size: 10px;
    font-weight:600;    
    color: #fff;
    background:rgba(0, 0, 0, 0.9);
    padding: 3px 7px;
    border-radius: 30px;
}

.animated-bg {
    position: relative;
    /* min-height: 100vh; */
    background: #018995;
    overflow: hidden;
}

/* animation layers */
.particles,
.geometric-background,
.gradient-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.particles { z-index: 0; }
.geometric-background { z-index: 1; }
.gradient-overlay {
    z-index: 2;
    background: radial-gradient(circle, transparent 0%, #05646d 75%);
}

/* content */
.content-layer {
    position: relative;
    z-index: 10;
}

/* .shape {
    position: absolute;
    opacity: 0.25;
} */

.shape {
    position: absolute;
    will-change: transform;
    pointer-events: none;
}


.medical-item {
    position: absolute;
    font-size: 42px;
    opacity: 0.18;
    color: #4cc9f0;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 0 10px rgba(76,201,240,0.2));
}

/* different sizes for depth */
.medical-item.small { font-size: 26px; opacity: 0.12; }
.medical-item.medium { font-size: 40px; opacity: 0.18; }
.medical-item.large { font-size: 56px; opacity: 0.22; }



.bi-heart-pulse {
    animation: heartbeat 2s infinite ease-in-out;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.bg-footer{
    background-color:#03454b;
}

body, html {
    position: relative;
    overflow-y: auto !important;
}
.whatsapp-button,
.floating-call-wrap {
    pointer-events: auto;
}