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

.home-page {

    color: var(--text);

    background: var(--surface);

    overflow: hidden;

}


/*
|--------------------------------------------------------------------------
| Section
|--------------------------------------------------------------------------
*/

.home-section {

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

}


/*
|--------------------------------------------------------------------------
| Section Heading
|--------------------------------------------------------------------------
*/

.home-section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

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

    margin-bottom: var(--space-3xl);

}

.home-section-heading-center {

    justify-content: center;

    text-align: center;

}

.home-section-eyebrow {

    display: block;

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

    color: var(--primary);

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

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

    letter-spacing: .08em;

    text-transform: uppercase;

}

.home-section-heading h2 {

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

    color: var(--text);

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

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

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

    letter-spacing: var(--ls-tight);

}

.home-section-heading p {

    max-width: 560px;

    color: var(--text-muted);

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

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

}

.home-section-heading-center>div {

    display: flex;

    flex-direction: column;

    align-items: center;

}

.home-section-link {

    display: inline-flex;

    align-items: center;

    gap: var(--space-sm);

    flex-shrink: 0;

    color: var(--primary);

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

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

}

.home-section-link:hover {

    color: var(--primary-dark);

}

.home-section-link i {

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

}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .home-section {

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

    }

    .home-section-heading {

        display: block;

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

    }

    .home-section-heading h2 {

        font-size: var(--font-3xl);

    }

    .home-section-heading p {

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

    }

    .home-section-link {

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

    }

}