/* Add this CSS to your styles.css file or directly to your HTML file */

/* Define keyframe animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Apply animations and transitions to elements */
.welcome-section > div {
    animation: fadeIn 1s ease-out; /* Apply fadeIn animation to the div inside welcome-section */
}

.navbar li {
    animation: slideInFromLeft 0.8s ease-out forwards; /* Apply slideInFromLeft animation to each list item in navbar */
}

.resources-section .card {
    animation: fadeIn 1s ease-out; /* Apply fadeIn animation to each card in resources-section */
    transition: transform 0.3s ease-out; /* Add smooth transition to card hover */
}

.resources-section .card:hover {
    transform: scale(1.05); /* Enlarge card on hover */
}

.about-section .team-member {
    animation: fadeIn 1s ease-out; /* Apply fadeIn animation to each team member */
    transition: transform 0.3s ease-out; /* Add smooth transition to team member hover */
}

.about-section .team-member:hover {
    animation: pulse 1s infinite; /* Apply pulse animation to team member on hover */
    transform: scale(1.05); /* Enlarge team member on hover */
}


/* Add this CSS to your styles.css file or directly to your HTML file */


.element {
    animation: pulse 5s infinite;
  }
  
  @keyframes pulse {
    0% {
      background-color: #001F3F;
    }
    100% {
      background-color: #FF4136;
    }
  }

  .element {
    width: 100%;
    height: 100%;
    animation: pulse 5s infinite;
  }
  
  @keyframes pulse {
    0% {
      background-color: #0c4a14;
    }
    100% {
      background-color: #188530;
    }
  }
  
  html,
  body {
    height: 100%;
  }

  .element {
  width: 100%;
  height: 100%;
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #8cdc75;
  }
  100% {
    background-color: #0e481e;
  }
}