/* ==========================================
   Melbourne Oral Medicine - Public Site Modern Theme
   Brand Alignment: Deep Navy (#0c0b5e) & Sky Cyan (#29a9e1)
   ========================================== */

:root {
    --mom-primary: #0c0b5e;
    --mom-primary-dark: #070638;
    --mom-primary-light: #181682;
    --mom-accent: #29a9e1;
    --mom-accent-hover: #1b8ebd;
    --mom-sky-light: #f0f9ff;
    --mom-dark: #0f172a;
    --mom-gray: #64748b;
    --mom-light-gray: #f8fafc;
    --mom-border: #e2e8f0;
    --mom-card-bg: #ffffff;
    --mom-radius-sm: 8px;
    --mom-radius-md: 14px;
    --mom-radius-lg: 20px;
    --mom-shadow-sm: 0 4px 12px rgba(12, 11, 94, 0.05);
    --mom-shadow-md: 0 10px 25px rgba(12, 11, 94, 0.08);
    --mom-shadow-lg: 0 20px 40px rgba(12, 11, 94, 0.12);
    --mom-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Modern Typography Tokens */
    --mom-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --mom-font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;

    /* Spacing System Tokens */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 1rem;      /* 16px */
    --space-md: 1.5rem;    /* 24px */
    --space-lg: 2.5rem;    /* 40px */
    --space-xl: 4rem;      /* 64px */
    --space-2xl: 5.5rem;   /* 88px */
    --section-py: clamp(3.5rem, 5.5vw, 5.5rem);
}

body {
    font-family: var(--mom-font-body) !important;
    color: #334155;
    background-color: #ffffff;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.title h1, .title h2, .title h3,
.about-title, .section-title {
    font-family: var(--mom-font-heading) !important;
    letter-spacing: -0.015em;
}

/* Header & Sticky Navbar */
nav.navbar {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: var(--mom-shadow-sm) !important;
    padding: 12px 0 !important;
    transition: var(--mom-transition) !important;
}

nav.navbar .navbar-brand img {
    padding:0;
    height: 60px !important;
    width: auto !important;
    object-fit: contain !important;
    transition: var(--mom-transition);
}

nav.navbar .navbar-nav .nav-link {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 8px 16px !important;
    border-radius: var(--mom-radius-sm) !important;
    transition: var(--mom-transition) !important;
    position: relative;
}

nav.navbar .navbar-nav .nav-link:hover,
nav.navbar .navbar-nav .nav-link.active {
    color: var(--mom-accent) !important;
    background-color: rgba(41, 169, 225, 0.08) !important;
}

/* Navbar Dropdown Menu Styling */
nav.navbar .dropdown-menu {
    border: 1px solid var(--mom-border) !important;
    border-radius: var(--mom-radius-md) !important;
    box-shadow: 0 12px 32px rgba(12, 11, 94, 0.14) !important;
    background: #ffffff !important;
    padding: 10px !important;
    margin-top: 10px !important;
    min-width: 250px !important;
    animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

nav.navbar .dropdown-menu .dropdown-item {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
    border-radius: var(--mom-radius-sm) !important;
    transition: var(--mom-transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
}

nav.navbar .dropdown-menu .dropdown-item:last-child {
    margin-bottom: 0 !important;
}

nav.navbar .dropdown-menu .dropdown-item:hover,
nav.navbar .dropdown-menu .dropdown-item:focus {
    background-color: rgba(41, 169, 225, 0.1) !important;
    color: var(--mom-accent) !important;
    transform: translateX(4px) !important;
}

nav.navbar .dropdown-menu .dropdown-item::after {
    content: '→';
    opacity: 0;
    transform: translateX(-6px);
    transition: var(--mom-transition);
    font-weight: bold;
    color: var(--mom-accent);
}

nav.navbar .dropdown-menu .dropdown-item:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Appointment CTA Button */
.btn-primary.git-qoute,
.btn-primary.git-qoute:visited {
    background: linear-gradient(135deg, var(--mom-accent) 0%, #1b8ebd 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 14px rgba(41, 169, 225, 0.35) !important;
    transition: var(--mom-transition) !important;
}

.btn-primary.git-qoute:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(41, 169, 225, 0.45) !important;
    background: linear-gradient(135deg, #32b5ee 0%, var(--mom-accent) 100%) !important;
}

/* Landing / Hero Section */
section.landing {
    position: relative !important;
    min-height: 82vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding: 130px 0 100px 0 !important;
}

section.landing::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(12, 24, 68, 0.75) 0%, rgba(10, 18, 52, 0.85) 100%) !important;
    z-index: 1 !important;
}

section.landing .container {
    position: relative !important;
    z-index: 2 !important;
}

section.landing .text {
    max-width: 960px !important;
    margin: 0 auto !important;
}

section.landing .text h1 {
    font-family: var(--mom-font-heading) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 3.5rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 22px !important;
}

section.landing .text p.p-one,
section.landing .text p.lead {
    font-family: var(--mom-font-body) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    max-width: 820px !important;
    margin: 0 auto 32px auto !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

section.landing .hero-connect-btn,
section.landing .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
    padding: 14px 42px !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 30px rgba(25, 118, 210, 0.45), 0 0 15px rgba(30, 136, 229, 0.3) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

section.landing .hero-connect-btn:hover,
section.landing .btn-primary:hover {
    transform: translateY(-3px) scale(1.02) !important;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%) !important;
    box-shadow: 0 14px 35px rgba(25, 118, 210, 0.6), 0 0 25px rgba(33, 150, 243, 0.4) !important;
    color: #ffffff !important;
}

/* Services Section (Spacious Luxury Medical Cards) */
section.our-serveses {
    padding: var(--section-py) 0 !important;
    background-color: #ffffff !important;
}

section.our-serveses .title p.p-one {
    color: #29a9e1 !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
}

section.our-serveses .title h2,
section.our-serveses .title h3,
section.our-serveses .title h1 {
    color: #0c0b5e !important;
    font-weight: 800 !important;
    font-size: 2.3rem !important;
    margin-bottom: 12px !important;
}

section.our-serveses .service-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(12, 11, 94, 0.05) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

section.our-serveses .service-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(12, 11, 94, 0.12), 0 0 20px rgba(41, 169, 225, 0.18) !important;
    border-color: rgba(41, 169, 225, 0.4) !important;
}

section.our-serveses .service-img-wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    overflow: hidden !important;
    background: #f8fafc !important;
}

section.our-serveses .service-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

section.our-serveses .service-card:hover .service-img-wrapper img {
    transform: scale(1.08) !important;
}

section.our-serveses .service-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    background: rgba(12, 11, 94, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

section.our-serveses .card-body {
    padding: 24px 20px 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
}

section.our-serveses .card-body h3 {
    color: #0c0b5e !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    transition: color 0.3s ease !important;
}

section.our-serveses .service-card:hover .card-body h3 {
    color: #29a9e1 !important;
}

section.our-serveses .service-action-link {
    color: #29a9e1 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease !important;
}

section.our-serveses .service-card:hover .service-action-link {
    transform: translateX(4px) !important;
}

/* FeedBack / Patient Reviews Carousel Section */
section.feed-back {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--section-py) 0 !important;
    background-color: #f4f8fc !important;
    border-top: 1px solid #eef4f9 !important;
    border-bottom: 1px solid #eef4f9 !important;
    position: relative !important;
}

section.feed-back .title p.p-one {
    color: #29a9e1 !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
}

section.feed-back .title h2,
section.feed-back .title h3 {
    color: #0c0b5e !important;
    font-weight: 800 !important;
    font-size: 2.3rem !important;
    margin-bottom: 45px !important;
}

section.feed-back .carousel {
    max-width: 900px !important;
    margin: 0 auto !important;
    position: relative !important;
    padding: 0 50px !important;
}

section.feed-back .carousel-inner {
    padding: 10px 0 35px 0 !important;
}

section.feed-back .carousel-inner .card {
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid #29a9e1 !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(12, 11, 94, 0.08) !important;
    padding: 40px 45px 35px 45px !important;
    background: #ffffff !important;
    max-width: 780px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
}

section.feed-back .quote-watermark {
    position: absolute !important;
    top: 20px !important;
    right: 28px !important;
    font-size: 2.5rem !important;
    color: rgba(41, 169, 225, 0.2) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

section.feed-back .user-avatar-wrapper,
section.feed-back .card .image {
    width: 72px !important;
    height: 72px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    border: 3px solid #29a9e1 !important;
    box-shadow: 0 6px 20px rgba(41, 169, 225, 0.25) !important;
    padding: 2px !important;
    background: #ffffff !important;
    margin: 0 auto 12px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

section.feed-back .user-avatar-wrapper img,
section.feed-back .card .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

section.feed-back .stars-rate {
    margin: 10px 0 16px 0 !important;
}

section.feed-back .stars-rate i,
section.feed-back i.fa-star {
    color: #ffb800 !important;
    font-size: 22px !important;
    margin: 0 3px !important;
    filter: drop-shadow(0 2px 5px rgba(255, 184, 0, 0.4)) !important;
}

section.feed-back .card-body {
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

section.feed-back .card-body h4 {
    color: #0c0b5e !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    margin: 6px 0 2px 0 !important;
}

section.feed-back .card-body p,
section.feed-back .card-body .feedback-msg {
    color: #334155 !important;
    font-size: 1.12rem !important;
    font-style: italic !important;
    line-height: 1.75 !important;
    max-width: 640px !important;
    margin: 0 auto !important;
}

/* Carousel Control Arrows */
section.feed-back .carousel-control-prev,
section.feed-back .carousel-control-next {
    width: 48px !important;
    height: 48px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 6px 20px rgba(12, 11, 94, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 5 !important;
}

section.feed-back .carousel-control-prev {
    left: -5px !important;
}

section.feed-back .carousel-control-next {
    right: -5px !important;
}

section.feed-back .carousel-control-prev:hover,
section.feed-back .carousel-control-next:hover {
    background: #29a9e1 !important;
    border-color: #29a9e1 !important;
    box-shadow: 0 8px 22px rgba(41, 169, 225, 0.45) !important;
    transform: translateY(-50%) scale(1.08) !important;
}

section.feed-back .carousel-control-prev-icon,
section.feed-back .carousel-control-next-icon {
    filter: invert(33%) sepia(85%) saturate(1800%) hue-rotate(170deg) brightness(95%) contrast(90%) !important;
    width: 20px !important;
    height: 20px !important;
    transition: filter 0.3s ease !important;
}

section.feed-back .carousel-control-prev:hover .carousel-control-prev-icon,
section.feed-back .carousel-control-next:hover .carousel-control-next-icon {
    filter: brightness(0) invert(1) !important;
}

/* Carousel Indicators Dots */
section.feed-back .carousel-indicators {
    bottom: -10px !important;
    margin-bottom: 0 !important;
}

section.feed-back .carousel-indicators [data-bs-target] {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #cbd5e1 !important;
    border: none !important;
    opacity: 0.7 !important;
    transition: all 0.3s ease !important;
}

section.feed-back .carousel-indicators .active {
    width: 28px !important;
    border-radius: 12px !important;
    background-color: #29a9e1 !important;
    opacity: 1 !important;
}

/* Give Feedback Button */
.give-feedback-btn {
    background: linear-gradient(135deg, #29a9e1 0%, #1b8ebd 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 12px 32px !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 20px rgba(41, 169, 225, 0.35) !important;
    border: none !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.give-feedback-btn:hover {
    background: linear-gradient(135deg, #32b5ee 0%, #29a9e1 100%) !important;
    box-shadow: 0 10px 25px rgba(41, 169, 225, 0.5) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* Appointment Form Section */
section.form-section {
    padding: var(--section-py) 0 !important;
    background-color: #ffffff !important;
}

section.form-section .title h2 {
    color: var(--mom-primary) !important;
    font-weight: 800 !important;
}

section.form-section .title h2 span {
    color: var(--mom-accent) !important;
}

section.form-section .card {
    border: 1px solid var(--mom-border) !important;
    border-radius: var(--mom-radius-lg) !important;
    box-shadow: var(--mom-shadow-md) !important;
    background: #ffffff !important;
    padding: 20px !important;
}

section.form-section .form-label {
    font-weight: 600 !important;
    color: var(--mom-primary) !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
}

section.form-section .form-control {
    border: 1px solid var(--mom-border) !important;
    border-radius: var(--mom-radius-sm) !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    transition: var(--mom-transition) !important;
}

section.form-section .form-icon-input .form-control {
    padding-left: 48px !important;
}

section.form-section .form-control:focus {
    border-color: var(--mom-accent) !important;
    box-shadow: 0 0 0 4px rgba(41, 169, 225, 0.15) !important;
    outline: none !important;
}

section.form-section .btn-primary {
    background: linear-gradient(135deg, var(--mom-primary) 0%, var(--mom-primary-dark) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 12px 40px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 14px rgba(12, 11, 94, 0.25) !important;
    transition: var(--mom-transition) !important;
}

section.form-section .btn-primary:hover {
    background: linear-gradient(135deg, var(--mom-accent) 0%, var(--mom-accent-hover) 100%) !important;
    box-shadow: 0 8px 20px rgba(41, 169, 225, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* Footer Section */
footer,
footer.main-footer {
    position: relative !important;
    background: linear-gradient(180deg, #070e24 0%, #0c1536 100%) !important;
    color: #ffffff !important;
    padding: 85px 0 45px 0 !important;
    border-top: 4px solid #29a9e1 !important;
    overflow: hidden;
}

footer::before,
footer.main-footer::before {
    display: none !important;
}

footer .container {
    position: relative !important;
    z-index: 2 !important;
}

footer h3,
footer h4,
footer h5,
footer .h5,
footer p,
footer span {
    color: #ffffff !important;
}

footer .social-links a i {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    transition: var(--mom-transition) !important;
}

footer .social-links a:hover i {
    background: var(--mom-accent) !important;
    transform: translateY(-3px) !important;
}

footer .links a {
    color: #cbd5e1 !important;
    transition: var(--mom-transition) !important;
}

footer .links a:hover {
    color: var(--mom-accent) !important;
    transform: translateX(4px) !important;
}

footer .contacts a {
    color: #cbd5e1 !important;
    transition: var(--mom-transition) !important;
}

footer .contacts a:hover {
    color: var(--mom-accent) !important;
}

footer .contacts i {
    color: var(--mom-accent) !important;
}

/* Subpages Section Banner */
.page-title-banner {
    position: relative !important;
    background: linear-gradient(135deg, var(--mom-primary) 0%, var(--mom-primary-dark) 100%) !important;
    padding: 70px 0 !important;
    color: #ffffff !important;
    margin-bottom: 50px !important;
    border-bottom: 4px solid var(--mom-accent) !important;
}

.page-title-banner h1,
.page-title-banner h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* Scroll Top Button */
.scroll-top {
    background: var(--mom-accent) !important;
    border: none !important;
    color: #ffffff !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(41, 169, 225, 0.4) !important;
    transition: var(--mom-transition) !important;
}

.scroll-top:hover {
    background: var(--mom-primary) !important;
    transform: translateY(-3px) !important;
}

/* Gallery Section Cards */
.gallery-card {
    border: 1px solid var(--mom-border) !important;
    border-radius: var(--mom-radius-md) !important;
    background: #ffffff !important;
    box-shadow: var(--mom-shadow-sm) !important;
    transition: var(--mom-transition) !important;
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.gallery-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--mom-shadow-lg) !important;
    border-color: rgba(41, 169, 225, 0.4) !important;
}

.gallery-card .gallery-img-wrapper {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 4 / 3 !important;
    background: #f1f5f9 !important;
}

.gallery-card .gallery-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.gallery-card:hover .gallery-img-wrapper img {
    transform: scale(1.08) !important;
}

.gallery-card .gallery-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(12, 11, 94, 0.2) 0%, rgba(12, 11, 94, 0.65) 100%) !important;
    opacity: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--mom-transition) !important;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1 !important;
}

.gallery-card .gallery-overlay .zoom-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: var(--mom-accent) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    box-shadow: 0 4px 12px rgba(41, 169, 225, 0.4) !important;
    transform: scale(0.8) !important;
    transition: var(--mom-transition) !important;
}

.gallery-card:hover .gallery-overlay .zoom-btn {
    transform: scale(1) !important;
}

.gallery-card .card-body {
    padding: 16px 20px !important;
    background: #ffffff !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.gallery-card .card-title {
    color: var(--mom-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    transition: var(--mom-transition) !important;
}

.gallery-card:hover .card-title {
    color: var(--mom-accent) !important;
}

.gallery-card .card-desc {
    color: var(--mom-gray) !important;
    font-size: 0.88rem !important;
    margin-bottom: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ==========================================
   Astonishing Luxury Upgrades (UI/UX)
   ========================================== */

/* 1. Floating Trust Features Bar */
.trust-features-wrapper {
    position: relative;
    z-index: 10;
    margin-top: -50px;
    margin-bottom: 0;
}

.trust-card {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(41, 169, 225, 0.25) !important;
    border-radius: 18px !important;
    padding: 22px 16px !important;
    box-shadow: 0 14px 35px rgba(12, 11, 94, 0.08), 0 0 15px rgba(41, 169, 225, 0.06) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100% !important;
}

.trust-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 45px rgba(12, 11, 94, 0.14), 0 0 20px rgba(41, 169, 225, 0.2) !important;
    border-color: #29a9e1 !important;
}

.trust-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #29a9e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 12px auto;
    transition: all 0.3s ease;
}

.trust-card:hover .trust-icon-box {
    background: linear-gradient(135deg, #29a9e1 0%, #1b8ebd 100%);
    color: #ffffff;
    transform: scale(1.1);
}

.trust-card h5 {
    color: #0c0b5e !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin-bottom: 4px !important;
}

.trust-card p {
    color: #64748b !important;
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
}

/* 2. About Us Section Improvements */
.about-us-section {
    position: relative;
    background-color: #ffffff !important;
    padding: var(--section-py) 0 !important;
}

.about-img-box .main-about-img {
    border: 4px solid #ffffff;
    box-shadow: 0 20px 45px rgba(12, 11, 94, 0.12) !important;
    max-height: 480px !important;
    width: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 4 / 3 !important;
}

.secondary-about-img-wrapper {
    position: absolute;
    bottom: -30px;
    right: -20px;
    width: 220px;
    border: 4px solid #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 35px rgba(12, 11, 94, 0.16) !important;
}

.secondary-about-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 4 / 3 !important;
}

.experience-badge {
    position: absolute;
    top: -20px;
    left: -20px;
    background: linear-gradient(135deg, #0c0b5e 0%, #070638 100%);
    color: #ffffff;
    padding: 16px 22px;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(12, 11, 94, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid rgba(41, 169, 225, 0.3);
}

.experience-badge .exp-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: #29a9e1;
    line-height: 1;
}

.experience-badge .exp-text {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-tag {
    color: #29a9e1 !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
}

.about-title {
    color: #0c0b5e !important;
    font-weight: 800 !important;
    font-size: 2.2rem !important;
    line-height: 1.3 !important;
}

.about-feature-item {
    font-size: 0.98rem;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
}

.about-feature-item i {
    color: #29a9e1 !important;
    font-size: 1.1rem;
}

/* 3. Interactive Stats Counter Section (Light Soft & Translucent) */
.stats-counter-section {
    padding: var(--section-py) 0 !important;
    background: linear-gradient(135deg, rgba(240, 247, 255, 0.85) 0%, rgba(230, 242, 254, 0.95) 100%) !important;
    backdrop-filter: blur(12px) !important;
    position: relative !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(41, 169, 225, 0.15) !important;
    border-bottom: 1px solid rgba(41, 169, 225, 0.15) !important;
}

.stats-counter-section::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -10% !important;
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, rgba(41, 169, 225, 0.12) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.stat-card {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(41, 169, 225, 0.2) !important;
    border-radius: 20px !important;
    padding: 30px 22px !important;
    box-shadow: 0 10px 30px rgba(12, 11, 94, 0.05), 0 0 15px rgba(41, 169, 225, 0.04) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.stat-card:hover {
    transform: translateY(-6px) !important;
    background: #ffffff !important;
    border-color: #29a9e1 !important;
    box-shadow: 0 18px 40px rgba(12, 11, 94, 0.1), 0 0 20px rgba(41, 169, 225, 0.18) !important;
}

.stat-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    color: #29a9e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    margin: 0 auto 14px auto !important;
    transition: all 0.3s ease !important;
}

.stat-card:hover .stat-icon {
    background: linear-gradient(135deg, #29a9e1 0%, #1b8ebd 100%) !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

.stat-number {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    color: #0c0b5e !important;
    margin-bottom: 4px !important;
}

.stat-label {
    color: #475569 !important;
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
    font-weight: 600 !important;
}

/* 4. 2-Column Luxury Appointment Form */
.appointment-info-card {
    background: linear-gradient(135deg, #0c0b5e 0%, #0a1238 100%) !important;
    color: #ffffff !important;
    border-radius: 24px !important;
    padding: 40px 32px !important;
    box-shadow: 0 20px 45px rgba(12, 11, 94, 0.15) !important;
    height: 100% !important;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
}

.contact-info-item .info-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(41, 169, 225, 0.2);
    color: #29a9e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 16px;
    flex-shrink: 0;
}

.contact-info-item h6 {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    font-size: 1rem !important;
}

.contact-info-item p {
    color: #cbd5e1 !important;
    font-size: 0.92rem !important;
    margin-bottom: 0 !important;
}

.form-icon-input {
    position: relative;
}

.form-icon-input i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
    transition: color 0.3s ease;
}

.form-icon-input input,
.form-icon-input textarea,
.form-icon-input .form-control {
    padding-left: 48px !important;
}

.form-icon-input input:focus + i,
.form-icon-input textarea:focus + i {
    color: #29a9e1;
}

/* 5. Floating Quick Action Pill */
.floating-quick-pill {
    position: fixed;
    bottom: 25px;
    right: 88px !important;
    z-index: 998;
    background: rgba(12, 11, 94, 0.94);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(41, 169, 225, 0.3);
    padding: 6px 10px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    gap: 8px;
    transition: all 0.3s ease;
}

.pill-btn {
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none !important;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.pill-call {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
}

.pill-call:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff !important;
}

.pill-book {
    background: linear-gradient(135deg, #29a9e1 0%, #1b8ebd 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(41, 169, 225, 0.4);
}

.pill-book:hover {
    background: linear-gradient(135deg, #32b5ee 0%, #29a9e1 100%);
    transform: translateY(-2px);
    color: #ffffff !important;
}

/* ==========================================
   Inner Pages Global Luxury Upgrade (UI/UX)
   ========================================== */

/* Subpage Hero Photo Header */
section.photo {
    position: relative !important;
    /* Removed background !important to allow inline image to show */
    color: #ffffff !important;
    /*padding: 75px 0 !important;*/
    border-bottom: 4px solid #29a9e1 !important;
    overflow: hidden !important;
    /*min-height: 280px !important;*/
    display: flex !important;
    align-items: center !important;
    background-size: cover !important;
    background-position: to !important;
    background-attachment: fixed !important;
    height: 140px;
    padding: 0;
    background-size: 100% !important;
    background-repeat: no-repeat;
    
}

section.photo::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: linear-gradient(180deg, rgba(12, 11, 94, 0.70) 0%, rgba(7, 6, 56, 0.85) 100%) !important;
    z-index: 1 !important;
}

section.photo .container {
    position: relative !important;
    z-index: 2 !important;
}

section.photo h1 {
    font-family: var(--mom-font-heading) !important;
    font-size: 2.6rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}

section.photo p,
section.photo a {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

section.photo a:hover {
    color: #29a9e1 !important;
}

section.photo i {
    font-size: 0.75rem !important;
    margin: 0 8px !important;
    color: #29a9e1 !important;
}

/* Contact Us Page Cards Luxury Refinement */
section.contact-us {
    padding: 90px 0 !important;
    background-color: #ffffff !important;
}

section.contact-us h1,
section.contact-us h2,
section.contact-us h3 {
    color: #0c0b5e !important;
    font-weight: 800 !important;
    font-size: 2.2rem !important;
    margin-bottom: 16px !important;
}

section.contact-us .contact-item-box {
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.3s ease !important;
    margin-bottom: 16px !important;
    text-decoration: none !important;
}

section.contact-us .contact-item-box:hover {
    background: #ffffff !important;
    border-color: #29a9e1 !important;
    box-shadow: 0 10px 25px rgba(12, 11, 94, 0.08) !important;
    transform: translateY(-2px) !important;
}

section.contact-us .contact-item-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: #e0f2fe !important;
    color: #29a9e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

section.contact-us .contact-item-box:hover .contact-item-icon {
    background: #29a9e1 !important;
    color: #ffffff !important;
}

section.contact-us .contact-item-label {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #29a9e1 !important;
    margin-bottom: 2px !important;
}

section.contact-us .contact-item-value {
    color: #0c0b5e !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    margin: 0 !important;
}

section.contact-us .social-links a i {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #0c0b5e !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

section.contact-us .social-links a:hover i {
    background: #29a9e1 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(41, 169, 225, 0.4) !important;
}

section.contact-us .card.form-card {
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid #29a9e1 !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 45px rgba(12, 11, 94, 0.08) !important;
    padding: 35px 28px !important;
    background: #ffffff !important;
}

section.contact-us .form-card label {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    margin-bottom: 8px !important;
}

section.contact-us .form-card .form-control {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 12px 16px 12px 48px !important;
    font-size: 0.95rem !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    transition: all 0.3s ease !important;
}

section.contact-us .form-card .form-control:focus {
    border-color: #29a9e1 !important;
    box-shadow: 0 0 0 4px rgba(41, 169, 225, 0.15) !important;
    background: #ffffff !important;
    outline: none !important;
}

section.contact-us .form-card .btn-primary {
    background: linear-gradient(135deg, #0c0b5e 0%, #29a9e1 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 14px 28px !important;
    border-radius: 50px !important;
    width: 100% !important;
    box-shadow: 0 6px 20px rgba(41, 169, 225, 0.35) !important;
    transition: all 0.3s ease !important;
}

section.contact-us .form-card .btn-primary:hover {
    background: linear-gradient(135deg, #29a9e1 0%, #1b8ebd 100%) !important;
    box-shadow: 0 10px 25px rgba(41, 169, 225, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Full-Width Map Section */
section.map-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    display: block !important;
}

section.map-section iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 450px !important;
    display: block !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sticky Footer & Eliminate Any Post-Footer White Gap Completely */
html {
    min-height: 100vh !important;
    background-color: #ffffff !important;
}

body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

footer,
footer.main-footer {
    margin-top: auto !important;
    position: relative !important;
    background: linear-gradient(180deg, #070e24 0%, #0c1536 100%) !important;
    color: #ffffff !important;
    padding: 85px 0 45px 0 !important;
    border-top: 4px solid #29a9e1 !important;
    overflow: hidden !important;
}

#GOTOTOP,
.scroll-top {
    position: fixed !important;
    bottom: 25px !important;
    right: 25px !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #29a9e1 !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(41, 169, 225, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

#GOTOTOP:hover,
.scroll-top:hover {
    background: #0c0b5e !important;
    transform: translateY(-3px) !important;
}

/* ==========================================
   Vintage Royal Clinicians Section
   ========================================== */
section.our-workers {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    padding: var(--section-py) 0 !important;
    position: relative;
    overflow: hidden;
}

section.our-workers .title * {
    color: var(--mom-primary) !important;
    font-family: var(--mom-font-heading) !important;
}

.vintage-card {
    background: #ffffff !important;
    border: 1px solid var(--mom-border) !important;
    padding: 24px 20px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(12, 11, 94, 0.06) !important;
    position: relative !important;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease !important;
}

.vintage-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(12, 11, 94, 0.12) !important;
    border-color: rgba(41, 169, 225, 0.4) !important;
}

.vintage-border-inner,
.vintage-corner {
    display: none !important;
}

.vintage-card .image {
    position: relative;
    z-index: 3;
    margin-bottom: 18px;
    padding-top: 0;
}

.vintage-card .image img {
    border: 2px solid var(--mom-border) !important;
    outline: none !important;
    border-radius: 14px !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    object-fit: cover !important;
    box-shadow: 0 8px 24px rgba(12, 11, 94, 0.08) !important;
    transition: all 0.4s ease !important;
}

.vintage-card:hover .image img {
    border-color: var(--mom-accent) !important;
    transform: scale(1.02);
}

.vintage-card h4 {
    font-family: var(--mom-font-heading) !important;
    color: var(--mom-primary) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin: 10px 0 !important;
    position: relative;
    z-index: 3;
}

.vintage-social-btn {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fdfbf7 !important;
    border: 1px solid #d4af37 !important;
    color: #9d813b !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.15) !important;
    transition: all 0.3s ease !important;
    z-index: 3;
    position: relative;
    text-decoration: none !important;
}

.vintage-social-btn:hover {
    background: #d4af37 !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(212, 175, 55, 0.3) !important;
}