body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--white);
    margin: 0; 
    padding: 0; 
    overflow-x: hidden; 
}

/*Defining Colors*/
    :root {
        --black: #080808;
        --white: #F6FCFA;
        --pearl: #E4DDC9;
        --light-sage: #B3C6A2;
        --dark-sage: #8DAA74;
        --pastel-pink: #FFE7F1;
        --fairy-tale: #F6CBDB;
        --bone: #E9DDC9;
        --gold: #D4AF37;
        --dark-olive: #303C2A;
        --ash-gray: #C1CCB7;
        --lunar-green: #2E3D34;
        --beige: #FAF3EB;
    }

    /* ------------------------------------- Navigation Bar ---------------------------------- */
    @media (min-width: 992px) {
        /*Navbar Color*/
        .navbar-custom-color {
            background-color: var(--lunar-green);
        }

        /* Centered brand image */
        .navbar .navbar-brand {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        /*Nav Items Styling*/
        .nav-item {
            font-weight: 600;
            font-size: 16px;
            text-transform: uppercase;
        }

        .nav-link {
            color: var(--white);
        }

        .nav-link:hover {
            color: var(--pearl);
        }
    }
    
    @media (max-width: 992px) {
        /*Navbar Color*/
        .navbar-custom-color {
            background-color: var(--lunar-green);
        }

        /* Centered brand image */
        .navbar .navbar-brand {
            position: absolute;
            left: 45%;
            transform: translateX(-50%);
            width: 100px;
            height: 100px;
        }

        /*Nav Items Styling*/
        .nav-item {
            text-align: center;
            font-weight: 600;
            font-size: 26px;
            text-transform: uppercase;
        }

        .nav-link {
            color: var(--white);
        }

        .nav-link:hover {
            color: var(--pearl);
        }

        .active {
            color: var(--pearl);
        }
    }

    /* ------------------------------------- Background Image ---------------------------------- */
    @media (min-width: 992px) {
        /* Banner container */
        .banner {
            position: relative;
            text-align: center;
            color: white; /* Text color for overlay */
            height: 500px; /* Set your preferred height */
            overflow: hidden; /* Hide overflow if image is larger */
        }

        /* Image for the banner */
        .banner img {
            width: 100%;
            height: auto;
            object-fit: cover; /* Maintain aspect ratio and cover container */
            filter: brightness(50%) /* Adjust brightness to darken the image */
        }

        @keyframes floatIn {
            from {
            opacity: 0;
            position: absolute;
                top: 25%;
            }
            to {
            opacity: 1;
            position: absolute;
                top: 50%;
            }
        }

        /* Overlay text styles */
        .overlay-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: floatIn 2.3s forwards;
        }

        /* Style for the large, bold text */
        .large-bold {
            font-family: 'Georgia Pro', serif;
            font-size: 40px;
            font-weight: bold;
        }

        .wedding-date, .wedding-address {
            font-family: 'Georgia Pro', serif;
            font-weight: 700;
        }
    }

    @media (max-width: 992px) {
        /* Banner container */
        .banner {
            position: relative;
            text-align: center;
            color: white; /* Text color for overlay */
            height: 500px; /* Set your preferred height */
            overflow: hidden; /* Hide overflow if image is larger */
        }

        /* Image for the banner */
        .banner img {
            width: 100%;
            height: auto;
            object-fit: cover; /* Maintain aspect ratio and cover container */
            filter: brightness(50%) /* Adjust brightness to darken the image */
        }

        @keyframes floatIn {
            from {
            opacity: 0;
            position: absolute;
                top: 25%;
            }
            to {
            opacity: 1;
            position: absolute;
                top: 50%;
            }
        }

        /* Overlay text styles */
        .overlay-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: floatIn 2.3s forwards;
        }

        /* Style for the large, bold text */
        .large-bold {
            font-family: 'Georgia Pro', serif;
            font-size: 50px;
            font-weight: bold;
        }

        .wedding-date, .wedding-address {
            font-family: 'Georgia Pro', serif;
            font-weight: 700;
            font-size: 25px;
        }
    }



    /* ------------------------------------- Event Details  ---------------------------------- */

    /*For Larger Screens*/
    @media (min-width: 992px) {
        .event-details-heading, .lodging-heading {
            font-family: 'Alex Brush', cursive;
            font-size: 60px;
        }

        .event-images {
            width: 70%;
            height: auto;
            object-fit: cover; /* Maintain aspect ratio and cover container */
            filter: brightness(50%) /* Adjust brightness to darken the image */
        }

        .event-details-text {
            font-family: 'Montserrat', serif;
        }

        .details {
            font-size: 18px;
        }
    }

    /*For Smaller Screens*/
    @media (max-width: 992px) {
        .our-wedding-day {
            text-align: center;
        }
    
        .event-details-heading,
        .lodging-heading {
            font-family: 'Alex Brush', cursive;
            font-size: 120px;
        }
    
        .event-images {
            width: 225px; /* Set width */
            height: 225px; /* Set height */
            object-fit: contain; /* Maintain aspect ratio and cover container */
            filter: brightness(50%);
            display: block; /* Ensure images don't inherit unwanted margins */
            margin: 0 auto; /* Center the images */
        }

        .event-heading {
            font-size: 75px;
        }
    
        .event-details-text {
            font-family: 'Montserrat', serif;
            text-align: center;
        }
    
        .details {
            font-size: 30px;
        }
    }

    /*----------------------------------- Our Story -----------------------------------------*/
    @media (min-width: 992px) {
        .our-story-img {
            width: 15%;
            height: auto;
        }
        .our-story {
            font-family: 'Montserrat', serif;
        }
    }

    @media (max-width: 992px) {
        .our-story-img {
            width: 25%;
            height: auto;
        }
        .our-story {
            font-family: 'Montserrat', serif;
            font-size: 40px;
        }
    }

    /*----------------------------------- Lodging -------------------------------------------*/
    
    @media (min-width: 992px) {
        .near-groom, .near-bride {
            font-family: 'Montserrat', serif;
        }

        .near-groom-details, .near-bride-details {
            font-family: 'Montserrat', serif;
        }
    }

    @media (max-width: 992px) {
        .near-groom, .near-bride  {
            font-family: 'Montserrat', serif;
            font-size: 75px;
        }

        .near-groom-details, .near-bride-details {
            font-family: 'Montserrat', serif;
            font-size: 35px;
        }
    }

    /*----------------------------------- Footer -------------------------------------------*/  
    
    .footer {
        margin-top: auto;
        height: 70px;
        background-color: var(--lunar-green);
    }

    /*----------------------------------- RSVP -------------------------------------------*/
    /* Styles for the container holding the background image */
    .background-image-container {
        position: fixed; /* Fix the container */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('./images/rsvp-image.jpg');
        background-size: cover;
        background-position: center;
        padding: 50px;
        z-index: -1;
        filter: blur(2px);
    }

    .background-container {
        position: fixed; /* Fix the container */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--beige);
        background-size: cover;
        background-position: center;
        padding: 50px;
        z-index: -1;
        filter: blur(1px);
    }

    @media (max-width: 992px) {
        .rsvp {
            font-family: 'Montserrat', serif;
            font-size: 75px;
        }
    
        .form-label {
            font-family: 'Montserrat', serif;
            font-size: 25px;
        }
    }

    /*----------------------------------- Activities -------------------------------------------*/
    hr {
        background-color: #080808;
        width: 300px;
    }

    .activities-heading {
        font-family: 'Alex Brush', cursive;
        font-size: 60px;
    }

    @media (max-width: 992px) {
        .activities-heading {
            font-family: 'Alex Brush', cursive;
            font-size: 100px;
        }
        .activities-label {
            font-size: 35px;
        }
        .card-text {
            font-size: 26px;
        }
        .card-title {
            font-size: 28px;
        }
        .btn {
            font-size: 24px;
        }
    }


    /*----------------------------------- Find Us -------------------------------------------*/
    iframe {
        width: 500px;
        height: 500px;
    }

    .venue-info-heading {
        font-family: 'Montserrat', serif;
    }

    .venue-info-details {
        font-family: 'Montserrat', serif;
    }

    .gate-heading {
        font-family: 'Alex Brush', cursive;
        font-size: 60px;
    }

    .findus-heading {
        font-family: 'Alex Brush', cursive;
        font-size: 60px;
    }    

    @media (max-width: 992px) {
        .gate-heading {
            font-size: 100px;
            font-family: 'Alex Brush', cursive;
        }
        .gate {
            width: 100%;
        }
        .venue-info-heading {
            text-align: center;
            margin-top: 40px;
            font-size: 50px;
            font-family: 'Montserrat', serif;
        }
        .venue-info-details {
            font-size: 30px;
            font-family: 'Montserrat', serif;
        }
        /* Update the iframe styling */
        iframe {
            width: 100%; /* Adjust width */
            height: 500px; /* Set your preferred height */
            display: block; /* Ensure it takes the full width */
            margin: 0 auto; /* Center the iframe horizontally */
        }

        /* Center the map container */
        .col-md-12 iframe {
            margin: 0 auto; /* Center the iframe horizontally */
            display: block; /* Ensure it takes the full width */
            width: 90%; /* Adjust width if necessary */
        }
        .findus-heading {
            font-size: 100px;
            font-family: 'Alex Brush', cursive;
        }
        .findus-notice-heading {
            font-size: 30px;
        }
        .findus-notice {
            font-size: 30px;
        }
    }