/* OTTIMIZZAZIONE TABLET - RANGE 768px-1024px */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Reset del margine per tablet */
    body {
        margin-left: 0;
        overflow-x: hidden;
    }
    .card-blue.BUILD {
        width: 100%;
    }
    .menu-right {
        padding-right: 4%;
        padding-left: 0;
    }
    
    .palla {
        width: 630px !important;
        height: 630px;
        margin-left: 8%;
        margin-bottom: -25%;
        margin-top: 12%;
    }
    .blocco-menu {
        padding: 5%;
    }
    ul.menu-links {
        padding: 0 !important;
        display: flex
    ;
        flex-direction: column;
        gap: 70px;
    }
    .menu-left {
        padding: 60px;
        display: flex
    ;
        flex-direction: column;
        align-items: center;
       
    }
    .menu-right {
        height: 100vh;
    }
    
    
   
    .page-content.col-md-8 {
        width: 100%;
        padding: 2% 2% 2% 2% !important;
        padding-right: 0 !important;
    }
    
    /* Nascondi sidebar su tablet */
    .sidebar {
        display: none;
    }
    .blocco2.d-flex.flex-column {
        display: flex
    ;
        flex-direction: column;
        gap: 20px;
    }
    img.card-image {
        background-size: cover;
        background-position: center;
    }
    
    /* Mostra header mobile */
    .mobile-header {
        display: block;
    }
    
    /* HERO SECTION FIXES */
    .titolo-home {
        font-size: 90px; /* Cazzo, era troppo grande */
    }
    
    .main-div {
        flex-direction: column;
        gap: 20px;
    }
    
    .blocco1, .blocco2 {
        width: 100%;
        height: auto;
    }
   
    
    .page-button {
        width: 60%;
    }
    
    /* PROCESS SECTION FIXES */
    .process-section {
        height: auto;
        margin-top: 30px;
    }
    
    .main-div-process {
        flex-direction: column;
    }
    
    .lato1, .lato2 {
        width: 100%;
        padding: 20px;
    }
    
    h1.process-title {
        padding-bottom: 20px;
    }
    
    .card-blue {
        margin-bottom: 30px;
    }
    
    /* SHOWCASE SECTION FIXES */
    .educational_learning_wrapper {
        gap: 15px !important;
    }
    
    .educational_learning_card {
        flex: 1 1 calc(50% - 15px) !important;
        min-width: 120px !important;
    }
    
    /* SWIPER/CARD FIXES */
    .swiper-home {
        height: 350px;
        overflow: visible;
    }
    
    .card {
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }
    
    .card-front, .card-back {
        padding: 15px;
    }
    
    .card-title {
        font-size: 18px;
    }
    
    .icon {
        font-size: 32px;
        margin-bottom: 10px;
    }
    
    /* CONTACT SECTION FIXES */
    .contact-section {
        padding: 40px 20px;
    }
    
    .contact-title {
        font-size: 36px;
    }
    
    .submit-btn {
        padding: 15px;
    }
    
    /* GENERAL UI IMPROVEMENTS */
    section.BUILD.hero-section {
        min-height: auto;
        height: auto;
        padding-bottom: 40px;
    }
    
    .figlio1.BUILD-FIGLIO {
        height: 300px;
    }
    
    button.white-button, button.page-button {
        font-size: 16px;
    }
    
    .sub-hero {
        font-size: 16px;
    }
    
    /* FIX PER GLI SPACING DEL PROCESSO */
    .section-header {
        padding: 12px 0;
    }
    
    .section-header h2 {
        font-size: 16px !important;
    }
    
    /* FIX PER SCROLLING ISSUE */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* SPECIFICI FIX PER ORIENTAMENTO LANDSCAPE */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .titolo-home {
        font-size: 70px;
    }
    
    .palla {
        width: 300px;
        height: 300px;
    }
    
    section.BUILD.hero-section {
        padding-bottom: 60px;
    }
    
    .swiper-home {
        height: 280px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Sistemazione brutale dell'immagine */
    .figlio1.BUILD-FIGLIO {
        height: auto !important;
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        aspect-ratio: 16/9 !important; /* Mantiene proporzioni fottutamente consistenti */
    }

    img.card-image {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important; /* Copre l'intero spazio disponibile */
        position: relative !important; /* Non quella merda di absolute */
        max-height: 550px !important; /* Evita che diventi un mostro */
        top: unset !important;
        left: unset !important;
        transform: none !important; /* Resetta eventuali trasformazioni del cazzo */
    }
}