/* HERO */
.page-hero{
    padding:140px 20px 80px;
    text-align:center;
    background:linear-gradient(135deg,#00AEEF,#FF7A00);
    color:white;
}

.page-hero h1{
  font-size:clamp(24px,5vw,48px);

font-family:'Fredoka', sans-serif;
}

.page-hero p{
font-size:20px;
}

/* ACTIVITIES GRID */
.activities-section{
padding:80px 8%;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
background:#F7FBFF;
}

/* CARD */
.activity-card{
background:rgb(188, 226, 237);
border-radius:18px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
text-align:center;
transition:0.35s;
}

.activity-card img{
margin-top: 20px;
border-radius:18px;
width:90%;
height:260px;
object-fit:cover;
}

/* hover animation */
.activity-card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 14px 35px rgba(0,0,0,0.15);
}

.activity-card h3{
margin-top:18px;
font-size:24px;
font-family:'Fredoka', sans-serif;
color:#103669;
}

.activity-card p{
padding:10px 18px 25px;
color:#555;
}

/* email link style */
.email-link{
color:#fff;
text-decoration:none;
font-weight:500;
}

.email-link:hover{
text-decoration:underline;
color:#ffbe0b;
}


/* ================================= */
/* RESPONSIVE ACTIVITIES SECTION */
/* ================================= */

/* Large Screens */
@media (min-width:1400px){
  .activities-section{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Laptops */
@media (max-width:1200px){
  .activities-section{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablets */
@media (max-width:992px){

  .page-hero h1{
    font-size:34px;
  }

  .page-hero p{
    font-size:18px;
  }

  .activities-section{
    grid-template-columns: repeat(2, 1fr);
    padding:70px 6%;
  }

}

/* Large Phones */
@media (max-width:768px){

  .page-hero{
    padding:110px 20px 60px;
  }

  .page-hero h1{
    font-size:28px;
  }

  .activities-section{
    grid-template-columns:1fr;
    gap:25px;
  }

  .activity-card img{
    height:220px;
  }

}

/* Small Phones */
@media (max-width:480px){

  .page-hero h1{
    font-size:24px;
  }

  .activity-card img{
    height:200px;
  }
}
@media (hover: none){
  .activity-card:active{
    transform:scale(0.98);
  }
}