@media (max-width:1170px){
    .card{
        width: 300px;
        height: 300px;
    }
    .container{
        height:140vh ;
    }
    .fix-1{
        height: 150vh;
    }
}
@media (max-width:680px){
    .card{
        width: 250px;
        height: 250px;
    }
    .container{
        height:120vh ;
    }
    .fix-1{
        height: 135vh;
    }
}
@media (max-width:580px){
    .card{
        width: 200px;
        height: 200px;
    }
    .container{
        height:105vh ;
    }
    .fix-2{
        font-size: 70px;
    }
    
.fix-1{
    height: 115vh;
}
@media (max-width:500px){
    .fix-7{
        font-size: 72px;
    }
}
  
}
@media (max-width:480px){
    .cards{
        flex-wrap: nowrap;
        flex-direction: column;
        height: auto;
    }
    .card{
        width: 200px;
        height: 200px;
        margin: 20px 0px;
    }
    .container{
        height:140vh;
    }
    h1{
        /* padding-top: 50px; */
        font-size: 70px;
        font-weight: 800;
    }
    .O-h1{
        font-size: 120px;
        margin-right: 15px;
        font-weight: 800;
}

.fix-1{
    height: 150vh;
}
.fix-2{
    font-size: 52px;
}
.fix-5{
    font-size: 60px;
}
}

@media (max-width:400px){
    .fix-6{
        font-size: 50px;
    }
    .fix-7{
        font-size: 60px;
    }
}
@media (max-width:350px){
    h1{
        /* padding-top: 50px; */
        font-size: 55px;
        font-weight: 800;
    }
    .O-h1{
        font-size: 100px;
        margin-right: 15px;
        font-weight: 800;
}
.fix-1{
    height: 150vh;
}
.fix-3{
    font-size: 44px;
}
.fix-5{
    font-size: 50px;
}
}
@media (max-width:320px){
    .fix-6{
        font-size: 42px;
    }
}