:root {
            --teal: #2DD4BF;
            --coral: #FF6B8B;
            --sunshine: #FFD166;
            --lavender: #A78BFA;
            --mint: #34D399;
            --sky: #38BDF8;
            --blush: #FB7185;
            --berry: #C084FC;
        }

        .figtree {
        font-family: "Figtree", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #f0f9ff 0%, #fefce8 50%, #fdf2f8 100%);
            overflow-x: hidden;
        }
        
        .brand-font {
            font-family: "Figtree", sans-serif;
        }
        
        /* .hero-bg {
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(45, 212, 191, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 107, 139, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(255, 209, 102, 0.3) 0%, transparent 50%),
                linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)),
                url('https://themewagon.github.io/dente/images/hero_bg_1.jpg');
            background-size: cover, cover, cover, cover, cover;
            background-position: center;
            background-blend-mode: overlay, overlay, overlay, normal, normal;
            position: relative;
            overflow: hidden;
        } */


        .hero-bg {
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(45, 212, 191, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 107, 139, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(255, 209, 102, 0.3) 0%, transparent 50%),
                linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)),
                /* linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), */
                url('https://themewagon.github.io/dente/images/hero_bg_1.jpg');
            background-size: cover, cover, cover, cover, cover;
            background-position: center;
            background-blend-mode: overlay, overlay, overlay, normal, normal;
            position: relative;
            overflow: hidden;
        }
        
        .floating-shape {
            position: absolute;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            filter: blur(20px);
            opacity: 0.4;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }
        
        .rainbow-gradient {
            background: linear-gradient(90deg, 
                var(--teal) 0%, 
                var(--sky) 25%, 
                var(--lavender) 50%, 
                var(--coral) 75%, 
                var(--sunshine) 100%)
                ;
        }
        
        .service-card {
            border-radius: 24px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden;
            position: relative;
            z-index: 1;
        }
        
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.3) 100%);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s;
        }
        
        .service-card:hover::before {
            opacity: 1;
        }
        
        .service-card:hover {
            transform: translateY(-15px) scale(1.03);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .bounce-animation {
            animation: bounce 3s infinite;
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .icon-wrapper {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            transition: all 0.3s ease;
        }
        
        .stat-bubble {
            background: linear-gradient(135deg, var(--lavender), var(--coral));
            border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
            position: relative;
            overflow: hidden;
        }
        
        .stat-bubble::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(transparent, rgba(255,255,255,0.3), transparent);
            transform: rotate(45deg);
        }
        
        .nav-gradient {
            background: linear-gradient(90deg, var(--teal), var(--lavender), var(--coral));
            background-size: 200% 200%;
            animation: gradientShift 5s ease infinite;
        }

        .nav-gradient.scrolled {
    background: linear-gradient(90deg, 
        rgba(45, 212, 191, 0.5),   /* --teal with 0.5 opacity */
        rgba(167, 139, 250, 0.5),  /* --lavender with 0.5 opacity */
        rgba(255, 107, 139, 0.5)   /* --coral with 0.5 opacity */
    );
    backdrop-filter: blur(5px);    /* softens the background */
}
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .rainbow-text {
            background: linear-gradient(90deg, 
                var(--teal), 
                var(--sky), 
                var(--lavender), 
                var(--coral), 
                var(--sunshine));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .colorful-btn {
            background: linear-gradient(90deg, var(--teal), var(--lavender), var(--coral));
            background-size: 200% 200%;
            animation: gradientShift 3s ease infinite;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .colorful-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        
        .colorful-btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, var(--coral), var(--sunshine), var(--teal));
            opacity: 0;
            transition: opacity 0.3s;
            z-index: -1;
        }
        
        .colorful-btn:hover::after {
            opacity: 1;
        }
        
        .section-bg {
            background: linear-gradient(135deg, 
                rgba(56, 189, 248, 0.05) 0%, 
                rgba(45, 212, 191, 0.05) 25%, 
                rgba(251, 113, 133, 0.05) 50%, 
                rgba(255, 209, 102, 0.05) 75%, 
                rgba(168, 132, 252, 0.05) 100%);
        }
        
        .mobile-menu {
            transform: translateY(-100%);
            transition: transform 0.3s ease;
        }
        
        .mobile-menu.active {
            transform: translateY(0);
        }

        .mobile-menu {
            display: none;
        }
        .mobile-menu.active {
            display: block;
        }


        @media (max-width: 768px) {
            .hero-bg{
                background-position: 75% 100%;
            }
        }