body {
    margin: 0;
    padding: 0;
}

.custom-bg {
    background-color: #b57059;
    padding: 15px 0;
    height: 76px;
    width: 100%;
}

@media (max-width: 768px) {
    .sie-navigations_1 {
        display: none;
    }
}

.announcement-header {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.announcement-header h1 {
    color: rgba(255, 255, 255, 1);
    line-height: 1.3;
    letter-spacing: 0.35em;
    font-size: 18px;
    text-transform: uppercase;
}
.submit-button {
    background-color: #667462;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}

.logo {
    border-style: none;
    width: 120px; /* Increase the width for a bigger logo */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure proper alignment */
    margin: 10px auto; /* Center the logo and add spacing */
}

.rsvp {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-left: 30px;
    width: 158px;
    height: 36px;
    letter-spacing: 0.48em;
    font-size: 16px;
    font-family: "Montserrat";
    font-weight: 700;
    font-style: normal;
    background-color: rgba(255, 255, 255, 1);
    border: 0px;
    color: #667462;
}
.button-link {
    text-decoration: none; /* Removes underline */
}

.button-link:hover {
    text-decoration: none; /* Ensures no underline on hover */
}

.rsvp button {
    background-color: rgba(255, 255, 255, 1);
    padding: 10px 20px;
    font-size: 16px;
    color: #b57059;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}
a.rsvp button {
    text-decoration: none;
}

.rsvp button:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* For devices with max-width 576px */
@media (max-width: 576px) {
    .announcement-header h1 {
        font-size: 14px;
        letter-spacing: 0.2em;
    }

    .rsvp button {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* Additional styles for devices with max-width 375px */
@media (max-width: 375px) {
    .announcement-header h1 {
        font-size: 12px; /* Smaller font size for narrow screens */
        letter-spacing: 0.15em; /* Slightly reduced spacing */
    }

    .rsvp button {
        font-size: 12px; /* Smaller font size for buttons */
        padding: 6px 12px; /* Compact padding for smaller buttons */
    }
}

.navbar {
    background-color: white;
    padding: 20px;
}

.navbar-brand {
    font-size: 2.5rem;
    font-weight: bold;
}

.navbar-text {
    font-size: 1rem;
    color: black;
}

.nav-link {
    margin: 5px;
}

.nav-link:hover {
    color: #b57059;
    /* Change color on hover */

    /* Slightly increase font size on hover */
    text-decoration: underline;
    /* Optional: Add underline on hover */
}

.btn-primary {
    background-color: #667462;
    background-color: #667462;
}

.btn-primary:hover {
    background-color: #667462;
    background-color: #667462;
}

.info {
    color: rgba(4, 4, 4, 1);
    line-height: 2;
    font-size: 14px;
    text-align: left;
    font-family: "Montserrat";
    font-weight: 400;
    font-style: normal;
}
/* Make the dropdown open on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

/* Ensure the dropdown only appears when hovering over the parent */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.lets-marry {
    color: #667462;
    text-align: left;
    font-family: "Libre Baskerville";
    text-transform: lowercase;
    line-height: 1.2;
    text-transform: lowercase;
    line-height: 1.2;
    letter-spacing: 0.1em;
    font-size: 30px;
    text-align: center;
    font-family: "Libre Baskerville";
    font-weight: 400;
    font-style: italic;
    text-align: left;
    margin-top: 5px;
}

.love {
    color: #667462;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 13px;
    text-align: left;
    font-family: "Montserrat";
    font-weight: 400;
    font-style: normal;
}

.office {
    color: rgba(4, 4, 4, 1);
    font-size: 15px;
    font-family: "Montserrat";
    font-weight: 600;
    font-style: normal;
}

.want,
.view {
    display: flex;
    /* Ensures they can align content inside */
    justify-content: center;
    /* Centers text horizontally */
    align-items: center;
    /* Centers text vertically */
    background-color: #667462;
    color: white;
    /* Optional: Set text color for better contrast */
    padding: 10px;
    /* Adds internal spacing */
    flex: 1;
    /* Ensures they take equal width */
    box-sizing: border-box;
    /* Ensures padding doesn't affect width */
    cursor: pointer;
    /* Optional: Adds a pointer cursor on hover */
}

.want:hover,
.view:hover {
    background-color: rgba(34, 56, 89, 1);
    /* Optional: Add hover effect */
}

.flex-container {
    display: flex;
    /* Enables flexbox for the parent */
    gap: 10px;
    /* Adds spacing between .want and .view */
    margin-top: 20px;
    /* Adds spacing from elements above */
}

.image {
    width: 540px;
    /* Specify the width with a unit */
    height: 540px;
    /* Specify the height with a unit */
    overflow: hidden;
    /* Ensures any part of the image outside the div is hidden */
    border-radius: inherit;
    /* Inherits the border-radius from parent */
    display: flex;
    /* Ensures centering works properly */
    justify-content: center;
    /* Centers the image horizontally */
    align-items: center;
    /* Centers the image vertically */
    margin-top: 20px;
}

.image img {
    width: 100%;
    /* Makes the image responsive to the div's width */
    height: 100%;
    /* Makes the image responsive to the div's height */
    object-fit: cover;
    /* Ensures the image covers the entire div without distortion */
    border-radius: inherit;
    /* Ensures the image inherits the div's rounded corners */
}

.background-image {
    background-image: url("download.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    height: 80vh;
    /* Ensures the background covers the full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    text-align: center;
}

.testimonial {
    font-size: 2rem;
    font-style: italic;
    color: #384f72;
    margin-bottom: 20px;
}

.read-more {
    color: #667462;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #667462;
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.read-more:hover {
    color: white;
}

.image-grid {
    display: grid;
    /* Enables grid layout */
    grid-template-columns: repeat(4, 1fr);
    /* Creates 4 equal columns */
    gap: 10px;
    /* Adds spacing between the images */
    width: 100%;
    margin-top: 20px;
    /* Ensures the grid takes up full width */
}

.image-item img {
    width: 100%;
    /* Ensures images fill the grid cell */
    height: auto;
    /* Maintains image aspect ratio */
    border-radius: 8px;
    /* Optional: Adds rounded corners to the images */
}

footer {
    height: 60vh;
    padding: 20px 0;
    /* Add some padding to the footer */
    background-color: #6e7158;
    margin-top: 40px;
    /* Optional: Light background color for the footer */
}

.row {
    display: flex;
    /* Use flexbox for the row layout */
    justify-content: space-between;

    /* Distribute the columns evenly */
}

.col-md-4 {
    padding: 10px;
    /* Adds padding around the columns */
    border-right: 1px solid #ddd;
    color: white;

    /* Adds a right border to each column */
}

.col-md-4:last-child {
    border-right: none;
    /* Remove the right border from the last column */
}

footer img {
    width: 100%;
    /* Make the image fill the column */
    max-width: 300px;
    /* Optional: Set a maximum width for the image to prevent it from growing too large */
    height: auto;
    /* Maintain the aspect ratio of the image */
    border-radius: 8px;
    /* Optional: Add rounded corners to the image */
    object-fit: contain;
    margin-top: 100px;
    /* Ensures the image fits within its container without stretching */
}

.footer-link {
    list-style-type: none;
    /* Removes default list styling */
    padding: 0;
    margin-top: 15px;
    line-height: 2;
}

.footer-link li {
    margin-bottom: 10px;
    /* Adds space between links */
}

.footer-link a {
    text-decoration: none;
    color: white;
    /* Sets the link color */
    transition: color 0.3s ease;
}

.footer-link a:hover {
    color: #007bff;
    /* Changes link color on hover */
}

/* Ensure the form and image containers take full width on smaller screens */
/* Ensure the form and image containers take full width on smaller screens */

.image {
    display: flex;
    justify-content: center;
    /* Centers the image horizontally */
    align-items: center;
    /* Centers the image vertically */
    width: 100%;
    /* Make sure the container takes up full width */
    height: auto;
    /* Allow height to adjust based on content */
}

.image img {
    margin-top: 20px;
    max-width: 100%;
    /* Ensure the image is responsive */
    height: auto;
    /* Maintain aspect ratio */
}
.btn-primary {
    background-color: #6e7158; /* Default background color */
    border-color: #6e7158; /* Ensure border matches */
    color: white; /* Optional: Set text color */
}

.btn-primary:hover {
    background-color: #5e654a; /* Slightly darker color on hover */
    border-color: #5e654a; /* Ensure border matches hover color */
}

.btn-primary:focus,
.btn-primary:active {
    background-color: #5e654a; /* Color on click */
    border-color: #5e654a; /* Ensure border remains consistent */
    color: white; /* Optional: Maintain text color */
    box-shadow: none; /* Remove default focus outline */
    outline: none; /* Remove outline */
}

.btn-primary:focus:not(:active),
.btn-primary:focus:active {
    background-color: #5e654a; /* Same as hover */
    border-color: #5e654a;
}

/* For devices with max-width 1024px */
@media (max-width: 1024px) {
    /* Adjust navbar brand font size */
    .navbar-brand {
        font-size: 2rem;
    }

    /* Adjust .rsvp button size */
    .rsvp button {
        font-size: 14px;
        padding: 8px 16px;
    }

    /* Adjust heading font sizes */
    .announcement-header h1 {
        font-size: 16px;
    }

    /* Adjust flex container for .want and .view buttons */
    .flex-container {
        gap: 15px;
    }

    /* Make image container responsive */
    .image {
        width: 100%;
        height: auto;
    }

    /* Image grid for 4 columns */
    .image-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
}

/* For devices with max-width 768px */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 2rem;
    }

    .announcement-header h1 {
        font-size: 14px;
    }

    .rsvp button {
        font-size: 14px;
    }

    /* Adjust flex container */
    .flex-container {
        flex-direction: column;
        gap: 10px;
    }

    /* Image grid for 2 columns */
    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

/* For devices with max-width 425px */
@media (max-width: 425px) {
    .navbar-brand {
        font-size: 1.8rem;
    }

    /* Adjust button and font size */
    .rsvp button {
        font-size: 13px;
        padding: 8px 14px;
    }

    .announcement-header h1 {
        font-size: 12px;
    }

    /* Image grid for 1 column */
    .image-grid {
        grid-template-columns: 1fr; /* 1 column */
    }

    /* Adjust flex container for mobile */
    .flex-container {
        flex-direction: column;
        gap: 10px;
    }

    .image {
        width: 100%;
        height: auto;
    }
}

/* For devices with max-width 375px */
@media (max-width: 375px) {
    .navbar-brand {
        font-size: 1.5rem;
    }

    /* Adjust button and font size */
    .rsvp button {
        font-size: 12px;
        padding: 6px 12px;
    }

    .announcement-header h1 {
        font-size: 10px;
    }

    .image {
        width: 100%;
        height: auto;
    }

    .image-grid {
        grid-template-columns: 1fr; /* 1 column */
    }
}

/* For devices with max-width 600px */
@media (max-width: 600px) {
    .navbar-brand {
        font-size: 1.8rem;
    }

    .announcement-header h1 {
        font-size: 14px;
    }

    .rsvp button {
        font-size: 14px;
        padding: 8px 16px;
    }

    .image-grid {
        grid-template-columns: 1fr; /* 1 column */
    }

    .flex-container {
        flex-direction: column;
        gap: 10px;
    }

    /* Optional adjustments for other sections */
    .lets-marry {
        font-size: 25px;
    }

    .love {
        font-size: 12px;
    }

    .office {
        font-size: 13px;
    }
}

/* For devices with max-width 374px */
@media (max-width: 374px) {
    .navbar-brand {
        font-size: 1.4rem; /* Slightly smaller font size */
    }

    .announcement-header h1 {
        font-size: 10px; /* Smaller font size for tight screens */
        letter-spacing: 0.1em; /* Reduce spacing for better fit */
    }

    .rsvp button {
        font-size: 12px; /* Smaller font size */
        padding: 6px 12px; /* Reduced padding */
    }

    /* Adjust the layout for image grids */
    .image-grid {
        grid-template-columns: 1fr; /* 1 column for small screens */
    }

    .image {
        width: 100%; /* Ensure image container is responsive */
        height: auto; /* Maintain aspect ratio */
    }

    /* Adjust text and button sizes for mobile */
    .lets-marry {
        font-size: 20px; /* Smaller font size for narrow screens */
    }

    .love {
        font-size: 11px; /* Smaller font size for narrow screens */
    }

    .office {
        font-size: 12px; /* Adjust font size */
    }

    .flex-container {
        flex-direction: column; /* Stack elements vertically */
        gap: 8px; /* Adjust spacing between stacked items */
    }

    /* Optional: Adjust padding and margins for containers */
    .rsvp {
        margin-left: 15px; /* Reduced left margin */
        margin-top: 10px; /* Slightly reduced margin-top */
    }

    .info {
        font-size: 12px; /* Smaller font size for better readability */
        line-height: 1.5; /* Slightly reduced line height */
    }

    .btn-primary {
        font-size: 12px; /* Smaller button font */
        padding: 8px 14px; /* Adjust button size for smaller screens */
    }

    .footer-link li {
        font-size: 12px; /* Smaller font size for footer links */
    }

    .footer-link a {
        font-size: 12px; /* Smaller link font size */
    }
}

/* For devices with screen widths between 375px and 380px */
@media (min-width: 375px) and (max-width: 380px) {
    .navbar-brand {
        font-size: 1.5rem; /* Adjust font size for slightly wider screens */
    }

    .announcement-header h1 {
        font-size: 12px; /* Adjust font size */
        letter-spacing: 0.2em; /* Slightly reduce letter-spacing */
    }

    .rsvp button {
        font-size: 14px; /* Adjust font size for button */
        padding: 8px 14px; /* Adjust padding for button */
    }

    .lets-marry {
        font-size: 24px; /* Adjust the font size for a better fit */
    }

    .love {
        font-size: 13px; /* Adjust font size */
    }

    .office {
        font-size: 14px; /* Adjust font size */
    }

    .flex-container {
        flex-direction: row; /* Ensure items are displayed horizontally */
        gap: 10px; /* Adjust gap between items */
    }

    .image-grid {
        grid-template-columns: repeat(
            2,
            1fr
        ); /* 2 columns for devices in this range */
    }

    .image {
        width: 100%;
        height: auto; /* Ensure images maintain aspect ratio */
    }

    .info {
        font-size: 13px; /* Adjust text size */
        line-height: 1.6; /* Adjust line height */
    }

    .footer-link li {
        font-size: 13px; /* Adjust size of footer links */
    }

    .footer-link a {
        font-size: 13px; /* Adjust link font size */
    }
}