@charset "UTF-8";

/* ==========================================================================
   Reset & Global
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
}
.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}
/* ==========================================================================
   Hero Crossfade Slider
   ========================================================================== */
.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* ==========================================================================
   Navigation Dropdown & Scrollbar Utility
   ========================================================================== */
.dropdown:hover .dropdown-menu {
    display: block;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==========================================================================
   Image Hover Animations
   ========================================================================== */
.image-zoom-hover img {
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.image-zoom-hover:hover img {
    transform: scale(1.08);
}

.about-zoom-out img {
    transition: transform 0.8s ease;
    transform: scale(1.08);
}

.about-zoom-out:hover img {
    transform: scale(1.0);
}

/* ==========================================================================
   Category Circle Boxes (Fixed Top Border Clipping on Hover)
   ========================================================================== */
.category-circle-box {
    transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.4s ease;
    border-width: 1px;
    border-style: solid;
    position: relative;
    z-index: 1;
}

.category-circle-box:hover {
    transform: translateY(-6px);
    border-color: #C5A880 !important;
    box-shadow: 0 18px 30px -8px rgba(197, 168, 128, 0.35);
    z-index: 10;
}

/* ==========================================================================
   Testimonial Cards & Font Style
   ========================================================================== */
.testimonial-box {
    transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.4s ease;
    border-width: 1px;
    border-style: solid;
}

.testimonial-box:hover {
    transform: translateY(-6px);
    border-color: #C5A880 !important;
    box-shadow: 0 20px 30px -10px rgba(197, 168, 128, 0.35);
}

.testimonial-quote {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Product Lookbook Cards
   ========================================================================== */
.product-card {
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover {
    transform: translateY(-8px);
    background-color: #1A1A1A !important;
    border-color: #C5A880 !important;
    box-shadow: 0 22px 35px -8px rgba(0, 0, 0, 0.5), 0 0 20px -3px rgba(197, 168, 128, 0.25);
}

/* ==========================================================================
   Top Header Social Icons (Static Border + Hover State)
   ========================================================================== */
.header-social-icon {
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #404040;
    background-color: rgba(255, 255, 255, 0.05);
}

.header-social-icon:hover {
    background-color: #C5A880;
    border-color: #C5A880;
    color: #1A1A1A !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   Footer Links Letter Spacing Expand
   ========================================================================== */
.footer-hover-link {
    transition: letter-spacing 0.35s ease, color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.footer-hover-link:hover {
    color: #C5A880 !important;
    letter-spacing: 0.25em !important;
}

/* ==========================================================================
   Feature Boxes & Highlights (Matching Dealing Section Hover)
   ========================================================================== */
.feature-box {
    transition: all 0.45s cubic-bezier(0.2, 1, 0.3, 1);
}

.feature-box:hover {
    transform: translateY(-5px);
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
    border-color: #C5A880 !important;
    box-shadow: 0 16px 28px -6px rgba(0, 0, 0, 0.45);
}

.feature-box:hover h3,
.feature-box:hover h4 {
    color: #FFFFFF !important;
}

.feature-box:hover p {
    color: #D4D4D4 !important;
}

.feature-box:hover .feature-icon-circle {
    background-color: #262626 !important;
    border-color: #C5A880 !important;
}

/* ==========================================================================
   Catalog Filter Buttons (Full Button Color Invert on Hover)
   ========================================================================== */
.filter-btn {
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.filter-btn:hover {
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
    border-color: #1A1A1A !important;
    box-shadow: 0 4px 12px rgba(26, 26, 26, 0.2);
}
/* ==========================================================================
   Brand Logo Utility
   ========================================================================== */
.brand-logo-header {
    height: 58px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.brand-logo-header:hover {
    transform: scale(1.03);
}

/* Inverts black logo into pure white for the dark footer */
.brand-logo-footer {
    height: 52px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.brand-logo-footer:hover {
    filter: brightness(0) saturate(100%) invert(76%) sepia(34%) saturate(412%) hue-rotate(357deg) brightness(89%) contrast(85%); /* Gold shade on hover */
    transform: scale(1.03);
}