/* =========================================================
                    RAY STUDIO CONTACT PAGE
========================================================= */


/* =========================================================
                        GLOBAL
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


body {

    color: #4b3328;

    background: #f8f2ea;

    font-family:
        "Poppins",
        sans-serif;

}


.contact-page {

    width: 100%;

    overflow: hidden;

}


.eyebrow {

    color: #a8743a;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;

}



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

.contact-hero {

    min-height: 540px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, 0.9),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #f8f2ea,
            #f3e7d7
        );

}


.contact-hero::before {

    content: "";

    width: 420px;

    height: 420px;

    position: absolute;

    top: -260px;

    left: -120px;

    border:

        1px solid
        rgba(168, 116, 58, 0.18);

    border-radius: 50%;

}


.contact-hero-content {

    width:
        min(750px, 85%);

    margin-left: 10%;

    position: relative;

    z-index: 5;

}


.contact-hero h1 {

    margin-top: 15px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: clamp(
        60px,
        7vw,
        100px
    );

    font-weight: 500;

    line-height: 0.9;

}


.contact-hero h1 em {

    display: block;

    color: #a8743a;

    font-weight: 500;

}


.contact-hero-content > p:last-child {

    max-width: 560px;

    margin-top: 30px;

    color: #6e5a50;

    font-size: 13px;

    font-weight: 300;

    line-height: 2;

}



/* =========================================================
                        THREAD
========================================================= */

.contact-thread {

    width: 110%;

    height: 470px;

    position: absolute;

    top: -10px;

    left: -5%;

    pointer-events: none;

}


.contact-thread path {

    fill: none;

    stroke: #a8743a;

    stroke-width: 1.3;

    stroke-dasharray: 12 10;

    opacity: 0.36;

    animation:
        contactThread
        20s
        linear
        infinite;

}


@keyframes contactThread {

    to {

        stroke-dashoffset: -240;

    }

}



/* =========================================================
                        NEEDLE
========================================================= */

.needle-art {

    width: 140px;

    height: 30px;

    position: absolute;

    right: 12%;

    top: 150px;

    transform:
        rotate(-35deg);

}


.needle-line {

    width: 130px;

    height: 2px;

    position: absolute;

    top: 14px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4b3328
        );

}


.needle-line::after {

    content: "";

    position: absolute;

    right: -7px;

    top: -3px;

    border-top:
        4px solid transparent;

    border-bottom:
        4px solid transparent;

    border-left:
        10px solid #4b3328;

}


.needle-eye {

    width: 17px;

    height: 8px;

    position: absolute;

    left: 0;

    top: 11px;

    border:

        1px solid
        #4b3328;

    border-radius: 50%;

}



/* =========================================================
                        URDU LETTERS
========================================================= */

.urdu-letter {

    position: absolute;

    color:
        rgba(75, 51, 40, 0.07);

    font-family:
        "Noto Nastaliq Urdu",
        serif;

    user-select: none;

}


.urdu-one {

    top: 9%;

    left: 47%;

    font-size: 95px;

}


.urdu-two {

    right: 6%;

    bottom: 10%;

    font-size: 145px;

}


.urdu-three {

    left: 4%;

    bottom: -40px;

    font-size: 175px;

    color:
        rgba(168, 116, 58, 0.07);

}



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

.contact-section {

    max-width: 1250px;

    margin: 0 auto;

    padding:
        130px
        35px;

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    gap: 90px;

}



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

.contact-information h2 {

    max-width: 430px;

    margin-top: 12px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 58px;

    font-weight: 500;

    line-height: 1;

}


.contact-intro {

    max-width: 480px;

    margin:
        28px
        0
        50px;

    color: #6e5a50;

    font-size: 13px;

    font-weight: 300;

    line-height: 2;

}



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

.contact-detail {

    padding:
        22px
        0;

    display: grid;

    grid-template-columns:
        45px
        1fr;

    gap: 18px;

    border-top:

        1px solid
        rgba(75, 51, 40, 0.12);

}


.contact-detail:last-child {

    border-bottom:

        1px solid
        rgba(75, 51, 40, 0.12);

}


.detail-number {

    color: #a8743a;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 18px;

}


.contact-detail small {

    display: block;

    margin-bottom: 5px;

    color: #4b3328;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

}


.contact-detail p {

    color: #6e5a50;

    font-size: 12px;

}



/* =========================================================
                    CONTACT FORM CARD
========================================================= */

.contact-form-card {

    padding:
        50px
        45px;

    border:

        1px solid
        rgba(75, 51, 40, 0.10);

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

    box-shadow:

        0 22px 60px
        rgba(75, 51, 40, 0.07);

}


.form-heading {

    margin-bottom: 38px;

}


.form-heading h2 {

    margin-top: 7px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 42px;

    font-weight: 500;

}



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

.contact-form {

    display: grid;

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

    gap:
        25px
        22px;

}


.form-group {

    display: flex;

    flex-direction: column;

}


.full-width {

    grid-column:
        1 / -1;

}


.form-group label {

    margin-bottom: 9px;

    color: #4b3328;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.7px;

}


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

    width: 100%;

    border: none;

    border-bottom:

        1px solid
        rgba(75, 51, 40, 0.24);

    outline: none;

    padding:
        11px
        2px;

    color: #4b3328;

    background: transparent;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 12px;

    transition:
        border-color
        0.3s ease;

}


.form-group textarea {

    resize: vertical;

    min-height: 130px;

}


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

    border-color: #a8743a;

}


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

    color:
        rgba(110, 90, 80, 0.55);

}



/* =========================================================
                        BUTTON
========================================================= */

.form-submit {

    margin-top: 8px;

}


.form-submit button {

    min-width: 190px;

    padding:
        15px
        25px;

    border: none;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    color: #ffffff;

    background: #4b3328;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;

}


.form-submit button span {

    font-size: 17px;

}


.form-submit button:hover {

    background: #a8743a;

    transform:
        translateY(-2px);

}



/* =========================================================
                    CUSTOMER CARE MESSAGE
========================================================= */

.contact-message {

    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    color: #f8f2ea;

    background: #4b3328;

}


.contact-message-content {

    width:
        min(800px, 85%);

    position: relative;

    z-index: 3;

    text-align: center;

}


.contact-message-content .eyebrow {

    color: #c79657;

}


.contact-message-content h2 {

    margin-top: 14px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: clamp(
        50px,
        6vw,
        77px
    );

    font-weight: 500;

}


.contact-message-content > p:last-child {

    margin-top: 20px;

    color:
        rgba(248, 242, 234, 0.64);

    font-size: 12px;

    font-weight: 300;

}



/* =========================================================
                    MACHINE ART
========================================================= */

.machine-art {

    width: 300px;

    position: absolute;

    right: 4%;

    bottom: 15px;

    opacity: 0.12;

}


.machine-art svg {

    width: 100%;

}


.machine-art path,
.machine-art circle {

    fill: none;

    stroke: #c79657;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}



/* =========================================================
                        TABLET
========================================================= */

@media screen and (max-width: 950px) {

    .contact-section {

        grid-template-columns: 1fr;

        gap: 65px;

    }


    .contact-information {

        max-width: 650px;

    }


    .machine-art {

        right: -70px;

    }

}



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

@media screen and (max-width: 650px) {

    .contact-hero {

        min-height: 510px;

    }


    .contact-hero-content {

        width:
            calc(100% - 40px);

        margin:
            0 auto;

    }


    .contact-hero h1 {

        font-size: 58px;

    }


    .contact-hero-content > p:last-child {

        font-size: 12px;

    }


    .needle-art {

        right: -30px;

        top: 90px;

        opacity: 0.45;

    }


    .urdu-one {

        display: none;

    }


    .contact-section {

        padding:
            90px
            20px;

    }


    .contact-information h2 {

        font-size: 46px;

    }


    .contact-form-card {

        padding:
            35px
            23px;

    }


    .contact-form {

        grid-template-columns: 1fr;

    }


    .full-width {

        grid-column: auto;

    }


    .form-submit button {

        width: 100%;

    }


    .contact-message {

        min-height: 430px;

    }


    .contact-message-content h2 {

        font-size: 48px;

    }


    .machine-art {

        width: 190px;

        right: -75px;

        bottom: -5px;

    }

}