#button-container {
    display: flex;
    gap: 16px;
}

.btn {
    border: 1px solid var(--lilac);
    background-color: transparent;
    padding: 12px 24px;
    color: var(--lilac);
    border-radius: 50px;
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size);
    cursor: pointer;
    transition: border 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
    background-color: var(--lilac);
    border: 1px solid var(--lilac);
    color: white;
}

.active {
    background-color: var(--lilac);
    border: 1px solid var(--lilac);
    color: white;

    transition: border 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.active:hover {
    background-color: #796CA9;
}


.heading span {
    color: var(--lilac);
    text-shadow: 1px 1px 5px #434343;
}


.small-heading {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size);
    letter-spacing: 15%;
}

.heading {
    font-family: var(--h2-font-family);
    font-size: 54px;
    line-height: 1.3;
}

.subheading {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size);
    line-height: var(--paragraph-line-height);
    max-width: 550px;
}

.intro-section-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.intro-heading-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}






.fade-slide-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideUp 2.0s ease-out forwards;
}

@keyframes fadeSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}






/* ----------------------------- MOBILVERSION <500PX -------------------------- */

@media (max-width: 600px) {
    .heading {
        font-family: "playfair-display-bold";
        font-size: 38px;
        line-height: 1.1;
    }

    .intro-section-container {
        gap: 24px;
    }

    .intro-heading-container {
        gap: 12px;
        width: 100%;
    }
}