/* =========================================================
   VBLink HR CONSULTANTS
   CONTACT PAGE
   File : contact.css

   DESIGN SYSTEM
   ---------------------------------------------------------
   - Premium blue / cyan / purple gradient
   - Animated 2px running borders
   - Soft glassmorphism
   - Modern form controls
   - Responsive layout
   - Smooth hover effects
   - Accessible focus states
   ========================================================= */


/* =========================================================
   ROOT DESIGN VARIABLES
========================================================= */

:root {

    --contact-blue:
        #2f54eb;

    --contact-blue-dark:
        #1d3fcf;

    --contact-cyan:
        #00b4ff;

    --contact-cyan-bright:
        #00d4ff;

    --contact-purple:
        #7b2cff;

    --contact-pink:
        #ff3cac;

    --contact-green:
        #00d084;

    --contact-heading:
        #16376d;

    --contact-text:
        #5c6b81;

    --contact-muted:
        #97a7bb;

    --contact-border:
        #d9e5f6;

    --contact-light:
        #f7faff;

    --contact-section:
        #f8fbff;

    --contact-white:
        #ffffff;

    --contact-radius:
        25px;

    --contact-shadow:
        0 20px 55px rgba(15, 76, 129, .13);

    --contact-gradient:
        linear-gradient(
            90deg,
            #2f54eb,
            #00d4ff,
            #7b2cff,
            #ff3cac,
            #2f54eb
        );

}


/* =========================================================
   GLOBAL CONTACT PAGE
========================================================= */

main {

    margin-top:
        20px;

    overflow:
        hidden;
}


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

.hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        25px 0 30px;

    background:
        linear-gradient(
            135deg,
            #eef5ff 0%,
            #f8fbff 45%,
            #ffffff 100%
        );
}


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

.hero::before {

    content:
        "";

    position:
        absolute;

    top:
        -220px;

    left:
        -180px;

    width:
        520px;

    height:
        520px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(47,84,235,.18),
            transparent 72%
        );

    pointer-events:
        none;
}


.hero::after {

    content:
        "";

    position:
        absolute;

    right:
        -180px;

    bottom:
        -220px;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0,180,255,.12),
            transparent 72%
        );

    pointer-events:
        none;
}


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

.hero-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1.25fr .85fr;

    align-items:
        center;

    gap:
        70px;
}


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

.eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        10px 22px;

    border-radius:
        50px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #4b7cff
        );

    font-size:
        .82rem;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

    box-shadow:
        0 10px 25px
        rgba(47,84,235,.22);
}


.eyebrow::before {

    content:
        "";

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:
        0 0 10px
        rgba(255,255,255,.8);
}


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

.hero h1 {

    margin:
        28px 0 24px;

    max-width:
        15ch;

    color:
        var(--contact-heading);

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

    font-weight:
        800;

    line-height:
        1.15;
}


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

.hero > .container > p,
.hero p {

    max-width:
        650px;

    color:
        var(--contact-text);

    font-size:
        1.08rem;

    line-height:
        2;
}


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

.hero-card {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}


/* =========================================================
   OFFICE DETAILS CARD
========================================================= */

.card {

    position:
        relative;

    width:
        100%;

    max-width:
        430px;

    padding:
        40px 36px;

    overflow:
        hidden;

    border-radius:
        28px;

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

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border:
        1px solid
        rgba(47,84,235,.10);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.08),

        0 8px 24px
        rgba(47,84,235,.08);

    animation:
        officeCardFloat 6s ease-in-out infinite;

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


/* =========================================================
   OFFICE CARD TOP GRADIENT
========================================================= */

.card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        5px;

    background:
        linear-gradient(
            90deg,
            #2f54eb,
            #00b4ff,
            #7b2cff
        );
}


/* =========================================================
   OFFICE CARD DECORATIVE GLOW
========================================================= */

.card::after {

    content:
        "";

    position:
        absolute;

    top:
        -80px;

    right:
        -80px;

    width:
        220px;

    height:
        220px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(47,84,235,.11),
            transparent 70%
        );

    transition:
        transform .45s ease;
}


/* =========================================================
   OFFICE CARD HOVER
========================================================= */

.card:hover {

    border-color:
        rgba(47,84,235,.20);

    box-shadow:
        0 35px 70px
        rgba(47,84,235,.18),

        0 18px 35px
        rgba(0,0,0,.08);
}


.card:hover::after {

    transform:
        scale(1.2);
}


/* =========================================================
   OFFICE CARD TITLE
========================================================= */

.card-title {

    position:
        relative;

    z-index:
        2;

    margin:
        0 0 28px;

    padding-left:
        72px;

    color:
        #173a75;

    font-size:
        1.6rem;

    font-weight:
        700;
}


.card-title::before {

    content:
        "📍";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #00b4ff
        );

    box-shadow:
        0 12px 28px
        rgba(47,84,235,.25);
}


/* =========================================================
   OFFICE CARD TEXT
========================================================= */

.card p {

    position:
        relative;

    z-index:
        2;

    margin:
        0 0 20px;

    color:
        var(--contact-text);

    font-size:
        1rem;

    line-height:
        2;
}


.card p:last-child {

    margin-bottom:
        0;
}


.card p strong {

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


/* =========================================================
   OFFICE CARD ANIMATION
========================================================= */

@keyframes officeCardFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-5px);
    }
}


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

.section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        55px 0;

    background:
        #ffffff;
}


.section:nth-of-type(even) {

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


.section::before {

    content:
        "";

    position:
        absolute;

    top:
        -180px;

    right:
        -180px;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(47,84,235,.06),
            transparent 72%
        );

    pointer-events:
        none;
}


.section::after {

    content:
        "";

    position:
        absolute;

    bottom:
        -220px;

    left:
        -220px;

    width:
        460px;

    height:
        460px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0,180,255,.06),
            transparent 72%
        );

    pointer-events:
        none;
}


.section .container {

    position:
        relative;

    z-index:
        2;
}


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

.section-heading {

    max-width:
        820px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


.section-heading h2 {

    position:
        relative;

    display:
        inline-block;

    margin:
        0;

    padding-bottom:
        18px;

    color:
        var(--contact-heading);

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

    font-weight:
        800;
}


.section-heading h2::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    width:
        90px;

    height:
        5px;

    transform:
        translateX(-50%);

    border-radius:
        50px;

    background:
        linear-gradient(
            90deg,
            #2f54eb,
            #00d4ff,
            #7b2cff
        );
}


.section-heading p {

    max-width:
        720px;

    margin:
        28px auto 0;

    color:
        var(--contact-text);

    font-size:
        1.08rem;

    line-height:
        2;
}


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

.contact-layout {

    display:
        grid;

    grid-template-columns:
        1.15fr .85fr;

    gap:
        40px;

    align-items:
        start;
}


/* =========================================================
   CONTACT CARD
   PREMIUM RUNNING BORDER
========================================================= */

.contact-card {

    position:
        relative;

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        40px;

    overflow:
        hidden;

    isolation:
        isolate;

    border-radius:
        25px;

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

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

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

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


/* =========================================================
   CONTACT CARD ANIMATED 2PX BORDER
========================================================= */

.contact-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    padding:
        2px;

    border-radius:
        25px;

    background:
        var(--contact-gradient);

    background-size:
        400% 400%;

    animation:
        contactRunningBorder 5s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:
        xor;

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    mask-composite:
        exclude;

    pointer-events:
        none;

    z-index:
        -1;
}


/* =========================================================
   CONTACT CARD GLOW
========================================================= */

.contact-card::after {

    content:
        "";

    position:
        absolute;

    inset:
        -4px;

    border-radius:
        29px;

    background:
        var(--contact-gradient);

    background-size:
        400% 400%;

    animation:
        contactRunningBorder 5s linear infinite;

    filter:
        blur(12px);

    opacity:
        .18;

    pointer-events:
        none;

    z-index:
        -2;
}


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

.contact-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 30px 65px
        rgba(47,84,235,.18),

        0 15px 35px
        rgba(0,0,0,.08);
}


/* =========================================================
   CONTACT CARD TITLE
========================================================= */

.contact-card h3 {

    position:
        relative;

    z-index:
        2;

    margin:
        0 0 15px;

    padding-left:
        62px;

    color:
        transparent;

    background:
        linear-gradient(
            90deg,
            #2f54eb,
            #00a8ff,
            #7b2cff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    font-size:
        1.8rem;

    font-weight:
        700;

    line-height:
        1.3;
}


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

.contact-card h3::before {

    content:
        "✉";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #00b4ff
        );

    color:
        #ffffff;

    font-size:
        1.15rem;

    box-shadow:
        0 10px 24px
        rgba(47,84,235,.25);
}


/* =========================================================
   CONTACT TITLE UNDERLINE
========================================================= */

.contact-card h3::after {

    content:
        "";

    display:
        block;

    width:
        55px;

    height:
        3px;

    margin-top:
        10px;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            #2f54eb,
            #00d4ff,
            #7b2cff
        );
}


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

.contact-card > p {

    position:
        relative;

    z-index:
        2;

    margin:
        0 0 22px;

    color:
        var(--contact-text);

    font-size:
        .98rem;

    line-height:
        1.75;
}


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

.contact-info-list {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    margin:
        0 0 25px;

    padding:
        16px;

    list-style:
        none;

    border:
        1px solid
        rgba(47,84,235,.10);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(47,84,235,.045),
            rgba(0,212,255,.035)
        );
}


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

.contact-info-list li {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        38px;

    padding:
        8px 12px 8px 48px;

    border-radius:
        12px;

    color:
        #4f6077;

    font-size:
        .91rem;

    line-height:
        1.5;

    transition:
        all .3s ease;
}


/* =========================================================
   INFORMATION ICON
========================================================= */

.contact-info-list li::before {

    position:
        absolute;

    left:
        10px;

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #00b4ff
        );

    font-size:
        .78rem;

    font-weight:
        700;

    box-shadow:
        0 5px 12px
        rgba(47,84,235,.18);
}


.contact-info-list li:nth-child(1)::before {

    content:
        "☎";
}


.contact-info-list li:nth-child(2)::before {

    content:
        "✉";
}


.contact-info-list li:nth-child(3)::before {

    content:
        "🌐";
}


/* =========================================================
   INFORMATION HOVER
========================================================= */

.contact-info-list li:hover {

    transform:
        translateX(6px);

    background:
        #eef5ff;

    box-shadow:
        0 8px 20px
        rgba(47,84,235,.10);
}


.contact-info-list strong {

    margin-right:
        5px;

    color:
        var(--contact-heading);

    font-weight:
        600;
}


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

.contact-card form {

    position:
        relative;

    z-index:
        2;

    margin-top:
        10px;
}


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

.contact-form-grid {

    display:
        grid;

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

    gap:
        20px;
}


/* =========================================================
   FIELD
========================================================= */

.field {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    animation:
        fieldFadeUp .7s ease both;
}


.field:nth-child(2) {

    animation-delay:
        .08s;
}


.field:nth-child(3) {

    animation-delay:
        .16s;
}


.field:nth-child(4) {

    animation-delay:
        .24s;
}


.field:nth-child(5) {

    animation-delay:
        .32s;
}


.field-full {

    grid-column:
        1 / -1;
}


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

.field label {

    color:
        #344054;

    font-size:
        .88rem;

    font-weight:
        700;

    letter-spacing:
        .3px;
}


/* =========================================================
   INPUTS + TEXTAREA
========================================================= */

.field input,
.field textarea {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        13px 16px;

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

    border-radius:
        12px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #24374d;

    font-family:
        inherit;

    font-size:
        .94rem;

    line-height:
        1.5;

    box-shadow:
        inset 0 2px 5px
        rgba(0,0,0,.025);

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


/* =========================================================
   TEXTAREA
========================================================= */

.field textarea {

    min-height:
        125px;

    resize:
        vertical;
}


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

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

    color:
        var(--contact-muted);

    transition:
        color .3s ease;
}


/* =========================================================
   INPUT HOVER
========================================================= */

.field input:hover,
.field textarea:hover {

    border-color:
        #9bb8ff;

    background:
        #fbfdff;
}


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

.field input:focus,
.field textarea:focus {

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

    background:
        #ffffff;

    transform:
        translateY(-1px);

    box-shadow:
        0 0 0 4px
        rgba(47,84,235,.10),

        0 10px 25px
        rgba(47,84,235,.08);
}


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

.field input:focus::placeholder,
.field textarea:focus::placeholder {

    color:
        #b7c0ce;
}


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

.field input:required:valid,
.field textarea:required:valid {

    border-color:
        #86d8a0;
}


.field input:required:invalid:not(:placeholder-shown),
.field textarea:required:invalid:not(:placeholder-shown) {

    border-color:
        #ef8d8d;
}


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

.contact-submit {

    display:
        flex;

    justify-content:
        flex-start;

    margin-top:
        24px;
}


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

.btn {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        50px;

    padding:
        13px 24px;

    overflow:
        hidden;

    border:
        none;

    border-radius:
        50px;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        .96rem;

    font-weight:
        700;

    text-decoration:
        none;

    cursor:
        pointer;

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


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

.btn-primary {

    background:
        linear-gradient(
            90deg,
            #2f54eb,
            #00a8ff,
            #7b2cff
        );

    background-size:
        200% 100%;

    box-shadow:
        0 10px 25px
        rgba(47,84,235,.28);
}


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

.btn-primary::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -120%;

    width:
        60%;

    height:
        100%;

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

    transform:
        skewX(-25deg);

    transition:
        left .7s ease;
}


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

.btn-primary::after {

    content:
        "➜";

    font-size:
        1rem;

    transition:
        transform .35s ease;
}


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

.btn-primary:hover {

    background-position:
        100% 0;

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 32px
        rgba(47,84,235,.36);
}


.btn-primary:hover::before {

    left:
        140%;
}


.btn-primary:hover::after {

    transform:
        translateX(5px);
}


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

.btn-primary:active {

    transform:
        translateY(-1px);
}


/* =========================================================
   GOOGLE MAP CARD
========================================================= */

.map-card {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        25px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(47,84,235,.10);

    box-shadow:
        0 20px 55px
        rgba(15,76,129,.12);

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

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


/* =========================================================
   MAP CARD TOP BORDER
========================================================= */

.map-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        5px;

    background:
        linear-gradient(
            90deg,
            #2f54eb,
            #00d4ff,
            #7b2cff
        );

    z-index:
        4;
}


/* =========================================================
   MAP CARD DECORATION
========================================================= */

.map-card::after {

    content:
        "";

    position:
        absolute;

    top:
        -90px;

    right:
        -90px;

    width:
        230px;

    height:
        230px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(47,84,235,.09),
            transparent 72%
        );

    transition:
        transform .45s ease;
}


.map-card:hover {

    border-color:
        rgba(47,84,235,.18);

    box-shadow:
        0 30px 65px
        rgba(47,84,235,.16),

        0 15px 35px
        rgba(0,0,0,.08);
}


.map-card:hover::after {

    transform:
        scale(1.15);
}


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

.map-card-header {

    position:
        relative;

    z-index:
        3;

    padding:
        32px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f6f9ff
        );

    border-bottom:
        1px solid
        rgba(47,84,235,.08);
}


.map-card-header h3 {

    position:
        relative;

    margin:
        0 0 12px;

    padding-left:
        62px;

    color:
        #173a75;

    font-size:
        1.6rem;

    font-weight:
        700;
}


.map-card-header h3::before {

    content:
        "📍";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #00b4ff
        );

    font-size:
        1.2rem;

    box-shadow:
        0 12px 28px
        rgba(47,84,235,.25);
}


.map-card-header p {

    margin:
        0;

    color:
        var(--contact-text);

    font-size:
        1rem;

    line-height:
        1.8;
}


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

.map-wrapper {

    position:
        relative;

    width:
        100%;

    height:
        620px;

    overflow:
        hidden;

    background:
        #eef5ff;
}


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

.map-wrapper iframe {

    width:
        100%;

    height:
        100%;

    border:
        none;

    transition:
        transform .6s ease;
}


.map-card:hover iframe {

    transform:
        scale(1.02);
}


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

.map-wrapper::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            transparent
        );
}


/* =========================================================
   MAP LOCATION BADGE
========================================================= */

.map-wrapper::after {

    content:
        "VBlink HR Consultants";

    position:
        absolute;

    left:
        25px;

    bottom:
        25px;

    z-index:
        5;

    padding:
        12px 22px;

    border-radius:
        50px;

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

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    color:
        #173a75;

    font-size:
        .9rem;

    font-weight:
        700;

    letter-spacing:
        .4px;

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


/* =========================================================
   MAP FLOAT ANIMATION
========================================================= */

@keyframes mapCardFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-4px);
    }
}


/* =========================================================
   CONTACT CARD RUNNING BORDER
========================================================= */

@keyframes contactRunningBorder {

    0% {

        background-position:
            0% 50%;
    }

    50% {

        background-position:
            100% 50%;
    }

    100% {

        background-position:
            0% 50%;
    }
}


/* =========================================================
   FIELD ENTRY ANIMATION
========================================================= */

@keyframes fieldFadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(18px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   GLOBAL IMAGE RESPONSIVE
========================================================= */

img {

    max-width:
        100%;

    height:
        auto;

    display:
        block;
}


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

a {

    text-decoration:
        none;

    transition:
        color .3s ease;
}


a:hover {

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


/* =========================================================
   AUTOFILL
========================================================= */

input:-webkit-autofill,
textarea:-webkit-autofill {

    -webkit-box-shadow:
        0 0 0 1000px #ffffff inset;

    -webkit-text-fill-color:
        #24374d;
}


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

button:focus,
.btn:focus,
input:focus,
textarea:focus {

    outline:
        none;
}


a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible {

    outline:
        3px solid
        rgba(47,84,235,.35);

    outline-offset:
        4px;
}


/* =========================================================
   CUSTOM SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width:
        10px;
}


::-webkit-scrollbar-track {

    background:
        #edf4ff;
}


::-webkit-scrollbar-thumb {

    border-radius:
        20px;

    background:
        linear-gradient(
            180deg,
            #2f54eb,
            #00b4ff
        );
}


::-webkit-scrollbar-thumb:hover {

    background:
        linear-gradient(
            180deg,
            #1d4ed8,
            #0095e8
        );
}


/* =========================================================
   TEXT SELECTION
========================================================= */

::selection {

    background:
        #2f54eb;

    color:
        #ffffff;
}


/* =========================================================
   POPUP OVERLAY
========================================================= */

.popup-overlay {

    position:
        fixed;

    inset:
        0;

    background:
        rgba(16,32,51,.68);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

    z-index:
        99999;
}


/* =========================================================
   POPUP MODAL
========================================================= */

.popup-modal {

    position:
        fixed;

    top:
        50%;

    left:
        50%;

    width:
        min(92%,640px);

    max-height:
        90vh;

    overflow:
        auto;

    padding:
        32px;

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

    border-radius:
        25px;

    background:
        #ffffff;

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

    z-index:
        100000;

    isolation:
        isolate;
}


/* =========================================================
   POPUP RUNNING BORDER
========================================================= */

.popup-modal::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    padding:
        2px;

    border-radius:
        25px;

    background:
        var(--contact-gradient);

    background-size:
        400% 400%;

    animation:
        contactRunningBorder 5s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:
        xor;

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    mask-composite:
        exclude;

    pointer-events:
        none;

    z-index:
        -1;
}


/* =========================================================
   POPUP HEADER
========================================================= */

.popup-header {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-bottom:
        1rem;
}


.popup-badge {

    display:
        inline-block;

    margin-bottom:
        .7rem;

    padding:
        .4rem .8rem;

    border-radius:
        999px;

    color:
        #1746a2;

    background:
        #edf4ff;

    font-size:
        .8rem;

    font-weight:
        700;
}


.popup-header h2 {

    margin:
        0 0 .5rem;

    color:
        transparent;

    background:
        linear-gradient(
            90deg,
            #2f54eb,
            #00a8ff,
            #7b2cff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    font-size:
        1.8rem;
}


.popup-header p {

    margin:
        0;

    color:
        #60738d;

    line-height:
        1.6;
}


/* =========================================================
   POPUP CLOSE BUTTON
========================================================= */

.popup-close {

    flex-shrink:
        0;

    width:
        42px;

    height:
        42px;

    border:
        none;

    border-radius:
        50%;

    background:
        #f1f5fb;

    color:
        #102033;

    font-size:
        1.7rem;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        all .3s ease;
}


.popup-close:hover {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #7b2cff
        );

    transform:
        rotate(90deg);
}


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

.popup-form {

    margin-top:
        1rem;
}


.form-grid {

    display:
        grid;

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

    gap:
        1rem;
}


.form-grid .field-full {

    grid-column:
        1 / -1;
}


.popup-submit {

    width:
        100%;

    margin-top:
        1.2rem;
}


/* =========================================================
   MODAL BODY LOCK
========================================================= */

body.modal-open {

    overflow:
        hidden;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1400px) {

    .container {

        max-width:
            1320px;
    }

    .hero-grid {

        gap:
            90px;
    }

    .contact-layout {

        gap:
            50px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1200px) {

    .hero {

        padding:
            25px 0 30px;
    }

    .hero-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

        text-align:
            center;
    }

    .hero h1 {

        max-width:
            100%;
    }

    .hero p {

        margin-left:
            auto;

        margin-right:
            auto;
    }

    .hero-card {

        justify-content:
            center;
    }

    .card {

        max-width:
            520px;
    }
}


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

@media (max-width:992px) {

    main {

        margin-top:
            25px;
    }

    .contact-layout {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }

    .contact-card,
    .map-card {

        width:
            100%;
    }

    .section {

        padding:
            60px 0;
    }

    .map-wrapper {

        height:
            500px;
    }
}


/* =========================================================
   768PX
========================================================= */

@media (max-width:768px) {

    main {

        margin-top:
            20px;
    }

    .hero {

        padding:
            25px 0 45px;
    }

    .hero h1 {

        font-size:
            2.2rem;

        line-height:
            1.25;
    }

    .hero p {

        font-size:
            1rem;

        line-height:
            1.8;
    }

    .card {

        padding:
            30px;

        border-radius:
            24px;
    }

    .card-title {

        font-size:
            1.4rem;

        padding-left:
            64px;
    }

    .card-title::before {

        width:
            48px;

        height:
            48px;
    }

    .section {

        padding:
            50px 0;
    }

    .section-heading {

        margin-bottom:
            35px;
    }

    .section-heading h2 {

        font-size:
            2rem;
    }

    .section-heading p {

        font-size:
            1rem;
    }

    .contact-card {

        padding:
            32px 25px;

        border-radius:
            23px;
    }

    .contact-card::before {

        border-radius:
            23px;
    }

    .contact-card::after {

        border-radius:
            27px;
    }

    .contact-card h3 {

        font-size:
            1.55rem;
    }

    .contact-form-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;
    }

    .field-full {

        grid-column:
            auto;
    }

    .contact-submit {

        justify-content:
            stretch;
    }

    .contact-submit .btn {

        width:
            100%;
    }

    .map-card {

        border-radius:
            23px;
    }

    .map-card-header {

        padding:
            25px;
    }

    .map-card-header h3 {

        font-size:
            1.4rem;
    }

    .map-wrapper {

        height:
            420px;
    }

    .header-contact {

        display:
            none;
    }
}


/* =========================================================
   MOBILE 640PX
========================================================= */

@media (max-width:640px) {

    .brand-tagline {

        display:
            none;
    }

    .phone-link {

        font-size:
            .95rem;
    }

    .apply-btn {

        padding:
            .75rem 1rem;
    }

    .header-contact {

        gap:
            .75rem;
    }

    .form-grid {

        grid-template-columns:
            1fr;
    }

    .form-grid .field-full {

        grid-column:
            auto;
    }
}


/* =========================================================
   MOBILE 480PX
========================================================= */

@media (max-width:480px) {

    main {

        margin-top:
            20px;
    }

    .hero {

        padding:
            20px 0 40px;
    }

    .eyebrow {

        padding:
            8px 18px;

        font-size:
            .72rem;
    }

    .hero h1 {

        font-size:
            1.85rem;
    }

    .hero p {

        font-size:
            .95rem;
    }

    .card {

        padding:
            25px 20px;
    }

    .card-title {

        font-size:
            1.25rem;
    }

    .section {

        padding:
            45px 0;
    }

    .section-heading h2 {

        font-size:
            1.75rem;
    }

    .contact-card {

        padding:
            30px 20px;

        border-radius:
            20px;
    }

    .contact-card::before {

        border-radius:
            20px;
    }

    .contact-card::after {

        border-radius:
            24px;
    }

    .contact-card h3 {

        padding-left:
            56px;

        font-size:
            1.3rem;
    }

    .contact-card h3::before {

        width:
            42px;

        height:
            42px;
    }

    .contact-card > p {

        font-size:
            .9rem;

        line-height:
            1.65;
    }

    .contact-info-list {

        padding:
            12px;
    }

    .contact-info-list li {

        padding:
            9px 8px 9px 44px;

        font-size:
            .82rem;
    }

    .contact-info-list li::before {

        left:
            7px;

        width:
            28px;

        height:
            28px;
    }

    .field input,
    .field textarea {

        padding:
            12px 14px;

        font-size:
            .9rem;
    }

    .field textarea {

        min-height:
            120px;
    }

    .contact-submit .btn {

        min-height:
            50px;

        padding:
            14px;

        font-size:
            .9rem;
    }

    .map-wrapper {

        height:
            350px;
    }

    .map-card-header {

        padding:
            22px 20px;
    }

    .map-card-header h3 {

        font-size:
            1.25rem;

        padding-left:
            56px;
    }

    .map-card-header h3::before {

        width:
            42px;

        height:
            42px;
    }

    .map-wrapper::after {

        left:
            15px;

        bottom:
            15px;

        padding:
            9px 15px;

        font-size:
            .75rem;
    }

    .popup-modal {

        width:
            calc(100% - 24px);

        max-height:
            92vh;

        padding:
            25px 20px;

        border-radius:
            20px;
    }

    .popup-modal::before {

        border-radius:
            20px;
    }

    .popup-header h2 {

        font-size:
            1.45rem;
    }

    .popup-close {

        width:
            38px;

        height:
            38px;

        font-size:
            1.5rem;
    }

    .header-contact {

        display:
            none;
    }
}


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

@media (max-width:360px) {

    .contact-card {

        padding:
            27px 16px;
    }

    .contact-card h3 {

        font-size:
            1.2rem;
    }

    .contact-info-list li {

        font-size:
            .78rem;
    }

    .popup-modal {

        padding:
            22px 16px;
    }
}


/* =========================================================
   GO TO TOP BUTTON
========================================================= */

.go-top-btn {

    position:
        fixed;

    right:
        1.4rem;

    bottom:
        1.4rem;

    width:
        36px;

    height:
        36px;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    font-size:
        1.15rem;

    font-weight:
        700;

    box-shadow:
        0 12px 30px
        rgba(37,99,235,.35);

    cursor:
        pointer;

    z-index:
        800;

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


.go-top-btn.show {

    display:
        flex;

    opacity:
        1;
}


.go-top-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 40px
        rgba(37,99,235,.45);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .contact-card::before,
    .contact-card::after,
    .popup-modal::before {

        animation:
            none;
    }

    .card,
    .map-card {

        animation:
            none;
    }

    .field {

        animation:
            none;
    }

    .contact-card,
    .card,
    .map-card,
    .btn,
    .field input,
    .field textarea,
    .popup-close {

        transition:
            none;
    }
}


/* =========================================================
   PRINT
========================================================= */

@media print {

    .hero {

        background:
            #ffffff !important;
    }

    .card,
    .contact-card,
    .map-card {

        box-shadow:
            none;

        border:
            1px solid #cccccc;
    }

    .btn,
    .go-top-btn {

        display:
            none;
    }

    .contact-card::before,
    .contact-card::after,
    .popup-modal::before {

        display:
            none;
    }
}


/* =========================================================
   END OF CONTACT PAGE CSS
========================================================= */