/* General Styles */

html, body {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  justify-content: flex-start; /* Align to the top */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.content {
  flex: 1;
  max-width: 100%; /* Ensure content doesn't exceed the viewport width */
  overflow-x: hidden;
}

.logo {
  overflow: visible; /* Ensure nothing is clipped */
  width: auto; /* Allow the logo to use its intrinsic width */
  max-width: 100%; /* Ensure it doesn't exceed the container width */
  height: auto; /* Maintain aspect ratio */
  margin: 0 auto 20px; /* Center horizontally and add bottom margin */
  display: block; /* Ensure block display for centering */
  text-align: center; /* Center inline content (if any) */
  font-size: 1.1rem;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: #555555;
  transition: all 0.3s ease; /* Smooth transition for resizing */
}

a.logo-link {
  text-decoration: none;
}

body {
  font-family: Arial, sans-serif;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  color: #333;
}

h1 {
  letter-spacing: -1px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: bold;
  font-size: 3.75rem;
  max-width: 1000px;
  line-height: 1.2;
  margin-top: 5rem;
  margin-bottom: 5rem;
  text-align: center;
  color: #0074B7;
  padding: 5px 10px 5px 10px; /* Padding around the text */
}

h2 {
  max-width: 790px;
  font-size: 2rem;
  word-wrap: break-word; /* Ensure text wraps */
  text-align: center; /* Center the text */
  margin: 0 auto; /* Center the element horizontally */
  margin-top: 3rem;
  margin-bottom: 3rem;
  color: #444744;
  border-radius: 15px; /* Rounded corners */
  padding: 5px 10px 5px 10px; /* Padding around the text */
  display: block; /* Change to block for better centering */
  transition: background-color 0.3s ease;
}

h3 {
  color: #393d39;
  max-width: 650px;
  word-wrap: break-word; /* Ensure text wraps */
  text-align: center; /* Center the text */
  margin: 0 auto 20px; /* Center the element and add margin */
  margin-bottom: 3rem;
}

.select {
  font-size: 2.5rem;
  color: #0074B7;
  margin-bottom: 5px;
}

.alphabet {
  margin-bottom: 5px;
  text-align: center;
  word-wrap: break-word; /* Ensure text wraps */
}

.alphabet a {
  margin: 10px 5px;
  word-wrap: break-word; /* Ensure text wraps */
  max-width: 650px;
  text-decoration: none;
  font-weight: bold;
  color: #F8AD01;
  font-size: 1.5rem;
  cursor: pointer; /* Make it look clickable */
}

.alphabet a:hover {
  text-decoration: underline;
  color: #0074B7;
}

#airline-list {
  list-style-type: none;
  padding: 0;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

#airline-list li {
  margin: 1px 0;
  padding: 0; /* Remove padding from the list item */
  background-color: #E6F1FA;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#airline-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#airline-list li a {
  display: block; /* Make the anchor tag a block element */
  padding: 10px; /* Add padding to the anchor tag instead */
  text-decoration: none;
  color: #2c3e50;
  font-size: 1.1rem;
}

#airline-list li a:hover {
  color: #0074B7;
  background-color: #D6E7F5; /* Optional: Change background color on hover */
}

#text-container {
  font-size: 24px;
  color: black; /* Default color for the rest of the text */
  text-align: center;
  margin-top: 50px;
  font-family: Arial, sans-serif;
}

.green-text {
  color: green; /* Style for the word "ARE" */
}

.spaced20 {
  margin-bottom: 20px; /* Adjust the value as needed */
}

.spaced10 {
  margin-bottom: 10px; /* Adjust the value as needed */
}

/* Style for the footer */
.footer {
  width: 100%; /* Make the footer stretch the full width */
  bottom: 20px; /* Distance from the bottom */
  text-align: center;
  background-color: #ffffff; /* Button background color */
  color: rgb(226, 231, 228); /* Text color */
  padding: 10px 20px; /* Padding inside the button */
  border-radius: 5px; /* Rounded corners */
  text-decoration: none; /* Remove underline from link */
  font-family: Arial, sans-serif; /* Use a clean font */
  font-size: 1rem;
  cursor: pointer; /* Show pointer cursor on hover */
}

.footer-text-color {
  color: #5f6061;
}

.arrow-container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  width: 100%; /* Ensures it takes full width */
}

.arrow-icon {
  animation: bounce 3s infinite; /* Change duration to 3s for a slower bounce */
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

/* Logo Image */
.logo img {
  width: auto; /* Use the image's intrinsic width */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure the image doesn't exceed the container width */
  display: block; /* Remove extra space below the image */
  margin: 0 auto; /* Center the image */
}

.steps {

  text-align: center;
  font-size: 1.5rem;
  
}

.inline-icon {
  height: 1.5em; /* Match the text height */
  width: auto; /* Maintain aspect ratio */
  vertical-align: middle; /* Align with the middle of the text */

}

.highlight {
  background: url(https://s2.svgbox.net/pen-brushes.svg?ic=brush-5&color=ffd700);
  margin: -2px -4px;
  padding: 2px 4px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2rem;
  }

  .select {
    font-size: 1.5rem;
  }

  .alphabet a {
    font-size: 1rem;
    margin: 0 3px;
  }

  #airline-list li {
    padding: 8px;
  }

  #airline-list li a {
    font-size: 1rem;
  }

  /* Logo dimensions for screens up to 768px */
  .logo {

    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center horizontally */
    display: block; /* Ensure block display for centering */
    text-align: center; /* Center inline content (if any) */
  }
}

* {
  box-sizing: border-box; /* Prevent elements from exceeding their containers */
}

@media (max-width: 480px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .select {
    font-size: 1.5rem;
  }

  .alphabet a {
    font-size: 0.9rem;
    margin: 0 2px;
  }

  #airline-list li {
    padding: 6px;
  }

  #airline-list li a {
    font-size: 0.9rem;
  }

  /* Logo dimensions for screens up to 480px */
  .logo {
    max-width: 350px; /* Optional: Set a maximum width */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center horizontally */
    display: block; /* Ensure block display for centering */
    text-align: center; /* Center inline content (if any) */
  }
}

/* New Breakpoint for 358px and below */
@media (max-width: 358px) {
  h1 {
    font-size: 2rem; /* Smaller font size for very narrow screens */
    margin-top: 50px;
  }

  h2 {
    font-size: 1.2rem; /* Smaller font size for very narrow screens */
    padding: 3px 8px; /* Reduce padding */
  }

  .select {
    font-size: 1.2rem; /* Smaller font size for very narrow screens */
  }

  .alphabet a {
    font-size: 0.8rem; /* Smaller font size for very narrow screens */
    margin: 0 1px; /* Reduce margin */
  }

  #airline-list li {
    padding: 4px; /* Reduce padding */
  }

  #airline-list li a {
    font-size: 0.8rem; /* Smaller font size for very narrow screens */
  }

  .footer {
    font-size: 0.8rem; /* Smaller font size for very narrow screens */
    padding: 5px 10px; /* Reduce padding */
  }

  /* Logo dimensions for screens up to 358px */
  .logo {
    max-width: 250px; /* Optional: Set a maximum width */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center horizontally */
    display: block; /* Ensure block display for centering */
    text-align: center; /* Center inline content (if any) */
  }
}

@media (max-width: 386px) {
  .logo {
    max-width: 300px; /* Optional: Set a maximum width */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center horizontally */
    display: block; /* Ensure block display for centering */
    text-align: center; /* Center inline content (if any) */
  }
}