/* ==========================================================
   TRUEVITAHUB
   NEWSLETTER
========================================================== */

.tvh-newsletter{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
        radial-gradient(circle at top left,#dbeafe 0%,transparent 35%),
        radial-gradient(circle at bottom right,#e0f2fe 0%,transparent 35%),
        #ffffff;

}

/* ==========================================================
   Card
========================================================== */

.tvh-newsletter-card{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:60px;

    align-items:center;

    padding:60px;

    border-radius:32px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(37,99,235,.12);

    box-shadow:
        0 25px 70px rgba(15,23,42,.08);

}

/* ==========================================================
   Left
========================================================== */

.tvh-newsletter .tvh-section-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#eef4ff;

    color:#2563eb;

    font-size:14px;

    font-weight:700;

    margin-bottom:22px;

}

.tvh-newsletter h2{

    font-size:52px;

    line-height:1.15;

    color:#0f172a;

    margin-bottom:22px;

}

.tvh-newsletter p{

    font-size:18px;

    color:#64748b;

    line-height:1.9;

    margin-bottom:34px;

}

/* ==========================================================
   Features
========================================================== */

.tvh-newsletter-features{

    list-style:none;

    margin:0;

    padding:0;

    display:grid;

    gap:14px;

}

.tvh-newsletter-features li{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:16px;

    color:#334155;

}

/* ==========================================================
   Form
========================================================== */

.tvh-newsletter-form-wrap{

    padding:38px;

    border-radius:24px;

    background:#f8fbff;

    border:1px solid rgba(37,99,235,.10);

}

.tvh-newsletter-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.tvh-newsletter-form input{

    width:100%;

    height:58px;

    padding:0 18px;

    border-radius:14px;

    border:1px solid #dbe4f0;

    background:#fff;

    font-size:16px;

    transition:.3s;

}

.tvh-newsletter-form input:focus{

    outline:none;

    border-color:#2563eb;

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

}

.tvh-newsletter-form .tvh-btn-primary{

    width:100%;

    height:58px;

}

.tvh-newsletter-note{

    margin-top:18px;

    text-align:center;

    color:#64748b;

    font-size:14px;

}

/* ==========================================================
   Glow
========================================================== */

.tvh-newsletter::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    background:#2563eb;

    opacity:.08;

    border-radius:50%;

    filter:blur(120px);

}

.tvh-newsletter::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    bottom:-160px;

    right:-160px;

    background:#60a5fa;

    opacity:.08;

    border-radius:50%;

    filter:blur(120px);

}

/* ==========================================================
   Newsletter Animation
========================================================== */

.tvh-newsletter-visible{

    opacity:1 !important;

    transform:translateY(0) !important;

}

.tvh-loading{

    opacity:.8;

    pointer-events:none;

}

.tvh-success{

    background:#16a34a !important;

    border-color:#16a34a !important;

}

/* ==========================================================
   Newsletter Responsive
========================================================== */

/* ---------- Large Laptop ---------- */

@media (max-width:1400px){

    .tvh-newsletter-card{

        gap:50px;

        padding:50px;

    }

}

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .tvh-newsletter{

        padding:90px 0;

    }

    .tvh-newsletter-card{

        grid-template-columns:1fr;

        gap:40px;

    }

    .tvh-newsletter h2{

        font-size:44px;

    }

}

/* ---------- Tablet ---------- */

@media (max-width:992px){

    .tvh-newsletter{

        padding:80px 0;

    }

    .tvh-newsletter-card{

        padding:40px;

    }

    .tvh-newsletter h2{

        font-size:38px;

    }

    .tvh-newsletter p{

        font-size:17px;

    }

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    .tvh-newsletter{

        padding:70px 0;

    }

    .tvh-newsletter-card{

        padding:30px;

        border-radius:24px;

    }

    .tvh-newsletter h2{

        font-size:30px;

        line-height:1.3;

    }

    .tvh-newsletter p{

        font-size:16px;

        line-height:1.8;

    }

    .tvh-newsletter-features{

        gap:12px;

    }

    .tvh-newsletter-features li{

        font-size:15px;

    }

    .tvh-newsletter-form-wrap{

        padding:24px;

    }

    .tvh-newsletter-form input{

        height:54px;

        font-size:15px;

    }

    .tvh-newsletter-form .tvh-btn-primary{

        height:54px;

    }

}

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .tvh-newsletter{

        padding:60px 0;

    }

    .tvh-newsletter-card{

        padding:22px;

    }

    .tvh-newsletter h2{

        font-size:26px;

    }

    .tvh-newsletter p{

        font-size:15px;

    }

    .tvh-newsletter .tvh-section-badge{

        font-size:12px;

        padding:8px 14px;

    }

    .tvh-newsletter-features li{

        font-size:14px;

    }

    .tvh-newsletter-form-wrap{

        padding:18px;

    }

    .tvh-newsletter-form input{

        height:50px;

        font-size:14px;

    }

    .tvh-newsletter-form .tvh-btn-primary{

        height:50px;

        font-size:15px;

    }

    .tvh-newsletter-note{

        font-size:13px;

    }

}