/* Universal Styles */
html, body {
    width: 100%;
    overflow-x: hidden; /* Prevents horizontal scrolling */
}
html { 
    scroll-behavior: smooth; 
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}
body {
    background-color: #F8F9FA; /* lightGray */
    background-image: radial-gradient(circle at top left, #ffffff, #F8F9FA);
    transition: background-color 0.5s ease;
}
.dark body {
    background-color: #1A202C; /* darkCharcoal */
    background-image: radial-gradient(circle at top left, #2D3748, #1A202C);
}

/* Enhanced Buttons & Links */
.bg-primary, .bg-yellow-500, .bg-accentGreen {
    background-image: linear-gradient(45deg, var(--tw-gradient-stops));
    transition: all 0.3s ease;
    border: none;
}
.bg-primary { --tw-gradient-from: #3182CE; --tw-gradient-to: #2B6CB0; }
.bg-yellow-500 { --tw-gradient-from: #F6E05E; --tw-gradient-to: #D69E2E; }
.bg-accentGreen { --tw-gradient-from: #48BB78; --tw-gradient-to: #38A169; }

.bg-primary:hover, .bg-yellow-500:hover, .bg-accentGreen:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(43, 108, 176, 0.6);
}

.hidden.md\:flex a {
    position: relative;
    padding-bottom: 4px;
}
.hidden.md\:flex a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
    background-color: #3182CE; transform: scaleX(0); transform-origin: right;
    transition: transform 0.3s ease-out;
}
.hidden.md\:flex a:hover::after { transform: scaleX(1); transform-origin: left; }
.hidden.md\:flex a.text-primary::after { display: none; }

/* Hero Sections (CORRECTED) */
#hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;   /* Horizontally centers content */
    align-items: center;       /* Vertically centers content */
    /* padding-top is no longer needed */
    background-size: cover;
    background-position: center;
}
/* --- CORRECTED: Wave Divider --- */
/* By default (on mobile), the wave is hidden. */
.wave-divider {
    display: none;
}
/* On medium screens (768px) and up, the wave is shown. */
@media (min-width: 768px) {
    .wave-divider {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        transform: rotate(180deg);
    }
    .wave-divider svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 150px;
    }
    .wave-divider .shape-fill { 
        fill: #F8F9FA; 
        transition: fill 0.5s ease;
    }
    .dark .wave-divider .shape-fill { 
        fill: #1A202C; 
    }
}
/* This rule targets all inner-page heroes and adds the required padding */
.about-hero, 
.services-hero, 
.gallery-hero, 
.blog-hero, 
.contact-hero {
    background-size: cover;
    background-position: center;
    padding-top: 8rem;
    padding-bottom: 5rem;
}
/* Specific background images for each page hero */
.about-hero {
    background-image: linear-gradient(to bottom right, rgba(43, 108, 176, 0.9), rgba(49, 130, 206, 0.9)), url('images/dec8.jpeg');
}
.services-hero {
    background-image: linear-gradient(to bottom right, rgba(43, 108, 176, 0.9), rgba(49, 130, 206, 0.9)), url('images/dec3.jpg');
}
.gallery-hero {
    background-image: linear-gradient(to bottom right, rgba(43, 108, 176, 0.9), rgba(49, 130, 206, 0.9)), url('images/smile7.jpeg');
}
.blog-hero {
    background-image: linear-gradient(to bottom right, rgba(43, 108, 176, 0.9), rgba(49, 130, 206, 0.9)), url('images/smile2.jpeg');
}
.contact-hero {
    background-image: linear-gradient(to bottom right, rgba(1, 15, 41, 0.938), rgba(7, 115, 238, 0.74)), url('images/dec8.jpeg');
}

/* Flip Cards (for both index and about pages) */
.flip-card, .interactive-card { 
    perspective: 1000px; 
}
.flip-card-inner, .interactive-card-inner { 
    position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; 
}
.flip-card:hover .flip-card-inner, .flip-card.flipped .flip-card-inner, .interactive-card:hover .interactive-card-inner { 
    transform: rotateY(180deg); 
}
.flip-card-front, .flip-card-back, .interactive-card-front, .interactive-card-back { 
    position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 0.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.5rem; text-align: center; 
}
.flip-card-back, .interactive-card-back { 
    transform: rotateY(180deg); 
}

/* Wave Divider */
.wave-divider { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
.wave-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: 150px; }
.wave-divider .shape-fill { fill: #F8F9FA; transition: fill 0.5s ease; }
.dark .wave-divider .shape-fill { fill: #1A202C; }

/* General Animations & Hovers */
.gallery-img:hover { transform: scale(1.05); }
.service-card-final, .blog-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card-final:hover, .blog-card:hover,
.service-card-final:active, .blog-card:active { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
}

/* Swiper Carousel */
.swiper-button-next, .swiper-button-prev { color: #2B6CB0; }
.dark .swiper-button-next, .dark .swiper-button-prev { color: #F8F9FA; }
.swiper-pagination-bullet-active { background-color: #F6E05E; }

/* Scroll Animations */
.fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }

/* "Glimpse" Slider */
.glimpse-slider { width: 100%; height: 320px; }
@media (min-width: 768px) { .glimpse-slider { height: 400px; } }
.glimpse-slide-content { position: relative; width: 100%; height: 100%; border-radius: 0.5rem; overflow: hidden; }
.glimpse-slide-content img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-out; }
a.group:hover .glimpse-slide-content img { transform: scale(1.1); }
.glimpse-slide-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); }
.glimpse-title { color: white; transition: transform 0.4s ease-out; font-weight: bold; font-size: 1.25rem; line-height: 1.75rem; }
a.group:hover .glimpse-title { transform: translateY(-8px); }
.glimpse-nav { color: white; }
.glimpse-slider .swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.7); }
.glimpse-slider .swiper-pagination-bullet-active { background-color: #F6E05E; }

/* Tooth Anatomy Section & Modals */
#anatomy-info h3 { color: #2B6CB0; }
.dark #anatomy-info h3 { color: #3182CE; }
#hygiene-modal.visible, #anatomy-modal.visible {
    opacity: 1;
    pointer-events: auto;
}
#hygiene-modal.visible .modal-content, #anatomy-modal.visible .modal-content {
    transform: scale(1);
    opacity: 1;
}

/* Services Page Card Fix */
#services-grid a.group { display: flex; flex-direction: column; }
#services-grid .relative { display: flex; flex-direction: column; flex-grow: 1; }
.social-icon-link { color: #9ca3af; transition: color 0.2s; }
.social-icon-link:hover { color: #3182CE; }
.social-icon-link svg { width: 24px; height: 24px; }

/* Before & After Slider */
.comparison-slider { position: relative; width: 100%; overflow: hidden; border-radius: 0.5rem; }
.comparison-slider img { display: block; width: 100%; height: auto; object-fit: cover; pointer-events: none; }
.comparison-slider .after-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.comparison-slider .slider-handle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 100%; background-color: white; cursor: ew-resize; z-index: 10; }
.comparison-slider .handle-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: space-evenly; box-shadow: 0 0 10px rgba(0,0,0,0.3); }
.handle-circle::before, .handle-circle::after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 5px 6px 5px 0; }
.handle-circle::before { border-color: transparent #3182CE transparent transparent; transform: translateX(2px); }
.handle-circle::after { border-color: transparent transparent transparent #3182CE; transform: translateX(-2px); }

/* Scroll-to-Top Button Visibility */
#scroll-to-top.is-visible { opacity: 1; pointer-events: auto; }