body {
    margin: 0;
    color: #fff;
    font-family: 'Avenir', sans-serif;
}

:root {
    --bs-danger-rgb: 63, 13, 13;
    --logo-main-size: 30px;
    --bs-black-rgb: 17, 17, 17;
    --bs-warning-rgb: 153, 126, 15;
}

.btn-danger {
    color: #fff;
    background-color: rgb(var(--bs-danger-rgb));
    border-color: rgb(var(--bs-danger-rgb));
}

    .btn-danger:hover, .btn-danger:focus {
        background-color: rgb(var(--bs-danger-rgb));
        border-color: rgb(var(--bs-danger-rgb));
    }

main {
    margin-top: -10.8rem !important;
}

#announcement-header p {
    font-family: 'Avenir', sans-serif;
}

.premium-text {
    font-family: 'Oregon LDO Regular', sans-serif;
    font-size: var(--logo-main-size);
    letter-spacing: 2px;
    text-align: center;
    line-height: .9;
}

    .premium-text .exchange {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 13px;
        letter-spacing: 32px;
        margin-right: -1.6rem;
        display: none;
    }


.first-section {
    min-height: 100vh;
    padding-top: 10.8rem !important;
}

header, header.scrolled {
    background-color: rgba(17, 17, 17,1);
    transition: background-color 0.3s ease, color 0.3s ease;
}


    header nav ul {
        position: relative;
    }

        header nav ul::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 100%;
            height: 1px;
            background-color: rgba(255, 255, 255, 0.5);
            transform: translateX(-50%) scaleX(1);
            transform-origin: center;
            transition: transform 0.4s ease, background-color 0.4s ease;
        }

    header.scrolled nav ul::after {
        transform: translateX(-50%) scaleX(0);
        background-color: rgba(255, 255, 255, 0);
    }


.frosted-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    border-radius: .7rem;
}

.em-sm {
    font-size: 0.7rem;
}

.rounded-5 {
    border-radius: 5rem !important;
}
header nav ul li a.active, header nav ul li a:hover {
    color: #997E0F !important;
}
#announcement-header p {
    font-size: 9px;
}
@media (min-width: 992px) {
    :root {
        --logo-main-size: 42px;
    }

    .premium-text .exchange {
        display: block;
    }

    .nav {
        display: flex;
        justify-content: space-evenly; /* balanced gaps */
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%; /* key! */
    }


        .nav li a {
            color: white;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            text-decoration: none;
            padding: 5px 0;
            transition: color 0.3s ease;
            font-weight:600;
        }
    header {
        background-color: transparent;
    }
    #announcement-header p {
        font-size:13px;
    }
}


/*
         * Custom Footer Styles
         */

footer.main-footer {
    position: relative;
    background-color: #2c1810; /* Fallback color */
    background-size: cover;
    background-position: center;
    color: #fff;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

    /* Add a semi-transparent overlay to improve text readability */
    footer.main-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
/*        background-color: rgba(0, 0, 0, 0.5);*/
    }

/* Make sure all content is on top of the overlay */
.footer-container {
    position: relative;
    z-index: 2;
}

/* Reverted .premium-text styles to be simpler */
.premium-text {
    font-family: 'Oregon LDO Regular', sans-serif;
    font-size: var(--logo-main-size);
    letter-spacing: 2px;
    text-align: center;
    line-height: .9;
    margin-left: inherit;
}

    .premium-text .exchange {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 13px;
        letter-spacing: 32px;
        margin-right: -1.6rem;
        display: none;
    }

.footer-contact-info p {
    display: flex;
    align-items: flex-start; /* Align icon with the first line of text */
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.footer-contact-info .mdi {
    font-size: 1.5rem;
    margin-right: 15px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 3px;
}

/* Newsletter Section Styling with Frosted Glass Effect */
.newsletter-section {
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
    -webkit-backdrop-filter: blur(10px); /* Frosted glass effect for Safari */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px;
    border-radius: 8px; /* Rounded corners */
}

.newsletter-title {
    font-weight: bold;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.1rem; /* Example size */
}

.newsletter-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
    line-height: 1.5;
}

.email-input {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid transparent;
    color: #333;
    font-size: 0.9rem;
    padding: 12px 18px;
    flex: 1;
    border-radius: 4px; /* Rounded corners */
}

    .email-input::placeholder {
        color: #6c757d;
    }

    .email-input:focus {
        background: #fff;
        outline: none;
        box-shadow: none;
        border-color: rgba(255,255,255,0.5);
    }

.confirm-btn {
    background-color: rgb(var(--bs-danger-rgb));
    color: #fff;
    border: 1px solid rgba(255,255,255,0.5);
    padding: 12px 25px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-radius: 4px; /* Rounded corners */
    text-decoration: none;
}

    .confirm-btn:hover {
        background-color: rgba(var(--bs-danger-rgb),0.5);
        color: #fff;
    }

/* Footer Bottom Bar */
.footer-bottom {
    background-color: rgb(var(--bs-danger-rgb));
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
}

    .footer-bottom p {
        font-size: 0.85rem;
        color: rgba(255, 255, 255);
        margin: 0;
    }

/* Adjusted Social Icons styles */
.social-icons {
    text-align: right;
    margin-bottom: 1rem; /* Add space below the icons */
}

    .social-icons a {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.6rem;
        text-decoration: none;
        transition: color 0.3s ease;
        margin-left: 1rem; /* Space between icons */
    }

        .social-icons a:hover {
            color: #fff;
        }
@media (min-width: 992px) {
    .premium-text .exchange {
        display: block;
    }
    footer .premium-text {
        margin-left: -13.5rem;
    }
}
/* Responsive Adjustments */
@media (max-width: 991px) {
    .main-footer {
        text-align: center;
    }

    .social-icons {
        text-align: center;
        margin-bottom: 2rem;
    }

        .social-icons a {
            margin-left: 0.75rem;
            margin-right: 0.75rem;
        }

    .footer-contact-info p {
        justify-content: center;
        text-align: left; /* Keep text left-aligned within the centered block */
    }

    .premium-text {
        margin-left: 0; /* Center the logo text on mobile */
        padding-left: 0;
    }
}
        
        


/* Offcanvas style sidebar - FROM LEFT */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .mobile-sidebar.sidebar-open {
        pointer-events: auto;
        opacity: 1;
    }

    .mobile-sidebar .sidebar-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-sidebar.sidebar-open .sidebar-backdrop {
        opacity: 1;
    }

    .mobile-sidebar .sidebar-panel {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%; /* FULL WIDTH */
        background-color: rgba(17, 17, 17, 1);
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.7, 0, 0.3, 1); /* snappy and smooth */
        padding: 20px 25px;
        display: flex;
        flex-direction: column;
    }

    .mobile-sidebar.sidebar-open .sidebar-panel {
        transform: translateX(0);
    }

    .mobile-sidebar .close-btn {
        align-self: flex-end;
        font-size: 36px;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
        margin-bottom: 20px;
    }

    .mobile-sidebar .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

        .mobile-sidebar .sidebar-nav .nav-link {
            font-family: 'Oregon LDO Regular', serif;
            font-size: 18px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
            padding: 6px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

            .mobile-sidebar .sidebar-nav .nav-link:hover,
            .mobile-sidebar .sidebar-nav .nav-link.active {
                color: #fff;
                border-color: #d4af37;
            }

body.sidebar-open {
    overflow: hidden;
}




/*
 * FINAL & POLISHED Styles for the Wine Category Carousel Section
 */

.wine-category-section {
    padding: 6rem 0;
    position: relative;
    background-color: #1a1a1a;
    overflow: hidden;
}

    /* ... (background psuedo-element and container styles are unchanged) ... */
    .wine-category-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('../images/bg/cata.webp');
        background-size: cover;
        background-position: center;
        opacity: 0.15;
        z-index: 1;
    }

    .wine-category-section .container {
        position: relative;
        z-index: 2;
    }


/* --- RESPONSIVE CENTERING FIX --- */
/* By default on mobile, align slides to the start */
.wine-category-carousel .swiper-wrapper {
    align-items: flex-start;
}

/* Only center the slides on screens wide enough for multiple items (tablets and up) */
@media (min-width: 576px) {
    .wine-category-carousel .swiper-wrapper {
        justify-content: center;
    }
}


/* --- CUSTOM ARROW STYLES --- */
.swiper-button-next,
.swiper-button-prev {
    background-color: rgba(0, 0, 0, 0.4); /* Dark, semi-transparent background */
    border-radius: 50%; /* Make them circular */
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background-color: rgba(0, 0, 0, 0.7); /* Darken on hover */
    }

/* Position the arrows relative to the image part of the slide, not the whole slide with padding */
.swiper-button-next, .swiper-button-prev {
    top: 175px; /* Half the height of the .wine-item (350px / 2) */
    transform: translateY(-50%);
}

    /* Hide the ugly default Swiper arrow */
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }

    /* Style the new Material Design Icon inside the button */
    .swiper-button-next i,
    .swiper-button-prev i {
        color: white;
        font-size: 28px;
        line-height: 1;
    }


/* --- All other styles remain the same --- */

.wine-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 350px;
    width: 100%;
}

.item-content {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    height: 100%;
    width: 100%;
    position: relative;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0);
    transition: box-shadow 0.4s ease;
}

    .item-content img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        transition: transform 0.4s ease;
    }

.category-details-wrapper {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, bottom 0.4s ease;
    z-index: 10;
}

.swiper-slide {
    padding-bottom: 300px;
    transition: z-index 0s 0.2s;
}

    .swiper-slide:hover {
        z-index: 20 !important;
    }

        .swiper-slide:hover .item-content {
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
        }

        .swiper-slide:hover img {
            transform: scale(1.05);
        }

        .swiper-slide:hover .category-details-wrapper {
            opacity: 1;
            visibility: visible;
            bottom: -290px;
        }

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

    .category-details ul {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
    }

        .category-details ul::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.5);
        }

    .category-details li {
        position: relative;
        padding: 10px 0;
    }

    .category-details a {
        display: inline-block;
        padding: 8px 25px;
        border: 1px solid white;
        color: white;
        background-color: rgba(26, 26, 26, 0.8);
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 1px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

        .category-details a:hover {
            background-color: white;
            color: black;
        }

.bottle-icon {
    margin-top: 10px;
}