.navbar-custom {
  background: linear-gradient(90deg, var(--bs-danger), var(--bs-border-color));
  transition: background 0.5s ease;
}

.navbar-custom .nav-link,
.navbar-custom .navbar-brand {
  color: white !important;
}

.navbar-custom .nav-link:hover {
  color: #ffd700 !important;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* CTA Button */
.btn-call {
  background-color: #f1aeb5;
  color: #003366;
  font-weight: bold;
  border-radius: 50px;
  padding: 6px 20px;
  transition: background 0.3s ease;
}

.btn-call:hover {
  background-color: #ffc107;
  color: #002244;
}
/* Hero */
.hero {
  /* background: linear-gradient(to right, #1a1f36, #dc3545); */
  background: linear-gradient(
    to right,
    #6f42c1,
    var(--bs-danger-text-emphasis)
  );
  color: white;
  padding: 120px 20px 100px;
  text-align: center;
}

.hero h1 {
  font-size: 109px;
}

.cta-btn {
  background-color: #fff;
  color: #1a1f36;
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: 600;
  margin-top: 20px;
}

.card {
  border: none;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.03);
}
/* Tagline badge */
.tagline {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to right, #ef4444, #8b5cf6);
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  margin: 2rem 0;
  font-size: 1rem;
  transition: background 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tagline:hover {
  background: linear-gradient(to right, #2563eb, #ef4444);
}

.icon {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
}
/*Features Grid*/
.grid-features:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(217, 119, 6, 0.3);
}
/* Flash Deals Section */
.exclusive-flash-deals {
  background: linear-gradient(to right, #dc3545, var(--bs-purple));
  /* Dark background */
  color: #fff;
}

.flash-deals {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  font-weight: 600;
  background: linear-gradient(to right, #3b82f6, #9333ea);
  /* blue to purple */
  padding: 0.75rem 2rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  margin-bottom: 2rem;
}

/* Flight Grid Layout */
.flight-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding: 0 1rem;
}

/* Flight Cards */
.flight-card {
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.flight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.15);
}

/* Price Tag */
.price {
  font-size: 1.75rem;
  font-weight: bold;
  color: #111;
}

/* Discount Badge */
.discount-badge {
  background-color: #dc2626;
  color: #fff;
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  border-radius: 0.5rem;
  font-weight: 600;
  align-self: flex-start;
}

/* CTA Button */
.cta {
  background: linear-gradient(to right, #0e4d92, #00bfa6);
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 0.6rem 1.2rem;
  margin-top: 0.75rem;
  border-radius: 9999px;
  transition: background 0.3s ease-in-out;
  cursor: pointer;
}

.cta:hover {
  background: linear-gradient(to right, #0a3a72, #009c8b);
}

/* Theme Variants (you can assign these to each card for color variety) */
.blue-purple {
  border-left: 6px solid #6366f1;
}

.green-teal {
  border-left: 6px solid #10b981;
}

.purple-pink {
  border-left: 6px solid #d946ef;
}

.yellow-red {
  border-left: 6px solid #f59e0b;
}
/*Ready to travel*/
@keyframes bluePurpleBackground {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.ready-to-travel {
  background: linear-gradient(
    270deg,
    #312e81,
    #4f46e5,
    #c562af,
    #312e81,
    #7e22ce,
    #be185d
  );
  background-size: 800% 800%;
  animation: bluePurpleBackground 15s ease infinite;
  padding: 60px 20px;
}
/* Contact Us*/

.contact-info {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.contact-info-icon {
  margin-bottom: 15px;
}

.contact-info-item {
  background: #071c34;
  padding: 30px 0px;
}

.contact-page-sec .contact-page-form h2 {
  color: #071c34;
  text-transform: capitalize;
  font-size: 22px;
  font-weight: 700;
}

.contact-page-form .col-md-6.col-sm-6.col-xs-12 {
  padding-left: 0;
}

.contact-page-form.contact-form input {
  margin-bottom: 5px;
}

.contact-page-form.contact-form textarea {
  height: 110px;
}

.contact-page-form.contact-form input[type="submit"] {
  background: #144383;
  width: 150px;
  border-color: #144383;
}

.contact-info-icon i {
  font-size: 48px;
  color: #fda40b;
}

.contact-info-text p {
  margin-bottom: 0px;
}

.contact-info-text h2 {
  color: #fff;
  font-size: 22px;
  text-transform: capitalize;
  font-weight: 600;
  margin-bottom: 10px;
}

.contact-info-text span {
  color: #999999;
  font-size: 16px;
  /* font-weight: ; */
  display: inline-block;
  width: 100%;
}

.contact-page-form input {
  border: 1px solid #fff;
  margin-bottom: 20px;
  padding: 12px 16px;
  width: 100%;
  border-radius: 4px;
  border-bottom: 3px solid #cbcbcb;
}

.contact-page-form .message-input {
  display: inline-block;
  width: 100%;
  padding-left: 0;
}

.single-input-field textarea {
  border: 1px solid #fff;
  margin-bottom: 20px;
  padding: 12px 16px;
  width: 100%;
  border-radius: 4px;
  border-bottom: 3px solid #cbcbcb;
  height: 120px;
}

.single-input-fieldsbtn input[type="submit"] {
  background-color: #144084;
  color: #fff;
  display: inline-block;
  font-weight: 600;
  /* padding: 10px 0; */
  text-transform: capitalize;
  width: 150px;
  margin-top: 20px;
  font-size: 16px;
  padding: 20px 10px;
}

.single-input-fieldsbtn input[type="submit"]:hover {
  background: #071c34;
  transition: all 0.4s ease-in-out 0s;
  border-color: #071c34;
}

.single-input-field h4 {
  color: #464646;
  text-transform: capitalize;
  font-size: 14px;
}

.contact-page-form {
  display: inline-block;
  width: 100%;
  margin-top: 85px;
}

.contact-page-map {
  margin-top: 36px;
}

.contact-page-form form {
  padding: 20px 15px 0;
}

.map-section {
  position: relative;
  top: 69px;
}

.iframe {
  border-radius: 10px;
}

@media (min-width: 1200px) {
  .iframe {
    width: 1140px;
  }
}

@media (max-width: 768px) {
  .iframe {
    width: 370px;
  }
}

.social-location {
  position: relative;
  background-color: #fff;
  top: -70px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 10px;
}

.contact-form {
  position: relative;
  top: -7px;
}

.map-responsive {
  position: relative;
  overflow: hidden;
  padding-bottom: 20%;
  /* Aspect ratio 16:9 */
  height: 0;
}

.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact-form input {
  border: 1px solid #fff;
  margin-bottom: 20px;
  padding: 12px 16px;
  width: 100%;
  border-radius: 4px;
  border-bottom: 3px solid #cbcbcb;
}

.send-btn {
  background: linear-gradient(90deg, var(--bs-danger), var(--bs-border-color));
  color: #fff;
  display: inline-block;
  font-weight: 600;
  /* padding: 10px 0; */
  text-transform: capitalize;
  width: 150px;
  margin-top: 20px;
  font-size: 16px;
  padding: 20px 10px;
}
/*Footer*/
.web-footer {
  background: #072142;
}

.footer-link {
  color: #ffffffcc;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-link:hover {
  color: #00bfff;
  text-decoration: underline;
}

.web-footer ul li {
  transition: transform 0.2s ease;
}

.web-footer ul li:hover {
  transform: scale(1.05);
}
