body {
    margin: 0;
    background: #fff;
    color: #000;
}

  h3{
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
  }

.header {
    background: linear-gradient(to bottom, #a0e7f5, #fff);
    background-image: url("img/Fish\ Explorer\ Island\ .png");
    text-align: center;
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    flex-wrap: wrap;
}

.hero-image {
    width: 200px;
    height: auto;
    margin: 10px;
}

.hero-text {
    max-width: 400px;
    background: #d7f1ff;
    padding: 20px;
    border-radius: 10px;
    margin: 10px;
    margin-left: 600px;
}


.hero-text h1,h2{
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.hero-text p{
  font-family: "KoHo", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sponsors h3{
  font-family: "Kurale", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;

}


.sponsors, .events, .projects, .footer {
    text-align: center;
    padding: 40px 20px;
    max-width: 1250px;
    margin: 0 auto;
}


.sponsor-logos img {
    height: 100px;
    margin: 20px;
}

.main-banner{
    display: flex;
    align-items: center;
    justify-content: center;
}

 .eventcards img, .project-cards .card img {
    width: 287px;
    height: 322px;
}

.project-cards, .event-cards {
    display: flex;
    justify-content: center;
    gap: 100px;
    flex-wrap: wrap;
}


.card h1 , .eventcards h1{
      font-family: "Lilita One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
}

.card p, .event-cards p{
    font-family: "Libre Caslon Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;

}
.card .date, .event-cards .date{
    border-top: 1px solid rgb(0, 0, 0);
    padding-top: 2px;

}



.card button{
  font-family: "Lexend Exa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: #fff;
  font-size: 13px;   
  border: 1px solid black; 

}

.card, .eventcards {
    text-align: left;
    width: 287px;
  
}

.more{
  font-family: "Lexend Exa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: #fff;
  font-size: 20px;  
  margin-top: 30px;
  border: none;
}

@media (max-width: 700px) {
  .header {
    background-position: center;
    height: 700px;
    background-size: cover;

  }

  .hero {
    flex-direction: column;
    padding: 20px;

    
  }

  .hero-image {
    width: 300px;
    margin: 10px auto;
  }

  .hero-text {
    margin-left: 0;
    margin: 10px auto;
    padding: 15px;
    max-width: 90%;
    font-size: 0.95rem;
    height: auto;
    width: auto;
  }

  .hero-text h1,
  .hero-text h2 {
    font-size: 1.5rem;
    text-align: center;
  }

  .hero-text p {
    font-size: 1rem;
    text-align: center;
  }

  .sponsors,
  .events,
  .projects,
  .footer {
    padding: 30px 15px;
  }

  .sponsor-logos img {
    height: 60px;
    margin: 10px;
  }

  .main-banner {
    flex-direction: column;
  }

    .main-banner iframe {
        width:300px;
        height:250px;
  }
  
  h3{
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
  }

  .events h3,
  .projects h3 {
    font-size: 1.5rem;
  }

  .eventcards img,
  .project-cards .card img {
    width: 90%;
    height: auto;
  }

  .project-cards {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .card {
    width: 90%;
    text-align: center;

  }

  .card h1 {
    font-size: 1.2rem;
  }

  .card p,
  .card .date {
    font-size: 1rem;
  }

  .card button {
    font-size: 0.9rem;
    padding: 6px 12px;
    margin-top: 10px;
  }
}