@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@300&family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@300&family=Roboto:wght@300&family=Ubuntu:wght@300&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-family: 'Nunitio';
}

a{
    text-decoration: none;
    color: black;
}

.Container
{
   display: grid;
   width: 80%;
   grid-template-columns: repeat(4,16%);
   /* grid-template-rows: 2% 10% 10% 10% 10% 5% 10% 10% 10%; */
   grid-gap: 30px 11%;
   margin: 0px auto;
}



.heading
{
grid-column: 1/5;
font-family: Poppins;
font-weight: 1000;
font-size: 18.5px;
margin-top: 5px;
}


.First-Img
{
    grid-column: 1/2;
    background-color:white;
}

.Sec-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Third-Img
{
    grid-column: 3/4;
    background-color: white;
}

.Fourth-Img
{
    grid-column: 4/5;
    background-color: white;
}


.Fifth-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Sixth-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Seventh-Img
{
    grid-column: 3/4;
    background-color: white;
}

.Eight-Img
{
    grid-column: 4/5;
    background-color: white;
}

.Nin-Img
{
    grid-column: 1/2;
}

.Ten-Img
{
    grid-column: 2/3;
}


.Eleven-Img
{
    grid-column: 3/4;
    background-color:white;
}

.Twl-Img
{
    grid-column: 4/5;
    background-color: white;
}

.Thirteen-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Fourteen-Img
{
    grid-column: 2/3;
    background-color: white;
}


.Fifteen-Img
{
    grid-column: 3/4;
    background-color: white;
}



.Seventeen-Img
{
    grid-column: 4/5;
    background-color: white;
}

.Eighteen-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Nineteen-Img
{
    grid-column: 2/3;
    background-color: white;
}


.Twenty-Img
{
    grid-column: 3/4;
    background-color: white;
}

.Twentyone-Img
{
    grid-column: 4/5;
    background-color: white;
}


.pastevents
{
    grid-column: 1/5;
    text-align: center;
    font-family: ubuntu;
    font-weight: bold;
    font-size: 20px;
    margin-top: 200px;
    
}

.Twentytwo-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Twentythree-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Twentyfour-Img
{
    grid-column: 3/4;
}

.Twentyfive-Img
{
    grid-column: 4/5;
}


.Twentysix-Img
{
    grid-column: 1/2;
    background-color: whitel
}

.Twentyseven-Img
{
    grid-column: 2/3;
    background-color:  white;
}

.Twentyeight-Img
{
    grid-column: 3/4;
    background-color:  white;
}

.Twentynine-Img
{
    grid-column: 4/5;
    background-color: white;
}


.Thirty-Img
{
    grid-column: 1/2;
    background-color:  white;
}

.Sixteen-Img
{
    grid-column: 2/3;
    background-color:white;
}




.card
{
    width: 15rem;
    background-color:white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: .5rem .5rem .5rem rgba(0,0,0,0.1);
    border-radius: 17px;
    background-color: rgb(241, 237, 237);
    
    
}

.card:hover
{
    transform: scale(1.05);
    transition: all 1s ease;
    background-color: rgb(214, 214, 214);
    
}
   


 .card-img
{
    width: 100%;
    height: 10rem;
    object-fit: cover;
    border-radius: 15px;
    border-color: 1px solid black;
    

}

.mid-img
{
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 10%;
    margin-top: -3rem;
    border: 5px solid #fff;
    
}

h1
{
    text-align: center;
}

h4.event_h4
{
    font-size: 14px;
    font-weight: 300;
    font-family:Nunito;
    margin-top: 3px;
    padding: 5px 5px;

}

h3.event_h3
{
    font-size: 15px;
    font-family:Nunito;
    margin-top: 5px;
    font-weight: 800;

}





/****************************** mobile view ******************************/


@media only screen and (max-width:450px)  {
    .Container{
       display: block;
    }
    .nav.mt-4{
        justify-content: center;
    }

    .mt-4.text-sm.opacity-8.pr-lg-4{
        margin-left:3px;
    }
      
    .card{
        grid-gap: 10px ;
        margin: 0 auto;
    }        
       
    .pastevents{
        margin: 30px auto;
   }

   .heading{
   margin-bottom: 30px;
    font-size: 12px;
 }


 
}

/* ***********************tablet view************************* */

 
@media (min-width: 450.1px) and (max-width: 768px){
    .Container{
        width: 80%;
        grid-template-columns: repeat(2, 50%);
        grid-gap:20px  ;
       
    } 
.First-Img
{
    grid-column: 1/2;
    background-color:white;
}

.Sec-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Third-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Fourth-Img
{
    grid-column: 2/3;
    background-color: white;
}


.Fifth-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Sixth-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Seventh-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Eight-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Nin-Img
{
    grid-column:1/2 ;
}

.Ten-Img
{
    grid-column: 2/3;
}


.Eleven-Img
{
    grid-column: 1/2;
    background-color:white;
}

.Twl-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Thirteen-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Fourteen-Img
{
    grid-column: 2/3;
    background-color: white;
}


.Fifteen-Img
{
    grid-column: 1/2;
    background-color: white;
}



.Seventeen-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Eighteen-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Nineteen-Img
{
    grid-column: 2/3;
    background-color: white;
}


.Twenty-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Twentyone-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Twentytwo-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Twentythree-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Twentyfour-Img
{
    grid-column: 1/2;
}

.Twentyfive-Img
{
    grid-column: 2/3;
}


.Twentysix-Img
{
    grid-column: 1/2;
    background-color: whitel
}

.Twentyseven-Img
{
    grid-column: 2/3;
    background-color:  white;
}

.Twentyeight-Img
{
    grid-column: 1/2;
    background-color:  white;
}

.Twentynine-Img
{
    grid-column: 2/3;
    background-color: white;
}


.Thirty-Img
{
    grid-column: 1/2;
    background-color:  white;
}

.Sixteen-Img
{
    grid-column: 2/3;
    background-color:white;
}


.card{
    grid-gap: 0px 10px 5px 5px ;
    margin: 0 auto;
}        
   
.pastevents{
    grid-column: 1/3;
    margin: 0%;
}

.heading{
    display: block;
/* grid-column: 1/3; */
font-size: 20px;
}

} 


/****************************** longer tablet- view ******************************/

@media (min-width: 768.1px) and (max-width: 1024px){
    .Container{
        width: 90%;
        grid-template-columns: repeat(3,30%);
        grid-gap:38px;

    } 

.First-Img
{
    grid-column: 1/2;
    background-color:white;
}

.Sec-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Third-Img
{
    grid-column: 3/4;
    background-color: white;
}

.Fourth-Img
{
    grid-column: 1/2;
    background-color: white;
}


.Fifth-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Sixth-Img
{
    grid-column: 3/4;
    background-color: white;
}

.Seventh-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Eight-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Nin-Img
{
    grid-column:3/4 ;
}

.Ten-Img
{
    grid-column: 1/2;
}


.Eleven-Img
{
    grid-column: 2/3;
    background-color:white;
}

.Twl-Img
{
    grid-column: 3/4;
    background-color: white;
}

.Thirteen-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Fourteen-Img
{
    grid-column: 2/3;
    background-color: white;
}


.Fifteen-Img
{
    grid-column: 3/4;
    background-color: white;
}



.Seventeen-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Eighteen-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Nineteen-Img
{
    grid-column: 3/4;
    background-color: white;
}


.Twenty-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Twentyone-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Twentytwo-Img
{
    grid-column: 1/2;
    background-color: white;
}

.Twentythree-Img
{
    grid-column: 2/3;
    background-color: white;
}

.Twentyfour-Img
{
    grid-column: 3/4;
}

.Twentyfive-Img
{
    grid-column: 1/2;
}


.Twentysix-Img
{
    grid-column: 2/3;
    background-color: whitel
}

.Twentyseven-Img
{
    grid-column: 3/4;
    background-color:  white;
}

.Twentyeight-Img
{
    grid-column: 1/2;
    background-color:  white;
}

.Twentynine-Img
{
    grid-column: 2/3;
    background-color: white;
}


.Thirty-Img
{
    grid-column: 3/4;
    background-color:  white;
}

.Sixteen-Img
{
    grid-column: 1/2;
    background-color:white;
}


.card{
    grid-gap: 0px 10px 5px 5px ;
    margin: 0 auto;
}        
   
.pastevents{
    grid-column: 1/3;
    margin: 0%;
}

.heading{
display: grid;
grid-column: 1/4; 
font-size: 24px;

}

.pastevents {
    margin-top: 60px;
    font-size: 50px;
    display: grid;
    grid-column: 1/4;
    justify-content: center;
}

.container.pt-4 {
    
    display: block;
}

} 



/*Animation on social media started*/


.wrapper .button{
  display: inline-block;
  height: 40px;
  width: 40px;
  float: left;
  margin: 0 13px;
  overflow: hidden;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease-out;
}
.wrapper .button:hover{
  width: 132px;
  background-color: #12C6FF;
  /*margin-top: 30px;*/
}
.wrapper .button .icon{
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 40px;
  transition: all 0.3s ease-out;
}


/*Text inside icons*/

.wrapper .button:nth-child(1):hover .icon{          
  background: #333;
}
.wrapper .button:nth-child(2):hover .icon{
  background: #0077b5;
}
.wrapper .button:nth-child(3):hover .icon{
  background: #7289DA;
}
.wrapper .button .icon i{
  font-size: 25px;
  line-height: 45px;
  transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
  color: #fff;
}
.wrapper .button span{
  font-size: 20px;
  font-weight: 800;
  line-height: 40px;
  margin-left: 10px;
  /*margin-left: 6px;*/
  transition: all 0.3s ease-out;

}

/*Text inside icons*/

.wrapper .button:nth-child(1) span{        
  color: #fff;
  margin-left: 6px;
}
.wrapper .button:nth-child(2) span{
  color:  #fff;
  margin-left: 0px;
}
.wrapper .button:nth-child(3) span{
  color: #fff;
  margin-left: 6px;
}

/*Text inside icons*/



.wrapper .button:nth-child(1).icon{          
  background: #333;
}
.wrapper .button:nth-child(2).icon{
  background: #0077b5;
}
.wrapper .button:nth-child(3).icon{
  background: #7289DA;
}



/*Animation on social media closed*/