.achievementsNew{
    padding: 5% 12%;
    background-color: rgba(244, 164, 96, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  
  .achievementsNew .achievementText{
    margin-left: 10px;
  }
  
  .achievementsNew .achievementText h2{
    margin-bottom: 0;
    color: #fd4d40;
    font-family: 'Indie Flower', cursive;
    font-weight: 300;
  }
  
  .achievementsNew .achievementText h1{
    font-size: 1.75rem;
    font-weight: 400;
    margin-top: 0;
  }
  
  .achievementsNew .achievementText p{
    font-size: 16px;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 380;
    margin: 5px 0 5px 0;
  }
  
  .achievementsNew .successImage img{
    width: 500px;
    height: 400px;
  }
  
  @media screen and (max-width: 1250px) {
    .achievementsNew .successImage img{
      width: 450px;
      height: 425px;
    }
  
    .achievementsNew .achievementText h1{
      font-size: 1.5rem;
      font-weight: 400;
    }
    
  }
  
  @media screen and (max-width: 1050px) {
    .achievementsNew .successImage img{
      width: 400px;
      height: 375px;
    }
  
    .achievementsNew{
      flex-direction: column;
    }
  
    .achievementsNew .achievementText h1{
      font-size: 1.5rem;
      font-weight: 400;
    }
  }
  
  @media screen and (max-width: 600px) {
    .achievementsNew .successImage img{
      width: 350px;
      height: 325px;
    }
}

.achievementsNew .reveal{
    transform: translateX(-100px);
    position: relative;
    opacity: 0;
    transition: all ease 2s;
}

.achievementsNew .newMove .reveal{
    transform: translateX(100px);
    position: relative;
    opacity: 0;
    transition: all ease 2s;
}

.successImage.reveal.active,  .achievementText.reveal.active{
    transform: translateX(0px);
    opacity: 1;
}

/***********************************************************************
    ABOVE PART IS DONE FOR NOW
************************************************************************/
.achievementCategory{
  padding: 2rem 12% 4rem 12%;
  background-color: rgba(128, 128, 128, 0.4);
}

.achievementCategory .achievementHeading h1{
  font-size: 2rem;
  font-weight: 400;
}

.achievementCategory .achievementHeading{
  padding-bottom: 50px;
}

.achievementCategory .topicsParticipated h1{
  font-size: 1.25rem;
  font-weight: 400;
}

.achievementCategory i{
  font-size: 3.5rem;
  padding-bottom: 20px;
}

.topicsParticipated{
  display: flex;
  justify-content: space-between;
}

.ideathon, .hackathon, .sports, .research{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.ideathon i, .ideathon h1{
  color: red;
}

.sports i, .sports h1{
  color: green;
}

.hackathon i, .hackathon h1{
  color: orange;
}

.research i, .research h1{
  color: rgb(54, 178, 227);
}

.achievementCategory .reveal{
  position: relative;
  opacity: 0;
  transition: all ease 3s;
}

.topicsParticipated.reveal.active{
  opacity: 1;
}


@media screen and (max-width: 650px) {
  .achievementCategory .achievementHeading h1{
    font-size: 1.5rem;
    font-weight: 380;
  }

  .achievementCategory .topicsParticipated h1{
    font-size: 1.05rem;
    font-weight: 400;
  }

  .topicsParticipated{
    flex-direction: column;
  }
}

/**************************************************************************
    OUR WORK OVER HERE
**************************************************************************/

.studentAchivement{
  padding: 2rem 12% 0 12%;
}

.studentAchivement h1{
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 0;
}

@media  screen and(max-width: 900px) {
  .studentAchivement h1{
    font-size: 1.25rem;
    font-weight: 400;
  }
}

