* {
       margin: 0;
       padding: 0;
       text-decoration: none;
       list-style: none;
     }

     body {
       background-color: black;
       color: white;
     }

     ul {
       display: flex;
       justify-content: space-between;
       padding-right: 10px;
       padding-left: 10px;
     }

     .hero {
       position: relative;
       width: 100%;
       height: 100vh;
       /* Full viewport height */
       display: flex;
       justify-content: center;
       align-items: center;
       overflow: hidden;
     }

     .hero-img {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       /* Ensures image covers the area */
       z-index: -1;
       /* Pushes image behind the text */
     }

     .heros {
       color: white;
       font-size: 3rem;
       text-align: center;
       z-index: 1;
       text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
       /* Improves readability */
     }

     .hero::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.4);
       /* Dark overlay */
       z-index: -1;
     }

     .txt {
       display: block;
       margin-top: 100px;
       font-family: "Copperplate";
       text-align: center;
       font-size: 20px;
     }

     ul a {
       color: white;
       font-family: Georgia, 'Times New Roman', Times, serif;
       margin-top: 10px;

     }

     ul a {
       position: relative;
       color: rgb(255, 255, 255);
       text-decoration: none;
       font-size: large;
       font-family: OCR A Std, monospace;
     }

     ul a::after {
       content: '';
       position: absolute;
       left: 0;
       bottom: -2px;
       /* adjust as needed */
       width: 0%;
       height: 2px;
       background-color: grey;
       transition: width 0.3s ease;
     }

     ul a:hover::after {
       width: 100%;
     }

     .heros {
       font-family: "Orbitron", sans-serif;
       font-optical-sizing: auto;
       font-weight: bolder;
       font-style: normal;
     }

     section {
       display: grid;
       place-items: center;
       align-items: center;

     }

     .hidden {
       opacity: 0;
       filter: blur(5px);
       transform: translateX(-50px);
       transition: all 1s;
     }

     .show {
       opacity: 1;
       filter: blur(0px);
       transform: translatex(0);
     }

     #courses {

       margin-top: 10px;
     }

     h2 {
       font-size: 50px;
       font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
       font-style: italic;
     }

     .course-list {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       gap: 20px;
     }

     .course:hover {
       transform: translateY(-5px);
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
       cursor: pointer
     }

     .course {
       border-radius: 8px;
       padding: 15px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s, box-shadow 0.3s;
     }

     #enroll {
       margin-top: 100px;

     }

     form {

     
       border-radius: 8px;
       padding: 20px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
       margin: 20px auto;
       max-width: 500px;
    
     }

     label {
       display: block;
       margin: 10px 0 5px;
     }

     input[type="text"],
     input[type="email"],
     select,
     textarea {
       width: 100%;
       padding: 10px;
       margin-bottom: 15px;
       border: 1px solid #ccc;
       border-radius: 4px;
       transition: border-color 0.3s;
     }

     input,
     textarea,
     select {
       margin-left: -10px;
       font-weight: bold;
     }

     input[type="text"]:focus,
     input[type="email"]:focus,
     select:focus,
     textarea:focus {
       border-color: #6a11cb;
       /* Change border color on focus */
     }

     input[type="submit"] {
       background-color: #6a11cb;
       color: white;
       border: none;
       padding: 10px;
       border-radius: 4px;
       cursor: pointer;
       font-weight: bold;
       transition: background-color 0.3s, transform 0.3s;
     }

     input[type="submit"]:hover {
       background-color: #2575fc;
       transform: translateY(-2px);
     }

     #contact {
       margin-top: 150px;
       margin-bottom: 50px;
       font-size: 20px;
       font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

     }

     #contact p {
       margin-left: 10px;
     }

     footer {
       text-align: center;
       padding: 20px;

       color: white;
       position: relative;
       bottom: 0;
       width: 90%;
     }

     iframe {
       border: none;
       width: 60%;
       height: 200px;
     }