.navbar {
    transition: all 0.5s ease-in-out;
}

.header .slide {
    width: 70%;
}

.navbar {
    background-color: black !important; /* Always dark */
    transition: background-color 0.3s ease-in-out; /* Smooth transition */
}

.invitation-bg {
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("~/images/invitation-background.jpg") center center no-repeat;
    background-size: cover;
}

@media (max-width: 992px) {
    .navbar {
        background: var(--bs-dark);
    }

    .header {
        height: 800px !important;
        min-height: 100px !important;
    }

        .header .slide {
            width: 90%;
        }

        .header p {
            width: 100% !important;
            font-size: 16px;
        }

    .summary {
        width: 90% !important;
    }
}

body {
    padding-top: 85px; /* Adjust based on navbar height */
}

.custom-container-fluid {
    --bs-gutter-x: 0;
    margin-top: -10px !important;
}

/* Custom Pagination Styles */
.custom - pagination.page - item.page - link {
    color: gray; /* Default color for unselected items */
    background - color: transparent;
    border: 1px solid gray;
    margin: 0 2px; /* Add spacing between pagination items */
}

.custom - pagination.page - item.active.page - link {
    color: white; /* Text color for the active page */
    background - color: pink; /* Background color for the active page */
    border - color: pink; /* Border color for the active page */
}

.custom - pagination.page - item.disabled.page - link {
    color: lightgray; /* Color for disabled items (e.g., Previous/Next when inactive) */
    border - color: lightgray;
    background - color: transparent;
}

.custom - pagination.page - item: not(.disabled): not(.active).page - link:hover {
    color: gray; /* Text color on hover */
    border - color: gray; /* Border color on hover */
    background - color: transparent;
}