:root { --topbar-h: 36px; }

/* Technology sections: square media, cover (no side white) */
.tech4-media {
  width: 100%;
  aspect-ratio: 1 / 1; /* square */
  height: auto; /* with aspect-ratio ensures square based on width */
  max-width: 420px; /* keep reasonable size */
}
.tech4-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* zoom to fill, crop edges */
  display: block;
  border-radius: 12px;
}
/* Inline image that appears inside text on mobile, below subheading */
.tech4-inline { display: none; width: 100%; height: auto; border-radius: 12px; margin: 0.5rem 0 0.75rem; }
/* Layout for tech sections */
.tech4-split { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.tech4-text { flex: 1 1 0; }
.tech4-media { flex: 0 0 auto; }
@media (max-width: 900px) {
  .tech4-split { flex-direction: column; align-items: center; text-align: left; }
  /* On mobile: hide side media and show inline image below the subheading */
  .tech4-media { display: none; }
  .tech4-inline { display: block; }
}

/* CBCT gallery */
.cbct-gallery {
  margin-top: 1rem;
}
/* Diagnosis subheading: themed blue */
.cbct-gallery-section .page-section-subtitle {
  color: #08335b;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
}
/* 3-up grid with captions */
.cbct-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.cbct-item { background: #fff; border: 1px solid rgba(8,51,91,0.06); border-radius: 12px; padding: 0.5rem; }
.cbct-item .thumb { border-radius: 10px; overflow: hidden; }
.cbct-item .thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.cbct-item .caption { margin-top: 0.4rem; font-size: 0.95rem; color: #334155; }
.cbct-item .caption .title { display: block; font-weight: 700; color: #0b2a4a; margin-bottom: 0.15rem; }
@media (max-width: 900px) { .cbct-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } }
@media (max-width: 560px) {
  .cbct-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; }
  .cbct-item { padding: 0.35rem; }
  .cbct-item .thumb { width: 140px; }
}
@media (max-width: 380px) {
  .cbct-item .thumb { width: 120px; }
}
/* CBCT zigzag image-text pairs */
@media (max-width: 900px) {
  .tech4-media { max-width: 360px; }
}
@media (max-width: 700px) {
  .tech4-media { max-width: 300px; }
}

/* Home hero: highlight address/phone/timings chips */

/* Global responsive enhancements */
@media (max-width: 900px) {
    .hero { padding: 3.5rem 0 2rem; min-height: initial; }
    .hero h1 { font-size: 2.4rem; }
    nav { padding: 0.7rem 1rem; }
    .nav-menu { gap: 1rem; }
}

@media (max-width: 768px) {
    .nav-menu { gap: 0.5rem; }
    .nav-menu a { padding: 0.5rem 0.75rem; }
    .nav-utility { display: none; }
    .brand-wrap { max-width: 65%; }
    .footer-content { gap: 0.75rem; }
}

@media (max-width: 600px) {
    h2 { font-size: 1.8rem; }
    .content-section { padding: 2rem 0; }
    .content-grid { gap: 1.5rem; }
    /* Reverse order utility for mobile: place text before image */
    .reverse-mobile .content-text { order: 1; }
    .reverse-mobile .content-image { order: 2; }
}

/* Ensure floating actions are visible on contact page */
body.contact .call-floating,
body.contact .email-floating { display: inline-flex !important; }
/* Precision Root Canal Therapy - Minimal & Elegant Design */
/* Typography: Florentina site-wide */
/* NOTE: Place the font files in /fonts with these names or adjust paths below */
/* Rio Pro font — uses local() only; add webfont files later if desired */
@font-face {
    font-family: 'Rio Pro';
    src: local('Rio Pro'), local('Rio Pro Regular');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rio Pro';
    src: local('Rio Pro Bold'), local('Rio Pro-Bold');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Floating Call Button (appears on all pages) */
.call-floating {
  position: fixed;
  right: 20px;
  bottom: 113px; /* lifted to make room for email button below */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(135deg, #1a237e, #3f51b5);
  box-shadow: 0 12px 30px rgba(26,35,126,0.35), 0 4px 10px rgba(26,35,126,0.2);
  z-index: 1001;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.call-floating:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 16px 40px rgba(26,35,126,0.45), 0 6px 14px rgba(26,35,126,0.25);
}
.call-floating .ico { width: 28px; height: 28px; color: #fff; }
@media (max-width: 600px) {
  .call-floating { right: 16px; bottom: 92px; width: 46px; height: 46px; }
}

/* Email Floating Button */
.email-floating {
  position: fixed;
  right: 20px;
  bottom: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(8,51,91,0.25), 0 4px 10px rgba(8,51,91,0.18);
  z-index: 1001;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.email-floating:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 16px 40px rgba(8,51,91,0.35), 0 6px 14px rgba(8,51,91,0.22);
}
.email-floating img,
.email-floating svg {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .email-floating { right: 16px; bottom: 12px; width: 46px; height: 46px; }
  .email-floating img,
  .email-floating svg { width: 28px; height: 28px; }
}

/* Prices Floating Button (text pill) */

/* Inline Prices CTA (small section between content blocks) */
.prices-cta {
    background: #f7f9ff;
    border-top: 1px solid rgba(8,51,91,0.06);
    border-bottom: 1px solid rgba(8,51,91,0.06);
    padding: 0.9rem 0;
}
.prices-cta .prices-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(26,35,126,0.12);
    box-shadow: 0 6px 18px rgba(26,35,126,0.08);
}
.prices-cta .prices-inline .ico { color: #3f51b5; width: 18px; height: 18px; }
.prices-cta .prices-inline .label { color: #08335b; font-weight: 700; }
/* Larger prices CTA section on desktop */
@media (min-width: 769px) {
  .prices-cta {
    padding: 1.5rem 0;
  }
  .prices-cta .prices-inline {
    padding: 0.7rem 1rem;
    gap: 0.8rem;
  }
  .prices-cta .prices-inline .label {
    font-size: 1rem;
  }
  .prices-cta .prices-inline .link-pill {
    padding: 0.7rem 1.4rem;
    font-size: 1rem;
  }
}
.prices-cta .prices-inline .link-pill:hover { filter: brightness(1.06); }
.prices-cta .center { display: flex; justify-content: center; }

/* Smaller View Fees CTA on mobile */
@media (max-width: 768px) {
  .prices-cta {
    padding: 0.8rem 0;
  }
  .prices-cta .prices-inline {
    padding: 0.4rem 0.7rem;
    gap: 0.4rem;
  }
  .prices-cta .prices-inline .ico {
    width: 14px;
    height: 14px;
  }
  .prices-cta .prices-inline .label {
    font-size: 0.8rem;
  }
  .prices-cta .prices-inline .link-pill {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
  }
}

/* Prices CTA variants */
.prices-cta--band {
    background: linear-gradient(135deg, #eef3ff 0%, #f7f9ff 100%);
    border: none;
    padding: 1.25rem 0;
}
.prices-cta--band .prices-inline {
    background: #fff;
    border-color: rgba(26,35,126,0.16);
    box-shadow: 0 10px 26px rgba(26,35,126,0.14);
}

.prices-cta--card { background: transparent; border: none; padding: 1.2rem 0; }
.prices-cta--card .prices-inline {
    padding: 0.7rem 1.1rem;
    background: #ffffff;
    border-color: rgba(8,27,107,0.14);
    box-shadow: 0 14px 30px rgba(8,27,107,0.16);
}

.prices-cta--minimal { background: transparent; border-bottom: none; }
.prices-cta--minimal .prices-inline {
    background: #f7f9ff;
    border-color: rgba(26,35,126,0.10);
    box-shadow: 0 6px 16px rgba(26,35,126,0.10);
}

/* Mobile sizing adjustments for prices-cta */
@media (max-width: 600px) {
  .prices-cta .prices-inline { gap: 0.5rem; padding: 0.4rem 0.7rem; }
  .prices-cta .prices-inline .label { font-size: 0.9rem; }
  .prices-cta .prices-inline .link-pill { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
}

/* Footer responsive stacking */
@media (max-width: 900px) {
    .footer-content { grid-template-columns: 1fr; }
    .footer-content .footer-section:nth-child(2),
    .footer-content .footer-section:nth-child(1),
    .footer-content .footer-section:nth-child(3),
    .footer-content .footer-section:nth-child(4) {
        order: initial; text-align: center; grid-column: auto;
    }
}

/* Footer bottom styling */
.footer-bottom { background: transparent; border-top: none; }
.footer-bottom .container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding-top: 0.6rem; padding-bottom: 0.6rem; text-align: center; }
.footer-bottom .made-by { color: #ffffff; font-weight: 700; font-size: 0.9rem; opacity: 0.95; }
.footer-bottom .made-by a { color: #8b5cf6; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; letter-spacing: 0.15px; font-size: 0.9rem; }
.footer-bottom .made-by a:hover { text-decoration: underline; }

/* Footer address line breaks for mobile */
.footer-address span { display: inline; }
@media (max-width: 700px) {
  .footer-address span { display: block; }
}

/* Expertise inline photo under subheading */
.expertise-photo {
  width: 100%;
  height: auto;
  display: none; /* default hidden; enabled per-section rules below */
  border-radius: 15px;
  margin: 0.5rem 0 1rem;
}
/* About -> Our Expertise (alt-1): always stack text, then inline image, then text; hide grid image on all screens */
.about .content-section.alt-1 .expertise-photo { display: block; }
.about .content-section.alt-1 .content-grid .content-image { display: none !important; }
/* Center layout & reduce inline image size */
.about .content-section.alt-1 .content-text { text-align: center; }
.about .content-section.alt-1 .expertise-photo {
  max-width: 520px;
  margin: 0.5rem auto 1rem;
}

/* Hide Services column in footer on mobile (it's the 3rd section) */
@media (max-width: 700px) {
  .footer-content .footer-section:nth-child(3) { display: none; }
}

/* Mobile top bar height: increase nav padding slightly */
@media (max-width: 900px) {
  nav { padding-top: 1rem !important; padding-bottom: 1rem !important; }
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Brand logo uses Playfair Display for elegant serif styling */
nav .logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #08335b;
}
.services main,
.technology main,
.gallery main {
    background: #ffffff; /* force solid white behind sections to the footer */
    margin-bottom: 0;     /* remove any bottom gap */
}

body.technology,
body.contact,
body.services {
    background-image:
        radial-gradient(900px 520px at 20% -10%, rgba(135, 139, 174, 0.12), transparent 60%),
        radial-gradient(700px 450px at 85% 0%, rgba(145, 151, 188, 0.1), transparent 55%),
        linear-gradient(180deg, #eef3ff 0%, #ffffff 45%, #f6f9ff 100%);
    background-attachment: fixed, fixed, scroll;
}

.technology main,
.contact main,
.services main {
    background: #ffffff; /* ensure main sections stay white */
    margin-bottom: 0;
}

/* Smooth scrolling for in-page anchor navigation */
html {
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
}

/* Homepage-only background enhancements */
body.home {
    /* Blue & white palette (pattern-free) */
    background-image:
        radial-gradient(900px 520px at 20% -10%, rgba(26, 35, 126, 0.14), transparent 60%), /* deep indigo tint */
        radial-gradient(700px 450px at 85% 0%, rgba(63, 81, 181, 0.12), transparent 55%), /* indigo tint */
        linear-gradient(180deg, #d6dae3 0%, #ffffff 45%, #e9efff 100%);
    background-attachment: fixed, fixed, scroll;
}

/* Add a soft gradient glow behind the hero area */
.home .hero {
    position: relative;
    overflow: hidden;
    /* Light lavender background for home */
    background: #f7f9ff;
}
.home .hero::before {
    content: "";
    position: absolute;
    inset: -80px -10% auto -10%;
    height: 60%;
    /* Subtle: remove heavy indigo glow to keep hero very light */
    background: none;
    filter: none;
    pointer-events: none;
}

/* Alternating background bands for homepage sections */
.home .content-section.alt-1 {
    background: #eef3ff; /* light blue */
}
.home .content-section.alt-2 {
    background: #f7f9ff; /* very light blue-gray */
}

/* Home: Why Choose Precision section media sizing */
.home-why .why-media img {
    width: 100%;
    height: 420px; /* increased as requested */
    object-fit: cover;
    border-radius: 15px;
    display: block;
}
@media (max-width: 700px) {
  .home-why .why-media img { height: 260px; }
}

/* Services: ensure no truncation or clipping in cards */
.services .service-card { overflow: visible; }
.services .service-card h3,
.services .service-card p,
.services .service-card ul,
.services .service-card li { overflow: visible; text-overflow: initial; white-space: normal; }

/* About page alternating section backgrounds (blue & white palette) */
.about .content-section.alt-1 {
    background: #eef3ff; /* light blue */
}
.about .content-section.alt-2 {
    background: #f7f9ff; /* very light blue-gray */
}

/* Services page background - slightly darker blue than home */
body.services {
    background-image:
        radial-gradient(900px 520px at 20% -10%, rgba(135, 139, 174, 0.12), transparent 60%),
        radial-gradient(700px 450px at 85% 0%, rgba(145, 151, 188, 0.1), transparent 55%),
        linear-gradient(180deg, #eef3ff 0%, #ffffff 45%, #f6f9ff 100%);
    background-attachment: fixed, fixed, scroll;
}
.services .hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #fbfcff 0%, #ffffff 50%, #f4f7ff 100%);
}
.services .hero::before {
    content: "";
    position: absolute;
    inset: -80px -10% auto -10%;
    height: 60%;
    background:
        radial-gradient(600px 350px at 25% 30%, rgba(63, 81, 181, 0.10), transparent 60%),
        radial-gradient(500px 300px at 75% 20%, rgba(26, 35, 126, 0.08), transparent 60%);
    filter: blur(36px);
    pointer-events: none;
}

/* Apply same alternating pattern to other pages via structural selectors */
.services main .content-section:nth-of-type(odd),
.technology main .content-section:nth-of-type(odd),
.gallery main .content-section:nth-of-type(odd),
.contact main .content-section:nth-of-type(odd) {
    background: #eef3ff; /* match About alt-1 */
}
.services main .content-section:nth-of-type(even),
.technology main .content-section:nth-of-type(even),
.gallery main .content-section:nth-of-type(even),
.contact main .content-section:nth-of-type(even) {
    background: #f7f9ff; /* match About alt-2 */
}

/* Services: lighten just the FIRST content section background to be subtler */
.services main .content-section:nth-of-type(1) {
    background: #f9fbff; /* softer than #eef3ff */
}

/* The first content section is actually the second <section> in main (after the hero) */
.services main > section.content-section:nth-of-type(2) {
    background: #ffffff !important; /* force lighter background for the first content section */
}

/* Services: ensure the final section above the footer is pure white (no band) */
.services main .content-section:last-of-type {
    background: #ffffff;
    margin-bottom: 0;         /* prevent margin-collapsing gap */
    padding-bottom: 2rem;     /* keep comfortable spacing */
}

/* Also enforce pure white for the last section on these pages */
.technology main .content-section:last-of-type,
.gallery main .content-section:last-of-type,
.contact main .content-section:last-of-type {
    background: #ffffff;
    margin-bottom: 0;         /* prevent margin-collapsing gap */
    padding-bottom: 2rem;     /* keep comfortable spacing */
}

/* Remove residual inner spacing that could create a band */
.technology main .content-section:last-of-type .container,
.gallery main .content-section:last-of-type .container,
.contact main .content-section:last-of-type .container {
    padding-bottom: 0;
}
.technology main .content-section:last-of-type *:last-child,
.gallery main .content-section:last-of-type *:last-child,
.contact main .content-section:last-of-type *:last-child {
    margin-bottom: 0 !important;
}

/* Remove any residual top margin/border that could create a band above footer */
.services footer,
.technology footer,
.gallery footer,
.contact footer {
    margin-top: 0;
    border-top: none;
}

/* About page: reduce card size only in 'Our Commitment to Excellence' section */
.about .content-section.alt-2 .services-grid {
    gap: 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about .content-section.alt-2 .services-grid .service-card {
    padding: 1.25rem;            /* was 1.5rem */
    border-radius: 12px;         /* keep consistent, slightly tighter */
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.about .content-section.alt-2 .services-grid .service-card h3 {
    font-size: 1.1rem;           /* slightly smaller heading */
}
.about .content-section.alt-2 .services-grid .service-card p {
    font-size: 0.95rem;          /* slightly smaller body text */
}
@media (max-width: 1000px) {
  .about .content-section.alt-2 .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .about .content-section.alt-2 .services-grid { grid-template-columns: 1fr; }
}
body {
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
    font-size: 18px; /* increased base body font size */
}
/* Reduce font size on mobile for all pages */
@media (max-width: 768px) {
  body { font-size: 17px; }
}
/* Services page: slightly larger base font */
/* Consistent section headings and subtitles across all pages */
.page-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.3;
  color: #08335b;
  margin-top: 0;
}

.page-section-subtitle {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #465169;
  font-weight: 400;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Current page highlight in navbar */
nav .nav-menu a.active {
    color: #0d1b6b;            /* deeper blue */
    font-weight: 700;
    position: relative;
}
nav .nav-menu a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: #0d1b6b;
}

/* CSS-only current page highlighting (prevents flicker before JS)
   Matches by body page class and link href */

/* Typography */
body {
    font-family: 'Poppins', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: #08335b;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.2px;
}

h1 {
    font-size: 3rem;
    line-height: 1.2;
}

h2 {
    font-size: 2.5rem;
    line-height: 1.3;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1rem;
    color: #555;
}

/* Container and Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    box-sizing: border-box;
}

.section {
    padding: 4rem 0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.section.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Header and Navigation - Royal & Elegant */
header {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Topbar (above navbar) */

@media (max-width: 700px) { /* hide address on small */
}

@media (max-width: 900px) {
    /* Remove the small top overlay band entirely on mobile */
    body::before { display: none !important; content: none !important; }
}
/* Prevent content from being hidden under the fixed header when there is no hero */
main > :first-child:not(.hero) { margin-top: 84px; }

body.contact main > :first-child { margin-top: 0; }

body.technology main > :first-child {
    margin-top: 24px;
}

/* Reduce top gap on Gallery page first section */
body.gallery main > :first-child {
    margin-top: 24px;
}

body.home main > .hero {
    margin-top: 84px;
}

@media (max-width: 900px) {
    body.home main > .hero {
        margin-top: 72px;
    }
}

@media (max-width: 600px) {
    body.home main > .hero {
        margin-top: 64px;
    }
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.5rem;
    max-width: none; /* allow full viewport width */
    margin: 0;       /* no centering */
    position: relative;
    width: 100%;
    flex-wrap: nowrap;
}

.logo {
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a237e;
    text-decoration: none;
    font-family: inherit;
    letter-spacing: -0.02em;
    position: relative;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Brand stacked with subline (address + phone) */
.brand-wrap { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.brand-subline { display: flex; gap: 1rem; color: #465169; font-size: 0.9rem; }
.brand-subline .top-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.brand-subline .ico { width: 14px; height: 14px; color: #3f51b5; }

@media (max-width: 480px) {
    .brand-subline { display: none; }
    .logo { font-size: 0.8rem !important; line-height: 1 !important; }
}

@media (max-width: 900px) {
    /* Standard brand text size on mobile/tablet */
    .logo { font-size: 1.05rem !important; line-height: 1.05 !important; }
    /* Slightly larger mobile menu link text */
    .nav-menu li a { font-size: 1rem !important; }
}

@media (max-width: 700px) {
    .nav-utility .cta-appoint { padding: 0.55rem 1rem; font-size: 0.95rem; box-shadow: 0 7px 18px rgba(26,35,126,0.24); }
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.9rem; /* tighter spacing */
    flex: 0 0 auto; /* reduce gap to the utility button */
    justify-content: center; /* center menu between logo and utility */
    margin: 0;
}

/* Right-side utility in header */
.nav-utility {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.nav-utility .top-item { display: inline-flex; align-items: center; gap: 0.5rem; color: #465169; font-size: 0.95rem; }
.nav-utility .ico { color: #3f51b5; width: 16px; height: 16px; }
.nav-utility .cta-appoint { display: inline-flex; align-items: center; padding: 0.5rem 0.9rem; border-radius: 999px; background: linear-gradient(135deg, #1a237e, #3f51b5); color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 7px 18px rgba(26,35,126,0.22); font-size: 0.9rem; letter-spacing: 0.01em; }
.nav-utility .cta-appoint:hover { filter: brightness(1.06); }
.nav-utility .topbar-phone { color: inherit; text-decoration: none; }

@media (max-width: 900px) {
    .nav-utility .top-item:first-child { display: none; } /* hide address on medium screens */
}
@media (max-width: 700px) {
    .nav-utility { display: none; } /* hide utility on very small screens */
}

/* Hamburger button */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    color: #1a237e;
    cursor: pointer;
}

@media (max-width: 900px) {
    .mobile-menu-toggle { display: inline-block; }
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255,255,255,0.98);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0.75rem 0.75rem;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        z-index: 1002;
    }
    .nav-menu.open { display: flex; }
    .nav-menu li a { padding: 0.75rem 1rem; display: block; }
    /* Brand: show only short name */
    .logo .logo-full { display: none !important; }
    .logo .logo-short { display: inline !important; font-weight: 800; }
    /* Hide subline under brand on mobile */
    .brand-subline { display: none !important; }
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 700;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.35rem 0.7rem; /* smaller */
    border-radius: 5px;
    font-size: 1.1rem; /* increased font size for desktop */
}

/* Brand text defaults: show full name on desktop, hide short name */
.logo .logo-full { display: inline; }
.logo .logo-short { display: none; }

.nav-menu a:hover {
    color: #08335b;
    background-color: rgba(26, 35, 126, 0.05);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #1a237e;
    transition: width 0.3s ease;
}

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

/* Current page highlight in navbar */
.nav-menu a.active {
    color: #08335b;
    font-weight: 700;
    position: relative;
}

.nav-menu a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: #08335b;
}

/* Hero Section - Royal & Elegant */
.hero {
    background: 
        radial-gradient(1200px 600px at 20% -10%, rgba(32, 48, 225, 0.12), transparent 60%),
        radial-gradient(800px 500px at 85% 0%, rgba(44, 71, 226, 0.08), transparent 55%),
        linear-gradient(135deg, #f8faff 0%, #ffffff 45%, #f0f4ff 100%);
    padding: 8rem 0 4rem;
    min-height: 100vh;
    display: flex;
        align-items: center;
        position: relative;
    overflow: visible; /* allow full text to show */
}

.hero::before {
    content: "";
    position: absolute;
    inset: -100px -20% auto -20%;
    height: 70%;
    background:
        radial-gradient(700px 400px at 30% 40%, rgba(63, 81, 181, 0.15), transparent 60%),
        radial-gradient(600px 350px at 70% 20%, rgba(26, 35, 126, 0.12), transparent 60%);
    filter: blur(60px);
    pointer-events: none;
}

/* Home-specific hero background image and single-column layout */
.home .hero {
    background: url('images/home/bgimage.png') center/cover no-repeat;
}
.home .hero-grid {
    grid-template-columns: 1fr;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content {
    padding-right: 1rem;
}

.hero h1 {
    font-size: 3.2rem;
    margin-bottom: 0.5rem;
    color: #08335b;
    font-weight: 700;
    line-height: 1.1;
}

.hero .subtitle {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    align-items: center; /* ensure buttons are perfectly aligned */
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
    color: #666;
}

.info-item .icon {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Professional icon system using CSS masks (monochrome) */
.icon, .ico { display: inline-block; }
.ico {
    width: 20px;
    height: 20px;
    background-color: currentColor;
    /* Use prefixed mask properties first for WebKit/Blink, then standard */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Location pin */
.ico-location { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>'); }
/* Phone */
.ico-phone { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.4 21 3 13.6 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.24 1.01l-2.2 2.2z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.4 21 3 13.6 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.24 1.01l-2.2 2.2z"/></svg>'); }
/* Clock (clear outline with hands) */
/* Email */
.ico-email { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M3 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H3zm.4 2h17.2L12 12.47 3.4 7zM21 17H3V9.28l8.4 5.04a1 1 0 0 0 1 0L21 9.28V17z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M3 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H3zm.4 2h17.2L12 12.47 3.4 7zM21 17H3V9.28l8.4 5.04a1 1 0 0 0 1 0L21 9.28V17z"/></svg>'); }
/* Calendar (clear for timings) */

/* Improve legibility inside contact cards */
.contact-modern .info-icon .ico { width: 22px; height: 22px; }
/* Tooth */
.ico-tooth { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M12 2c-3.5 0-6 2.5-6 6 0 4.5 2 6 2 9 0 2 .7 5 2 5s1.5-2 2-3 1-3 2-3 1.5 2 2 3 1 3 2 3 2-3 2-5c0-3 2-4.5 2-9 0-3.5-2.5-6-6-6-1.2 0-2.3.4-3 1.1C14.3 2.4 13.2 2 12 2z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M12 2c-3.5 0-6 2.5-6 6 0 4.5 2 6 2 9 0 2 .7 5 2 5s1.5-2 2-3 1-3 2-3 1.5 2 2 3 1 3 2 3 2-3 2-5c0-3 2-4.5 2-9 0-3.5-2.5-6-6-6-1.2 0-2.3.4-3 1.1C14.3 2.4 13.2 2 12 2z"/></svg>'); }
/* Refresh/retreatment */
/* Bolt/emergency */
/* Search/consultation */
/* Sparkle/hygiene */
/* Shield/preventive */

/* Buttons - Royal & Elegant */
.btn {
    display: inline-flex; /* align text consistently */
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2.5rem;
    background: 
        linear-gradient(135deg, #1a237e 0%, #2a3bb8 50%, #3f51b5 100%),
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%);
    color: white;
    text-decoration: none;
    border-radius: 16px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
    margin: 0.5rem;
    box-shadow: 
        0 8px 24px rgba(26, 35, 126, 0.25),
        0 2px 8px rgba(26, 35, 126, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    background: 
        linear-gradient(135deg, #2a3bb8 0%, #3f51b5 50%, #5c6bc0 100%),
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 16px 40px rgba(26, 35, 126, 0.35),
        0 4px 12px rgba(26, 35, 126, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-outline {
    display: inline-flex; /* match base button layout */
    align-items: center;
    justify-content: center;
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,255,0.98) 100%);
    border: 2px solid rgba(26, 35, 126, 0.2);
    color: #08335b;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    line-height: 1; /* avoid baseline quirks */
}

.btn-outline:hover {
    background: 
        linear-gradient(135deg, #1a237e 0%, #2a3bb8 50%, #3f51b5 100%);
    color: white;
    border-color: transparent;
}

/* Quick Links */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.quick-link {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quick-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(26, 35, 126, 0.2);
}

.quick-link h3 {
    margin-bottom: 1rem;
}

.quick-link p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.quick-link .view-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/* Content Sections */
.content-section {
    padding: 3rem 0;
}

/* Home - Why Choose section */
.home .home-why {
    background: linear-gradient(180deg, #f8faff 0%, #eef3ff 100%);
}
.home .why-split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 2rem;
    align-items: center;
}
.home .why-media img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(26,35,126,0.10);
    display: block;
}
.home .why-title {
    font-size: 2.4rem;
    color: #0a2a6b;
    line-height: 1.15;
}
.home .why-accent { color: #1a237e; text-decoration: none; }
.home .why-subtitle { color: #5a5f73; margin: 0.75rem 0 1.25rem; }
.home .why-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.home .why-list li {
    position: relative;
    padding-left: 1.75rem;
    margin: 0.5rem 0;
    color: #2b3550;
}
.home .why-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #3f51b5;
    font-weight: 800;
}
@media (max-width: 900px) {
    .home .why-split { grid-template-columns: 1fr; }
    .home .why-title { font-size: 2rem; }
}

.home .home-welcome { background: linear-gradient(180deg, #f8faff 0%, #eef3ff 100%); }
/* Welcome image container should auto-size so it doesn't force overlap */
.home .home-welcome .content-image { height: auto; background: transparent; border: 0; }
.home .home-welcome .content-image img { width: 100%; height: auto; object-fit: contain; }
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    align-items: center;
}

.content-text {
    padding: 1rem;
}

.content-image {
    width: 100%;
    height: 300px;
    background: transparent;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 1.2rem;
    border: 0;
}

/* Service Cards */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.service-card {
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,255,0.98) 100%),
        linear-gradient(225deg, rgba(26,35,126,0.02) 0%, rgba(63,81,181,0.03) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 2rem 1.75rem 2.25rem;
    border-radius: 20px;
    border: 1px solid rgba(26, 35, 126, 0.12);
    box-shadow: 
        0 8px 32px rgba(26, 35, 126, 0.08),
        0 2px 8px rgba(26, 35, 126, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(26, 35, 126, 0.15),
        0 8px 24px rgba(26, 35, 126, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-color: rgba(26, 35, 126, 0.20);
}

/* Elegant top accent with royal gradient */
.service-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(26, 35, 126, 0.8) 0%, 
        rgba(63, 81, 181, 0.9) 50%, 
        rgba(26, 35, 126, 0.8) 100%);
    border-radius: 20px 20px 0 0;
}

/* Subtle royal shimmer effect */
.service-card::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 70%);
    transform: rotate(45deg);
    transition: transform 0.6s ease;
    pointer-events: none;
    opacity: 0;
}
.service-card:hover::after {
    opacity: 1;
    transform: rotate(45deg) translate(50%, 50%);
}

/* Elegant typography for service cards */
.service-card h3 {
    margin: 0 0 1rem;
    color: #08335b;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.1px;
    text-align: center;
    min-height: 3.2rem;
    position: relative;
}
.service-card h3::after {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3f51b5, transparent);
    border-radius: 1px;
}
.service-card p {
    color: #4a5568;
    line-height: 1.65;
    margin: 0 0 1.5rem;
    font-size: 1.05rem;
    font-weight: 400;
    max-width: 48ch;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Royal list styling for service details */
.service-card ul {
    list-style: none;
    padding-left: 0;
    text-align: left;
    max-width: 48ch;
    margin: 0 auto;
}
.service-card ul li {
    position: relative;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.6;
}
.service-card ul li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 0;
    color: #3f51b5;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Technology Grid */

/* Simple Fees Section */
.simple-fees {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(26, 35, 126, 0.08);
    margin: 1.5rem 0;
}

.fee-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(26, 35, 126, 0.1);
}

.fee-item:last-child {
    border-bottom: none;
}

.fee-service {
    color: #08335b;
    font-weight: 600;
    flex: 1;
    font-size: 0.9rem;
}

.fee-amount {
    color: #1a237e;
    font-weight: 700;
    font-size: 1rem;
    text-align: right;
    min-width: 60px;
}

.fees-notes {
    background: #f8faff;
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 1.25rem;
    border-left: 4px solid #3f51b5;
}

.fees-notes ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
}

.fees-notes li {
    color: #555;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* Mobile responsiveness for fees */
@media (max-width: 768px) {
    .simple-fees {
        padding: 1rem;
        margin: 1rem 0;
    }

    .fee-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0;
    }

    .fee-service {
        font-size: 0.7rem;
    }

    .fee-amount {
        font-size: 0.75rem;
        text-align: right;
        font-weight: 700;
        min-width: 60px;
    }
}
/* Section eyebrow label (small pill above title) */

/* What to Expect - modern card grid */
.expect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.expect-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(26, 35, 126, 0.10);
    box-shadow: 0 8px 22px rgba(26, 35, 126, 0.08);
    padding: 1.25rem 1.25rem 1.5rem;
    position: relative;
    /* allow content to flow without clipping */
    overflow: visible;
    display: flex;
    flex-direction: column;
    height: auto;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.expect-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,35,126,0.10), rgba(63,81,181,0.06));
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.expect-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(26, 35, 126, 0.16);
    border-color: rgba(26, 35, 126, 0.18);
}
.expect-card:hover::after { opacity: 1; }

.expect-badge {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    text-align: center;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #1a237e, #3f51b5);
    box-shadow: 0 6px 14px rgba(26, 35, 126, 0.25), inset 0 0 0 4px rgba(255,255,255,0.15);
    margin-bottom: 0.75rem;
}

.expect-card h3 {
    margin: 0.25rem 0 0.5rem;
    color: #08335b;
    font-size: 1.15rem;
}

.expect-card p {
    color: #5a5f73;
    line-height: 1.55;
    margin: 0;
    font-size: 1rem;
    display: block; /* Changed from -webkit-box to block for full text visibility */
}

@media (max-width: 600px) {
    .expect-grid { gap: 1rem; }
    .expect-card { padding: 1rem; }
}

@media (max-width: 768px) {
    /* Global typography - force smaller sizes */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.25rem !important; }

    /* Global text - force smaller */
    p { font-size: 0.9rem !important; line-height: 1.4 !important; }

    /* Buttons - force much smaller */
    .btn { padding: 0.75rem 1.5rem !important; font-size: 0.8rem !important; }
    .btn-outline { padding: 0.75rem 1.5rem !important; font-size: 0.8rem !important; }

    /* Hero section - force much smaller */
    .hero { padding: 4rem 0 2rem !important; min-height: 70vh !important; }
    .hero h1 { font-size: 2.2rem !important; }
    .hero-buttons { gap: 0.75rem !important; }

    /* Container padding - force much smaller */
    .container { padding: 0 1rem !important; }

    /* Content sections - force much smaller */
    .content-section { padding: 2rem 0 !important; }
    .section { padding: 2.5rem 0 !important; }

    /* Cards and grids - force much smaller */
    .service-card { padding: 1.5rem 1.25rem !important; }
    .service-card h3 { font-size: 1.2rem !important; }
    .service-card p { font-size: 0.95rem !important; }

    .expect-card { padding: 1rem !important; }
    .expect-card h3 { font-size: 1.05rem !important; }
    .expect-card p { font-size: 0.95rem !important; }

    /* Footer - force much smaller */
    footer { padding: 1.5rem 0 0 !important; }
    footer .footer-section h3 { font-size: 1rem !important; }
    footer .footer-section p,
    footer .footer-section a { font-size: 0.85rem !important; }

    /* Contact form - force much smaller */

    /* Technology page - force much smaller */

    /* FAQ - force much smaller */
    .faq-title { font-size: 1.75rem !important; }
    .faq-subtitle { font-size: 0.9rem !important; }
    .faq-trigger { padding: 0.75rem 1rem !important; }
    .faq-item .question { font-size: 0.9rem !important; }

    /* Navigation - force much smaller */
    .nav-menu a { font-size: 0.85rem !important; padding: 0.3rem 0.6rem !important; }
    .logo { font-size: 0.9rem !important; line-height: 1 !important; }

    /* Hamburger menu text - force much smaller */
    .nav-menu li a { font-size: 0.75rem !important; padding: 0.5rem 0.75rem !important; }

    /* Mobile menu toggle button - make smaller */
    .mobile-menu-toggle { font-size: 1.5rem !important; padding: 0.2rem 0.4rem !important; }

    /* Floating buttons - force much smaller */
    .call-floating,
    .email-floating { width: 54px !important; height: 54px !important; }
    .call-floating .ico,
    .email-floating img { width: 30px !important; height: 30px !important; }

    /* Grid gaps - force much smaller */
    .services-grid,
    .gallery-grid { gap: 1rem !important; }

    /* Quick links - force much smaller */
    .quick-link { padding: 1.5rem !important; }
    .quick-link h3 { font-size: 1.1rem !important; }
    .quick-link p { font-size: 0.85rem !important; }

    /* Mobile breakpoint adjustments */
    body.contact .contact-modern { padding-top: 100px !important; }

    /* Footer content grid - force much smaller */
    .footer-content { gap: 0.75rem !important; }

    /* Social links - force much smaller */
    footer .social-links a { width: 32px !important; height: 32px !important; }
    footer .social-links a .ico { width: 14px !important; height: 14px !important; }

    /* Footer CTA - force much smaller */

    /* General spacing - force much smaller */
    .mb-3rem { margin-bottom: 1.5rem !important; }

    /* Reduce padding in various elements - force much smaller */
    .content-grid { gap: 2rem !important; }
    .content-text { padding: 0.75rem !important; }

    /* FAQ content - force much smaller */
    .faq-content { padding: 0 1rem 0.75rem !important; font-size: 0.85rem !important; }

    /* Technology page specific - force much smaller */

    /* Gallery - force much smaller */
    .gallery-item { height: 200px !important; font-size: 0.9rem !important; }

    /* Contact modern - force much smaller */
    .contact-modern .info-item { padding: 0.75rem !important; }
    .contact-modern .info-icon { width: 48px !important; height: 48px !important; font-size: 1.2rem !important; }
    .contact-modern .info-text h4 { font-size: 0.9rem !important; }
    .contact-modern .info-text p { font-size: 0.8rem !important; }

    .contact-modern .form-panel { padding: 0.75rem !important; }
    .contact-modern .form-inner { padding: 0.75rem !important; }
    .contact-modern input, .contact-modern select, .contact-modern textarea { padding: 0.6rem !important; font-size: 0.85rem !important; }
    .contact-modern .btn-primary { padding: 0.75rem 1rem !important; font-size: 0.9rem !important; }

    /* Mobile breakpoint adjustments */
    body.technology main > :first-child { margin-top: 36px !important; }

    /* Reduce image heights - force much smaller */
    .content-image { height: 200px !important; }
    .h-380 { height: 220px !important; }

    /* General responsive adjustments - force much smaller */
    .services-grid { grid-template-columns: 1fr !important; }
    .gallery-grid { grid-template-columns: 1fr !important; }

    /* Hero grid adjustments - force much smaller */
    .hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .hero-content { padding-right: 0 !important; }

    /* Footer bottom row - force much smaller */
    .footer-bottom-row { gap: 0.5rem !important; }
    .footer-links-bottom { gap: 0.75rem !important; }

    /* Technology CTA - force much smaller */

    /* Safety protocols - force much smaller */

    /* Patient benefits - force much smaller */
}

.tech-item {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.tech-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(26, 35, 126, 0.2);
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 3rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    height: 250px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border: 2px dashed #ddd;
    transition: all 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 35, 126, 0.8);
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* Contact Form */

/* FAQ Accordion (Contact page) */
.faq-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}
.faq-header-wrap {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 1.5rem;
}
.faq-title {
    font-size: 2rem;
    color: #08335b;
}
.faq-subtitle {
    color: #5a5f73;
    max-width: 60ch;
    margin: 0.25rem auto 1.25rem;
}
.faq-accordion {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 0.75rem;
}
.faq-item {
    background: #ffffff;
    border: 1px solid rgba(8,51,91,0.12);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(8,51,91,0.06);
}
.faq-item.open {
    background: linear-gradient(135deg, #1a237e, #3f51b5);
    color: #e9efff;
    border-color: transparent;
    box-shadow: 0 16px 40px rgba(26,35,126,0.25);
}
.faq-trigger {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font-weight: 600;
}
.faq-item:not(.open) .faq-trigger:hover {
    background: rgba(26,35,126,0.04);
}
.faq-item.open .faq-trigger { color: #fff; }
.faq-item .dot { font-size: 1.25rem; line-height: 1; }
.faq-item .question { font-size: 1rem; }
.faq-item .icon { font-size: 1.1rem; opacity: 0.9; }
.faq-content { padding: 0 1.25rem 1rem; }
.faq-item.open .faq-content { color: #e0e7ff; }
/* Ensure high-contrast readable text inside open FAQ */
.faq-item.open .faq-content p,
.faq-item.open .faq-content li,
.faq-item.open .faq-content span {
    color: rgba(255,255,255,0.95);
}
.faq-item.open .faq-trigger .question,
.faq-item.open .dot,
.faq-item.open .icon {
    color: #ffffff;
}
.faq-item.open .faq-content a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.faq-divider {
    height: 1px;
    background: rgba(255,255,255,0.35);
    margin: 0.5rem 0 0.75rem;
}
.faq-item:not(.open) .faq-divider { background: rgba(8,51,91,0.12); }

/* Footer - Royal & Elegant */
footer {
    background: linear-gradient(180deg, #0b1e3a 0%, #0d274a 100%);
    color: #e6eef9;
    padding: 1.5rem 0 0;
    margin-top: 1.75rem;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: none; /* remove striped overlay */
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 0;
    align-items: start;
}
footer .footer-section h3 {
    color: #ffffff;
    font-size: 1.12rem;
    margin: 0 0 0.6rem;
    font-weight: 800;
}
footer .footer-section p,
footer .footer-section a {
    color: rgba(230, 238, 249, 0.85);
    text-decoration: none;
    line-height: 1.35;
}
footer .footer-section a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
footer .social-links { display: flex; gap: 0.5rem; }
footer .social-links a { width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.18); color: #e6eef9; background: rgba(255,255,255,0.06); transition: all 0.2s ease; }
footer .social-links a:hover { background: rgba(255,255,255,0.12); color: #fff; transform: translateY(-2px); }
footer .social-links a .ico { width: 18px; height: 18px; }
/* Ensure image-based social icons show properly */
footer .social-links a.use-image img { display: block !important; width: 18px; height: 18px; filter: brightness(1) invert(0); }

/* Hide legacy bottom row if present on some pages */
.footer-bottom-row { display: none !important; }
/* Equal three-column layout: keep natural order (1: Address, 2: Quick Links, 3: Services) and left-align for consistency */
.footer-content .footer-section:nth-child(1) { order: 1; text-align: left; }
.footer-content .footer-section:nth-child(2) { order: 2; text-align: left; }
.footer-content .footer-section:nth-child(3) { order: 3; text-align: left; }
.footer-content .footer-section:nth-child(4) { 
  order: 4; 
  grid-column: 1 / -1; 
  justify-self: center; 
  text-align: center; 
  margin-top: 0; 
  margin-bottom: 0.5rem; 
  padding-bottom: 0.25rem; 
}

.footer-section h3 {
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}

.footer-section p,
.footer-section a {
    color: rgba(230, 238, 249, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.6;
}

/* Emphasize address and phone (first section, first two lines) */
/* Emphasize address (3 lines) and phone for the first section */
footer .footer-content .footer-section:first-child p:nth-of-type(-n+3) {
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 0.1rem;
}
footer .footer-content .footer-section:first-child p:nth-of-type(4) {
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 700;
    margin-top: 0.25rem;
}

.footer-section a:hover {
    color: #ffffff;
}

.social-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.social-links a {
    width: 34px;   /* smaller icons to reduce height */
    height: 34px;
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.social-links a:hover {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.social-links a[title="X"] {
    background: #000000;
    color: white;
    font-weight: bold;
    text-transform: lowercase;
}


.social-links a[title="X"]:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Homepage-only: image-based social icons */
.social-links a.use-image {
    background: rgba(255, 255, 255, 0.15) !important; /* subtle backdrop */
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.25);
}
.social-links a.use-image:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    transform: translateY(-2px) scale(1.05);
}
.social-links a.use-image img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

/* Make LinkedIn logo slightly larger inside the same circle */

/* Footer social: enforce centered layout and consistent neutral look */
footer .footer-section:nth-child(4) h3 { text-align: center; margin-bottom: 0.25rem; }
footer .social-links { justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; margin-bottom: 0.6rem; }
footer .social-links a { 
  width: 40px !important; 
  height: 40px !important; 
  border-radius: 8px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border: 1px solid rgba(255,255,255,0.18) !important; 
  color: #e6eef9 !important; 
  background: rgba(255,255,255,0.06) !important; 
  box-shadow: none !important;
}
footer .social-links a:hover { 
  background: rgba(255,255,255,0.12) !important; 
  color: #ffffff !important; 
  transform: translateY(-2px) !important; 
}
/* Normalize image sizes in footer regardless of brand */
footer .social-links a.use-image img { width: 28px !important; height: 28px !important; }

.footer-bottom {
    text-align: center;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(230,238,249,0.75);
}

@media (max-width: 900px) {
    .footer-content { grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 1rem; }
}
@media (max-width: 600px) {
    .footer-content { grid-template-columns: 1fr; }
}

/* Footer CTA band (centered heading, subtext, pill button) */

/* Bottom row: logo left, links center, socials right */
.footer-bottom-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}
.footer-logo-bottom { justify-self: start; opacity: 0.95; font-weight: 700; }
.footer-links-bottom { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.footer-links-bottom a { color: rgba(255,255,255,0.9); text-decoration: none; }
.footer-links-bottom a:hover { color: #ffffff; }

@media (max-width: 700px) {
    .footer-bottom-row { grid-template-columns: 1fr; text-align: center; }
    .footer-logo-bottom { justify-self: center; margin-bottom: 0.25rem; }
}

/* Contact page - Modern two-column layout */
.contact-modern { background: linear-gradient(135deg, #e9efff 0%, #eef3ff 100%); padding: 1.5rem 0 2rem; }
.contact-modern .grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1.5rem;
    align-items: start;
}
.contact-modern .card {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(8,51,91,0.08);
}
.contact-modern .map-wrap { overflow: hidden; border-radius: 14px; border: 1px solid #e6e9ef; }
.contact-modern .map-embed { width: 100%; height: 260px; border: 0; display: block; }
.contact-modern .info-list { margin-top: 1rem; display: grid; gap: 1rem; }
.contact-modern .info-item { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 1rem; background: rgba(255,255,255,0.75); border: 1px solid rgba(26,35,126,0.08); border-radius: 16px; padding: 1rem; box-shadow: 0 12px 30px rgba(8,51,91,0.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.contact-modern .info-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0d2a8a, #163aa6); color: #ffffff; font-size: 1.4rem; box-shadow: 0 10px 22px rgba(13,42,138,0.28); }
.contact-modern .info-text h4 { margin: 0 0 0.25rem; color: #0d1b6b; font-size: 1rem; }
.contact-modern .info-text p { margin: 0; color: #5a5f73; font-size: 0.9rem; }

.contact-modern .form-panel { padding: 1rem; }
.contact-modern .form-inner { border: 1px solid #e6e9ef; border-radius: 12px; padding: 1rem; }
.contact-modern .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.contact-modern label { display: block; font-size: 0.85rem; color: #08335b; margin: 0 0 0.3rem; }
.contact-modern input, .contact-modern select, .contact-modern textarea { width: 100%; padding: 0.8rem; border: 1px solid #dbe2ee; border-radius: 10px; font-size: 0.95rem; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.contact-modern input:focus, .contact-modern select:focus, .contact-modern textarea:focus { border-color: #08335b; box-shadow: 0 0 0 3px rgba(8,51,91,0.12); }
.contact-modern textarea { min-height: 120px; resize: vertical; }
.contact-modern .btn-primary { margin-top: 0.5rem; width: 100%; padding: 0.9rem 1.25rem; border-radius: 12px; border: none; cursor: pointer; color: #fff; background: linear-gradient(135deg,#08335b,#0c4a82); box-shadow: 0 10px 22px rgba(8,51,91,0.25); font-weight: 700; }
.contact-modern .btn-primary:hover { 
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(8,51,91,0.35);
}

body.contact .faq-section {
    background: #ffffff;
}

/* Contact: no extra hero band */
body.contact .contact-modern { padding: 140px 0 2rem; min-height: 0; margin-top: 0; }

@media (max-width: 700px) {
  /* Mobile: keep adequate clearance under fixed header */
  body.contact .contact-modern { margin-top: 0; padding-top: 120px; }
}

/* Ensure contact content clears the fixed header: move spacing into section to avoid white bar */
body.contact main { padding-top: 0; background: transparent; }

@media (max-width: 900px) {
    .contact-modern .grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .contact-modern .info-item { grid-template-columns: 52px 1fr; }
    .contact-modern .info-icon { width: 52px; height: 52px; }
}

/* Technology Page Complete Redesign V2 */

/* Services: ensure hero uses gradient similar to technology */
/* Services page top heading - adjusted size */
body.services .contact-modern .page-section-title { font-size: 2.8rem !important; }

body.services h2 {
    font-size: 1.8rem !important;
}

body.services h3 {
    font-size: 1.3rem !important;
}

body.services p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

body.services .service-card h3 {
    font-size: 1.1rem !important;
}

body.services .service-card p {
    font-size: 0.85rem !important;
}

body.services .service-card ul li {
    font-size: 0.8rem !important;
}

body.services .expect-card h3 {
    font-size: 0.95rem !important;
}

body.services .expect-card p {
    font-size: 0.85rem !important;
}

body.services .fee-service {
    font-size: 0.8rem !important;
}

body.services .fee-amount {
    font-size: 0.9rem !important;
}

body.services .fees-notes {
    font-size: 0.85rem !important;
}

body.services .fees-notes p {
    font-size: 0.85rem !important;
}

body.services .fees-notes li {
    font-size: 0.8rem !important;
}
.technology .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
.technology .btn-primary {
    background: linear-gradient(135deg, #1a237e, #3f51b5);
    color: white;
    box-shadow: 0 8px 20px rgba(26,35,126,0.25);
}
/* Add clear hover feedback on Technology page buttons */
.technology .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(26,35,126,0.35);
    filter: brightness(1.06);
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Tech Showcase Section - Improved Layout */


/* Enhanced CTA Section */
/* Hover for outline variant in Technology CTA */

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* Responsive Design for New Sections */

/* Safety Protocols Section */

/* Patient Benefits Section */

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* Remove old styles that are no longer needed */

/* Additional responsive design for new sections */

/* Gallery Page Styling */
.gallery {
    background: #ffffff;
}
.gallery .hero {
    background: linear-gradient(135deg, #f8faff 0%, #eef3ff 100%);
    min-height: 50vh;
    padding: 6rem 0 2rem;
}
.gallery .content-section {
    padding: 3rem 0;
}
.gallery .content-section:first-of-type {
    padding-top: 4rem; /* nudged up slightly */
}
.gallery .content-section:nth-of-type(odd) {
    background: #ffffff;
}
.gallery .content-section:nth-of-type(even) {
    background: #f8f9ff;
}
.gallery .content-section h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #1a237e;
}
.gallery .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    height: 280px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border: 2px dashed #ddd;
    transition: all 0.3s ease;
    font-size: 1rem;
    text-align: center;
    padding: 1rem;
}
.gallery .gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26,35,126,0.15);
    border-color: rgba(26,35,126,0.3);
}
.gallery .gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(26,35,126,0.9));
    color: white;
    padding: 1.5rem 1rem 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.gallery .gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}
.gallery .gallery-overlay span {
    font-weight: 600;
    font-size: 1.1rem;
}

.case-note {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #5a6785;
    text-align: center;
}

@media (max-width: 900px) {
    .gallery .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}
@media (max-width: 600px) {
    .gallery .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .gallery .gallery-item {
        height: 240px;
    }
}

/* Royal but simple cards (distinct from .service-card) */

/* About page: clean professional feature cards */
.about .services-grid { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1rem; }
.about .services-grid .service-card {
    background: #ffffff;
    border: 1px solid rgba(8, 27, 107, 0.12);
    box-shadow: 0 8px 22px rgba(8, 27, 107, 0.06);
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1.35rem;
    text-align: left;
}
.about .services-grid .service-card::before,
.about .services-grid .service-card::after { display: none; }
.about .services-grid .service-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: #0a2a6b;
    font-weight: 800;
}
.about .services-grid .service-card h3::after { display: none; }
.about .services-grid .service-card p {
    margin: 0;
    color: #4a5568;
    line-height: 1.7; /* slightly more breathing room */
    font-size: 0.95rem;
    max-width: none; /* allow full width */
    display: block; /* cancel -webkit-box */
    -webkit-line-clamp: unset; /* cancel global clamp */
    line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible; /* show full text */
}
.about .services-grid .service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(8, 27, 107, 0.10);
    border-color: rgba(8, 27, 107, 0.18);
}

/* Background Image Theming (heroes and sections) */
/* Note: Add corresponding images under /images. These rules are placed late to override earlier gradient backgrounds. */

/* Heroes with background images + soft overlay */
.home .hero {
    /* Remove image; keep ultra-light, subtle gradient */
    background: linear-gradient(180deg, #c8c8e1 0%, #ffffff 60%, #f7f9ff 100%);
    background-size: auto;
    background-position: initial;
}

.services .hero {
    background: 
        linear-gradient(135deg, rgba(26,35,126,0.40), rgba(63,81,181,0.22)),
        url('images/hero-services.png');
    background-size: cover;
    background-position: center;
}

.gallery .hero {
    background: 
        linear-gradient(135deg, rgba(26,35,126,0.30), rgba(63,81,181,0.18)),
        url('images/hero-gallery.png');
    background-size: cover;
    background-position: center;
}

.contact .hero {
    background: 
        linear-gradient(135deg, rgba(26,35,126,0.35), rgba(63,81,181,0.20)),
        url('images/hero-contact.png');
    background-size: cover;
    background-position: center;
}

/* Optional: Section band backgrounds per page */
.about .content-section.alt-1 { 
    background: 
        linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.90)),
        url('images/band-about-1.png');
    background-size: cover;
    background-position: center;
}
.about .content-section.alt-2 { 
    background: 
        linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.90)),
        url('images/band-about-2.png');
    background-size: cover;
    background-position: center;
}

/* Utilities to apply BG images to any section without HTML rewrites elsewhere */
.bg-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }
.bg-overlay {
    position: relative;
}
.bg-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.15));
    pointer-events: none;
}

/* Example utility presets — add one of these classes to any section */
.bg-soft-texture    { background-image: url('images/bg-soft-texture.png'); }

/* Technology 4-section redesign */
.technology .tech4-section {
    padding: 4rem 0;
    background: #ffffff;
}
.technology .tech4-section.alt {
    background: #f6f9ff; /* very light indigo-tinted background */
}
.technology .tech4-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.25rem;
    align-items: center;
}
.technology .tech4-split.reverse {
    grid-template-columns: 1fr 1.1fr;
}
.technology .tech4-split.reverse .tech4-text { order: 2; }
.technology .tech4-split.reverse .tech4-media { order: 1; }

.technology .tech4-title {
    font-size: 2rem;
    color: #0a2a6b; /* dark navy */
    margin-bottom: 0.75rem;
}
.technology .tech4-text p {
    color: #4d5770;
    margin-bottom: 0.75rem;
}
.technology .tech4-list {
    margin: 0.5rem 0 0;
    padding-left: 1rem;
    color: #2b3550;
}
.technology .tech4-list li {
    margin: 0.35rem 0;
}
.technology .tech4-list li::marker { color: #3f51b5; }

.technology .tech4-media img {
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(26,35,126,0.18);
    display: block;
}

@media (max-width: 1024px) {
    .technology .tech4-split,
    .technology .tech4-split.reverse {
        grid-template-columns: 1fr;
    }
    .technology .tech4-split.reverse .tech4-text { order: 2; }
    .technology .tech4-split.reverse .tech4-media { order: 1; }
}

@media (max-width: 600px) {
    .technology .tech4-section { padding: 3rem 0; }
    .technology .tech4-title { font-size: 1.6rem; }
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    nav {
        padding: 0.75rem;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero .subtitle {
        font-size: 1.1rem;
    }
    
    .hero-content {
        padding-right: 0;
        order: 2;
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .quick-links {
        grid-template-columns: 1fr;
    }
    
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    .btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* Animation Classes */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.fade-in-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s ease;
}

.fade-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s ease;
}

/* What to Expect section styles */
.expect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.expect-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(26, 35, 126, 0.1);
  border: 1px solid rgba(26, 35, 126, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expect-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26, 35, 126, 0.15);
}

.expect-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1a237e, #3f51b5);
  color: #ffffff;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  align-self: flex-start;
}

.expect-card h3 {
  font-size: 1.5rem;
  color: #08335b;
  margin-bottom: 1rem;
  font-weight: 700;
}

.expect-card p {
  color: #555;
  line-height: 1.6;
  flex-grow: 1;
}

/* Responsive adjustments for expect cards */
@media (max-width: 768px) {
  .expect-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .expect-card {
    padding: 1.5rem;
  }

  .expect-badge {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  .expect-card h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .expect-card {
    padding: 1.25rem;
  }

  .expect-badge {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  .expect-card h3 {
    font-size: 1.1rem;
  }

/* Footer Styles */
footer {
    background: linear-gradient(135deg, #08335b 0%, #1a237e 100%);
    color: #ffffff;
    padding: 1.5rem 0 0.5rem;
    margin-top: 0;
}

.footer-bottom-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo-bottom {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem; /* reduced from 1.5rem */
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.footer-links-bottom {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.footer-links-bottom a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

.footer-links-bottom a:hover {
    color: #e3f2fd;
}

/* Footer Styles */
footer {
    background: linear-gradient(135deg, #08335b 0%, #1a237e 100%);
    color: #ffffff;
    padding: 1.5rem 0 0.5rem;
    margin-top: 0;
}

.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo-bottom {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem; /* reduced from 1.5rem */
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.footer-links-bottom {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.footer-links-bottom a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

.footer-links-bottom a:hover {
    color: #e3f2fd;
}

.footer-content {
    display: grid;
    grid-template-columns: 0.8fr 1.4fr 1.6fr;
    gap: 1.4rem;
    margin-bottom: 1.25rem;
    justify-items: stretch;
    align-items: start;
    width: 100%;
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

.footer-section h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.05rem; /* reduced from 1.25rem */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.footer-section p {
    margin-bottom: 0.35rem;
    color: #e3f2fd;
    line-height: 1.35;
}

.footer-section a {
    color: #e3f2fd;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-bottom: 0.3rem;
    line-height: 1.35;
}

.footer-section a:hover {
    color: #ffffff;
}

.footer-address div {
    color: #e3f2fd;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom .made-by {
    color: #e3f2fd;
    font-size: 0.9rem;
}

.footer-bottom .made-by a {
    color: #90caf9;
    text-decoration: none;
    font-weight: 600;
}

.footer-bottom .made-by a:hover {
    color: #ffffff;
}

/* Footer Responsive Design */
@media (max-width: 768px) {
    .footer-bottom-row {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-links-bottom {
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        justify-items: center;
    }

    .footer-section h3 {
        text-align: center;
    }
    .footer-section p {
        text-align: center;
    }
    .footer-address div {
        text-align: center;
    }

    .footer-bottom .container {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    footer {
        padding: 2rem 0 1rem;
    }

    .footer-logo-bottom {
        font-size: 1.25rem;
    }

    .footer-links-bottom {
        gap: 1rem;
    }

    .footer-section h3 {
        font-size: 1.1rem;
    }
}

}