@media (max-width: 1444px) {
    .num-case {
        img {
            width: clamp(150px, 40vw, 200px);
        }
    }
}

@media (max-width: 1240px) {

    .sec-2 {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 2rem;
    }
    .benefit-sec {
        align-items: center;
        text-align: center;
        width: auto;
        h3 {
            text-align: center;
        }
    }
    
    .benefits {
        flex-direction: column;
        width: 80%;
        height: auto;
        text-align: center;
        br{display: none;}
    }
    
    .benefits img {
        height: 60px;
        width: 60px;
        padding: 0;
        margin-bottom: 1rem;
    }
    
    .benefits-text {
        word-wrap: break-word;
        p {
        font-size: 22px;
        transform: none;
        margin: 0.5rem;
        }
    
        span {
        opacity: 1 !important;
        transform: none !important;
        white-space: normal;
        font-size: 18px;
        margin-top: 0.5rem;
        display: block;
        }
    }
    
    .benefits:hover .benefits-text p,
    .benefits:hover .benefits-text span {
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 1180px) {
    .sec-5 {a {padding: 0.5rem 2rem;}}
    .sec5-wrapper {gap: 1rem;}
    .sec5-text {
        padding: 0 1rem;
    }
}

@media (max-width: 1140px) {
    .number {img {padding: 1.5rem;}}
    .number-sec {gap: 1rem;}
}

@media (max-width: 1080px) {
    .sec5-wrapper {
        flex-direction: column;
    }
    .sec5-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        a {
            text-align: center;
        }
    }
}

@media (max-width: 940px){

    .scroll-container {
        flex-direction: column;
    }

    .navbar-bg {
        display: block;
        position: fixed;
        width: 100%;
        height: 110px;
        background-image: url("../assets/images/texture.png");
        background-size: 100%, 100%;
        background-position: center, center;
        mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,0));
        z-index: 5;
    }

    .carousel-wrapper {
        mask-image: none;
      }

    .panel {
        height: auto;
        padding: 0 0 4rem;
    }

    .hero-sec {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        justify-content: center;
    }

    .hero-text {
        h1 {font-size: 50px;}
        h2 {font-size: 35px;}
    }

    .sec-1 {
        align-items: start;
    }
    .sec-1 video {
        width: auto;
        height: 100vh;
    }

    .preview_panel {
        border-radius: 10px;
        padding: 0;
        width: 90vw;
    }

    .preview-text {
        padding: 1rem;
        h3 {
            font-size: 25px;
        }
    }
    .number-sec {
        flex-direction: column;
        gap: 0;
    }
    .sec5-wrapper video {
        border-radius: 10px;
    }
}

@media (max-width: 500px) {
    .preview_panel {
        height: 250px;
    }
}