/* ===================================
   SECTION SPACING OPTIMIZATION
   Purpose: Reduce spacing between sections on homepage
   =================================== */

/* Reduce padding for all sections */
#main-content section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* Hero section - reduced height for compact banner */
.hero-vibrant {
    padding-top: 120px !important;
    padding-bottom: 50px !important;
    min-height: 75vh !important;
    /* Reduced from 100vh */
}

/* Hero title size adjustment */
.hero-vibrant h1 {
    font-size: clamp(3rem, 7vw, 5.5rem) !important;
}

.hero-vibrant p {
    font-size: 1.2rem !important;
    margin: 25px auto !important;
}

/* Specific section overrides */
#about-us {
    padding: 60px 0 !important;
}

#sectors {
    padding: 60px 0 !important;
}

#game-production {
    padding: 60px 0 !important;
}

#chatbot-production {
    padding: 60px 0 !important;
}

#camera-ai-security {
    padding: 50px 0 !important;
}

#erp-ai-system {
    padding: 50px 0 !important;
}

#film-studio {
    padding: 50px 0 !important;
}

/* Reduce bottom margin for section titles */
.onky-studio-context .text-center.mb-5 {
    margin-bottom: 2rem !important;
}

/* Reduce spacing in rows */
.onky-studio-context .row.mb-5 {
    margin-bottom: 2rem !important;
}

/* Reduce spacing between cards */
.onky-studio-context .mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Reduce spacing in game cards */
.game-card-premium {
    margin-bottom: 2rem !important;
}

/* Reduce spacing in vertical galleries */
.vertical-gallery-grid {
    margin-top: 1.5rem !important;
}

/* Scroll To Top Button Premium */
.scrollToTop {
    display: none;
    /* Managed by JS */
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    z-index: 9999;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);

    /* Perfect Centering with Flexbox */
    display: flex;
    /* Override JS inline display if needed */
    align-items: center;
    justify-content: center;
}

/* Fix for JS fadeIn/fadeOut which sets display: block */
.scrollToTop[style*="display: block"] {
    display: flex !important;
}

.scrollToTop i {
    font-size: 22px;
    background: linear-gradient(to bottom, var(--primary-color, #0076ff), var(--secondary-color, #7000ff));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    /* Reset line-height */
    margin-top: -2px;
    /* Optical correction */
}

.scrollToTop:hover {
    transform: translateY(-5px) scale(1.1);
    background: rgba(255, 255, 255, 0.25);
    border-color: var(--primary-color);
    box-shadow: 0 15px 35px rgba(0, 118, 255, 0.3);
}

.scrollToTop::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0.5;
    animation: spin-slow 4s linear infinite;
}

@keyframes spin-slow {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile optimization - even tighter spacing */
@media (max-width: 768px) {
    #main-content section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .hero-vibrant {
        padding-top: 160px !important;
        /* Increased for mobile to avoid navbar overlap */
        padding-bottom: 60px !important;
        min-height: 70vh !important;
    }

    /* Adjust hero text size for mobile */
    .hero-vibrant h1 {
        font-size: clamp(2rem, 8vw, 3.5rem) !important;
    }

    .hero-vibrant p {
        font-size: 1rem !important;
    }

    /* Push hero content down on mobile */
    .hero-vibrant .container {
        margin-top: 50px !important;
    }

    #camera-ai-security,
    #erp-ai-system,
    #film-studio {
        padding: 40px 0 !important;
    }

    /* Mobile adjustments */
    .scrollToTop {
        bottom: 25px;
        right: 25px;
        width: 45px;
        height: 45px;
    }

    .scrollToTop i {
        font-size: 20px;
    }
}