@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
 @import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@579&family=Zen+Dots&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500&display=swap');


.team-title{
  font-size: 45px;
  margin-top: 50px;
  color: var(--theme-color);
  font-weight: 700;
}

.year-heading{
  margin-top: 40px;
  color: var(--theme-color);
  font-size: 32px !important;
  font-weight: 700 !important;
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
}

 .AllBig {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
 }


.coloured-line{
  border-top:var(--theme-color) 3px solid;
  width: 40px;
  margin-left: calc(50% - 20px);
  margin-top: -2px;
}
 /* #about {
    background: url(./about-bg.jpg) center top no-repeat fixed;
    background-size: cover;
    padding: 60px 0 40px 0;
    position: relative;
}


#about::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    z-index: 9;
}


#about .container {
    position: relative;
    z-index: 10;
} */

 .container {
   background: rgba(250, 250, 250, 0.4);
 }


 .container .quote {
   display: flex;
   justify-content: center;
   align-items: center;
 }


 .quote1 {
   font-size: 50px;
   font-family: 'MuseoModerno';
 }


 h1 {
   margin: 0;
   padding: 0;
   font-size: 60px;
   cursor: pointer;
 }


 h1 span {
   display: inline-flex;
   color: var(--theme-color);
   font-family: 'MuseoModerno' !important;
 }


 h1 span:nth-child(even) {
   overflow: hidden;
   transition: ease-in-out 0.5s;
   color: rgb(53, 53, 53);
   letter-spacing: -1em;
 }


 h1:hover span:nth-child(even) {
   letter-spacing: 0;
   cursor: pointer;
 }


 h1:hover span:nth-child(2) {
   transition-delay: 0s;

 }


 h1:hover span:nth-child(4) {
   transition-delay: 0.3s;

 }


 h1:hover span:nth-child(6) {
   transition-delay: 0.6s;
 }


 .grey-line {
   border-top: rgb(148, 148, 148) 1px solid;
   height: 1px;
   width: 120px;
   margin-left: calc(50% - 60px);
   z-index: -1;
 }


 .coloured-line {
   border-top: var(--theme-color) 3px solid;
   width: 40px;
   margin-left: calc(50% - 20px);
   margin-top: -2px;
 }


 .container {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   margin: 40px 0;
 }

 .cards {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-gap: 0.1rem;
 }

 /* Screen larger than 600px? 2 column */
 @media (min-width: 600px) {
   .cards {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 /* Screen larger than 900px? 3 columns */
 @media (min-width: 900px) {
   .cards {
     grid-template-columns: repeat(3, 1fr);
   }
 }

  .cards_con {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-gap: 0.1rem;
  }

  /* Screen larger than 600px? 2 column */
  @media (min-width: 500px) {
    .cards_con {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Screen larger than 900px? 3 columns */
  @media (min-width: 900px) {
    .cards_con {
      grid-template-columns: repeat(4, 1fr);
    }
  }


 .container .card {
   position: relative;
   width: 200px;
   height: 200px;
   margin: 20px;
   overflow: hidden;
   box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.308);
   border-radius: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: none;
 }


 .inner-img {
   width: 200px;
   height: 200px;
   transition: 0.6s ease-in-out;
   position: relative;

 }


 /* .inner-img:hover {
   transform: scale(1.03);
   transition: 0.6s ease-in-out;
 } */


 .container .card .content {
   position: absolute;
   bottom: -80px;
   width: 100%;
   height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2;
   flex-direction: column;
   white-space: nowrap;
   backdrop-filter: blur(10px);
   background-color: rgba(34, 34, 34, 0.5);
   box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.3);
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   transition: bottom 0.5s;
   transition-delay: 0.65s;
 }




 .content {
   margin-top: 1rem;
 }


 .container .card:hover .content {
   bottom: 0;
   transition-delay: 0s;
 }


 .container .card .content .contentBx h3 {

   color: var(--theme-color);
   font-weight: bolder !important;
   font-size: 18px;
   text-align: center;
   margin: 40px 0 1px;
   line-height: 1.1em;
   transition: 0.5s;
   transition-delay: 0.4s;
   opacity: 0;
   transform: translateY(-20px);
   font-family: 'MuseoModerno',
   sans-serif !important;
   text-shadow: 0 -0px 15px rgba(0, 0, 0, 0.2);
   padding-top: 20px;

 }


 .facions {
   margin-bottom: 2.5rem;
   /* background-color: #000000;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   border-top-right-radius: 10px;
   border-top-left-radius: 10px; */
 }

 .facions i {
   
   color: var(--theme-color);
   transition: 0.3s ease-in-out;
   padding: 2px;
 }

 /* .facions i:hover {
   color: rgb(36, 36, 36);
   transition: 0.2s;
 } */


 .container .card:hover .content .contentBx h3 {
   opacity: 1;
   transform: translateY(-10px);
 }