@media (min-width: 768px) and (max-width: 1024px) {

    .hero-container {
        width: 100%;
        margin: 0 auto;
        padding: 20px 0;
        margin-bottom: 400px;
    }
    
    .hero {
    background-color: #0c151b;
        text-align: center;
        padding: 10px 0;
    }
    
    .hero-image {
        margin-top: 150px;
        margin-right: 70px;
        margin-bottom: 20px; /* Aggiunge spazio tra il logo e il titolo */
    }

    .hero-image img {
        width: 150%; /* Ripristina la larghezza del logo */
        transform: translateX(0); /* Rimuove la traslazione laterale */
    }
    
    .hero h2 {
        color: #54bee4;
        font-size: 40px; /* Riduci la dimensione del titolo */
        margin-top: 20px;
        margin-bottom: 20px; /* Riduci lo spazio tra il titolo e il testo */
        line-height: 50px; 
    }
    
    .hero p {
        font-size: 20px; /* Riduci la dimensione del testo */
        margin-bottom: 60px;
    }
    
    .hero-content {
        flex-direction: column-reverse; /* Inverte l'ordine dei contenuti */
        text-align: center;
    }
    
    .hero-text {
        text-align: center; /* Centra il testo */
    }
    
    .btn {
        display: inline-flex;
        align-items: center;
        background-color: #54bee4;
        color: #fff;
        padding: 15px 20px;
        text-decoration: none;
        border-radius: 30px;
        opacity: 0;
        animation: fadeInUp 1s forwards 5s; 
        font-family: 'Poppins', sans-serif;
    }
    
    .btn-add {
        color: #1d1c1c;
        font-weight: 500;
        transform: translateX(-100%);
        transition: transform 1s ease-out;
    }
    
    .btn-add:hover {
        background-color: #555454;
        color: #fff;
        transition: background-color 0.6s ease;
    }
    
    .btn-features {
        color: #54bee4;
    background-color: #0c151b; 
        border: 2px solid #54bee4; 
        transform: translateX(100%);
        transition: transform 1s ease-out;
    }
    
    .btn-features:hover {
        background-color: #555454;
        color: #fff;
        border-color: #555454;
        transition: background-color 0.6s ease;
    }
    
    .btn-animate {
        opacity: 0;
        animation: fadeInUp 1s forwards, slideFromLeft 1s;
        animation-delay: 1s;
    }
    
    .btn-animate-2 {
        opacity: 0;
        animation: fadeInUp 1s forwards, slideFromRight 1s;
        animation-delay: 0.8s;
    }
    
    .row-stats {
        flex-direction: column; /* Stack items vertically */
        align-items: center;
    }

    .statistics {
        text-align: center;
        padding: 30px 0;
        background-color: #0c151b;
    }

    .stats {
        width: 90%; /* Ensure almost full width on mobile */
        max-width: 360px; /* Optional: Limit max width for better readability */
        margin-bottom: 60px;
    }

    .stats img.stats-logo {
        position: absolute;
        top: 19px;
        left: 25px;
    }

    .stats-info {
        padding-left: 35px;
    }

    .stats-name-1 {
        font-size: 25px;
        color: #ffffff;
        margin-bottom: 2px;
        margin-top: 20px;
        margin-right: 60px;
    }
    
    .stats-count-1 {
        margin: 0;
        font-size: 30px;
        color: #ffffff;
        padding-right: 87px;
        margin-left: 80px;
        margin-top: -12px;
    }
    
    .stats-name-2 {
        font-size: 25px;
        color: #ffffff;
        margin-bottom: 2px;
        margin-top: 20px;
        margin-right: 45px;
    }
    
    .stats-count-2 {
        margin: 0;
        font-size: 30px;
        color: #ffffff;
        padding-right: 87px;
        margin-left: 30px;
        margin-top: -12px;
    }
    
    .stats-name-3 {
        font-size: 25px;
        color: #ffffff;
        margin-bottom: 2px;
        margin-top: 20px;
        margin-right: -18px;
    }
    
    .stats-count-3 {
        margin: 0;
        font-size: 30px;
        color: #ffffff;
        padding-right: 87px;
        margin-left: 30px;
        margin-top: -12px;

    }

    .server-list .row {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Due colonne */
        gap: 20px; /* Spazio tra le colonne */
    }
}

@media (min-width: 820px) and (max-width: 1366px) {
    .stats {
        max-width: 360px; /* Optional: Limit max width for better readability */
        margin-bottom: 60px;
    }

    .stats-name-1 {
        font-size: 25px;
        color: #ffffff;
        margin-bottom: 2px;
        margin-top: 20px;
        margin-right: 50px;
    }
    
    .stats-count-1 {
        margin: 0;
        font-size: 30px;
        color: #ffffff;
        padding-right: 87px;
        margin-left: 80px;
        margin-top: -12px;
    }
    
    .stats-name-2 {
        font-size: 25px;
        color: #ffffff;
        margin-bottom: 2px;
        margin-top: 20px;
        margin-right: 45px;
    }
    
    .stats-count-2 {
        margin: 0;
        font-size: 30px;
        color: #ffffff;
        padding-right: 87px;
        margin-left: 30px;
        margin-top: -12px;
    }
    
    .stats-name-3 {
        font-size: 25px;
        color: #ffffff;
        margin-bottom: 2px;
        margin-top: 20px;
        margin-right: -18px;
    }
    
    .stats-count-3 {
        margin: 0;
        font-size: 30px;
        color: #ffffff;
        padding-right: 87px;
        margin-left: 30px;
        margin-top: -12px;
    }
}