/*=========================================
        DARA AFFILIATION
        CONTACT PREMIUM
        BLUE WHITE BLACK
=========================================*/


.contact{

    padding:120px 8%;

    background:#050914;

    position:relative;

    overflow:hidden;

    color:white;

}



/* Lumière futuriste */

.contact::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:#0066ff;

    filter:blur(180px);

    opacity:.18;

    right:-200px;

    top:20%;

}



.contact::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    background:#00c6ff;

    filter:blur(180px);

    opacity:.12;

    left:-150px;

    bottom:0;

}



/*==============================
        TITRE
==============================*/


.contact .section-title{

    text-align:center;

    margin-bottom:70px;

    position:relative;

    z-index:2;

}



.contact-subtitle{

    color:#00c6ff;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

}



.contact .section-title h2{

    color:white;

    font-size:45px;

    margin:15px 0;

}



.contact .section-title h2 span{

    color:#00c6ff;

}



.contact .section-title p{

    color:#b8c5d8;

    font-size:18px;

}



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


.contact-wrapper{

    max-width:1100px;

    margin:auto;

    display:flex;

    gap:35px;

    align-items:stretch;

    position:relative;

    z-index:2;

}



/*==============================
        EMAIL CARD
==============================*/


.contact-email{


    width:35%;


    padding:40px 30px;


    text-align:center;


    border-radius:30px;


    background:

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


    border:

    1px solid rgba(0,198,255,.25);


    backdrop-filter:blur(20px);


    box-shadow:

    0 20px 60px rgba(0,0,0,.4);


    transition:.5s;


    position:relative;

    overflow:hidden;


}



.contact-email::before{


    content:"";


    position:absolute;


    width:250px;


    height:250px;


    background:#0066ff;


    filter:blur(120px);


    opacity:.25;


    top:-100px;


    right:-100px;


}





.contact-email:hover{


    transform:translateY(-12px);


    box-shadow:

    0 30px 70px rgba(0,198,255,.25);


}




.contact-icon{


    width:80px;


    height:80px;


    margin:auto;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

    linear-gradient(

    135deg,

    #0066ff,

    #00c6ff

    );


    color:white;


    font-size:32px;


    box-shadow:

    0 0 40px rgba(0,198,255,.6);


}




.contact-email h3{


    color:white;


    font-size:28px;


    margin:25px 0 15px;


}



.contact-email p{


    color:#b8c5d8;


    line-height:1.7;


}




.email-link{


    display:block;


    width:100%;


    margin-top:20px;


    color:#00c6ff;


    font-size:17px;


    font-weight:700;


    text-decoration:none;


    text-align:center;


    word-break:break-word;


    overflow-wrap:anywhere;


    line-height:1.6;


}




.email-link:hover{

    color:white;

}





/* STATUS */


.contact-status{


    margin-top:25px;


    display:flex;


    justify-content:center;


    align-items:center;


    gap:10px;


    color:#b8c5d8;


    font-size:14px;


}



.contact-status span{


    width:10px;


    height:10px;


    background:#00ff88;


    border-radius:50%;


    box-shadow:

    0 0 20px #00ff88;


    animation:pulseStatus 2s infinite;


}



@keyframes pulseStatus{


    50%{

        transform:scale(1.5);

        opacity:.5;

    }


}




/*==============================
        FORMULAIRE
==============================*/


.contact-form{


    width:65%;


    padding:45px;


    border-radius:30px;


    background:

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


    border:

    1px solid rgba(0,198,255,.25);


    backdrop-filter:blur(20px);


    box-shadow:

    0 20px 60px rgba(0,0,0,.4);


}




.input-group{


    margin-bottom:20px;


}





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


    width:100%;


    padding:18px 20px;


    background:

    rgba(255,255,255,.05);


    color:white;


    border:

    1px solid rgba(255,255,255,.2);


    border-radius:15px;


    outline:none;


    font-size:16px;


    transition:.3s;


    font-family:inherit;


}





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


    color:#b8c5d8;


}





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


    border-color:#00c6ff;


    box-shadow:

    0 0 20px rgba(0,198,255,.25);


}





textarea{

    resize:none;

}





/*==============================
        BOUTON
==============================*/


.btn-contact{


    width:100%;


    padding:18px;


    border:none;


    border-radius:50px;


    background:

    linear-gradient(

    135deg,

    #0066ff,

    #00c6ff

    );


    color:white;


    font-size:17px;


    font-weight:700;


    cursor:pointer;


    transition:.4s;


    box-shadow:

    0 15px 40px rgba(0,102,255,.45);


}





.btn-contact:hover{


    transform:translateY(-7px);


    box-shadow:

    0 25px 60px rgba(0,198,255,.6);


}




.btn-contact i{

    margin-right:10px;

}





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


@media(max-width:900px){


.contact-wrapper{

    flex-direction:column;

}



.contact-email,
.contact-form{

    width:100%;

}



.contact-form{

    padding:30px 20px;

}



.contact .section-title h2{

    font-size:35px;

}


}