@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

/*
 * Global stylesheet for Dhaka Dental PC
 * Defines colours, spacing, typography and layouts for the home page.
 */

/* CSS Variables */
:root {
    /* Colour palette following brand guidelines: Dhaka (#112D43) and Dental PC (#5F93CC) */
    --color-primary: #112D43;      /* Dark blue used for headings and primary accents */
    --color-secondary: #5F93CC;    /* Lighter blue for highlights and buttons */
    --color-accent: #9DBEE3;       /* Soft blue accent for subtle highlights */
    --color-text: #0f172a;        /* Dark text for readability in light mode */
    --color-muted: #6a7d98;       /* Muted blue-gray for secondary text */
    --color-bg: #f4f8fd;          /* Off-white background for light mode */
    --color-light: #ffffff;       /* Pure white */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.1);
    --transition-fast: 0.3s ease;
    --transition-medium: 0.5s ease;
    --transition-slow: 0.8s ease;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
}

/* Dark theme overrides using CSS variables on body[data-theme="dark"] */
body[data-theme="dark"] {
    --color-primary: #5F93CC;      /* Primary colour becomes lighter blue on dark mode */
    --color-secondary: #7FA9D8;    /* Secondary colour light variant */
    --color-accent: #9DBEE3;       /* Accent remains similar */
    --color-bg: #0e2438;           /* Dark background */
    --color-light: #112D43;        /* Panel backgrounds in dark mode */
    --color-text: #e6eef7;         /* Light text for dark mode */
    --color-muted: #92a5c0;        /* Muted light text */
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }


body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Top bar */
.top-bar {
    background: var(--color-primary);
    color: var(--color-light);
    font-size: 0.85rem;
    padding: var(--space-xs) 0;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.top-bar a {
    color: var(--color-light);
}

/* Help desk icon using a dotted grid */
.help-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.4rem;
    position: relative;
}

.help-icon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 3px 3px;
    color: var(--color-accent);
}

/* Contact list inside top bar */
.contact-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}
.contact-item {
    display: flex;
    align-items: center;
    color: var(--color-light);
    font-size: 0.9rem;
    font-weight: 600;
}

.contact-item strong {
    color: rgba(255, 255, 255, 0.75);
    margin-right: 0.3rem;
}
.contact-item a {
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: none;
}
.contact-item i {
    margin-right: 0.3rem;
    color: var(--color-accent);
}

/* Main header and navigation */
.main-header {
    background: var(--color-light);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
}

.site-logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
}

.logo-bold {
    font-weight: 800;
    color: var(--color-secondary);
}

.primary-nav ul {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
}

.primary-nav a {
    font-weight: 600;
    color: var(--color-text);
    padding-bottom: var(--space-xs);
    position: relative;
    transition: color var(--transition-fast);
}

.primary-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--color-secondary);
    transition: width var(--transition-fast);
}

.primary-nav a:hover {
    color: var(--color-secondary);
}

.primary-nav a:hover::after {
    width: 100%;
}

/* Dropdown menu for services */
.primary-nav li.has-sub {
    position: relative;
}

.primary-nav li.has-sub .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-light);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    min-width: 300px;
    padding: var(--space-sm);
    z-index: 200;
}

.primary-nav li.has-sub .sub-menu li {
    padding: var(--space-sm) var(--space-md);
}

.primary-nav li.has-sub .sub-menu li a {
    color: var(--color-text);
    font-weight: 500;
    display: block;
}

.primary-nav li.has-sub .sub-menu li a:hover {
    color: var(--color-secondary);
}

.primary-nav li.has-sub:hover .sub-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    padding: var(--space-sm);
}

/* Active nav link styles */
.primary-nav a.active {
    color: var(--color-secondary);
}
.primary-nav a.active::after {
    width: 100%;
}

.nav-actions .btn {
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-light);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.nav-actions .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Mobile menu button */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--color-primary);
    cursor: pointer;
}

/* Hero section */
.hero {
    background: url('../images/hero-dental.jpg') no-repeat center/cover;
    min-height: 70vh;
    display: flex;
    align-items: center;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 32, 64, 0.55);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    color: var(--color-light);
}

/* Translucent overlay card inside hero for improved readability */
.hero-overlay {
    background: rgba(255, 255, 255, 0.6);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-lg);
    color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

/* Dark mode overlay adjustments */
body[data-theme="dark"] .hero-overlay {
    background: rgba(17, 45, 67, 0.85);
    color: var(--color-text);
}

.hero-subtitle {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 10px;
    color: #0f172a;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: var(--space-md);
    color: #e0e8f4;
}

.hero .btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    color: var(--color-light);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Why choose section */
.choose-section {
    padding: var(--space-xl) 0;
    background: var(--color-light);
}

.choose-section h2 {
    text-align: center;
    margin-bottom: var(--space-md);
}

.choose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
}

.choose-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.choose-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.choose-card i {
    font-size: 2rem;
    color: var(--color-secondary);
    margin-bottom: var(--space-sm);
}

.choose-card h3 {
    margin-bottom: var(--space-xs);
    color: var(--color-primary);
    font-size: 1.25rem;
}

.choose-card p {
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* Location slider (legacy; safe to keep) */
.location-slider {
    position: relative;
    overflow: hidden;
    margin: var(--space-xl) 0;
}

.location-track {
    display: flex;
    width: max-content;
    animation: scroll-left 25s linear infinite;
}

/* Latest news/blog section */
.latest-section {
    padding: var(--space-xl) 0;
    background: var(--color-bg);
}

.latest-section h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
    font-family: "Playfair Display", serif;
    font-weight: 700;
}

.latest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.latest-card {
    background: var(--color-light);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 94%, 90% 100%, 0 100%);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.latest-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.latest-card .date-badge {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    background: var(--color-primary);
    color: var(--color-light);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
}

.latest-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: #cbd9e6;
}

.latest-card-body {
    padding: var(--space-md);
}

.latest-card-body h3 {
    margin-bottom: var(--space-xs);
    color: var(--color-primary);
    font-size: 1.1rem;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.latest-card-body p {
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* Footer */
.site-footer {
    background: #02152f;
    color: var(--color-light);
    padding: var(--space-xl) 0 var(--space-md);
    margin-top: var(--space-xl);
    position: relative;
    overflow: hidden;
}

.site-footer::before,
.site-footer::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 60px;
    background: #02152f;
    z-index: -1;
}

.site-footer::before {
    top: -30px;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.site-footer::after {
    bottom: -30px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.footer-col h3 {
    margin-bottom: var(--space-sm);
    font-size: 1.25rem;
    color: var(--color-light);
}

.footer-col p,
.footer-col a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    line-height: 1.5;
}
.footer-col a { text-decoration: none; }
.footer-col ul li { margin-bottom: var(--space-xs); }
.footer-col ul li a:hover { color: var(--color-accent); }

.footer-social {
    margin-top: var(--space-md);
    display: flex;
    gap: var(--space-sm);
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-light);
    font-size: 1rem;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.footer-social a:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
}

.site-footer .footer-col p {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.site-footer .footer-col p i {
    background: var(--color-secondary);
    color: var(--color-light);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-top: 3px;
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-md);
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 1.4rem;
    cursor: pointer;
    margin-left: var(--space-sm);
    transition: color var(--transition-fast);
}
.theme-toggle:hover { color: var(--color-secondary); }

/* Responsive adjustments */
@media (max-width: 992px) {
    .primary-nav ul { gap: var(--space-md); }
    .location-card { width: 260px; }
    .hero h1 { font-size: 2.2rem; }
}

@media (max-width: 768px) {
    .top-bar-content {
        flex-direction: column;
        gap: var(--space-xs);
        text-align: center;
    }
    .nav-content { flex-wrap: wrap; }
    .primary-nav ul { display: none; }
    .primary-nav ul.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-light);
        box-shadow: var(--shadow-md);
        padding: var(--space-md);
        gap: var(--space-sm);
    }
    .mobile-menu-btn { display: block; }
    .location-track { animation-duration: 40s; }
}

@media (max-width: 576px) {
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: 0.95rem; }
    .location-card { width: 220px; }
}

/* Blog page styles */
.blog-page {
    padding: var(--space-xl) 0;
    background: var(--color-bg);
}

/* ------------------------------------------------------------------
   Locations Section (static grid)
   ------------------------------------------------------------------ */
.locations-section {
    padding: var(--space-xl) 0;
    background: var(--color-bg);
}

.locations-section h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
    font-size: 32px;
    font-weight: 700;
}

.location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
}

/* --- LOCATION CARD DESIGN (DOUBLE CUT + SMALLER HEIGHT) --- */
.locations-section .location-card,
.location-grid .location-card {
    background: var(--color-light);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;

    /* BOXY */
    border-radius: 0;

    /* DOUBLE CUT (top-left + bottom-right) */
    clip-path: polygon(0 6%, 6% 0, 100% 0, 100% 94%, 94% 100%, 0 100%);
}

/* Header */
.locations-section .location-header,
.location-grid .location-header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-light);
    padding: 0.9rem 1rem; /* slightly smaller */
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    border-radius: 0;
}

/* MAP (cut under 'view larger map' + smaller height) */
.location-map {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    clip-path: polygon(0 18%, 8% 0, 100% 0, 100% 100%, 0 100%);
}

.location-map iframe {
    width: 100%;
    height: 155px; /* smaller card height */
    border: 0;
    display: block;
}

.location-map .map-overlay-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    cursor: pointer;
}

/* Body (slightly smaller padding to reduce overall card height) */
.locations-section .location-body,
.location-grid .location-body {
    padding: 0.95rem 1rem; /* smaller */
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-grow: 1;
}

/* Keep your paragraph font unchanged */
.locations-section .location-body p,
.location-grid .location-body p {
    color: var(--color-muted);
    font-size: 0.92rem;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.locations-section .location-body .info,
.location-grid .location-body .info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text);
}

.locations-section .location-body .info i,
.location-grid .location-body .info i {
    color: var(--color-secondary);
    min-width: 16px;
    text-align: center;
}

/* Actions (reduce spacing to make card shorter) */
.location-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: auto;
    padding: 0 1rem 0.95rem; /* add controlled bottom padding */
}

.location-actions .btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.65rem; /* smaller */
    border-radius: 6px; /* mattress-style */
    font-weight: 600;
    font-size: 0.9rem;
    font-family: "Poppins", sans-serif;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.location-actions .btn:first-child {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    color: var(--color-light);
}

.location-actions .btn:last-child {
    background: var(--color-primary);
    color: var(--color-light);
}

.location-actions .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Hover: dark card + force ALL inner text white (your existing behavior) */
.locations-section .location-card:hover,
.location-grid .location-card:hover {
    background-color: #2C3E50;
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.locations-section .location-card:hover .location-header,
.locations-section .location-card:hover .location-body,
.locations-section .location-card:hover .location-body p,
.locations-section .location-card:hover .location-body .info,
.locations-section .location-card:hover .location-body .info i,
.locations-section .location-card:hover a,
.locations-section .location-card:hover span,
.locations-section .location-card:hover small,
.location-grid .location-card:hover .location-header,
.location-grid .location-card:hover .location-body,
.location-grid .location-card:hover .location-body p,
.location-grid .location-card:hover .location-body .info,
.location-grid .location-card:hover .location-body .info i,
.location-grid .location-card:hover a,
.location-grid .location-card:hover span,
.location-grid .location-card:hover small {
    color: #fff !important;
}

.locations-section .location-card:hover .location-actions .btn,
.location-grid .location-card:hover .location-actions .btn {
    background: #fff !important;
    color: #2C3E50 !important;
    border: 1px solid rgba(255,255,255,.35);
}

/* Highlighted Card Design (keep) */
.location-card.featured {
    background-color: #2C3E50;
    color: #ffffff;
}
.location-card.featured .location-header {
    background-color: #2C3E50;
}
.location-card.featured .btn {
    background-color: #ffffff;
    color: #2C3E50;
}

/* Blog list/cards (keep your existing content) */
.blog-page h1 {
    text-align: center;
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

#blogSearch {
    width: 100%;
    max-width: 400px;
    padding: var(--space-sm);
    border: 1px solid var(--color-muted);
    border-radius: var(--radius-md);
    margin: 0 auto var(--space-lg);
    display: block;
}

.blog-list article {
    margin-bottom: var(--space-lg);
}

.blog-card {
    background: var(--color-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.blog-card img {
    width: 240px;
    height: 160px;
    object-fit: cover;
    flex-shrink: 0;
}

.blog-content {
    flex: 1;
    padding: var(--space-md);
}
.blog-content h3 {
    margin-bottom: var(--space-xs);
    color: var(--color-primary);
    font-size: 1.3rem;
}
.blog-meta {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-bottom: var(--space-xs);
}
.blog-content p {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Generic page section styles for static pages like Facilities, Contact, Locations, Insurance */
.page-section {
    padding: var(--space-xl) 0;
    background: var(--color-bg);
}

.page-section h1 {
    text-align: center;
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.page-section p {
    font-size: 1rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.page-section ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--space-md);
}

.page-section li {
    margin-bottom: var(--space-sm);
    color: var(--color-muted);
}

/* Grid layout for facilities and other itemized lists */
.facility-grid, .location-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.facility-card, .location-detail {
    background: var(--color-light);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    clip-path: polygon(0 0, 100% 0, 100% 94%, 90% 100%, 0 100%);
}

.facility-card h2, .location-detail h2 {
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
    font-size: 1.25rem;
}

.facility-card p, .location-detail p {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Animation */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* HERO TEXT COLORS (force) */
.hero-overlay h1 {
    color: #254b72 !important;
}

.hero-overlay p {
    display: block !important;
    font-size: 1.05rem !important;
    color: #112D43 !important;
    margin-top: 12px !important;
    line-height: 1.6 !important;
}

/* HERO BUTTON */
.hero-overlay .btn {
    background: linear-gradient(135deg, #112D43, #2C3E50) !important;
    color: #fff !important;
}




/* 2) BLUE COPYRIGHT BAR: bottom-left + bottom-right cuts */
.footer-bottom{
  position: relative;
  overflow: hidden;
  background: #0b4fa2 !important;
  color: #ffffff;
  border-top: none;

  /* Adjust these 4 values to match EXACTLY */
  --bar-bl-x: 140px;
  --bar-bl-y: 55px;
  --bar-br-x: 140px;
  --bar-br-y: 55px;

  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--bar-br-y)),
    calc(100% - var(--bar-br-x)) 100%,
    var(--bar-bl-x) 100%,
    0 calc(100% - var(--bar-bl-y))
  );
}
/* =========================================================
   FOOTER DIAGONAL CUT (like Mattress Shop)
   Paste at END of style.css
========================================================= */

/* Main footer container */
.site-footer{
  position: relative;
  overflow: hidden;
  background: #000; /* or keep your #02152f if you want navy */
}

/* TOP-LEFT diagonal cut */
.site-footer::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;          /* prevents tiny gap line */
  width: 180px;      /* cut size */
  height: 120px;     /* cut size */
  background: var(--color-bg); /* same as page background */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 1;
  pointer-events:none;
}

/* keep footer content above the shape */
.site-footer > *{
  position: relative;
  z-index: 2;
}

/* ---------- Copyright bar (blue strip) --------- */
/* If you already have .footer-bottom, we style it like the blue bar */
.footer-bottom{
  position: relative;
  background: #0b4fa2; /* mattress blue-like */
  color: #fff;
  border-top: none;
  padding: 18px 0;
  overflow: hidden;
}

/* BOTTOM-LEFT diagonal cut on the blue bar */
.footer-bottom::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width: 140px;      /* cut size */
  height: 70px;      /* cut size */
  background: var(--color-bg); /* same as page background */
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events:none;
}

/* Optional: if your footer-bottom text looks slightly off-center */
.footer-bottom{
  text-align:center;
  font-size: 0.9rem;
}
/* =========================================================
   LOCATIONS SECTION: HEX/PATTERN BACKGROUND (like your SS)
   Paste at END of style.css
========================================================= */

.locations-section{
  position: relative;
  overflow: hidden;              /* keeps pattern inside section */
  background: #f4f8fd;           /* keep your base bg */
}

/* pattern layer */
.locations-section::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 0;

 /* =========================================================
   LOCATION SLIDER BACKGROUND (LEFT + RIGHT)
   No content / HTML changes
========================================================= */

.location-slider,
.locations-section{
  position: relative;
  overflow: hidden;
  background: var(--color-bg); /* keep existing bg */
}

/* RIGHT SIDE vector */
.location-slider::before,
.locations-section::before{
  content:"";
  position:absolute;
  top:0;
  right:-120px;                 /* push outside edge */
  width:520px;
  height:100%;
  pointer-events:none;
  z-index:0;

  background: url("../images/vector.png") no-repeat right center;
  background-size: contain;
  opacity:0.18;
}

/* LEFT SIDE vector */
.location-slider::after,
.locations-section::after{
  content:"";
  position:absolute;
  top:0;
  left:-120px;                  /* push outside edge */
  width:520px;
  height:100%;
  pointer-events:none;
  z-index:0;

  background: url("../images/vector.png") no-repeat left center;
  background-size: contain;
  opacity:0.18;
  transform: scaleX(-1);        /* mirror for symmetry */
}

/* Keep cards & text above background */
.location-slider *,
.locations-section *{
  position: relative;
  z-index: 1;
}
    background: url("../images/vector.png") repeat;
    background-size: 80px 80px;   /* adjust size as needed */
    opacity: 0.05;                 /* subtle effect */
    z-index: 0;
    }
    /* ===============================================
   LOCATION SLIDER BACKGROUND (LEFT + RIGHT)
   Only decorates the background, no content change
   Assumes the file is saved as assets/images/vector.png
=============================================== */

.location-slider {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

/* Right‑side vector overlay */
.location-slider::before {
  content: "";
  position: absolute;
  top: 0;
  right: -120px;               /* pull it slightly outside for overlap */
  width: 520px;                /* adjust width if needed */
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: url("../images/vector.png") no-repeat right center;
  background-size: contain;
  opacity: 0.18;               /* subtle effect */
}

/* Left‑side vector overlay (mirrored) */
.location-slider::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120px;                /* pull it slightly outside for overlap */
  width: 520px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: url("../images/vector.png") no-repeat left center;
  background-size: contain;
  opacity: 0.18;
  transform: scaleX(-1);       /* mirror the image horizontally */
}

/* Keep slider content above the background */
.location-slider > * {
  position: relative;
  z-index: 1;
}
/* Make vector overlays visible on a light background */
.location-slider::before,
.location-slider::after {
  /* raise opacity so the pattern isn’t too subtle */
  opacity: 0.4;

  /* invert the pale blue lines to a darker colour */
  filter: invert(0.6);
}

/* =========================================================
   FOOTER MOBILE OPTIMIZATION
   Paste at END of style.css
========================================================= */

@media (max-width: 768px){

  /* 1) Make footer layout stack nicely */
  .site-footer{
    padding: 48px 0 0;          /* more top padding */
    clip-path: none !important; /* disable big diagonal on mobile (stops overlap) */
  }

  .footer-top{
    grid-template-columns: 1fr !important; /* single column */
    gap: 22px !important;
  }

  .footer-col h3{
    font-size: 1.15rem;
    margin-bottom: 10px;
  }

  .footer-col p,
  .footer-col a{
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* 2) Social icons: keep them readable */
  .footer-social{
    margin-top: 14px;
    gap: 12px;
    flex-wrap: wrap;
  }

  .footer-social a{
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  /* 3) Contact info: prevent ugly line breaks */
  .site-footer .footer-col p{
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .site-footer .footer-col p i{
    flex: 0 0 26px;
    margin-top: 2px;
  }

  /* allow long emails/numbers to wrap cleanly */
  .site-footer .footer-col a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 4) Blue copyright bar: keep shape but avoid covering text */
  .footer-bottom{
    margin-top: 18px;
    padding: 16px 10px;
    clip-path: none !important; /* safest on small screens */
  }
}

/* Optional: if you STILL want a small diagonal on mobile (not required)
@media (max-width: 768px){
  .footer-bottom{
    clip-path: polygon(0 0, 100% 0, 100% 85%, 92% 100%, 8% 100%, 0 85%) !important;
  }
}
*/
/* =========================================================
   LOCATION SLIDER RESPONSIVE FIX (mobile + desktop)
   Paste at END of style.css
========================================================= */

/* Make slider behave like a responsive carousel */
.location-slider{
  overflow: hidden;
  padding: 0; /* keep clean */
}

.location-track{
  display: flex;
  gap: 18px;
  padding: 0 14px;
  width: 100%;
  will-change: transform;
}

/* Key: make each card responsive */
.location-track .location-card{
  flex: 0 0 clamp(260px, 82vw, 360px);  /* auto size */
  max-width: 360px;
}

/* Improve mobile: stop auto-scroll + allow swipe */
@media (max-width: 768px){
  .location-slider{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .location-track{
    animation: none !important;     /* stop auto scrolling */
    width: max-content;             /* let it scroll horizontally */
    padding-bottom: 6px;
  }

  .location-track .location-card{
    scroll-snap-align: center;
    flex-basis: 86vw;
    max-width: 420px;
  }
}
/* Hours section */
.hours-section { padding: var(--space-xl) 0; background: var(--color-light); }
.hours-section h2 { text-align:center; margin-bottom: var(--space-lg); color: var(--color-primary); }

.hours-card{
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
}

.hours-status{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
  margin-bottom: var(--space-md);
}

.hours-status .badge{
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}

.hours-status.open .badge{ background: rgba(46, 204, 113, 0.18); color: #1b7f43; }
.hours-status.closed .badge{ background: rgba(231, 76, 60, 0.18); color: #a12b20; }

.hours-status .note{ color: var(--color-muted); }

.hours-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.hours-item strong{ display:block; margin-bottom: 4px; color: var(--color-primary); }
.hours-item span{ display:block; color: var(--color-text); }

.hours-hint{ text-align:center; margin-top: 12px; color: var(--color-muted); }
.hours-hint a{ color: var(--color-secondary); font-weight: 700; }

/* Location title link */
.location-title-link{ color: inherit; text-decoration: none; }
.location-title-link:hover{ text-decoration: underline; }

/* Dark button helper */
.btn.btn-dark{ background: var(--color-primary) !important; color: var(--color-light) !important; }

@media (max-width: 768px){
  .hours-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   HERO Glass Status Card (Apple liquid glass style)
========================================================= */
.hero { position: relative; }
.hero .container { position: relative; }

/* Glass card placement (right side like your red box) */
.hero-glass-card{
  position: absolute;
  right: 6%;
  top: 52%;
  transform: translateY(-50%);
  width: 360px;
  padding: 18px 18px;

  /* Liquid glass look */
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 22px;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 18px 55px rgba(0,0,0,0.25);

  color: rgba(255,255,255,0.95);
}

/* Top row */
.glass-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.glass-title{
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
}

/* Open/Closed badge */
.glass-badge{
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.12);
}

.glass-badge.open{
  background: rgba(46, 204, 113, 0.22);
  border-color: rgba(46, 204, 113, 0.35);
}

.glass-badge.closed{
  background: rgba(231, 76, 60, 0.22);
  border-color: rgba(231, 76, 60, 0.35);
}

/* Today line */
.glass-line{
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}

.glass-label{
  opacity: 0.85;
  font-weight: 600;
}

.glass-value{
  font-weight: 800;
  letter-spacing: 0.2px;
}

.glass-sub{
  margin-top: 10px;
  opacity: 0.85;
  font-size: 0.92rem;
}

/* Mobile: put glass card below hero overlay (no overlap) */
@media (max-width: 768px){
  .hero-glass-card{
    position: static;
    transform: none;
    width: 100%;
    max-width: 520px;
    margin: 14px auto 0;
  }
}

/* =========================================================
   HERO LEFT CARD = Apple Liquid Glass
   Targets: .hero-content.hero-overlay (your text box)
========================================================= */

.hero { position: relative; }
.hero .container { position: relative; }
.hero-content.hero-overlay{
  position: relative;
  z-index: 2;

  /* size + spacing */
  max-width: 560px;
  padding: 34px 34px;

  /* liquid glass base */
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 22px !important;

  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);

  /* depth */
  box-shadow:
    0 22px 70px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.22);

  /* subtle motion */
  animation: heroGlassFloat 5.2s ease-in-out infinite;
  overflow: hidden; /* needed for sheen/liquid layers */
}

/* Typography inside glass */
.hero-content.hero-overlay h1{
  color: rgba(17,45,67,0.96) !important;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.hero-content.hero-overlay p{
  color: rgba(17,45,67,0.82) !important;
  margin-top: 10px;
}

/* Button inside glass (more “Apple-like”) */
.hero-content.hero-overlay .btn{
  margin-top: 18px;
  border-radius: 14px;
  padding: 12px 22px;
  background: rgba(17,45,67,0.92) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}

/* Moving glass sheen */
.hero-content.hero-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0) 60%);
  transform: translateX(-60%);
  opacity: .7;
  animation: heroGlassSheen 6.5s ease-in-out infinite;
  pointer-events:none;
}

/* Liquid glow at the bottom */
.hero-content.hero-overlay::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 26px;
  border-radius: 999px;

  background: radial-gradient(60% 120% at 50% 50%,
    rgba(95,147,204,0.38) 0%,
    rgba(157,190,227,0.22) 45%,
    rgba(255,255,255,0.10) 75%,
    rgba(255,255,255,0) 100%);
  filter: blur(5px);
  opacity: 0.85;

  animation: heroLiquidGlow 3.4s ease-in-out infinite;
  pointer-events:none;
}

/* Animations */
@keyframes heroGlassFloat{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

@keyframes heroLiquidGlow{
  0%,100% { transform: scaleX(1); opacity: .75; }
  50%     { transform: scaleX(1.06); opacity: .95; }
}

@keyframes heroGlassSheen{
  0%   { transform: translateX(-70%); opacity: .35; }
  45%  { transform: translateX(10%);  opacity: .85; }
  100% { transform: translateX(70%);  opacity: .35; }
}

/* Mobile: reduce padding so it looks clean */
@media (max-width: 768px){
  .hero-content.hero-overlay{
    padding: 22px 18px;
    border-radius: 18px !important;
    animation: none; /* optional on mobile */
  }
}
/* =========================================================
   FORCE WHITE TEXT INSIDE HERO GLASS CARD
========================================================= */

.hero-content.hero-overlay h1,
.hero-content.hero-overlay p,
.hero-content.hero-overlay a,
.hero-content.hero-overlay span,
.hero-content.hero-overlay small {
  color: rgba(255,255,255,0.95) !important;
}

/* Slight hierarchy */
.hero-content.hero-overlay h1{
  color: #ffffff !important;
}

.hero-content.hero-overlay p{
  color: rgba(255,255,255,0.85) !important;
}

/* Button text */
.hero-content.hero-overlay .btn{
  color: #ffffff !important;
}
/* =========================================================
   HERO VIDEO BACKGROUND (APPLE-STYLE GLASS)
========================================================= */

.hero-video{
  position: relative;
  min-height: 85vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Video itself */
.hero-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dark cinematic overlay */
.hero-video-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10,25,40,0.65),
    rgba(10,25,40,0.55)
  );
  z-index: 1;
}

/* Keep hero content above video */
.hero-video .container{
  position: relative;
  z-index: 2;
}

/* Glass card enhancement */
.hero-content.hero-overlay{
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(255,255,255,0.14);
  border-radius: 18px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.18);
  padding: 2.2rem 2.4rem;
}

/* Force white text */
.hero-content.hero-overlay h1{
  color:#fff;
}

.hero-content.hero-overlay p{
  color: rgba(255,255,255,0.88);
}

.hero-content.hero-overlay .btn{
  background: linear-gradient(135deg,#112D43,#2C3E50);
  color:#fff;
}


/* =========================================================
   NAV: keep Book Appointment visible, collapse links into kebab
========================================================= */

/* default: kebab hidden on desktop */
.kebab-menu-btn{
  display:none;
  background: transparent;
  border: 0;
  font-size: 1.35rem;
  color: var(--color-primary);
  cursor: pointer;
}

/* collapse earlier than 768 to prevent overlap */
@media (max-width: 1100px){
  /* show kebab */
  .kebab-menu-btn{
    display:block;
  }

  /* hide normal nav list by default */
  .primary-nav ul{
    display:none;
  }

  /* keep Book Appointment always visible */
  .nav-actions{
    margin-left: auto;
    display:flex;
    align-items:center;
    gap: 12px;
  }

  /* dropdown panel when open */
  .primary-nav ul.active{
    display:flex;
    flex-direction: column;
    position:absolute;
    top: 100%;
    right: 0;
    left: auto;
    width: 240px;
    background: var(--color-light);
    box-shadow: var(--shadow-md);
    border-radius: 14px;
    padding: 12px;
    gap: 10px;
    z-index: 2000;
  }

  .primary-nav ul.active a{
    padding: 10px 10px;
    border-radius: 10px;
  }

  .primary-nav ul.active a:hover{
    background: rgba(95,147,204,0.10);
  }
}
/* =========================================================
   MOBILE FULL-WIDTH FIX (removes right white gap)
========================================================= */
@media (max-width: 768px){

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

  /* your base container is 90% — on mobile it can look narrow */
  .container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* make sections fill */
  section{
    width: 100%;
  }
}
/* =========================================================
   LOCATIONS MOBILE LAYOUT FIX (center + full width)
========================================================= */
@media (max-width: 768px){

  .location-grid{
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  .locations-section .location-card{
    width: 100% !important;
    max-width: 520px;          /* keeps it nice on larger phones */
    margin: 0 auto !important;
  }

  /* Make header + map fill the card width */
  .locations-section .location-header,
  .locations-section .location-map,
  .locations-section .location-map iframe{
    width: 100% !important;
  }
}
/* =========================================================
   FOOTER MOBILE WIDTH FIX (no narrow black column)
========================================================= */
@media (max-width: 768px){

  .site-footer .container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-top{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .footer-col{
    width: 100% !important;
  }
}
/* =========================================================
   HERO MOBILE FIX (glass cards stack cleanly)
========================================================= */
@media (max-width: 768px){

  .hero-video .container{
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-content.hero-overlay,
  .hero-glass-card{
    width: 100% !important;
    max-width: 520px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* =========================================================
   Mega Dropdown (Dental Services)
   White background, 2 columns, 5 items each side
========================================================= */

.primary-nav li.has-sub.mega{
  position: relative;
}

/* base dropdown styling */
.primary-nav li.has-sub.mega .sub-menu.mega-menu{
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);

  width: min(900px, 94vw);
  background: #ffffff;
  border-radius: 14px;
  padding: 18px 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.12);
  border: 1px solid rgba(17,45,67,0.10);

  z-index: 9999;

  /* 2 columns */
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px 26px;
}

/* show on hover (desktop) */
.primary-nav li.has-sub.mega:hover .sub-menu.mega-menu{
  display: grid;
}

.primary-nav li.has-sub.mega .sub-menu.mega-menu li{
  padding: 0; /* override your old padding */
}

.primary-nav li.has-sub.mega .sub-menu.mega-menu a{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 12px;
  border-radius: 10px;

  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;

  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.primary-nav li.has-sub.mega .sub-menu.mega-menu a i{
  width: 18px;
  text-align: center;
  color: var(--color-secondary);
}

.primary-nav li.has-sub.mega .sub-menu.mega-menu a:hover{
  background: rgba(95,147,204,0.10);
  color: var(--color-primary);
  transform: translateX(2px);
}

/* Mobile: use your existing click-to-open menu column layout */
@media (max-width: 992px){
  .primary-nav li.has-sub.mega .sub-menu.mega-menu{
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border-radius: 12px;
    padding: 10px;
    grid-template-columns: 1fr; /* single column on mobile */
  }
}
/* =========================================================
   FIX: Mega menu should NOT stay open
========================================================= */

/* hidden by default */
.primary-nav li.has-sub.mega .sub-menu.mega-menu{
  display: none !important;
}

/* show on hover (desktop) */
@media (min-width: 993px){
  .primary-nav li.has-sub.mega:hover .sub-menu.mega-menu{
    display: grid !important;
  }
}

/* show when mobile toggles .open (from JS) */
@media (max-width: 992px){
  .primary-nav li.has-sub.mega.open .sub-menu.mega-menu{
    display: grid !important;
  }
}



/* =========================================================
   MOBILE/TABLET PATCH (PC unchanged)
   Paste at END of style.css
========================================================= */

/* ---------- NAV: logo + book + kebab spacing (tablet + mobile) ---------- */
@media (max-width: 1100px){

  /* keep header row stable */
  .nav-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:14px;
  }

  /* prevent logo wrapping / “DHaka Dental / PC” break */
  .site-logo{
    white-space:nowrap;
    line-height:1.1;
    flex:0 1 auto;
    max-width:58%;
  }

  /* keep actions together, add space between Book + kebab */
  .nav-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:12px;               /* ✅ Book + kebab distance */
    flex:0 0 auto;
  }

  /* your Book Appointment button (covers .btn or .book-btn) */
  .nav-actions .btn,
  .nav-actions .book-btn{
    white-space:nowrap;     /* ✅ no line break */
  }

  /* kebab button hit-area + spacing */
  #mobileMenuBtn,
  .kebab-menu-btn,
  .mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;      /* better tap target */
    border-radius:10px;
    margin-left:6px;
    flex:0 0 auto;
  }

  /* dropdown panel position: right aligned (not full width) */
  .primary-nav ul.active{
    right:0;
    left:auto;
    width:min(92vw, 320px);
    margin-top:8px;
  }
}

/* ---------- MOBILE: tighter typography so header never “stucks” ---------- */
@media (max-width: 768px){
  .nav-content{
    padding:12px 0;         /* keeps same design but prevents crowding */
    gap:12px;
  }

  .site-logo{
    font-size:1.35rem;      /* reduce only on mobile */
    max-width:62%;
  }

  /* if Book Appointment too big on mobile */
  .nav-actions .btn,
  .nav-actions .book-btn{
    padding:10px 14px;
    font-size:.88rem;
  }
}

/* ---------- FOOTER: mobile overlap fix (keeps PC exactly as-is) ---------- */
@media (max-width: 768px){

  /* remove the diagonal shape layers on mobile ONLY (they were covering h3) */
  .site-footer::before,
  .site-footer::after{
    display:none !important;
  }

  /* keep footer full width + clean spacing */
  .site-footer{
    padding:48px 0 0;
  }

  .site-footer .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:16px;
    padding-right:16px;
  }

  .footer-top{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  /* ensure headings/text always on top */
  .footer-col h3,
  .footer-col p,
  .footer-col a{
    position:relative;
    z-index:2;
  }

  /* copyright bar: stop clip-path so text never overlaps */
  .footer-bottom{
    clip-path:none !important;
    margin-top:18px;
    padding:16px 10px;
  }

  /* prevent ugly wrapping for long email/phone */
  .site-footer a{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}



/* =========================================================
   FIX: Header always sticky on scroll (red area)
   Paste at END of style.css
========================================================= */

/* 1) Header must be sticky */
.main-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 100%;
}

/* 2) Prevent sticky from breaking due to parent overflow */
html, body{
  overflow-x: hidden;
}

/* If any wrapper/main containers exist, keep overflow visible (sticky-safe) */
body, main, header{
  overflow: visible;
}

/* 3) Mobile Safari/Chrome: prevent weird jump */
@supports (-webkit-touch-callout: none){
  .main-header{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.hero-content.hero-overlay .btn:hover {
    background: linear-gradient(135deg, #3f7fc9, #5f9fe0) !important;
}
/* Hero Book Appointment button – BLUE */
.hero-content.hero-overlay .btn {
    background: linear-gradient(135deg, #4f8fd9, #78aee8) !important;
    color: #ffffff !important;
}



/* =========================================================
   GLOBAL FIX: Sub-menu scroll on mobile/tab (all pages)
   Works with your main.js ".open" class
========================================================= */
@media (max-width: 1100px){

  /* Submenu container inside kebab panel */
  .main-header .primary-nav li.has-sub > .sub-menu{
    position: static !important;
    transform: none !important;
    width: 100% !important;

    /* default closed */
    max-height: none !important;
    overflow: visible !important;

    box-shadow: none !important; /* optional: keeps it clean inside panel */
  }

  /* When JS adds .open: make it scroll */
  .main-header .primary-nav li.has-sub.open > .sub-menu{
    max-height: 260px !important;     /* adjust if you want taller */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Mega menu: keep readable in mobile */
  .main-header .primary-nav li.has-sub.open > .sub-menu.mega-menu{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}