/* =========================================================
   OLIVER RIDLEY
   CONTACT PAGE
   DEEP PURPLE EDITION

   SECTION 1 — CONTACT HERO
   ========================================================= */


/* =========================================================
   CONTACT COLOUR SYSTEM
   ========================================================= */

:root {

    --contact-purple:
        #9b5cff;
--page-accent: #9b5cff;
    --contact-purple-bright:
        #b47aff;

    --contact-purple-dark:
        #3b126b;

    --contact-purple-deep:
        #1c0738;

    --contact-glow:
        rgba(155, 92, 255, 0.38);

    --contact-glow-soft:
        rgba(155, 92, 255, 0.18);

    --contact-white:
        #ffffff;

    --contact-grey:
        #b8b8b8;

    --contact-dark:
        #050505;

}


/* =========================================================
   GLOBAL CONTACT BACKGROUND
   ========================================================= */

body {

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(75, 20, 135, 0.22),
            transparent 18%
        ),
        #050505;

}


/* =========================================================
   SECTION 1
   CONTACT HERO
   ========================================================= */

.contact-hero {

    min-height:
        calc(120vh - 90px);

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        120px 30px
        140px;

    overflow:
        hidden;

}


/* =========================================================
   HERO PURPLE ATMOSPHERE
   ========================================================= */

.contact-hero-glow {

    position:
        absolute;

    width:
        800px;

    height:
        800px;

    left:
        50%;

    top:
        45%;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(155, 92, 255, 0.34)
            0%,

            rgba(91, 31, 160, 0.24)
            32%,

            rgba(45, 10, 90, 0.13)
            52%,

            transparent
            72%
        );

    filter:
        blur(80px);

    pointer-events:
        none;

    animation:
        contactGlow 7s ease-in-out infinite;

}


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

.contact-hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        1100px;

    margin:
        0 auto;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.contact-eyebrow {

    margin:
        0 0 20px;

    color:
        var(--contact-purple);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.1rem;

    font-weight:
        600;

    letter-spacing:
        5px;

    text-transform:
        uppercase;

}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.contact-title {

    margin:
        0;

    color:
        var(--contact-white);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        clamp(
            4rem,
            11vw,
            9.5rem
        );

    font-weight:
        500;

    letter-spacing:
        8px;

    line-height:
        0.9;


    text-decoration-color:
        var(--contact-purple);

    text-decoration-thickness:
        2px;

    text-underline-offset:
        18px;

    text-shadow:
        0 0 35px
        rgba(155, 92, 255, 0.20);

}


/* =========================================================
   TITLE LINE
   ========================================================= */

.contact-title-line {

    width:
        90px;

    height:
        2px;

    margin:
        42px auto 28px;

    background:
        var(--contact-purple);

    box-shadow:
        0 0 20px
        var(--contact-purple);

}


/* =========================================================
   TAGLINE
   ========================================================= */

.contact-tagline {

    margin:
        0 0 20px;

    color:
        var(--contact-white);

    font-family:
        'Cormorant Garamond',
        serif;

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

    font-weight:
        500;

    letter-spacing:
        2px;

}


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

.contact-intro {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        var(--contact-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.3rem;

    font-weight:
        300;

    line-height:
        1.9;

}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.contact-scroll {

    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        60px;

    color:
        var(--contact-grey);

    text-decoration:
        none;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.65rem;

    font-weight:
        500;

    letter-spacing:
        3px;

    transition:
        0.35s ease;

}


.contact-scroll i {

    color:
        var(--contact-purple);

    font-size:
        1rem;

    animation:
        contactScrollArrow
        2s ease-in-out infinite;

}


.contact-scroll:hover {

    color:
        var(--contact-purple);

    transform:
        translateY(4px);

}


/* =========================================================
   SECTION 2
   CONTACT ME
   ========================================================= */

.contact-details-section {

    position:
        relative;

    max-width:
        1450px;

    margin:
        0 auto;

    padding:
        130px 40px
        160px;

}


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

.contact-details-heading {

    max-width:
        800px;

    margin:
        0 auto 75px;

    text-align:
        center;

}


.contact-details-heading h2 {

    margin:
        0 0 25px;

    color:
        var(--contact-white);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(
            4rem,
            8vw,
            7rem
        );

    font-weight:
        500;

    line-height:
        0.9;

}


.contact-details-heading p {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        var(--contact-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.23rem;

    font-weight:
        300;

    line-height:
        1.8;

}


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

.contact-details-card {

    position:
        relative;

    display:
        grid;

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

    gap:
        1px;

    max-width:
        1250px;

    margin:
        0 auto;

    overflow:
        hidden;

    background:
        rgba(10, 5, 18, 0.85);

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

    border-radius:
        30px;

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.55),

        0 0 70px
        rgba(110, 50, 200, 0.10);

    transition:
        0.5s ease;

}


/* =========================================================
   CONTACT CARD HOVER
   ========================================================= */

.contact-details-card:hover {

    border-color:
        rgba(155, 92, 255, 0.65);

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.60),

        0 0 75px
        rgba(155, 92, 255, 0.16);

}


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

.contact-detail {

    position:
        relative;

    padding:
        55px 40px;

    text-align:
        center;

    transition:
        0.45s ease;

}


/* =========================================================
   ITEM DIVIDERS
   ========================================================= */

.contact-detail:not(:last-child) {

    border-right:
        1px solid
        rgba(255, 255, 255, 0.08);

}


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

.contact-detail-icon {

    width:
        70px;

    height:
        70px;

    margin:
        0 auto 25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(155, 92, 255, 0.45);

    border-radius:
        50%;

    background:
        rgba(75, 25, 130, 0.18);

    color:
        var(--contact-purple);

    font-size:
        1.2rem;

    box-shadow:
        0 0 30px
        rgba(155, 92, 255, 0.10);

    transition:
        0.45s ease;

}


.contact-detail:hover
.contact-detail-icon {

    transform:
        translateY(-5px);

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

    background:
        rgba(100, 40, 180, 0.25);

    box-shadow:
        0 0 40px
        rgba(155, 92, 255, 0.25);

}


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

.contact-detail-label {

    display:
        block;

    margin:
        0 0 12px;

    color:
        var(--contact-purple);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.3rem;

    font-weight:
        600;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


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

.contact-detail-value {

    margin:
        0;

    color:
        var(--contact-white);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.4rem;

    font-weight:
        400;

    line-height:
        1.7;

}


.contact-detail-value a {

    color:
        var(--contact-white);

    text-decoration:
        none;

    transition:
        0.35s ease;

}


.contact-detail-value a:hover {

    color:
        var(--contact-purple-bright);

    text-shadow:
        0 0 15px
        rgba(155, 92, 255, 0.35);

}


/* =========================================================
   WORK LOOKING FOR
   ========================================================= */

.contact-work {

    max-width:
        1250px;

    margin:
        35px auto 0;

    padding:
        45px;

    text-align:
        center;

    background:
        rgba(20, 8, 35, 0.65);

    border:
        1px solid
        rgba(155, 92, 255, 0.20);

    border-radius:
        24px;

    backdrop-filter:
        blur(18px);

    transition:
        0.45s ease;

}


.contact-work:hover {

    border-color:
        rgba(155, 92, 255, 0.55);

    box-shadow:
        0 0 50px
        rgba(155, 92, 255, 0.10);

}


.contact-work-label {

    display:
        block;

    margin:
        0 0 15px;

    color:
        var(--contact-purple);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.23rem;

    font-weight:
        600;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


.contact-work p {

    max-width:
        850px;

    margin:
        0 auto;

    color:
        var(--contact-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.20rem;

    font-weight:
        300;

    line-height:
        1.9;

}


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

@keyframes contactGlow {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            scale(1);

        opacity:
            0.72;

    }

    50% {

        transform:
            translate(-50%, -50%)
            scale(1.12);

        opacity:
            1;

    }

}


@keyframes contactScrollArrow {

    0%,
    100% {

        transform:
            translateY(0);

        opacity:
            0.6;

    }

    50% {

        transform:
            translateY(7px);

        opacity:
            1;

    }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .contact-hero {

        padding:
            100px 25px
            120px;

    }


    .contact-details-card {

        grid-template-columns:
            1fr;

    }


    .contact-detail:not(:last-child) {

        border-right:
            none;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.08);

    }

}


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

@media (max-width: 700px) {

    .contact-hero {

        min-height:
            calc(100vh - 70px);

        padding:
            90px 20px
            100px;

    }


    .contact-title {

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

        letter-spacing:
            4px;

        text-underline-offset:
            12px;

    }


    .contact-tagline {

        font-size:
            1.7rem;

    }


    .contact-intro {

        font-size:
            1.23rem;

    }


    .contact-details-section {

        padding:
            90px 20px
            110px;

    }


    .contact-details-heading {

        margin-bottom:
            50px;

    }


    .contact-details-heading h2 {

        font-size:
            4rem;

    }


    .contact-detail {

        padding:
            45px 25px;

    }


    .contact-work {

        padding:
            35px 25px;

    }


    .contact-work p {

        font-size:
            1.1rem;

    }

}
/* =========================================================
   SECTION 3
   MY REPRESENTATION
   ========================================================= */


/* =========================================================
   REPRESENTATION SECTION
   ========================================================= */

.representation-section {

    position:
        relative;

    max-width:
        1450px;

    margin:
        0 auto;

    padding:
        150px 40px
        170px;

}


/* =========================================================
   REPRESENTATION HEADING
   ========================================================= */

.representation-heading {

    max-width:
        850px;

    margin:
        0 auto 80px;

    text-align:
        center;

}


.representation-heading h2 {

    margin:
        0 0 25px;

    color:
        var(--contact-white);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(
            4rem,
            8vw,
            7rem
        );

    font-weight:
        500;

    line-height:
        0.9;

}


.representation-heading p:last-child {

    max-width:
        700px;

    margin:
        0 auto;

    color:
        var(--contact-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.23rem;

    font-weight:
        300;

    line-height:
        1.8;

}


/* =========================================================
   AGENT CARD
   ========================================================= */

.agent-card {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    gap:
        70px;

    max-width:
        1250px;

    margin:
        0 auto;

    padding:
        70px;

    overflow:
        hidden;

    background:
        rgba(15, 8, 25, 0.78);

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

    border-radius:
        30px;

    backdrop-filter:
        blur(20px);

    transition:
        0.5s ease;

}


/* =========================================================
   AGENT CARD HOVER
   ========================================================= */

.agent-card:hover {

    border-color:
        rgba(155, 92, 255, 0.70);

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.60),

        0 0 65px
        rgba(120, 50, 220, 0.16);

}


/* =========================================================
   AGENT ATMOSPHERIC GLOW
   ========================================================= */

.agent-glow {

    position:
        absolute;

    width:
        650px;

    height:
        650px;

    top:
        -320px;

    left:
        -250px;

    background:
        radial-gradient(
            circle,
            rgba(155, 92, 255, 0.20),
            rgba(75, 20, 135, 0.10) 40%,
            transparent 70%
        );

    filter:
        blur(40px);

    pointer-events:
        none;

    transition:
        0.6s ease;

}


.agent-card:hover
.agent-glow {

    transform:
        scale(1.18);

    opacity:
        1;

}


/* =========================================================
   AGENT MAIN
   ========================================================= */

.agent-main {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   AGENT NUMBER
   ========================================================= */

.agent-number {

    display:
        block;

    margin-bottom:
        20px;

    color:
        rgba(155, 92, 255, 0.55);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.1rem;

    font-weight:
        600;

    letter-spacing:
        4px;

}


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

.agent-label {

    display:
        block;

    margin-bottom:
        18px;

    color:
        var(--contact-purple);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.1rem;

    font-weight:
        600;

    letter-spacing:
        4px;

}


/* =========================================================
   AGENCY NAME
   ========================================================= */

.agent-main h3 {

    margin:
        0 0 25px;

    color:
        var(--contact-white);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(
            5rem,
            5vw,
            5rem
        );

    font-weight:
        500;

    line-height:
        0.95;

    transition:
        0.4s ease;

}


.agent-card:hover
.agent-main h3 {

    color:
        var(--contact-purple-bright);

}


/* =========================================================
   AGENT DESCRIPTION
   ========================================================= */

.agent-description {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--contact-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.23rem;

    font-weight:
        300;

    line-height:
        1.9;

}


/* =========================================================
   AGENT DETAILS
   ========================================================= */

.agent-details {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


/* =========================================================
   INDIVIDUAL AGENT DETAIL
   ========================================================= */

.agent-detail {

    padding:
        22px 0;

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

}


.agent-detail:first-child {

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

}


/* =========================================================
   AGENT DETAIL LABEL
   ========================================================= */

.agent-detail span {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--contact-purple);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.23rem;

    font-weight:
        600;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


/* =========================================================
   AGENT DETAIL VALUE
   ========================================================= */

.agent-detail strong,
.agent-detail a {

    color:
        var(--contact-white);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.5rem;

    font-weight:
        400;

    line-height:
        1.6;

}


.agent-detail a {

    text-decoration:
        none;

    transition:
        0.35s ease;

}


.agent-detail a:hover {

    color:
        var(--contact-purple-bright);

    text-shadow:
        0 0 18px
        rgba(155, 92, 255, 0.35);

}


/* =========================================================
   REPRESENTATION NOTE
   ========================================================= */

.representation-note {

    max-width:
        1050px;

    margin:
        45px auto 0;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    gap:
        18px;

    padding:
        28px 35px;

    background:
        rgba(25, 10, 40, 0.55);

    border:
        1px solid
        rgba(155, 92, 255, 0.22);

    border-radius:
        20px;

    backdrop-filter:
        blur(15px);

    transition:
        0.4s ease;

}


.representation-note:hover {

    border-color:
        rgba(155, 92, 255, 0.55);

    box-shadow:
        0 0 45px
        rgba(155, 92, 255, 0.10);

}


.representation-note i {

    flex-shrink:
        0;

    margin-top:
        4px;

    color:
        var(--contact-purple);

}


.representation-note p {

    margin:
        0;

    color:
        var(--contact-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.1rem;

    font-weight:
        300;

    line-height:
        1.8;

}


.representation-note strong {

    color:
        var(--contact-white);

    font-weight:
        500;

}


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

@media (max-width: 850px) {

    .representation-section {

        padding:
            110px 20px
            130px;

    }


    .representation-heading {

        margin-bottom:
            60px;

    }


    .agent-card {

        grid-template-columns:
            1fr;

        gap:
            45px;

        padding:
            45px 30px;

    }


    .agent-main h3 {

        font-size:
            3.2rem;

    }


    .agent-description {

        font-size:
            1.23rem;

    }


    .representation-note {

        padding:
            25px;

    }

}


@media (max-width: 600px) {

    .representation-section {

        padding:
            90px 20px
            110px;

    }


    .representation-heading h2 {

        font-size:
            4rem;

    }


    .agent-card {

        padding:
            40px 25px;

    }


    .agent-main h3 {

        font-size:
            2.8rem;

    }


    .agent-detail strong,
    .agent-detail a {

        font-size:
            1.1rem;

    }


    .representation-note {

        gap:
            12px;

        padding:
            22px;

    }


    .representation-note p {

        font-size:
            1.1rem;

    }

}

/* =========================================================
   SECTION 4
   REPRESENTATION & OPPORTUNITIES
========================================================= */


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

.opportunities-section {

    position: relative;

    max-width: 1450px;

    margin: 0 auto;

    padding:
        150px 40px
        170px;

    overflow: hidden;

}


/* =========================================================
   PURPLE ATMOSPHERIC GLOW
========================================================= */

.opportunities-glow {

    position: absolute;

    width: 900px;

    height: 900px;

    top: 45%;

    left: 50%;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(125, 45, 255, 0.24)
            0%,

            rgba(75, 15, 150, 0.15)
            35%,

            transparent 72%
        );

    filter:
        blur(50px);

    pointer-events:
        none;

    animation:
        opportunitiesGlow 9s ease-in-out infinite;

}


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

.opportunities-heading {

    position:
        relative;

    z-index:
        2;

    max-width:
        850px;

    margin:
        0 auto 85px;

    text-align:
        center;

}


/* =========================================================
   EYEBROW
========================================================= */

.opportunities-eyebrow {

    margin:
        0 0 20px;

    color:
        var(--contact-purple);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.05rem;

    font-weight:
        600;

    letter-spacing:
        5px;

    text-transform:
        uppercase;

}


/* =========================================================
   MAIN HEADING
========================================================= */

.opportunities-heading h2 {

    margin:
        0;

    color:
        var(--contact-white);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        clamp(
            7rem,
            8vw,
            7rem
        );

    font-weight:
        500;

    letter-spacing:
        6px;

    line-height:
        0.9;

   
    text-decoration-thickness:
        2px;

    text-underline-offset:
        13px;

    text-decoration-color:
        var(--contact-purple);

    text-shadow:
        0 0 35px
        rgba(125, 45, 255, 0.18);

}


/* =========================================================
   TITLE LINE
========================================================= */

.opportunities-title-line {

    width:
        90px;

    height:
        2px;

    margin:
        38px auto 28px;

    background:
        var(--contact-purple);

    box-shadow:
        0 0 20px
        rgba(125, 45, 255, 0.65);

}


/* =========================================================
   INTRO
========================================================= */

.opportunities-heading > p:last-child {

    max-width:
        680px;

    margin:
        0 auto;

    color:
        var(--contact-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.22rem;

    font-weight:
        300;

    line-height:
        1.9;

}


/* =========================================================
   CONTACT FORM WRAPPER
========================================================= */

.contact-form-wrapper {

    position:
        relative;

    z-index:
        2;

    max-width:
        950px;

    margin:
        0 auto;

    padding:
        65px 70px
        70px;

    background:
        rgba(12, 8, 20, 0.82);

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

    border-radius:
        30px;

    backdrop-filter:
        blur(22px);

    overflow:
        hidden;

    transition:
        transform 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease;

}


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

.contact-form-wrapper:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(125, 45, 255, 0.65);

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.60),

        0 0 55px
        rgba(125, 45, 255, 0.14);

}


/* =========================================================
   FORM INNER GLOW
========================================================= */

.contact-form-glow {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    top:
        -280px;

    right:
        -180px;

    background:
        radial-gradient(
            circle,
            rgba(125, 45, 255, 0.20),
            transparent 70%
        );

    filter:
        blur(35px);

    pointer-events:
        none;

    transition:
        transform 0.7s ease;

}


.contact-form-wrapper:hover
.contact-form-glow {

    transform:
        scale(1.35);

}


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

.contact-form-heading {

    position:
        relative;

    z-index:
        2;

    margin:
        0 0 45px;

}


.contact-form-heading p {

    margin:
        0 0 10px;

    color:
        var(--contact-purple);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.1rem;

    font-weight:
        600;

    letter-spacing:
        4px;

}


.contact-form-heading h3 {

    margin:
        0;

    color:
        white;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(
            3rem,
            5vw,
            4.5rem
        );

    font-weight:
        500;

    line-height:
        0.9;

}


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

.contact-form {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    gap:
        28px;

}


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

.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


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

.form-group label {

    color:
        var(--contact-purple);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.23rem;

    font-weight:
        600;

    letter-spacing:
        3px;

}


/* =========================================================
   INPUTS
========================================================= */

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

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        17px 20px;

    color:
        white;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        12px;

    outline:
        none;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.1rem;

    font-weight:
        300;

    transition:
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;

}


.form-group textarea {

    min-height:
        200px;

    resize:
        vertical;

}


/* =========================================================
   PLACEHOLDER
========================================================= */

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

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

}


/* =========================================================
   INPUT FOCUS
========================================================= */

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

    border-color:
        rgba(125, 45, 255, 0.75);

    background:
        rgba(125, 45, 255, 0.045);

    box-shadow:
        0 0 25px
        rgba(125, 45, 255, 0.10);

}


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

.contact-submit {

    align-self:
        flex-start;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        10px;

    padding:
        17px 30px;

    color:
        white;

    background:
        rgba(80, 20, 150, 0.18);

    border:
        1px solid
        rgba(125, 45, 255, 0.70);

    border-radius:
        999px;

    cursor:
        pointer;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.1rem;

    font-weight:
        600;

    letter-spacing:
        2px;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;

}


.contact-submit i {

    color:
        var(--contact-purple);

    transition:
        transform 0.35s ease,
        color 0.35s ease;

}


.contact-submit:hover {

    transform:
        translateY(-5px);

    background:
        var(--contact-purple);

    box-shadow:
        0 15px 45px
        rgba(125, 45, 255, 0.30);

}


.contact-submit:hover i {

    color:
        white;

    transform:
        translateX(6px);

}


/* =========================================================
   GLOW ANIMATION
========================================================= */

@keyframes opportunitiesGlow {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            scale(1);

        opacity:
            0.65;

    }

    50% {

        transform:
            translate(-50%, -50%)
            scale(1.10);

        opacity:
            0.9;

    }

}


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

@media (max-width: 700px) {

    .opportunities-section {

        padding:
            110px 20px
            130px;

    }

    .opportunities-heading {

        margin-bottom:
            60px;

    }

    .opportunities-heading h2 {

        font-size:
            clamp(
                3rem,
                13vw,
                5rem
            );

        letter-spacing:
            3px;

    }

    .opportunities-heading > p:last-child {

        font-size:
            1.3em;

    }

    .contact-form-wrapper {

        padding:
            40px 25px
            45px;

        border-radius:
            24px;

    }

    .contact-form-heading {

        margin-bottom:
            35px;

    }

    .contact-form-heading h3 {

        font-size:
            3rem;

    }

    .contact-submit {

        width:
            100%;

        justify-content:
            center;

    }

}