/*
|--------------------------------------------------------------------------
| Bali Indo Tour
| Homepage CTA
|--------------------------------------------------------------------------
*/

.home-cta {

    position: relative;

    padding: var(--space-7xl) 0;

    color: var(--white);

    background:
        linear-gradient(90deg,
            rgba(15, 23, 42, .78),
            rgba(15, 23, 42, .42)),
        url("../../img/home/cta.webp") center / cover no-repeat;

}

.home-cta-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-4xl);

}

.home-cta .home-section-eyebrow {

    color: var(--secondary);

}

.home-cta h2 {

    margin-bottom: var(--space-md);

    color: var(--white);

    font-size: clamp(var(--font-3xl),
            4vw,
            var(--font-5xl));

    font-weight: var(--fw-bold);

    line-height: var(--lh-sm);

}

.home-cta p {

    max-width: 560px;

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

    font-size: var(--font-sm);

    line-height: var(--lh-lg);

}

.home-cta-actions {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: var(--space-md);

    flex-shrink: 0;

}

.home-cta-actions .btn-primary {

    min-height: 48px;

    padding: .75rem 1.5rem;

    color: var(--white);

    background: var(--primary);

    border-color: var(--primary);

    border-radius: var(--radius-pill);

    font-size: var(--font-sm);

    font-weight: var(--fw-bold);

}

.home-cta-actions .btn-primary:hover {

    background: var(--primary-dark);

    border-color: var(--primary-dark);

}

.home-cta-whatsapp {

    display: inline-flex;

    align-items: center;

    gap: var(--space-sm);

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

    font-size: var(--font-xs);

    font-weight: var(--fw-semibold);

}

.home-cta-whatsapp:hover {

    color: var(--white);

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .home-cta {

        padding: var(--space-6xl) 0;

    }

    .home-cta-content {

        display: block;

    }

    .home-cta-actions {

        margin-top: var(--space-2xl);

    }

    .home-cta-actions .btn-primary {

        width: 100%;

    }

}