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

.cta{
    padding: 0px;

}

.cta-box{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

    padding:40px 70px;

    border-radius:20px;

    background:linear-gradient(135deg,#0F172A 0%,#111827 45%,#1F2937 100%);

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

}

/* Shapes */

.cta-box::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

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

    right:-260px;

    top:-260px;

}

.cta-box::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.04);

    left:-160px;

    bottom:-170px;

}

/* Small decorative circles */

.cta-decoration{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.cta-decoration span{

    position:absolute;

    border-radius:50%;

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

}

.cta-decoration span:nth-child(1){

    width:18px;

    height:18px;

    top:60px;

    right:330px;

}

.cta-decoration span:nth-child(2){

    width:8px;

    height:8px;

    top:130px;

    right:280px;

}

.cta-decoration span:nth-child(3){

    width:12px;

    height:12px;

    bottom:80px;

    left:120px;

}

.cta-content{

    position:relative;

    z-index:2;

    max-width:560px;

}

.cta-content .section-subtitle{

    color:var(--white);
    margin-bottom:18px;

}

.cta-content h2{
    color:#fff;
    font-size:35px;
    line-height:1.12;
    margin-bottom:15px;

}

.cta-content p{

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

    font-size:16px;

    line-height:1.6;

    margin-bottom:20px;

}

.cta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.cta-buttons .btn-primary{

    background:var(--white);

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

    color:#111;

}

.cta-buttons .btn-primary:hover{

    background:rgba(255,255,255,.05);
    color: var(--white);
    border-color:#fff;

}

.btn-outline-light{

    background:transparent;

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

    color:#fff;

}

.btn-outline-light:hover{

    border-color:var(--primary);

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

    color:#fff;

}

.cta-image{

    position:relative;

    z-index:2;

    flex:1;

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.cta-image img{

    width:100%;

    max-width:700px;

    filter:drop-shadow(0 35px 45px rgba(0,0,0,.45));

    transition:.45s;

}

.cta-box:hover .cta-image img{

    transform:translateY(-10px);

}

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

@media(max-width:1200px){

    .cta-box{

        gap:40px;

        padding:60px;

    }

    .cta-content h2{

        font-size:48px;

    }

}

@media(max-width:992px){

    .cta-box{

        flex-direction:column;

        text-align:center;

    }

    .cta-content{

        max-width:100%;

    }

    .cta-buttons{

        justify-content:center;

    }

    .cta-image{

        justify-content:center;

    }

}

@media(max-width:768px){

    .cta{

        padding:20px 0;

    }

    .cta-box{

        padding:40px 25px;

    }

    .cta-content h2{

        font-size:36px;

    }

    .cta-content p{

        font-size:16px;

    }

}