/*==================================================
                UZAYO NEWSLETTER.CSS
                PART 1
==================================================*/


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

.newsletter{

    padding:140px 0;

    background:linear-gradient(
        180deg,
        #faf9f7 0%,
        #f5f3ef 100%
    );

}



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

.newsletter-wrapper{

    max-width:900px;

    margin:auto;

    background:white;

    border-radius:36px;

    padding:80px;

    text-align:center;

    box-shadow:0 35px 90px rgba(0,0,0,.08);

    border:1px solid rgba(0,0,0,.05);

    position:relative;

    overflow:hidden;

}



/*======================================
        GOLD GLOW
======================================*/

.newsletter-wrapper::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-200px;

    right:-180px;

    border-radius:50%;

    background:rgba(184,155,94,.08);

    filter:blur(45px);

}



/*======================================
            TAG
======================================*/

.newsletter-tag{

    display:inline-block;

    color:var(--color-gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.85rem;

    font-weight:600;

    margin-bottom:20px;

}



/*======================================
            TITLE
======================================*/

.newsletter h2{

    font-family:var(--font-heading);

    font-size:clamp(3rem,5vw,4.8rem);

    line-height:1;

    margin-bottom:25px;

}



/*======================================
        DESCRIPTION
======================================*/

.newsletter p{

    max-width:600px;

    margin:0 auto 45px;

    line-height:1.9;

    color:var(--color-grey-600);

}



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

.newsletter-form{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:50px;

}



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

.newsletter-form input{

    flex:1;

    max-width:480px;

    height:65px;

    padding:0 28px;

    border-radius:50px;

    border:1px solid rgba(0,0,0,.12);

    background:#fafafa;

    font-size:1rem;

    transition:.35s ease;

}

.newsletter-form input:focus{

    outline:none;

    border-color:var(--color-gold);

    background:white;

    box-shadow:0 0 0 4px rgba(184,155,94,.15);

}



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

.newsletter-form .btn{

    min-width:190px;

    justify-content:center;

}
/*==================================================
                UZAYO NEWSLETTER.CSS
                PART 2
==================================================*/


/*======================================
        BENEFITS
======================================*/

.newsletter-benefits{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    flex-wrap:wrap;

}

.benefit{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:.95rem;

    font-weight:600;

    color:var(--color-grey-700);

}



/*======================================
        HOVER EFFECTS
======================================*/

.newsletter-wrapper{

    transition:.45s ease;

}

.newsletter-wrapper:hover{

    transform:translateY(-6px);

    box-shadow:0 45px 110px rgba(0,0,0,.10);

}

.newsletter-form input{

    transition:.35s ease;

}

.newsletter-form .btn{

    transition:.35s ease;

}

.newsletter-form .btn:hover{

    transform:translateY(-3px);

}



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

@media(max-width:992px){

.newsletter-wrapper{

padding:60px;

}

.newsletter-form{

flex-direction:column;

align-items:center;

}

.newsletter-form input{

max-width:100%;

width:100%;

}

.newsletter-form .btn{

width:100%;

max-width:320px;

}

}



@media(max-width:768px){

.newsletter{

padding:90px 0;

}

.newsletter-wrapper{

padding:45px 30px;

border-radius:28px;

}

.newsletter h2{

font-size:2.6rem;

}

.newsletter p{

font-size:1rem;

margin-bottom:35px;

}

.newsletter-benefits{

gap:20px;

flex-direction:column;

}

}



@media(max-width:480px){

.newsletter-wrapper{

padding:35px 24px;

border-radius:22px;

}

.newsletter h2{

font-size:2rem;

}

.newsletter-tag{

font-size:.75rem;

letter-spacing:3px;

}

.newsletter-form input{

height:58px;

padding:0 22px;

font-size:.95rem;

}

}



/*======================================
        ACCESSIBILITY
======================================*/

.newsletter-form input:focus-visible,

.newsletter-form .btn:focus-visible{

outline:3px solid var(--color-gold);

outline-offset:4px;

}



/*======================================
        REDUCED MOTION
======================================*/

@media(prefers-reduced-motion:reduce){

.newsletter-wrapper,

.newsletter-form input,

.newsletter-form .btn{

transition:none;

animation:none;

}

}



/*======================================
        PERFORMANCE
======================================*/

.newsletter-wrapper{

will-change:transform;

}

.newsletter-form input{

font-family:inherit;

}



/*======================================
        FINAL POLISH
======================================*/

.newsletter{

position:relative;

overflow:hidden;

isolation:isolate;

}

.newsletter .container{

position:relative;

z-index:2;

}

.newsletter-wrapper>*{

position:relative;

z-index:3;

}