/*======================================================

                CTA SECTION

======================================================*/

.cta-section{

    padding:140px 0;

    background:#f5f5f7;

    position:relative;

    overflow:hidden;

}

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

.cta-box{

    position:relative;

    background:linear-gradient(135deg,#111111 0%,#1d1d1f 50%,#000000 100%);

    border-radius:40px;

    padding:110px 80px;

    text-align:center;

    overflow:hidden;

    box-shadow:0 35px 80px rgba(0,0,0,.18);

}

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

.cta-box::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

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

    top:-220px;

    left:-180px;

    filter:blur(30px);

}

.cta-box::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    right:-150px;

    bottom:-180px;

    filter:blur(35px);

}

/*====================================
Content
====================================*/

.cta-box>*{

    position:relative;

    z-index:2;

}

.cta-subtitle{

    display:inline-block;

    color:rgba(255,255,255,.65);

    font-size:14px;

    letter-spacing:5px;

    text-transform:uppercase;

    font-weight:600;

    margin-bottom:24px;

}

.cta-box h2{

    color:#ffffff;

    font-size:62px;

    line-height:1.12;

    font-weight:700;

    margin-bottom:30px;

}

.cta-box p{

    max-width:720px;

    margin:0 auto;

    color:rgba(255,255,255,.78);

    font-size:20px;

    line-height:1.9;

}

/*====================================
Buttons
====================================*/

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:22px;

    margin-top:55px;

}

/*====================================
Primary Button
====================================*/

.cta-buttons .primary-btn{

    width:220px;

    height:62px;

    border-radius:999px;

    background:#ffffff;

    color:#111;

    font-weight:600;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    transition:.35s;

}

.cta-buttons .primary-btn:hover{

    transform:translateY(-5px);

    background:#ededed;

    box-shadow:0 18px 35px rgba(255,255,255,.15);

}

/*====================================
Outline Button
====================================*/

.cta-buttons .outline-btn{

    width:220px;

    height:62px;

    border-radius:999px;

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

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.cta-buttons .outline-btn:hover{

    background:#ffffff;

    color:#111;

}

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

.cta-box:hover{

    transform:translateY(-6px);

    transition:.45s;

    box-shadow:0 45px 100px rgba(0,0,0,.25);

}

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

@media(max-width:992px){

.cta-box{

    padding:80px 35px;

}

.cta-box h2{

    font-size:46px;

}

.cta-box p{

    font-size:18px;

}

.cta-buttons{

    flex-direction:column;

}

.cta-buttons .primary-btn,

.cta-buttons .outline-btn{

    width:100%;

    max-width:320px;

}

}

@media(max-width:576px){

.cta-section{

    padding:90px 0;

}

.cta-box{

    border-radius:28px;

    padding:60px 25px;

}

.cta-box h2{

    font-size:36px;

}

.cta-box p{

    font-size:16px;

}

}