/* General Styles */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: rgba(116, 105, 237, 0.175);
  
  color: #333;
  line-height: 1.6;
}

header {
  background-color: #6B5B95; /* Purple */
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

header .logo img {
  height: 50px;
  margin-right: 10px;
}

header h1 {
  margin: 0;
  font-size: 2rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

nav ul li {
  display: inline;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #ff6f61; /* Coral */
}

/* Hero Section */
.hero {
  background: url('quiz-background.jpg') no-repeat center center/cover;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: rgb(18, 17, 20);
}

.hero-content h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #0e0d0d; /* Coral */
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.hero-content .btn {
  background-color: hsl(225, 89%, 50%); /* Coral */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1.1rem;
  transition: background-color 0.3s ease;
}

.hero-content .btn:hover {
  background-color: #05123c; /* Darker Coral */
}

/* Intro Section */
#intro {
  padding: 40px 20px;
  text-align: center;
  
  background-color: rgba(116, 105, 237, 0.175);
}

#intro h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #6B5B95; /* Purple */
}

#intro p {
  font-size: 1.1rem;
  color: #555;
}

.highlight {
  color: #ff6f61; /* Coral */
  font-weight: bold;
}

/* Features Section */
.features {
  padding: 40px 20px;
  text-align: center;
 background-color: rgba(116, 105, 237, 0.175);
}

.features h2 {
  font-size: 2rem;
  margin-bottom: 40px;
  color: #6B5B95; /* Purple */
}

.feature-cards {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

.card {
  background-color: rgb(165, 156, 199);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 30%;
}

.card h3 {
  font-size: 1.5rem;
  color: #6B5B95; /* Purple */
}

.card p {
  font-size: 1rem;
  color: #555;
}

/* Study Material Section */
#study-material {
  padding: 40px 20px;
  text-align: center;
   background-color: rgba(116, 105, 237, 0.175);
}

#study-material h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #6B5B95; /* Purple */
}

#study-material p {
  font-size: 1.1rem;
  color: #555;
}

.std-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.std-links a {
  background-color: #6B5B95; /* Purple */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.std-links a:hover {
  background-color: #6958e9; /* Coral */
}

/* Quiz Topics Section */
#quiz-topics {
  padding: 40px 20px;
  text-align: center;
  text-decoration: none;
  background-color: rgba(116, 105, 237, 0.175);
  
}

#quiz-topics h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #6B5B95; /* Purple */
}

#quiz-topics p {
  font-size: 1.1rem;
  color: #555;
}

#quiz-topics ul {
  list-style: none;
  padding: 0;
}

#quiz-topics ul li {
  font-size: 1rem;
  color: #555;
  margin-bottom: 10px;
}

/* Footer */
footer {
  background-color: #6B5B95; /* Purple */
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

/* Login Page Styles */
#login-form {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: 0 auto;
}

#login-form label {
  display: block;
  margin-bottom: 10px;
  color: #6B5B95; /* Purple */
  font-weight: bold;
}

#login-form .input-box {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 2px solid #6B5B95; /* Purple */
  border-radius: 5px;
  font-size: 1rem;
}

#login-form .input-box:focus {
  border-color: #ff6f61; /* Coral */
  outline: none;
}

#login-form .btn {
  background-color: #6B5B95; /* Purple */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

#login-form .btn:hover {
  background-color: #6958e9; /* Coral */
}

/* Quiz Page Styles */
#quiz {
  text-align: center;
  padding: 20px;
  background-color: rgb(195, 180, 203);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

#timer {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #6B5B95; /* Purple */
}

#question {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #0a0a0a; /* Purple */
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#options button {
  background-color: #6B5B95; /* Purple */
  color: white;
  padding: 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#options button:hover {
  background-color: #9183d9; /* Coral */
  transform: scale(1.05);
}

#options button.correct {
  background-color: #348347; /* Green */
}

#options button.wrong {
  background-color: #dc3545; /* Red */
}

#result {
  margin-top: 20px;
  font-size: 1.2rem;
  color: #6B5B95; /* Purple */
}

#correct-answers {
  margin-top: 20px;
  color: #111010;
}

#restart-btn {
  background-color: #6B5B95; /* Coral */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

#restart-btn:hover {
  background-color: #6958e9;

}
/* Subject Selection Dropdown */
#subject-select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 2px solid #6B5B95;
  border-radius: 5px;
  font-size: 1rem;
}

#subject-select:focus {
  border-color: #ff6f61;
  outline: none;
}
  /* Interactive Buttons */
  #start-quiz, #next-btn, #submit-btn, #restart-btn {
    background-color: #6B5B95;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  #start-quiz:hover, #next-btn:hover, #submit-btn:hover, #restart-btn:hover {
    background-color: #6958e9;
    transform: scale(1.05);
  }
/* Responsive Design */
@media (max-width: 768px) {
  .feature-cards {
    flex-direction: column;
  }

  .card {
    width: 100%;
  }

  .std-links {
    flex-direction: column;
  }

  .std-links a {
    width: 100%;
    text-align: center;
  }
}
/* Timer Styles */
#timer {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #141415; /* Coral */
  font-weight: bold;
}

/* Back to Home Button */
.btn-back {
  background-color: #6B5B95; /* Purple */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
}

.btn-back:hover {
  background-color: #ff6f61; /* Coral */
}
/* Next Button Styles */
#next-btn {
  background-color: #b7afce; /* Purple */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 20px;
}

#next-btn:hover {
  background-color: #9975d6; /* Coral */
  transform: scale(1.05);
}
/* General Styles */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

header {
  background-color: #6B5B95;
  color: white;
  padding: 20px;
  text-align: center;
}

header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

header .logo img {
  height: 50px;
  margin-right: 10px;
}

header h1 {
  margin: 0;
  font-size: 2rem;
}

/* Container for Quiz Section */
.container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.container h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #6B5B95;
}

/* User Info Section */
#user-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#user-info label {
  font-size: 1rem;
  color: #6B5B95;
  font-weight: bold;
}

#user-info .input-box {
  width: 100%;
  padding: 10px;
  border: 2px solid #6B5B95;
  border-radius: 5px;
  font-size: 1rem;
}

#user-info .input-box:focus {
  border-color: #ff6f61;
  outline: none;
}

#user-info select {
  width: 100%;
  padding: 10px;
  border: 2px solid #6B5B95;
  border-radius: 5px;
  font-size: 1rem;
  background-color: white;
}

#user-info select:focus {
  border-color: #ff6f61;
  outline: none;
}

#start-quiz {
  background-color: #6B5B95;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#start-quiz:hover {
  background-color: #6958e9;
  transform: scale(1.05);
}

/* Footer */
footer {
  background-color: #6B5B95;
  color: white;
  text-align: center;
  padding: 10px;
  margin-top: 40px;
}
/* General Styles */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

header {
  background-color: #6B5B95;
  color: white;
  padding: 20px;
  text-align: center;
}

header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

header .logo img {
  height: 50px;
  margin-right: 10px;
}

header h1 {
  margin: 0;
  font-size: 2rem;
}

/* Container for Quiz Section */
.container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.container h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #6B5B95;
}

/* User Info Section */
#user-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#user-info label {
  font-size: 1rem;
  color: #6B5B95;
  font-weight: bold;
}

#user-info .input-box {
  width: 100%;
  padding: 10px;
  border: 2px solid #6B5B95;
  border-radius: 5px;
  font-size: 1rem;
}

#user-info .input-box:focus {
  border-color: #ff6f61;
  outline: none;
}

#user-info select {
  width: 100%;
  padding: 10px;
  border: 2px solid #6B5B95;
  border-radius: 5px;
  font-size: 1rem;
  background-color: white;
}

#user-info select:focus {
  border-color: #ff6f61;
  outline: none;
}

#start-quiz {
  background-color: #6B5B95;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#start-quiz:hover {
  background-color: #6958e9;
  transform: scale(1.05);
}

/* Quiz Section */
#quiz {
  text-align: center;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

#timer {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #6B5B95;
}

#question {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #333;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#options button {
  background-color: #6B5B95;
  color: white;
  padding: 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#options button:hover {
  background-color: #9183d9;
  transform: scale(1.05);
}

#options button.correct {
  background-color: #348347;
}

#options button.wrong {
  background-color: #dc3545;
}

/* Result Section */
#result {
  margin-top: 20px;
  font-size: 1.2rem;
  color: #6B5B95;
}

#correct-answers {
  margin-top: 20px;
  color: #333;
}

#restart-btn {
  background-color: #6B5B95;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

#restart-btn:hover {
  background-color: #6958e9;
}

/* Footer */
footer {
  background-color: #6B5B95;
  color: white;
  text-align: center;
  padding: 10px;
  margin-top: 40px;
}
/* General Styles */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

header {
  background-color: #6B5B95;
  color: white;
  padding: 20px;
  text-align: center;
}

header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

header .logo img {
  height: 50px;
  margin-right: 10px;
}

header h1 {
  margin: 0;
  font-size: 2rem;
}

/* Container for Quiz Section */
.container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.container h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #6B5B95;
}

/* User Info Section */
#user-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#user-info label {
  font-size: 1rem;
  color: #6B5B95;
  font-weight: bold;
}

#user-info .input-box {
  width: 100%;
  padding: 10px;
  border: 2px solid #6B5B95;
  border-radius: 5px;
  font-size: 1rem;
}

#user-info .input-box:focus {
  border-color: #ff6f61;
  outline: none;
}

#user-info select {
  width: 100%;
  padding: 10px;
  border: 2px solid #6B5B95;
  border-radius: 5px;
  font-size: 1rem;
  background-color: white;
}

#user-info select:focus {
  border-color: #ff6f61;
  outline: none;
}

#start-quiz {
  background-color: #6B5B95;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#start-quiz:hover {
  background-color: #6958e9;
  transform: scale(1.05);
}

/* Quiz Section */
#quiz {
  text-align: center;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

#timer {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #6B5B95;
}

#question {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #333;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#options button {
  background-color: #6B5B95;
  color: white;
  padding: 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#options button:hover {
  background-color: #9183d9;
  transform: scale(1.05);
}

#options button.correct {
  background-color: #348347;
}

#options button.wrong {
  background-color: #dc3545;
}

/* Result Section */
#result {
  margin-top: 20px;
  font-size: 1.2rem;
  color: #6B5B95;
}

#correct-answers {
  margin-top: 20px;
  color: #333;
}

#restart-btn {
  background-color: #6B5B95;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

#restart-btn:hover {
  background-color: #6958e9;
}

/* Footer */
footer {
  background-color: #6B5B95;
  color: white;
  text-align: center;
  padding: 10px;
  margin-top: 40px;
}