/* ===================================================================
   Swisso Dent brand theme — preview.
   Loads AFTER style.css + scheme-01.css so these rules win.
   Based on the Kurumsal Kimlik palette:
     Ivory White   #F7F4EE   (page background)
     Warm White    #FFFFFF   (card background)
     Soft Cream    #EFE7DA   (subtle section background)
     Stone Beige   #D8CBB8   (dividers / muted fills)
     Soft Greige   #CFC7BC   (tertiary support)
     Warm Taupe    #8D7B68   (body text)
     Deep Taupe    #5F5146   (headings, dark accents)
     Champagne Gold#C9A56A   (primary accent, CTAs, details)
   Typography: Cormorant Garamond (headings) + Lato (body).
   =================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;700;900&display=swap");

* {
    /* Accent = Champagne Gold */
    --primary-color: #C9A56A;
    --primary-color-rgb: 201, 165, 106;
    /* Secondary = Warm Taupe (used in gradients / swiper dots) */
    --secondary-color: #8D7B68;
    --secondary-color-rgb: 141, 123, 104;

    /* Typography */
    --body-font: "Lato", Helvetica, Arial, sans-serif;
    --heading-font: "Cormorant Garamond", Georgia, serif;
    --body-font-color: #8D7B68;
    --body-font-color-dark: rgba(247, 244, 238, 0.8);
    --heading-font-color: #5F5146;

    /* Backgrounds */
    --bg-light: #FFFFFF;
    --bg-color-even: #EFE7DA;
    --bg-color-odd: #F7F4EE;
    --bg-grey: #EFE7DA;
    --bg-dark-1: #5F5146;
    --bg-dark-2: #4A3F36;
    --bg-dark-1-rgb: 95, 81, 70;

    /* Button */
    --btn-color: #ffffff;
    --btn-hover-bg: #5F5146;
}

/* Page canvas */
body {
    background-color: #F7F4EE;
}

/* -------------------------------------------------------------------
   Headings — serif, Deep Taupe
   ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--heading-font);
    color: var(--heading-font-color);
    letter-spacing: 0.01em;
}
h1 {
    font-weight: 600;
    letter-spacing: 0.015em;
}
h2 {
    font-weight: 600;
}

/* Subtitle above hero H1 */
.subtitle {
    color: #C9A56A;
    font-family: var(--heading-font);
    font-style: italic;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 14px;
}

/* -------------------------------------------------------------------
   Accent / brand color utility
   ------------------------------------------------------------------- */
.id-color,
.id-color-2 {
    color: #C9A56A !important;
}

.bg-color {
    background: #C9A56A !important;
}
.bg-color-op-1 {
    background: rgba(201, 165, 106, 0.10) !important;
}

/* Border / divider accents */
.border-bottom {
    border-bottom: 1px solid rgba(201, 165, 106, 0.45) !important;
}

/* Star ratings → gold */
.d-stars i,
.d-rating i,
.fa-star {
    color: #C9A56A !important;
}

/* -------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */
.btn-main {
    background: #C9A56A !important;
    color: #ffffff !important;
    border-color: #C9A56A !important;
    font-family: var(--body-font);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 2px !important;
}
.btn-main:hover {
    background: #5F5146 !important;
    border-color: #5F5146 !important;
    color: #ffffff !important;
}
.btn-main.btn-line {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid #C9A56A !important;
}
.btn-main.btn-line:hover {
    background: #C9A56A !important;
    color: #ffffff !important;
}

/* -------------------------------------------------------------------
   Header / navbar
   ------------------------------------------------------------------- */
header #mainmenu li a {
    font-family: var(--body-font);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 13px;
    color: #5F5146;
}
header.transparent.scroll-light:not(.smaller) #mainmenu li a {
    color: #ffffff;
}
header.smaller.scroll-light #mainmenu li a,
header.header-light #mainmenu li a {
    color: #5F5146;
}
/* Top-level nav hover — gold text, no background fill */
header #mainmenu > li > a:hover,
header #mainmenu > li.active > a {
    color: #C9A56A !important;
    background: transparent !important;
}

/* Dropdown submenu — clean white panel, cream hover instead of full gold fill */
header #mainmenu li ul {
    background: #FFFFFF !important;
    border: 1px solid #EFE7DA;
    box-shadow: 0 8px 28px rgba(95, 81, 70, 0.10);
    border-radius: 4px;
    padding: 6px 0;
    min-width: 230px;
}
header #mainmenu li li {
    margin: 0;
}
header #mainmenu li li a {
    color: #5F5146 !important;
    background: transparent !important;
    padding: 10px 18px !important;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    display: block;
}
header #mainmenu li li a:hover,
header #mainmenu ul li:hover > a {
    background: #F7F4EE !important;
    color: #C9A56A !important;
}

/* Logo text (Swisso Dent wordmark) matches Cormorant brand style */
.logo-text {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 22px;
}
header.transparent.scroll-light:not(.smaller) .logo-text {
    color: #ffffff;
}
header.smaller.scroll-light .logo-text,
header.header-light .logo-text {
    color: #5F5146;
}

/* Sticky / scrolled header background */
header.smaller.scroll-light {
    background: rgba(247, 244, 238, 0.98) !important;
    box-shadow: 0 4px 20px rgba(95, 81, 70, 0.08);
}

/* Language toggle — gold outline */
#lang-toggle {
    border-color: rgba(201, 165, 106, 0.5);
    color: #5F5146;
}
#lang-toggle:hover {
    background: rgba(201, 165, 106, 0.1);
}

/* -------------------------------------------------------------------
   Hero — darker overlay for slider to make white text pop on cream brand
   ------------------------------------------------------------------- */
#section-intro .sw-overlay {
    background: rgba(95, 81, 70, 0.35);
}
#section-intro h1 {
    color: #ffffff;
}

/* -------------------------------------------------------------------
   Section backgrounds
   ------------------------------------------------------------------- */
.bg-light {
    background: #FFFFFF !important;
}
section.bg-dark,
section.bg-color {
    background: #5F5146 !important;
    color: #F7F4EE;
}
section.bg-color .subtitle,
section.bg-color h1,
section.bg-color h2,
section.bg-color h3 {
    color: #ffffff !important;
}

/* -------------------------------------------------------------------
   Testimonial / feature cards
   ------------------------------------------------------------------- */
.p-40.bg-light,
.gradient-white-top {
    background: #FFFFFF !important;
    border: 1px solid #EFE7DA;
    border-radius: 4px !important;
    box-shadow: 0 4px 20px rgba(95, 81, 70, 0.04);
}

/* Testimonial card icofont user icons — gold on cream */
[class*="icofont-user-"] {
    color: #C9A56A;
}
.bg-color-op-1.d-flex {
    background: rgba(201, 165, 106, 0.08) !important;
}

/* -------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------- */
footer.section-dark {
    background: #5F5146 !important;
    color: #EFE7DA;
}
footer.section-dark h5,
footer.section-dark .h5 {
    color: #F7F4EE;
    font-family: var(--heading-font);
    letter-spacing: 0.05em;
}
footer.section-dark a {
    color: #D8CBB8;
}
footer.section-dark a:hover {
    color: #C9A56A;
}
footer .subfooter {
    border-top: 1px solid rgba(247, 244, 238, 0.12);
}

/* -------------------------------------------------------------------
   Booking CTA strip
   ------------------------------------------------------------------- */
section.bg-color.text-light {
    background: #C9A56A !important;
}
section.bg-color.text-light h3 {
    color: #ffffff !important;
}

/* -------------------------------------------------------------------
   Swiper nav dots — gold
   ------------------------------------------------------------------- */
.swiper-pagination-bullet-active,
.owl-theme .owl-dots .owl-dot.active span {
    background: #C9A56A !important;
}

/* -------------------------------------------------------------------
   Blockquote in blog posts — gold left border
   ------------------------------------------------------------------- */
blockquote {
    border-left: 3px solid #C9A56A;
    background: #F7F4EE;
}

/* -------------------------------------------------------------------
   Rounded corners → tighter, editorial feel
   ------------------------------------------------------------------- */
.rounded-1 {
    border-radius: 4px !important;
}

/* -------------------------------------------------------------------
   Redesigned testimonial cards (homepage carousel)
   ------------------------------------------------------------------- */
/* Owl carousel: stretch every slide to the tallest item so cards share
   a single baseline and the same visible height. */
.four-cols-center-dots.owl-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}
.four-cols-center-dots.owl-carousel .owl-item {
    display: flex;
    align-items: stretch;
}
.four-cols-center-dots.owl-carousel .owl-item > .item {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.testi-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #EFE7DA;
    border-radius: 4px;
    padding: 40px 34px 32px;
    margin: 12px 6px;
    text-align: left;
    box-shadow: 0 4px 30px rgba(95, 81, 70, 0.05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
    min-height: 320px;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.testi-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #C9A56A 0%, rgba(201, 165, 106, 0) 100%);
}
.testi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(95, 81, 70, 0.12);
    border-color: rgba(201, 165, 106, 0.4);
}
.testi-card .testi-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 18px;
}
.testi-card .testi-stars i {
    color: #C9A56A;
    font-size: 13px;
}
.testi-card .testi-quote-mark {
    position: absolute;
    top: 24px;
    right: 28px;
    color: #C9A56A;
    font-size: 42px;
    opacity: 0.18;
    line-height: 1;
    pointer-events: none;
}
.testi-card .testi-body {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 19px;
    line-height: 1.55;
    color: #5F5146;
    font-style: italic;
    margin: 0 0 22px;
    flex: 1 1 auto;
}
.testi-card .testi-body::before { content: "\201C"; margin-right: 2px; }
.testi-card .testi-body::after  { content: "\201D"; margin-left: 2px; }
.testi-card .testi-divider {
    width: 44px;
    height: 1px;
    background: #C9A56A;
    margin-bottom: 16px;
}
.testi-card .testi-by {
    display: flex;
    align-items: center;
    gap: 12px;
}
.testi-card .testi-avatar {
    width: 32px;
    height: 32px;
    background: transparent;
    color: #C9A56A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

/* testimonials.html cards — strip the gold-tinted background from the
   avatar circle, leave just the icon */
.p-40 .circle.absolute.w-40px.bg-color-op-1 {
    background: transparent !important;
}
.p-40 .circle.absolute.w-40px.bg-color-op-1 i {
    font-size: 26px;
}
.testi-card .testi-name {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-size: 17px;
    color: #5F5146;
    letter-spacing: 0.04em;
}

/* Re-skin the testimonials section background to Soft Cream */
#section-testimonials,
section.testimonials-section {
    background: #F7F4EE !important;
}
/* Fallback: target the section containing the four-cols-center-dots carousel */
section:has(.four-cols-center-dots) {
    background: #F7F4EE !important;
}
section:has(.four-cols-center-dots) .subtitle {
    color: #C9A56A;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 13px;
    font-family: "Lato", sans-serif;
    font-style: normal;
    font-weight: 700;
}
section:has(.four-cols-center-dots) h2 {
    color: #5F5146;
    margin-bottom: 16px;
}
section:has(.four-cols-center-dots) p {
    color: #8D7B68;
}

/* Owl dots — gold */
.owl-theme .owl-dots .owl-dot span {
    background: rgba(201, 165, 106, 0.3) !important;
    transition: background .2s;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #C9A56A !important;
}

/* -------------------------------------------------------------------
   Service cards with + button — equal heights, button pinned to bottom
   so the + circles line up across the row regardless of copy length.
   Scoped via :has() so only cards containing a .btn-plus are affected.
   ------------------------------------------------------------------- */
.bg-white.rounded-1:has(.btn-plus) {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.bg-white.rounded-1:has(.btn-plus) > .relative {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.bg-white.rounded-1:has(.btn-plus) > .relative > p {
    flex: 1 1 auto;
    margin-bottom: 24px;
}
.bg-white.rounded-1:has(.btn-plus) > .relative > .btn-plus {
    margin-top: auto;
    align-self: flex-start;
}

/* -------------------------------------------------------------------
   Pediatric dentistry — friendlier, more playful palette + shapes.
   Still on brand (ivory + gold) but with pastel peach accent, rounder
   cards, bouncier interactions, a handwritten heading accent.
   ------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap");

body[data-page="servicePediatric"] {
    --accent-peach: #F6C9A5;
    --accent-mint: #BEDFC9;
    --accent-pink: #F3C6C9;
    background: linear-gradient(180deg, #FFF6EE 0%, #F7F4EE 40%, #F7F4EE 100%);
}

/* Hero sub-title gets a whimsical script font */
body[data-page="servicePediatric"] #subheader .subtitle,
body[data-page="servicePediatric"] section .subtitle {
    font-family: "Caveat", "Cormorant Garamond", cursive;
    font-style: normal;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #E0916A;
}

body[data-page="servicePediatric"] h1,
body[data-page="servicePediatric"] h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    color: #5F5146;
}

/* Rounder, more playful cards */
body[data-page="servicePediatric"] .bg-white,
body[data-page="servicePediatric"] .p-40.bg-light,
body[data-page="servicePediatric"] .rounded-1 {
    border-radius: 22px !important;
}

/* Service / feature tiles: pastel tinted backgrounds */
body[data-page="servicePediatric"] .col-lg-6 > .bg-color-op-1,
body[data-page="servicePediatric"] .col-lg-4 > .bg-color-op-1,
body[data-page="servicePediatric"] .col-md-4 > .bg-color-op-1,
body[data-page="servicePediatric"] .col-md-6 > .bg-color-op-1 {
    background: rgba(246, 201, 165, 0.22) !important;
    border-radius: 22px !important;
}

/* Sprinkle soft peach & mint on the alternating feature blocks */
body[data-page="servicePediatric"] .row > [class*="col-"]:nth-child(odd) .bg-color-op-1 {
    background: rgba(246, 201, 165, 0.22) !important;
}
body[data-page="servicePediatric"] .row > [class*="col-"]:nth-child(even) .bg-color-op-1 {
    background: rgba(190, 223, 201, 0.30) !important;
}

/* Icon bubbles: warmer, bouncy hover */
body[data-page="servicePediatric"] img[src*="icons/tooth-"],
body[data-page="servicePediatric"] img[src*="icons/"] {
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
body[data-page="servicePediatric"] .hover:hover img[src*="icons/"],
body[data-page="servicePediatric"] .col-lg-3:hover img[src*="icons/"],
body[data-page="servicePediatric"] .col-lg-4:hover img[src*="icons/"] {
    transform: rotate(-6deg) scale(1.08);
}

/* Buttons: rounder pill shape */
body[data-page="servicePediatric"] .btn-main {
    border-radius: 999px !important;
    padding: 14px 28px;
}

/* Quote / testimonial blocks: rounder with peach wash */
body[data-page="servicePediatric"] blockquote,
body[data-page="servicePediatric"] .owl-single-dots {
    background: rgba(246, 201, 165, 0.12);
    border-radius: 22px;
    padding: 24px 28px;
    border-left: 4px solid #F6C9A5;
}

/* Page H1: a little larger and softer */
body[data-page="servicePediatric"] #subheader h1 {
    font-size: 56px;
    line-height: 1.1;
}

/* Star-confetti sparkle on the hero (purely decorative) */
body[data-page="servicePediatric"] #subheader {
    position: relative;
}
body[data-page="servicePediatric"] #subheader::before,
body[data-page="servicePediatric"] #subheader::after {
    content: "✦";
    position: absolute;
    font-size: 22px;
    color: #E0916A;
    opacity: 0.55;
    animation: sparkle 3s ease-in-out infinite;
}
body[data-page="servicePediatric"] #subheader::before {
    top: 20%;
    left: 10%;
}
body[data-page="servicePediatric"] #subheader::after {
    top: 60%;
    right: 12%;
    animation-delay: 1.2s;
}
@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.4; }
    50%      { transform: scale(1.4) rotate(12deg); opacity: 0.85; }
}