@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;1,600&display=swap');
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }



  body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /* font-family: 'Poppins', sans-serif; */
    background-color: white;
    text-align: center;
    width: 100%;
    /* max-width: 1280px; */
    margin: 0 auto;
  }

nav {
  width: 100%;
  background: url('Web\ \(21\).svg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 5%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: top 0.3s ease; /* Smooth transition for showing/hiding */
}



  .nav-logo {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 100px;
    height: auto;
    margin-right: 20px;
  }

  nav ul {
    list-style: none;
    display: flex;
    gap: 1.5em;
    align-items: center;
  }

  nav ul li {
    position: relative;
  }

  nav ul li a {
    color: black;
    /* color: white; */
    text-decoration: none;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    padding: 8px 12px;
    display: block;
    transition: all 0.3s ease;
    font-size: 0.9em;
  }

nav ul li > a:hover {
  background: linear-gradient(45deg, #8a2be2, #9400d3); /* Striking Purple Gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#userRole {
  background: rgba(0, 174, 140, 0.2);  /* Soft green background */
  color: #9B4DCA;  /* Text color matching the background */
  padding: 8px 16px;  /* Increased padding for better appearance */
  border-radius: 20px;  /* Rounded corners for a softer look */
  font-size: 1em;  /* Slightly larger text */
  font-weight: bold;  /* Bold text for emphasis */
  text-align: center;  /* Centered text */
  display: inline-block;  /* Makes it behave like a block element */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Subtle shadow for depth */
  transition: all 0.3s ease;  /* Smooth transition for hover effect */
}

/* hamburger button */
    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
    }

    .hamburger div {
      width: 25px;
      height: 3px;
      background: black;
      margin: 4px;
      transition: 0.3s;
    }

    /* responsive */
    @media (max-width: 768px) {
      .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        right: 20px;
        background: white;
        flex-direction: column;
        padding: 10px;
        border: 1px solid #ddd;
      }

      .nav-links.active {
        display: flex;
      }

      .hamburger {
        display: flex;
      }
    }

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

    /* dummy container  */
    .dummycontainer {
      background-color: white;
      height: 100px;
      width: 100%;
      margin: 0 auto;
      /* box-shadow: 0 4px 12px rgba(0,0,0,0.2); */
    }

    /* text below header  */
    .textbelowheader {
  height: 400px;
  color: white;
  font-size: 40px;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  /* Optional shadow for extra visual depth */
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.2); */
}

@media (max-width: 1024px) {
  .textbelowheader {
    font-size: 35px;  /* Adjust font size for medium-sized screens */
    padding: 15px;    /* Reduce padding for smaller screens */
    height: 350px;    /* Reduce height slightly for smaller screens */
  }
}

@media (max-width: 768px) {
  .textbelowheader {
    font-size: 30px;  /* Further reduce font size on tablets */
    padding: 10px;    /* Less padding */
    height: 300px;    /* Further reduce height */
  }
}

@media (max-width: 480px) {
  .textbelowheader {
    font-size: 24px;  /* Make font smaller for small devices */
    padding: 8px;     /* Less padding on small screens */
    height: 250px;    /* Reduce height further */
  }
}

/* UCO SECTION STYLING */
.image-section-uco {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a1929 0%, #1a3a5f 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.image-wrapper-uco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
}

.image-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uco-content-on-image {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Reduce, Reuse, Recycle Text */
.uco-eco-text {
  text-align: center;
  margin-bottom: 40px;
  width: 100%;
}

.uco-eco-text h1 {
  color: #00AE8C;
  font-size: 3.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.uco-eco-text p {
  font-size: 1.2rem;
  margin-top: 15px;
  color: #e0e0e0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Container for the boxes */
.uco-main-box {
  width: 100%;
}

/* Row for items */
.uco-items-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

/* Individual UCO Box Styling */
.uco-box {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
  height: 420px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.uco-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.uco-text-content {
  color: white;
  padding: 25px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.uco-subject {
  font-size: 24px;
  margin: 0 0 8px 0;
  color: #00AE8C;
  font-weight: 700;
}

.uco-subtitle {
  font-size: 16px;
  margin: 0 0 20px 0;
  color: #e0e0e0;
  line-height: 1.5;
}

.uco-chapter-button {
  margin-top: auto;
  padding: 12px 25px;
  background: #00AE8C;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
  width: fit-content;
}

.uco-chapter-button:hover {
  color: #00AE8C;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.uco-img-wrapper {
  width: 100%;
  height: 200px;
  flex-shrink: 0;
  position: relative;
}

.uco-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
  display: block;
}

.uco-img-wrapper .uco-img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.uco-img-wrapper:hover .uco-img-hover {
  opacity: 1;
}

.uco-img-wrapper:hover .uco-img-default {
  opacity: 0;
}

/* Decorative elements */
.uco-decoration {
  position: absolute;
  z-index: 0;
}

.uco-circle-1 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(76, 175, 80, 0.1);
  top: 10%;
  left: 5%;
}

.uco-circle-2 {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(76, 175, 80, 0.08);
  bottom: 15%;
  right: 8%;
}

/* Mobile Responsiveness */
@media (max-width: 1100px) {
  .uco-items-row {
    flex-wrap: wrap;
  }

  .uco-box {
    flex: 0 0 calc(50% - 30px);
    max-width: 400px;
    margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .uco-eco-text h1 {
    font-size: 2.5rem;
  }

  .uco-box {
    flex: 0 0 100%;
    max-width: 400px;
  }

  .uco-items-row {
    flex-direction: column;
    align-items: center;
  }
}




/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* BIOLOGY SECTION STYLING */
.image-section-biology {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: black;
  overflow: hidden;
}

.image-wrapper-biology {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.image-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-on-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 120px 20px;
  display: flex;
  align-items: center;
  flex-direction: column; /* Align content vertically */
}

.biology-main-box {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.biology-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 300px;
  backdrop-filter: blur(19px);
  border: 2px solid #00AE8C;
  border-radius: 15px;
  padding: 0;
  overflow: hidden;
}

.biology-text-content {
  flex-grow: 1;
  padding: 20px;
  color: #9B4DCA;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.biology-subject {
  font-size: 28px;
  margin: 0 0 5px 0;
  color: #00AE8C;
}

.subtitle {
  font-size: 18px;
  margin: 0 0 15px 0;
}

.chapter-button {
  align-self: flex-start;
  padding: 10px 20px;
  background-color: #00AE8C;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-weight: bold;
}

.img-wrapper {
  width: 100%;
  height: 180px; 
  flex-shrink: 0;
  position: relative;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  transition: opacity 0.3s ease;
  display: block;
}

.img-wrapper .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.img-wrapper:hover .img-hover {
  opacity: 1;
}

.img-wrapper:hover .img-default {
  opacity: 0;
}

.items-row {
  display: flex;
  gap: 25px;
  margin-bottom: 25px;
  flex-wrap: wrap; /* Allow items to wrap on smaller screens */
  justify-content: space-between; /* Ensure spacing between items */
}

.centered-row {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .items-row {
    flex-direction: column; /* Stack items vertically on smaller screens */
    align-items: center; /* Center items */
    gap: 15px;
  }

  .biology-box {
    width: 100%; /* Ensure each box takes full width on mobile */
  }

  .img-wrapper {
    height: 200px; /* Adjust image height for smaller screens */
  }

  .content-on-image {
    padding: 60px 20px; /* Reduce padding on smaller screens */
  }

  .biology-main-box {
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .biology-subject {
    font-size: 24px; /* Make the subject font smaller */
  }

  .subtitle {
    font-size: 16px; /* Make subtitle font smaller */
  }

  .chapter-button {
    padding: 8px 15px; /* Adjust button padding */
    font-size: 14px; /* Smaller font size for buttons */
  }
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
  .bottom-video-section {
  position: relative;
  width: 100%;
  height: 700px; 
  overflow: hidden;
  /* background-color: #0056d6; */
}

.bottom-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bottom-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.bottom-video-overlay h2 {
  font-size: 70px;
  margin-bottom: 10px;
  color: burlywood;
}

.bottom-video-overlay p {
  font-size: 30px;
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
  .bottom-video-overlay h2 {
    font-size: 60px;  /* Adjust h2 size for medium screens */
  }

  .bottom-video-overlay p {
    font-size: 25px;  /* Adjust paragraph size */
  }

  .bottom-video-overlay {
    padding: 15px;  /* Reduce padding on smaller screens */
  }
}

@media (max-width: 768px) {
  .bottom-video-overlay h2 {
    font-size: 50px;  /* Further reduce font size for tablets */
  }

  .bottom-video-overlay p {
    font-size: 22px;  /* Smaller font for paragraph */
  }

  .bottom-video-overlay {
    padding: 10px;  /* Less padding */
  }
}

@media (max-width: 480px) {
  .bottom-video-overlay h2 {
    font-size: 40px;  /* Even smaller font for small devices */
  }

  .bottom-video-overlay p {
    font-size: 18px;  /* Smaller paragraph font size */
  }

  .bottom-video-overlay {
    padding: 8px;  /* Minimal padding for small screens */
  }
}


/* slider */

.sliderbody {
  min-height: 300px;
  display: grid;
  place-items: center;
  background: linear-gradient(to bottom, #00AE8C, #9B4DCA);
}

.sliderbody2 {
  min-height: 300px;
  display: grid;
  place-items: center;
  background: linear-gradient(to bottom, #9B4DCA);
}

.slider {
  height: 300px;
  width: fit-content; 
  margin: auto;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slide-track {
  display: flex;
  width: calc(300px * 18); 
  animation: scroll 40s linear infinite;
}

.slide-track:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-300px * 6));
  }
}

.slide {
  width: 300px;
  height: 250px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.imgslide {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: transform 1s;
}

.imgslide:hover {
  transform: scale(1.05);
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Astronomy Container */
.astronomy-container {
  position: relative;
  width: 100%;
  padding: 60px 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #00AE8C, #9B4DCA) 
}


.astronomy-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px 40px;
  box-sizing: border-box;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.background-container {
  position: relative;
  width: 100%;
  height: 1000px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: black;
  font-family: 'Poppins', sans-serif;
}

/* Background images */
.bg1 {
  background-image: url('Web\ \(28\).svg');
  background-repeat: no-repeat; 
  background-attachment: fixed; 
}

.bg2 {
  background-image: url('Web\ \(29\).svg');
  background-repeat: no-repeat; 
  background-attachment: fixed; 
}

/* Text positioning */
.text-content-background {
  position: absolute;
  max-width: 700px;
  padding: 20px;
  /* background: rgba(0,0,0,0.5); */
  border-radius: 10px;
}

.bottom-left-background {
  bottom: 200px;
  left: 20px;
}

.top-left-background {
  top: 110px;
  left: 20px;
}

.text-content-background h2 {
  margin-bottom: 10px;
  font-size: 50px;
}

.text-content-background p {
  line-height: 1.5;
  font-size: 20px;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* Astronomy box  */
.astronomy-box {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 400px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.astronomy-box:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
}

.fill-box-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.astronomy-text {
  position: relative;
  z-index: 1;
  color: white;
  padding: 20px;
}

.center-text {
  text-align: center;
}

.top-left-text {
  text-align: left;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* Chemistry Section Styling */
.chemistry-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  z-index: 1;
}

.atoms-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  gap: 50px;
  z-index: 2;
}

/* Atom positions */
.atoms-grid .atom:nth-child(1) { grid-column: 1; grid-row: 1; }
.atoms-grid .atom:nth-child(2) { grid-column: 3; grid-row: 1; }
.atoms-grid .atom:nth-child(3) { grid-column: 2; grid-row: 2; }
.atoms-grid .atom:nth-child(4) { grid-column: 1; grid-row: 3; }
.atoms-grid .atom:nth-child(5) { grid-column: 3; grid-row: 3; }

.atom {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  animation: floatUpDown 3s ease-in-out infinite;
  transition: transform 0.3s;
}

.atom:hover {
  transform: scale(1.1);
  animation-play-state: paused;
}

/* Up and down animation */
@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
  .atoms-grid {
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 150px);
    gap: 30px; /* Adjust gap for smaller screens */
  }

  .atom {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 768px) {
  .atoms-grid {
    grid-template-columns: repeat(2, 150px); /* Stack into two columns */
    grid-template-rows: repeat(3, 150px);
    gap: 25px;
  }

  .atom {
    width: 130px;
    height: 130px;
  }
}

@media (max-width: 480px) {
  .atoms-grid {
    grid-template-columns: 1fr; /* Stack all items vertically */
    grid-template-rows: auto;
    gap: 20px;
  }

  .atom {
    width: 120px;
    height: 120px;
  }
}



/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


    /* slider chemistry */
.bodychemistry {
    background-color: #00AE8C;
    background-image: url('purplebackground.svg'); /* Replace with your image path */
    background-size: cover; /* Ensures the image covers the entire container */
    background-position: center center; /* Centers the background image */
    height: 600px;
    margin: 0;
    display: grid;
    grid-template-rows: 500px 100px;
    grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
    align-items: center;
    justify-items: center;
    font-family: 'Poppins', sans-serif;
}


.item img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: 15px;
}

.name {
    margin-bottom: 2px;
    color: navy;
}

.facts {
    /* font-style: italic; */
    margin-top: 2px;
}

main#carousel {
    grid-row: 1 / 2;
    grid-column: 1 / 8;
    width: 100vw;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 600px;
    --items: 5;
    --middle: 3;
    --position: 1;
    pointer-events: none;
}

div.item {
    text-align: center;
    padding: 20px;
    border: 3px solid black;
    border-radius: 20px;
    background-color: #fff;
    position: absolute;
    width: 300px;
    height: 250px;
    background-image: url(Web\ \(42\).svg);
    --r: calc(var(--position) - var(--offset));
    --abs: max(calc(var(--r) * -1), var(--r));
    transition: all 0.25s linear;
    transform: rotateY(calc(-10deg * var(--r)))
    translateX(calc(-300px * var(--r)));
    z-index: calc((var(--position) - var(--abs)));
}

div.item:nth-of-type(1) {
    --offset: 1;
}
div.item:nth-of-type(2) {
    --offset: 2;
}
div.item:nth-of-type(3) {
    --offset: 3;
}
div.item:nth-of-type(4) {
    --offset: 4;
}
div.item:nth-of-type(5) {
    --offset: 5;
}

input:nth-of-type(1) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

input:nth-of-type(1):checked ~ main#carousel {
    --position: 1;
}

input:nth-of-type(2) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
    --position: 2;
}

input:nth-of-type(3) {
    grid-column: 4 /5;
    grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
    --position: 3;
}

input:nth-of-type(4) {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
    --position: 4;
}

input:nth-of-type(5) {
    grid-column: 6 / 7;
    grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
    --position: 5;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

 .collage-container {
            width: 100%;
            padding: 100px 0 50px;
            background-color: #0056d6;
            margin: 0 auto;
            position: relative;
            background-image: url('Web\ \(46\).svg');
            background-size: cover; 
            background-position: center; 
            background-repeat: no-repeat; 
            background-attachment: fixed; 

        }

        /* Title Styles */
        .collage-title {
            position: absolute;
            top: 10px;
            left: 5%;
            color:  #00AE8C;
            font-size: 4rem;
            font-weight: bold;
            text-transform: uppercase;
            z-index: 2;
            text-shadow: 2px 2px 4px rgba(234, 0, 255, 0.337);
        }
        
        .collage {
            max-width: 800px;
            margin: 0 auto;
            display: grid;
            gap: 0.5rem;
            grid-template-rows: repeat(5, 1fr);
            grid-template-columns: repeat(8, 1fr);
            grid-template-areas:
                "..   two two    two    three  four ..    .."
                "one  two two    two    five   five six   .."
                "..   two two    two    five   five seven eight"
                "nine ten eleven eleven twelve  ..   ..   .."
                "..   ..  eleven eleven ..      ..   ..   ..";
        }

        .collage > div {
            overflow: hidden;
            border-radius: 0.5rem;
        }

        .collage img {
            width: 100%;
            aspect-ratio: 1;
            display: block;
            object-fit: cover;
            transition: all 0.5s ease-in-out;
        }

        /* Grid area assignments */
        .collage :nth-child(1) { grid-area: one; }
        .collage :nth-child(2) { grid-area: two; }
        .collage :nth-child(3) { grid-area: three; }
        .collage :nth-child(4) { grid-area: four; }
        .collage :nth-child(5) { grid-area: five; }
        .collage :nth-child(6) {
            grid-area: six;
            background-color: white;
            border-top-right-radius: 100%;
        }
        .collage :nth-child(7) { grid-area: seven; }
        .collage :nth-child(8) {
            grid-area: eight;
            background-color: white;
            border-radius: 100%;
        }
        .collage :nth-child(9) {
            grid-area: nine;
            background-color: white;
            border-bottom-left-radius: 100%;
        }
        .collage :nth-child(10) { grid-area: ten; }

        /* Hover effects */
        .collage img:hover {
            transform: scale(1.05);
        }

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* footer */
.footer {
  background-color: #00AE8C;
  padding: 70px 0;
  width: 100%;
  text-align: left;
}

.footer-container {
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 15px;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-col {
  width: 25%;
  padding: 0 15px;
  margin-bottom: 35px;
  text-align: left;
}

.footer-col h4 {
  font-size: 18px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 35px;
  font-weight: 500;
  position: relative;
  padding-left: 0;
  text-align: left;
}

.footer-col h4::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  background-color: #9B4DCA;
  height: 2px;
  width: 50px;
}

.footer-col ul li:not(:last-child) {
  margin-bottom: 10px;
}

.footer-col ul li a {
  font-size: 16px;
  color: white;
  text-decoration: none;
  font-weight: 300;
  display: block;
  transition: all 0.3s ease;
  text-align: left;
}

.footer-col ul li a:hover {
  color: #ffffff;
  padding-left: 8px;
}


.footer-col .social-links a {
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}

.footer-col .social-links a:hover {
  color: #24262b;
  background-color: #ffffff;
}

/* responsive */
@media(max-width: 767px) {
  .footer-col {
    width: 50%;
  }
}

@media(max-width: 574px) {
  .footer-col {
    width: 100%;
  }
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* submit message  */


    .submit-btn {
        background-color: #0056d6;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 20px;
        font-weight: bold;
        cursor: pointer;
        margin-top: 10px;
    }

    .container-submit {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin-top: 50px;
    }

    .box {
        width: 200px;
        height: 120px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        color: white;
    }

    .blue { background-color: #0056d6; }
    .green { background-color: #00b554; }
    .red { background-color: #ff2e2e; }
    .yellow { background-color: #ffd94a; color: #fff8d6; }
    .orange { background-color: #ff944d; }

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

    /* forum */

    h1 span {
      color: #00ff00;
    }

    .submit-container h1 {
    color: #00AE8C; 
    font-size: 100px;
    margin-top: 20px;
    line-height: 1.2;
}

.submit-container h1 span {
    color: #00ff00; 
    display: inline;
}

        .submit-container {
    height: 1100px;
    background-color: black; /* fallback color if image doesn't load */
    background-image: url('Web\ \(8\).svg'); /* Replace with your image path */
    background-size: cover; /* Make sure the image covers the entire container */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
}
    .submit-btn {
        background-color: #00AE8C;
        color: black;
        padding: 10px 20px;
        border: none;
        border-radius: 20px;
        font-weight: bold;
        cursor: pointer;
        margin-top: 10px;
        height: 60px;
        width: 200px;
    }

    .row {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
    }

    .box {
        width: 400px;
        height: 300px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        color: white;
    }

    .blue { background-color: #0056d6; }
    .green { background-color: #00b554; }
    .red { background-color: #ff2e2e; }
    .yellow { background-color: plum; color: #fff8d6; }
    .orange { background-color: #ff944d; }


    
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


.register1 {
    width: 100%;
    min-height: 100vh;
    background-image: url("Web\ \(6\).svg");
    background-size: cover;
    background-position: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: white;
    box-sizing: border-box;
}

.register2 {
    width: 100%;
    min-height: 100vh;
    background-image: url("Web\ \(7\).svg");
    background-size: cover;
    background-position: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: white;
    box-sizing: border-box;
}

.title1 {
    font-size: 4.5em;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: left;
    /* background-color: #0056d6; */
    width: 900px;
    /* transform: rotateX(-30deg); */
    color: #00AE8C;
}

.title2 {
    font-size: 4.5em;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: right;
    /* background-color: #0056d6; */
    width: 900px;
    /* transform: rotateX(-30deg); */
    color: #00AE8C;
}


.cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    position: relative;
    flex: 0 1 300px;
    height: 350px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    transition: transform 0.3s ease;
}

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

.card:hover {
  transform: scale(1.2);
}

.register-btn {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    color: black;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 20px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.register-btn:hover {
    background-color: gold;
}

/* Popup Form */
.form-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-container input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.btn {
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.btn.cancel {
    background-color: red;
    color: white;
}

.btn:hover {
    opacity: 0.8;
}