/* =========================================================
   ADMITH LEGACY
   HOMEPAGE — CONTACT / START A PROJECT

   FILE:
   css/sections/contact.css
========================================================= */


/* =========================================================
   01. CONTACT SECTION
========================================================= */

#contact {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    background:

        radial-gradient(
            circle at 5% 15%,
            rgba(
                91,
                183,
                128,
                0.11
            ),

            transparent 32%
        ),

        radial-gradient(
            circle at 95% 85%,
            rgba(
                150,
                20,
                20,
                0.055
            ),

            transparent 34%
        ),

        linear-gradient(
            135deg,
            #f5faf7 0%,
            #ffffff 48%,
            #faf8f8 100%
        );

}


/* =========================================================
   02. PREMIUM BACKGROUND GRID
========================================================= */

#contact::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    opacity: 0.32;

    background-image:

        linear-gradient(
            rgba(
                25,
                45,
                34,
                0.035
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                25,
                45,
                34,
                0.035
            ) 1px,
            transparent 1px
        );

    background-size:
        70px
        70px;

    mask-image:

        radial-gradient(
            circle at center,
            black,
            transparent 80%
        );

    pointer-events:
        none;

}


/* =========================================================
   03. SECTION CONTAINER
========================================================= */

#contact .container {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   04. SECTION HEADING
========================================================= */

#contact .section-heading {

    max-width:
        850px;

    margin:
        0
        auto
        clamp(
            3.5rem,
            6vw,
            5.5rem
        );

    text-align:
        center;

}


/* =========================================================
   05. SECTION LABEL
========================================================= */

#contact .section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        1.25rem;

    color:
        #3d9865;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


#contact .section-label::before {

    content:
        "";

    width:
        8px;

    height:
        8px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #5bb780;

    box-shadow:

        0
        0
        0
        5px
        rgba(
            91,
            183,
            128,
            0.12
        );

}


/* =========================================================
   06. SECTION TITLE
========================================================= */

#contact .section-title {

    max-width:
        820px;

    margin:
        0
        auto;

    color:
        #111412;

    font-size:
        clamp(
            2.8rem,
            5.5vw,
            5.5rem
        );

    line-height:
        0.98;

    font-weight:
        700;

    letter-spacing:
        -0.06em;

}


/* =========================================================
   07. SECTION DESCRIPTION
========================================================= */

#contact .section-description {

    max-width:
        680px;

    margin:
        1.5rem
        auto
        0;

    color:
        #647069;

    font-size:
        1rem;

    line-height:
        1.8;

}


/* =========================================================
   08. CONTACT GRID
========================================================= */

.contact-grid {

    display:
        grid;

    grid-template-columns:

        minmax(
            0,
            1.45fr
        )

        minmax(
            320px,
            0.75fr
        );

    gap:
        clamp(
            2rem,
            5vw,
            5rem
        );

    align-items:
        start;

}


/* =========================================================
   09. CONTACT FORM CARD
========================================================= */

.contact-form-card {

    position:
        relative;

    padding:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    border:
        1px
        solid
        rgba(
            20,
            35,
            27,
            0.09
        );

    border-radius:
        28px;

    background:

        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.98
            ),

            rgba(
                247,
                250,
                248,
                0.94
            )
        );

    box-shadow:

        0
        25px
        70px
        rgba(
            20,
            35,
            27,
            0.075
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.9
        );

}


/* Top green accent */

.contact-form-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        40px;

    width:
        90px;

    height:
        3px;

    border-radius:
        0
        0
        999px
        999px;

    background:

        linear-gradient(
            90deg,
            #3d9865,
            #5bb780
        );

}


/* =========================================================
   10. FORM HEADING
========================================================= */

.form-heading {

    margin-bottom:
        2.25rem;

}


.form-heading h3 {

    margin:
        0
        0
        0.75rem;

    color:
        #151816;

    font-size:
        clamp(
            1.5rem,
            2vw,
            2rem
        );

    font-weight:
        800;

    letter-spacing:
        -0.035em;

}


.form-heading p {

    max-width:
        560px;

    margin:
        0;

    color:
        #6b756f;

    line-height:
        1.7;

}


/* =========================================================
   11. PROJECT FORM
========================================================= */

.project-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1.35rem;

}


/* =========================================================
   12. FORM ROW
========================================================= */

.form-row {

    display:
        grid;

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

    gap:
        1.25rem;

}


/* =========================================================
   13. FORM GROUP
========================================================= */

.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.6rem;

}


/* =========================================================
   14. FORM LABEL
========================================================= */

.form-group label {

    color:
        #222723;

    font-size:
        0.82rem;

    font-weight:
        700;

    letter-spacing:
        0.01em;

}


/* =========================================================
   15. INPUTS / SELECT / TEXTAREA
========================================================= */

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

    width:
        100%;

    border:
        1px
        solid
        rgba(
            25,
            40,
            31,
            0.13
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.85
        );

    color:
        #171a18;

    font-family:
        inherit;

    font-size:
        0.95rem;

    line-height:
        1.5;

    outline:
        none;

    transition:

        border-color
        0.25s
        ease,

        box-shadow
        0.25s
        ease,

        background
        0.25s
        ease;

}


/* Inputs */

.form-group input,
.form-group select {

    min-height:
        52px;

    padding:
        0
        16px;

}


/* Textarea */

.form-group textarea {

    min-height:
        140px;

    padding:
        14px
        16px;

    resize:
        vertical;

}


/* =========================================================
   16. PLACEHOLDER
========================================================= */

.form-group input::placeholder,
.form-group textarea::placeholder {

    color:
        #9aa39e;

}


/* =========================================================
   17. FOCUS STATE
========================================================= */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color:
        rgba(
            61,
            152,
            101,
            0.65
        );

    background:
        #ffffff;

    box-shadow:

        0
        0
        0
        4px
        rgba(
            91,
            183,
            128,
            0.10
        );

}


/* =========================================================
   18. SELECT
========================================================= */

.form-group select {

    cursor:
        pointer;

}


/* =========================================================
   19. CONTACT BUTTON
========================================================= */

.contact-button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        56px;

    margin-top:
        0.5rem;

    padding:
        0
        24px;

    overflow:
        hidden;

    border:
        1px
        solid
        #3d9865;

    border-radius:
        12px;

    background:

        linear-gradient(
            135deg,
            #3d9865,
            #5bb780
        );

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        0.9rem;

    font-weight:
        800;

    letter-spacing:
        0.01em;

    cursor:
        pointer;

    box-shadow:

        0
        12px
        30px
        rgba(
            61,
            152,
            101,
            0.20
        );

    transition:

        transform
        0.3s
        ease,

        box-shadow
        0.3s
        ease,

        filter
        0.3s
        ease;

}


.contact-button:hover {

    transform:
        translateY(
            -3px
        );

    filter:
        brightness(
            1.04
        );

    box-shadow:

        0
        18px
        40px
        rgba(
            61,
            152,
            101,
            0.28
        );

}


.contact-button:active {

    transform:
        translateY(
            0
        );

}


/* =========================================================
   20. CONTACT INFORMATION PANEL
========================================================= */

.contact-info {

    position:
        relative;

    padding:
        2.25rem;

    border-radius:
        28px;

    background:

        linear-gradient(
            145deg,
            #111713,
            #1b2820
        );

    color:
        #ffffff;

    overflow:
        hidden;

    box-shadow:

        0
        25px
        70px
        rgba(
            20,
            35,
            27,
            0.16
        );

}


/* Decorative glow */

.contact-info::before {

    content:
        "";

    position:
        absolute;

    top:
        -120px;

    right:
        -100px;

    width:
        300px;

    height:
        300px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(
                91,
                183,
                128,
                0.25
            ),

            transparent
            70%
        );

    pointer-events:
        none;

}


/* Burgundy glow */

.contact-info::after {

    content:
        "";

    position:
        absolute;

    bottom:
        -100px;

    left:
        -100px;

    width:
        250px;

    height:
        250px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(
                150,
                20,
                20,
                0.16
            ),

            transparent
            70%
        );

    pointer-events:
        none;

}


/* =========================================================
   21. CONTACT INFO HEADING
========================================================= */

.contact-info h3 {

    position:
        relative;

    z-index:
        2;

    margin:
        0
        0
        1rem;

    color:
        #ffffff;

    font-size:
        clamp(
            1.6rem,
            2.5vw,
            2.3rem
        );

    line-height:
        1.15;

    letter-spacing:
        -0.04em;

}


/* =========================================================
   22. CONTACT INFO INTRO
========================================================= */

.contact-info > p {

    position:
        relative;

    z-index:
        2;

    margin:
        0
        0
        2.5rem;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size:
        0.95rem;

    line-height:
        1.8;

}


/* =========================================================
   23. CONTACT FEATURES
========================================================= */

.contact-feature {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        50px
        1fr;

    column-gap:
        16px;

    row-gap:
        5px;

    padding:
        1.4rem
        0;

    border-top:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.10
        );

}


/* =========================================================
   24. FEATURE ICON
========================================================= */

.contact-feature svg {

    grid-row:
        span 2;

    display:
        flex;

    width:
        50px;

    height:
        50px;

    padding:
        13px;

    border:
        1px
        solid
        rgba(
            91,
            183,
            128,
            0.30
        );

    border-radius:
        14px;

    background:

        rgba(
            91,
            183,
            128,
            0.10
        );

    color:
        #6ed294;

    stroke:
        currentColor;

}


/* =========================================================
   25. FEATURE TITLE
========================================================= */

.contact-feature strong {

    align-self:
        end;

    color:
        #ffffff;

    font-size:
        0.98rem;

    font-weight:
        800;

}


/* =========================================================
   26. FEATURE DESCRIPTION
========================================================= */

.contact-feature span {

    color:
        rgba(
            255,
            255,
            255,
            0.52
        );

    font-size:
        0.86rem;

    line-height:
        1.65;

}


/* =========================================================
   27. RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .contact-grid {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    .contact-info {

        display:
            grid;

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

        column-gap:
            20px;

    }


    .contact-info h3,
    .contact-info > p {

        grid-column:
            1 / -1;

    }


    .contact-feature {

        border-top:
            1px
            solid
            rgba(
                255,
                255,
                255,
                0.10
            );

    }

}


/* =========================================================
   28. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    #contact {

        padding:
            5rem
            0;

    }


    #contact .section-title {

        font-size:
            clamp(
                2.5rem,
                10vw,
                4rem
            );

    }


    .contact-form-card {

        padding:
            1.5rem;

        border-radius:
            22px;

    }


    .contact-form-card::before {

        left:
            24px;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap:
            1.35rem;

    }


    .contact-info {

        display:
            block;

        padding:
            1.75rem;

        border-radius:
            22px;

    }


    .contact-feature {

        grid-template-columns:
            46px
            1fr;

    }


    .contact-feature svg {

        width:
            46px;

        height:
            46px;

    }

}


/* =========================================================
   29. RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    #contact {

        padding:
            4.5rem
            0;

    }


    #contact .section-heading {

        margin-bottom:
            3rem;

    }


    .contact-form-card {

        padding:
            1.25rem;

    }


    .contact-info {

        padding:
            1.5rem;

    }


    .form-group input,
    .form-group select {

        min-height:
            50px;

    }

}


/* =========================================================
   30. REDUCED MOTION
========================================================= */

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

    .contact-button,
    .form-group input,
    .form-group select,
    .form-group textarea {

        transition:
            none;

    }


    .contact-button:hover {

        transform:
            none;

    }

}


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