/* Responsive overrides for ARONIX-WEB page */

/* Additional responsive overrides */
@media (max-width: 1280px) {
    .main-container {
        max-width: 1100px;
        min-height: auto !important;
    }

    .hero-section {
        padding: 120px 20px;
        min-height: 95vh;
    }

    /* normalize vertical spacing: use section padding instead of element margins */
    .hero-content {
        margin-bottom: 0 !important;
        max-width: 80%;
    }

    .hero-section,
    .stats-section,
    .services-section,
    .vision-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .orbital-container {
        width: 100%;
        height: 100%;
        top: 60%;
        max-width: none;
        /* Remove max-width constraint */
    }

    /* Responsive overrides for new orbital structure */
    .ring-1,
    .orbit-1 {
        width: 30vw;
        height: 30vw;
        --radius: 15vw;
    }

    .orbit-1-5 {
        width: 40vw;
        height: 40vw;
    }

    .ring-2,
    .orbit-2 {
        width: 50vw;
        height: 50vw;
        --radius: 25vw;
    }

    .orbit-2-5 {
        width: 60vw;
        height: 60vw;
    }

    .ring-3,
    .orbit-3 {
        width: 70vw;
        height: 70vw;
        --radius: 35vw;
    }

    .tech-icon,
    .icon-slot {
        width: 52px;
        height: 52px;
    }

    .awt-logo-center {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 1024px) {
    .hero-section {
        padding: 100px 16px;
        min-height: 80vh;
        overflow: hidden;
    }

    .hero-title {
        font-size: 56px;
        width: auto;
        height: auto;
        margin-bottom: 20px;
    }

    .hero-subtitle {
        font-size: 20px;
        width: auto;
        height: auto;
    }

    .orbital-container {
        width: 100%;
        height: 100%;
        top: 50%;
    }

    .ring-1,
    .orbit-1 {
        width: 35vw;
        height: 35vw;
        --radius: 17.5vw;
    }

    .orbit-1-5 {
        width: 47.5vw;
        height: 47.5vw;
    }

    .ring-2,
    .orbit-2 {
        width: 60vw;
        height: 60vw;
        --radius: 30vw;
    }

    .orbit-2-5 {
        width: 72.5vw;
        height: 72.5vw;
    }

    .ring-3,
    .orbit-3 {
        width: 85vw;
        height: 85vw;
        --radius: 42.5vw;
    }

    .tech-icon,
    .icon-slot {
        width: 48px;
        height: 48px;
    }

    .awt-logo-center {
        width: 100px;
        height: 100px;
    }

    .services-title {
        font-size: 72px;
        white-space: normal;
    }

    .world-map-container {
        max-width: 90%;
        height: auto;
    }

    /* normalize vertical spacing on medium screens */
    .hero-section,
    .stats-section,
    .services-section,
    .vision-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .main-container {
        min-height: auto !important;
    }
}

@media (max-width: 768px) {
    .main-container {
        padding: 0 8px;
    }

    /* Stack hero content */
    .hero-section {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        padding-top: 100px;
        padding-bottom: 100px;
        min-height: 100vh;
    }

    .hero-content {
        max-width: 95%;
        margin-bottom: 350px !important;
        /* Push content up to make room for orbit below */
        position: relative;
        z-index: 20;
    }

    .hero-title {
        font-size: 40px;
        line-height: 1.15;
        margin-bottom: 15px;
    }

    .hero-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .orbital-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 85%;
        /* Move orbit significantly lower to avoid button overlap */
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        pointer-events: none;
        /* Ensure clicks pass through just in case */
    }

    .ring-1,
    .orbit-1 {
        width: 30vw;
        height: 30vw;
        --radius: 15vw;
    }

    .orbit-1-5 {
        width: 45vw;
        height: 45vw;
    }

    .ring-2,
    .orbit-2 {
        width: 60vw;
        height: 60vw;
        --radius: 30vw;
    }

    .orbit-2-5 {
        width: 75vw;
        height: 75vw;
    }

    .ring-3,
    .orbit-3 {
        width: 90vw;
        height: 90vw;
        --radius: 45vw;
    }

    .tech-icon,
    .icon-slot {
        width: 44px;
        height: 44px;
    }

    .awt-logo-center {
        width: 100px;
        height: 100px;
    }

    .services-title {
        font-size: 65px;
        /* Increased size */
        white-space: normal;
        letter-spacing: -2px;
    }

    .services-image {
        max-width: 95%;
    }

    /* Overlay the title on top of the map on small screens */
    .stats-section {
        position: relative;
        padding-top: 40px;
    }

    .stats-content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .stats-title {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 32px !important;
        width: 90% !important;
        z-index: 6 !important;
        text-align: center !important;
        white-space: normal !important;
        padding: 0 8px !important;
    }

    .world-map-container {
        position: relative;
        z-index: 1;
        height: auto;
        padding: 10px 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .world-map-container svg {
        max-width: 92%;
        height: auto;
        display: block;
        opacity: 0.6;
    }

    /* Hide many absolute decorative elements that break mobile layout */
    .ellipse,
    .decorative-circle,
    .decorative-group {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding-top: 80px;
        justify-content: flex-start;
    }

    .hero-content {
        margin-bottom: 300px !important;
    }

    .hero-title {
        font-size: 32px;
    }

    .orbital-container {
        top: 85%;
    }

    /* Larger relative rings for mobile to fill space */
    .ring-1,
    .orbit-1 {
        width: 30vw;
        height: 30vw;
        --radius: 15vw;
    }

    .orbit-1-5 {
        width: 45vw;
        height: 45vw;
    }

    .ring-2,
    .orbit-2 {
        width: 60vw;
        height: 60vw;
        --radius: 30vw;
    }

    .orbit-2-5 {
        width: 75vw;
        height: 75vw;
    }

    .ring-3,
    .orbit-3 {
        width: 90vw;
        height: 90vw;
        --radius: 45vw;
    }

    .tech-icon,
    .icon-slot {
        width: 40px;
        height: 40px;
    }

    .awt-logo-center {
        width: 70px;
        height: 70px;
    }

    .services-title {
        font-size: 48px;
    }

    .vision-title {
        font-size: 36px;
    }

    .vision-description {
        font-size: 15px;
    }

    .footer-content {
        gap: 20px;
    }

    .footer-right {
        justify-content: flex-start;
        /* Ensure left alignment on mobile */
    }
}

/* Minor accessibility / layout helpers */
.services-title,
.vision-title,
.hero-title {
    word-break: break-word;
}

/* Ensure content is pushed below fixed navbar on smaller viewports */
@media (max-width: 1024px) {
    .main-container {
        padding-top: 80px !important;
    }
}

@media (max-width: 480px) {

    /* slightly smaller offset on very small screens */
    .main-container {
        padding-top: 72px !important;
    }

    /* also ensure hero section uses top padding instead of negative margin */
    .hero-section {
        padding-top: calc(72px + 20px) !important;
    }
}

/* Large Screen Optimizations (1440px and up - e.g. 1920x1080) */
@media (min-width: 1441px) {

    .aronix-navbar .navbar-container,
    .footer-container,
    .main-container {
        max-width: 1800px;
        /* Allow wider spread on 1920px screens */
    }

    /* Ensure padding scales nicely */
    .aronix-footer {
        padding: 60px 8% 40px;
        /* Adjust padding for wider layout */
    }

    .aronix-navbar {
        padding: 30px 4%;
    }
}


/* Large Screen Optimizations (1440px and up - e.g. 1920x1080) */
@media (min-width: 1441px) {

    .aronix-navbar .navbar-container,
    .footer-container,
    .main-container {
        max-width: 1800px;
        /* Allow wider spread on 1920px screens */
    }

    /* Ensure padding scales nicely */
    .aronix-footer {
        padding: 60px 8% 40px;
        /* Adjust padding for wider layout */
    }

    .aronix-navbar {
        padding: 30px 4%;
    }
}

/* =========================================
   FIXES FOR MOBILE RESPONSIVENESS
   ========================================= */

@media (max-width: 768px) {

    /* Stack Services Cards */
    .services-image {
        display: none !important;
    }

    .services-cards-wrapper {
        display: flex;
        /* Stack cards */
        flex-direction: column;
        gap: 20px;
        padding-top: 20px;
        position: relative;
    }

    .service-overlay-card {
        position: relative !important;
        width: 100% !important;
        /* Full width */
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        background: rgba(20, 20, 20, 0.6);
        /* Readable background */
        border: 1px solid rgba(100, 200, 150, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 45px 30px;
        /* Increased padding significantly */
        margin-bottom: 0;
        text-align: center;
    }

    .service-overlay-heading {
        font-size: 32px;
        /* Bigger heading */
        margin-bottom: 15px;
        letter-spacing: -0.5px;
    }

    .service-overlay-paragraph {
        font-size: 13px;
        /* Reduced content size */
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.85);
        max-width: 90%;
        margin: 0 auto;
    }

    /* Ensure no horizontal overflow */
    .main-container {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding-top: 100px !important;
        min-height: auto;
        padding-bottom: 60px;
    }

    .service-overlay-card {
        padding: 35px 20px;
    }

    .service-overlay-heading {
        font-size: 28px;
    }

    .stats-title {
        font-size: 28px !important;
        /* Smaller title for mobile */
    }
}