.container-box{ 
    flex-wrap: wrap;  
} 
.box-case{
    width: 47%;
    height: 100%; 
    justify-content: start;
    gap: 1rem;  
    margin-bottom: 40px;
}
.box-case > div {
    width: 100%;
    background-position: center;
    background-size: 120%;
    height: 700px;
    background-repeat: no-repeat;
    transition: 0.4s;
    border-radius: 10px;
}
.box-case h3{
    font-family: 'Articulat-Light';
    font-size: 43px;
}
.box-case h4{
    font-family: 'Articulat-Light';
    text-transform: uppercase;
    font-size:26px ;
}
.box-case p{
    font-family: 'Articulat-Regular';
    font-size: 23px;
}
.box-case:hover{
    text-decoration: none !important;
}
.box-case:hover > div{
    background-size: 150%;
    transition: 0.4s;
}

@media screen and (min-width:1400px) and  (max-width:1800px){
    .box-case{
        width: 640px; 
    }
    .box-case > div {
        height: 675px; 
    }
    .box-case h3{
    font-size: 35px;
    }
    .box-case h4{
        font-size: 20px;
        letter-spacing: 2px;
        color: #717171;
    }
    .box-case p{
        font-size: 18px;
        letter-spacing: 1px;
    }
}

@media screen and (min-width:768px) and  (max-width:1300px){
    .box-case > div{
        height: 500px;
    }
    .box-case h3{
        font-size: 33px;
    }
    .box-case h4{
        font-size: 20px;
    }
    .box-case p{
        font-size: 18px;
        letter-spacing: 0.7px;
    }
    .slick-dots button{
        width: 70px;
    }
}


@media screen and (min-width:320px) and  (max-width:375px){
    .box-case > div{
        height: 400px;
    }
    .box-case h3 { 
        font-size: 29px;
    }
    .box-case h4 {
        font-size: 20px;
    }
    .box-case p { 
        font-size: 16px;
    }
    footer{
        width: 90%;
    }
}