@charset "utf-8";
/* CSS Document */
/* ==========================================================
   FINAL CTA
========================================================== */

.tc-cta{

    --cta-bg-1:#0a0e18;
    --cta-bg-2:#152238;
    --cta-bg-end:#1A1F2C;
    --cta-heading:#ffffff;
    --cta-text:#aab4c5;
    --cta-badge-bg:rgba(255,255,255,.06);
    --cta-badge-border:rgba(255,255,255,.16);
    --cta-divider:rgba(255,255,255,.14);

    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:
        linear-gradient(
            160deg,
            var(--cta-bg-1) 0%,
            var(--cta-bg-2) 55%,
            var(--cta-bg-end) 100%
        );
	
}

.tc-cta::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:560px;

    height:560px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(227,30,36,.22),
            transparent 70%
        );

}

.tc-cta::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:480px;

    height:480px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(227,30,36,.14),
            transparent 70%
        );

}

.tc-cta .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================
   Layout
========================================================== */

.tc-cta__wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.3fr .9fr;

    gap:70px;

    align-items:center;

}

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

.tc-cta .tc-section-subtitle{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:999px;

    background:var(--cta-badge-bg);

    border:1px solid var(--cta-badge-border);

    color:#ff9195;

    backdrop-filter:blur(6px);

}

.tc-cta .tc-section-subtitle::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--tc-primary);

    box-shadow:0 0 0 4px rgba(227,30,36,.2);

}

.tc-cta__content h2{

    margin:22px 0 24px;

    font-size:clamp(2.2rem,4vw,3.4rem);

    line-height:1.2;

    color:var(--cta-heading);

}

.tc-cta__content h2 em{

    font-style:normal;

    background:linear-gradient(120deg,#ff8a8d,var(--tc-primary));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.tc-cta__text{

    font-size:1.08rem;

    line-height:1.9;

    color:var(--cta-text);

    max-width:650px;

}

/* ==========================================================
   Features
========================================================== */

.tc-cta__features{

    margin:45px 0 0;

    padding:0;

    list-style:none;

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:20px 30px;

}

.tc-cta__features li{

    display:flex;

    align-items:center;

    gap:14px;

    font-weight:600;

    color:var(--cta-heading);

}

.tc-feature-icon{

    width:44px;

    height:44px;

    padding:11px;

    box-sizing:border-box;

    border-radius:50%;

    display:block;

    background:linear-gradient(
        135deg,
        var(--tc-primary),
        var(--tc-primary-dark)
    );

    color:#fff;

    flex-shrink:0;

    box-shadow:0 10px 24px rgba(227,30,36,.28);

    transition:.35s ease;

}

.tc-cta__features li:hover .tc-feature-icon{

    transform:scale(1.08) rotate(-8deg);

}

.tc-btn-icon{

    width:18px;

    height:18px;

    margin-right:10px;

    flex-shrink:0;

}

.tc-contact-icon{

    width:20px;

    height:20px;

    color:var(--tc-primary);

    flex-shrink:0;

}

.tc-cta__contact-item{

    display:flex;

    align-items:center;

    gap:12px;

}
/* ==========================================================
   Card
========================================================== */

.tc-cta__card{

    position:relative;

    padding:45px;
	
	max-width:420px;
    
	margin-left:auto;

    background:#fff;

    border:1px solid var(--tc-border);

    border-radius:28px;

    box-shadow:0 30px 70px rgba(0,0,0,.45), 0 0 60px rgba(227,30,36,.14);

    transition:.35s;

}

.tc-cta__card:hover{

    transform:translateY(-8px);

    box-shadow:0 40px 90px rgba(0,0,0,.5), 0 0 70px rgba(227,30,36,.2);

}

/* ==========================================================
   Ticket-stub Divider (signature detail)
========================================================== */

.tc-cta__ticket-divider{

    position:relative;

    height:0;

    margin:6px 0 28px;

    border-top:2px dashed rgba(17,24,39,.16);

}

.tc-cta__ticket-divider::before,
.tc-cta__ticket-divider::after{

    content:"";

    position:absolute;

    top:-11px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--cta-bg-2, #152238);

}

.tc-cta__ticket-divider::before{

    left:-24px;

}

.tc-cta__ticket-divider::after{

    right:-24px;

}

/* ==========================================================
   Icon
========================================================== */

.tc-cta__card-icon{

    width:82px;

    height:82px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    background:

        linear-gradient(
            135deg,
            var(--tc-primary),
            var(--tc-primary-dark)
        );

    color:#fff;

    font-size:34px;

    box-shadow:0 15px 35px rgba(227,30,36,.30);

}

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

.tc-cta__card h3{

    margin-bottom:18px;

    font-size:1.9rem;

    color:var(--tc-heading);

}

.tc-cta__card p{

    color:var(--tc-text);

    line-height:1.9;

    margin-bottom:35px;

}

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

.tc-cta__buttons{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:30px;
	
	margin-top:35px;

}

.tc-cta__buttons .tc-btn{

    width:100%;

    justify-content:center;
	
	 min-height:58px;

}

/* WhatsApp */

.tc-btn--whatsapp{

    border:2px solid #25D366;

    color:#25D366;

    background:#fff;
	
	font-weight:700;

}

.tc-btn--whatsapp:hover{

    background:#25D366;

    color:#fff;

    border-color:#25D366;

}

.tc-btn--whatsapp i{

    margin-right:10px;

}

/* ==========================================================
   Contact
========================================================== */

.tc-cta__contact{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.tc-cta__contact-item{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--tc-heading);

    font-weight:600;

}

.tc-cta__contact-item i{

    color:var(--tc-primary);

    width:20px;

    text-align:center;

}

/* ==========================================================
   Decorative Effects
========================================================== */

.tc-cta__card::before{

    content:"";

    position:absolute;

    top:-80px;

    right:-80px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(227,30,36,.08),
            transparent 70%
        );

    transition:.4s ease;

}

.tc-cta__card:hover::before{

    transform:scale(1.2);

}

.tc-cta__card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    border:1px solid rgba(227,30,36,.06);

    pointer-events:none;

}

/* ==========================================================
   Feature Hover
========================================================== */

.tc-cta__features li{

    gap:18px;

}

.tc-cta__features li:hover{

    transform:translateX(8px);

}

/* ==========================================================
   Card Animation
========================================================== */

@keyframes tcFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.tc-cta__card{

    animation:tcFloat 6s ease-in-out infinite;

}

/* ==========================================================
   Button Effects
========================================================== */

.tc-cta__buttons .tc-btn{

    transition:all .3s ease;

}

.tc-cta__buttons .tc-btn:hover{

    transform:translateY(-2px);

}

/* ==========================================================
   Contact
========================================================== */

.tc-cta__contact-item{

    transition:.3s ease;

}

.tc-cta__contact-item:hover{

    color:var(--tc-primary);

}

.tc-cta__contact-item i{

    transition:.3s ease;

}

.tc-cta__contact-item:hover i{

    transform:scale(1.15);

}

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

@media (max-width:1199px){

    .tc-cta__wrapper{

        gap:50px;

    }

    .tc-cta__card{

        padding:40px;

    }

}

@media (max-width:991px){

    .tc-cta{

        padding:90px 0;

    }

    .tc-cta__wrapper{

        grid-template-columns:1fr;

        gap:45px;

    }

    .tc-cta__content{

        text-align:center;

    }

    .tc-cta__text{

        margin:0 auto;

    }

    .tc-cta__features{

        grid-template-columns:1fr 1fr;

        justify-content:center;

    }

}

@media (max-width:767px){

    .tc-cta{

        padding:80px 0;

    }

    .tc-cta__wrapper{

        gap:35px;

    }

    .tc-cta__features{

        grid-template-columns:1fr;

        gap:16px;

        margin-top:35px;

    }

    .tc-cta__card{

        padding:30px 24px;

        border-radius:22px;

    }

    .tc-cta__card-icon{

        width:70px;

        height:70px;

        font-size:28px;

        margin-bottom:20px;

    }

    .tc-cta__card h3{

        font-size:1.6rem;

    }

    .tc-cta__buttons{

        gap:14px;

    }

    .tc-cta__buttons .tc-btn{

        width:100%;

    }

}

@media (max-width:480px){

    .tc-cta{

        padding:70px 0;

    }

    .tc-cta__content h2{

        font-size:2rem;

    }

    .tc-cta__text{

        font-size:1rem;

    }

    .tc-cta__features li{

        font-size:.95rem;

    }

    .tc-cta__card{

        padding:24px 20px;

    }

    .tc-cta__card h3{

        font-size:1.4rem;

    }


    .tc-cta__contact{

        gap:14px;

    }

    .tc-cta__contact-item{

        font-size:.95rem;

    }

}