@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;800&display=swap');
        :root {
            --primary-color: #673de6;
            --primary-dark: #5025d1;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: #ffffff;
            color: #18181a;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Outfit', sans-serif;
            font-weight: 700;
        }
        .text-primary-custom { color: var(--primary-color) !important; }
        .bg-primary-custom { background-color: var(--primary-color) !important; }
        .btn-primary-custom {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .btn-primary-custom:hover {
            background-color: var(--primary-dark);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(103, 61, 230, 0.3);
        }
        
        /* Responsive Hero Banner */
        .hero-banner {
            position: relative;
            height: 350px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
        }
        .hero-banner-title {
            font-family: 'Outfit', sans-serif;
            letter-spacing: 1px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        .hero-banner-text {
            color: #f0f0f0;
            font-size: 1.2rem;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }
        @media (max-width: 768px) {
            .hero-banner {
                height: 104px;
            }
            .hero-banner .container {
                text-align: left !important;
                padding-left: 1.5rem !important;
            }
            .hero-banner-title {
                font-size: 1.5rem !important;
            }
            .hero-banner-text {
                font-size: 1rem !important;
            }
        }
        
        /* Navbar styling matching the screenshot */
        .navbar-nav .nav-link {
            font-size: 1.15rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #555 !important;
            margin: 0 0.8rem;
            transition: color 0.3s;
        }
        .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
            color: #d1a842 !important; /* Golden yellow */
        }
        .call-btn {
            background-color: #000;
            color: #fff !important;
            padding: 0.6rem 1.8rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            text-decoration: none;
            transition: all 0.3s;
            display: inline-block;
        }
        .call-btn:hover {
            background-color: #333;
            transform: translateY(-2px);
        }
        .call-number {
            color: #fca311; /* Orange/Golden color for the number */
        }

        /* Global Mobile Typography Optimization */
        @media (max-width: 768px) {
            h1, .h1 { font-size: 1.8rem !important; }
            h2, .h2 { font-size: 1.5rem !important; }
            h3, .h3 { font-size: 1.3rem !important; }
            h4, .h4 { font-size: 1.1rem !important; }
            .display-1 { font-size: 2.5rem !important; }
            .display-2 { font-size: 2.2rem !important; }
            .display-3 { font-size: 2rem !important; }
            .display-4 { font-size: 1.8rem !important; }
            .display-5 { font-size: 1.6rem !important; }
            .display-6 { font-size: 1.4rem !important; }
            p { font-size: 0.95rem; }
            .lead { font-size: 1rem !important; }
        }

        /* Product Card Hover Effect */
        @keyframes floatUpDown {
            0% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }
        .product-hover-card {
            transition: all 0.3s ease !important;
            border: 1px solid transparent !important;
        }
        .product-hover-card:hover {
            border-color: #ff7b00 !important;
            box-shadow: 0 15px 30px rgba(255, 123, 0, 0.1) !important;
            transform: translateY(-5px) !important;
        }
        .product-hover-card img, .product-hover-card .card-img-top {
            transition: transform 0.4s ease !important;
        }
        .product-hover-card:hover img, .product-hover-card:hover .card-img-top {
            animation: floatUpDown 1.5s ease-in-out infinite !important;
        }
        .product-hover-card h3, .product-hover-card .product-title {
            transition: color 0.3s ease !important;
        }
        .product-hover-card:hover h3, .product-hover-card:hover .product-title {
            color: #ff7b00 !important;
        }

        /* Premium Category Hover Animation (Carysil Style) */
        .category-card-anim {
            transition: all 0.4s ease-in-out;
            cursor: pointer;
        }
        .category-card-anim:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.12) !important;
        }
        .category-card-anim .img-wrapper {
            overflow: hidden;
            display: block;
        }
        .category-card-anim img {
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .category-card-anim:hover img {
            transform: scale(1.08);
        }