html {
  /* Targets the HTML element */
  scroll-behavior: smooth;
  /* Enables smooth scrolling for anchor links */
}

body {
  /* Targets the body element */
  margin: 0;
  /* Removes default margin */
  font-family: 'Poppins', sans-serif;
  /* Sets Poppins as the default font */
  color: #0011ffe9;
  /* Sets default text color to white */
  overflow-x: hidden;
  /* Prevents horizontal scrolling */
  position: relative;
  /* Allows positioning of pseudo-elements relative to body */
}

/* Blurred background using pseudo-element */
body::before {
  /* Creates a pseudo-element before the body content */
  content: "";
  /* Required for pseudo-element to render */
  position: fixed;
  /* Fixes the background to the viewport */
  top: 0;
  /* Positions at the top */
  left: 0;
  /* Positions at the left */
  width: 100vw;
  /* Sets width to full viewport width */
  height: 100vh;
  /* Sets height to full viewport height */
  background: url('../../frontend/img/background.jpg') no-repeat center center/cover;
  /* Sets background image with centering and scaling */
  filter: blur(10px);
  /* Applies a 10px blur effect to the background */
  z-index: -1;
  /* Places the pseudo-element behind all content */
}

header {
  /* Styles the header element */
  background: rgba(0, 0, 0, 0.25);
  /* Sets a semi-transparent black background */
  padding: 1rem 3rem;
  /* Adds padding (1rem top/bottom, 3rem left/right) */
  display: flex;
  /* Uses flexbox for layout */
  justify-content: space-between;
  /* Spaces logo and nav horizontally */
  align-items: center;
  /* Vertically centers items */
  position: sticky;
  /* Keeps header fixed at the top during scroll */
  top: 0;
  /* Sticks to the top of the viewport */
  z-index: 1000;
  /* Ensures header stays above other elements */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  /* Adds a subtle shadow below */
}

.logo-container {
  /* Styles the logo container div */
  cursor: pointer;
  /* Changes cursor to pointer on hover */
}

.logo-container img {
  /* Styles the logo image */
  width: 150px;
  /* Sets image width */
  height: 100px;
  /* Sets image height */
  transition: transform 0.5s ease;
  /* Animates transform changes over 0.5s */
}

.logo-container img:hover {
  /* Styles logo image on hover */
  transform: scale(1.2);
  /* Scales image up by 20% */
}

nav a {
  /* Styles navigation links */
  color: #fff;
  /* Sets text color to white */
  margin-left: 25px;
  /* Adds left margin between links */
  text-decoration: none;
  /* Removes underline from links */
  font-weight: 600;
  /* Sets bold font weight */
  font-size: 1rem;
  /* Sets font size */
  transition: color 0.3s ease, font-weight 0.3s ease, font-size 0.3s ease;
  /* Animates color, weight, and size changes */
}

nav a:hover {
  /* Styles navigation links on hover */
  color: #1d00fc;
  /* Changes text color to blue */
  font-weight: 700;
  /* Makes font bolder */
  font-size: 1.2rem;
  /* Increases font size */
}

.hero {
  /* Styles the hero section */
  padding: 120px 20px 140px;
  /* Adds padding (120px top, 20px sides, 140px bottom) */
  text-align: center;
  /* Centers text content */
  max-width: 900px;
  /* Limits section width */
  margin: 0 auto;
  /* Centers section horizontally */
  animation: fadeInUp 1s ease-in-out;
  /* Applies fade-in-up animation */
}

.hero h2 {
  font-size: 3.5rem;
  margin-bottom: 25px;
  font-weight: 700;
}

.hero p {
  /* Styles the hero paragraph */
  font-size: 1.3rem;
  /* Sets font size */
  max-width: 650px;
  /* Limits paragraph width */
  margin: 0 auto;
  /* Centers paragraph */
  line-height: 1.5;
  /* Sets line spacing */
  color: #00eaff;
  /* Sets light blue text color */
}

.btn-primary {
  /* Styles primary buttons */
  margin-top: 30px;
  /* Adds top margin */
  background: #0400ff;
  /* Sets blue background */
  color: #ffffff;
  /* Sets white text color */
  padding: 14px 40px;
  /* Adds padding */
  font-size: 18px;
  /* Sets font size */
  font-weight: 700;
  /* Sets bold font */
  border: none;
  /* Removes border */
  border-radius: 30px;
  /* Rounds corners */
  cursor: pointer;
  /* Shows pointer cursor */
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* Animates background and transform */
  box-shadow: 0 6px 12px rgba(255, 221, 89, 0.5);
  /* Adds shadow */
  text-decoration: none;
  /* Removes underline for links */
  display: inline-block;
  /* Ensures proper button/link behavior */
}

.btn-primary:hover {
  /* Styles primary buttons on hover */
  background-color: #2900f6;
  /* Darkens blue background */
  transform: translateY(-2px);
  /* Lifts button slightly */
  color: #ffffff;
  /* Retains white text color */
}

.section-container {
  /* Styles section containers (services, universities) */
  max-width: 1000px;
  /* Limits width */
  margin: 0 auto;
  /* Centers section */
  padding: 60px 20px;
  /* Adds padding */
  background: rgba(255, 255, 255, 0.9);
  /* Sets semi-transparent white background */
  border-radius: 20px;
  /* Rounds corners */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  /* Adds shadow */
  color: #333;
  /* Sets dark text color */
  text-align: center;
  /* Centers content */
  animation: fadeIn 1s ease forwards;
  /* Applies fade-in animation */
}

.services {
  /* Styles the services section */
  margin-bottom: 80px;
  /* Adds bottom margin */
}

.services h3,
#universities h3 {
  /* Styles headings in services and universities sections */
  font-size: 2.8rem;
  /* Sets large font size */
  margin-bottom: 30px;
  /* Adds bottom margin */
  font-weight: 700;
  /* Sets bold font */
  color: #007BFF;
  /* Sets blue color */
  text-transform: uppercase;
  /* Converts text to uppercase */
}

.service-item {
  /* Styles individual service items */
  max-width: 320px;
  /* Limits width */
  margin: 30px auto;
  /* Centers with margin */
  background: #e8f1ff;
  /* Sets light blue background */
  padding: 25px 20px;
  /* Adds padding */
  border-radius: 15px;
  /* Rounds corners */
  box-shadow: 0 6px 18px rgba(0, 123, 255, 0.2);
  /* Adds shadow */
  opacity: 0;
  /* Starts invisible */
  transform: translateY(50px);
  /* Starts shifted down */
  transition: opacity 0.7s ease, transform 0.7s ease;
  /* Animates opacity and transform */
}

.service-item.visible {
  /* Styles service items when visible */
  opacity: 1;
  /* Makes fully visible */
  transform: translateY(0);
  /* Moves to original position */
}

.service-item:hover {
  /* Styles service items on hover */
  transform: translateY(-10px);
  /* Lifts item up */
  box-shadow: 0 12px 30px rgba(0, 123, 255, 0.35);
  /* Enhances shadow */
}

.service-item h4 {
  /* Styles service item headings */
  font-size: 1.6rem;
  /* Sets font size */
  margin-bottom: 12px;
  /* Adds bottom margin */
  color: #007BFF;
  /* Sets blue color */
  font-weight: 700;
  /* Sets bold font */
}

.service-item p {
  /* Styles service item paragraphs */
  font-size: 1rem;
  /* Sets font size */
  color: #555;
  /* Sets dark gray color */
}

.btn-section {
  /* Styles button sections */
  margin-top: 25px;
  /* Adds top margin */
}

.cta,
.contact-form-container {
  /* Styles CTA and contact form sections */
  background: rgba(255, 255, 255, 0.15);
  /* Sets semi-transparent white background */
  padding: 60px 20px;
  /* Adds padding */
  text-align: center;
  /* Centers content */
  margin-top: 60px;
  /* Adds top margin */
  border-radius: 20px;
  /* Rounds corners */
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.15);
  /* Adds shadow */
  max-width: 700px;
  /* Limits width */
  margin-left: auto;
  /* Centers horizontally */
  margin-right: auto;
  /* Centers horizontally */
  animation: fadeInUp 1s ease-in-out;
  /* Applies fade-in-up animation */
  backdrop-filter: blur(10px);
  /* Adds blur effect to background */
}

.cta h3,
.contact-form-container h3 {
  /* Styles headings in CTA and contact form */
  font-size: 2.6rem;
  /* Sets large font size */
  margin-bottom: 15px;
  /* Adds bottom margin */
  font-weight: 700;
  /* Sets bold font */
  color: #0000009e;
  /* Sets white color */
}

.cta p,
.contact-form-container p {
  /* Styles paragraphs in CTA and contact form */
  font-size: 1.2rem;
  /* Sets font size */
  color: #e1e9ff;
  /* Sets light blue color */
}

.form-group {
  /* Styles form input groups */
  display: flex;
  /* Uses flexbox layout */
  align-items: center;
  /* Vertically centers items */
  justify-content: flex-start;
  /* Aligns items to the left */
  width: 90%;
  /* Sets width to 90% */
  max-width: 500px;
  /* Limits maximum width */
  margin-bottom: 20px;
  /* Adds bottom margin */
  text-align: left;
  /* Aligns text to the left */
}

.form-group label {
  /* Styles form labels */
  flex: 1;
  /* Takes up available space */
  color: #fff;
  /* Sets white color */
  font-weight: 600;
  /* Sets bold font */
  margin-right: 10px;
  /* Adds right margin */
}

.form-group input,
.form-group select {
  /* Styles form inputs and selects */
  flex: 2;
  /* Takes up more space than label */
  padding: 12px 15px;
  /* Adds padding */
  border-radius: 8px;
  /* Rounds corners */
  border: none;
  /* Removes border */
  font-size: 1rem;
  /* Sets font size */
}

input[type="submit"] {
  /* Styles the submit button */
  background: #1100ff;
  /* Sets blue background */
  color: #ffffff;
  /* Sets white text color */
  font-weight: bold;
  /* Sets bold font */
  cursor: pointer;
  /* Shows pointer cursor */
  transition: 0.3s;
  /* Animates changes */
  padding: 12px 30px;
  /* Adds padding */
  border-radius: 25px;
  /* Rounds corners */
  border: none;
  /* Removes border */
  font-size: 1rem;
  /* Sets font size */
  margin-top: 15px;
  /* Adds top margin */
}

input[type="submit"]:hover {
  /* Styles submit button on hover */
  background: #0073f6;
  /* Darkens blue background */
  color: #ffffff;
  /* Retains white text color */
}

footer {
  /* Styles the footer */
  text-align: center;
  /* Centers content */
  padding: 20px 15px;
  /* Adds padding */
  background: rgba(0, 0, 0, 0.3);
  /* Sets semi-transparent black background */
  font-size: 14px;
  /* Sets font size */
  color: #ccc;
  /* Sets light gray color */
  margin-top: 60px;
  /* Adds top margin */
}

.floating-buttons {
  /* Styles floating buttons container */
  position: fixed;
  /* Fixes position to viewport */
  bottom: 25px;
  /* Positions from bottom */
  left: 25px;
  /* Positions from left */
  display: flex;
  /* Uses flexbox layout */
  flex-direction: column;
  /* Arranges buttons vertically */
  gap: 15px;
  /* Adds spacing between buttons */
  z-index: 9999;
  /* Places above most elements */
  animation: fadeIn 1s ease;
  /* Applies fade-in animation */
}

.floating-buttons a {
  /* Styles floating button links */
  display: flex;
  /* Uses flexbox for centering */
  align-items: center;
  /* Vertically centers content */
  justify-content: center;
  /* Horizontally centers content */
  background-color: #25D366;
  /* Sets green background (WhatsApp) */
  color: white;
  /* Sets white icon color */
  width: 55px;
  /* Sets width */
  height: 55px;
  /* Sets height */
  border-radius: 50%;
  /* Makes circular */
  text-decoration: none;
  /* Removes underline */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  /* Adds shadow */
  transition: transform 0.3s ease;
  /* Animates transform */
  font-size: 24px;
  /* Sets icon size */
}

.floating-buttons a.phone {
  /* Styles the phone button */
  background-color: #007BFF;
  /* Sets blue background */
}

.floating-buttons a:nth-child(3) {
  /* Styles the third floating button (email) */
  background-color: #f44336;
  /* Sets red background */
}

.floating-buttons a:hover {
  /* Styles floating buttons on hover */
  transform: scale(1.1);
  /* Scales up by 10% */
}

.address-social {
  /* Styles address and social icons section */
  max-width: 1000px;
  /* Limits width */
  margin: 40px auto 20px;
  /* Adds margins */
  padding: 20px 30px;
  /* Adds padding */
  background: rgba(255, 255, 255, 0.15);
  /* Sets semi-transparent background */
  backdrop-filter: blur(10px);
  /* Adds blur effect */
  border-radius: 15px;
  /* Rounds corners */
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
  /* Adds shadow */
  display: flex;
  /* Uses flexbox layout */
  justify-content: space-between;
  /* Spaces address and icons */
  align-items: center;
  /* Vertically centers content */
  color: #fff;
  /* Sets white text color */
  font-size: 1.1rem;
  /* Sets font size */
  font-weight: 600;
  /* Sets bold font */
}

.address p {
  /* Styles address paragraph */
  margin: 0;
  /* Removes margin */
  line-height: 1.4;
  /* Sets line spacing */
}

.social-icons a {
  /* Styles social media links */
  color: #fff;
  /* Sets white color */
  margin-left: 20px;
  /* Adds left margin */
  font-size: 1.5rem;
  /* Sets icon size */
  transition: color 0.3s ease;
  /* Animates color change */
  text-decoration: none;
  /* Removes underline */
}

.social-icons a:hover {
  /* Styles social media links on hover */
  color: #8540da;
  /* Changes to yellow */
}

@media (max-width: 600px) {

  /* Media query for screens 600px and narrower */
  .address-social {
    /* Styles address-social section */
    flex-direction: column;
    /* Stacks items vertically */
    text-align: center;
    /* Centers text */
    gap: 15px;
    /* Adds spacing between items */
  }

  .social-icons a {
    /* Styles social media links */
    margin-left: 10px;
    /* Reduces left margin */
    margin-right: 10px;
    /* Adds right margin */
    font-size: 1.8rem;
    /* Increases icon size */
  }

  /* Typing animation for hero heading */
  .typing-animation {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 4px solid #ffdd59;
    width: 0;
    animation:
      typing 3.5s steps(40, end) forwards,
      blink-cursor 0.75s step-end infinite,
      pulse 0.5s ease-in-out 3.5s 1;
    opacity: 0;
    animation-fill-mode: forwards;
  }

  @keyframes typing {

    /* Defines typing animation */
    0% {
      /* Starting state */
      width: 0;
      /* Zero width */
      opacity: 0;
      /* Invisible */
    }

    10% {
      /* At 10% of animation */
      opacity: 1;
      /* Becomes visible */
    }

    100% {
      /* Ending state */
      width: 100%;
      /* Full width */
      opacity: 1;
      /* Fully visible */
    }
  }

  @keyframes blink-cursor {

    /* Defines cursor blinking animation */
    0%,
    100% {
      /* Start and end state */
      border-color: transparent;
      /* Hides cursor */
    }

    50% {
      /* Midpoint state */
      border-color: #ffdd59;
      /* Shows yellow cursor */
    }
  }

  @keyframes pulse {

    /* Defines pulse animation */
    0% {
      /* Starting state */
      transform: scale(1);
      /* Normal size */
    }

    50% {
      /* Midpoint state */
      transform: scale(1.05);
      /* Slightly enlarged */
    }

    100% {
      /* Ending state */
      transform: scale(1);
      /* Back to normal */
    }
  }

  /* Ensure hero h2 styles are preserved */
  .hero h2.typing-animation {
    /* Styles hero h2 with typing animation */
    font-size: 3.5rem;
    /* Sets font size */
    margin-bottom: 25px;
    /* Adds bottom margin */
    font-weight: 700;
    /* Sets bold font */
    color: #fff;
    /* Sets white color */
  }
}

@media (min-width: 768px) {

  /* Media query for screens 768px and wider */
  .service-item {
    /* Styles service items */
    display: inline-block;
    /* Displays items inline */
    vertical-align: top;
    /* Aligns items to the top */
    margin: 20px;
    /* Adds margin */
  }
}

@keyframes fadeInUp {

  /* Defines fade-in-up animation */
  0% {
    /* Starting state */
    opacity: 0;
    /* Invisible */
    transform: translateY(30px);
    /* Shifted down */
  }

  100% {
    /* Ending state */
    opacity: 1;
    /* Fully visible */
    transform: translateY(0);
    /* Original position */
  }
}

@keyframes fadeIn {

  /* Defines fade-in animation */
  from {
    /* Starting state */
    opacity: 0;
    /* Invisible */
  }

  to {
    /* Ending state */
    opacity: 1;
    /* Fully visible */
  }
}

/* University page css */
.button-container {
  /* Styles the flag buttons container */
  margin-bottom: 40px;
  /* Adds bottom margin */
  display: flex;
  /* Uses flexbox layout */
  flex-wrap: wrap;
  /* Allows wrapping */
  justify-content: center;
  /* Centers buttons */
  gap: 15px;
  /* Adds spacing between buttons */
}

.flag-button {
  /* Styles flag buttons */
  background: none;
  /* Removes background */
  border: none;
  /* Removes border */
  cursor: pointer;
  /* Shows pointer cursor */
  padding: 0;
  /* Removes padding */
  border-radius: 50%;
  /* Makes circular */
  overflow: hidden;
  /* Clips content to circle */
  transition: transform 0.3s;
  /* Animates transform */
  width: 60px;
  /* Sets equal width for circle */
  height: 60px;
  /* Sets equal height for circle */
}

.flag-button img {
  /* Styles flag images */
  width: 100%;
  /* Fills button width */
  height: 100%;
  /* Fills button height */
  object-fit: cover;
  /* Scales image to cover area */
  border-radius: 50%;
  /* Makes image circular */
}

.flag-button:hover,
.flag-button.active {
  /* Styles flag buttons on hover or when active */
  transform: scale(1.1);
  /* Scales up by 10% */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  /* Adds shadow */
}

.university-list {
  /* Styles university lists */
  display: none;
  /* Hides by default */
}

.university-list.active {
  /* Styles active university lists */
  display: block;
  /* Shows when active */
}

.marquee-container {
  /* Styles the marquee container */
  overflow: hidden;
  /* Hides overflow content */
  width: 100%;
  /* Full width */
  max-width: 850px;
  /* Matches section container */
  margin: 0 auto;
  /* Centers container */
  white-space: nowrap;
  /* Prevents wrapping */
}

.marquee-content {
  /* Styles the marquee content */
  display: inline-block;
  /* Allows horizontal scrolling */
  animation: marquee 20s linear infinite;
  /* Applies marquee animation */
  padding-left: 100%;
  /* Starts content off-screen */
}

.marquee-content ul {
  /* Styles university list */
  list-style: none;
  /* Removes bullet points */
  padding: 0;
  /* Removes padding */
  margin: 0;
  /* Removes margin */
  display: flex;
  /* Uses flexbox for horizontal layout */
  gap: 30px;
  /* Adds spacing between items */
}

.marquee-content li {
  /* Styles university list items */
  font-size: 1.1rem;
  /* Sets font size */
  color: #333;
  /* Sets dark gray color */
}

.marquee-content a {
  /* Styles university links */
  color: #007BFF;
  /* Sets blue color */
  text-decoration: none;
  /* Removes underline */
  font-weight: 600;
  /* Sets bold font */
}

.marquee-content a:hover {
  /* Styles university links on hover */
  color: #ff7f50;
  /* Changes to coral color */
  text-decoration: underline;
  /* Adds underline */
}

@keyframes marquee {

  /* Defines marquee animation */
  0% {
    transform: translateX(0);
  }

  /* Starts at initial position */
  100% {
    transform: translateX(-100%);
  }

  /* Moves left by full width */
}

@media (min-width: 768px) {

  /* Media query for screens 768px and wider */
  .marquee-content ul {
    /* Styles university lists */
    gap: 40px;
    /* Increases gap for larger screens */
  }
}

@media (max-width: 600px) {

  /* Media query for screens 600px and narrower */
  .address-social {
    /* Styles address-social section */
    flex-direction: column;
    /* Stacks items vertically */
    text-align: center;
    /* Centers text */
    gap: 15px;
    /* Adds spacing between items */
  }

  .social-icons a {
    /* Styles social media links */
    margin-left: 10px;
    /* Reduces left margin */
    margin-right: 10px;
    /* Adds right margin */
    font-size: 1.8rem;
    /* Increases icon size */
  }

  .marquee-content li {
    /* Styles university list items */
    font-size: 1rem;
    /* Slightly smaller font size */
  }
}

@keyframes fadeInUp {

  /* Defines fade-in-up animation */
  0% {
    /* Starting state */
    opacity: 0;
    /* Invisible */
    transform: translateY(30px);
    /* Shifted down */
  }

  100% {
    /* Ending state */
    opacity: 1;
    /* Fully visible */
    transform: translateY(0);
    /* Original position */
  }
}

@keyframes fadeIn {

  /* Defines fade-in animation */
  from {
    /* Starting state */
    opacity: 0;
    /* Invisible */
  }

  to {
    /* Ending state */
    opacity: 1;
    /* Fully visible */
  }
}

/* Apply form */
table {
  width: 90%;
  max-width: 500px;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th,
td {
  padding: 12px 15px;
  text-align: left;
}

th {
  color: #fff;
  font-weight: 600;
  width: 35%;
}

td {
  width: 65%;
}

td input,
td select,
td textarea {
  width: 100%;
  padding: 12px 15px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  box-sizing: border-box;
}

td input[type="number"][name$="_year"],
td input[type="number"][name$="_result"] {
  width: 100%;
  min-width: 120px;
  padding: 22px 22px;
  height: 60px;
  font-size: 1rem;
  border-radius: 12px;
  border: 1px solid #ccc;
}

td textarea {
  resize: vertical;
  min-height: 80px;
}

input[type="submit"] {
  background: #1100ff;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  padding: 12px 30px;
  border-radius: 25px;
  border: none;
  font-size: 1rem;
  margin-top: 15px;
}

input[type="submit"]:hover {
  background: #0073f6;
  color: #ffffff;
}

.hidden {
  display: none;
}

footer {
  text-align: center;
  padding: 20px 15px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  color: #ccc;
  margin-top: 60px;
}

.floating-buttons {
  position: fixed;
  bottom: 25px;
  left: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 9999;
  animation: fadeIn 1s ease;
}

.floating-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25D366;
  color: white;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  font-size: 24px;
}

.floating-buttons a.phone {
  background-color: #007BFF;
}

.floating-buttons a:nth-child(3) {
  background-color: #f44336;
}

.floating-buttons a:hover {
  transform: scale(1.1);
}

.address-social {
  max-width: 1000px;
  margin: 40px auto 20px;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}

.address p {
  margin: 0;
  line-height: 1.4;
}

.social-icons a {
  color: #fff;
  margin-left: 20px;
  font-size: 1.5rem;
  transition: color 0.3s ease;
  text-decoration: none;
}

.social-icons a:hover {
  color: #8540da;
}

@media (max-width: 600px) {
  .address-social {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .social-icons a {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 1.8rem;
  }

  .hero h2.typing-animation {
    font-size: 2rem;
    /* Smaller font for mobile */
    animation: typing 4s steps(32, end) forwards, blink-cursor 0.75s step-end infinite, pulse 0.5s ease-in-out 4s 1;
  }
}

#preferred_country {
  padding-left: 40px;
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 10px center;
  display: flex;
  align-items: center;
}

#preferred_country option {
  padding: 8px 10px;
  color: #333;
}

@keyframes typing {
  0% {
    width: 0;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    width: 32ch;
    /* Matches 32 characters */
    opacity: 1;
  }
}

@keyframes blink-cursor {

  0%,
  100% {
    border-color: transparent;
  }

  50% {
    border-color: #ffdd59;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.required {
  color: red;
}