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

.contact{

    position:relative;

    padding:120px 0;

    background:#050816;

    overflow:hidden;

}

.contact::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-250px;

    bottom:-250px;

    background:rgba(0,120,212,.08);

    filter:blur(140px);

}

.contact-wrapper{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:50px;

    align-items:start;

    position:relative;

    z-index:2;

}

/*==================================================
            CONTACT INFO
==================================================*/

.contact-info{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-card{

    display:flex;

    align-items:center;

    gap:20px;

    padding:24px;

    border-radius:22px;

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

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    transition:.35s ease;

}

.contact-card:hover{

    transform:translateX(8px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(0,120,212,.18);

}

.contact-card i{

    width:65px;

    height:65px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:rgba(0,120,212,.15);

    color:var(--primary);

    font-size:1.5rem;

    flex-shrink:0;

}

.contact-card h3{

    margin-bottom:6px;

    font-size:1.1rem;

}

.contact-card p{

    color:var(--text);

    font-size:.95rem;

    line-height:1.6;

}

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

.contact-form{

    display:flex;

    flex-direction:column;

    gap:22px;

    padding:40px;

    border-radius:28px;

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

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:18px 20px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    background:#0F172A;

    color:#fff;

    font-size:1rem;

    transition:.3s;

}

.contact-form textarea{

    resize:vertical;

    min-height:180px;

}

.contact-form input::placeholder,

.contact-form textarea::placeholder{

    color:#94A3B8;

}

.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(0,120,212,.15);

}

.contact-form button{

    width:max-content;

    padding:16px 34px;

}

/*==================================================
            SOCIAL CONTACT
==================================================*/

.contact-social{

    display:flex;

    gap:18px;

    margin-top:30px;

}

.contact-social a{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#111827;

    color:#fff;

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.contact-social a:hover{

    background:var(--primary);

    transform:translateY(-6px);

}

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

.contact-info{

    animation:fadeUp .8s ease both;

}

.contact-form{

    animation:fadeUp .9s ease both;

    animation-delay:.2s;

}