body {
            background-color: #ffffff;
            color: #374151;
        }
        
        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 1.5rem;
        }
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 60px;
            height: 3px;
            background-color: #C5A059;
        }

        .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }
        
        .group:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .zoom-card {
            overflow: hidden;
            border-radius: 8px;
        }
        .zoom-card img {
            transition: transform 0.5s ease;
        }
        .zoom-card:hover img {
            transform: scale(1.05);
        }

        .feature-list li {
            margin-bottom: 0.5rem;
            display: flex;
            align-items: start;
        }
        .feature-list i {
            margin-top: 4px;
            margin-right: 10px;
            color: #C5A059;
        }

        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #555;
            border-radius: 4px;
        }


        .clip-path-slant {
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
        }
        .feature-card:hover i {
            transform: scale(1.15);
            transition: transform 0.3s ease;
        }
        .swatch-circle {
            width: 100%;
            height: 60px;
            border-radius: 4px;
            margin-bottom: 8px;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .group:hover .swatch-circle {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        /* Modal Animation */
        #swatch-modal.active {
            display: flex;
            animation: fadeIn 0.3s ease forwards;
        }
        #swatch-modal.active .modal-content {
            animation: scaleUp 0.3s ease forwards;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes scaleUp {
            from { transform: scale(0.95); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        /* Slider Styles */
        .slide {
            transition: opacity 0.5s ease-in-out;
        }
        .slide.active {
            opacity: 1;
            z-index: 10;
        }
        .slide.inactive {
            opacity: 0;
            z-index: 0;
        }

        /* Thumb Box Active State */
        .thumb-box {
            opacity: 0.6;
            border: 2px solid transparent;
            transition: all 0.2s;
        }
        .thumb-box:hover {
            opacity: 0.9;
        }
        .thumb-box.active {
            opacity: 1;
            border-color: #C5A059; /* Brand Gold */
        }