*{
    padding: 0%;
    margin: 0px;
}
.ban1{
    background-image: url(../images/banner\ pic\ 2.webp);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
}
.mid21{
    width: 100%;
    background-color:black;
    height: 65vh;
}
.mid21 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap21{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box23{
    margin-top: 20px;
}
.box23 img{
    width: 100%;
    height: 100%;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}


/* mid24 */

.mid24{
    width: 100%;
    background-color:black;
    height: 65vh;
}
.mid24 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap24{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box25{
    margin-top: 20px;
}
.box25 img{
    width: 100%;
    height: 100%;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}

/* mid25 */
.mid25{
    width: 100%;
    background-color:black;
    height: 45vh;
}
.mid25 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap25{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box26{
    margin-top: 20px;
}
.box26 img{
    width: 100%;
    height: 70%;
}
.box26 h4{
    color: white;
    font-size: 17px;
    margin-top: 10px;
}

.box26 p{
    color: gray;
    font-size: 17px;
    margin-top: 10px;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}

/* mid26 */
.mid26{
    width: 100%;
    background-color:black;
    height: 65vh;
}
.mid26 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap26{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box27{
    margin-top: 20px;
}
.box27 img{
    width: 100%;
    height: 100%;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}

/* mid27 */
.mid27{
    width: 100%;
    background-color:black;
    height: 45vh;
}
.mid27 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap27{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box28{
    margin-top: 20px;
}
.box28 img{
    width: 100%;
    height: 70%;
}
.box28 h4{
    color: white;
    font-size: 17px;
    margin-top: 10px;
}

.box28 p{
    color: gray;
    font-size: 17px;
    margin-top: 10px;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}


/* mid28 */
.mid28{
    width: 100%;
    background-color:black;
    height: 42vh;
}
.mid28 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap28{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto  ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box29{
    margin-top: 20px;
}
.box29 img{
    width: 100%;
    height: 70%;
}
.box29 h4{
    color: gray;
    font-size: 19px;
    margin-top: 10px;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}


/* mid28 */
.mid29{
    width: 100%;
    background-color:black;
    height: 43vh;
}
.mid29 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap29{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto  ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box30{
    margin-top: 20px;
}
.box30 img{
    width: 100%;
    height: 70%;
}
.box30 h4{
    color: gray;
    font-size: 19px;
    margin-top: 10px;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}

/* mid30 */
.mid31{
    width: 100%;
    background-color:black;
    height: 58vh;
}
.mid31 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap31{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto  ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box32{
    margin-top: 20px;
}
.box32 img{
    width: 100%;
    height: 70%;
}
.box32 h4{
    color:white;
    font-size: 17px;
    margin-top: 10px;
}
.box32 p{
    color: gray;
    font-size: 17px;
    margin-top: 10px;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}

/* mid32 */
.mid32{
    width: 100%;
    background-color: black;
    height:54vh;
}
.midrap32{
    width:95%;
    margin: auto;
}
.box33{
    margin-top: 20x;
}
.box33 img{
    width: 100%;
    height: 50vh;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}

/* mid33 */
.mid33{
    width: 100%;
    background-color:black;
    height: 50vh;
}
.mid33 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap33{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto  ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box34{
    margin-top: 20px;
}
.box34 img{
    width: 100%;
    height: 70%;
}
.box34 h4{
    color:white;
    font-size: 17px;
    margin-top: 10px;
}
.box34 p{
    color: gray;
    font-size: 17px;
    margin-top: 10px;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}

/* mid34 */
.mid34{
    width: 100%;
    background-color:black;
    height: 65vh;
}
.mid34 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap34{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box35{
    margin-top: 20px;
}
.box35 img{
    width: 100%;
    height: 100%;
}
/* mid35 */
.mid35{
    width: 100%;
    background-color:black;
    height: 65vh;
}
.mid35 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap35{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box36{
    margin-top: 20px;
}
.box36 img{
    width: 100%;
    height: 100%;
}
/* mid36 */
.mid36{
    width: 100%;
    background-color:black;
    height: 65vh;
}
.mid36 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap36{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box37{
    margin-top: 20px;
}
.box37 img{
    width: 100%;
    height: 100%;
}
 /* mid37 */
 .mid37{
    width: 100%;
    background-color:black;
    height: 38vh;
}
.mid37 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap37{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box38{
    margin-top: 20px;
}
.box38 img{
    width: 100%;
    height: 100%;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}

 /* mid38 */
 .mid38{
    width: 100%;
    background-color:black;
    height: 65vh;
}
.mid38 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap38{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box39{
    margin-top: 20px;
}
.box39 img{
    width: 100%;
    height: 100%;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}

/* mid39 */
.mid39{
    width: 100%;
    background-color:black;
    height: 55vh;
}
.mid39 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap39{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box40{
    margin-top: 20px;
}
.box40 img{
    width: 100%;
    height: 100%;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}


/* mid41 */
.mid40{
    width: 100%;
    background-color:black;
    height: 65vh;
}
.mid40 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap40{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box41{
    margin-top: 20px;
}
.box41 img{
    width: 100%;
    height: 100%;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}

/* mid41 */
.mid41{
    width: 100%;
    background-color:black;
    height: 70vh;
}
.mid41 h1{
    padding-top: 50px;
    padding-left: 30px;
    color: white;
    font-size: 25px; 
}
.midrap41{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
}
.box42{
    margin-top: 20px;
}
.box42 img{
    width: 100%;
    height: 100%;
}
.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}
.hover-effect:hover {
    transform: scale(1.2); 
}