.sbox{
    margin-top: 20vh;
    margin-left: 4vw;
    margin-right: 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 6vh;
    color: black;
}
.scontainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  
    padding-left:3vw;
    row-gap: 2vh;

}
.sbox h1{
    color:grey;
}

.project-title{
    color: black;
}
.hr{
    margin: 4vh 0px;
}

.s1{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 45vh;
    width:20vw;
    margin:0px 4vw;
   

    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;
}
.s1:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.s11{
    background-image: url("html.webp");
    background-size: 100% 100%;
    height: 25vh;
    margin: 1.5vh 0px;
    overflow:hidden;



}
.s12{
    margin: 2vh;
    overflow:hidden;
}
.s13{
    margin:0px 2vh;
    overflow:hidden;
}
.s2{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 45vh;
    width:20vw;
    margin:0px 4vw;
   

    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;
}
.s2:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.s21{
    background-image: url("css.jpg");
    background-size: 100% 100%;
    height: 25vh;
    margin: 1.5vh 0px;
    overflow:hidden;



}
.s22{
    margin: 2vh;
    overflow:hidden;
}
.s23{
    margin:0px 2vh;
    overflow:hidden;
}
.s3{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 45vh;
    width:20vw;
    margin:0px 4vw;
   

    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;
}
.s3:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.s31{
    background-image: url("js.jpg");
    background-size: 100% 100%;
    height: 25vh;
    margin: 1.5vh 0px;
    overflow:hidden;



}
.s32{
    margin: 2vh;
    overflow:hidden;
}
.s33{
    margin:0px 2vh;
    overflow:hidden;
}
.s4{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 45vh;
    width:20vw;
    margin:0px 4vw;
   

    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;
}
.s4:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.s41{
    background-image: url("jquery.png");
    background-size: 100% 100%;
    height: 25vh;
    margin: 1.5vh 0px;
    overflow:hidden;



}
.s42{
    margin: 2vh;
    overflow:hidden;
}
.s43{
    margin:0px 2vh;
    overflow:hidden;
}
.s5{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 45vh;
    width:20vw;
    margin:0px 4vw;
   

    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;
}
.s5:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.s51{
    background-image: url("reastjs.png");
    background-size: 100% 100%;
    height: 25vh;
    margin: 1.5vh 0px;
    overflow:hidden;



}
.s52{
    margin: 2vh;
    overflow:hidden;
}
.s53{
    margin:0px 2vh;
    overflow:hidden;
}
.s6{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 45vh;
    width:20vw;
    margin:0px 4vw;
   

    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;
}
.s6:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.s61{
    background-image: url("nodejs.png");
    background-size: 100% 100%;
    height: 25vh;
    margin: 1.5vh 0px;
    overflow:hidden;



}
.s62{
    margin: 2vh;
    overflow:hidden;
}
.s63{
    margin:0px 2vh;
    overflow:hidden;
}
.s7{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 45vh;
    width:20vw;
    margin:0px 4vw;
   

    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;
}
.s7:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.s71{
    background-image: url("flutter-dart.png");
    background-size: 100% 100%;
    height: 25vh;
    margin: 1.5vh 0px;
    overflow:hidden;



}
.s72{
    margin: 2vh;
    overflow:hidden;
}
.s73{
    margin:0px 2vh;
    overflow:hidden;
}
.s8{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 45vh;
    width:20vw;
    margin:0px 4vw;
   

    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;
}
.s8:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.s81{
    background-image: url("python.jpg");
    background-size: 100% 100%;
    height: 25vh;
    margin: 1.5vh 0px;
    overflow:hidden;



}
.s82{
    margin: 2vh;
    overflow:hidden;
}
.s83{
    margin:0px 2vh;
    overflow:hidden;
}
.s9{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 45vh;
    width:20vw;
    margin:0px 4vw;
   

    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;
}
.s9:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.s91{
    background-image: url("c++.jpg");
    background-size: 100% 100%;
    height: 25vh;
    margin: 1.5vh 0px;
    overflow:hidden;



}
.s92{
    margin: 2vh;
    overflow:hidden;
}
.s93{
    margin:0px 2vh;
    overflow:hidden;
}

@media only screen and (min-width:500px)and (max-width:1100px)
{
    .s1{
        display: flex;
        flex-direction: column;
        background-color: #fff;
        height: 42vh;
        width:35vw;
        margin:0px 4vw;
       
    
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        transition: all 1s ease;
        overflow:hidden;
    }
    .s1:hover{
        transform:scale(1.04);
        overflow:hidden;
    }
    .s11{
        background-image: url("html.webp");
        background-size: 100% 100%;
        height: 25vh;
        margin: 1.5vh 0px;
        overflow:hidden;
    
    
    
    }
    .s12{
        margin: 2vh;
        overflow:hidden;
    }
    .s13{
        margin:0px 2vh;
        overflow:hidden;
    }
    .s2{
        display: flex;
        flex-direction: column;
        background-color: #fff;
        height: 42vh;
        width:35vw;
        margin:0px 4vw;
       
    
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        transition: all 1s ease;
        overflow:hidden;
    }
    .s2:hover{
        transform:scale(1.04);
        overflow:hidden;
    }
    .s21{
        background-image: url("css.jpg");
        background-size: 100% 100%;
        height: 25vh;
        margin: 1.5vh 0px;
        overflow:hidden;
    
    
    
    }
    .s22{
        margin: 2vh;
        overflow:hidden;
    }
    .s23{
        margin:0px 2vh;
        overflow:hidden;
    }
    .s3{
        display: flex;
        flex-direction: column;
        background-color: #fff;
        height: 42vh;
        width:35vw;
        margin:0px 4vw;
       
    
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        transition: all 1s ease;
        overflow:hidden;
    }
    .s3:hover{
        transform:scale(1.04);
        overflow:hidden;
    }
    .s31{
        background-image: url("js.jpg");
        background-size: 100% 100%;
        height: 25vh;
        margin: 1.5vh 0px;
        overflow:hidden;
    
    
    
    }
    .s32{
        margin: 2vh;
        overflow:hidden;
    }
    .s33{
        margin:0px 2vh;
        overflow:hidden;
    }
    .s4{
        display: flex;
        flex-direction: column;
        background-color: #fff;
        height: 42vh;
        width:35vw;
        margin:0px 4vw;
       
    
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        transition: all 1s ease;
        overflow:hidden;
    }
    .s4:hover{
        transform:scale(1.04);
        overflow:hidden;
    }
    .s41{
        background-image: url("jquery.png");
        background-size: 100% 100%;
        height: 25vh;
        margin: 1.5vh 0px;
        overflow:hidden;
    
    
    
    }
    .s42{
        margin: 2vh;
        overflow:hidden;
    }
    .s43{
        margin:0px 2vh;
        overflow:hidden;
    }
    .s5{
        display: flex;
        flex-direction: column;
        background-color: #fff;
        height: 42vh;
        width:35vw;
        margin:0px 4vw;
       
    
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        transition: all 1s ease;
        overflow:hidden;
    }
    .s5:hover{
        transform:scale(1.04);
        overflow:hidden;
    }
    .s51{
        background-image: url("reastjs.png");
        background-size: 100% 100%;
        height: 25vh;
        margin: 1.5vh 0px;
        overflow:hidden;
    
    
    
    }
    .s52{
        margin: 2vh;
        overflow:hidden;
    }
    .s53{
        margin:0px 2vh;
        overflow:hidden;
    }
    .s6{
        display: flex;
        flex-direction: column;
        background-color: #fff;
        height: 42vh;
        width:35vw;
        margin:0px 4vw;
       
    
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        transition: all 1s ease;
        overflow:hidden;
    }
    .s6:hover{
        transform:scale(1.04);
        overflow:hidden;
    }
    .s61{
        background-image: url("nodejs.png");
        background-size: 100% 100%;
        height: 25vh;
        margin: 1.5vh 0px;
        overflow:hidden;
    
    
    
    }
    .s62{
        margin: 2vh;
        overflow:hidden;
    }
    .s63{
        margin:0px 2vh;
        overflow:hidden;
    }
    .s7{
        display: flex;
        flex-direction: column;
        background-color: #fff;
        height: 42vh;
        width:35vw;
        margin:0px 4vw;
       
    
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        transition: all 1s ease;
        overflow:hidden;
    }
    .s7:hover{
        transform:scale(1.04);
        overflow:hidden;
    }
    .s71{
        background-image: url("flutter-dart.png");
        background-size: 100% 100%;
        height: 25vh;
        margin: 1.5vh 0px;
        overflow:hidden;
    
    
    
    }
    .s72{
        margin: 2vh;
        overflow:hidden;
    }
    .s73{
        margin:0px 2vh;
        overflow:hidden;
    }
    .s8{
        display: flex;
        flex-direction: column;
        background-color: #fff;
        height: 42vh;
        width:35vw;
        margin:0px 4vw;
       
    
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        transition: all 1s ease;
        overflow:hidden;
    }
    .s8:hover{
        transform:scale(1.04);
        overflow:hidden;
    }
    .s81{
        background-image: url("python.jpg");
        background-size: 100% 100%;
        height: 25vh;
        margin: 1.5vh 0px;
        overflow:hidden;
    
    
    
    }
    .s82{
        margin: 2vh;
        overflow:hidden;
    }
    .s83{
        margin:0px 2vh;
        overflow:hidden;
    }
    .s9{
        display: flex;
        flex-direction: column;
        background-color: #fff;
        height: 42vh;
        width:35vw;
        margin:0px 4vw;
       
    
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        transition: all 1s ease;
        overflow:hidden;
    }
    .s9:hover{
        transform:scale(1.04);
        overflow:hidden;
    }
    .s91{
        background-image: url("c++.jpg");
        background-size: 100% 100%;
        height: 25vh;
        margin: 1.5vh 0px;
        overflow:hidden;
    
    
    
    }
    .s92{
        margin: 2vh;
        overflow:hidden;
    }
    .s93{
        margin:0px 2vh;
        overflow:hidden;
    }
}