.floating-circle{
  position:absolute;
  border-radius:50%;
  background:rgba(45,218,116,0.15);

  animation:float 6s infinite ease-in-out;
}

.one{
  width:120px;
  height:120px;
  top:20%;
  left:10%;
}

.two{
  width:200px;
  height:200px;
  bottom:10%;
  right:10%;
}

.three{
  width:80px;
  height:80px;
  top:60%;
  left:40%;
}

@keyframes float{
  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-20px);
  }

  100%{
    transform:translateY(0px);
  }
}

.card{
  background:rgba(255,255,255,0.08);

  backdrop-filter:blur(10px);

  border:1px solid rgba(255,255,255,0.1);

  width:300px;

  padding:30px;

  border-radius:20px;

  transition:0.4s;

  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}

.card:hover{
  box-shadow:
  0 0 20px rgba(45,218,116,0.5),
  0 0 40px rgba(45,218,116,0.2);
}

.about-us{
  background:#10261e;
  text-align:center;
}

.about-box{
  max-width:900px;
  margin:auto;

  background:rgba(255,255,255,0.08);

  padding:40px;

  border-radius:20px;

  backdrop-filter:blur(10px);

  line-height:1.9;

  font-size:18px;
}

.mode-btn{
  padding:10px 15px;

  border:none;

  border-radius:10px;

  background:#2DDA74;

  cursor:pointer;

  font-size:18px;
}

.light-mode{
  background:#f4fff8;
  color:#111;
}

.light-mode nav{
  background:#dff7e7;
}

.light-mode .card{
  background:#ffffff;
  color:#111;
}

.light-mode .fact{
  background:#ffffff;
  color:#111;
}

.light-mode .quiz-box{
  background:#ffffff;
  color:#111;
}

.light-mode .about-box{
  background:#ffffff;
  color:#111;
}

.light-mode nav a{
  color:#111;
}

.fact{
  transition:0.3s;
}

.fact:hover{
  transform:translateY(-8px);

  box-shadow:
  0 0 20px rgba(45,218,116,0.5);
}


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

    body{
      font-family:'Poppins', sans-serif;
      background:#081C15;
      color:white;
      line-height:1.6;
      padding-left:220px;
}
    body.light-mode{
      background:#f3f7fb;
      color:#10263b;
    }

    body.light-mode nav{
      background:#ffffff;
      box-shadow:2px 0 20px rgba(0,0,0,0.08);
    }

    body.light-mode .logo-text,
    body.light-mode nav a,
    body.light-mode .section-title,
    body.light-mode .hero h1,
    body.light-mode .hero p,
    body.light-mode .fact p,
    body.light-mode .card p,
    body.light-mode .climate p,
    body.light-mode footer p,
    body.light-mode .about-box p,
    body.light-mode .quiz-box h3,
    body.light-mode .quiz-box p{
      color:#10263b;
    }

    body.light-mode .hero{
      background:linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url("https://images.unsplash.com/photo-1509391366360-2e959784a276");
      background-size:cover;
      background-position:center;
    }

    body.light-mode .logo-container{
      color:#0d6b4b;
    }

    body.light-mode .logo-text{
      color:#0d6b4b;
    }

    body.light-mode .nav-right{
      color:#10263b;
    }

    body.light-mode nav a{
      color:#10263b;
    }

    body.light-mode .mode-btn-dark{
      background:#0d6b4b;
      color:#ffffff;
    }

    body.light-mode .card,
    body.light-mode .quiz-box,
    body.light-mode .fact,
    body.light-mode .about-box{
      background:#ffffff;
      box-shadow:0 12px 40px rgba(16,38,59,0.08);
    }

    body.light-mode .hero button,
    body.light-mode .quiz button{
      background:#0d6b4b;
      color:#ffffff;
    }

    body.light-mode .climate,
    body.light-mode .quiz,
    body.light-mode .about,
    body.light-mode section{
      background:transparent;
    }

    body.light-mode footer{
      background:#ffffff;
    }

    html{
      scroll-behavior:smooth;
    }

   /* ===== NAVBAR ===== */

nav{
  position:fixed;
  top:0;
  left:0;

  width:220px;
  height:100%;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;

  padding:30px 20px;

  background:#0b2b21;

  z-index:1000;
}

/* LEFT SIDE */

.logo-container{
  display:flex;
  align-items:center;

  gap: 10px;
}

/* LOGO */

.logo-img{
  width:45px;
  height:45px;

  border-radius:50%;

  object-fit:cover;
}

/* TEXT */

.logo-text{
  color:#7CFF8F;

  font-size:28px;
  font-weight:700;
}

/* RIGHT SIDE */

.nav-right{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;

  gap:18px;
}

/* LINKS */

nav ul{
  display:flex;
  flex-direction:column;
  align-items:flex-start;

  list-style:none;

  gap:14px;
}

/* NAV BUTTONS */

nav a{
  color:white;

  text-decoration:none;

  font-size:14px;

  transition:0.3s;
}

nav a:hover{
  color:#7CFF8F;
}

/* DARK MODE */

.mode-btn-dark{
  border:none;

  background:#7CFF8F;

  color:#081C15;

  padding:7px 10px;

  border-radius:8px;

  cursor:pointer;
}

/* MOBILE */

@media(max-width:900px){

  nav{
    width:100%;
    height:auto;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:15px;
  }

  body{
    padding-left:0;
  }

  .nav-right{
    flex-direction:column;
    align-items:center;
  }

  nav ul{
    align-items:center;
  }

}

    /* HERO */

    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:40px;
      padding-top:90px;

  background:
  linear-gradient(rgba(0,0,0,0.6),
  rgba(0,0,0,0.6)),
  url("https://images.unsplash.com/photo-1509391366360-2e959784a276");

  background-size:cover;
  background-position:center;
}

    .hero-content{
      max-width:800px;
    }

    .hero h1{
      font-size:70px;
      margin-bottom:20px;
      color:#2DDA74;
      text-shadow:0 0 10px rgba(45,218,116,0.7), 0 0 20px rgba(45,218,116,0.4);
    }

    .hero p{
      font-size:22px;
      margin-bottom:30px;
    }

    .hero button{
      padding:15px 35px;
      border:none;

      background:#2DDA74;
      color:#081C15;

      font-size:18px;
      border-radius:10px;

      cursor:pointer;

      transition:0.3s;
    }

    .hero button:hover{
      transform:scale(1.05);
    }

    /* SECTION */

    section{
      padding:100px 50px;
    }

    .section-title{
      text-align:center;
      font-size:45px;
      margin-bottom:60px;
      color:#2DDA74;
    }

    /* CARDS */

    .cards{
      display:flex;
      justify-content:center;
      gap:30px;

      flex-wrap:wrap;
    }

    .card:hover{
      transform:translateY(-10px);
    }

    .card h3{
      margin-bottom:20px;
      color:#2DDA74;
      font-size:28px;
    }

    .card p{
      color:#d7fbe8;
    }

    /* CLIMATE SECTION */

    .climate{
      text-align:center;
      background:#10261e;
    }

    .climate p{
      max-width:900px;
      margin:auto;
      font-size:20px;
    }

    /* FACTS */

    .facts-container{
      display:flex;
      justify-content:center;
      gap:30px;

      flex-wrap:wrap;
    }

    .fact{
      background:#1B4332;

      width:220px;

      padding:30px;

      border-radius:20px;

      text-align:center;
    }

    .fact h2{
      color:#2DDA74;
      font-size:50px;
      margin-bottom:10px;
    }

    /* QUIZ */

.quiz{
  background:#0d241c;
  text-align:center;
}

body.light-mode .quiz{
  background:transparent;
}

.quiz-box{
  background:linear-gradient(90deg,#133b24,#183d2f);
  padding:40px;

  border-radius:25px;

  text-align:center;

  color:white;

  max-width:800px;

  margin:auto;

  box-shadow:0 0 20px rgba(0,0,0,0.3);
}

.quiz-box button{
  padding:12px 25px;
  border:none;

  border-radius:12px;

  background: #2e7d32;

  font-weight:bold;

  cursor:pointer;

  margin-top:15px;

  font-size:16px;
}

.quiz-box h2,
.quiz-box h3,
.quiz-box p{
color:white;
}

body.light-mode .quiz-box{
  background:white;
  box-shadow:0 12px 40px rgba(16,38,59,0.12);
}

.quiz-box h3{
  font-size:32px;
  color:#49ff94;
  margin-bottom:25px;
}

.quiz-box p{
  font-size:20px;
}

body.light-mode .quiz-box p{
  color:#10263b;
}

.quiz-buttons{
  display:flex;
  justify-content:center;
  gap:18px;

  flex-wrap:wrap;

  margin-top:35px;
}

.quiz-buttons button{
  padding:14px 26px;

  border:none;

  background:#49ff94;

  color:#071a14;

  border-radius:14px;

  font-weight:700;

  cursor:pointer;

  transition:0.3s;
}

.quiz-buttons button:hover{
  transform:scale(1.05);
}

.option-btn{
display:block;

width:100%;

margin:10px 0;

padding:12px;

border:none;

border-radius:10px;

cursor:pointer;

font-size:16px;

background:#2e7d32;

color:white;

transition:0.3s;
}

.option-btn:hover{
opacity:0.9;
transform:scale(1.02);
}

#progress{
  margin-top:25px;
  color:#49ff94;
  font-size:18px;
}

    /* FOOTER */

    footer{
      background:#06110d;
      text-align:center;
      padding:30px;
    }

    /* MOBILE */

    @media(max-width:768px){

      nav{
        flex-direction:column;
        gap:20px;
      }

      nav ul{
        flex-direction:column;
        text-align:center;
      }

      .hero h1{
        font-size:45px;
      }

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

      section{
        padding:80px 20px;
      }

      .section-title{
        font-size:35px;
      }

    }