html {
    scroll-behavior: smooth; /* Smooth scrolling */
}

body {
    scroll-padding-top: 100px; /* Adjust this value to match the height of your navbar */
}

.landing-page {
    height: 100vh; /* Full viewport height */
    background-image: url('/images/AM2.jpg'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Keeps the background image fixed as the page scrolls */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    position: relative;
}

    /* Overlay for better text readability */
    .landing-page::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Dark overlay */
        z-index: 1;
    }

/* Content container */
.landing-content {
    z-index: 2; /* Above the overlay */
}

/* Ensure mobile compatibility */
@media (max-width: 768px) {
    .landing-page {
        background-attachment: scroll; /* Disable fixed attachment for mobile */
    }
}

/* Countdown Timer */
#countdown {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    #countdown {
        font-size: 2.5rem;
    }

    h1 {
        font-size: 1.8rem;
    }
}


#image-container {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 120px;
    height: 88px;
    overflow: hidden;
    z-index: 1000;
}

#main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

@media screen and (max-width: 768px) {
    #image-container {
        /*width: 120px;
        height: 88px;*/

        display: none;
    }
}

@media screen and (max-width: 480px) {
    #image-container {
        /*width: 120px;
        height: 88px;*/

        display: none;
    }
}


.underlinemain {
    text-align: center; /* Center the content */
    margin-top: 10px; /* Add spacing above the underline */
}

    .underlinemain::after {
        content: "♥ ♥ ♥"; /* Add hearts in the middle */
        display: inline-block;
        margin: 5px auto; /* Center the underline */
        width: 100%; /* Full width for flexibility */
        height: 2px;
        background: linear-gradient(to right, silver, #6786A3, silver); /* Line styling */
        font-size: 12px; /* Size of the hearts */
        text-align: center;
        color: red; /* Change heart color to red */
        line-height: 1.5; /* Align hearts with the line */
    }



.sectionWithBackground {
    position: relative;
    background-image: url('/images/AM3.jpg'); /* Replace with your image path */
    background-size: cover; /* Ensure the image covers the entire container */
    background-position: center; /* Center the image */
    background-attachment: fixed; /* Keeps the background image fixed as the user scrolls */
    height: 100vh; /* Full viewport height */
    width: 100%; /* Full width */
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}

.sectionWithBackground-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
}

.sectionWithBackground-content {
    position: relative;
    z-index: 1; /* Ensures text is above the overlay */
    text-align: center;
    color: white; /* White text */
    padding: 20px; /* Add padding for spacing */
}


/* Navbar styling */
.navbar {
    height: 100px; /* Set navbar height */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background color and text color */
    border-bottom: 3px solid transparent; /* Create space for the gradient border */
    border-image: linear-gradient(to right, silver 40%, /* Start of the silver segment */
    #a9b8c9 50%, /* Intermediate color for a smoother blend */
    #6786A3 60%, /* Start of the blue */
    #6786A3 100% /* End of the blue */
    ); /* Adjusted gradient stops for smooth transition */
    border-image-slice: 1; /* Ensure the gradient fully applies to the border */
}

    /* Default state for .container-fluid (directly under the navbar) */
    .container-fluid-nav {
        background-color: rgba(255, 255, 255, 0.6); /* Transparent white background at the top */
        transition: background-color 0.3s ease; /* Smooth transition */
    }

        /* When scrolling, make the background transparent black */
        .container-fluid-nav.scrolled {
            background-color: rgba(0, 0, 0, 0.4); /* Transparent black background */
        }

/* Media query for mobile devices */
@media (max-width: 767px) {
    /* Solid background for mobile */
    .container-fluid-nav {
        background-color: rgba(255, 255, 255, 1) !important; /* Solid white on mobile */
    }

        /* When scrolling on mobile, solid black background */
        .container-fluid-nav.scrolled {
            background-color: rgba(0, 0, 0, 1) !important; /* Solid black on mobile */
        }
}



    /* Navbar with white background at the top and black text */
    .navbar.white-bg {
        background-color: rgba(255, 255, 255, 0.6) !important;
        color: black;
    }

    /* Navbar with transparent black background (30% opacity) and white text when scrolling */
    .navbar.transparent-bg {
        background-color: rgba(0, 0, 0, 0.4) !important; /* 30% transparent black */
        color: white;
    }

/* Media query for mobile devices */
@media (max-width: 767px) {
    .navbar.white-bg {
        background-color: rgba(255, 255, 255, 1) !important;
        color: black;
    }

    /* Navbar with transparent black background (30% opacity) and white text when scrolling */
    .navbar.transparent-bg {
        background-color: rgba(0, 0, 0, 1) !important; /* 30% transparent black */
        color: white;
    }
}

/* Adjust navbar brand to be an image with max height of 100px */
.navbar-brand img {
    height: 100px; /* Set image height to 100px */
    width: auto; /* Maintain aspect ratio */
}

/* Media query for mobile devices */
@media (max-width: 767px) {
    .navbar-brand img {
        height: 60px; /* Set image height to 100px */
        width: auto; /* Maintain aspect ratio */
    }
}

/* Ensure proper styling for links */
.navbar-nav .nav-link {
    color: inherit; /* Maintain consistent color for links */
    font-size: 22px;
}

.navbar-toggler-icon {
    background-color: black; /* Ensure the hamburger icon is visible */
}

.nav-link.active {
    font-weight: bold;
    color: #6786A3 !important; /* Customize this color to match your design */
    position: relative; /* Needed to position the text-shadow */
    font-size: 22px; /* Optional: Set your preferred font size */
    /*text-decoration: underline;*/ /* Optional: Underline the active link */
}

.nav-link.active {
    text-shadow: 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black; /* Adjust the values for the desired thickness */
}

/* Adjustments for mobile */
/*@media (max-width: 768px) {
    .navbar {
        padding-left: 10px;*/ /* Add a little padding on mobile */
        /*padding-right: 10px;*/ /* Add padding on mobile */
    /*}*/

        /*.navbar.white-bg .navbar-nav .nav-link {
            color: black;*/ /* Ensure text is visible on white background */
        /*}*/
/*}*/


/* Loading screen styles */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

    /* Center the loading GIF */
    #loading-screen img {
        width: 60px; /* You can change the size of the gif */
        height: auto;
    }

/* Content area styles (hidden until page is loaded) */
.hidden-content {
    display: none;
}


.wedding-section-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    width: 100%;
    
}

/* Unique styles for the schedule container */
.wedding-schedule-container {
    position: relative;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
    padding: 20px;
    text-align: center;
    border: 3px solid transparent; /* Base border */
    border-image: linear-gradient(45deg, silver, #6786A3); /* Gradient border */
    border-image-slice: 1; /* Ensure the gradient is applied fully */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
}

    /* Top and bottom border images */
    .wedding-schedule-container::before,
    .wedding-schedule-container::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 100px; /* Adjust based on your border image's height */
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 6;
    }

    .wedding-schedule-container::before {
        top: -100px; /* Position above the container */
        background-image: url('/images/bordtop.png'); /* Replace with your top border image */
    }

  

/* Unique styles for the header */
.wedding-schedule-header {
    font-family: 'Times New Roman', Times, serif;
    color: #333;
}

/* Unique styles for the list */
.wedding-schedule-list {
    padding: 0;
    margin: 0;
}

.wedding-schedule-item {
    display: flex;
    flex-direction: column; /* Align time and event vertically */
    gap: 5px; /* Add space between time and event */
    font-family: Arial, sans-serif;
    color: #555;
}

.wedding-schedule-time {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
}

.wedding-schedule-event {
    font-size: 1rem;
    font-style: italic;
}


#TheVenue {
    padding-top: 100px; /* Optional: Creates extra padding within the section to avoid overlap with the navbar */
    margin-top: -100px; /* Offset the space created by padding */
}

#OurStory {
    padding-top: 100px; /* Optional: Creates extra padding within the section to avoid overlap with the navbar */
    margin-top: -100px; /* Offset the space created by padding */
}
#Schedule {
    padding-top: 100px; /* Optional: Creates extra padding within the section to avoid overlap with the navbar */
    margin-top: -100px; /* Offset the space created by padding */
}
#GiftRegistry {
    padding-top: 100px; /* Optional: Creates extra padding within the section to avoid overlap with the navbar */
    margin-top: -100px; /* Offset the space created by padding */
}

.custom-btn {
    background-color: #6786A3;
    color: white;
    border: 1px solid #6786A3;
}

    .custom-btn:hover {
        background-color: #567085; /* Darker shade for hover effect */
        border-color: #567085;
    }


/*Car*/

/* Darken background */
.carousel-item {
    position: relative;
    background: #000; /* Fallback color */
    overflow: hidden;
}

    .carousel-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Adjust opacity for darker effect */
        z-index: 1;
    }

/* Center and adjust image */
.carousel-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Ensure it fills the parent container */
}

.carousel-image {
    object-fit: contain; /* Keeps aspect ratio */
    max-height: 100%; /* Ensure it doesn't stretch vertically */
    max-width: 100%; /* Ensure it doesn't stretch horizontally */
    position: relative;
    z-index: 2; /* Ensures it appears above the darkened background */
}

/* Enhance arrow visibility */
.custom-control-icon {
    background-color: rgba(255, 255, 255, 0.8); /* White with transparency */
    border-radius: 50%; /* Circular background */
    padding: 10px; /* Increase clickable area */
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 3rem; /* Increase icon size */
    height: 3rem; /* Increase icon size */
}


.lora-text {
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.wedding-registry {
    text-align: center;
    border: 2px solid #ccc; /* Light gray border */
    border-radius: 15px; /* Rounded corners */
    padding: 20px;
    margin: 20px auto;
    max-width: 600px; /* Set a reasonable width */
    background-color: #f9f9f9; /* Subtle background color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a soft shadow */
}

    .wedding-registry h2 {
        font-size: 2rem;
        margin-bottom: 15px;
        color: #555; /* Wedding-themed soft gray color */
    }

    .wedding-registry p {
        font-size: 1rem;
        margin: 10px 0;
        color: #333; /* Slightly darker text color */
    }

.contact-card {
    /*border: 2px solid #ccc;*/ /* Add a subtle border */
    /*border-radius: 10px;*/ /* Rounded edges */
    padding: 20px; /* Add padding inside the div */
    /*background-color: #f9f9f9;*/ /* Light background color */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/ /* Soft shadow for elegance */
    max-width: 600px; /* Set a fixed width for consistent design */
}

    .contact-card h3 {
        color: #333; /* Darker color for heading */
        font-size: 1.75rem; /* Adjust font size */
        margin-bottom: 20px; /* Space below the heading */
    }

    .contact-card p {
        color: #555; /* Softer color for the text */
        font-size: 1rem; /* Standard font size for readability */
    }

    .contact-card a {
        color: #007bff; /* Bootstrap primary color for links */
        text-decoration: none; /* Remove underline for links */
    }

        .contact-card a:hover {
            text-decoration: underline; /* Add underline on hover for links */
        }


.gallery-item {
    position: relative;
    overflow: hidden; /* Crop overflowing parts of the image */
    height: 200px; /* Uniform height for all gallery items */
}

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures images fill their container without distortion */
        transition: transform 0.3s ease; /* Smooth zoom effect */
    }

        .gallery-item img:hover {
            transform: scale(1.05); /* Subtle zoom on hover */
        }

.modal-body img {
    max-height: 80vh; /* Limit modal image height for responsiveness */
    width: auto; /* Maintain aspect ratio */
}


.toggler-light {
    filter: invert(1); /* Inverts the color to white */
}

.toggler-dark {
    filter: invert(0); /* Default Bootstrap light style */
}