/* Global box-sizing ayarÄ± */
*, *::before, *::after {
    box-sizing: border-box;
  }
  @media only screen and (max-width: 980px) {
    .dropdown-toggle{
          height: 100px;
      font-size: 30px;
    }
  }

  @media only screen and (max-width: 980px) {
    .dropdown-menu.show{
              width: 31%;
      font-size: 30px;
    }
  }
  @media screen and (max-width: 992px) {
    .butfont{
      font-size: 40px !important;
    }
  }
  
  @media screen and (max-width: 992px) {
    .save-button, .add-passenger, .input-container input{
      font-size: 40px !important;
    }
  }
  
  @media screen and (max-width: 992px) {
    i{
      font-size: 40px !important;
    }
  }
  
  @media screen and (max-width: 992px) {
    .input-container input {
      padding: 10px 80px !important;
    }
  }
  
  body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%; 
    overflow-x: hidden;
    font-family: Arial, sans-serif;
  }
  
  /* Header Styling */
  .header {
    width: 100%;
    height: 80vh; /* Tam ekran yÃ¼ksekliÄŸi */
    background-image: url('images/header-back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }
  
  .input-row {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* Ä°ki alan arasÄ±nda boÅŸluk bÄ±rakÄ±r */
  }
  
  .input-container {
  flex: 1; /* EÅŸit geniÅŸlikte olmalarÄ± iÃ§in */
  }
  
  .input-container input, .input-container select {
  width: 100%; /* InputlarÄ±n kapsayÄ±cÄ±larÄ±nÄ± tamamen doldurmasÄ± iÃ§in */
  }
  
  
  /* Logo Styling (Ãœstte OrtalanmÄ±ÅŸ) */
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 35%;
    height: auto;
    padding: 1%;
  }
  @media screen and (max-width: 992px) {
    .logo {
      width: 40vh;
    }
    .header{
      height: 40vh;
    }
  }
  
  @media screen and (max-width: 992px) {
    .promokod {
      width: 75%;
      margin-bottom: 5%;
    }
  }
  
  @media screen and (max-width: 992px) {
    .promokodleft {
      margin-left: 13%;
    }
  }
  
  @media screen and (min-width: 992px) {
    .promokod {
      width: 100%;
      padding: 10px;
    }
  }
  
  
  .cta-button-container {
    width: 100%;
    text-align: center;
    margin-top: -15px;
  }
  
  .cta-button {
    background-color: #ed1b24;
    color: white;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 25px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.2rem;
    position: relative;
  }
  .save-button {
    background-color: #ed1b24;
    color: white;
    font-weight: bold;
    border-radius: 25px;
    border:#ed1b24;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    position: relative;
    padding:5px 10px;
  align-items: center;
  }
  .save-button:hover {
    background-color: #ed1b24;
    color: white;
    font-weight: bold;
    border-radius: 25px;
    border:#ed1b24;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    position: relative;
    padding:5px 10px;
  align-items: center;
  }
  
  
  .cta-button:hover {
    background-color: #c81b1f;
  }
  #passengerForms {
      display: flex;
      flex-wrap: wrap;
      justify-content: center; /* FormlarÄ± yatayda ortalar */
    }
    
    .passenger-form {
      flex: 1 1 100%; /* VarsayÄ±lan olarak tam geniÅŸlik */
      max-width: 100%;
      box-sizing: border-box;
      padding: 15px;
      margin: 10px;
    }
    
    @media (min-width: 768px) {
      .passenger-form {
        flex: 1 1 48%; /* Ä°ki formu yan yana koymak iÃ§in geniÅŸliÄŸi %48 yaptÄ±k */
        max-width: 48%; /* Maksimum geniÅŸlik %48 */
      }
    }
  
    @media (max-width: 986px) {
      .passenger-form {
        flex: 1 1 48%; /* Ä°ki formu yan yana koymak iÃ§in geniÅŸliÄŸi %48 yaptÄ±k */
        max-width: 100%; /* Maksimum geniÅŸlik %48 */
      }
    }
  
  
  .form-container {
    text-align: center;
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    position: relative;
    padding-top: 50px; /* Ãœst boÅŸluk */
    background-image: url('/mnt/data/body-back.png'); /* Form arka planÄ± */
    background-size: contain; /* GÃ¶rselin tamamÄ±nÄ± gÃ¶stermek iÃ§in */
    background-position: center;
    background-repeat: no-repeat; /* GÃ¶rselin tekrarlanmamasÄ±nÄ± saÄŸlar */
    height: auto; /* YÃ¼ksekliÄŸi ayarlamak iÃ§in */
  }
  
  /* Passenger forms arranged in grid */
  .form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
  
  /* 1st Passenger Form */
  .passenger-form#first-passenger {
    grid-column: 1 / 2;
  }
  
  .gender{
      font-size:20px;
      color:#212529;
      font-weight: 700;
  }
  
  /* 2nd Passenger Form */
  .passenger-form#second-passenger {
    grid-column: 2 / 3;
  }
  
  /* 3rd Passenger Form */
  .passenger-form#third-passenger {
    grid-column: 1 / 2;
  }
  
  .passenger-form {
    padding: 20px;
    border-radius: 5px;
    background-color: white;
    position: relative;
    margin-bottom: 20px; /* Alt boÅŸluk */
  }
  
  .blur-content {
    filter: blur(5px);
    opacity: 0.6;
    pointer-events: none;
  }
  
  .add-passenger {
    color: red;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%; /* Dikey ortalama */
    left: 50%; /* Yatay ortalama */
    transform: translate(-50%, -50%); /* Tam ortalama */
    width: auto; /* Ä°Ã§eriÄŸe gÃ¶re geniÅŸlik */
    z-index: 1;
  }
  
  .hidden {
    display: none;
  }
  
  h2, h4 {
    color: #333;
    text-align: left;
  }
  
  /* Custom input field styling */
  .input-container {
    position: relative;
    margin-bottom: 15px;
  }
  
  .input-container input {
    width: 100%;
    padding: 10px 40px;
    border-radius: 50px;
    border: 1px solid #ccc;
    outline: none;
    font-size: 16px;
    font-weight: bold;
  }
  
  .input-container input:hover {
    border-color: #ff5e5e;
  }
  
  .input-container input:focus {
    border-color: #ff5e5e;
  }
  .input-group-text i {
    font-size: 1rem; /* Ä°kon boyutunu ayarlar */
  }
  
  @media (max-width: 576px) {
    .input-group-text i {
        font-size: 0.9rem; /* Mobilde ikon boyutunu kÃ¼Ã§Ã¼ltÃ¼r */
    }
  }
  
  
  .input-container i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #555;
  }
  
  @media screen and (max-width: 992px) {
    .input-container i {
      left: 25px !important;
    }
  }
  
  .input-container .error {
    border-color: #ff5e5e;
  }
  
  /* Footer Styling */
  .footer {
    background-color: #2aabe4;
    padding: 50px 0;
    color: white;
    text-align: center;
  }
  
  .footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap; /* KÃ¼Ã§Ã¼k ekranlarda sarÄ±lmayÄ± saÄŸlar */
  }
  
  .footer-logo img {
    width: 150px;
    margin: 10px 20px;
  }
  
  .footer-links {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap; /* KÃ¼Ã§Ã¼k ekranlarda sarÄ±lmayÄ± saÄŸlar */
    margin-bottom: 30px;
  }
  
  .footer-links div {
    text-align: left;
    min-width: 150px;
  }
  
  .footer-links h5 {
    margin-bottom: 15px;
    font-weight: bold;
    color: #b0e0f5;
  }
  
  .footer-links a {
    display: block;
    color: white;
    text-decoration: none;
    margin-bottom: 5px;
  }
  
  .footer-links a:hover {
    text-decoration: underline;
  }
  
  .footer-logo-divider {
    border-left: 1px solid white;
    height: 50px;
    margin: 0 20px;
  }
  
  .footer-bottom {
    font-size: 14px;
    color: #b0e0f5;
  }
  
  /* Journey Detail Section */
  .journey-detail-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 50px;
  }
  
  .journey-input-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 80%;
    margin: 0 auto;
    flex-wrap: wrap; /* KÃ¼Ã§Ã¼k ekranlarda sarÄ±lmayÄ± saÄŸlar */
  }
  
  .journey-input {
    width: 48%;
    position: relative;
  }
  
  .journey-input input {
    width: 100%;
    padding: 15px 40px;
    border-radius: 50px;
    border: 1px solid #ccc;
    outline: none;
    font-size: 16px;
    font-weight: bold;
  }
  
  .journey-input input:hover {
    border-color: #ff5e5e;
  }
  
  .journey-input input:focus {
    border-color: #ff5e5e;
  }
  
  .journey-input i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #555;
  }
  
  #second-journey-input {
    border-color: #ff5e5e;
  }
  
  #second-journey-input::placeholder {
    color: transparent;
  }
  
  #second-journey-input:hover::placeholder {
    color: #000;
  }
  
  /* Responsive DÃ¼zenlemeler */
  @media (max-width: 768px) {
    .form-container {
      grid-template-columns: 1fr;
    }
  
    .passenger-form#third-passenger {
      grid-column: 1 / 2;
    }
  
    .journey-input {
      width: 100%;
    }
  }
  
  .journey-input-container {
      display: flex;
      justify-content: space-between;
      max-width: 700px;
      margin: 50px auto;
      gap: 20px;
    }
  
    .journey-input {
      width: 48%;
      position: relative;
    }
  
    .journey-input select {
      width: 100%;
      padding: 15px;
      border-radius: 50px;
      border: 1px solid #ccc;
      font-size: 16px;
      outline: none;
      appearance: none;
    }
  
    .journey-input i {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #555;
    }