* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;

        body {
            font-family: sans-serif;
            background-image: url('images/lw.jpg');
        }


        /* Overlay background */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(75, 63, 240, 0.4);*/
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.4s ease;
  }

  /*Video animation*/
  .floating-video {
    position: fixed;
    top: 1px;
    left: 10px;

    width: 220px;
    height: 320px;

    z-index: 1000;

}

.floating-video img {

  width: 100%;
  height: auto;

    /*width: 100%;
    height: 380px;*/
    /*object-fit: cover;*/

    /* Triangle shape 
    clip-path: polygon(
        50% 0,     /* top-left 
        0 100%,  /* top-right 
        100% 100%   /* bottom-left 
    );*/

    border-radius: 15rem; /* optional smooth edges */
}


  /* Floating box */
  .floating-box {
    color: rgb(37, 0, 172);
    font-family: 'georgia';
    /*background: rgb(0, 0, 0);*/
    background-image: url(images/gbg.jpg);
    width: 350px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 2.1);
    position: relative;
    animation: popIn 0.4s ease;
    border-bottom: 10px solid white;
  }

  .floating-box h2 {
    border-bottom: 3px solid yellow;
  }

  .floating-box p1 {
    color: yellow;
    font-style: italic;
    text-align: right;
    border-top: 5px solid lightblue;
  }

  .floating-box-img {
    width: 100px;
    height: auto;
  }

.merry-img {
  width: 1200px;      /* or any size you want */
  max-width: 100%;   /* keeps it responsive */
  height: auto;
}


  /* Close (X) button */
  .close-btn {
    position: absolute;
    top: -32px;
    right: 350px;
    font-size: 40px;
    font-family: 'arial black';
    color: #da1616;
    cursor: pointer;
    font-weight: bold;
  }

  .close-btn:hover {
    color: rgb(255, 255, 255);
    transform: scale(1.15);
  }

  /* Entrance animations */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  /* Exit animations */
  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes popOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.9); opacity: 0; }
  }

  /* Classes triggered when closing */
  .closing {
    animation: fadeOut 0.4s ease forwards;
  }

  .closing .floating-box {
    animation: popOut 0.4s ease forwards;
  }

  

        .topt {
            text-align: right;
            background: linear-gradient(to right, green, white, black);
            text-decoration: none;
            line-height: 2.5;
        }

        .topt a {
            color: white;
            text-align: right;
            size: 4rem;
            font-family: 'Bernard MT Condensed';
            padding: 3rem;
            text-decoration: none;
        }

        .topt a:hover {
            cursor: alias;
            transform: white;
        }

        img {
            height: 50px;
            width: auto;
        }

        .topt img {
          height: 20px;
          width: auto;
          transform: scale(1.05);
        }

        .top img:hover {
          border-bottom: 3px solid white;
          cursor: pointer;
          transform: scale(1.05)
        }

 nav {
  background: #004d40;
  padding: 10px 20px;
  position: relative;
  z-index: 9999;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  position: relative;
  z-index: 9999;
}

.logo {
  width: 120px;
}

.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
  position: relative;
  z-index: 9999;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  padding: 10px;
}

.nav-links a:hover {
  background: #003f74;
  border-radius: 5px;
}

.dropdown {
  position: relative;
  z-index: 9999;
}

.dropdown-content {
  display: none;
  position: absolute;
  background: #0a2a43;
  top: 40px;
  left: 0;
  min-width: 180px;
  border-radius: 5px;
}

.dropdown-content a {
  display: block;
  padding: 10px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* HAMBURGER ICON */
.menu-icon {
  font-size: 28px;
  color: white;
  cursor: pointer;
  display: none;
}

/* -------------------- MOBILE FIX -------------------- */
@media (max-width: 768px) {

  .menu-icon {
    display: block;
  }

  .nav-links {
    display: none;        /* Hides menu on mobile */
    flex-direction: column;
    position: absolute;
    width: 100%;
    top: 60px;
    left: 0;
    background: #0a2a43;
    padding: 20px 0;
    text-align: center;
  }

  .nav-links.show {
    display: flex;        /* Shows when toggled */
  }

  .nav-links a {
    padding: 15px;
    font-size: 18px;
    width: 100%;
  }

  /* Mobile dropdown */
  .dropdown-content {
    position: relative;
    background: #003f74;
    padding: 0;
  }

  .dropdown:hover .dropdown-content {
    display: none; /* disable hover on mobile */
  }

  .dropdown.active .dropdown-content {
    display: block; /* tap to open */
  }
}

.dropdown {
		position: relative;
		color: white;
		text-decoration: none;
		border-radius: 5px;
		display: inline-block;
	}

	.dropdown > a:hover {
		background: rgb(36, 145, 3);
	}

	.dropdown-content {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background-color: #f9f9f9;
		min-width: 160px;
		border-radius: 5px;
		box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
		z-index: 1;
	}

	.dropdown-content a {
		color: rgb(24, 3, 143);
		padding: 10px 15px;
		text-decoration: none;
		display: block;
	}

	.dropdown-content a:hover {
		background-color: #34e24b;
	}

	.dropdown:hover .dropdown-content {
		display: block;
		z-index: 9999;
	}

	.slider {
    width: 100vw; /* Full screen width */
    height: 500px;
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 10px;
    position: relative;
  }

  .slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out;
  }

  .slide {
    min-width: 100%;
    height: 100%;
  }

  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

	.list_container {
		background-color: rgba(255, 255, 255, 0.4);
		backdrop-filter: blur(8px);
		padding: 15px;
		border-radius: 15px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 1.0);
		max-width: 300px;
		width: 100%;
	}

  .wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
    gap: 20px;
    margin-top: 20px;
	}
	
	h3 {
			margin: 0 0 10px;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	li {
		display: flex;
		align-items: center;
		background: #fgf9f9;
		padding: 8px 20px;
		margin-bottom: 0.7rem;
		border-radius: 10px;
		transition: all 0.3s ease;
		cursor: pointer;
		position: relative;
	}

	li:hover {
		background: #eef4ff;
		transition: x(4px);
	}

	li::before {
		content: "";
		font-size: 1rem;
		margin-right: 12px;
		color: #4a90e2;
	}

	li span {
		font-size: 1rem;
		color: #444;
		flex: 1;
	}


	@media (max-width: 480px) {
	.list_container {
	margin: 1rem;
    width: 100%;
	}
}


    header {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
    }

.stats-container {
  display: flex;
  justify-content: center;
  gap: 30px;       /* spacing between boxes */
  margin-top: 20px;
  border: 4px solid blue; /* the blue border*/
  width: fit-content;
  margin: 0 auto;
  border-radius: 20px;
}

.stats-container > div {
  /*border: 4px solid blue; the blue line */
  padding: 10px 20px;
  text-align: center;
  width: fit-content;     /* keeps border small */
  background: rgba(255,255,255,0.3); /* optional */
  backdrop-filter: blur(3px);        /* optional */
  size: 400px;
}

.label {
  size: 70px;
}


/*Counter target as 7000 students
  .stats-container {
    display: flex;
    gap: 80px;
    text-align: center;
    font-family: Arial, sans-serif;
    justify-content: center;
    align-items: center;
    height: 10vh;
    border: 6px solid blue;
    width: fit-content;
    margin: 0 auto;
   

 
  }

  .counter {
    font-size: 60px;
    font-weight: bold;
    color: #115301; /* Yellow color */
  }

  .label {
    font-size: 16px;
    color: #000000; /* Teal color */
    margin-top: 5px;
  }

  /* Main form container*/
.form {
  width: 100%;
  max-width: 700px;
  margin: auto;
  padding: 15px;
  box-sizing: border-box;
  background-color: teal;
}

.tabs-container {
  background: #ffffff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(128, 2, 2, 0.1);
}

/* TAB BUTTONS */
.tab-button {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: #89f7a1cc;
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
}

.tab-btn.active {
  background: #0066ff;
  color: #fff;
}

/* TAB CONTENT */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Blue text */
.blue-text {
  color: blue;
}

h3 {
  margin-bottom: 10px;
}

/* RESPONSIVE */
@media (max-width: 480px) {
  .tab-btn {
    font-size: 12px;
    padding: 8px;
  }

  .tab-content {
    padding: 10px 5px;
  }

  .form {
    padding: 10px;
  }
}
    

    footer {
        background-color: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
    }


        /* ✅ Aqua background for the form */
    /*form.form {
      background-color: aqua;
      padding: 20px;
      border-radius: 8px;
      max-width: 700px;
      margin: auto;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	  display: flex;
	  flex-wrap: wrap;
    }

    .tabs-container {
      width: 100%;
      background: white;
      border-radius: 8px;
      overflow: hidden;
    }

    .tab-button {
      display: flex;
      border-bottom: 2px solid #ddd;
    }

    .tab-button button {
      flex: 1;
      padding: 15px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.3s;
    }

    .tab-button button.active {
      background: #007bff;
      color: white;
    }

    .tab-content {
      padding: 20px;
      display: none;
    }

    .tab-content.active {
      display: block;
    }*/

	/* ================= Flipbook Styles (scoped) ================= */
/*#flipbook-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px auto; /* spacing from other content 
}

#flipbook-section .book {
  width: 900px;
  height: 380px;
  perspective: 2000px;
  position: relative;
}

#flipbook-section .page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left;
  transform-style: preserve-3d;
  transition: transform 1s ease;
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

#flipbook-section .front,
#flipbook-section .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: inherit;
}

#flipbook-section .front {
  background: #fff;
}

#flipbook-section .back {
  background: #f0f0f0;
  transform: rotateY(180deg);
}

#flipbook-section .page.flipped {
  transform: rotateY(-180deg);
  z-index: 0;
}
/* Make sure images fill the page 
#flipbook-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}*/