/* ==========================
   CTA + NEWSLETTER SECTION
========================== */


.cta-newsletter{

    padding:120px 20px;

    background:#19272B;

    position:relative;

    overflow:hidden;

}



/* Background Glow */


.cta-newsletter::before{


    content:"";


    position:absolute;


    width:500px;


    height:500px;


    left:-250px;


    top:20%;


    background:


    radial-gradient(

        circle,

        rgba(0,229,255,.18),

        transparent 70%

    );


}



.cta-newsletter::after{


    content:"";


    position:absolute;


    width:500px;


    height:500px;


    right:-250px;


    bottom:10%;


    background:


    radial-gradient(

        circle,

        rgba(79,140,255,.18),

        transparent 70%

    );


}





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


.cta-newsletter-box{


    max-width:950px;


    margin:auto;


    padding:75px 60px;


    text-align:center;


    background:#243135;


    border-radius:35px;


    position:relative;


    overflow:hidden;


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


}





/* Animated Gradient Border */


.cta-newsletter-box::before{


    content:"";


    position:absolute;


    inset:-2px;


    border-radius:37px;


    background:


    linear-gradient(

        120deg,

        #00E5FF,

        #4F8CFF,

        #8B5CFF,

        #00E5FF

    );


    background-size:300% 300%;


    animation:


    ctaGradient 6s linear infinite;


    z-index:0;


}



.cta-newsletter-box::after{


    content:"";


    position:absolute;


    inset:2px;


    background:#243135;


    border-radius:33px;


    z-index:1;


}




.cta-newsletter-box > *{


    position:relative;


    z-index:2;


}




@keyframes ctaGradient{


0%{

background-position:0% 50%;

}


50%{

background-position:100% 50%;

}


100%{

background-position:0% 50%;

}


}







/* ==========================
   CONTENT
========================== */


.cta-newsletter-subtitle{


    color:#00E5FF;


    font-size:14px;


    font-weight:600;


    letter-spacing:2px;


}



.cta-newsletter-box h2{


    color:#fff;


    font-size:48px;


    line-height:1.25;


    margin:20px 0;


}



.cta-newsletter-box p{


    color:#B8C7CC;


    font-size:18px;


    line-height:1.8;


    max-width:720px;


    margin:0 auto 40px;


}






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


.newsletter-form-wrapper form{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:15px;


}




.newsletter-form-wrapper .ff-el-group{


    margin-bottom:0 !important;


    flex:1;


}



.newsletter-form-wrapper input{


    width:100%;


    height:60px;


    border-radius:50px !important;


    background:#19272B !important;


    border:

    1px solid rgba(255,255,255,.15) !important;


    color:#fff !important;


    padding:0 25px !important;


    font-size:16px;


}




.newsletter-form-wrapper input::placeholder{


    color:#9EB1B8;


}





.newsletter-form-wrapper button{


    height:60px !important;


    padding:0 35px !important;


    border-radius:50px !important;


    background:linear-gradient(90deg, #4F8CFF, #00E5FF) !important;


    color:#fff !important;
    

    border:none !important;


    font-weight:700;


    transition:.35s;


}



.newsletter-form-wrapper button:hover{


    transform:translateY(-5px);
    
    background:linear-gradient(90deg, #4F8CFF, #00E5FF);

    box-shadow:


    0 0 35px rgba(0,229,255,.5);


}







/* ==========================
   FEATURES
========================== */


.newsletter-features{


    display:flex;


    justify-content:center;


    gap:35px;


    margin-top:40px;


    flex-wrap:wrap;


}




.newsletter-feature{


    display:flex;


    align-items:center;


    gap:10px;


    color:#B8C7CC;


    font-size:15px;


}



.newsletter-feature i{


    color:#00E5FF;


}







/* ==========================
   MOBILE
========================== */


@media(max-width:768px){



.cta-newsletter{


    padding:80px 20px;


}



.cta-newsletter-box{


    padding:45px 25px;


}



.cta-newsletter-box h2{


    font-size:34px;


}



.cta-newsletter-box p{


    font-size:15px;


}




.newsletter-form-wrapper form{


    flex-direction:column;


}



.newsletter-form-wrapper .ff-el-group,


.newsletter-form-wrapper button{


    width:100%;


}




.newsletter-features{


    flex-direction:column;


    align-items:center;


    gap:18px;


}



}