/*==================================================
NEWSLETTER SECTION
==================================================*/

.newsletter{

    /* padding:100px 0;  */



    position:relative;

    overflow:hidden;
    background:linear-gradient(
        135deg,
        #2563eb 0%,
        #4f46e5 50%,
        #7c3aed 100%
    );


}

.newsletter-container{

    width:min(92%,1320px);

    margin:auto;

}

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

.newsletter-content{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

    padding:45px 55px;

    border-radius:28px;

    overflow:hidden;

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

}

/*==================================================
BACKGROUND EFFECT
==================================================*/

.newsletter-content::before{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    right:-140px;

    top:-120px;

    border-radius:50%;

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

}

.newsletter-content::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    left:-90px;

    bottom:-100px;

    border-radius:50%;

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

}

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

.newsletter-left{

    flex:1;

    position:relative;

    z-index:2;

}

.newsletter-left h2{

    color:#fff;

    font-size:34px;

    font-weight:800;

    margin-bottom:14px;

    line-height:1.2;

}

.newsletter-left p{

    color:rgba(255,255,255,.88);

    font-size:16px;

    line-height:1.8;

    max-width:520px;

}

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

.newsletter-right{

    flex:0 0 500px;

    position:relative;

    z-index:2;

}

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

.newsletter-form{

    display:flex;

    align-items:center;

    gap:14px;

}

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

.newsletter-form input{

    flex:1;

    height:60px;

    border:none;

    outline:none;

    border-radius:14px;

    padding:0 22px;

    font-size:15px;

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

    color:#0f172a;

    transition:.35s;

}

.newsletter-form input::placeholder{

    color:#94a3b8;

}

.newsletter-form input:focus{

    background:#fff;

    box-shadow:
        0 0 0 4px rgba(255,255,255,.18);

}

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

.newsletter-form button{

    height:60px;

    border:none;

    cursor:pointer;

    padding:0 28px;

    border-radius:14px;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    font-weight:700;

    color:#fff;

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

    backdrop-filter:blur(10px);

    transition:.35s;

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

}

.newsletter-form button i{

    transition:.35s;

}

.newsletter-form button:hover{

    transform:translateY(-3px);

    background:#fff;

    color:#2563eb;

}

.newsletter-form button:hover i{

    transform:translateX(4px) rotate(-15deg);

}
/*==================================================
SUCCESS BUTTON
==================================================*/

.newsletter-form button.success{

background:#16a34a !important;

color:#fff;

border-color:#16a34a;

}

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

.newsletter-message{

margin-top:16px;

font-size:14px;

font-weight:600;

animation:fadeMessage .35s ease;

}

.newsletter-message.success{

color:#dcfce7;

}

.newsletter-message.error{

color:#fecaca;

}

/*==================================================
SPINNER
==================================================*/

.spinner{

width:16px;

height:16px;

border:2px solid rgba(255,255,255,.4);

border-top:2px solid #fff;

border-radius:50%;

animation:spin .8s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

@keyframes fadeMessage{

from{

opacity:0;

transform:translateY(8px);

}

to{

opacity:1;

transform:translateY(0);

}

}