/* Font Settings */
@font-face {
    font-family: 'Next Southerland';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Next-Southerland-Serif-DEMO.ttf') format('truetype');
}

@font-face {
    font-family: 'House of the Montague';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/HouseOfMontagueDEMO.otf') format('opentype');
}

/*
Dark grays colors from previous format
#2c2c2c; Dark gray 
#1e1e1e;
#6c757d;  Neutral gray tone
#5a6268;  Slightly darker gray  
#333;
*/


/* Numbers are often rendered in a bold style by browsers because they use a default numeric font style,
 which may not match your custom font's style. This behavior depends on the font you are using and whether 
 it includes specific styles for numeric characters (e.g., lining or proportional figures).*/


/*Apply font-feature-settings (For OpenType Fonts): OpenType fonts often have specific settings for numbers.*/
body, p, h1, h2, h3, span, div {
    font-family: 'Next Southerland', serif;
    font-weight: 400;
    font-feature-settings: "lnum", "pnum"; /* Lining and proportional numbers */
}

/*Force the Font with a Specific Rule: Ensure the numbers inherit the same font-family as the surrounding text*/
* {
    font-family: 'Next Southerland', serif; /* Apply your custom font globally */
    font-weight: 400; /* Ensure consistent weight */
}

.numeric {
    font-family: 'Arial', sans-serif; /* Fallback font for numbers */
}



/* General Styles */
body {
    font-family: 'Next Southerland', serif;
    margin: 0;
    color: #fff;
    background: #1a1a1a;
    text-align: center;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Ensures the text stays above the image */
}

.hero .content {
    z-index: 1; /* Makes the heading text visible over the image */
    color: #fff;
    text-align: center;
}

.hero .content h1 {
    font-family: 'House of the Montague', serif;
    font-size: 4.5rem;
    margin-bottom: 10px;
}

.hero .content p {
    font-size: 2rem;
    margin: 5px 0;
}

.hero .tagline {
    font-size: 1.5rem;
    color: #f8f8f8;
    margin-top: 10px;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 60px 20px;
}

/* Invitation Section */
.invitation {
    background: #1a2a45;
    color: #fff;
    padding: 60px 20px;
    border-radius: 10px;
    margin: 20px auto;
}

/* Date & Countdown Section */
.date-countdown {
    position: relative;
    color: #000;
    padding: 60px 20px;
    border-radius: 10px;
    margin: 20px auto;
    text-align: center;
}

/* Itinerary Section */
.itinerary {
    background: #1a2a45;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    border-radius: 10px;
    margin: 20px auto;
}

/* Accommodation Section */
.accommodation {
    background: #121d32;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    border-radius: 10px;
    margin: 20px auto;
}

/* Dress Code Section */
.dress-code {
    background: #1f2b47;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    border-radius: 10px;
    margin: 20px auto;
}

/* Gift Table Section */
.gift-table {
    background: #121d32;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    border-radius: 10px;
    margin: 20px auto;
}

/* RSVP Section */
.rsvp {
    background: #2c3b5f;
    color: #fff;
    padding: 60px 20px;
    text-align: center;
    border-radius: 10px;
    margin: 20px auto;
}

/* Gallery Section */
.gallery {
    background: #fff;
    color: #000;
    padding: 60px 20px;
    text-align: center;
    border-radius: 10px;
    margin: 20px auto;
}

/* Divider Styling */
.divider {
    border: none;
    border-top: 2px solid #444;
    width: 80%;
    margin: 20px auto;
}


/* Subsections */

section {
    padding: 50px;
}

section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

section p {
    font-size: 1.5rem;
}

.invitation .row {
    display: flex;
    justify-content: center;
    gap: 2px; /* Further reduced gap between columns */
    margin-top: 20px;
}

.invitation .col {
    width: 25%; /* Slightly adjusted width to allow closer alignment */
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: center;
}

/* Monogram Styling */
.monogram {
    width: 500px; /* Adjust size as needed */
    margin-bottom: 5px;
}


/* Invitation Section */
.invitation {
    background: #1a2a45; /* Dark blue */
    color: #fff;
    padding: 40px;
    border-radius: 10px; /* Optional for rounded corners */
    margin: 20px auto;
}

/* Default styling for desktop */
/* Default styling for desktop */
.invitation .row {
    display: flex;
    justify-content: center;
    gap: 50px; /* Adjust spacing between columns */
    margin-top: 20px;
}

.invitation .col {
    font-size: 1rem; /* Default font size for desktop */
    line-height: 1.6; /* Space between names */
    text-align: center;
    white-space: nowrap; /* Prevents names from splitting into multiple lines */
}

/* Adjust for mobile screens */
/* Mobile layout: Stack parents' names in one column with grouping */
@media (max-width: 768px) {
    .invitation .row {
        display: flex;
        flex-direction: column; /* Stack all names in one column */
        align-items: center;
        gap: 20px; /* Space between name pairs */
    }

    .invitation .col {
        text-align: center !important; /* Ensure center alignment */
        font-size: 0.7rem !important; /* Force smaller font size */
        line-height: 1.8 !important; /* Adjust vertical spacing */
        width: auto; /* Prevent forcing full width */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .invitation p {
        font-size: 0.8rem !important; /* Ensure all text scales down */
    }
}






/* Date & Countdown Section */
/* Countdown Section */
.date-countdown {
    position: relative;
    color: #000; /* Change text color to black */
    padding: 100px 20px; /* Increase height with padding */
    border-radius: 10px;
    margin: 20px auto;
    text-align: center;
    overflow: hidden; /* Ensures the image doesn't overflow */
}

.date-countdown .countdown-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire section */
    z-index: -1; /* Places the image behind the text */
}

.date-countdown .wedding-date {
    font-size: 1.8rem; /* Font size for the date */
    margin: 10px 0;
}

.date-countdown .countdown h3 {
    font-size: 2rem; /* Font size for the countdown text */
}

.date-countdown .countdown #countdown-timer {
    font-size: 2rem; /* Larger font size for the countdown timer */
}

@media (max-width: 768px) {
    .date-countdown {
        padding: 50px 10px; /* Reduce padding for mobile */
    }

    .date-countdown .wedding-date {
        font-size: 1.0rem !important; /* Reduce the date text size */
    }

    .date-countdown .countdown h3 {
        font-size: 1.5rem !important; /* Reduce countdown text size */
    }

    .date-countdown .countdown #countdown-timer {
        font-size: 1.5rem !important; /* Reduce timer size */
    }
}



/* Remove the overlay by commenting or deleting the following block */
/*
.date-countdown .background-overlay {
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 20px;
    border-radius: 10px;
    position: relative;
}
*/

/* Section Images */
.section-image {
    width: 50%;
    max-width: 300px; /* Ensures images are consistently smaller */
    border-radius: 10px;
    margin: 20px auto;
    display: block;
}

.dress-code img {
    max-width: 300px; /* Ensures the Dress Code image is smaller */
    border-radius: 10px;
}

/* Itinerary Section */
:root {
    /* General Settings */
    --itinerary-background: #1a2a45; /* Background color for the section */
    --timeline-badge-size: 120px; /* Adjust the size of the icons */
    --timeline-panel-width: 50%; /* Width of the text box */
    --timeline-panel-padding: 5px; /* Increase padding for more height */
    --timeline-panel-line-height: 1.1; /* Adjust line spacing for better readability */
    --timeline-panel-min-height: 90px; /* Ensure minimum height for uniformity */
    --timeline-panel-text-size: 1rem; /* Font size for text inside the text box */
    --timeline-title-size: 1.2rem; /* Font size for the timeline titles */
    --timeline-date-size: 1.3rem; /* Font size for the timetable */
    --location-button-font-size: 1rem; /* Font size for the location button */
    --location-button-padding: 10px 20px; /* Padding for the location button */
    --location-button-radius: 5px; /* Border radius for the button */
    --itinerary-title-font-size: 1.6rem; /* Font size for October 4, 2025 */
    --itinerary-subtitle-font-size: 1.5rem; /* Font size for Plaza Hotel */
    --itinerary-line-spacing: 1.2; /* Line height for spacing */
    --itinerary-margin-bottom: 30px; /* Space below text */
    --itinerary-heading-font-size: 3rem; /* Adjust the size here */
}

.itinerary {
    background: var(--itinerary-background);
    color: #fff;
    text-align: center;
    padding: 40px;
    border-radius: 10px;
    margin: 20px auto;
}


.itinerary h2 {
    font-size: var(--itinerary-title-font-size);
    margin-bottom: var(--itinerary-margin-bottom);
    line-height: var(--itinerary-line-spacing);
    font-size: var(--itinerary-heading-font-size);
    margin-bottom: 20px;
    font-family: 'Next Southerland', serif;
    color: #fff;
}



.itinerary p {
    font-size: var(--itinerary-subtitle-font-size);
    margin-bottom: var(--itinerary-margin-bottom);
    line-height: var(--itinerary-line-spacing);
}



/* Location Button */
.location-button {
    display: inline-flex;
    align-items: center;
    padding: var(--location-button-padding);
    font-size: var(--location-button-font-size);
    background-color: #6c757d; /* Neutral gray tone */
    color: #fff;
    text-decoration: none;
    border-radius: var(--location-button-radius);
    transition: background-color 0.3s, transform 0.2s;
}

.location-button:hover {
    background-color: #5a6268; /* Slightly darker gray for hover */
    transform: scale(1.05); /* Slight zoom effect on hover */
}

.button-icon {
    font-size: 1.5rem; /* Adjust icon size */
    margin-right: 8px; /* Space between icon and text */
}

/* Timeline Styles */
.timeline {
    list-style: none;
    padding: 0;
    margin: 20px auto;
    max-width: 800px;
}

.timeline li {
    margin-bottom: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px; /* Consistent spacing between icon and box */
}

.timeline-inverted {
    flex-direction: row-reverse;
}

.timeline-badge {
    width: var(--timeline-badge-size);
    height: var(--timeline-badge-size);
    background-size: cover;
    border-radius: 50%;
    margin: 0;
}

.timeline-panel {
    background: #6e85a6;
    color: #fff;
    padding: var(--timeline-panel-padding); /* Controls internal spacing */
    border-radius: 10px;
    text-align: center;
    width: var(--timeline-panel-width);
    max-width: 600px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: var(--timeline-panel-text-size);
    line-height: var(--timeline-panel-line-height); /* Adds vertical spacing between lines */
    min-height: var(--timeline-panel-min-height); /* Ensures consistent height */
}


.timeline-heading {
    font-size: var(--timeline-title-size);
    margin-bottom: 10px;
}

.date {
    font-size: var(--timeline-date-size);
}


/* Accommodation Section */
:root {
    /* General Settings */
    --accommodation-background: #121d32; /* Background color of the section */
    --box-background: #2c3b5f; /* Background color of the text box */
    --text-color: #fff; /* Text color */
    --link-color: #fff; /* White color for the link */
    --link-hover-color: #ccc; /* Light grey on hover for the link */

    /* Spacing and Layout */
    --section-padding: 40px; /* Padding for the entire section */
    --container-gap: 30px; /* Gap between the image and text box */
    --box-padding: 20px; /* Padding inside the text box */
    --box-border-radius: 10px; /* Corner radius for the box */
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Box shadow */

    /* Image Settings */
    --image-width: 400px; /* Width of the image */
    --image-border-radius: 10px; /* Corner radius for the image */

    /* Font Sizes */
    --heading-font-size: 1.0rem; /* Font size for the section heading */
    --box-heading-font-size: 1.2rem; /* Font size for the box heading (Hotel name bigger) */
    --box-text-font-size: 1.5rem; /* Font size for the box text (smaller than Hotel name) */
    --box-details-font-size: 1rem; /* Font size for the text under the hotel name */
}

.accommodation {
    background: var(--accommodation-background);
    color: var(--text-color);
    text-align: center;
    padding: var(--section-padding);
}

.accommodation-title {
    font-size: 2.5rem; /* Adjust size here */
    margin-bottom: 20px; /* Space below the title */
    font-family: 'Next Southerland', serif; /* Ensure consistent font style */
}

.accommodation-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--container-gap);
    flex-wrap: wrap;
    margin-top: 20px;
}

.accommodation-image img {
    max-width: var(--image-width);
    border-radius: var(--image-border-radius);
    box-shadow: var(--box-shadow);
}

.accommodation-details {
    text-align: left;
    max-width: 400px;
    font-size: var(--box-details-font-size) !important;
}

.details-box {
    background: var(--box-background);
    padding: var(--box-padding);
    border-radius: var(--box-border-radius);
    box-shadow: var(--box-shadow);
}

.details-box h3 {
    font-size: var(--box-heading-font-size);
    margin-bottom: 10px;
    text-align: center; /* Centra el texto dentro del h3 */
    
}

.details-box h3 a {
    color: var(--link-color); /* Blanco para el enlace */
    text-decoration: none; /* Elimina subrayado */
}

.details-box p {
    font-size: var(--box-details-font-size) !important;  /* Added font size for p */
    margin: 10px 0;
    line-height: 1.6;
}

.details-box a {
    font-size: var(--box-details-font-size) !important;  /* Added font size for links */
    color: var(--link-color); /* White link color */
}


.details-box p a {
    color: var(--link-color); /* White link color */
    text-decoration: none;
}

.details-box p a:hover {
    text-decoration: underline;
    color: var(--link-hover-color); /* Light grey on hover */
}



/* Dress Code Section */
:root {
    --column-font-size: 1.2rem; /* Default font size for columns */
    --heading-font-size: 1.5rem; /* Default heading size in columns */
    --image-max-width: 400px; /* Default maximum width for the image */
}

.dress-code {
    background: #1f2b47; /* Dark blue background for contrast */
    color: #fff; /* White text for readability */
    text-align: center;
    padding: 40px;
}

.dress-code h2 {
    margin-bottom: 20px;
    font-size: 2rem;
}

.dress-code-container {
    display: flex;
    justify-content: center; /* Centers the columns horizontally */
    gap: 80px; /* Moderate space between columns */
    margin-bottom: 20px;
    max-width: 600px; /* Constrains overall container width */
    margin: 0 auto; /* Centers the container within the section */
}

.dress-code .column {
    flex: 0 0 auto; /* Prevents columns from stretching */
    width: auto; /* Shrinks to fit content */
    margin: 0; /* Removes any additional spacing */
    padding: 0; /* Ensures no internal padding */
    text-align: center; /* Centers text within each column */
    font-size: var(--column-font-size); /* Adjustable font size for columns */
}

.dress-code .column h3 {
    margin-bottom: 10px;
    font-size: var(--heading-font-size); /* Adjustable heading size */
    text-decoration: underline;
}

.dress-code .column p {
    margin: 5px 0; /* Consistent spacing between lines */
    font-size: 1rem; /* Smaller font size for the details under the headings */
}

/* Dress Code Image */
.dress-code .section-image {
    max-width: var(--image-max-width); /* Adjustable maximum width for the image */
    border-radius: 10px; /* Adds rounded corners */
    margin: 20px auto 0; /* Centers the image and adds spacing */
    display: block;
}


.divider {
    border: none;
    border-top: 2px solid #444;
    margin: 20px 0;
}

/* Gift Table Section */
.gift-table {
    padding: 40px;
    background: #121d32; /* Dark gray background for contrast */
    color: #fff;
    text-align: center;
}

.gift-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #233b67; /* Lighter gray for the box */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.gift-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-family: 'Next Southerland', serif;
}

.gift-container p {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 10px 0;
}

/* Style the Liverpool link to match your design */
.gift-container a {
    color: #fff; /* White color for the link */
    text-decoration: none; /* Removes underline */
}


/* Make text below Liverpool, Santander, and Regalo en Efectivo smaller */
.gift-container p:nth-of-type(6), /* "Mesa de Regalos" under Liverpool */
.gift-container p:nth-of-type(7), /* "Haz click aqui" under Liverpool */
.gift-container p:nth-of-type(9), /* "Titular" under Santander */
.gift-container p:nth-of-type(10), /* "Numero de Cuenta" under Santander */
.gift-container p:nth-of-type(11), /* "En la recepcion del evento" under Regalo en Efectivo */
.gift-container p:nth-of-type(13)  /* "Regalo en Efectivo" under the header */
{
    font-size: 1.0rem; /* Smaller font size for the descriptions below the headings */
    line-height: 1.6;
}

.divider {
    border: none;
    border-top: 2px solid #444;
    margin: 20px 0;
}


/* RSVP Section */
/* RSVP Section */
.rsvp {
    background: #2c3b5f; /* Dark Gray Background */
    color: #fff;
    padding: 40px;
    text-align: center;
    border-radius: 10px;
    margin: 20px auto;
}

/* Reduce the font size for the title */
.rsvp h2 {
    font-size: 2rem; /* Decrease from 2.5rem */
    margin-bottom: 15px; /* Reduce space below */
    color: #f5f5f5;
}

/* Reduce the size of the paragraph under the title */
.rsvp p {
    font-size: 1rem; /* Reduce font size */
    line-height: 1.4; /* Adjust spacing */
    margin-bottom: 15px; /* Reduce bottom margin */
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .rsvp h2 {
        font-size: 1.8rem; /* Even smaller on mobile */
    }

    .rsvp p {
        font-size: 0.9rem; /* Reduce paragraph text on mobile */
    }
}


.icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}


/* RSVP Ticket Icon */
.icon-wrapper .ticket-icon {
    font-size: 2.5rem !important; /* Forcefully increase size */
    color: #f5f5f5;
}


.divider {
    border: 1px solid #d6cfc5;
    width: 80%;
    margin: 20px auto;
}

/* Form Styling */
form {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #f5f5f5;
}

form input,
form select,
form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 5px;
    font-size: 1rem;
    background: #d6cfc5;
    color: #333;
}

form textarea {
    resize: none; /* Prevent resizing for better consistency */
}

form button {
    padding: 10px 20px;
    background: #121d32;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.3s;
}

form button:hover {
    background: #666;
}



/* Icons */
.icon-wrapper {
    margin: 20px auto;
    text-align: center;
}

.icon {
    width: 50px;
    height: 50px;
    fill: #fff; /* White color for the icon */
}

/* Gallery Section */
.gallery {
    background: #fff; /* White background for contrast */
    color: #000; /* Black text for readability */
    padding: 40px;
    text-align: center;
}

.gallery h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.gallery-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

/* Gallery Images */
.gallery-container img {
    width: 100%; /* Reduce the image size */
    /*max-width: 300px;  Ensure all images are the same size */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}


.gallery-container a {
    display: block;
    width: 30%; /* Ensure images are equally spaced */
}


.gallery-container img:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* 🌟 Mobile Responsive Fixes 🌟 */
@media (max-width: 768px) { 

    /* General Fixes */
    body {
        font-size: 1rem; /* Adjusts global text size */
    }

    section {
        padding: 30px 15px; /* Reduce padding for mobile */
    }

    /* Hero Section */
    .hero {
        height: 80vh; /* Reduce height */
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .hero .background-image {
        width: 100%;
        height: auto;
    }

    .hero .content img.monogram {
        width: 70%; /* Adjust monogram size */
    }

    .hero .content p {
        font-size: 1.8rem;
    }

    .hero .date {
        font-size: 1.5rem;
    }

    /* Countdown Section */
    .date-countdown {
        padding: 50px 10px; 
        text-align: center;
    }

    .date-countdown .countdown-bg {
        width: 100%;
        height: auto;
    }

    .date-countdown .wedding-date {
        font-size: 2rem;
    }

    .date-countdown .countdown h3 {
        font-size: 2.5rem; 
    }

    /* Itinerary Section */
    .itinerary {
        padding: 30px;
    }

    .timeline {
        padding: 0;
        max-width: 90%;
    }

    .timeline li {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .timeline-badge {
        width: 80px;
        height: 80px;
    }

    .timeline-panel {
        width: 90%;
        font-size: 0.9rem;
        padding: 15px;
    }

    /* Accommodation Section */
    .accommodation-container {
        flex-direction: column; /* Stack image & details vertically */
        gap: 20px;
    }

    .accommodation-image img {
        width: 90%;
    }

    .accommodation-details {
        text-align: center;
    }

    /* Dress Code Section */
    .dress-code-container {
        flex-direction: column;
        gap: 15px;
    }

    .dress-code .section-image {
        max-width: 80%;
    }

    /* Gift Table Section */
    .gift-container {
        padding: 20px;
    }

    .gift-container p {
        font-size: 1.2rem;
    }

    .icon-wrapper {
        margin: 10px 0;
    }

    .icon {
        width: 40px;
        height: 40px;
    }

    /* RSVP Section */
    .rsvp {
        padding: 30px;
    }

    form {
        width: 100%;
    }

    form input, form select, form textarea {
        font-size: 1rem;
        padding: 10px;
    }

    form button {
        font-size: 1rem;
    }

    /* Gallery Section */
    .gallery-container {
        flex-direction: column;
        gap: 15px;
    }

    .gallery-container a {
        width: 100%;
    }

    .gallery-container img {
        width: 100%;
    }

    /* Footer */
    .footer p {
        font-size: 0.9rem;
    }
}

/* HEADER FIX: Ensure full background image is displayed on mobile */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: url('../images/background.png') center/cover no-repeat;
}

.hero .background-image {
    display: none; /* Remove the <img> tag visibility since it's now a background */
}

/* COUNTDOWN FIX: Ensure full image is displayed */
.date-countdown {
    position: relative;
    color: #000; /* Change text color to black */
    padding: 100px 20px; /* Ensure proper spacing */
    border-radius: 10px;
    text-align: center;
    background: url('../images/countdown.png') center/cover no-repeat; /* Use background instead */
}

.date-countdown .countdown-bg {
    display: none; /* Remove the <img> tag visibility */
}

/* MOBILE FIX: Ensure full image is shown */
@media (max-width: 768px) {
    .hero {
        height: 60vh; /* Adjust for mobile screens */
        background-position: center;
    }

    .date-countdown {
        background-position: center;
        padding: 60px 10px;
    }
}