body {
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
          .hero-bg {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
 
        
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .hero-bg {
            background: linear-gradient(rgba(163, 217, 165, 0.8), rgba(163, 217, 165, 0.8)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23A3D9A5" width="1200" height="600"/><circle fill="%23FFF4E1" cx="200" cy="150" r="80" opacity="0.3"/><circle fill="%23E63946" cx="800" cy="300" r="60" opacity="0.2"/><circle fill="%23FFF4E1" cx="1000" cy="100" r="100" opacity="0.3"/></svg>');
            background-size: cover;
            background-position: center;
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #E63946, #d62d3a);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #d62d3a, #c42530);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(230, 57, 70, 0.3);
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #A3D9A5, #8bc98e);
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background: linear-gradient(135deg, #8bc98e, #73b977);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(163, 217, 165, 0.3);
        }