/* Global Resets & Base Styles */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'DM Sans', sans-serif; /* Default text font */
  color: rgb(255, 255, 255); /* Default text color for sections with dark backgrounds */
  box-sizing: border-box;
  line-height: 1.6;
}

*, *:before, *:after {
  box-sizing: inherit;
}

#page-content {
  /* If you need an overall page wrapper */
}

/* Typography Helpers*/
.font-custom {
  font-family: 'Lilita One', cursive;
  color: rgb(255, 244, 44);
  letter-spacing: 0.1rem;
} 

.font-text { /* Already applied to body, can be used for overrides */
  font-family: 'DM Sans', sans-serif;
  color: rgb(255, 255, 255);
}

/* Animations */
@keyframes fall {
  from {
    transform: translateY(-200px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fall {
  animation: fall 1s ease-out forwards;
}

/* Utility Classes (like 'hidden' used by JS) */
.hidden {
  display: none !important; /* Important to override other display properties */
}

/* Alert Styles */
.alert {
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  font-family: 'DM Sans', sans-serif;
}
.alert-success {
  background-color: #48bb78; /* green-500 */
  color: white;
}
.alert-error {
  background-color: #f56565; /* red-500 */
  color: white;
}


/* Header & Navigation */
.site-header {
  background-color: rgb(8, 49, 105);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.main-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem; /* p-1 */
}

.nav-logo-placeholder {
  width: 140px; /* Matching logo width for balance */
}

.menu-toggle-button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0.5rem;
}
.menu-toggle-button img {
  width: 24px; /* Adjust as needed */
  height: 24px;
}

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Mobile styles (hidden by default, shown by JS) */
  position: absolute;
  top: 100%; /* Below header */
  left: 0;
  width: 100%;
  background-color: rgba(8, 49, 105, 0.9); /* slight transparency */
  text-align: center;
}

.nav-menu li {
  /* Styles for mobile list items if needed */
}

.nav-link {
  display: block;
  padding: 0.75rem 1rem; /* py-2 px-4 */
  color: white;
  text-decoration: none;
  font-size: 0.875rem; /* text-sm */
  font-weight: 600; /* font-semibold */
  transition: color 0.3s;
}
.nav-link:hover {
  color: #d1d5db; /* gray-300 */
}

/* Language Switcher */
.language-switcher {
  position: relative;
  padding: 0.5rem; /* p-2 */
}
.dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
}
.flag-icon {
  height: 1.5rem; /* h-6 */
  width: 1.5rem; /* w-6 */
}
.language-switcher .dropdown-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  padding-top: 1rem;
  background-color: rgba(8, 49, 105, 0.9); /* Match nav menu */
  border-radius: 0.25rem;
  list-style: none;
  margin: 0;
  min-width: 100px;
  z-index: 1010;
}
.language-switcher .dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space-x-2 */
  padding: 0.5rem 1rem;
  text-decoration: none;
}
.language-switcher .dropdown-menu li a span {
  font-family: 'DM Sans', sans-serif;
  color: white;
}
.language-switcher .dropdown-menu li a:hover span {
  color: rgb(255, 244, 44);
}
h1
{
  font-family: 'Lilita One', cursive;
  color: rgb(255, 244, 44); /* Default for font-custom */
  text-transform: uppercase;
  padding-top: 1rem;
  padding-bottom: 1rem;
  letter-spacing: 0.1rem;
  font-size: 2.4rem;
  text-align: left;
  
}
h2
{
  font-family: 'Lilita One', cursive;
  color: rgb(255, 244, 44); /* Default for font-custom */
  text-transform: uppercase;
  padding-top: 0rem;
  padding-bottom: 0rem;
  letter-spacing: 0.1rem;
  font-size: 3rem;
  text-align: left;
  margin-top: 2rem; 
  margin-left: 0rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  
} */

.font-text { /* Already applied to body, can be used for overrides */
  font-family: 'DM Sans', sans-serif;
  color: rgb(255, 255, 255);

}

section {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;

}

/* Hero Section */
.hero-section {
  background-image: linear-gradient(to right, #7d2ae8, #9184ff, #04dfe7);
  color: white;
  overflow: hidden;
 
}
.hero-container {
  max-width: 72rem; /* max-w-6xl */
  margin: 0 auto;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  align-items: flex-start;
  padding: 0 1rem; /* Horizontal padding for smaller screens */
}
.hero-logo-container {
  align-self: flex-start; /* self-start */
}
.course-radio {
  align-self: flex-start; /* self-start */
  padding-top: 15px;
}
.hero-logo {
  width: 90px;
  align-items:first baseline;
  padding-top: 20px;
  padding-left: 0px;
  padding-bottom: 5px;
}
.hero-content-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 120px;
}
.hero-text-content {
  text-align: left;
  max-width: 50rem; /* max-w-xl */
  width: 50%; /* lg:w-1/3 */
}
.hero-title {
  font-size: 2rem; /* text-[2rem] */
  margin-top: 1.25rem; /* my-5 */
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  line-height: 1.2; /* leading-tight */
}
.hero-tagline {
  font-size: 1rem; /* text-[1rem] */
  margin-bottom: 2rem; /* mb-8 */
   font-family: 'Lilita One', cursive;
  color: rgb(255, 244, 44);
  letter-spacing: 0.1rem;
}
.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* gap-5 */
  justify-content: center;
  align-items: center;
  width: 100%;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem; /* h-12 */
  color: white;
  font-weight: 500; /* font-medium */
  font-size: 0.875rem; /* text-sm */
  border-radius: 1.5625rem;
  text-transform: uppercase;
  transition: opacity 0.3s;
  text-decoration: none;
  padding: 0 1.5em; /* For width based on content */
  min-width: 9rem; /* w-36 */
}
.btn:hover {
  opacity: 0.8;
}
.btn-primary {
  background-color: rgb(193, 169, 244);
}
.btn-secondary {
  background-color: rgb(255, 102, 196);
}
.hero-rocket-container {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem; /* my-6 (partially) */
}
.hero-rocket {
  width: 6rem; /* w-[6rem] */
  height: 6rem; /* h-[6rem] */
  margin: 1.5rem auto; /* my-6 mx-auto */
}
.hero-image-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* items-start */
  justify-content: flex-start; /* justify-start */
  width: 50%; /* lg:w-2/3 */
  align-items: flex-start; /* lg:items-start */
}
.hero-robot-head {
  width: 7rem; /* w-[7rem] */
  height: auto;
  margin-left: 3rem; /* ml-[3rem] */
}
.hero-robot-arm {
  width: 20rem; /* w-[20rem] */
  height: auto;
}

/* About Section */
.about-section {
  

  background-color: rgb(193, 169, 244);
 
}
.content-container { /* Reusable container for max-width and centering */
  max-width: 72rem; /* max-w-6xl */
  width: 100%;
  margin: 0 auto;
  padding-top: 1rem; /* default padding for content sections */
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
 
}
.about-section .section-title .subsection-title {
  color: rgb(255, 244, 44); /* Default for font-custom */
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.about-section .section-title {
  font-size: 2rem;
}
.about-section .subsection-title {
  font-size: 1.2rem;
}
.about-section .text-block {
  font-size: 1.3rem;
  font-family: 'DM Sans', sans-serif;
  color: rgb(255, 255, 255);
  margin-bottom: 2rem;
}
.about-image {
  width: 20rem;
  height: 20rem;
  margin: 0 auto 2.5rem auto; /* mx-auto mb-10 */
}

/* Future Section */
.future-section {
  display: flex;
  justify-content: center;
  xpadding: 1.5rem; /* p-6 */
  background-color: rgb(8, 49, 105);
  color: white;
  position: relative;
  overflow: hidden;
}
.future-container {
  display: flex;
  flex-direction: column;
  max-width: 72rem; /* max-w-6xl */
  width: 100%;
  gap: 2.5rem; /* gap-10 */
}
.future-text-content .section-title {
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.future-text-content .text-block {
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 1.5rem;
}
.future-text-content .text-block:first-of-type { /* First paragraph */
  font-size: 1.2rem;
}
.future-text-content .text-block { /* Subsequent paragraphs */
  font-size: 1.3rem;
}
.highlight {
  color: rgb(255, 244, 44);
}
.future-image-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 5rem;
}
.future-image-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* gap-6 */
  width: 100%;
  xmax-width: 20rem; /* max-w-md */
}
.gallery-image {
  width: 100%;
  xheight: 90%;
  object-fit: cover;
  border-radius: 1.5rem; /* rounded-3xl */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-lg */
  margin: 0 auto;
}
.btn-tertiary {
  background-color: rgb(193, 169, 244);
  width: 12rem; /* w-36 lg:w-44 */
}

/* Courses Section */
.courses-section {

  background-color: rgb(193, 169, 244);
  text-align: center;
}
.courses-reg-section {

  background-color: #6E93F2;
  text-align: center;
}
.courses-section .courses-reg-section .content-container .levels-section{
  max-width: 72rem; /* max-w-6xl */
  margin: 0 auto;
}
.courses-title { /* .section-title.font-custom.courses-title */
  font-size: 2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  text-align: left;
  color: rgb(255, 244, 44); /* from font-custom */
}
.registration-message-box {
  background-color: #083169;
  border-radius: 1rem; /* rounded-2xl */
  padding: 1rem; /* p-4 */
  margin: 1rem 0; /* my-4 */ 
  color: #fff;
}
.registration-message-text { /* font-custom */
  font-size: 1rem;
  color: #000;
  text-align: left;
}
.courses-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem; /* gap-10 */
}
.course-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* items-start */
  gap: 1.5rem; /* gap-6 */
  width: 100%;
}
.course-card-image-container {
  width: 100%; /* w-[20rem] */
  min-width: 20rem;
  height: 24rem; /* h-[24rem] */
  border-radius: 1.5rem; /* rounded-3xl */
  overflow: hidden;
  transition: transform 0.3s ease;
  position: relative; /* For header and overlay */
  margin: 0 auto; /* Center on smaller screens */
}

.course-card-image-wrapper { /* .group */
  position: relative;
  width: 100%;
  height: 100%;
}
.course-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.5rem; /* rounded-3xl */
}
.course-image-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4); /* bg-black/40 */
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease; /* transition duration-300 */
}
/*.xcourse-card-image-wrapper:hover .course-image-overlay { 
  opacity: 1;
} */
.btn-overlay {
  background-color: #9E5AFF;
  color: white;
  padding: 0.5rem 1.25rem; /* px-5 py-2 */
  border-radius: 9999px; /* rounded-full */
  font-weight: 600; /* font-semibold */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* shadow-lg */
}
.xbtn-overlay:hover {
  background-color: #7d40d6;
}
.course-card-header {
  position: absolute;
  top: 0;
  height: 6rem; /* h-[6rem] */
  width: 100%;
  border-top-left-radius: 1.5rem; /* Ensure consistent rounding */
  border-top-right-radius: 1.5rem;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  padding-left: 3.0rem; /* p-14 */
  padding-right: 1.0rem; /* p-14 */
  
}
.course-card-name {
  font-size: 1.125rem; /* text-lg */
  font-weight: 800; /* font-extrabold */
  color: #9E5AFF;
  text-align: left;
  text-transform: uppercase;
  margin: 0;
}
.plus-icon-img {
  width: 2.25rem; /* w-9 */
  height: 2.25rem; /* h-9 */
  margin-right: 0.5rem; /* mr-2 */
}
.course-card-details {
  background-color: white;
  border-radius: 1.5rem; /* rounded-3xl */
  padding-left: 3.0rem; /* p-14 */
  padding-right: 3.0rem; /* p-14 */
  padding-top: 1.0rem; /* p-14 */
  width: 100%;
  min-height: 24rem; /* h-auto md:h-[24rem] */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-lg */
  text-align: left;
  transition: transform 0.3s ease;
  color: black; /* Text color for white background */
  xwidth: 90.6667%; /* lg:w-2/3 */
  min-height: 24rem; /* Ensure it matches image container height */
}
/*.course-card-details:hover {
  transform: translateY(-0.5rem);
}*/
.course-details-title {
  font-size: 1.125rem; /* text-lg */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  margin-bottom: 1rem; /* mb-4 */
  color: #9E5AFF;
}
.course-details-description {
  font-family: 'DM Sans', sans-serif; /* font-text */
  font-size: 1rem; /* text-base */
  color: black;
}

/* Registration Form Section */
.registration-form-section {
  background-color: #6E93F2;
  padding: 0rem; /* p-8 */
  border-radius: 0.75rem; /* rounded-xl */
  width: 100%;
  margin: 0 auto;
  /* box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); shadow-lg */
  color: #374151; /* Default dark gray for text on white bg */
}
.form-title {
  font-size: 1.5rem; /* text-2xl */
  text-align: center;
  font-weight: 700; /* font-bold */
  margin-top: 0.5rem; /* my-2 */
  margin-bottom: 1.5rem; /* my-2 + space after */
  color: #9E5AFF;
}
.form-layout-container {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* gap-8 */
}
.form-fields-container {
  
     min-width: 50%; /* lg:w-1/2 */
      background-color: #FFCDD3;
  border-radius: 1.5rem; /* rounded-3xl */
  padding: 1.5rem; /* p-14 */
}
.registration-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* space-y-6 */
}
.form-group {
  text-align: left;
}
.form-subtitle {
  font-weight: 600; /* font-semibold */
  color: #000; /* gray-700 */
  margin-bottom: 0.5rem; /* mb-2 */
}
.child-info-title { /* .form-subtitle.child-info-title */
  color: #9E5AFF;
}
.radio-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem; /* gap-2 */
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space-x-2 */
  border: 1px solid #e2e8f0; /* border */
  padding: 0.5rem; /* p-2 */
  border-radius: 0.375rem; /* rounded-md */
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); /* shadow-sm */
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.radio-label:hover {
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); /* hover:shadow */
}
.radio-label input[type="radio"] {
  accent-color: #9E5AFF; /* For the radio button itself */
}
.radio-label span {
  color: #2d3748; /* gray-800 */
}
.input-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* gap-4 */
}
.form-input, .form-textarea {
  border: 1px solid #e2e8f0; /* border */
  padding: 0.5rem; /* p-2 */
  border-radius: 0.375rem; /* rounded-md */
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); /* shadow-sm */
  width: 100%;
  color: #1a202c; /* Ensure text input is visible */
}
.form-input:focus, .form-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px #9E5AFF; /* focus:ring-1 focus:ring-[#9E5AFF] */
  border-color: #9E5AFF;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem; /* mt-6 */
}
.btn-submit {
  background-color: #9E5AFF;
  color: white;
  padding: 0.5rem 1.5rem; /* px-6 py-2 */
  border-radius: 0.5rem; /* rounded-lg */
  transition: background-color 0.2s ease-in-out;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* shadow-lg */
  border: none;
  cursor: pointer;
}
.btn-submit:hover {
  background-color: #7e3fed;
}
.form-course-details-container {
  width: 100%;
  /* Styles for height, overflow, transition, transform can be added if dynamic show/hide is re-implemented */
  text-align: left;
  color: #000308; /* text color */
    xwidth: 50%; /* lg:w-1/2 */
     background-color: #CCCEFF;
  border-radius: 1.5rem; /* rounded-3xl */
  padding: 1.5rem; /* p-14 */
}
.selected-course-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 0.75rem; /* my-3 */
  margin-bottom: 0.75rem;
  color: #2d3748; /* gray-800 */
}
.selected-course-content-list {
  list-style-type: disc;
  padding-left: 1.25rem;
}
.selected-course-content-list li {
  color: #000; /* Example color */
  margin-bottom: 0.25rem;
}
.levels-section {
  display: flex;
  justify-content: center;
  xpadding: 1.5rem; /* p-6 */
  background-color:#6e93f2;
  color: black;
  position: relative;
  overflow: hidden;
}
.levels-container {
  display: flex;
  flex-direction: column;
  max-width: 72rem; /* max-w-6xl */
  width: 100%;
  gap: 2.5rem; /* gap-10 */
}

/* Contact Section */
.contact-section {
  padding: 0rem; /* p-4 */
  background-color: rgb(8, 49, 105);
  color: white;
  position: relative;
  overflow: hidden;
  
}
.contact-title { /* .section-title.font-custom */
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: left;
  text-transform: uppercase;
}
.contact-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* gap-8 */
  align-items: center;
}
.footer-section {
  padding: 1rem; /* p-4 */
  background-color: #fff;
  color:#000;
  position: relative;
  overflow: hidden;
}
.footer-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* gap-8 */
  align-items: center;
}
.contact-info-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.contact-details {
  /* Container for phone and social */
  align-items: start;
}
.contact-detail-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem; /* gap-5 */
  margin-bottom: 2rem; /* mb-8 */
 
     
}
.contact-label {
  font-size: 1.125rem; /* text-lg */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11rem; /* w-44 */
  font-weight: 600; /* font-semibold */
  background-color: rgb(193, 169, 244);
  padding: 0.625rem; /* p-2.5 */
  text-transform: uppercase;
  border-radius: 9999px; /* rounded-full */
  color: white;
}
.contact-text {
  font-family: 'DM Sans', sans-serif; /* font-text */
  font-size: 1rem; /* text-md */
  font-weight: 500; /* font-medium */
  text-align: center;
}
.social-icons {
  display: flex;
  align-items: center;
  gap: 1rem; /* gap-4 */
}
.social-icon {
  height: 50px; /* h-8 */
  xwidth: 25px; /* w-8 */
}
 
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* space-y-8 */
}
.contact-form .form-label {
  display: block;
  margin-bottom: 0.5rem; /* mb-2 */
  font-size: 1.125rem; /* text-lg */
  font-weight: 500; /* font-medium */
  color: rgb(193, 169, 244);
}
.contact-form .form-input, .contact-form .form-textarea {
  background-color: white;
  border: 1px solid #d1d5db; /* border-gray-300 */
  color: #1f2937; /* text-gray-900 */
  font-size: 0.875rem; /* text-sm */
  border-radius: 0.5rem; /* rounded-lg */
  display: block;
  width: 100%;
  padding: 0.625rem; /* p-2.5 */
}
.contact-form .form-input:focus, .contact-form .form-textarea:focus {
  outline: none;
  border-color: rgb(193,169,244); /* Example focus color */
  box-shadow: 0 0 0 2px rgba(193,169,244,0.5);
}
.btn-contact-submit {
  font-size: 1.125rem; /* text-lg */
  text-align: center;
  display: flex;
  align-items: center; /* Corrected from items-left */
  justify-content: center;
  width: auto; /* Adjust from w-44 to be more flexible or set a specific width */
  min-width: 11rem; /* w-44 as min-width */
  font-weight: 600; /* font-semibold */
  background-color: rgb(193, 169, 244);
  padding: 0.625rem 1.25rem; /* py-2.5 px-5 */
  text-transform: uppercase;
  border-radius: 9999px; /* rounded-full */
  color: white;
  border: none;
  cursor: pointer;
}
.btn-contact-submit:hover {
    opacity: 0.9;
}
.contact-image-container {
  width: 100%; /* w-full, adjusted for flex column */
  display: flex;
  justify-content: center;
}
.contact-image {
  width: 100%;
  max-width: 25rem; /* Example max-width */
  height: auto;
}


/* Footer */
.site-footer-bottom {
  background-color: rgb(8, 49, 105);
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif; /* font-text */
  color: white;
}
.footer-text {
  font-size: 0.75rem; /* text-xs */
  text-align: center;
}


/* Responsive Styles */
@media (min-width: 768px) { /* md breakpoint */
  .menu-toggle-button {
    display: none;
  }
  .nav-menu {
    position: static;
    display: flex !important; /* Override .hidden if it was applied on mobile */
    gap: 0.5rem; /* space-x-2 */
    width: auto;
    background-color: transparent;
    align-items: center; /* Align items including dropdown */
  }
  .nav-menu li {
    /* Reset mobile list item styles if any */
  }
  .language-switcher .dropdown-menu {
    left: auto; /* Reset mobile positioning */
    right: 0; /* Align to the right of the button */
    transform: none;
  }

  .hero-tagline {
    font-size: 1.5rem; /* md:text-[1.5rem] */
     font-family: 'Lilita One', cursive;
  color: rgb(255, 244, 44);
  letter-spacing: 0.1rem;
  }
  .hero-buttons {
    flex-direction: row;
    justify-content: flex-start;
  }
  .btn {
    font-size: 1rem; /* lg:text-base */
    min-width: 11rem; /* lg:w-44 */
  }
  .hero-rocket {
    width: 8rem; /* lg:w-[8rem] */
    height: 8rem; /* lg:h-[8rem] */
    margin-left: 5rem; /* lg:ml-20 */
  }

  .about-section .section-title { font-size: 3rem; /* lg:text-[3rem] */ }
  .future-text-content .section-title { font-size: 3rem; /* lg:text-[3rem] */ }
  .courses-title { font-size: 3rem; /* lg:text-[3rem] */ }
  .contact-title { font-size: 3rem; /* lg:text-[3rem] */ }


  .course-item {
    flex-direction: row; /* lg:flex-row */
  }
  .course-card-image-container {
    width: 33.3333%; /* lg:w-1/3 */
    margin: 0; /* Reset auto margin */
  }
 

  .form-layout-container {
    flex-direction: row; /* lg:flex-row */
  }
  

 
  .contact-label { text-align: left; /* sm:text-left */ }
  .contact-text { text-align: left; /* sm:text-left */ }

  .gallery-image {
    width: 20rem; /* lg:w-[20rem] */
  }
  .btn-tertiary {
    width: 11rem; /* lg:w-44 */
  }
}

@media (min-width: 1024px) { /* lg breakpoint */
  .main-navigation {
    padding: 0.25rem; /* lg:p-1 */
  }
  .hero-section {
    padding: 0; /* lg:p-0 */
  }
  .hero-content-layout {
    flex-direction: row; /* lg:flex-row */
    align-items: flex-start; /* lg:items-start */
  }

  .hero-title {
    font-size: 3rem; /* lg:text-[3rem] */
  }
  
  .hero-robot-head {
    width: 10rem; /* lg:w-[10rem] */
    margin-left: 7rem; /* lg:ml-[7rem] */
  }
  .hero-robot-arm {
    width: 100%; /* lg:w-full */
  }

  .future-container {
    flex-direction: row; /* lg:flex-row */
    align-items: flex-start; /* items-start */
  }

  .contact-info-form {
    width: 50%; /* lg:w-[50%] */
  }
}

@media (min-width: 1280px) { /* xl breakpoint */
    .contact-layout {
        flex-direction: row; /* xl:flex-row */
        align-items: center; /* xl:items-center */
    }
    .contact-image-container {
        width: 40%; /* w-[40%] */
        justify-content: flex-end; /* If image should be to the right */
    }
}

/*Master section*/
*, *::before, *::after {
            box-sizing: inherit;
        }

        /* Container für den gesamten Inhalt */
        .main-container {
            max-width: 70rem; /* ehemals max-w-7xl */
            margin-left: auto;
            margin-right: auto;
        }

        /* Hauptüberschrift */
        .main-heading {
            font-size: 2.25rem; /* ehemals text-4xl */
            line-height: 2.5rem;
            font-weight: 700; /* ehemals font-bold */
            text-align: center; /* ehemals text-center */
            color: #1F2937; /* ehemals text-gray-800 */
            margin-bottom: 4rem; /* ehemals mb-16 */
        }

        /* Grid-Layout für die Meilensteinkarten */
        .milestones-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr)); /* Standard: 1 Spalte */
            gap: 2rem; /* ehemals gap-8 */
        }

        /* Basisstile für alle Meilensteinkarten */
        .milestone-card-base {
            background-color: white;
            border-radius: 0.75rem; /* ehemals rounded-xl */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* ehemals shadow-lg */
            padding: 1rem; /* ehemals p-6 */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border-top-width: 4px;
            border-top-style: solid;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .xmilestone-card-base:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        /* Spezifische Border-Farben für jede Karte */
        .border-blue { border-top-color: #3B82F6; }
        .border-green { border-top-color: #10B981; }
        .border-purple { border-top-color: #8B5CF6; }
        .border-yellow { border-top-color: #F59E0B; }

        /* Stile für Icon-Container und Icons */
        .icon-container {
            margin-bottom: 1rem; /* ehemals mb-4 */
        }

        .milestone-icon {
            width: 4rem; /* ehemals w-16 */
            height: 4rem; /* ehemals h-16 */
            margin-left: auto;
            margin-right: auto;
        }
        .icon-blue { stroke: #3B82F6; } /* ehemals text-blue-500 */
        .icon-green { stroke: #10B981; } /* ehemals text-green-500 */
        .icon-purple { stroke: #8B5CF6; } /* ehemals text-purple-500 */
        .icon-yellow { stroke: #F59E0B; } /* ehemals text-yellow-500 */


        /* Stile für Überschriften und Paragraphen in den Karten */
        .card-heading {
            font-size: 1.5rem; /* ehemals text-2xl */
            line-height: 2rem;
            font-weight: 600; /* ehemals font-semibold */
            color: #1F2937; /* ehemals text-gray-800 */
            margin-bottom: 0.75rem; /* ehemals mb-3 */
        }

        .card-paragraph {
            color: #4B5563; /* ehemals text-gray-600 */
            line-height: 1.625; /* ehemals leading-relaxed */
        }

        .card-paragraph strong {
            font-weight: 700; /* für Hervorhebungen */
        }

        /* Media Queries für responsives Grid und Padding */
        @media (min-width: 768px) { /* md Breakpoint */
            .milestones-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 Spalten */
            }
            body {
                padding-left: 1.5rem; /* ehemals sm:px-6 */
                padding-right: 1.5rem; /* ehemals sm:px-6 */
            }
        }

        @media (min-width: 1024px) { /* lg Breakpoint */
            .milestones-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 Spalten */
            }
            body {
                padding-left: 2rem; /* ehemals lg:px-8 */
                padding-right: 2rem; /* ehemals lg:px-8 */
            }
        }