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

.contact{

    padding:120px 8%;

    background:
    linear-gradient(
    135deg,
    #07123b,
    #132a8f
    );

    color:#fff;
}

/* ===================================
   CONTAINER
=================================== */

.contact-container{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:50px;

    align-items:center;
}

/* ===================================
   LEFT SIDE
=================================== */

.contact-left h2{

    font-size:48px;

    margin-bottom:20px;
}

.contact-left p{

    color:#d5d9ff;

    font-size:18px;

    line-height:1.8;

    margin-bottom:40px;
}

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

.contact-info{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.info-card{

    display:flex;

    align-items:center;

    gap:20px;

    padding:0px;

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

    backdrop-filter:blur(12px);

    border-radius:18px;

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

    transition:.3s;
}

.info-card:hover{

    transform:translateX(10px);
}

.info-card i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#4f46e5;

    border-radius:50%;

    font-size:22px;
}

.info-card h4{

    margin-bottom:5px;

    font-size:18px;
}

.info-card p{

    color:#d5d9ff;

    margin:0;
}

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

.contact-right{

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

    backdrop-filter:blur(15px);

    padding:40px;

    border-radius:25px;

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

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

#contactForm{

    display:flex;

    flex-direction:column;

    gap:20px;
}

#contactForm input,
#contactForm textarea{

    width:100%;

    padding:16px 20px;

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

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

    color:#fff;

    border-radius:12px;

    font-size:15px;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder{

    color:#d5d9ff;
}

#contactForm input:focus,
#contactForm textarea:focus{

    border-color:#6c63ff;

    box-shadow:
    0 0 10px rgba(108,99,255,.3);
}

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

.contact-btn{

    background:#4f46e5;

    color:white;

    padding:16px;

    border:none;

    border-radius:12px;

    font-size:16px;

    font-weight:600;

    transition:.3s;
}

.contact-btn:hover{

    background:#6c63ff;

    transform:translateY(-3px);
}

/* ===================================
   SUCCESS MESSAGE
=================================== */

.success-message{

    display:none;

    padding:15px;

    background:#10b981;

    border-radius:10px;

    color:white;

    margin-top:15px;
}

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

@media(max-width:991px){

.contact-container{

    grid-template-columns:1fr;
}

.contact-left{

    text-align:center;
}

}

@media(max-width:768px){

.contact{

    padding:80px 5%;
}

.contact-left h2{

    font-size:34px;
}

.contact-right{

    padding:25px;
}

}