*{
    margin: 0px;
    padding: 0px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    box-sizing: border-box;
}
/* navigation bar */
#nav{
    width: 100%;
    height: 20vh;
    background: white;
}
.navrap{
    width: 90%;
    margin: auto;
}
.logo{
    position: absolute;
}
.logo img{
    height: 20vh;
    padding-top: 10px;
    padding-bottom: 10px;
}
.menu{
    float: right;
    margin-top: 10px;
    padding-right:60px ;
}
.menurap{
    border-radius: 15px;
    padding: 45px;
} 
.menurap ul li{
    display: inline;
}
.menurap ul li a{
    color:  grey;
    text-decoration: none;
    font-size: 17px;
    /* padding-left: 15px;
    padding-right: 15px; */
    padding: 15px; 
}
.menurap ul li a:hover{
    color: orange;
    border-bottom: 1px solid orangered;
    /* padding: 5px; */
}
/* banner */
.ban{
    width: 100%;
    height: 70vh;
    background-image: url(banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}
.banrap{
    width: 100%;
    height: 90vh;
    /* background-color: rgba(0, 0, 0, 0.3); */
}
.banrap1{
    float: right;
    margin-top: 200px;
    margin-right: 400px; 
    margin-left: 100px;
}
.name{
   text-align: center;
}
.name h1{
    color: aliceblue;
    font-size: 70px;
    text-align: center;
}
.name h2{
    color: aliceblue;
    font-size: 55px;
    text-align: center;
}
/* middle */
.midrap{
    text-align: center;
    margin-top: 20px;
}
.midrap h1{
    color: rgb(199, 28, 85);
    font-family: cursive;
    font-size: 35px;
}
.midrap p{
    color: rgb(68, 66, 66);
    font-family: cursive;
    padding-top: 10px;
    font-size: 20px;
}
.midrap1{
    margin-top: 30px;
}
.midrap1 img{
    width: 100%;
    height: 50vh;
}
.midrap2{
    margin-top: -180px;
}
.midrap2 h1{
    text-align: center;
    color: white;
    font-family: cursive;
    font-size: 35px;
}
.midrap3{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto ;
    grid-column-gap: 10px;
    grid-row-gap: 30px;
    margin-top: 150px;
    padding-bottom: 30px;
    padding-left: 70px;
}
.container {
    position: relative;
    width: 80%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kanchi2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container:hover .overlay {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container1 {
    position: relative;
    width: 80%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kanchi4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay1 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container1:hover .overlay1 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container2 {
    position: relative;
    width: 80%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kanchi6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay2 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container2:hover .overlay2 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container3 {
    position: relative;
    width: 80%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay3 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kanchi8.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay3 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(247, 242, 242);
    font-family: cursive;
  }
  .container3:hover .overlay3 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container4 {
    position: relative;
    width: 80%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay4 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kanchi10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay4 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container4:hover .overlay4 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container5 {
    position: relative;
    width: 80%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay5 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kanchi12.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay5 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container5:hover .overlay5 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .midrap4{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto ;
    grid-column-gap: 10px;
    grid-row-gap: 30px;
    margin-top: 150px;
    padding-bottom: 30px;
    padding-left: 70px;  
    padding-right: 70px;
}
  .container6 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay6 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./pari2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay6 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container6:hover .overlay6 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container7 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay7 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./pari4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay7 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container7:hover .overlay7 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container8 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay8 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./pari6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay8 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container8:hover .overlay8 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container9 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay9 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./pari8.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay9 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container9:hover .overlay9 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container10 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay10 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./pari11.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay10 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container10:hover .overlay10 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container11 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay11 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./pari12.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay11 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container11:hover .overlay11 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .midrap5{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto ;
    grid-column-gap: 20px;
    grid-row-gap: 30px;
    margin-top: 150px;
    padding-bottom: 30px;  
    padding-left: 100px;
}
  .container12 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay12 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./nithi3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay12 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container12:hover .overlay12 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container13 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay13 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./nithi5.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay13 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container13:hover .overlay13 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container14 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay14 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./nithi7.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay14 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container14:hover .overlay14 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container15 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay15 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./nithi16.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay15 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container15:hover .overlay15 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container16 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay16 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./nithi11.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay16 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container16:hover .overlay16 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container17 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay17 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./nithi13.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay17 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(243, 237, 237);
    font-family: cursive;
  }
  .container17:hover .overlay17 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .midrap6{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto ;
    grid-column-gap: 20px;
    grid-row-gap: 30px;
    margin-top: 150px;
    padding-bottom: 30px;  
    padding-left: 100px;
    padding-right: 70px;
}
  .container18 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay18 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./c2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay18 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container18:hover .overlay18 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container19 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay19 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./c4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay19 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container19:hover .overlay19 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container20 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay20 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./c6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay20 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container20:hover .overlay20 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container21 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay21 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./c8.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay21 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container21:hover .overlay21 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container22 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay22 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./c10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay22 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container22:hover .overlay22 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container23 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay23 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./c12.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay23 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container23:hover .overlay23 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container24 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay24 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./l2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay24 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container24:hover .overlay24 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container25 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay25 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./l4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay25 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: green;
    font-family: cursive;
  }
  .container25:hover .overlay25 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container26 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay26 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./l6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay26 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container26:hover .overlay26 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container27 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay27 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./l8.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay27 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container27:hover .overlay27 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container28 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay28 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./l10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay28 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container28:hover .overlay28 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container29 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay29 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./l12.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay29 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container29:hover .overlay29 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container30 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay30 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s25.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay30 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container30:hover .overlay30 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container31 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay31 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./t3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay31 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container31:hover .overlay31 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container32 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay32 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./t5.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay32 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container32:hover .overlay32 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container33 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay33 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./t7.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay33 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container33:hover .overlay33 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container34 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay34 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./t9.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay34 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container34:hover .overlay34 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container35 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay35 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./t11.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay35 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container35:hover .overlay35 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container36 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay36 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./w2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay36 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container36:hover .overlay36 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container37 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay37 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./w4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay37 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container37:hover .overlay37 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container38 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay38 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./w6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay38 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container38:hover .overlay38 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container39 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay39 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./w8.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay39 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container39:hover .overlay39 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container40 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay40 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./w10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay40 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container40:hover .overlay40 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container41 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay41 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./w12.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay41 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container41:hover .overlay41 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container42 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay42 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kala2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay42 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container42:hover .overlay42 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container43 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay43 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kala4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay43 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container43:hover .overlay43 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container44 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay44 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kala6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay44 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container44:hover .overlay44 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container45 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay45 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kala8.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay45 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container45:hover .overlay45 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container46 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay46 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kala10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay46 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container46:hover .overlay46 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container47 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay47 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./kala12.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay47 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container47:hover .overlay47 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container48 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay48 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./hand2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay48 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container48:hover .overlay48 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container49 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay49 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./hand4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay49 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container49:hover .overlay49 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container50 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay50 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./hand6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay50 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container50:hover .overlay50 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container51 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay51 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./hand8.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay51 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container51:hover .overlay51 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container52 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay52 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./hand10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay52 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container52:hover .overlay52 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container53 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay53 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./hand12.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay53 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container53:hover .overlay53 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container54 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay54 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./print2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay54 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container54:hover .overlay54 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container55 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay55 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./print4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay55 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container55:hover .overlay55 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container56 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay56 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./print6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay56 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container56:hover .overlay56 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container57 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay57 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./print8.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay57 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container57:hover .overlay57 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container58 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay58 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./print10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay58 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    font-family: cursive;
  }
  .container58:hover .overlay58 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container59 {
    position: relative;
    width: 100%;
    max-width: 350px;
  }
  .image {
    display: block;
    width: 100%;
    height: 50vh;
  }
  
  .overlay59 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./print12.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .overlay59 p{
    text-align: center;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container59:hover .overlay59 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .midrap8{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 30px;
    margin-top: 40px;
    padding-bottom: 30px;
    /* padding-left: 10px; */
    background-color: rgb(233, 23, 93);
  }
  .box30{
    margin-top: 20px;
    padding-left: 30px;
  }
  .box30 p{
    color: white;
    padding-top: 10px;
  }
  .box30 a{
    text-decoration: none;
  }
  .box30 p:hover{
    color: rgb(58, 3, 58);
  }
  .box31{
    margin-top: 20px;
  }
  .box31 p{
    padding-top: 10px;
    color: white;
    padding-left: 30px;
  }
  .box31 p:hover{
    color: rgb(99, 5, 99);
  }
  .box32{
    margin-top: 20px;
  }
  .box32 p{
    padding-top: 10px;
    color: white;
    padding-left: 30px;
  }
  .box32 p:hover{
    color: rgb(58, 3, 58);
  }
  .box33{
    margin-top: 20px;
  }
  .box33 p{
    padding-top: 10px;
    color: white;
    padding-left: 30px;
  }
  .box34{
    margin-top: 20px;
  }
  .box34 p{
    padding-top: 10px;
    color: white;
    padding-left: 30px;
    padding-right: 30px;
  }
  .box34 span{
    color: white;
    font-weight: bolder;
  }