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

.cta{

    padding:16px 0;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fffaf4 100%
    );
}

.cta-box{

    position:relative;

    overflow:hidden;

    max-width:900px;

    margin:auto;

    padding:20px 24px;

    text-align:center;

    color:#fff;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #ef902d 0%,
        #f59b30 45%,
        #ffb347 100%
    );

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

    box-shadow:0 10px 24px rgba(239,144,45,.16);
}

/*================ Decoration =================*/

.cta-box::before{

    content:"";

    position:absolute;

    width:120px;

    aspect-ratio:1;

    top:-60px;

    left:-60px;

    border-radius:50%;

    background:rgba(255,255,255,.06);
}

.cta-box::after{

    content:"";

    position:absolute;

    width:120px;

    aspect-ratio:1;

    right:-60px;

    bottom:-60px;

    border-radius:50%;

    background:rgba(255,255,255,.06);
}

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

.cta-tag{

    position:relative;

    z-index:2;

    display:inline-block;

    padding:4px 12px;

    margin-bottom:8px;

    border-radius:30px;

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

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

    font-size:10px;

    font-weight:700;

    letter-spacing:.6px;
}

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

.cta-box h2{

    position:relative;

    z-index:2;

    margin:0;

    font-size:clamp(1.8rem,3vw,2.5rem);

    line-height:1.15;

    font-weight:800;
}

.cta-box h2 span{

    color:#fff;
}

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

.cta-buttons{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin-top:16px;
}

.cta .btn-fill,
.cta .btn-outline{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    width:180px;

    height:42px;

    border-radius:10px;

    font-size:13px;

    font-weight:600;

    transition:.3s ease;
}

/* Filled */

.cta .btn-fill{

    background:#fff;

    color:#ef902d;
}

.cta .btn-fill:hover{

    background:#111;

    color:#fff;
}

/* Outline */

.cta .btn-outline{

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

    color:#fff;
}

.cta .btn-outline:hover{

    background:#fff;

    color:#ef902d;
}

/*================ REMOVE FLOAT =================*/

.cta-box:hover{

    transform:none;

    box-shadow:0 10px 24px rgba(239,144,45,.16);
}

/*==========================================
                TABLET
==========================================*/

@media(max-width:991px){

    .cta{

        padding:14px 0;
    }

    .cta-box{

        padding:18px 20px;
    }

    .cta-box h2{

        font-size:2rem;
    }
}

/*==========================================
                MOBILE
==========================================*/

@media(max-width:576px){

    .cta{

        padding:12px 0;
    }

    .cta-box{

        padding:16px;

        border-radius:16px;
    }

    .cta-tag{

        margin-bottom:6px;
    }

    .cta-box h2{

        font-size:1.6rem;

        line-height:1.2;
    }

    .cta-buttons{

        flex-direction:column;

        gap:8px;

        margin-top:12px;
    }

    .cta .btn-fill,
    .cta .btn-outline{

        width:100%;

        max-width:210px;

        height:40px;

        font-size:13px;
    }
}