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

.cta-preview{

    padding:65px 0 75px;

    background:#fcfbff;

    position:relative;

    overflow:hidden;

}

.cta-preview .container{

    max-width:1050px;

    margin:0 auto;

    padding:0 20px;

}

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

.cta-preview-box{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    padding:50px 40px;

    background:linear-gradient(
        135deg,
        #241c44 0%,
        #4f3785 50%,
        #6d28d9 100%
    );

    box-shadow:
        0 20px 50px rgba(36,28,68,.18),
        0 0 30px rgba(109,40,217,.08);

}

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

.cta-preview-content{

    position:relative;

    z-index:3;

    max-width:720px;

    margin:0 auto;

    text-align:center;

}

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

.cta-preview .section-tag{

    display:inline-block;

    padding:7px 18px;

    border-radius:40px;

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

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

    color:#ffffff;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:18px;

    backdrop-filter:blur(8px);

}

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

.cta-preview h2{

    color:#ffffff;

    font-size:2.35rem;

    line-height:1.2;

    margin:0 0 18px;

}

/*==================================================
TEXT
==================================================*/

.cta-preview-content > p{

    max-width:620px;

    margin:0 auto;

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

    font-size:1rem;

    line-height:1.7;

}

/*==================================================
CTA PREMIUM GLOWS
==================================================*/

.cta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    pointer-events:none;

}

.cta-glow-one{

    width:220px;

    height:220px;

    top:-110px;

    left:-70px;

    background:#b48cff;

    opacity:.35;

}

.cta-glow-two{

    width:200px;

    height:200px;

    right:-60px;

    bottom:-100px;

    background:#ffd700;

    opacity:.18;

}

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

.cta-preview-buttons{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:28px;

}

/*==================================================
BOOKING BUTTON
==================================================*/

.cta-preview .cta-booking-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 25px;

    border-radius:40px;

    background:#ffd700;

    color:#241c44;

    text-decoration:none;

    font-size:.96rem;

    font-weight:700;

    box-shadow:0 12px 30px rgba(255,215,0,.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.cta-preview .cta-booking-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 38px rgba(255,215,0,.28);

}

/*==================================================
WHATSAPP BUTTON
==================================================*/

.cta-whatsapp-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 25px;

    border-radius:40px;

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

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

    color:#ffffff;

    text-decoration:none;

    font-size:.96rem;

    font-weight:700;

    backdrop-filter:blur(8px);

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease;

}

.cta-whatsapp-btn:hover{

    transform:translateY(-4px);

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

    border-color:rgba(255,255,255,.45);

    color:#ffffff;

}

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

.cta-preview-trust{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin-top:25px;

}

.cta-preview-trust span{

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

    font-size:.9rem;

    font-weight:600;

    transition:
        color .3s ease,
        transform .3s ease;

}

.cta-preview-trust span:hover{

    color:#ffffff;

    transform:translateY(-2px);

}

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

@media(max-width:768px){

    .cta-preview{

        padding:55px 0 65px;

    }

    .cta-preview-box{

        padding:42px 25px;

        border-radius:24px;

    }

    .cta-preview h2{

        font-size:2rem;

    }

    .cta-preview-content > p{

        font-size:.98rem;

        line-height:1.7;

    }

    .cta-preview-buttons{

        flex-direction:column;

        gap:12px;

        margin-top:25px;

    }

    .cta-preview .cta-booking-btn,
    .cta-whatsapp-btn{

        width:100%;

        max-width:320px;

    }

    .cta-preview-trust{

        gap:12px 18px;

        margin-top:22px;

    }

}

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

@media(max-width:480px){

    .cta-preview{

        padding:45px 0 55px;

    }

    .cta-preview .container{

        padding:0 15px;

    }

    .cta-preview-box{

        padding:35px 20px;

        border-radius:22px;

    }

    .cta-preview .section-tag{

        font-size:.82rem;

        margin-bottom:16px;

    }

    .cta-preview h2{

        font-size:1.7rem;

        margin-bottom:16px;

    }

    .cta-preview-content > p{

        font-size:.94rem;

    }

    .cta-preview-trust{

        gap:10px 14px;

    }

    .cta-preview-trust span{

        font-size:.82rem;

    }

}

/*==================================================
ACCESSIBILITY
==================================================*/

.cta-preview a:focus-visible{

    outline:2px solid #ffffff;

    outline-offset:4px;

}

/*==================================================
REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){

    .cta-preview a,
    .cta-preview-trust span{

        transition:none !important;

    }

}