:root {
  --colortext: #ffbb00;
}

/*-------------------- individual_award --------------------*/
/*body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }*/
/* Add styles for text color change */
.overlay.over .text {
  color: white; /* Change text color to white when overlayed */
}

.awards-section {
  align-items: center;
}

.awards-container {
  padding-top: 10px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
}

.award-card {
  position: relative;
  width: 400px; /* Initial width */
  background-color: rgb(243, 243, 243);
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  border-color: #000000;
  transform: scale(1);
  transition: transform 0.3s;
  height: 320px;
}
@media screen and (max-width: 1400px) {
  .award-card {
    width: 300px;
  }
}
@media screen and (max-width: 1280px) {
  .award-card {
    width: 280px;
  }
}

/* Expand the card on hover */
.award-card:hover {
  transform: scale(1.05);
  /*width: 300px; /* Expanded width */
  z-index: 2;
}

.award-photo {
  flex: 1;
  position: absolute;
  top: 0;

  height: 100%;
  background-color: #ffffff;
  clip-path: polygon(73% 0, 100% 0, 100% 69%, 76% 100%, 52% 100%);
  clip-path: polygon(63% 0, 100% 0, 100% 40%, 74% 100%, 50% 100%, 63% 0);
  clip-path: polygon(36% 0, 100% 0, 100% 39%, 74% 100%, 50% 100%, 36% 0);
  clip-path: polygon(77% 0, 100% 0, 100% 50%, 59% 100%, 25% 100%, 76% 0);
  clip-path: polygon(85% 0, 100% 0%, 100% 100%, 15% 100%);
  clip-path: polygon(100% 0, 100% 100%, 20% 100%, 80% 0, 80% 0);
  clip-path: polygon(100% 0, 100% 100%, 25% 100%, 75% 0, 75% 0);
  transition: transform 0.3s, left 0.3s, width 0.3s;
  filter: brightness(120%);
  z-index: 2;
}

.award-photo img {
  position: relative;
  width: 100%;
  height: 100%;

  object-fit: cover;
}
.pushright_-34 {
}
.award-card:hover {
  transform: scale(1.05);

  width: 500px;
  transition: all 0.6s ease-in-out;
}
@media screen and (max-width: 1400px) {
  .award-card:hover {
    width: 40vw; /* Distribute cards evenly */
  }
}
@media screen and (max-width: 1200px) {
  .award-card:hover {
    width: 33vw; /* Distribute cards evenly */
  }
}

.award-card:hover img {
  position: absolute;
}

.award-card:hover .award-photo {
  transform: translateX(-10px);

  left: -12%;

  width: calc(100% + 100px);
  height: 110%;
  clip-path: polygon(29% 0, 100% 0, 100% 100%, 49% 100%, 19% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 38%, 52% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 38%, 75% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 74% 100%, 50% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 50% 100%, 0 100%);

  transition: all 0.6s ease-in-out;
  transform-origin: 0 0;
  filter: brightness(70%);
}
.award-card:hover .award-photo::after {
  background: linear-gradient(42deg, #b9910e00, #ffef6100);
  transition: all 0.6s ease-in-out;
}

.gradfade {
  animation-name: gradFade;
  animation-duration: 5s;
}
@keyframes gradFade {
  from {
    background: linear-gradient(42deg, #b9910e00, #ffef6100);
    opacity: 0.7;
  }
  to {
    background: linear-gradient(42deg, #b9910e00, #ffef6100);
  }
}

.award-details {
  position: relative;
  padding-top: 30px;
  top: 0;
  transition: background-color 0.3s;
  z-index: 1000;
  padding-left: 20px;
  width: 180px;
  z-index: 2; /* Ensure the text is above the overlay */
}

.award-card:hover .award-details {
  /* background-color: rgba(255, 255, 255, 1);*/
}

h2 {
  margin: 0;
  font-family: "Poppins", sans-serif;

  font-size: 2rem;
  font-weight: 800;
}
.uppercase {
  text-transform: uppercase;
}

p {
  margin: 5px 0;
  font-size: 1.5rem;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  line-height: 2.5rem;
  text-justify: left;
  text-justify: inter-word;
  text-align: left;
  display: block;
  text-align-last: left;
}

.award-year-container {
  text-align: center;
  background-color: #f0f0f000;
  padding: 15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.award-year {
  font-family: "Poppins", sans-serif;
  font-size: 2.8rem;
  font-weight: 600;
  color: #3c53b8;
  color: #ffffff;
}

/* Add the clip-path styles here */
.award-card .award-photo {
  /*clip-path: polygon(375px 0, 710px 0, 710px 530px, 469px 530px);*/
}
/* Overlay styles here... */
.award-card .award-photo::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(42deg, #15426d 50%, #59117a);
  opacity: 0.4; /* Initially hidden */
  transition: opacity 0.3s;
}

.award-card:hover .award-photo::after {
  opacity: 0.2; /* Show the white overlay on hover */
}

a {
  color: inherit;
  text-decoration: none;
}
.base-text,
.overlay-text {
  position: absolute;

  top: 0;
  left: 0;
  width: 65%;

  display: flex;
  flex-direction: column;

  align-items: flex-start;
  padding: 20px;
  box-sizing: border-box;
}
.base-text {
  z-index: -1; /* Base text below the overlay */
  background-image: linear-gradient(45deg, #161736, #5c49b1);
  /* background-image: linear-gradient(45deg, var(--colortext), var(--colortext));*/

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.overlay-text {
  color: #ffffff;
  /* color: var(--colortext);*/
  clip-path: polygon(63% 0, 100% 0, 100% 40%, 74% 100%, 50% 100%, 63% 0);
  clip-path: polygon(36% 0, 100% 0, 100% 39%, 74% 100%, 50% 100%, 36% 0);
  clip-path: polygon(77% 0, 100% 0, 100% 50%, 59% 100%, 25% 100%, 76% 0);
  z-index: 2000;
  display: none;
}
.award-card:hover .overlay-text {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 50% 100%, 0 100%);
  width: 100%;
  display: block;
}