/* Existing styles */
        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
            100% { transform: translateY(0px) rotate(360deg); }
        }
        .floating-element {
            animation: float 6s ease-in-out infinite;
            transform-style: preserve-3d;
        }
        .interactive-card {
            transform-style: preserve-3d;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
        }
        .gradient-border {
            position: relative;
            background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
            padding: 2px;
            border-radius: 1rem;
        }
        .gradient-border::before {
            content: '';
            position: absolute;
     
            background: inherit;
            filter: blur(20px);
            z-index: -1;
        }
        @media (hover: hover) {
            .interactive-card:hover {
                transform: perspective(1000px) rotateY(5deg) rotateX(5deg) translateY(-10px);
            }
        }
        .title-3d {
            text-shadow: 3px 3px 0 #ff0000,
                         6px 6px 0 #00ff00,
                         9px 9px 0 #0000ff;
        }
        @media (max-width: 768px) {
            .title-3d {
                text-shadow: 2px 2px 0 #ff0000,
                             4px 4px 0 #00ff00,
                             6px 6px 0 #0000ff;
            }
        }
        .section-header {
            background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
           
            border: 1px solid rgba(255,255,255,0.1);
        }

        /* Hover Play Button */
        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .play-button::after {
            content: '';
            border-style: solid;
            border-width: 10px 0 10px 15px;
            border-color: transparent transparent transparent #000;
        }
        .video-container:hover .play-button {
            opacity: 1;
        }

        /* Hamburger Menu Styles */
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }
        .hamburger div {
            width: 25px;
            height: 3px;
            background-color: white;
            margin: 4px 0;
            transition: all 0.3s ease;
        }
        @media (max-width: 768px) {
            .hamburger {
                display: flex;
            }
            nav ul {
                display: none;
                flex-direction: column;
                background: black;
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                padding: 1rem;
                z-index: 100;
            }
            .active {
                display: flex;
            }
            nav ul li {
                margin: 0.5rem 0;
            }
        }
        h2{
          font-family: 'Montserrat', sans-serif;;
        }
        
        @keyframes glow {
          0% {
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3);
          }
          100% {
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5);
          }
        }
        
/* Add these custom styles */
.gradient-border {
    position: relative;
    background: linear-gradient(45deg, #6366f1, #ec4899, #f59e0b);
    border-radius: 1rem;
    padding: 3px;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.gradient-border::before {
    content: '';
    position: absolute;
 
    z-index: -1;
    margin: -3px;
    background: inherit;
    border-radius: inherit;
    filter: blur(10px);
    opacity: 0.6;
    transform: translateZ(-10px);
}

.interactive-card {
    transition: all 0.3s ease;
    perspective: 1000px;
    cursor: pointer;
}

.interactive-card:hover {
    transform: translateY(-5px) rotateX(5deg) rotateY(5deg);
}

.interactive-card:active {
    transform: translateY(2px) scale(0.98);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.play-button::after {
    content: '';
    position: absolute;
    left: 52%;
    top: 50%;
    transform: translate(-40%, -50%);
    border-width: 12px 0 12px 20px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.9);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.video-container:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 255, 255, 1);
}

    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-10px) rotate(3deg); }
    }
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }
    .perspective-1000 {
        perspective: 1000px;
    }
    .transform-style-preserve-3d {
        transform-style: preserve-3d;
    }
    .group:hover .shine-effect {
        opacity: 1;
        transform: rotate(30deg) translateX(300px);
    }
    
    .text-justify{
                    text-align: justify;
                  }@keyframes float {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-20px) scale(1.1); }
        }
    
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
    
        .animate-float-delayed {
            animation: float 6s ease-in-out 1.5s infinite;
        }
    
        .perspective-1000 {
            perspective: 1000px;
        }
    
        .transform-style-preserve-3d {
            transform-style: preserve-3d;
        }
    
        .section-header {
            position: relative;
            overflow: hidden;
        }
    
        .section-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, transparent, #3B82F6, transparent);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
    
        .section-header:hover::after {
            transform: scaleX(1);
        }
    
        .group:hover .group-hover\:translate-z-16 {
            transform: translateZ(16px);
        }