/* Deep Learning Interactive Background Styles - Enhanced Smooth Floating */
#deep-learning-bg {
    position: relative !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important;
    background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    isolation: isolate !important;
}

#deep-learning-bg * {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Controls container at BOTTOM CENTER */
#deep-learning-bg .controls-container {
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
    z-index: 1000 !important;
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 10px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    min-width: 300px !important;
    justify-content: center !important;
}

#deep-learning-bg .counter {
    background: transparent !important;
    color: white !important;
    padding: 8px 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    border: none !important;
    font-size: 16px !important;
    opacity: 0.9 !important;
    transition: opacity 0.3s !important;
    pointer-events: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

#deep-learning-bg .counter:hover {
    opacity: 1 !important;
}

#deep-learning-bg .counter span {
    color: #4fc3f7 !important;
    font-weight: bold !important;
    font-size: 18px !important;
}

#deep-learning-bg .reset-btn {
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.4), rgba(100, 200, 255, 0.3)) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 20px rgba(0, 150, 255, 0.2) !important;
    opacity: 0.9 !important;
    font-size: 16px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    padding: 10px 25px !important;
    position: relative !important;
    white-space: nowrap !important;
}

#deep-learning-bg .reset-btn:hover {
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.6), rgba(100, 200, 255, 0.5)) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 10px 30px rgba(0, 150, 255, 0.4) !important;
    opacity: 1 !important;
}

#deep-learning-bg .stars {
    width: 1px !important;
    height: 1px !important;
    position: absolute !important;
    background: white !important;
    box-shadow: 2vw 5vh 2px white, 10vw 8vh 2px white, 15vw 15vh 1px white,
        22vw 22vh 1px white, 28vw 12vh 2px white, 32vw 32vh 1px white,
        38vw 18vh 2px white, 42vw 35vh 1px white, 48vw 25vh 2px white,
        53vw 42vh 1px white, 58vw 15vh 2px white, 63vw 38vh 1px white,
        68vw 28vh 2px white, 73vw 45vh 1px white, 78vw 32vh 2px white,
        83vw 48vh 1px white, 88vw 20vh 2px white, 93vw 52vh 1px white,
        98vw 35vh 2px white, 5vw 60vh 1px white, 12vw 65vh 2px white,
        18vw 72vh 1px white, 25vw 78vh 2px white, 30vw 85vh 1px white,
        35vw 68vh 2px white, 40vw 82vh 1px white, 45vw 92vh 2px white,
        50vw 75vh 1px white, 55vw 88vh 2px white, 60vw 95vh 1px white,
        65vw 72vh 2px white, 70vw 85vh 1px white, 75vw 78vh 2px white !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#deep-learning-bg .main-heading {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: clamp(2rem, 5vw, 4rem) !important;
    text-align: center !important;
    z-index: 100 !important;
    opacity: 1 !important;
    transition: opacity 0.8s ease, transform 0.8s ease !important;
    pointer-events: none !important;
    text-shadow: 0 0 20px rgba(79, 195, 247, 0.7),
        0 0 40px rgba(79, 195, 247, 0.5),
        0 0 60px rgba(79, 195, 247, 0.3) !important;
    animation: pulse 4s infinite alternate ease-in-out !important;
    max-width: 90% !important;
    padding: 0 20px !important;
}

#deep-learning-bg .main-heading.hidden {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
    animation: none !important;
}

#deep-learning-bg .main-heading span {
    display: block !important;
    font-size: clamp(1rem, 2vw, 1.8rem) !important;
    margin-top: 15px !important;
    color: #cccccc !important;
    opacity: 0.8 !important;
    font-weight: normal !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

@keyframes pulse {
    0% {
        text-shadow: 0 0 20px rgba(79, 195, 247, 0.7),
            0 0 40px rgba(79, 195, 247, 0.5),
            0 0 60px rgba(79, 195, 247, 0.3) !important;
    }

    100% {
        text-shadow: 0 0 30px rgba(79, 195, 247, 0.9),
            0 0 60px rgba(79, 195, 247, 0.7),
            0 0 90px rgba(79, 195, 247, 0.5) !important;
    }
}

#deep-learning-bg .logo-container {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

/* CIRCULAR LOGOS - SMOOTH CONTINUOUS FLOATING */
#deep-learning-bg .logo {
    position: absolute !important;
    width: clamp(60px, 7vw, 80px) !important;
    height: clamp(60px, 7vw, 80px) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(3px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.5s ease !important;
    /* //transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; // ----Shreya */
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.3) !important;
    border: 2px solid rgba(0, 150, 255, 0.2) !important;
    animation: float 12s infinite ease-in-out;
    /* //animation: smoothFloat 15s infinite ease-in-out !important; // ----Shreya */
    overflow: visible !important;
    z-index: 50 !important;
    /* overflow: hidden !important;
    z-index: 1 !important; */
    opacity: 0.6 !important;
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    touch-action: manipulation !important;
}

/* SMOOTH CONTINUOUS FLOATING ANIMATION - Like underwater movement */
@keyframes smoothFloat {
    0% {
        transform: translate(0px, 0px) rotate(0deg) !important;
    }

    10% {
        transform: translate(8px, -10px) rotate(2deg) !important;
    }

    20% {
        transform: translate(15px, -5px) rotate(-1deg) !important;
    }

    30% {
        transform: translate(10px, 8px) rotate(3deg) !important;
    }

    40% {
        transform: translate(-5px, 12px) rotate(-2deg) !important;
    }

    50% {
        transform: translate(-12px, 5px) rotate(1deg) !important;
    }

    60% {
        transform: translate(-8px, -8px) rotate(-3deg) !important;
    }

    70% {
        transform: translate(5px, -15px) rotate(2deg) !important;
    }

    80% {
        transform: translate(12px, -8px) rotate(-1deg) !important;
    }

    90% {
        transform: translate(5px, 5px) rotate(2deg) !important;
    }

    100% {
        transform: translate(0px, 0px) rotate(0deg) !important;
    }
}

#deep-learning-bg .logo:hover {
    transform: scale(1.25) !important;
    box-shadow: 0 0 40px rgba(0, 200, 255, 0.6) !important;
    z-index: 100 !important;
    opacity: 0.95 !important;
    animation-play-state: paused !important;
}

#deep-learning-bg .logo.clicked {
    animation: nameShow 1s forwards ease-out, flyAway 3.5s 1s forwards cubic-bezier(0.22, 1, 0.36, 1) !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

#deep-learning-bg .logo-container.logo-clicked .logo {
    opacity: 1 !important;
    box-shadow: 0 0 35px rgba(0, 150, 255, 0.6) !important;
}

#deep-learning-bg .logo-name {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.95) !important;
    color: white !important;
    padding: 8px 15px !important;
    border-radius: 8px !important;
    font-size: clamp(12px, 1.2vw, 14px) !important;
    font-weight: 600 !important;
    /* white-space: normal !important; /* ✅ allow wrapping */
    /* //word-break: break-word !important; // ✅ break long words */
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    z-index: 150 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
    min-width: max-content !important;
    transform-origin: center !important;
}

#deep-learning-bg .logo:hover .logo-name {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(15px) !important;
    top: 100% !important;
}

#deep-learning-bg .logo img {
    max-width: 65% !important;
    max-height: 65% !important;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    pointer-events: none !important;
    user-select: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

#deep-learning-bg .logo:hover img {
    transform: scale(1.2) !important;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)) !important;
}

/* Logo color variations */
#deep-learning-bg .logo.python {
    background: rgba(49, 102, 144, 0.25) !important;
    border-color: rgba(49, 102, 144, 0.6) !important;
    box-shadow: 0 0 25px rgba(49, 102, 144, 0.4) !important;
}

#deep-learning-bg .logo.pytorch {
    background: rgba(238, 65, 53, 0.25) !important;
    border-color: rgba(238, 65, 53, 0.6) !important;
    box-shadow: 0 0 25px rgba(238, 65, 53, 0.4) !important;
}

#deep-learning-bg .logo.tensorflow {
    background: rgba(255, 152, 0, 0.25) !important;
    border-color: rgba(255, 152, 0, 0.6) !important;
    box-shadow: 0 0 25px rgba(255, 152, 0, 0.4) !important;
}

#deep-learning-bg .logo.keras {
    background: rgba(210, 0, 0, 0.25) !important;
    border-color: rgba(210, 0, 0, 0.6) !important;
    box-shadow: 0 0 25px rgba(210, 0, 0, 0.4) !important;
}

#deep-learning-bg .logo.scikit {
    background: rgba(251, 181, 58, 0.25) !important;
    border-color: rgba(251, 181, 58, 0.6) !important;
    box-shadow: 0 0 25px rgba(251, 181, 58, 0.4) !important;
}

#deep-learning-bg .logo.numpy {
    background: rgba(76, 175, 80, 0.25) !important;
    border-color: rgba(76, 175, 80, 0.6) !important;
    box-shadow: 0 0 25px rgba(76, 175, 80, 0.4) !important;
}

#deep-learning-bg .logo.pandas {
    background: rgba(130, 202, 157, 0.25) !important;
    border-color: rgba(130, 202, 157, 0.6) !important;
    box-shadow: 0 0 25px rgba(130, 202, 157, 0.4) !important;
}

#deep-learning-bg .logo.opencv {
    background: rgba(93, 156, 236, 0.25) !important;
    border-color: rgba(93, 156, 236, 0.6) !important;
    box-shadow: 0 0 25px rgba(93, 156, 236, 0.4) !important;
}

#deep-learning-bg .logo.jupyter {
    background: rgba(240, 80, 40, 0.25) !important;
    border-color: rgba(240, 80, 40, 0.6) !important;
    box-shadow: 0 0 25px rgba(240, 80, 40, 0.4) !important;
}

#deep-learning-bg .logo.docker {
    background: rgba(0, 150, 255, 0.25) !important;
    border-color: rgba(0, 150, 255, 0.6) !important;
    box-shadow: 0 0 25px rgba(0, 150, 255, 0.4) !important;
}

#deep-learning-bg .logo.matplotlib {
    background: rgba(49, 121, 172, 0.25) !important;
    border-color: rgba(49, 121, 172, 0.6) !important;
    box-shadow: 0 0 25px rgba(49, 121, 172, 0.4) !important;
}

#deep-learning-bg .logo.github {
    background: rgba(11, 17, 23, 0.25) !important;
    border-color: rgba(11,17,23, 0.6) !important;
    box-shadow: 0 0 25px rgba(11,17,23, 0.4) !important;
} 

#deep-learning-bg .logo.raspberrypi {
    background: rgba(197,26,74, 0.25) !important;
    border-color: rgba(197,26, 74, 0.6) !important;
    box-shadow: 0 0 25px rgba(197, 26, 74, 0.4) !important;
}

#deep-learning-bg .logo.anaconda {
    background: rgba(67, 176, 73, 0.25) !important;
    border-color: rgba(67, 176, 73, 0.6) !important;
    box-shadow: 0 0 25px rgba(67, 176, 73, 0.4) !important;
}

#deep-learning-bg .logo.vscode {
    background: rgba(0, 122, 204, 0.25) !important;
    border-color: rgba(0, 122, 204, 0.6) !important;
    box-shadow: 0 0 25px rgba(0, 122, 204, 0.4) !important;
}

#deep-learning-bg .logo.anaconda {
    background: rgba(255, 43, 43, 0.25) !important;
    border-color: rgba(255, 43, 43, 0.6) !important;
    box-shadow: 0 0 25px rgba(255, 43, 43, 0.4) !important;
}

#deep-learning-bg .logo.vscode {
    background: rgba(0, 117, 143, 0.25) !important;
    border-color: rgba(0, 117, 143, 0.6) !important;
    box-shadow: 0 0 25px rgba(0, 117, 143, 0.4) !important;
}

#deep-learning-bg .logo.linux {
    background: rgba(255, 204, 51, 0.25) !important;
    border-color: rgba(255, 204, 51, 0.6) !important;
    box-shadow: 0 0 25px rgba(255, 204, 51, 0.4) !important;
}

#deep-learning-bg .logo.kubernetes {
    background: rgba(50, 108, 229, 0.25) !important;
    border-color: rgba(50, 108, 229, 0.6) !important;
    box-shadow: 0 0 25px rgba(50, 108, 229, 0.4) !important;
}

#deep-learning-bg .logo.kubeflow {
    background: rgba(66, 121, 244, 0.25) !important;
    border-color: rgba(66, 121, 244, 0.6) !important;
    box-shadow: 0 0 25px rgba(66, 121, 244, 0.4) !important;
}
@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(8px, -8px) rotate(0.5deg);
    }

    50% {
        transform: translate(-5px, 5px) rotate(-0.5deg);
    }

    75% {
        transform: translate(-8px, -4px) rotate(0.5deg);
    }
}

/* SMOOTH NAME SHOW ANIMATION */
@keyframes nameShow {
    0% {
        transform: scale(1) rotate(0deg) !important;
        opacity: 1 !important;
    }

    50% {
        transform: scale(1.4) rotate(5deg) !important;
        opacity: 1 !important;
    }

    100% {
        transform: scale(1.5) rotate(0deg) !important;
        opacity: 1 !important;
    }
}

/* SMOOTH SLOW FLY-AWAY ANIMATION - Graceful exit */
@keyframes flyAway {
    0% {
        transform: scale(1.5) rotate(0deg) !important;
        opacity: 1 !important;
    }

    15% {
        transform: scale(1.3) rotate(90deg) !important;
        opacity: 0.95 !important;
    }

    30% {
        transform: scale(1.1) rotate(180deg) !important;
        opacity: 0.85 !important;
    }

    45% {
        transform: scale(0.9) rotate(270deg) !important;
        opacity: 0.7 !important;
    }

    60% {
        transform: scale(0.7) rotate(360deg) !important;
        opacity: 0.5 !important;
    }

    75% {
        transform: scale(0.5) rotate(450deg) !important;
        opacity: 0.3 !important;
    }

    90% {
        transform: scale(0.2) rotate(540deg) !important;
        opacity: 0.1 !important;
    }

    100% {
        transform: translate(var(--fly-x), var(--fly-y)) scale(0.05) rotate(var(--fly-rotate)) !important;
        opacity: 0 !important;
    }
}

/* Elementor Compatibility */
.elementor-widget-html {
    pointer-events: auto !important;
    z-index: 1 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #deep-learning-bg .logo {
        width: 55px !important;
        height: 55px !important;
    }

    #deep-learning-bg .controls-container {
        bottom: 20px !important;
        min-width: 250px !important;
        padding: 8px 15px !important;
        gap: 15px !important;
    }

    #deep-learning-bg .reset-btn {
        padding: 8px 20px !important;
        font-size: 14px !important;
    }

    #deep-learning-bg .counter {
        font-size: 14px !important;
    }

    #deep-learning-bg .counter span {
        font-size: 16px !important;
    }

    #deep-learning-bg .logo-name {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    @keyframes smoothFloat {

        0%,
        100% {
            transform: translate(0, 0) rotate(0deg) !important;
        }

        25% {
            transform: translate(5px, -5px) rotate(1deg) !important;
        }

        50% {
            transform: translate(-5px, 5px) rotate(-1deg) !important;
        }

        75% {
            transform: translate(-5px, -5px) rotate(1deg) !important;
        }
    }
}

@media (max-width: 480px) {
    #deep-learning-bg .logo {
        width: 50px !important;
        height: 50px !important;
        animation: float 12s infinite ease-in-out !important;
        /* //animation: smoothFloat 18s infinite ease-in-out !important; //-----Shreya */
    }

    #deep-learning-bg .main-heading {
        font-size: 2rem !important;
    }

    #deep-learning-bg .main-heading span {
        font-size: 1rem !important;
    }

    #deep-learning-bg .controls-container {
        bottom: 15px !important;
        min-width: 220px !important;
        padding: 6px 12px !important;
        gap: 12px !important;
    }

    #deep-learning-bg .reset-btn {
        padding: 6px 15px !important;
        font-size: 13px !important;
    }

    #deep-learning-bg .counter {
        font-size: 13px !important;
    }

    #deep-learning-bg .counter span {
        font-size: 15px !important;
    }

    #deep-learning-bg .logo-name {
        font-size: 10px !important;
        padding: 5px 8px !important;
    }
}
/* ========================SHREYA=========================== */
/* Additional CSS updates for heading layout */

/* Ensure main heading stays centered */
#deep-learning-bg .main-heading {
    white-space: normal !important;
    text-align: center !important;
}

/* Highlight FUN with different color */
#deep-learning-bg .main-heading .highlight-fun {
    font-size: clamp(2rem, 5vw, 4rem) !important;
    color: #FF6B9D !important;
    /* Pink color to match the theme */
    text-shadow: 0 0 30px rgba(255, 107, 157, 0.5),
        0 0 40px rgba(255, 107, 157, 0.5),
        0 0 60px rgba(255, 107, 157, 0.5) !important;
}

/* Subheading should be full width */
#deep-learning-bg .main-heading span.subheading {
    display: block !important;
    margin-top: 15px !important;
    width: 100% !important;
}

/* Hide mobile break by default */
#deep-learning-bg .main-heading .mobile-break {
    display: none !important;
}

/* Mobile adjustments - show line break for better layout */
@media (max-width: 480px) {
    #deep-learning-bg .main-heading {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        line-height: 1.4 !important;
    }

    /* Show the line break on mobile */
    #deep-learning-bg .main-heading .mobile-break {
        display: block !important;
    }
}