﻿    body {
        font-family: 'Poppins', sans-serif;
    }

    /* HERO */
    .hero-section {
        position: relative;
        height: 80vh;
        overflow: hidden;
    }

    .hero-img {
        height: 80vh;
        object-fit: cover; /* FIXED */
    }

    .hero-text {
        background-color: rgba(34, 34, 34, 0.57); /* black with 40% opacity */
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 8%;
        transform: translateY(-50%);
        color: white;
        max-width: 500px;
    }

        .hero-text h2 {
            color: white;
            /*font-size: 48px;*/
            font-weight: 700;
        }

        .hero-text p {
            font-size: 18px;
        }

    /* PRODUCT GRID */
    .product-card img {
        width: 620px;
        border-radius: 10px;
        transition: 0.3s;
    }

    /*.product-card:hover img {
        transform: scale(1.05);
    }*/

    .product-card h5 {
        margin-top: 15px;
        font-weight: 600;
    }

    /* GENERAL */
    .section-title {
        font-weight: 700;
        margin-bottom: 30px;
    }

    img {
        transition: 0.3s ease;
    }

    .btn-dark {
        background-color: #000;
        border: none;
        transition: 0.3s;
    }

        .btn-dark:hover {
            background-color: #333;
            transform: translateY(-2px);
        }

    .hero-section {
        position: relative;
        height: 80vh;
        overflow: hidden;
    }

    .hero-img {
        height: 80vh;
        object-fit: contain;
    }

    /* DARK OVERLAY */
    .hero-section::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        /*background: rgba(0,0,0,0.4);*/
        top: 0;
        left: 0;
        z-index: 1;
    }

    /* TEXT */
        .hero-text {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 8%;
        transform: translateY(-50%);
        color: white;
        max-width: 500px;
    }

    @media (max-width: 768px) {

        .product-card img{
            width:100%;
            max-width:450px;
            border-radius: 10px;
            transition: 0.3s;
        }

        .hero-text{
        left:5%;
        right:5%;
        max-width:none;
        padding:18px;
    }

    .hero-text h2{
        font-size:32px;
    }

    .hero-text p{
        font-size:16px;
    }

    .hero-section,
    .hero-img{
        height:60vh;
    }
    }

    .filter-btn {
        padding: 10px 20px;
        margin: 5px;
        border: 1px solid #000;
        background: white;
        cursor: pointer;
        transition: 0.3s;
        border-radius: 25px;
    }

        .filter-btn:hover,
        .filter-btn.active {
            background: #000;
            color: #fff;
        }

    .category-card {
        border: 1px solid #ddd;
        padding: 30px;
        cursor: pointer;
        transition: 0.3s;
        border-radius: 10px;
    }

        .category-card:hover {
            background: #000;
            color: #fff;
        }

    .product-section {
        display: none;
        padding: 40px 0;
    }

        .product-section h3 {
            text-align: center;
            margin-bottom: 30px;
        }

    .product-section,
    .size-section {
        display: none;
    }

    /* SECTION */
    .category-section {
        padding: 80px 20px;
        background: #f8f9fb;
    }

    /* TITLE */
    .section-title {
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #111;
    }

    .section-subtitle {
        color: #666;
        margin-bottom: 50px;
        font-size: 18px;
    }

    /* BUTTON AREA */
    .category-buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

        /* CATEGORY BUTTON */
        .category-buttons button {
            border: none;
            background: white;
            padding: 16px 30px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            transition: 0.3s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            cursor: pointer;
        }

            /* HOVER */
            .category-buttons button:hover {
                background: #111;
                color: white;
                transform: translateY(-3px);
            }

    /* PREVIEW CARD */
    .category-preview {
        max-width: 800px;
        margin: 60px auto 0;
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        padding: 30px;
        text-align: center;
        animation: fadeIn 0.4s ease;
    }

    /* IMAGE */
    #previewImage {
        border-radius: 15px;
        max-height: 500px;
        object-fit: cover;
    }

    /* TITLE */
    #previewTitle {
        margin-top: 25px;
        font-size: 34px;
        font-weight: 700;
        color: #111;
    }

    /* BUTTON */
    .category-preview .btn-dark {
        margin-top: 20px;
        padding: 14px 35px;
        border-radius: 40px;
        font-size: 16px;
        font-weight: 600;
        transition: 0.3s;
    }

        .category-preview .btn-dark:hover {
            transform: translateY(-2px);
        }

    /* ANIMATION */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .luxury-section{
    padding:80px 0;
    position:relative;
}

.luxury-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    padding:40px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.luxury-img{
    overflow:hidden;
    border-radius:24px;
}

.luxury-img img{
    width:100%;
    transition:.5s;
    border-radius:24px;
}

.luxury-img:hover img{
    transform:scale(1.05);
}

.luxury-content{
    padding:20px;
}

.luxury-heading{
    letter-spacing:3px;
    font-size:13px;
    font-weight:700;
    color:#b8892d;
    display:block;
    margin-bottom:15px;
}

.luxury-content h3{
    font-size:42px;
    font-weight:700;
    margin-bottom:25px;
    color:#111;
}

.luxury-content p{
    font-size:17px;
    line-height:1.9;
    color:#666;
}

.luxury-tags{
    margin-top:30px;
}

.luxury-badge{
    background:#111;
    color:#fff;
    padding:12px 18px;
    border-radius:40px;
    margin-right:10px;
    font-weight:500;
    font-size:14px;
}
.hero-img{
    width:100%;
    height:80vh;
    object-fit:cover;
}

@media(max-width:768px){

    .hero-img{
        height:65vh;
    }
}

/* LUXURY SECTION */
.luxury-section{
    margin-bottom:60px;
}

/* CARD */
.luxury-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(0,0,0,0.08);
    transition:0.4s ease;
}

/*.luxury-card:hover{
    transform:translateY(-5px);
}*/

/* IMAGE */
.feature-img{
    height:100%;
    overflow:hidden;
}

.luxury-image{
    width:100%;
    height:500px;
    object-fit:cover;
    transition:0.5s ease;
}

.luxury-card:hover .luxury-image{
    transform:scale(1.05);
}

/* CONTENT */
.luxury-content{
    padding:50px;
}

.luxury-heading{
    font-size:14px;
    letter-spacing:2px;
    color:#888;
    margin-bottom:15px;
    font-weight:600;
}

.luxury-content h3{
    font-size:36px;
    font-weight:700;
    margin-bottom:20px;
    color:#111;
}

.luxury-content p{
    font-size:17px;
    line-height:1.8;
    color:#666;
    margin-bottom:18px;
}

/* BADGES */
.luxury-tags{
    margin-top:25px;
}

.luxury-badge{
    background:#111;
    color:#fff;
    padding:10px 18px;
    border-radius:30px;
    font-size:14px;
    margin-right:10px;
    margin-bottom:10px;
    font-weight:500;
}

/* MOBILE */
@media(max-width:991px){

    .luxury-content{
        padding:35px 25px;
    }

    .luxury-content h3{
        font-size:28px;
    }

    .luxury-image{
        height:320px;
    }

}