/* ===============================
   SUNNY DENTAL CLINIC
   GLOBAL STYLES
================================ */

:root{
    --green:#0B8F5A;
    --yellow:#FFD447;
    --light:#F8F9FA;
    --dark:#222;
    --gray:#6C757D;
}

body{
    font-family:'Poppins',sans-serif;
    background:linear-gradient(135deg,#f7fff9,#eefaf3,#ffffff);
}

/* HEADER */

header{
    position:sticky;
    top:0;
    z-index:1000;
}

/* NAVBAR */

.navbar-brand h3{
    font-size:32px;
}

.nav-link{
    font-weight:500;
    margin-left:20px;
    transition:.3s;
}

.nav-link:hover{

    color:#0B8F5A !important;

}

/* HERO */

.hero{
    min-height: auto;
    padding: 80px 0;
    display:flex;
    align-items:center;
}

.hero h1{
    color:var(--green);
}

.hero p{
    color:#555;
    line-height:1.8;
}

.btn-warning{
    background:var(--yellow);
    border:none;
    font-weight:600;
    border-radius:50px;
    transition:.3s;
}

.btn-warning:hover{
    transform:translateY(-3px);
}


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

.branch-card{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px;

background:#fff;

border-radius:20px;

text-decoration:none;

color:#333;

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

transition:.3s;

height:100%;

}

.branch-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.15);

color:#0B8F5A;

}

.branch-card h4{

margin-bottom:8px;

font-weight:600;

}

.branch-card p{

margin:0;

color:#777;

}

.branch-card i{

font-size:35px;

color:#0B8F5A;

}

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

.clinic-logo {
    width: 40px;
    height: auto;
}

@media (max-width: 576px) {

    body {
        font-size: 14px;
    }

    /* HEADER */

    .navbar-brand h3.clinic-title {
        font-size: 20px !important;
        line-height: 1.2;
        margin-bottom: 3px;
    }

    .clinic-subtitle {
        font-size: 10px !important;
        line-height: 1.3;
        margin-bottom: 0;
    }

    .clinic-logo {
        width: 50px;
        height: auto;
    }

    /* HERO */

    .hero {
        min-height: auto;
        padding: 55px 0;
    }

    .hero-title {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    .hero .lead {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .badge {
        font-size: 0.7rem;
    }

    .btn-lg {
        font-size: 0.9rem;
        padding: 10px 18px;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    h5 {
        font-size: 1rem;
    }

    p,
    li {
        font-size: 0.9rem;
    }

}

/* MOBILE - BOOKING FORM */

@media (max-width: 576px) {

    /* Form title */

    #formContainer h3 {
        font-size: 1.4rem;
    }

    /* Labels */

    .form-label,
    .form-check-label {
        font-size: 0.9rem;
    }

    /* Inputs and select */

    .form-control,
    .form-select {
        font-size: 0.9rem;
        padding: 10px 12px;
    }

    /* Buttons */

    .btn {
        font-size: 0.9rem;
        padding: 10px 16px;
    }

    /* Alerts */

    .alert {
        font-size: 0.85rem;
    }

    /* Progress bar labels */

    #progressBar {
        font-size: 0.75rem;
    }

}