/* Custom styles for desktop navigation */

@media (min-width: 992px) {

    /* Make the dropdown wider to accommodate the items in a row */
    .desktopNavSubnav {
        min-width: 1100px;
        transform: translateX(0%);
    }

    /* Adjust the content container */
    .desktopNavSubnav__content.-col-3 {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
        padding: 30px;
        padding-bottom: 25px !important;
    }

    /* Remove the inner div that was wrapping the items */
    .desktopNavSubnav__content.-col-3>div {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    /* Style each navigation item as a card */
    .desktopNavSubnav__item {
        flex: 1;
        text-align: center;
        padding: 15px;
        transition: all 0.3s ease;
        border-radius: 8px;
    }

    .desktopNavSubnav__item:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Add image container above the link - luxury styling */
    .desktopNavSubnav__item-image {

        height: 200px;
        /* Even taller for more impact */
        margin-bottom: 15px;
        overflow: hidden;
        border-radius: 12px;
        /* More rounded corners */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        /* Deeper shadow for luxury feel */
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.1);
        /* Subtle border */
    }

    /* Add overlay effect with gold accent */
    .desktopNavSubnav__item-image::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0) 40%,
                rgba(230, 198, 135, 0.2) 70%,
                /* Gold tint in middle */
                rgba(0, 0, 0, 0.6) 100%);
        opacity: 0.8;
        transition: all 0.4s ease;
    }

    /* Add subtle shine effect on hover */
    .desktopNavSubnav__item-image::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 20%;
        height: 200%;
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(30deg);
        transition: all 0.6s ease;
        z-index: 1;
    }

    .desktopNavSubnav__item:hover .desktopNavSubnav__item-image::before {
        left: 130%;
        /* Move the shine across the image */
    }

    .desktopNavSubnav__item:hover .desktopNavSubnav__item-image::after {
        opacity: 0.5;
        /* Lighter overlay on hover */
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0) 40%,
                rgba(230, 198, 135, 0.3) 70%,
                rgba(0, 0, 0, 0.5) 100%);
    }

    .desktopNavSubnav__item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s ease;
    }

    .desktopNavSubnav__item:hover .desktopNavSubnav__item-image img {
        transform: scale(1.1);
        /* More dramatic zoom effect */
    }

    /* Style the links - luxury styling */
    .desktopNavSubnav__item a {
        display: block;
        font-weight: 600;
        font-size: 17px;
        padding: 12px 0;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        position: relative;
    }

    /* Add elegant underline effect */
    .desktopNavSubnav__item a::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 50%;
        width: 0;
        height: 1px;
        background-color: #e6c687;
        /* Gold underline */
        transform: translateX(-50%);
        transition: width 0.4s ease;
    }

    .desktopNavSubnav__item a:hover {
        color: #e6c687;
        /* Gold/accent color on hover */
    }

    .desktopNavSubnav__item a:hover::after {
        width: 40%;
        /* Expand underline on hover */
    }

    /* Add subtle animation for the entire item */
    .desktopNavSubnav__item {
        transform: translateY(0);
        transition: all 0.4s ease;
        padding: 15px;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0);
    }

    .desktopNavSubnav__item:hover {
        transform: translateY(-5px);
        /* Slight lift effect on hover */
        background: rgba(0, 0, 0, 0.2);
        /* Subtle background on hover */
    }

    .desktopNavSubnav__item:hover {
        transform: translateY(-5px);
        background-color: rgba(255, 255, 255, 0.05);
        /* Lighter background */
    }
}