/* Modern font import and basic reset */
@import url('https://googleapis.com');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: #04b3aa;
  background-image: 
    radial-gradient(at 0% 0%, hsla(177,93%,36%,1) 0px, transparent 50%),
    radial-gradient(at 50% 0%, hsla(220,85%,57%,1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsla(265,80%,60%,1) 0px, transparent 50%),
    radial-gradient(at 50% 100%, hsla(177,90%,25%,1) 0px, transparent 50%);
  background-attachment: fixed;
  overflow-y: auto;
  overflow-x: hidden;
}

  


/* Navigation Bar (Header) */
.one {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px); /* Modern frosted glass effect */
  padding: 15px 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.one a {
  text-decoration: none;
  color: darkolivegreen;
  font-weight: 600;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  transition: color 0.3s ease;
}

.one :hover {
  color: #000;
}

/* Menu links */
.menus {
  color: #222;
  display: flex;
  gap: 20px;
  text-decoration: none;
  font-weight: 500;
}

/* Hero Section */
.three {
  color: aliceblue;
  position: relative; /* Changed from absolute for better mobile responsiveness */
  margin: 100px auto;
  max-width: 800px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* Section backgrounds */
#About, #Service, #Registration {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Grid layout for cards (Replaces former .four layout) */
.four {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  padding: 40px 4%;
}

/* Smooth Images */
.smooth-image {
  width: 100%;
  height: 220px;
  object-fit: cover; /* Prevents image stretching */
  border-radius: 16px;
  transition: transform 0.3s ease;
}

.smooth-image:hover {
  transform: scale(1.05); /* Zoom effect on hover */
}

/* Card Shadow Upgrades */
.all {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  padding: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.all:hover {
  transform: translateY(-5px); /* Lift up effect on hover */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}



/* 📱 Mobile Responsiveness */
@media screen and (max-width: 700px)