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

.hero {

    background:
        linear-gradient(
            135deg,
            #F6D6E8 0%,
            #EEC3DB 100%
        );

    padding: 160px 20px;

    text-align: center;
}

.hero-content {

    max-width: 900px;

    margin: 0 auto;
}

.hero-badge {

    display: inline-block;

    background: white;

    color: var(--primary-dark);

    padding: 10px 20px;

    border-radius: 999px;

    font-size: .9rem;

    font-weight: 600;

    margin-bottom: 25px;

    box-shadow: var(--shadow-sm);
}

.hero h1 {

    font-size: 4.5rem;

    line-height: 1.1;

    margin-bottom: 25px;
}

.hero p {

    font-size: 1.25rem;

    max-width: 650px;

    margin: 0 auto 40px;

    color: var(--text-light);
}

.hero-actions {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;
}
/* ==========================
   SERVICES
========================== */

.services {

    background: var(--bg-white);
}

.service-card {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 100%;
}
.service-card .btn {

    margin-top: 20px;
}

/* ==========================
   GALLERY
========================== */

.gallery {

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

.gallery .card img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    border-radius: 10px;
}

/* ==========================
   ABOUT
========================== */

.about {

    background: var(--bg-white);
}

.about ul {

    padding-left: 20px;
}

.about li {

    margin-bottom: 10px;
}

/* ==========================
   TESTIMONIALS
========================== */

.testimonials {

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

.testimonials .card {

    border-left: 5px solid var(--primary-color);
}

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

.contact {

    background: var(--primary-light);
}

.contact form {

    background: white;

    padding: 30px;

    border-radius: 15px;

    box-shadow: var(--shadow);
}

.contact input,
.contact textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid #ddd;

    border-radius: 8px;
}
/* ==========================
   ABOUT
========================== */

.about {

    background: white;
}

.about-wrapper {

    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}

.about-lead {

    font-size: 1.3rem;

    color: var(--primary-dark);

    font-weight: 600;

    margin-bottom: 30px;
}

.about-features {

    list-style: none;

    padding: 0;

    margin-top: 40px;

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 15px;
}

.about-features li {

    background: var(--bg-light);

    padding: 15px;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}
/* ==========================
   CONTACT
========================== */

.contact {

    background:
        linear-gradient(
            135deg,
            var(--primary-light),
            #FBEAF3
        );
}

.contact-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    align-items: stretch;
}

.contact-info {

    display: flex;

    flex-direction: column;

    gap: 25px;
}

.contact-item {

    background: white;

    padding: 25px;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}

.contact-item h3 {

    color: var(--primary-dark);

    margin-bottom: 10px;
}
.contact-form {

    height: 100%;
}

.contact-form form {

    height: 100%;

    display: flex;

    flex-direction: column;
}

.contact-form form {

    background: white;

    padding: 30px;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);
}
.contact-form input,
.contact-form textarea {

    width: 100%;

    margin-bottom: 15px;

    padding: 15px;

    border: 1px solid #ddd;

    border-radius: var(--radius-sm);

    font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {

    outline: none;

    border-color: var(--primary-color);
}
.contact-note {

    margin-top: 20px;

    font-size: .9rem;

    color: var(--text-light);
}
/* ==========================
   FOOTER
========================== */

.site-footer {

    background: var(--bg-dark);

    color: white;

    padding-top: 60px;
}

.footer-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px,1fr)
        );

    gap: 40px;
}

.site-footer h3 {

    color: white;

    margin-bottom: 20px;
}

.site-footer p,
.site-footer a {

    color: rgba(255,255,255,.8);
}

.footer-links ul {

    list-style: none;

    padding: 0;

    margin: 0;
}

.footer-links li {

    margin-bottom: 10px;
}

.footer-links a:hover {

    color: var(--primary-color);
}

.footer-bottom {

    text-align: center;

    padding: 30px 0;

    margin-top: 40px;

    border-top:
        1px solid rgba(255,255,255,.1);
}
/* ==========================
   SINGLE PAGES
========================== */

.single-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    align-items: center;
}

.single-layout img {

    width: 100%;

    border-radius: var(--radius-lg);
}
/* ==========================
   APPOINTMENTS
========================== */

.appointment-form {

    max-width: 700px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 20px;

    background: white;

    padding: 40px;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);
}

.appointment-form input,
.appointment-form select,
.appointment-form textarea {

    width: 100%;

    padding: 14px;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);
}
.appointment-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}
.appointment-success {

    background: #d4edda;

    color: #155724;

    border: 1px solid #c3e6cb;

    padding: 15px 20px;

    border-radius: 10px;

    margin-bottom: 25px;

    text-align: center;

    font-weight: 600;
}
.appointment-error {

    background: #f8d7da;

    color: #721c24;

    border: 1px solid #f5c6cb;

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 20px;

    text-align: center;

    font-weight: 600;
}
.review-platforms {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 30px;

    margin-bottom: 50px;
}

.platform-card {

    background: white;

    padding: 30px;

    border-radius: 15px;

    text-align: center;

    box-shadow: var(--shadow-sm);
}

.platform-card h3 {

    color: var(--primary-dark);

    margin-bottom: 10px;
}
.social-links {

    display: flex;

    gap: 15px;

    margin-top: 20px;
}

.social-links a {

    color: white;

    font-weight: 600;
}

.social-links a:hover {

    color: var(--primary-color);
}