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

.contact-form-section{

    padding:50px 0;

    background:
    linear-gradient(
    135deg,
    #020b22 0%,
    #03163f 45%,
    #020b22 100%);
}

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

.contact-form-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    align-items:stretch;

    max-width:1350px;

    margin:auto;
}

/* =========================================
COMMON CARD
========================================= */

.contact-card{

    position:relative;

    overflow:hidden;

    border-radius:40px;

    padding:22px;

    background:
    linear-gradient(
    135deg,
    #7c3aed 0%,
    #a855f7 45%,
    #6d28d9 100%);

    box-shadow:
    0 25px 80px rgba(124,58,237,0.28);

    transition:0.45s ease;
}

/* GLASS EFFECT */

.contact-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.02));

    opacity:0;

    transition:0.45s ease;
}

.contact-card:hover::before{

    opacity:1;
}

/* HOVER */

.contact-card:hover{

    transform:
    translateY(-10px)
    scale(1.01);

    box-shadow:
    0 35px 90px rgba(124,58,237,0.35);
}

/* =========================================
LEFT IMAGE
========================================= */

.contact-image-card{

    min-height:600px;

    padding:22px;
    
    display:flex;

    align-items:center;

    justify-content:center;
}

.contact-image-card img{

    width:105%;

    max-width:none;

    height:auto;

    object-fit:contain;

    border-radius:32px;

    display:block;

    margin:auto;
}

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

.contact-form-card{

    min-height:600px;

    display:flex;

    align-items:center;
}

/* =========================================
TAG
========================================= */

.contact-tag{

    display:flex;

    width:max-content;

    margin:0 auto 30px;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    border-radius:100px;

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

    color:#ffffff;

    font-size:16px;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

    position:relative;

    z-index:2;
}

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

.contact-form-card h2{

    color:#ffffff;

    font-size:58px;

    line-height:1.1;

    margin-bottom:35px;

    font-weight:800;

    position:relative;

    z-index:2;
}

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

.form-grid{

    display:grid;

    grid-template-columns:1.15fr 1fr;

    gap:18px;
}

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

.contact-form{

    width:100%;

    position:relative;

    z-index:2;
}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:20px 22px;

    border-radius:16px;

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

    background:
    rgba(7,22,51,0.30);

    backdrop-filter:blur(12px);

    color:#ffffff;

    font-size:16px;

    outline:none;

    margin-bottom:20px;

    transition:0.35s ease;
}

/* PLACEHOLDER */

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

    color:
    rgba(255,255,255,0.78);
}

/* FOCUS */

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

    border-color:#ffffff;

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

    box-shadow:
    0 0 0 4px rgba(255,255,255,0.10);
}

/* TEXTAREA */

.contact-form textarea{

    height:190px;

    resize:none;
}

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

.contact-form button{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:20px auto 0;

    width:260px;

    height:64px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #1a0033,
    #3b0066);

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:0.4s ease;
}


.contact-form button:hover{

    transform:
    translateY(-5px)
    scale(1.03);

    box-shadow:
    0 20px 40px rgba(76,29,149,0.45);
}

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

@media(max-width:991px){

    .contact-form-wrapper{

        grid-template-columns:1fr;
    }

    .contact-image-card,
    .contact-form-card{

        min-height:auto;
    }

    .contact-form-card h2{

        font-size:42px;
    }

    .form-grid{

        grid-template-columns:1fr;
    }
}