/* =====================================================
   CTA SECTION
====================================================== */

.cta{

    padding:120px 0;

    position:relative;

    overflow:hidden;

}

/* =====================================================
   BACKGROUND GLOW
====================================================== */

.cta::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(236, 238, 239, 0.18);

    border-radius:50%;

    filter:blur(140px);

    top:-180px;

    left:-180px;

}

.cta::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(124,58,237,.15);

    border-radius:50%;

    filter:blur(140px);

    right:-180px;

    bottom:-180px;

}

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

.cta-box{

    position:relative;

    z-index:2;

    text-align:center;

    padding:80px 60px;

    border-radius:32px;

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

    backdrop-filter:blur(20px);

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

    overflow:hidden;

}

/* =====================================================
   SHINE EFFECT
====================================================== */

.cta-box::before{

    content:"";

    position:absolute;

    top:-100%;

    left:-100%;

    width:250%;

    height:250%;

    background:linear-gradient(
        45deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transform:rotate(25deg);

    transition:.8s;

}

.cta-box:hover::before{

    top:100%;

    left:100%;

}

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

.cta-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

    background:rgba(56,189,248,.15);

    color:var(--primary);

    font-weight:700;

    margin-bottom:25px;

}

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

.cta-box h2{

    font-size:48px;

    line-height:1.3;

    margin-bottom:25px;

    color:#fff;

}

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

.cta-box p{

    max-width:700px;

    margin:0 auto 40px;

    color:var(--gray);

    line-height:1.9;

    font-size:17px;

}

/* =====================================================
   BUTTONS
====================================================== */

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-buttons a{

    min-width:220px;

}

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

@media(max-width:992px){

.cta-box{

padding:60px 40px;

}

.cta-box h2{

font-size:38px;

}

}

@media(max-width:768px){

.cta{

padding:90px 0;

}

.cta-box{

padding:45px 25px;

}

.cta-box h2{

font-size:30px;

}

.cta-box p{

font-size:15px;

}

.cta-buttons{

flex-direction:column;

}

.cta-buttons a{

width:100%;

}

}