/* =========================================================
   ABOUT PAGE — PREMIUM RESPONSIVE CSS
   Compatible with existing HTML classes
   Light / Dark Mode
========================================================= */

:root {
    --primary: #4ac495;
    --primary-light: #8ee0bd;
    --primary-dark: #507d6c;

    --gold: #c7a45a;
    --gold-light: #dfc887;

    --bg: #e8ffdf;
    --surface: #ffffff;
    --surface-2: #eef5f1;

    --text: #23332d;
    --text-light: #64746d;

    --border: rgba(74, 196, 149, .18);

    --shadow:
        0 20px 60px rgba(52, 85, 72, .10);

    --shadow-hover:
        0 30px 80px rgba(52, 85, 72, .18);

    --radius: 26px;

    --ease: cubic-bezier(.2, .8, .2, 1);

    --page-bg: var(--bg);
    --card-bg: var(--surface);
    --section-bg: #ffffff;
    --soft-bg: #eef5f1;
    --heading: var(--text);
    --paragraph: var(--text-light);
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark {

    --bg: #101b17;
    --surface: #182923;
    --surface-2: #1e322b;

    --text: #ecf8f2;
    --text-light: #afc5ba;

    --border: rgba(142, 224, 189, .20);

    --page-bg: #101b17;
    --card-bg: #182923;
    --section-bg: #14231e;
    --soft-bg: #1b3028;
    --heading: #f1faf6;
    --paragraph: #b4c9bf;

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

    --shadow-hover:
        0 30px 90px rgba(0, 0, 0, .45);
}


/* =========================================================
   BASE
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--page-bg);
    color: var(--text);
    transition:
        background .5s ease,
        color .5s ease;
}


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

.about-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(74,196,149,.13),
            transparent 30%
        ),
        var(--page-bg);
}


/* =========================================================
   CONTAINER
========================================================= */

.about-container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
    position: relative;
}


/* =========================================================
   LABEL
========================================================= */

.about-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 15px;

    border: 1px solid var(--border);
    border-radius: 50px;

    background: rgba(255,255,255,.55);

    color: var(--primary-dark);

    font-size: 13px;
    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(74,196,149,.08);

    backdrop-filter: blur(12px);
}

.about-label::before {
    content: "";
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--primary);

    box-shadow:
        0 0 0 5px rgba(74,196,149,.10),
        0 0 20px rgba(74,196,149,.7);

    animation: pulseDot 2s infinite;
}

body.dark .about-label {
    background: rgba(24,41,35,.75);
    color: var(--primary-light);
}


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

.about-hero {
    min-height: 620px;

    display: flex;
    align-items: center;

    padding: 90px 0 100px;

    position: relative;

    background:
        linear-gradient(
            135deg,
            rgba(232,255,223,.98),
            rgba(255,255,255,.98)
        );
}

body.dark .about-hero {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(74,196,149,.13),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #101b17,
            #14251f
        );
}

.about-hero::before {
    content: "";
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background: rgba(74,196,149,.12);

    filter: blur(10px);

    top: -180px;
    left: -180px;

    animation: floatingGlow 7s ease-in-out infinite;
}

.about-hero-content {
    width: 52%;
    position: relative;
    z-index: 2;

    animation: fadeUp .9s var(--ease) both;
}

.about-hero-content h1 {
    margin: 24px 0 20px;

    font-size: clamp(38px, 5vw, 68px);

    line-height: 1.25;

    letter-spacing: -1.5px;

    color: var(--heading);
}

.about-hero-content h1 span {
    display: block;

    color: var(--primary);

    text-shadow:
        0 0 30px rgba(74,196,149,.18);
}

.about-hero-content p {
    max-width: 620px;

    font-size: 18px;

    line-height: 2.1;

    color: var(--paragraph);
}


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

.about-hero-image {
    position: absolute;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 45%;
    height: 430px;

    border-radius: 40px;

    overflow: hidden;

    background: var(--card-bg);

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

    box-shadow:
        0 35px 100px rgba(52,85,72,.16);

    animation:
        imageReveal 1s var(--ease) .2s both,
        floatingImage 6s ease-in-out 1.2s infinite;
}

.about-hero-image::before {
    content: "";

    position: absolute;
    inset: 12px;

    border: 1px solid rgba(255,255,255,.4);

    border-radius: 30px;

    z-index: 2;

    pointer-events: none;
}

.about-hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .8s var(--ease),
        filter .8s ease;
}

.about-hero-image:hover img {
    transform: scale(1.06);
}

.image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--primary-dark);

    background:
        linear-gradient(
            135deg,
            rgba(74,196,149,.18),
            rgba(255,255,255,.75)
        );

    font-weight: 700;

    position: relative;
}

.image-placeholder::before {
    content: "✦";

    position: absolute;

    font-size: 100px;

    color: rgba(74,196,149,.12);

    animation: rotateSlow 15s linear infinite;
}

body.dark .image-placeholder {
    color: var(--primary-light);

    background:
        linear-gradient(
            135deg,
            #1b3028,
            #14231e
        );
}


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

.about-section {
    position: relative;

    padding: 120px 0;

    background: var(--section-bg);

    transition: background .5s ease;
}

.about-section:nth-child(odd) {
    background: var(--soft-bg);
}

.about-grid {
    display: grid;

    grid-template-columns: .95fr 1.05fr;

    align-items: center;

    gap: 80px;
}

.about-grid.reverse {
    grid-template-columns: 1.05fr .95fr;
}


/* =========================================================
   ABOUT IMAGE BOX
========================================================= */

.about-image-box {
    position: relative;

    min-height: 500px;

    border-radius: 35px;

    overflow: hidden;

    background: var(--card-bg);

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

    box-shadow: var(--shadow);

    transition:
        transform .6s var(--ease),
        box-shadow .6s ease;
}

.about-image-box::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: rgba(74,196,149,.15);

    filter: blur(15px);

    top: -60px;
    right: -60px;

    z-index: 1;
}

.about-image-box::after {
    content: "";

    position: absolute;

    inset: 15px;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 25px;

    pointer-events: none;

    z-index: 3;
}

.about-image-box:hover {
    transform: translateY(-10px);

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

.about-image-box img {
    width: 100%;
    height: 100%;

    min-height: 500px;

    object-fit: cover;

    display: block;

    transition: transform .9s var(--ease);
}

.about-image-box:hover img {
    transform: scale(1.05);
}


/* =========================================================
   CONTENT
========================================================= */

.about-content {
    position: relative;
}

.about-content h2 {
    margin: 20px 0;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.35;

    color: var(--heading);
}

.about-content p {
    font-size: 16px;

    line-height: 2.15;

    color: var(--paragraph);

    margin: 0 0 20px;
}


/* =========================================================
   SIGNATURE
========================================================= */

.about-signature {
    margin-top: 35px;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 12px 20px;

    border-radius: 18px;

    background: var(--soft-bg);

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

    color: var(--primary-dark);

    box-shadow:
        0 10px 30px rgba(74,196,149,.08);
}

body.dark .about-signature {
    color: var(--primary-light);
}

.about-signature span {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: var(--primary);

    color: white;

    font-weight: 800;
}


/* =========================================================
   CLINIC FEATURES
========================================================= */

.clinic-features {
    display: grid;

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

    gap: 14px;

    margin-top: 35px;
}

.clinic-feature {
    padding: 18px 15px;

    border-radius: 20px;

    background: var(--card-bg);

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

    box-shadow:
        0 10px 30px rgba(52,85,72,.07);

    transition:
        transform .35s var(--ease),
        border-color .35s ease,
        box-shadow .35s ease;
}

.clinic-feature:hover {
    transform: translateY(-7px);

    border-color: rgba(74,196,149,.45);

    box-shadow:
        0 15px 40px rgba(74,196,149,.12);
}

.clinic-feature span {
    display: block;

    margin-bottom: 8px;

    color: var(--primary);

    font-size: 12px;

    font-weight: 800;
}

.clinic-feature strong {
    color: var(--heading);

    font-size: 14px;
}


/* =========================================================
   VALUES
========================================================= */

.about-values {
    padding: 120px 0;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(74,196,149,.12),
            transparent 30%
        ),
        var(--page-bg);
}

.values-heading {
    max-width: 650px;

    margin-bottom: 55px;
}

.values-heading h2 {
    margin-top: 20px;

    font-size: clamp(32px, 4vw, 50px);

    line-height: 1.4;

    color: var(--heading);
}

.values-heading h2 span {
    color: var(--primary);
}


/* =========================================================
   VALUES GRID
========================================================= */

.values-grid {
    display: grid;

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

    gap: 25px;
}

.value-card {
    position: relative;

    min-height: 280px;

    padding: 35px;

    border-radius: 28px;

    background: var(--card-bg);

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

    box-shadow: var(--shadow);

    overflow: hidden;

    transition:
        transform .5s var(--ease),
        box-shadow .5s ease,
        border-color .5s ease;
}

.value-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(74,196,149,.10);

    filter: blur(5px);

    right: -90px;
    bottom: -90px;

    transition: transform .6s ease;
}

.value-card:hover {
    transform: translateY(-12px);

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

    border-color: rgba(74,196,149,.40);
}

.value-card:hover::before {
    transform: scale(1.5);
}

.value-number {
    position: absolute;

    top: 25px;
    left: 25px;

    font-size: 12px;

    color: var(--primary);

    font-weight: 800;
}

.value-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin-bottom: 25px;

    border-radius: 18px;

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

    color: white;

    font-size: 25px;

    box-shadow:
        0 10px 30px rgba(74,196,149,.25);
}

.value-card h3 {
    margin-bottom: 13px;

    color: var(--heading);

    font-size: 20px;
}

.value-card p {
    color: var(--paragraph);

    line-height: 2;

    font-size: 14px;
}


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

.about-cta {
    padding: 90px 0;

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

.about-cta-box {
    position: relative;

    padding: 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    overflow: hidden;

    border-radius: 35px;

    background:
        linear-gradient(
            135deg,
            #dff9d4,
            #f7fff5
        );

    border: 1px solid rgba(74,196,149,.25);

    box-shadow:
        0 25px 80px rgba(74,196,149,.14);
}

body.dark .about-cta-box {
    background:
        linear-gradient(
            135deg,
            #1c382e,
            #14251f
        );
}

.about-cta-box::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background: rgba(74,196,149,.15);

    right: -120px;
    bottom: -150px;

    filter: blur(5px);
}

.about-cta-box h2 {
    margin: 18px 0;

    font-size: clamp(30px, 4vw, 48px);

    color: var(--heading);
}

.about-cta-box p {
    margin: 0;

    color: var(--paragraph);

    line-height: 2;
}

.about-cta-button {
    position: relative;
    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 16px 25px;

    border-radius: 18px;

    background: var(--primary);

    color: white;

    text-decoration: none;

    font-weight: 700;

    box-shadow:
        0 12px 35px rgba(74,196,149,.28);

    transition:
        transform .35s var(--ease),
        box-shadow .35s ease;
}

.about-cta-button:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 45px rgba(74,196,149,.40);
}

.about-cta-button span {
    transition: transform .3s ease;
}

.about-cta-button:hover span {
    transform: translateX(-6px);
}


/* =========================================================
   HEADER DARK SUPPORT
========================================================= */

body.dark .header {
    background: rgba(16,27,23,.88);
    border-color: rgba(142,224,189,.12);
}

body.dark .nav a {
    color: #d6e9e0;
}

body.dark .nav a:hover,
body.dark .nav .active-link {
    color: var(--primary-light);
}

body.dark .logo-text strong {
    color: #edf8f3;
}

body.dark .logo-text small {
    color: #9fb8ac;
}

body.dark .mobile-menu {
    background: #14231e;
    border-color: rgba(142,224,189,.15);
}

body.dark .mobile-menu a {
    color: #e1f1ea;
}

body.dark .mobile-menu a:hover {
    background: #1d342b;
    color: var(--primary-light);
}

body.dark .theme-btn {
    background: #1c3028;
    color: var(--gold-light);
    border-color: rgba(142,224,189,.18);
}

body.dark .appointment-btn {
    box-shadow:
        0 8px 25px rgba(74,196,149,.18);
}


/* =========================================================
   FOOTER DARK SUPPORT
========================================================= */

body.dark .footer {
    background: #0b1512;
    color: #dcebe5;
}

body.dark .footer p,
body.dark .footer span,
body.dark .footer small {
    color: #9eb5aa;
}

body.dark .footer-column h4 {
    color: #edf8f3;
}

body.dark .footer-column a {
    color: #a9c0b5;
}

body.dark .footer-column a:hover {
    color: var(--primary-light);
}

body.dark .footer-bottom {
    border-color: rgba(142,224,189,.12);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes imageReveal {

    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-40px) scale(.94);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0) scale(1);
    }

}

@keyframes floatingImage {

    0%,100% {
        margin-top: 0;
    }

    50% {
        margin-top: -10px;
    }

}

@keyframes floatingGlow {

    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(35px,25px);
    }

}

@keyframes pulseDot {

    0%,100% {
        box-shadow:
            0 0 0 5px rgba(74,196,149,.10),
            0 0 15px rgba(74,196,149,.4);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(74,196,149,.04),
            0 0 25px rgba(74,196,149,.8);
    }

}

@keyframes rotateSlow {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .about-hero {
        padding: 80px 0;
    }

    .about-hero-content {
        width: 100%;
        max-width: 650px;
    }

    .about-hero-image {
        position: relative;

        left: auto;
        top: auto;

        transform: none;

        width: 100%;

        margin-top: 50px;

        height: 380px;

        animation:
            imageRevealMobile .9s var(--ease) .2s both,
            floatingImage 6s ease-in-out 1.2s infinite;
    }

    .about-grid,
    .about-grid.reverse {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .about-image-box {
        min-height: 420px;
    }

    .about-image-box img {
        min-height: 420px;
    }

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

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    .about-container {
        width: min(
            100% - 28px,
            1180px
        );
    }

    .about-hero {
        min-height: auto;

        padding: 70px 0 75px;
    }

    .about-hero-content h1 {
        font-size: 37px;

        letter-spacing: -1px;
    }

    .about-hero-content p {
        font-size: 15px;

        line-height: 2;
    }

    .about-hero-image {
        height: 300px;

        border-radius: 27px;

        margin-top: 35px;
    }

    .about-section {
        padding: 75px 0;
    }

    .about-grid {
        gap: 35px;
    }

    .about-image-box {
        min-height: 330px;

        border-radius: 27px;
    }

    .about-image-box img {
        min-height: 330px;
    }

    .about-content h2 {
        font-size: 30px;
    }

    .about-content p {
        font-size: 14px;

        line-height: 2.1;
    }

    .clinic-features {
        grid-template-columns: 1fr;
    }

    .about-values {
        padding: 75px 0;
    }

    .values-heading {
        margin-bottom: 35px;
    }

    .values-heading h2 {
        font-size: 31px;
    }

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

    .value-card {
        min-height: auto;

        padding: 28px;
    }

    .about-cta {
        padding: 65px 0;
    }

    .about-cta-box {
        padding: 35px 25px;

        flex-direction: column;

        align-items: flex-start;

        border-radius: 27px;
    }

    .about-cta-box h2 {
        font-size: 31px;
    }

    .about-cta-button {
        width: 100%;

        justify-content: center;
    }

}


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

@media (max-width: 420px) {

    .about-hero-content h1 {
        font-size: 32px;
    }

    .about-label {
        font-size: 11px;

        padding: 7px 12px;
    }

    .about-hero-image {
        height: 250px;
    }

    .about-image-box,
    .about-image-box img {
        min-height: 280px;
    }

    .about-content h2 {
        font-size: 27px;
    }

    .value-icon {
        width: 52px;
        height: 52px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

}
/* =========================================================
   CONTACT PAGE
   Premium / Responsive / Light + Dark Mode
   Compatible with existing HTML
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.contact-page {

    --contact-bg: #e8ffdf;
    --contact-surface: #ffffff;
    --contact-surface-2: #eef5f1;

    --contact-primary: #4ac495;
    --contact-primary-light: #8ee0bd;
    --contact-primary-dark: #507d6c;

    --contact-gold: #c7a45a;
    --contact-gold-light: #dfc887;

    --contact-text: #23332d;
    --contact-muted: #64746d;

    --contact-border: rgba(74,196,149,.18);

    --contact-shadow:
        0 25px 70px rgba(52,85,72,.10);

    --contact-shadow-hover:
        0 35px 90px rgba(52,85,72,.18);

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(142,224,189,.30),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(199,164,90,.08),
            transparent 25%
        ),
        var(--contact-bg);

    color: var(--contact-text);

    transition:
        background .5s ease,
        color .5s ease;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark .contact-page {

    --contact-bg: #101a16;
    --contact-surface: #17231e;
    --contact-surface-2: #1c2b25;

    --contact-primary: #61d6a7;
    --contact-primary-light: #8ee0bd;
    --contact-primary-dark: #79b59e;

    --contact-gold: #d6b86b;
    --contact-gold-light: #ead38d;

    --contact-text: #eefbf5;
    --contact-muted: #a8bbb2;

    --contact-border: rgba(97,214,167,.18);

    --contact-shadow:
        0 25px 80px rgba(0,0,0,.35);

    --contact-shadow-hover:
        0 35px 100px rgba(0,0,0,.50);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(74,196,149,.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(199,164,90,.06),
            transparent 25%
        ),
        var(--contact-bg);
}


/* =========================================================
   GLOW BACKGROUND
========================================================= */

.contact-glow {

    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    opacity: .45;

    animation:
        contactFloat 8s ease-in-out infinite alternate;
}

.contact-glow-one {

    top: 100px;
    right: -150px;

    background:
        rgba(74,196,149,.25);
}

.contact-glow-two {

    bottom: 200px;
    left: -160px;

    background:
        rgba(199,164,90,.12);

    animation-delay: -3s;
}


@keyframes contactFloat {

    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(20px,-30px,0);
    }
}


/* =========================================================
   CONTAINER
========================================================= */

.contact-container {

    width: min(1180px, calc(100% - 40px));

    margin-inline: auto;
}


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

.contact-hero {

    position: relative;

    padding:
        120px
        0
        90px;

    overflow: hidden;
}


.contact-hero::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -300px;
    left: 10%;

    border-radius: 50%;

    border:
        1px solid
        rgba(74,196,149,.15);

    box-shadow:
        0 0 80px
        rgba(74,196,149,.08);

    animation:
        contactRotate 18s linear infinite;
}


@keyframes contactRotate {

    to {
        transform: rotate(360deg);
    }
}


.contact-hero .contact-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;
}


.contact-hero-content {

    max-width: 720px;

    animation:
        contactHeroIn .9s
        cubic-bezier(.2,.8,.2,1)
        both;
}


@keyframes contactHeroIn {

    from {
        opacity: 0;
        transform:
            translateY(35px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


/* =========================================================
   LABEL
========================================================= */

.contact-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--contact-primary-dark);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .3px;

    margin-bottom: 16px;
}


.contact-label::before {

    content: "";

    width: 28px;
    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--contact-primary),
            var(--contact-gold)
        );
}


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

.contact-hero h1 {

    margin: 0;

    font-size:
        clamp(38px, 5vw, 70px);

    line-height: 1.25;

    font-weight: 900;

    letter-spacing: -1.5px;
}


.contact-hero h1 span {

    display: block;

    background:
        linear-gradient(
            100deg,
            var(--contact-primary-dark),
            var(--contact-primary),
            var(--contact-gold)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    background-size: 200% auto;

    animation:
        contactGradient 5s ease infinite;
}


@keyframes contactGradient {

    0% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }

    100% {
        background-position: 0% center;
    }
}


.contact-hero p {

    max-width: 680px;

    margin:
        25px
        0
        0;

    color:
        var(--contact-muted);

    font-size: 17px;

    line-height: 2.2;
}


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

.contact-hero-badge {

    min-width: 230px;

    padding: 30px;

    border-radius: 30px;

    background:
        rgba(255,255,255,.65);

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

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

    backdrop-filter:
        blur(18px);

    text-align: center;

    animation:
        contactBadgeFloat
        5s ease-in-out
        infinite;

    transition:
        .4s ease;
}


body.dark .contact-hero-badge {

    background:
        rgba(23,35,30,.75);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.30);
}


.contact-hero-badge:hover {

    transform:
        translateY(-10px)
        rotate(1deg);

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


@keyframes contactBadgeFloat {

    0%,100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }
}


.contact-badge-icon {

    width: 70px;
    height: 70px;

    display: grid;

    place-items: center;

    margin:
        0 auto
        18px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            var(--contact-primary),
            var(--contact-primary-light)
        );

    color: white;

    font-size: 30px;

    box-shadow:
        0 15px 35px
        rgba(74,196,149,.25);
}


.contact-hero-badge strong {

    display: block;

    margin-bottom: 8px;

    font-size: 16px;
}


.contact-hero-badge small {

    color:
        var(--contact-muted);

    line-height: 1.8;
}


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

.contact-section {

    position: relative;

    padding:
        80px
        0
        110px;
}


.contact-grid {

    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap: 45px;

    align-items: start;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.contact-section-heading {

    margin-bottom: 30px;
}


.contact-section-heading h2,
.contact-form-heading h2,
.contact-map-header h2 {

    margin: 0;

    font-size:
        clamp(28px, 4vw, 44px);

    line-height: 1.4;
}


.contact-section-heading h2 span,
.contact-map-header h2 span {

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


.contact-section-heading p,
.contact-form-heading p {

    color:
        var(--contact-muted);

    line-height: 2;

    margin-top: 15px;
}


/* =========================================================
   CONTACT INFO CARDS
========================================================= */

.contact-info {

    display: flex;

    flex-direction: column;

    gap: 16px;
}


.contact-info-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 22px;

    border-radius: 24px;

    text-decoration: none;

    color:
        var(--contact-text);

    background:
        var(--contact-surface);

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

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

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}


.contact-info-card::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 4px;
    height: 0;

    background:
        linear-gradient(
            180deg,
            var(--contact-primary),
            var(--contact-gold)
        );

    transition:
        height .45s ease;
}


.contact-info-card:hover {

    transform:
        translateX(-8px);

    box-shadow:
        var(--contact-shadow-hover);

    border-color:
        rgba(74,196,149,.35);
}


.contact-info-card:hover::before {

    height: 100%;
}


.contact-card-icon {

    flex-shrink: 0;

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(74,196,149,.14),
            rgba(142,224,189,.25)
        );

    color:
        var(--contact-primary-dark);

    font-size: 24px;

    transition:
        transform .4s ease;
}


.contact-info-card:hover
.contact-card-icon {

    transform:
        scale(1.08)
        rotate(-5deg);
}


.contact-info-card div:last-child {

    min-width: 0;
}


.contact-info-card span {

    display: block;

    margin-bottom: 5px;

    color:
        var(--contact-muted);

    font-size: 13px;
}


.contact-info-card strong {

    display: block;

    line-height: 1.9;

    font-size: 15px;
}


.contact-info-card small {

    display: block;

    margin-top: 6px;

    color:
        var(--contact-primary-dark);

    font-size: 12px;
}


.contact-clinic-card {

    cursor: default;
}


/* =========================================================
   FORM BOX
========================================================= */

.contact-form-box {

    position: relative;

    padding: 40px;

    border-radius: 32px;

    background:
        var(--contact-surface);

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

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

    overflow: hidden;
}


.contact-form-box::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -90px;
    left: -90px;

    border-radius: 50%;

    background:
        rgba(74,196,149,.12);

    filter:
        blur(20px);

    animation:
        formGlow 6s ease-in-out infinite alternate;
}


@keyframes formGlow {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.5);
    }
}


.contact-form-heading {

    position: relative;

    margin-bottom: 30px;
}


.contact-form {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.contact-form-row {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 18px;
}


/* =========================================================
   FIELDS
========================================================= */

.contact-field {

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.contact-field label {

    font-size: 13px;

    font-weight: 800;

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


.contact-field label span {

    margin-right: 5px;

    font-size: 11px;

    color:
        var(--contact-muted);

    font-weight: 400;
}


.contact-field input,
.contact-field textarea,
.contact-field select {

    width: 100%;

    box-sizing: border-box;

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

    border-radius: 17px;

    padding:
        15px
        17px;

    outline: none;

    background:
        var(--contact-surface-2);

    color:
        var(--contact-text);

    font-family: inherit;

    font-size: 14px;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease,
        background .3s ease;
}


.contact-field textarea {

    resize: vertical;

    min-height: 140px;
}


.contact-field select {

    cursor: pointer;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {

    color:
        var(--contact-muted);

    opacity: .7;
}


.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus {

    border-color:
        var(--contact-primary);

    background:
        var(--contact-surface);

    box-shadow:
        0 0 0 4px
        rgba(74,196,149,.10),
        0 12px 30px
        rgba(74,196,149,.07);

    transform:
        translateY(-2px);
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    width: 100%;

    padding: 17px 24px;

    border: none;

    border-radius: 18px;

    cursor: pointer;

    overflow: hidden;

    color: white;

    background:
        linear-gradient(
            110deg,
            var(--contact-primary-dark),
            var(--contact-primary),
            var(--contact-primary-light)
        );

    background-size: 200% auto;

    font-family: inherit;

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 15px 35px
        rgba(74,196,149,.22);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background-position .5s ease;
}


.contact-submit::before {

    content: "";

    position: absolute;

    top: 0;
    right: -100%;

    width: 60%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        right .7s ease;
}


.contact-submit:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 22px 45px
        rgba(74,196,149,.30);

    background-position:
        100% center;
}


.contact-submit:hover::before {

    right: 130%;
}


.contact-submit b {

    font-size: 20px;

    transition:
        transform .3s ease;
}


.contact-submit:hover b {

    transform:
        translateX(-6px);
}


.contact-form-message {

    min-height: 22px;

    text-align: center;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   MAP
========================================================= */

.contact-map-section {

    position: relative;

    padding:
        80px
        0
        100px;

    background:
        rgba(255,255,255,.35);

    border-top:
        1px solid
        var(--contact-border);

    border-bottom:
        1px solid
        var(--contact-border);
}


body.dark .contact-map-section {

    background:
        rgba(0,0,0,.08);
}


.contact-map-header {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
}


.contact-map-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        13px
        20px;

    border-radius: 14px;

    text-decoration: none;

    color:
        var(--contact-primary-dark);

    background:
        var(--contact-surface);

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

    box-shadow:
        0 10px 30px
        rgba(52,85,72,.08);

    font-size: 13px;

    font-weight: 800;

    transition:
        .35s ease;
}


.contact-map-button:hover {

    transform:
        translateY(-4px);

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


.contact-map-button span {

    transition:
        transform .3s ease;
}


.contact-map-button:hover span {

    transform:
        translateX(-5px);
}


.contact-map {

    position: relative;

    min-height: 360px;

    display: grid;

    place-items: center;

    border-radius: 30px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #dff5e8,
            #cce8d8
        );

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

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


body.dark .contact-map {

    background:
        linear-gradient(
            135deg,
            #17251f,
            #20352d
        );
}


.contact-map::before,
.contact-map::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(74,196,149,.20);
}


.contact-map::before {

    width: 500px;
    height: 500px;
}


.contact-map::after {

    width: 700px;
    height: 700px;

    opacity: .5;
}


.contact-map-placeholder {

    position: relative;

    z-index: 2;

    width: min(480px, calc(100% - 40px));

    padding: 35px;

    text-align: center;

    border-radius: 28px;

    background:
        rgba(255,255,255,.72);

    border:
        1px solid
        rgba(255,255,255,.7);

    box-shadow:
        0 25px 70px
        rgba(52,85,72,.14);

    backdrop-filter:
        blur(15px);

    animation:
        mapCardFloat 5s ease-in-out infinite;
}


body.dark .contact-map-placeholder {

    background:
        rgba(23,35,30,.80);

    border-color:
        rgba(142,224,189,.10);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.30);
}


@keyframes mapCardFloat {

    0%,100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }
}


.map-icon {

    width: 65px;
    height: 65px;

    display: grid;

    place-items: center;

    margin:
        0 auto
        15px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--contact-primary),
            var(--contact-primary-light)
        );

    font-size: 27px;

    box-shadow:
        0 15px 35px
        rgba(74,196,149,.25);
}


.contact-map-placeholder strong {

    display: block;

    font-size: 17px;

    margin-bottom: 10px;
}


.contact-map-placeholder p {

    margin:
        0
        0
        18px;

    color:
        var(--contact-muted);

    line-height: 2;
}


.contact-map-placeholder a {

    display: inline-flex;

    padding:
        11px
        18px;

    border-radius: 12px;

    text-decoration: none;

    color: white;

    background:
        var(--contact-primary-dark);

    font-size: 12px;

    font-weight: 800;

    transition:
        .3s ease;
}


.contact-map-placeholder a:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(74,196,149,.25);
}


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

.contact-cta {

    padding:
        80px
        0
        110px;
}


.contact-cta-box {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding:
        55px;

    overflow: hidden;

    border-radius: 35px;

    background:
        linear-gradient(
            125deg,
            #d9f5e6,
            #e8ffdf
        );

    border:
        1px solid
        rgba(74,196,149,.18);

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


body.dark .contact-cta-box {

    background:
        linear-gradient(
            125deg,
            #172c23,
            #1b241f
        );

    border-color:
        rgba(97,214,167,.14);
}


.contact-cta-box::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    left: -100px;
    bottom: -150px;

    background:
        rgba(74,196,149,.16);

    filter:
        blur(20px);

    animation:
        ctaGlow 5s ease-in-out infinite alternate;
}


@keyframes ctaGlow {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.4);
    }
}


.contact-cta-box h2 {

    position: relative;

    margin:
        0
        0
        12px;

    font-size:
        clamp(26px, 4vw, 42px);

    line-height: 1.5;
}


.contact-cta-box p {

    position: relative;

    margin: 0;

    color:
        var(--contact-muted);

    line-height: 2;
}


.contact-cta-button {

    position: relative;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding:
        16px
        25px;

    border-radius: 16px;

    text-decoration: none;

    color: white;

    background:
        var(--contact-primary-dark);

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 15px 35px
        rgba(74,196,149,.22);

    transition:
        .35s ease;
}


.contact-cta-button:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 22px 45px
        rgba(74,196,149,.30);
}


.contact-cta-button span {

    transition:
        transform .3s ease;
}


.contact-cta-button:hover span {

    transform:
        translateX(-6px);
}


/* =========================================================
   DARK MODE - EXTRA OVERRIDES
========================================================= */

body.dark .contact-label {

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


body.dark .contact-section-heading h2 span,
body.dark .contact-map-header h2 span {

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


body.dark .contact-info-card:hover {

    border-color:
        rgba(97,214,167,.35);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.40);
}


body.dark .contact-field input,
body.dark .contact-field textarea,
body.dark .contact-field select {

    color:
        #eefbf5;
}


body.dark .contact-field option {

    background:
        #17231e;

    color:
        #eefbf5;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 950px) {

    .contact-hero {

        padding-top: 90px;
    }


    .contact-hero .contact-container {

        flex-direction: column;

        align-items: flex-start;

        gap: 35px;
    }


    .contact-hero-badge {

        width: 100%;

        max-width: 330px;

        box-sizing: border-box;
    }


    .contact-grid {

        grid-template-columns: 1fr;
    }


    .contact-info {

        order: 2;
    }


    .contact-form-box {

        order: 1;
    }


    .contact-map-header {

        align-items: flex-start;
    }


    .contact-cta-box {

        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 650px) {

    .contact-container {

        width:
            min(
                100% - 28px,
                1180px
            );
    }


    .contact-hero {

        padding:
            75px
            0
            55px;
    }


    .contact-hero h1 {

        font-size: 38px;

        letter-spacing: -1px;
    }


    .contact-hero p {

        font-size: 14px;

        line-height: 2;
    }


    .contact-hero-badge {

        max-width: none;

        padding: 24px;
    }


    .contact-section {

        padding:
            50px
            0
            70px;
    }


    .contact-form-box {

        padding: 24px 18px;

        border-radius: 25px;
    }


    .contact-form-row {

        grid-template-columns: 1fr;
    }


    .contact-info-card {

        padding: 17px;

        border-radius: 20px;
    }


    .contact-card-icon {

        width: 48px;
        height: 48px;

        border-radius: 15px;

        font-size: 20px;
    }


    .contact-info-card strong {

        font-size: 13px;
    }


    .contact-map-section {

        padding:
            60px
            0
            70px;
    }


    .contact-map-header {

        flex-direction: column;

        align-items: flex-start;
    }


    .contact-map {

        min-height: 330px;

        border-radius: 24px;
    }


    .contact-map-placeholder {

        padding: 25px 18px;

        border-radius: 22px;
    }


    .contact-cta {

        padding:
            55px
            0
            70px;
    }


    .contact-cta-box {

        padding: 30px 22px;

        border-radius: 26px;
    }


    .contact-cta-button {

        width: 100%;

        justify-content: center;

        box-sizing: border-box;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .contact-hero h1 {

        font-size: 32px;
    }


    .contact-section-heading h2,
    .contact-form-heading h2,
    .contact-map-header h2 {

        font-size: 27px;
    }


    .contact-info-card {

        gap: 12px;
    }


    .contact-info-card strong {

        font-size: 12px;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-page *,
    .contact-page *::before,
    .contact-page *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }

}
/* =========================================
   CONTACT PAGE BUTTON
========================================= */

.contact-page-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 15px 28px;

    margin-top: 20px;

    background: linear-gradient(
        135deg,
        #4ac495,
        #8ee0bd
    );

    color: #ffffff;

    text-decoration: none;

    border-radius: 16px;

    font-size: 15px;
    font-weight: 800;

    border: 1px solid rgba(255,255,255,.25);

    box-shadow:
        0 12px 30px rgba(74,196,149,.25),
        inset 0 1px 0 rgba(255,255,255,.35);

    overflow: hidden;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        gap .35s ease;
}


/* نور روی دکمه */

.contact-page-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform: skewX(-20deg);

    transition: left .7s ease;
}


/* متن */

.contact-page-btn span {
    position: relative;
    z-index: 2;
}


/* آیکون */

.contact-page-btn-icon {
    font-size: 20px;

    transition:
        transform .35s ease;
}


/* Hover */

.contact-page-btn:hover {

    transform: translateY(-5px);

    gap: 20px;

    box-shadow:
        0 18px 45px rgba(74,196,149,.35),
        0 0 25px rgba(142,224,189,.25);
}


.contact-page-btn:hover::before {
    left: 130%;
}


.contact-page-btn:hover .contact-page-btn-icon {
    transform: translateX(-5px);
}


/* کلیک */

.contact-page-btn:active {
    transform: translateY(-1px) scale(.98);
}


/* =========================================
   DARK MODE
========================================= */

body.dark .contact-page-btn {

    background: linear-gradient(
        135deg,
        #357c63,
        #4ac495
    );

    color: #f5fffa;

    box-shadow:
        0 12px 35px rgba(0,0,0,.35),
        0 0 20px rgba(74,196,149,.12);
}


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

@media (max-width: 600px) {

    .contact-page-btn {

        width: 100%;

        padding: 14px 22px;

        font-size: 14px;

        border-radius: 14px;
    }

}
/* =========================================================
   🌙 CONTACT PAGE — PREMIUM DARK MODE
   ========================================================= */

body.dark .contact-page {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(74,196,149,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(142,224,189,.08),
            transparent 32%
        ),
        #101b17;

    color: #ecfff7;
}


/* -----------------------------------------
   عنوان و متن
----------------------------------------- */

body.dark .contact-page h1,
body.dark .contact-page h2,
body.dark .contact-page h3 {
    color: #f1fff9;
}

body.dark .contact-page p {
    color: #b8cdc4;
}


/* -----------------------------------------
   لیبل‌ها
----------------------------------------- */

body.dark .contact-label,
body.dark .contact-page .about-label {
    color: #8ee0bd;

    text-shadow:
        0 0 14px rgba(142,224,189,.35);
}


/* -----------------------------------------
   کارت‌های تماس
----------------------------------------- */

body.dark .contact-card,
body.dark .contact-info-card,
body.dark .contact-form-card,
body.dark .contact-box {

    background:
        linear-gradient(
            145deg,
            rgba(31,54,45,.95),
            rgba(19,35,29,.95)
        );

    border: 1px solid rgba(142,224,189,.16);

    box-shadow:
        0 20px 55px rgba(0,0,0,.35),
        0 0 35px rgba(74,196,149,.05),
        inset 0 1px 0 rgba(255,255,255,.035);

    backdrop-filter: blur(14px);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* هاور کارت */

body.dark .contact-card:hover,
body.dark .contact-info-card:hover,
body.dark .contact-form-card:hover,
body.dark .contact-box:hover {

    transform: translateY(-5px);

    border-color:
        rgba(142,224,189,.35);

    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        0 0 35px rgba(74,196,149,.12);
}


/* -----------------------------------------
   آیکون‌های تماس
----------------------------------------- */

body.dark .contact-icon,
body.dark .contact-info-icon {

    background:
        linear-gradient(
            135deg,
            rgba(74,196,149,.20),
            rgba(142,224,189,.08)
        );

    color: #8ee0bd;

    border: 1px solid rgba(142,224,189,.20);

    box-shadow:
        0 0 22px rgba(74,196,149,.12),
        inset 0 1px 0 rgba(255,255,255,.05);
}


/* -----------------------------------------
   عنوان اطلاعات
----------------------------------------- */

body.dark .contact-info-card strong,
body.dark .contact-card strong {
    color: #effff8;
}


/* -----------------------------------------
   لینک‌ها
----------------------------------------- */

body.dark .contact-page a {
    color: #8ee0bd;
}

body.dark .contact-page a:hover {
    color: #c5f5df;

    text-shadow:
        0 0 12px rgba(142,224,189,.35);
}


/* -----------------------------------------
   فرم
----------------------------------------- */

body.dark .contact-page input,
body.dark .contact-page textarea,
body.dark .contact-page select {

    background:
        rgba(8,20,16,.75);

    color: #effff8;

    border: 1px solid rgba(142,224,189,.16);

    box-shadow:
        inset 0 2px 10px rgba(0,0,0,.15);

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


/* Placeholder */

body.dark .contact-page input::placeholder,
body.dark .contact-page textarea::placeholder {
    color: #71877e;
}


/* فوکوس */

body.dark .contact-page input:focus,
body.dark .contact-page textarea:focus,
body.dark .contact-page select:focus {

    outline: none;

    background:
        rgba(15,32,26,.95);

    border-color: #4ac495;

    box-shadow:
        0 0 0 3px rgba(74,196,149,.10),
        0 0 22px rgba(74,196,149,.10);
}


/* -----------------------------------------
   دکمه ارسال
----------------------------------------- */

body.dark .contact-page button[type="submit"] {

    background:
        linear-gradient(
            135deg,
            #4ac495,
            #78d7ad
        );

    color: #092018;

    border: 1px solid rgba(255,255,255,.15);

    box-shadow:
        0 10px 30px rgba(74,196,149,.22),
        0 0 22px rgba(74,196,149,.10);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


body.dark .contact-page button[type="submit"]:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 40px rgba(74,196,149,.30),
        0 0 30px rgba(142,224,189,.16);
}


/* -----------------------------------------
   نقشه
----------------------------------------- */

body.dark .contact-map,
body.dark .map-box {

    border: 1px solid rgba(142,224,189,.15);

    box-shadow:
        0 20px 60px rgba(0,0,0,.4),
        0 0 30px rgba(74,196,149,.06);
}


/* -----------------------------------------
   جداکننده‌ها
----------------------------------------- */

body.dark .contact-page hr {
    border: 0;

    border-top:
        1px solid rgba(142,224,189,.10);
}


/* -----------------------------------------
   دکمه تماس با ما
----------------------------------------- */

body.dark .contact-page-btn {

    background:
        linear-gradient(
            135deg,
            #357c63,
            #4ac495
        );

    color: #ffffff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        0 0 25px rgba(74,196,149,.14);
}


/* -----------------------------------------
   موبایل
----------------------------------------- */

@media (max-width: 768px) {

    body.dark .contact-card,
    body.dark .contact-info-card,
    body.dark .contact-form-card {

        box-shadow:
            0 15px 40px rgba(0,0,0,.35),
            0 0 22px rgba(74,196,149,.05);
    }

}