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

body {
    font-family: Arial, sans-serif;
    background-image: url('https://www.eurokidsindia.com/blog/wp-content/uploads/2023/11/innovative-learning-approaches-870x570.jpg');
    background-size: cover;
    background-position: center;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

h2 {
    font-style: italic;
    text-align: center;
    padding: 10px;
    margin: 25px;
    font-size: 40px;
    border-radius: 20px;
    border: 2px solid #ff7606;
    color: #050505;
    background-color: #a1d7ed;
}

h2:hover {
    text-align: center;
    padding: 10px;
    margin: 25px;
    font-size: 40px;
    border-radius: 20px;
    border: 2px solid #ff7606;
    color: #054959;
    background-color: #06b5fa;
    cursor: pointer;
    transition: 0.5s;
}

h2:hover::after {
    content: " 🚀";
    color: rgb(10, 10, 10);
    transition: 0.3s;
}

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

.fieldset-00 {
    background-color: rgba(6, 183, 253, 0.373);
    border-radius: 20px;
    transition: 0.5s;
    cursor: pointer;
    padding: 10px;
    margin: 40px;
    border: 2px solid #ff8706;

}

.fieldset-00:hover {
    background-color: rgba(1, 58, 81, 0.597);
    transition: 0.5s;
    cursor: pointer;
    border: 2px solid #ff0606;

}

.legend-00 {
    font-size: 29px;
    font-weight: bold;
    color: #050505;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: rgb(24, 60, 75);
    text-decoration: underline;
    text-decoration-color: rgb(209, 231, 240);
    text-shadow: 20px;
    color: rgb(196, 225, 252);
    border: 2px solid rgb(195, 226, 248);
    padding-right: 5px;
    padding-left: 5px;
}

.legend-00:hover {
    font-size: 30px;
    font-weight: bold;
    color: #012c31;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: rgba(76, 155, 189, 0.711);
    text-decoration: underline;
    text-decoration-color: rgb(30, 59, 70);
    text-shadow: 20px;
    border: 2px solid rgb(1, 46, 78);
    transition: 0.5s;
    cursor: pointer;
    padding-right: 5px;
    padding-left: 5px;
}

.label-00 {
    border: 2px solid rgb(2, 35, 68);
    border-radius: 5px;
    font-size: 23px;
    background-color: rgba(88, 139, 164, 0.934);
    gap: 5px;
    transition: 0.5s;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
}

.label-00:hover {
    border: 2px solid rgb(0, 77, 155);
    border-radius: 5px;
    font-size: 25px;
    background-color: rgba(139, 206, 240, 0.934);
    color: rgba(1, 23, 37, 0.934);
    gap: 5px;
    transition: 0.5s;
    cursor: pointer;
}


input[type="text"] {
  width: 20%;
  height: 40px;
  border: 3px solid #ccc;
  border-radius: 10px;
  padding: 5px 10px;
  transition: all 0.3s ease;
}

input[type="text"]:hover {
  background-color: #8e92c9;
  border-color: rgb(72, 18, 71);
  border-radius: 100px;
  box-shadow: 10px rgba(128, 0, 128, 0.5);
}

input[type="text"]:focus {
  outline: none;
  border-color: rgb(3, 69, 85);
  background-color: #02aefd;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}

input[type="number"] {
  width: 20%;
  height: 40px;
  border: 3px solid #ccc;
  border-radius: 10px;
  padding: 5px 10px;
  transition: all 0.3s ease;
}

input[type="number"]:hover {
  background-color: #8e92c9;
  border-color: rgb(3, 15, 68);
  border-radius: 100px;
  box-shadow: 10px rgba(128, 0, 128, 0.5);
}

input[type="number"]:focus {
  outline: none;
  border-color: rgb(3, 69, 85);
  background-color: #02aefd;
  box-shadow: 0 0 10px rgba(30, 101, 158, 0.5);
}

#Study-type {
    height: 35px;
    font-size: 15px;
    border-radius: 8px;
  border: 3px solid #021841;
    background-color: #abdcf8;
    color: #333;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

#Study-type:hover {
    border-color: #040238;
  background-color: #8e92c9;
}

#Study-type:focus {
    border-color: #022b52;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.25);
}

#Study-type:active {
    background-color: #5caffc;
}

#Study-type option {
    padding: 10px;
    background: #fff;
    color: #333;
}


#Study-mode {
    height: 35px;
    font-size: 15px;
    border-radius: 8px;
  border: 3px solid #021841;
    background-color: #abdcf8;
    color: #333;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

#Study-mode:hover {
    border-color: #040238;
  background-color: #8e92c9;
}

#Study-mode:focus {
    border-color: #022b52;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.25);
}

#Study-mode:active {
    background-color: #5caffc;
}

#Study-mode option {
    padding: 10px;
    background: #fff;
    color: #333;
}

.btn-box {
    text-align: center;
   
}
button {
  background-color: rgb(85, 219, 246);
  color: rgb(12, 9, 9);
  font-size: 15px;
  border: 2px solid rgb(1, 45, 55);
  border-radius: 15px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

button:hover {
  background-color: rgb(2, 79, 89);
  color: rgb(249, 248, 249);
    border: 2px solid rgb(106, 223, 249);

}

button:active {
  transform: scale(0.95);
}

footer {
    font-style: italic;
    text-align: center;
    padding: 10px;
    margin: 25px;
    font-size: 30px;
    border-radius: 20px;
    border: 2px solid #ff7606;
    color: #050505;
    background-color: #a1d7ed;
  

}

footer:hover {
    text-align: center;
    padding: 10px;
    margin: 25px;
    font-size: 30px;
    border-radius: 20px;
    border: 2px solid #ff7606;
    color: #012229;
    background-color: #06b5fa;
    cursor: pointer;
    transition: 0.8s;
}