/*==================================================
  Newsletter Component
  SVFutureTechAI Theme
===================================================*/

/*---------------------------------
  Wrapper
----------------------------------*/

.sv-newsletter{

    position:relative;

    padding:60px;

    background:#fff;

    border-radius:20px;

    box-shadow:var(--sv-shadow);

    overflow:hidden;
}

/*---------------------------------
  Gradient Version
----------------------------------*/

.sv-newsletter-primary{

    background:linear-gradient(
        135deg,
        #2563eb,
        #4f46e5
    );

    color:#fff;
}

/*---------------------------------
  Layout
----------------------------------*/

.sv-newsletter-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;
}

/*---------------------------------
  Content
----------------------------------*/

.sv-newsletter-content{

    max-width:550px;
}

.sv-newsletter-title{

    font-size:36px;

    font-weight:700;

    margin-bottom:15px;
}

.sv-newsletter-description{

    font-size:16px;

    line-height:1.8;

    opacity:.9;

    margin-bottom:0;
}

/*---------------------------------
  Form
----------------------------------*/

.sv-newsletter-form{

    display:flex;

    gap:15px;

    width:100%;

    max-width:320px;
    float: right;
    
}

/*---------------------------------
  Input
----------------------------------*/

.sv-newsletter-input{

    flex:1;

    height:56px;

    border:1px solid var(--sv-border);

    border-radius:12px;

    padding:0 20px;

    background:#fff;

    font-size:15px;

    transition:.25s;
}

.sv-newsletter-input:focus{

    border-color:var(--sv-primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/*---------------------------------
  Button
----------------------------------*/

.sv-newsletter-btn{

    height:56px;

    padding:0 30px;

    background:var(--sv-primary);

    color:#fff;

    border:none;

    border-radius:12px;

    font-weight:600;

    transition:.3s;
}

.sv-newsletter-btn:hover{

    background:var(--sv-primary-dark);

    transform:translateY(-2px);
}

/*---------------------------------
  Sidebar Newsletter
----------------------------------*/

.sv-newsletter-sidebar{

    padding:35px;

    border-radius:16px;

    background:#fff;

    box-shadow:var(--sv-shadow);
}

.sv-newsletter-sidebar .sv-newsletter-title{

    font-size:24px;

    margin-bottom:10px;
}

.sv-newsletter-sidebar .sv-newsletter-description{

    margin-bottom:20px;
}

.sv-newsletter-sidebar .sv-newsletter-form{

    flex-direction:column;
}

.sv-newsletter-sidebar input{

    width:100%;
}

.sv-newsletter-sidebar button{

    width:100%;
}

/*---------------------------------
  Footer Newsletter
----------------------------------*/

.sv-newsletter-footer{

    background:transparent;

    box-shadow:none;

    padding:0;
}

.sv-newsletter-footer input{

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

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

    color:#fff;
}

.sv-newsletter-footer input::placeholder{

    color:#cbd5e1;
}

.sv-newsletter-footer button{

    background:#fff;

    color:var(--sv-primary);
}

.sv-newsletter-footer button:hover{

    background:#f8fafc;
}

/*---------------------------------
  Success Message
----------------------------------*/

.sv-newsletter-success{

    display:none;

    margin-top:20px;

    padding:15px;

    border-radius:10px;

    background:#dcfce7;

    color:#166534;

    font-weight:600;
}

.sv-newsletter-success.show{

    display:block;
}

/*---------------------------------
  Error Message
----------------------------------*/

.sv-newsletter-error{

    display:none;

    margin-top:20px;

    padding:15px;

    border-radius:10px;

    background:#fee2e2;

    color:#b91c1c;

    font-weight:600;
}

.sv-newsletter-error.show{

    display:block;
}

/*---------------------------------
  Decorative Circle
----------------------------------*/

.sv-newsletter::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:rgba(37,99,235,.08);

    border-radius:50%;

    right:-80px;

    top:-80px;
}

.sv-newsletter::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    background:rgba(99,102,241,.08);

    border-radius:50%;

    bottom:-50px;

    left:-50px;
}

/*---------------------------------
  Responsive
----------------------------------*/

@media(max-width:992px){

.sv-newsletter-inner{

flex-direction:column;

text-align:center;

}

.sv-newsletter-form{

max-width:100%;

}

}

@media (max-width:768px){

    .sv-newsletter{

        padding:35px 20px;

    }

    .sv-newsletter-title{

        font-size:28px;

    }

    .sv-newsletter-inner{

        gap:24px;

    }

    .sv-newsletter-form{

        display:flex;
        flex-direction:row;
        align-items:center;
        width:100%;
        max-width:100%;
        gap:10px;

    }

    .sv-newsletter-input{

        flex:1;
        min-width:0;

    }

    .sv-newsletter-btn{

        width:auto;
        flex-shrink:0;
        padding:0 18px;
        white-space:nowrap;

    }

}

@media (max-width:360px){

    .sv-newsletter-form{

        flex-direction:column;

    }

    .sv-newsletter-btn{ 

        width:100%;

    }

}