/* =========================
   CELEBRITY DENTAL CLINIC
   MASTER STYLESHEET
========================= */

:root{

    --gold:#C9A227;
    --gold-dark:#A78712;
    --gold-light:#F8F2DE;

    --black:#111111;
    --text:#333333;

    --white:#FFFFFF;
    --light:#F8F8F8;

    --shadow:0 10px 30px rgba(0,0,0,0.08);

    --radius:12px;

    --max-width:1200px;

}

/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    font-size:16px;
    line-height:1.8;
    color:var(--text);
    background:var(--white);
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{
    width:90%;
    max-width:var(--max-width);
    margin:auto;
}

/* =========================
   TYPOGRAPHY
========================= */

h1,h2,h3,h4{
    font-family:'Playfair Display',serif;
    color:var(--black);
}

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

h2{
    font-size:2.5rem;
    margin-bottom:20px;
}

h3{
    font-size:1.6rem;
    margin-bottom:15px;
}

.section-header{
    text-align:center;
    margin-bottom:60px;
}

.section-header p{
    max-width:700px;
    margin:auto;
}

/* =========================
   BUTTONS
========================= */

.btn{
    display:inline-block;
    padding:15px 28px;
    border-radius:8px;
    font-weight:600;
    transition:0.3s;
}

.btn-gold{
    background:var(--gold);
    color:var(--white);
}

.btn-gold:hover{
    background:var(--gold-dark);
}

.btn-black{
    background:var(--black);
    color:var(--white);
}

.btn-black:hover{
    opacity:.9;
}

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

.btn-outline:hover{
    background:var(--gold);
    color:white;
}

/* =========================
   HEADER
========================= */

header{
    position:sticky;
    top:0;
    z-index:1000;
    background:white;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
}

.logo{
    font-family:'Playfair Display',serif;
    font-size:1.7rem;
    color:var(--black);
    font-weight:700;
}

.logo span{
    color:var(--gold);
}

.nav-menu{
    display:flex;
    gap:30px;
}

.nav-menu a{
    color:var(--black);
    font-weight:500;
}

.nav-menu a:hover{
    color:var(--gold);
}

/* =========================
   MOBILE NAVIGATION
========================= */

.mobile-toggle{
    display:none;
    font-size:30px;
    cursor:pointer;
}

/* =========================
   HERO
========================= */

.hero{

    min-height:90vh;

    background:
    linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.55)),
    url("../images/hero.webp");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-content{
    max-width:800px;
}

.hero h1{
    color:#fff;
}

.hero p{

    color:rgba(255,255,255,.95);

    font-size:1.25rem;
}

/* =========================
   IMAGES
========================= */
.image-section{
    padding:80px 0;
}

.featured-image{

    width:100%;
    height:auto;

    object-fit:cover;
    object-position:center;

    border-radius:24px;

    box-shadow:
    0 25px 50px rgba(0,0,0,.15);

    transition:all .4s ease;
}

.featured-image:hover{

    transform:translateY(-5px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.20);
}

/* =========================
   SECTIONS
========================= */

section{
    padding:100px 0;
}

.bg-light{
    background:var(--light);
}

.bg-gold{
    background:var(--gold-light);
}

/* =========================
   CARDS
========================= */

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

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.card{
    padding:35px;
    border-radius:var(--radius);
    background:white;
    box-shadow:var(--shadow);
}

.card:hover{
    transform:translateY(-5px);
    transition:0.3s;
}

/* =========================
   ICON BOX
========================= */

.icon-box{
    text-align:center;
}

.icon-circle{
    width:70px;
    height:70px;
    background:var(--gold-light);
    border-radius:50%;
    margin:auto auto 20px;
}

/* =========================
   TESTIMONIAL
========================= */

.testimonial{
    background:white;
    border-left:5px solid var(--gold);
    padding:30px;
    box-shadow:var(--shadow);
}

/* =========================
   CTA SECTION
========================= */

.cta{
    background:var(--black);
    color:white;
    text-align:center;
}

.cta h2{
    color:white;
}

.cta p{
    max-width:700px;
    margin:auto auto 30px;
}

/* =========================
   FAQ
========================= */

.faq{
    margin-bottom:20px;
}

.faq h3{
    font-size:1.2rem;
}

/* =========================
   CONTACT
========================= */

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
}

/* =========================
   FOOTER
========================= */

footer{
    background:#000;
    color:white;
    padding:70px 0;
}

footer h3{
    color:white;
    margin-bottom:20px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:40px;
}

.footer-links a{
    display:block;
    color:#ddd;
    margin-bottom:10px;
}

/* =========================
   STICKY MOBILE ACTIONS
========================= */

.sticky-actions{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    display:flex;

    z-index:99999;
}

.sticky-actions a{

    flex:1;

    text-align:center;

    padding:16px;

    font-weight:600;

    color:white;
}

.call-btn{
    background:#111;
}

.whatsapp-btn{
    background:#25D366;
}

.book-btn{
    background:var(--gold);
}

/* =========================
   MOBILE
========================= */

@media(max-width:991px){

.grid-3{
    grid-template-columns:1fr;
}

.grid-4{
    grid-template-columns:1fr 1fr;
}

.contact-grid{
    grid-template-columns:1fr;
}

.footer-grid{
    grid-template-columns:1fr;
}

h1{
    font-size:3rem;
}

}

@media(max-width:768px){

.mobile-toggle{
    display:block;
}

.nav-menu{
    display:none;

    position:absolute;

    top:80px;

    left:0;

    width:100%;

    background:white;

    flex-direction:column;

    padding:30px;

    box-shadow:0 10px 20px rgba(0,0,0,.08);
}

.nav-menu.active{
    display:flex;
}

.grid-4{
    grid-template-columns:1fr;
}

.hero{
    min-height:75vh;
}

.hero h1{
    font-size:2.3rem;
}

.hero-buttons{
    flex-direction:column;
}

.btn{
    width:100%;
    text-align:center;
}

}