@import url("style.css");

:root {
    --pill-width: 32px;
    --pill-height: 4px;
}


.carousel {
    display: flex;
    flex-direction: column;
    justify-content: start;
    overflow: hidden;
    text-align: left;
    gap: calc(var(--spacing-2xl) + var(--spacing-sm));
    align-items: start;
}

.carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    border-radius: var(--border-radius-md);
}

.cta-button {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 400;
}

.pills-indicator {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
}

.pill {
    width: var(--pill-width);
    height: var(--pill-height);
    border-radius: var(--border-radius-lg);
    background-color: var(--color-gray-500);
    cursor: pointer;
    transition: background-color 0.3s;
}

.pill.active {
    background-color: var(--color-black);
}

.form-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-md);
    align-items: center;
}

.section-title {
    color: var(--color-gray-900);
    font-weight: 500;
    font-size: var(--font-size-2xl);
}

.section-description {
    color: var(--color-gray-800);
    font-weight: 500;
    font-size: var(--font-size-lg);
    text-wrap: 'wrap';
    text-align: center;
}