/* banner */
.ban {
    width: 100%;
    height: 60vh;
    background-image: url(./banner_gallery.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
/* middleb*/
.midb{
    width:100%;
    height: 80vh;
    color:rgb(229, 18, 132)
}
.midb h1{
    text-align: center;
}
.midrapb{
    width: 80%;
    margin: auto;
     padding-top: 20px; 
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
}
.boxb{
    border: 2px solid rgb(229, 18, 132);
}
.boxb img{
    width: 100%;
    height: 100%;
}
.boxb1 h1{
    text-align: center;
    font-size:20px;
}
.boxb1 p{
    text-align: center;
    font-weight: bolder;
    color:rgb(229, 18, 132);
    
}

/* middleb1*/
.midb1{
    width:100%;
    height: 80vh;
    color:rgb(229, 18, 132)
}
.midb1 h1{
    text-align: center;

}
.midrapb1{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
}
.boxb2{
    border: 2px solid rgb(229, 18, 132);
}
.boxb2 img{
    width: 100%;
    height: 100%;
}
.boxb3 h1{
    text-align: center;
    font-size:20px;

}
.boxb3 p{
    text-align: center;
    font-weight: bolder;
    color:rgb(229, 18, 132);
    
}
/*middleb2*/
.midb2{
    width:100%;
    height: 80vh;
    color:rgb(229, 18, 132)
}
.midb2 h1{
    text-align: center;
}
.midrapb2{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
}
.boxb4{
    border: 2px solid rgb(229, 18, 132);
}
.boxb4 img{
    width: 100%;
    height: 100%;
}
.boxb5 h1{
    text-align: center;
    font-size:20px;

}
.boxb5 p{
    text-align: center;
    font-weight: bolder;
    color:rgb(229, 18, 132);
    
}

/*middleb3*/
.midb3{
    width:100%;
    height: 80vh;
    color:rgb(229, 18, 132)
}
.midb3 h1{
    text-align: center;
}
.midrapb3{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
}
.boxb6{
    border: 2px solid rgb(229, 18, 132);
}
.boxb6 img{
    width: 100%;
    height: 100%;
}
.boxb7 h1{
    text-align: center;
    font-size:20px;

}
.boxb7 p{
    text-align: center;
    font-weight: bolder;
    color:rgb(229, 18, 132);
    
}

/*middleb4*/
.midb4{
    width:100%;
    height: 80vh;
    color:rgb(229, 18, 132)
}
.midb4 h1{
    text-align: center;
}
.midrapb4{
    width: 80%;
    margin: auto;
    padding-top: 20px; 
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
}
.boxb8{
    border: 2px solid rgb(229, 18, 132);
}
.boxb8 img{
    width: 100%;
    height: 100%;
}
.boxb9 h1{
    text-align: center;
    font-size:20px;

}
.boxb9 p{
    text-align: center;
    font-weight: bolder;
    color:rgb(229, 18, 132);
    
}

/*middleb5*/
.midb5{
    width:100%;
    height: 80vh;
    color:rgb(229, 18, 132)
}
.midb5 h1{
    text-align: center;
}
.midrapb5{
    width: 80%;
    margin: auto;
     padding-top: 20px; 
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
}
.boxb10{
    border: 2px solid rgb(229, 18, 132);
}
.boxb10 img{
    width: 100%;
    height: 100%;
}
.boxb11 h1{
    text-align: center;
    font-size:20px;

}
.boxb11 p{
    text-align: center;
    font-weight: bolder;
    color:rgb(229, 18, 132);
    
}


/*middleb6*/
.midb6{
    width:100%;
    height: 80vh;
    color:rgb(229, 18, 132)
}
.midb6 h1{
    text-align: center;
}
.midrapb6{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
}
.boxb12{
    border: 2px solid rgb(229, 18, 132);
}
.boxb12 img{
    width: 100%;
    height: 100%;
}
.boxb13 h1{
    text-align: center;
    font-size:20px;

}
.boxb13 p{
    text-align: center;
    font-weight: bolder;
    color:rgb(229, 18, 132);
    
}

/*middleb7*/
.midb7{
    width:100%;
    height: 80vh;
    color:rgb(229, 18, 132)
}
.midb7 h1{
    text-align: center;
}
.midrapb7{
    width: 80%;
    margin: auto;
    padding-top: 20px; 
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
}
.boxb14{
    border: 2px solid rgb(229, 18, 132);
}
.boxb14 img{
    width: 100%;
    height: 100%;
}
.boxb15 h1{
    text-align: center;
    font-size:20px;

}
.boxb15 p{
    text-align: center;
    font-weight: bolder;
    color:rgb(229, 18, 132);
    
}