$secondary-navy: #042461;
$accent-blue: #5AB2FF;
$btn-color: linear-gradient(135deg, $secondary-navy, $accent-blue);
$Navbg: #012840;
$hover-text: #667eea;
$box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
$btn-shadow: 100px 0px 41px -10px rgba(255, 187.99999999999997, 0, 0) inset;
$heading-font: "Oleo Script", system-ui;


body {
  font-family: 'Poppins', sans-serif;
    background-color: #DDE6F5;

}

.hero-heading {
  font-family: $heading-font;
   color: $Navbg;
}

.tf-events-hero {
    background-color: #DDE6F5;
  display: flex;
  justify-content: center;
  align-items: center;

  p {
    color: $Navbg;
  }
}

.tf-btn {
  background: $btn-color;
  color: #fff;
  border: none;
  padding: 10px 25px;
  border-radius: 30px;
  box-shadow: $box-shadow;
  transition: all 0.3s ease;

  &:hover {
    color: $hover-text;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(60, 15, 88, 0.5);
  }
}

.event-card {
  background: #fff;
  border: 1px solid #eee;
  transition: all 0.3s ease;

  .event-date {
    font-weight: bold;
    color: $Navbg;   // 🔹 Event date color changed to Navbg
    font-size: 14px;
    text-transform: uppercase;
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: $box-shadow;
  }
  h5{
    color: $Navbg;
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
  }
  p{
        color: $Navbg;
        font-weight: 400;
        font-size: 14px;
  }
}

.past-event-card {
  img {
    width: 100%;         // 🔹 full width
    height: 220px;       // 🔹 fixed height
    object-fit: cover;   // 🔹 crop properly instead of stretching
    transition: all 0.3s ease;
  }

  &:hover img {
    transform: scale(1.05);
  }

  h6 {
    color: $Navbg;
    font-family: $heading-font;
    font-size: 22px;
    font-weight: 600;
  }
     p{
      color: $Navbg;
      text-align: center;
      text-align: left;
    font-size: 15px;
    font-weight: 400;
    }
}

.tf-events-cta {
    background-color: #DDE6F5;
    h2{
font-family: $heading-font;
font-size: 45px;
color: $Navbg;
text-align: justify;

    }
    p{
      color: $Navbg;
      text-align: center;
      text-align: justify;
          font-size: 17px;
    font-weight: 400;
    }

  input {
    border-radius: 30px;
    padding: 10px 20px;
    border: 1px solid $Navbg;
    background-color: transparent;
  }

  button {
    border-radius: 30px;
  }
}