/* ==========================================================================
   CREDIBLE HEALTHCARE — DENTAL & EYE CARE CLINIC
   MODERN DESIGN SYSTEM & STYLESHEET
   ========================================================================== */

:root {
    /* Brand Colors */
    --primary: #162a6b;          /* Authority Deep Navy */
    --primary-light: #1e3a8a;
    --primary-dark: #0f1c4d;
    --accent: #00b4d8;           /* Electric Medical Cyan / Aqua */
    --accent-dark: #0096c7;
    --accent-glow: rgba(0, 180, 216, 0.35);
    --royal-blue: #0077b6;
    --pop-red: #e63946;          /* Starburst Coral Red (Now Open/Urgent CTA) */
    --pop-green: #7fc540;        /* Sister Brand Fresh Synergy Green */
    
    /* Neutrals & Surfaces */
    --bg-main: #f8fafc;
    --bg-soft: #f0f8ff;
    --surface-white: #ffffff;
    --text-dark: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    
    /* Glassmorphism Tokens */
    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-shadow: 0 20px 40px -15px rgba(22, 42, 107, 0.1);
    --card-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    --card-shadow-hover: 0 20px 40px rgba(0, 180, 216, 0.18);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #162a6b 0%, #0077b6 60%, #00b4d8 100%);
    --gradient-accent: linear-gradient(135deg, #00b4d8 0%, #48cae4 100%);
    --gradient-badge: linear-gradient(135deg, #e63946 0%, #ff6b6b 100%);
    --gradient-hero-overlay: linear-gradient(135deg, rgba(22, 42, 107, 0.94) 0%, rgba(0, 119, 182, 0.82) 100%);
    
    /* Typography & Dimensions */
    --container-width: 1240px;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-full: 9999px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: var(--text-body);
    background-color: var(--bg-main);
    line-height: 1.65;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary);
    font-weight: 700;
    line-height: 1.25;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- TOP ANNOUNCEMENT / CONTACT BAR --- */
.topbar {
    background: var(--primary-dark);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.topbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.topbar-items {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.topbar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.topbar-item i {
    color: var(--accent);
    flex-shrink: 0;
}

/* Phone numbers: tap-friendly targets */
.topbar-item a {
    display: inline-block;
    padding: 2px 3px;
    text-decoration: none;
    white-space: nowrap;
}

.topbar-item a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.topbar-badge {
    background: var(--pop-red);
    color: #ffffff;
    padding: 3px 10px;
    border-radius: var(--border-radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    animation: pulseGlow 2s infinite;
}

/* --- Topbar: progressively drop the longest items as space shrinks.
       This stops the right-hand phone block from being pushed onto a
       second line while leaving empty space on the right. --- */
@media (max-width: 1240px) {
    .topbar { font-size: 0.74rem; }
    .topbar-items { gap: 12px; }
}

@media (max-width: 1100px) {
    /* Drop the full street address (it is on the Contact page and footer) */
    .topbar-address { display: none; }
}

@media (max-width: 900px) {
    /* Drop opening hours too - keep badge + tappable phone numbers */
    .topbar-hours { display: none; }
    .topbar-content { justify-content: center; }
}

@media (max-width: 768px) {
    .topbar {
        font-size: 0.72rem;
        padding: 6px 0;
    }
    .topbar-content {
        justify-content: center;
        gap: 6px;
    }
    .topbar-items {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .topbar-item {
        gap: 5px;
        white-space: normal;
    }
    .topbar-badge {
        font-size: 0.66rem;
        padding: 2px 8px;
    }
    /* Comfortable tap targets for call links */
    .topbar-item a {
        padding: 4px 6px;
        font-size: 0.74rem;
    }
}

@media (max-width: 480px) {
    .topbar { font-size: 0.7rem; }
    .topbar-badge { font-size: 0.62rem; letter-spacing: 0.3px; }
    /* Let the three numbers flow onto their own centred line */
    .topbar-phones .topbar-item {
        justify-content: center;
        flex-wrap: wrap;
        line-height: 1.9;
    }
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(230, 57, 70, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 12px rgba(230, 57, 70, 0.7); }
}

/* --- MAIN STICKY NAVBAR --- */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    transition: var(--transition);
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
height: 74px;
}

.logo-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-logo-img {
    height: 52px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #ffffff;
    padding: 2px;
    transition: transform var(--transition-fast);
}

.logo-brand:hover .brand-logo-img {
    transform: scale(1.05);
}

.logo-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--gradient-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: var(--card-shadow);
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.1;
}

.logo-subtitle {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-dark);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    margin-top: 2px;
    line-height: 1.1;
}

.logo-tagline {
    font-size: 0.60rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.5px;
    font-style: italic;
    white-space: nowrap;
    line-height: 1;
    margin-top: 2px;
}

.nav-links {
display: flex;
align-items: center;
gap: 20px;
margin: 0 auto;
flex-wrap: nowrap;
}

.nav-links a {
font-weight: 600;
font-size: 0.9rem;
color: var(--text-body);
position: relative;
padding: 6px 0;
white-space: nowrap;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--accent-dark);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: var(--transition);
}

.nav-links a:hover::after, .nav-links a.active::after {
    width: 100%;
}

.header-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}

.portal-link {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
font-weight: 600;
color: var(--primary);
padding: 7px 14px;
border-radius: var(--border-radius-full);
background: rgba(22, 42, 107, 0.06);
border: 1px solid rgba(22, 42, 107, 0.1);
white-space: nowrap;
}

/* Booking CTA must never wrap its label */
.header-actions .btn {
    white-space: nowrap;
    padding: 11px 20px;
    font-size: 0.88rem;
}

.portal-link:hover {
    background: var(--primary);
    color: #ffffff;
}

.mobile-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--primary);
    cursor: pointer;
}

/* --- BUTTONS & CTA TOKENS --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 28px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--border-radius-full);
    cursor: pointer;
    border: none;
    outline: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(22, 42, 107, 0.25);
}

.btn-primary:hover {
    box-shadow: 0 12px 28px rgba(0, 180, 216, 0.4);
    color: #ffffff;
}

.btn-accent {
    background: var(--gradient-accent);
    color: var(--primary-dark);
    box-shadow: 0 8px 20px var(--accent-glow);
}

.btn-accent:hover {
    box-shadow: 0 12px 28px rgba(0, 180, 216, 0.5);
}

.btn-danger {
    background: var(--gradient-badge);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.3);
}

.btn-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.btn-outline:hover {
    background: var(--primary);
    color: #ffffff;
}

.btn-outline-white {
    border: 2px solid #ffffff;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
}

.btn-outline-white:hover {
    background: #ffffff;
    color: var(--primary);
}

/* --- HERO SECTION --- */
.hero-section {
    position: relative;
    min-height: 650px;
    background: linear-gradient(135deg, #0b1736 0%, #162a6b 50%, #0077b6 100%);
    color: #ffffff;
    padding: 90px 0 100px;
    overflow: hidden;
}

.hero-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-shape-1 {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.3) 0%, rgba(0, 180, 216, 0) 70%);
}

.hero-shape-2 {
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 197, 64, 0.2) 0%, rgba(127, 197, 64, 0) 70%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 180, 216, 0.18);
    border: 1px solid rgba(0, 180, 216, 0.4);
    color: #90e0ef;
    padding: 6px 16px;
    border-radius: var(--border-radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero-title {
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 22px;
}

.hero-title span.text-cyan {
    background: linear-gradient(135deg, #00b4d8 0%, #90e0ef 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: #e2e8f0;
    line-height: 1.7;
    margin-bottom: 35px;
    max-width: 580px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero-badges-row {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 25px;
}

.hero-stat-item {
    display: flex;
    flex-direction: column;
}

.hero-stat-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: #00b4d8;
    font-family: 'Montserrat', sans-serif;
}

.hero-stat-lbl {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hero Quick Booking Card */
.hero-booking-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    padding: 35px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    color: var(--text-dark);
}

.hero-booking-card h3 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.hero-booking-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
    outline: none;
}

/* --- SECTION GENERAL STYLES --- */
.section {
    padding: 90px 0;
}

.section-soft {
    background: var(--bg-soft);
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}

.section-tag {
    display: inline-block;
    color: var(--accent-dark);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-title {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 16px;
}

.section-desc {
    font-size: 1.05rem;
    color: var(--text-muted);
}

/* --- WHY CHOOSE US CARDS --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.feature-card {
    background: #ffffff;
    border-radius: var(--border-radius-md);
    padding: 35px 25px;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-shadow-hover);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(0, 180, 216, 0.1);
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 22px;
    transition: var(--transition);
}

.feature-card:hover .feature-icon-box {
    background: var(--gradient-primary);
    color: #ffffff;
}

.feature-card h4 {
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* --- SERVICES GRID & TABS --- */
.services-nav-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 45px;
    flex-wrap: wrap;
}

.service-tab-btn {
    padding: 10px 24px;
    border-radius: var(--border-radius-full);
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-body);
    cursor: pointer;
    transition: var(--transition);
}

.service-tab-btn.active, .service-tab-btn:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    background: #ffffff;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-shadow-hover);
}

.service-card-body {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.service-badge {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: var(--border-radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.badge-dental {
    background: rgba(0, 180, 216, 0.15);
    color: var(--accent-dark);
}

.badge-eye {
    background: rgba(127, 197, 64, 0.15);
    color: #4d8b18;
}

.service-card h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.service-card p {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    flex-grow: 1;
}

.service-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.service-link:hover {
    color: var(--primary);
}

/* --- BANNER / CTA BREAK --- */
.cta-banner {
    background: var(--gradient-primary);
    color: #ffffff;
    border-radius: var(--border-radius-lg);
    padding: 60px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    box-shadow: 0 20px 40px rgba(22, 42, 107, 0.3);
}

.cta-banner h3 {
    font-size: 2.2rem;
    color: #ffffff;
    margin-bottom: 10px;
}

.cta-banner p {
    font-size: 1.1rem;
    color: #e0f2fe;
}

/* --- BLOG GRID --- */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

/* --- Blog page layout.
       These replace inline styles that used to sit in blog.php and were
       overriding the mobile media queries (sidebar never collapsed,
       cards stayed 2-up on phones). --- */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 45px;
    align-items: start;
}

/* Two-up feed (page has a sidebar, so 3 columns is too tight) */
.blog-grid-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blog-banner-title {
    font-size: clamp(1.7rem, 5.5vw, 2.8rem);
    margin-bottom: 12px;
    line-height: 1.2;
}

.blog-search-form {
    display: flex;
    gap: 12px;
    margin-bottom: 35px;
}

.blog-search-form .btn {
    padding: 0 25px;
    white-space: nowrap;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 45px;
}

.blog-pagination a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    background: #ffffff;
    color: var(--text-body);
    border: 1px solid var(--border-color);
}

.blog-pagination a.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* --- Single article page --- */
.blog-post-title {
    font-size: clamp(1.5rem, 5vw, 2.6rem);
    max-width: 850px;
    margin-bottom: 15px;
    line-height: 1.25;
}

.blog-article {
    background: #ffffff;
    padding: 45px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
}

.blog-featured-img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
}

/* Stop embedded media from overflowing on phones */
.article-body img,
.article-body video,
.article-body iframe {
    max-width: 100%;
    height: auto;
}
.article-body img { border-radius: 8px; }
.article-body table { display: block; overflow-x: auto; max-width: 100%; }
.article-body pre { overflow-x: auto; }
.article-body h2, .article-body h3 { line-height: 1.3; }
.article-body ul, .article-body ol { padding-left: 1.3rem; }

.blog-card {
    background: #ffffff;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-shadow-hover);
}

.blog-thumb {
    position: relative;
    height: 220px;
    background: var(--primary);
    overflow: hidden;
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-thumb img {
    transform: scale(1.06);
}

.blog-category-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-dark);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: var(--border-radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.blog-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.blog-content h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    line-height: 1.4;
}

.blog-content p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    flex-grow: 1;
}

/* --- FOOTER --- */
footer {
    background: #091226;
    color: #94a3b8;
    padding: 80px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 50px;
    margin-bottom: 60px;
}

.footer-col h4 {
    font-size: 1.15rem;
    color: #ffffff;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background: var(--accent);
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #94a3b8;
    font-size: 0.92rem;
}

.footer-links a:hover {
    color: var(--accent);
    padding-left: 6px;
}

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--accent);
    color: var(--primary-dark);
    transform: translateY(-3px);
}

.copyright {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: #25d366;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    transition: var(--transition);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    color: #ffffff;
}

/* --- RESPONSIVENESS --- */
@media (max-width: 1024px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    /* Blog: narrow the sidebar before it stacks */
    .blog-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }

    /* --- Switch to the hamburger menu HERE (was 768px).
          At 768px the six nav items plus both CTAs no longer fit, so the
          row squeezed and link text wrapped onto a second line. --- */
    .mobile-toggle { display: block; }
    .nav-links {
        display: none;
        position: absolute;
        top: 74px;
        left: 0;
        width: 100%;
        background: #ffffff;
        flex-direction: column;
        gap: 2px;
        padding: 18px 22px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        z-index: 1001;
        margin: 0;
    }
    .nav-links.active { display: flex; }
    .header-actions .portal-link { display: none; }

    /* Logo pinned left, CTA + menu toggle grouped at the right */
    nav { justify-content: flex-start; gap: 12px; }
    .logo-brand { margin-right: auto; }
    .header-actions { order: 2; }
    .mobile-toggle { order: 3; }
}

@media (max-width: 768px) {
    /* Menu already collapses at 1024px - here we just tighten the header */
    .logo-icon-box { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 9px; }
    .logo-brand { gap: 8px; }
    .logo-title { font-size: 1.05rem; }
    .logo-subtitle { font-size: 0.6rem; letter-spacing: 0.6px; }

    .header-actions { gap: 8px; }
    .header-actions .btn { padding: 9px 14px; font-size: 0.8rem; gap: 6px; }

    .hero-title { font-size: 2.5rem; }
    .services-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .cta-banner { flex-direction: column; text-align: center; }

    /* --- Blog page: stack the sidebar under the feed, single-column cards --- */
    .blog-layout { grid-template-columns: 1fr; gap: 35px; }
    .blog-grid-2col { grid-template-columns: 1fr; }
    .blog-search-form { flex-wrap: wrap; }
    .blog-search-form .form-control { flex: 1 1 100%; }
    .blog-search-form .btn { flex: 1 1 100%; padding: 12px 20px; }
    .blog-thumb { height: 190px; }
    .blog-content { padding: 20px; }
    .section { padding: 60px 0; }
    .blog-article { padding: 22px; }
    .blog-article .article-body { font-size: 1rem; }

    /* Scale down oversized inline banner headings.
       Inline styles beat stylesheet rules, so !important is required here. */
    h1[style*="font-size:2.8rem"],
    h1[style*="font-size:2.7rem"],
    h1[style*="font-size:2.6rem"],
    h1[style*="font-size:2.5rem"] {
        font-size: 1.85rem !important;
    }
}

/* --- SMALL PHONES (<=480px) --- */
@media (max-width: 480px) {
    /* Collapse the header CTA to an icon-only button so the row fits */
    .header-actions .btn .btn-label { display: none; }
    .header-actions .btn {
        padding: 10px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .logo-title { font-size: 1rem; }
    .logo-subtitle { font-size: 0.58rem; letter-spacing: 0.5px; }
    .logo-icon-box { width: 34px; height: 34px; font-size: 1rem; }

    /* Touch targets in the mobile menu */
    .nav-links { padding: 18px; gap: 4px; }
    .nav-links li a { display: block; padding: 8px 2px; }

    /* --- Blog page small phones --- */
    .blog-thumb { height: 170px; }
    .blog-content { padding: 18px; }
    .blog-pagination a { width: 40px; height: 40px; }
    .section { padding: 48px 0; }
    .blog-article { padding: 18px; }
    .blog-article .article-body { font-size: 0.97rem; }

    h1[style*="font-size:2.8rem"],
    h1[style*="font-size:2.7rem"],
    h1[style*="font-size:2.6rem"],
    h1[style*="font-size:2.5rem"] {
        font-size: 1.55rem !important;
    }
}

/* ======================================================================
   MOBILE RESPONSIVENESS PASS
   The dental theme had layout defined as INLINE styles on many pages,
   so most of it never collapsed on phones. These rules fix that in one
   place instead of editing a dozen files.
   ====================================================================== */

/* --- Tablet / small laptop: stack page-level split layouts --- */
@media (max-width: 992px) {
    .cta-banner { flex-direction: column; text-align: center; gap: 25px; }
    .section-title { font-size: 2.1rem; }
    .hero-title { font-size: 2.6rem; }
}

/* --- Phones --- */
@media (max-width: 768px) {

    /* 1. Collapse every inline two-column grid:
          form rows, page splits (1.2fr 0.8fr), detail rows.
          Inline styles beat stylesheet rules, so !important is required. */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* 2. iOS Safari auto-zooms when focusing inputs under 16px.
          .form-control is 0.95rem (15.2px) - bump it on touch devices. */
    .form-control,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* 3. Nothing may force horizontal scrolling */
    table { display: block; overflow-x: auto; max-width: 100%; }
    img, video, iframe, embed { max-width: 100%; height: auto; }
    pre, code { overflow-x: auto; }

    /* 4. Info rows: align the icon with the first line once text wraps */
    li[style*="display:flex"] { align-items: flex-start !important; }

    /* 5. Long words / emails shouldn't blow out the layout */
    p, span, a, li, h1, h2, h3, h4, td, th {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* 6. Comfortable tap targets */
    .btn { min-height: 44px; }
    .footer-links li { margin-bottom: 8px; }
    .footer-links a { display: inline-block; padding: 4px 0; }

    /* 7. Tighter section rhythm */
    .section { padding: 55px 0; }
    .cta-banner { padding: 35px 22px; }
}

/* --- Small phones --- */
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .section { padding: 44px 0; }
    .hero-title { font-size: 2rem; }
    .section-title { font-size: 1.75rem; }
    .cta-banner { padding: 28px 18px; border-radius: 14px; }
    .whatsapp-float { width: 52px; height: 52px; font-size: 1.5rem; }
}

/* --- Very small phones --- */
@media (max-width: 360px) {
    .container { padding: 0 12px; }
    .hero-title { font-size: 1.75rem; }
    .section-title { font-size: 1.6rem; }
}

/* --- CLINIC PHOTO SHOWCASE & IMAGE CARDS --- */
.clinic-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 28px;
    margin-top: 40px;
}

.photo-card {
    background: #ffffff;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.photo-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hover-shadow);
}

.photo-card-img-wrap {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.photo-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.photo-card:hover .photo-card-img-wrap img {
    transform: scale(1.06);
}

.photo-card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(22, 42, 107, 0.88);
    backdrop-filter: blur(8px);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: var(--border-radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.photo-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.photo-card-body h4 {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.photo-card-body p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Hero Visual Card */
.hero-visual-box {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.hero-visual-box img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.hero-visual-floating-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
}

/* Contact Page Layout */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 991px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}