@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Roboto+Slab:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: "High Summit";
  src: url("../../fonts/High-Summit.ttf") format("TrueType");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ================================================== */
/* Celebrity Dentistry Brand Theme                    */
/* Gold: #9E8A4C | Charcoal: #262626 | Cream: #F1F1ED */
/* ================================================== */

* {
  /* Primary accent — gold/champagne */
  --primary-color: #9E8A4C;
  --primary-color-rgb: 158, 138, 76;
  --secondary-color: #B8A265;
  --secondary-color-rgb: 184, 162, 101;

  /* Fonts */
  --body-font: "Roboto", Helvetica, Arial, sans-serif;
  --heading-font: "Roboto", Helvetica, Arial, sans-serif;
  --heading-font-color: #9F8B4C;
  --mainmenu-font: "Roboto", Helvetica, Arial, sans-serif;
  --body-font-color: #4B4F58;
  --body-font-color-dark: rgba(255, 255, 255, 0.75);

  /* Dark backgrounds — charcoal, not navy */
  --bg-dark-1: #262626;
  --bg-dark-2: #1a1a1a;
  --bg-dark-3: #111111;
  --bg-dark-1-rgb: 38, 38, 38;

  /* Buttons — square corners to match CD site */
  --btn-rounded: 0px;

  /* Rounded corners — subtle for CD style */
  --rounded-1: 4px;
}

/* ================================================== */
/* Body & base fonts                                  */
/* ================================================== */

body {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  color: #4B4F58;
}

/* h1 — Roboto Slab: strong, professional hero heading */
h1, .h1 {
  font-family: "Roboto Slab", serif !important;
  color: #9F8B4C;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* h2, h3 — High Summit: stylish script for section headings */
h2, h3, .h2, .h3 {
  font-family: "High Summit", cursive !important;
  color: #9F8B4C;
  font-weight: normal;
  letter-spacing: 0.02em;
}

/* h4–h6 — Roboto Slab: readable subheadings */
h4, h5, h6, .h4, .h5, .h6 {
  font-family: "Roboto Slab", serif !important;
  color: #9F8B4C;
  font-weight: 600;
}

/* Dark sections — keep headings white */
.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6 {
  color: #ffffff !important;
}

/* ================================================== */
/* Background colors                                  */
/* ================================================== */

.bg-dark,
.bg-dark-1,
header.scroll-dark {
  background-color: #262626 !important;
}

.bg-dark-2 {
  background-color: #1a1a1a !important;
}

.bg-color-op-1 {
  background-color: #F1F1ED !important;
}

.bg-color {
  background-color: #9E8A4C !important;
}

footer.section-dark,
.section-dark {
  background-color: #262626 !important;
}

/* Gradient uses gold tones */
.bg-gradient-1 {
  background: linear-gradient(0deg, rgba(158, 138, 76, 0.08) 0%, rgba(184, 162, 101, 0.15) 100%) !important;
}

/* ================================================== */
/* Buttons — square, gold                             */
/* ================================================== */

.btn-main {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
}

.btn-main::before,
.btn-main::after {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

/* ================================================== */
/* Rounded corners — reduce to match CD style         */
/* ================================================== */

.rounded-1 {
  border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
}

/* ================================================== */
/* Swiper uses gold accent                            */
/* ================================================== */

:root {
  --swiper-theme-color: #9E8A4C;
}

/* ================================================== */
/* Accent/icon color                                  */
/* ================================================== */

.id-color {
  color: #9E8A4C !important;
}

/* ================================================== */
/* Subtitle — gold uppercase label                    */
/* ================================================== */

.subtitle {
  color: #9E8A4C;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13px;
}

/* ================================================== */
/* Preloader — gold spinner                           */
/* ================================================== */

#de-loader::before {
  border-top-color: #9E8A4C;
}

/* ================================================== */
/* FAQ / Accordion — gold active state                */
/* ================================================== */

.accordion-section-title.active {
  color: #9E8A4C !important;
}

/* ================================================== */
/* Counter numbers — gold                             */
/* ================================================== */

.de_count h3 {
  color: #9E8A4C;
}

/* ================================================== */
/* Social icons hover                                 */
/* ================================================== */

.social-icons a:hover {
  background: #9E8A4C;
  border-color: #9E8A4C;
}

/* ================================================== */
/* Tag badges (doctor credentials)                    */
/* ================================================== */

.bg-color-op-1.rounded-1 {
  background-color: rgba(158, 138, 76, 0.08) !important;
  color: #9E8A4C;
}

span.d-inline-block.bg-color-op-1 {
  background-color: rgba(158, 138, 76, 0.1) !important;
  color: #9E8A4C;
}

/* ================================================== */
/* Testimonial cards                                  */
/* ================================================== */

.gradient-white-top {
  background: linear-gradient(180deg, rgba(158, 138, 76, 0.04) 0%, #ffffff 100%);
}

/* ================================================== */
/* Number steps (01, 02, 03)                          */
/* ================================================== */

.fs-60.id-color {
  color: #9E8A4C !important;
  opacity: 0.3;
}

/* ================================================== */
/* Nav menu — Roboto (High Summit reserved for headings) */
/* ================================================== */

#mainmenu li a,
#mainmenu li a.menu-item {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

#mainmenu > li > a:hover,
#mainmenu li.active a {
  color: #9E8A4C !important;
}

#mainmenu li li a:hover {
  color: #ffffff !important;
}

/* Mobile header inherits --heading-font-color (gold) as its background,
   which matches the logo's gold stroke and makes it invisible. Force charcoal. */
header.header-mobile {
  background: #262626 !important;
}

/* ================================================== */
/* Triangle decorators — use charcoal                 */
/* ================================================== */

.triangle-bottomright-dark {
  border-color: transparent transparent #262626 transparent !important;
}

/* ================================================== */
/* Floating WhatsApp Widget (all screens)             */
/* ================================================== */

.cd-wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.cd-wa-float__bubble {
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  font-size: 13px;
  font-weight: 600;
  color: #262626;
  max-width: 200px;
  line-height: 1.4;
  display: none;
  animation: cdFadeUp .25s ease;
}

.cd-wa-float:hover .cd-wa-float__bubble {
  display: block;
}

.cd-wa-float__btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}

.cd-wa-float__btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,0.6);
}

.cd-wa-float__btn svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

/* Sticky mobile CTA bar — shown only on mobile */
.cd-sticky-cta {
  display: none;
}

@keyframes cdFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================== */
/* Mobile Responsive — 991px (tablet)                 */
/* ================================================== */

@media (max-width: 991px) {
  /* Swiper-overlay hero: un-absolute the content, stack below slider */
  #section-intro .abs.abs-centered {
    position: static !important;
    transform: none !important;
    background: #1a1a1a;
    padding: 40px 0 32px;
    width: 100% !important;
  }

  #section-intro .abs.abs-centered .container {
    padding: 0 20px;
  }

  #section-intro .mh-800 {
    min-height: 320px !important;
  }

  /* Swiper hero — anchor absolutely-positioned swiper inside .mh-800 */
  #section-intro .mh-800 {
    position: relative !important;
    overflow: hidden !important;
  }
  #section-intro .swiper-inner {
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Fix: content div must not be abs on tablet either */
  #section-intro > .relative {
    display: flex;
    flex-direction: column;
  }

  /* Rating row under hero — stack on tablet */
  #section-intro .d-lg-flex {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
  }

  /* Bottom abs bar with NABH items — static on tablet */
  #section-intro .abs.w-100.bottom-0 {
    position: static !important;
    background: rgba(26,26,26,0.95);
    padding: 16px 0;
  }

  /* Free-smile-check: floating widgets over image — hide on tablet */
  #section-intro .col-lg-6 .abs.end-0,
  #section-intro .col-lg-6 .abs.start-0 {
    display: none !important;
  }

  /* hero-v2 grid already handled inline, reinforce */
  .hero-v2__grid {
    grid-template-columns: 1fr !important;
  }

  .hero-v2 {
    padding: 110px 0 56px !important;
  }
}

/* ================================================== */
/* Mobile Responsive — 767px                          */
/* ================================================== */

@media (max-width: 767px) {
  /* Testimonial avatar — force square so border-radius:100% renders as circle */
  .de_testi_by img.circle {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }

  /* Typography */
  h1, .h1 { font-size: 1.9rem !important; line-height: 1.2 !important; }
  h2, .h2 { font-size: 1.55rem !important; }
  h3, .h3 { font-size: 1.25rem !important; }
  h4, .h4 { font-size: 1.05rem !important; }

  /* Section padding */
  section, .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Logo */
  #logo img { max-height: 44px !important; }

  /* Buttons — full width */
  .btn-main {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 12px;
    padding: 14px 20px !important;
  }

  .btn-pill-gold {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 16px 20px !important;
  }

  /* Columns: ensure stack */
  .row > [class*="col-"] { margin-bottom: 20px; }

  /* Counter widgets */
  .de_count { margin-bottom: 20px; text-align: center; }

  /* Testimonial swiper slides */
  .swiper-slide { padding: 16px !important; }

  /* Trust bar — force 2-col grid on mobile */
  .col-lg-1-5 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Decorative triangles */
  .triangle-bottomright-dark { display: none !important; }

  /* Hero jarallax (smile-makeover) */
  .jarallax.text-light.d-flex {
    padding: 90px 0 48px !important;
    min-height: auto !important;
  }

  /* hero-v2 */
  .hero-v2 { padding: 90px 0 48px !important; }
  .hero-v2 h1 { font-size: 1.9rem !important; }
  .hero-v2__stats { flex-wrap: wrap !important; border-radius: 12px; }
  .hero-v2__stats .stat {
    flex: 1 1 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 14px 16px !important;
  }
  .hero-v2__stats .stat:last-child { border-bottom: none; }
  .hero-v2__features { flex-wrap: wrap !important; border-radius: 12px; }
  .hero-v2__features div {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 12px 16px !important;
    font-size: 13px !important;
    white-space: normal !important;
  }
  .hero-v2__features div:last-child { border-bottom: none; }
  .hero-v2__image img { height: 260px !important; border-radius: 20px !important; }
  .hero-v2__image::before { display: none; }
  .hero-v2__cta-row { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .hero-v2__badges { gap: 8px !important; }
  .hero-v2__badges span { font-size: 11px !important; padding: 8px 12px !important; }
  .hero-v2__avatars { flex-wrap: wrap; gap: 8px; }

  /* Smile-makeover hero right column image */
  .jarallax .col-lg-6 img.w-100 {
    height: 280px !important;
    border-radius: 12px;
  }

  /* Floating abs card inside hero (20+ years badge) */
  .jarallax .abs.bottom-0 { display: none !important; }

  /* 2-column half-fluid sections (family screening) */
  .container-fluid .row.g-0.align-items-stretch {
    flex-direction: column;
  }

  /* 2-col section: image FIRST on mobile, text below */
  .container-fluid .row.g-0 .col-lg-6.relative {
    order: -1;
  }

  /* Left charcoal text col — compact on mobile */
  .container-fluid .row.g-0 .col-lg-6.d-flex {
    min-height: auto !important;
    order: 1;
  }
  .container-fluid .row.g-0 .col-lg-6 .text-light.py-5 {
    padding: 32px 20px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  .container-fluid .row.g-0 .col-lg-6 ul.ul-check li {
    margin-bottom: 8px;
    font-size: 14px;
  }
  /* Hide long sub-descriptions on mobile — just show bullet titles */
  .container-fluid .row.g-0 .col-lg-6 ul.ul-check li span.fw-400 {
    display: none !important;
  }

  /* Right image col — full width, tall, image on top */
  .container-fluid .row.g-0 .col-lg-6.relative {
    width: 100%;
  }
  .container-fluid .row.g-0 .col-lg-6 img {
    min-height: 280px !important;
    max-height: 420px !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #1a1a1a;
    display: block !important;
  }

  /* Contact section form */
  #contact .row.g-5 { gap: 32px !important; }
  #contact .rounded-1.p-5 { padding: 24px 20px !important; }
  #contact input,
  #contact select,
  #contact textarea {
    font-size: 15px !important;
    padding: 12px 14px !important;
  }
  #contact .btn-main.w-100 { font-size: 14px !important; padding: 14px !important; }

  /* Contact info icons */
  #contact .d-flex.flex-column { gap: 24px !important; }

  /* Footer stacking */
  footer .col-lg-4,
  footer .col-lg-3,
  footer .col-md-4,
  footer .col-md-3,
  footer .col-sm-6 {
    margin-bottom: 28px;
  }

  /* Footer logo */
  .logo-footer { max-height: 48px !important; }

  /* Subfooter */
  .subfooter .de-flex {
    flex-direction: column !important;
    text-align: center;
    gap: 12px;
  }

  /* Gallery cards — exclude testimonial circle avatars */
  .owl-carousel.four-cols-center-dots .item img:not(.circle),
  .item img[style*="height:240px"] {
    height: 200px !important;
  }

  /* Accordion */
  .accordion-section-title {
    font-size: 14px !important;
    padding: 14px 16px !important;
  }

  /* CTA bar (gold bg) */
  .bg-color.text-light .row.g-4.align-items-center {
    flex-direction: column;
    text-align: center;
  }
  .bg-color.text-light .col-lg-3.text-lg-end {
    text-align: center !important;
  }

  /* Floating WA widget position on mobile */
  .cd-wa-float {
    bottom: 24px !important;
    right: 16px !important;
  }
}

/* ================================================== */
/* Mobile Responsive — 480px                          */
/* ================================================== */

@media (max-width: 480px) {
  h1, .h1 { font-size: 1.65rem !important; }
  h2, .h2 { font-size: 1.35rem !important; }

  .fs-60 { font-size: 2.2rem !important; }
  .fs-40 { font-size: 1.7rem !important; }
  .fs-28 { font-size: 1.3rem !important; }

  /* Trust bar — single column on very small screens */
  .col-lg-1-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 12px !important;
  }

  /* hero-v2 */
  .hero-v2 h1 { font-size: 1.65rem !important; }
  .hero-v2__badges span { font-size: 11px !important; }
  .hero-v2__image img { height: 220px !important; }

  /* Contact form */
  #contact .rounded-1.p-5 { padding: 20px 16px !important; }
}