section {
  position: relative;
}

.about-area {
  padding: 180px 0 100px;
  z-index: 4;
  background-color: white;
}
.stcky-menu .mobile-nav-toggle{

    color: #000;
}

#myCarousel {
  --f-carousel-slide-height: 60%;
  --f-carousel-spacing: 10px;
  /* min-height: 400px; */
}

#mCarousel {
  --f-carousel-slide-height: 60%;
  --f-carousel-spacing: 10px;
  height: 400px;
}

.f-carousel {
  --f-button-width: 38px;
  --f-button-height: 38px;

  --f-button-svg-width: 16px;
  --f-button-svg-height: 16px;
  --f-button-svg-stroke-width: 2.5;

  --f-button-color: rgb(71 85 105);
  --f-button-border-radius: 50%;
  --f-button-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%),
    0 3px 7px -3px rgb(0 0 0 / 30%);

  --f-button-bg: #ffffffad;
  --f-button-hover-bg: #f9f9f9;
  --f-button-active-bg: #f0f0f0;
}

.list-group-item {
  padding: 0.8rem 1rem;
}

.travel-info .accordion-header .accordion-button,
.travel-info .accordion-header .accordion-button h3 {
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}

.travel-info .accordion-body {
  padding: 1.5rem 1.25rem;
}

ul.simple {
  margin: inherit;
  padding: inherit;
}
ul.simple li {
  list-style: inherit;
  line-height: 1.7rem;
}

.center-cropped {
  object-fit: cover;
  object-position: center;
  min-height: 50px;
  min-width: 50px;
}

.form-check-input:checked {
  background-color: #e4520f;
  border-color: #e4520f;
}
.form-select.booking-select:focus {
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}

.booking-select {
  background: none;
  border: none;
  padding-left: 15px;
  font-size: 1.1rem;
}

.form-check-label {
  font-size: 16px;
  font-weight: 500;
}

.service-active .slick-track {
  margin-left: 0;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{
   background: #e4520f  !important;
    border-color: #e4520f  !important;
}

.flatpickr-calendar .flatpickr-day.inRange {
    border-radius: 0;
    -webkit-box-shadow: -5px 0 0 #fb7b40, 5px 0 0 #fb7b40 !important;
    box-shadow: -5px 0 0 #fb7b40, 5px 0 0 #fb7b40 !important;
    color: #f8f9fa;
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    cursor: pointer;
    outline: 0;
    background: #fb7b40 !important;
    border-color: #fb7b40 !important;
}

.flatpickr-months {
  padding: 5px 0;
}
/***   DAteranger override   ***/
.daterangepicker {
 
  font-family: inherit;
  font-size: 16px !important;
  line-height: 1em;
}

/* .daterangepicker .drp-calendar.right {
  display: none !important;
} */

.daterangepicker .calendar-table td {
  min-width: 36px;
  width: 40px;
  height: 40px;
  line-height: 29px;
  font-size: 14px;
  border: 2px solid transparent;
}

.daterangepicker .calendar-table th {
  min-width: 36px;
  width: 40px;
  height: 30px;
  line-height: 29px;
  font-size: 15px;
  border: 2px solid transparent;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 30px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #ff8c24;
  border-color: transparent;
  color: #fff;
}
.daterangepicker td.start-date.end-date {
  border-radius: 50px;
}

.daterangepicker td.start-date {
  border-radius: 25px 0 0 25px;
}
.daterangepicker td.end-date {
  border-radius: 0 25px 25px 0;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 300px;
}

.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 0px solid #ff8c24;
  width: auto;
  max-width: none;
  /* padding: 10px; */
  margin-top: 7px;
  font-size: 15px;
  line-height: 1em;
  box-shadow: 0px 1px 16px 0px rgba(139, 139, 139, 0.1);
}

.booking-form .form-grp input:not(.form-control) {
  width: 100%;
  background: transparent;
  border: none;
  font-size: 22px;
  font-weight: 500;

  font-family: "Barlow", sans-serif;
}

.booking-form a.passengers {
  padding: 0;
  height: auto;
  color: #2a2a2a;
  font-weight: 400;
  font-size: 18px;
}


.dropdown-menu.passengers {
  padding: 30px 30px;
  width: 300px;
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.dropdown-menu.passengers.show {  
  display: block; 
  opacity: 1;
  transform: translateY(5px)  ;
}

.dropdown-menu.passengers hr {
  border-bottom: 1px solid #2c2d2e;
  border-top: 0 none;
  margin: 20px 0;
  padding: 0;
}

.dropdown-menu .passengers:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.bootstrap-touchspin .form-control {
  border: 0px;
  font-size: 22px !important;
}
.bootstrap-touchspin .dropdown-menu {
  border-radius: 0.25rem;
  box-shadow: 0px 1px 16px 0px rgba(139, 139, 139, 0.39);
}
.bootstrap-touchspin.input-group > .input-group-prepend > .btn,
.bootstrap-touchspin.input-group > .input-group-prepend > .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.bootstrap-touchspin.input-group > .input-group-append > .btn,
.bootstrap-touchspin.input-group > .input-group-append > .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/*** MY Animations . Controls booking form fadein speed***/
.animate__animated.animate__fadeInUp {
  --animate-duration: 1.2s;
  --animate-delay: 0.5s;
}


/***Select2 Booking form***/
.booking-form .select2-container--default .select2-selection--single {
  background-color: transparent;
  border: none;
}

.booking-form
  .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: black;
  font-size: 18px;
}

.booking-form .select2-selection__arrow b {
  display: none !important;
}


.booking-wrap .tab-content{
  border-radius: 0px 20px 20px 20px;
  box-shadow: 0px 1px 16px 0px rgba(139, 139, 139, 0.16);
}

.select2-dropdown {
  background-color: white;
  box-shadow: 0px 1px 16px 0px rgba(77, 77, 77, 0.3);
  border: 0px solid #aaa !important;

}


.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #eee;
  color: white;
}

.select2-results__option {
  padding: 10px 13px;
}


.section-title {
  animation: fadeInUp 0.6s ease-in-out; /* referring directly to the animation's @keyframe declaration */
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

.select2-container .select2-selection--single {
  height: 39px;
}

.booking-form .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #181717;
  font-size: 27px;
  font-weight: 300;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
 
  line-height: 39px;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 39px;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
}

.select2-results__option p {
  line-height: 1.3;
}
.select2-drop li {
  white-space: pre-line;
}


label.promo {
  font-weight: 500;
  font-size: 20px;
  padding: 6px 20px;
  border:2px dashed #0d6efd;
  border-radius: 10px;
  background-color:rgba(13, 109, 253, 0.1);
}


.booking-des-area .tab-content-wrap {
  background: #fff;
  padding: 10px;
  border-radius: 0 0 20px 20px;
}

.booking-des-area {
  margin-top: 0px;
  position: relative;
}

.booking-des-area .booking-form ul li:nth-child(3) {
  width: 230px;
}

.booking-des-area .booking-form .form-grp input:not(.form-control) {  
  font-size: 19px;
}
.booking-des-area .booking-form .form-grp.date ul li {
  
  margin-right: 2px;
  padding-right: 0px;
}

.vector-image svg {
  position: absolute;
  bottom: 21vh;
  right: 0;
  width: 81%;
  z-index: 1;
  overflow: hidden;
  /* Initially hidden */
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}
.vector-image svg .dashed {
  stroke-dasharray: 22 22;
  stroke-dashoffset: 0;
  animation: dash 2s linear infinite;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
}

.content-block {
    position: inherit;
    z-index: 50;
  }
  

section.header-area {
  background: url("../img/trans-bk.jpg") ;
  background-size: cover;
  padding: 180px 0 240px 0;
  /* background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(175, 224, 255, 1) 70%,
    rgba(48, 174, 255, 0.20) 90%
  ); */
  /* background: linear-gradient(0deg, rgba(248, 248, 255, 0) 0%, #53c1ff 100%); */
}

/* Keyframes to animate the dash offset */
@keyframes dash {
  to {
    stroke-dashoffset: -88; /* Animate by moving the dash */
  }
}

.z-3 {
  z-index: 30;
}


@-webkit-keyframes animate-cloud-horizontal {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-100vw - 100%));
  }
}
@keyframes animate-cloud-horizontal {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-100vw - 100%));
  }
}

.animate-left-slow,
.cloud--sm {
  -webkit-animation: animate-cloud-horizontal 30s linear infinite;
  -moz-animation: animate-cloud-horizontal 30s linear infinite;
  -ms-animation: animate-cloud-horizontal 30s linear infinite;
  animation: animate-cloud-horizontal 30s linear infinite;
}
.animate-left-fast,
.cloud--lg {
  -webkit-animation: animate-cloud-horizontal 10s linear infinite;
  -moz-animation: animate-cloud-horizontal 10s linear infinite;
  -ms-animation: animate-cloud-horizontal 10s linear infinite;
  animation: animate-cloud-horizontal 10s linear infinite;
}
.animate-left-medium, .cloud--med {
    -webkit-animation: animate-cloud-horizontal 20s linear infinite;
    -moz-animation: animate-cloud-horizontal 20s linear infinite;
    -ms-animation: animate-cloud-horizontal 20s linear infinite;
    animation: animate-cloud-horizontal 20s linear infinite;
  }

.cloud {
  position: absolute;
  width: 180px;
  height: auto;
}
.cloud--med {
  width: 180px;
}
.cloud--lg {
  width: 260px;
}
.cloud--sm {
  width: 90px;
}
.cloud--1 {
  top: 55%;
  left: 90vw;
  animation-delay: -8s !important;
}
.cloud--2 {
  top: 70%;
  left: 90vw;
  animation-delay: -2s !important;
}
.cloud--3 {
  top: 25%;
  left: 81vw;
  animation-delay: -38s !important;
}
.cloud--4 {
  top: 50%;
  left: 81vw;
  animation-delay: -9s !important;
}
.cloud--5 {
  top: 10%;
  left: 100vw;
  animation-delay: -15s !important;
}


#luggage {
    stroke-dasharray:645 ;
    /* stroke-dashoffset: 645;  */
    opacity: 0;
    animation: fillSvg 3s linear 1s forwards;
    position: absolute;
    width: 250px;
    top: 125px;
    
}

@keyframes fillSvg {
  0% {
      opacity: 1;
      stroke-dashoffset: 645;
    }
    100% {
      opacity: 1;
      stroke-dashoffset: 0;
    }
}


#cessna {
  stroke-dasharray:1420 ;
  /* stroke-dashoffset: 645;  */
  opacity: 0;
  animation: fillPlane 3s linear 2s forwards /*,slideIn 3s ease-out 1s forwards*/;
  position: absolute;
  width: 50vw;
  right:0;
  top: 110px;  
}


@keyframes fillPlane {
  0% {
      opacity: 1;
      stroke-dashoffset: 1420;
    }
    100% {
      opacity: 1;
      stroke-dashoffset: 0;
    }
}

/* Animation to slide the plane in from the right */
@keyframes slideIn {
  0% {
    right: -100vw; /* Start the plane far to the right, off-screen */
  }
  100% {
    right: 0; /* End with the plane fully on-screen */
  }
}

@media (max-width: 767.98px) {

  #cessna {    
    width: 100vw;
    top: inherit !important;  
    bottom:-10px;
  }

}