.homeslideflx{width:100%;}
.slidecart{width: 100%; max-width: 100%;height:400px !important;}

.homeslideflx .slick-next, .slick-prev{    z-index: 9;}
.homeslideflx .slick-prev{left: 50px; position: absolute; top: 40%; background: transparent; border: none;}
.homeslideflx .slick-next{right: 50px; position: absolute; top: 40%; background: transparent; border: none;}
.homeslideflx .slick-prev:before, .slick-next:before{display:none;}
.homeslideflx .slick-next {
    right: 50px ;
}

.homeslideflx .slick-prev:hover, .homeslideflx .slick-next:hover{background:transparent !important;}

.searchboxfield{max-width: 80%; margin: auto; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; position: relative;background:#fff;}
.searchboxfield{padding:20px;padding-bottom:50px;}

.topitemsflx{position: relative; top: -45px;}
.topitemsflx .nav-tabs{justify-content:center;background: #fff; width: fit-content; margin: auto;border-radius: 30px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);padding: 4px 4px 5px;gap:5px;}
.topitemsflx .nav-tabs .nav-link{border:none;border-radius:30px;position: relative;z-index:9;background:transparent;padding:12px 20px;color: rgba(209, 209, 209, 1); font-weight: 500;}
.topitemsflx .nav-tabs .nav-link:hover{background:var(--dynamic-color);color:#fff;}
.topitemsflx .nav-tabs .nav-link:hover svg path{fill:#fff;}
.topitemsflx .nav-tabs .nav-link.active{color: #fff;background:var(--dynamic-color);}
.topitemsflx .nav-tabs .nav-link.active svg path{fill:#fff;}
.tabs {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border-radius: 80px;
  width: 600px;
  max-width: 100%;
  height: 45px;
  margin:auto;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);
}


/* Glider (moving background) */
.glider {
position: absolute; bottom: 5px; left: 0; width: 50%; height: 84%; background-color: var(--dynamic-color); transition: transform 0.3s ease; border-radius: 30px;
}




/* Responsive */
@media (max-width: 600px) {
  .tabs {
    width: 90%;
    height: 40px;
  }
  .tab {
    font-size: 14px;
  }
}

.excitemorebox h1{text-align: center; font-size: 30px;font-family:"myFirstFont";}
.excitemorebox h1:after{
content: ''; position: absolute; width: 100%; height: 2px; background: #ffc087; left: 0; bottom: 3px; z-index: -1; border-radius: 30px;
}
.offerlabernew{position: absolute; font-size: 11px; color: #fff; background: linear-gradient(45deg, rgba(206, 54, 135, 1), rgba(229, 0, 84, 1)); padding: 3px 8px; border-radius: 8px; top: -20px; right: 25px; margin-right: 0px; line-height: 17px;}
.offerlabernew::after{content: ''; position: absolute; top: 23px; left: 15px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--red-color);}
.trip-type-box {
  display: flex;
  align-items: center;
  background: #fff;
  width: fit-content;
  margin-top:-25px;
  gap:5px;
}
.trip-type-box label {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 500;
  color: #555;
  transition: all 0.2s ease;
  font-size: 14px;
}
.trip-type-box .form-check{padding: 5px 10px; display: flex ; align-items: center; gap: 7px; margin-top: 0px; border-radius: 20px;background: #cee5ff;}
.trip-type-box .form-check-input{margin-left: 0px; margin-top: 0px;}

 .flight-search {
    display: flex;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: 100%;
  }

  .search-section {
    flex: 1;
    padding:7px 21px 13px;
    border-right: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    display:flex !important;
  }

  .search-section:last-child {
    border-right: none;
  }

  .search-section .label {
    font-size: 13px;
    color: #6c757d;
   white-space: nowrap;
  }
  
  .category-dropdown  label{font-size:16px;}

  .search-input {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    border: none;
    outline: none;
    width: 100%;
  }
  .traveller-input:disabled,
.search-input:disabled,
.date-input:disabled {
  opacity: 0.2;
  cursor: not-allowed; /* optional but recommended */
}
  .search-input:focus{outline:none;}

  .sub {
        font-size: 13px;
    color: #6c757d;
    margin-top: 2px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11em;
  }

  .equal {
font-weight: 600; position: absolute; right: -13px; top: 33%; background: #fff; padding: 3px 6px; border-radius: 8px; font-size: 17px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; color:var(--dynamic-color);cursor: pointer;
  }

  .date-input {
    font-size: 18px;
    font-weight: 700;
    border: none;
    outline: none;
    width: 100%;
    color: #000;
  }

  .traveller-input {
    font-size: 18px;
    font-weight: 700;
    border: none;
    outline: none;
    color: #000;
  }

  .search-btn {
    background: #0071eb;
    color: white;
    border: none;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  }

  .search-btn:hover {
    background: #005ec2;
  }

  input::placeholder {
    color: #000;
    opacity: 0.7;
  }

  .picker__frame{width: 80% !important; bottom: 0px !important;    max-width: 570px;}
.picker__table td{font-size: 15px !important;}
.picker__weekday{font-size:15px !important;}
.picker__month{font-size:18px !important; }
.picker__box{border-radius:30px !important;}
.picker__button--close{font-size:16px !important;}
.picker__nav--next:before{    border-left: 0.75em solid var(--dynamic-color) !important;}
.picker__nav--prev:before{    border-right: 0.75em solid var(--dynamic-color) !important;}
.picker__year{font-size:16px !important;}
.picker__day{padding:9px 8px !important;border-radius:30px !important;margin:1px !important;}
.picker__button--close{background: var(--dynamic-color) !important; width: 100% !important; border-radius: 30px !important; margin-bottom: 10px !important; color: #ffff !important;}

.picker__button--close:before{color:#fff !important;}
.picker__day--selected{background:var(--dynamic-color) !important;border-color: var(--dynamic-color) !important;}
.picker__button--close:focus{border-color:var(--dynamic-color);}
.picker__day--today:before{    border-top: 0.5em solid var(--dynamic-color);}

.picker__day--infocus:hover{background:#ffefe0;}


.picker--focused .picker__day--highlighted{background:var(--dynamic-color) ;color:#fff; border-color:#ffefe0;}

.picker__nav--prev:hover, .picker__nav--next:hover{background: #ffefe0 !important;}


    .fare-section {
        display: flex;
        gap: 20px;
        margin-top:20px;
        align-items: center;
    }

    .fare-section label {
        font-weight: 600;
        font-size: 14px;
        color: #000;
    }

    .fare-options {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .fare-option {
        border: 1px solid #dcdcdc;
        border-radius: 6px;
        padding: 10px 16px;
        cursor: pointer;
        background: #fff;
        min-width: 150px;
        transition: all 0.2s ease;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.03);
    }

    .fare-option.active {
        border: 1.5px solid #0071eb;
        background-color: #f0f6ff;
    }

    .fare-title {
        font-weight: 600;
      font-size: 13px;
        color: #0071eb;
    }

    .fare-option.active .fare-title {
        color: #0071eb;
    }

    .fare-subtitle {
        font-size: 12px;
        color: #555;
        margin-top: 2px;
    }

    .fare-option:hover {
        border-color: #0071eb;
    }
    .fare-option input[type="radio"]{display: none;}

    .searchboxbutton{
      position: absolute; right: 170px; bottom: 26px;
      &.hotel{
        bottom: -25px;
      }
    }
    .searchboxbutton button{background: var(--dynamic-color); border: none; padding: 10px 30px; border-radius: 30px; color: #fff; text-transform: uppercase; font-size: 22px; font-weight: 600;}

      .travellers-dropdown {
        display: inline-block;
    }

    .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        cursor: pointer;
        font-size: 14px;
    }

    .dropdown-toggle span {
        font-weight: 600;
        font-size:22px;
    }

    @keyframes fadeIn {
        from {opacity: 0; transform: translateY(-10px);}
        to {opacity: 1; transform: translateY(0);}
    }

    .menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 10px;
    }

    .close-btn {
        background: none;
        border: none;
        font-size: 18px;
        cursor: pointer;
        color: #555;
    }

    .traveller-group {
        margin-bottom: 18px;
    }

    .traveller-group label {
        display: block;
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 8px;
    }

    .numbers {
        display: flex;
        gap: 10px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 8px 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .number {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        font-size: 14px;
        transition: 0.2s;
    }

    .number.active {
        background: #ffefe0;
        color: var(--dynamic-color);
        font-weight: 600;
    }

    .traveller-group small {
        font-size: 12px;
        color: #555;
    }


    .dropdown-toggle::after{display:none;}

  /* Dropdown suggestion box */
  .dropdown-box {
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border: 1px solid #e6e6e6;
    z-index: 10;
  }
  .flightsearchbox{position: absolute; background: #ffff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; top: 100px; z-index: 99;width:100%;left:0;}
  .toflightsearchbox{position: absolute; background: #ffff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; top:100px; z-index: 99;width:100%;left:0;}

  .category-dropdown  .dropdown-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 17px;
  }

  .category-dropdown  .dropdown-header i {
    margin-right: 6px;
    font-size: 14px;
    opacity: 0.8;
  }

  .dropdown-content {
    max-height: 220px;
    overflow-y: auto;
  }

  .dropdown-item, .formdropdown-item {
    padding: 10px 14px;
    cursor: pointer;
    transition: 0.2s;
  }

  .dropdown-item:hover, .formdropdown-item:hover {
    background: #f2f7ff;
  }

  .city-name {
    font-weight: 600;
    color: #111;
    font-size: 15px;
  }

  .airport {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16em;
  }
  .excitemorebox h1{text-align: center; font-size: 30px;font-family:"myFirstFont";}

  .offersearchbox{max-width: 80%;margin: auto;margin-top: -8px;}
  .innerofferhomesearch{background: rgba(255, 241, 204, 1); width: fit-content; padding: 10px; border-radius: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; margin-left: 2px; padding-top: 18px;font-size: 14px; font-weight: 500;}


.search-section {
  position: relative;
  display: inline-block;
}
.search-section .form-select{    padding: 10px 10px;}
 .form-select:focus{box-shadow:none;border-color:var(--dynamic-color);}
 

.star-category-btn {
  padding: 10px 16px;
  cursor: pointer;
}

.category-dropdown {
    position: absolute;
    top: 110px;
    right: 0;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 15px;
    display: none;
    z-index: 10;
}

.category-dropdown.active {
  display: block;
}
.homesearchmainbox{
  position: relative;margin-top: -18rem;
  &.hotel{
    margin-top: -9rem;
  }
}

.flightsearchbox .dropdown-header, .toflightsearchbox .dropdown-header{
    padding: 11px 10px 11px 20px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

.close-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}




@media (max-width: 991px) {

    .slidecart{height:300px !important;}
    .homeslideflx .slick-prev{left:10px !important;}
     .homeslideflx .slick-next{right:10px !important;}
}

@media (max-width: 480px) {
  .slidecart {
    height: 300px !important;
  }

  .searchboxfield {
    max-width: 95%;
    padding: 15px;
    top: -65px;
  }

  .topitemsflx .nav-tabs {
    flex-wrap: wrap;
    width: 100%;
    gap: 5px;
        padding: 10px 8px;
  }

  .topitemsflx .nav-tabs .nav-link {
    padding: 6px 12px;
    font-size: 13px;
    gap: 4px;
  }

  .topitemsflx .nav-tabs .nav-link svg {
    width: 14px;
    height: 14px;
  }

  .offerlabernew {
    top: -30px !important;
    right: 10px !important;
    font-size: 10px;
    padding: 2px 6px;
  }

  .glider {
    width: 48%;
    height: 78%;
  }

  .traveller-input,
  .search-input,
  .date-input {
    font-size: 16px;
  }

  .trip-type-box .form-check {
    padding: 5px 10px;
    border-radius: 15px;
  }

  .trip-type-box label {
    font-size: 13px;
  }

  .trip-type-box p {
    font-size: 13px;
  }

  .fare-section {
    gap: 12px;
    flex-direction: column;
    align-items: start;
  }

  .fare-options {
    gap: 8px;
  }

  .fare-option {
     width: fit-content;
    padding: 10px 12px;
  }

  .fare-title {
    font-size: 13px;
  }

  .fare-subtitle {
    font-size: 11px;
  }

  .searchboxbutton button {
    width: 100%;
    font-size: 16px;
    padding: 10px 20px;
  }

  .flight-search {
    border-radius: 10px;
    flex-direction: column;
  }

  .search-section {
    padding: 12px 15px;
    border-right:0px;
    max-width:100% !important;
  }

  .search-input {
    font-size: 15px;
  }


  .dropdown-menu {
    width: 100% !important;
    top: 170px;
    right: 0;
    left: 0;
  }

  .city-name {
    font-size: 14px;
  }

  .airport {
    font-size: 11px;
  }

  .offerlabernew {
    top: -4px;
    right: -4px;
    font-size: 8px;
    padding: 1px 4px;
  }
  .dropdown-toggle{align-items: start !important;}

  .homesearchmainbox {top:0px;}
  .trip-type-box{flex-direction: column; align-items: start !important;margin-bottom:10px;gap:10px;}
  .trip-type-box .w-50{width:100% !important;}
  
  .homeslideflx .slick-arrow img{width:20px;}

  .searchboxbutton{right: 38px; bottom: 45px;}

}
.list_items{display: flex;align-items:center ;gap: 10px;padding: 10px 6px;border-bottom: 1px solid #ddd;width: 100%;cursor: pointer;}
.city-name{font-size: 14px;font-weight: 600;}
.airport-name{font-size: 12px;line-height: 16px;font-weight: 400;}
.list_items:last-child{border-bottom: 0;}
.trave-new-box{position: absolute;top: 94px;right: 0;display: flex;flex-direction: column;background-color: white;border-radius: 4px;z-index: 99;padding: 12px 15px;width: 330px;}
.trav-head{font-size: 15px;}
.trav-box{display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px;}
.updNoBtn{width: 28px;height: 28px;border: 1px solid #ddd;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.trav-box label{font-size: 14px;font-weight: 400;}
.updNoBtn i{font-size: 11px;}
.inc-dec{display: flex;align-items: center;gap: 12px;}
.inc-dec input{inline-size: 24px;font-size: 15px;text-align: center;outline: 0;border: 0;}
.cabin-class{border-radius: 6px;border: 1px solid #ccc;padding:6px 7px;display: flex;flex-direction: column;align-items: start;}
.cabin-class select{width: 100%;outline: 0;border: 0;font-size: 14px;background: transparent;}
.travSubmitBtn{background-color: var(--dynamic-color);color: white;font-size: 14px;font-weight: 600;border-radius: 100px;padding: 6px 16px;border: none;cursor: pointer;}
.travCancBtn{background-color:#c71515;color: white;font-size: 14px;font-weight: 600;border-radius: 100px;padding: 5px 16px;border: none;cursor: pointer;}
.forinput{cursor: pointer;}
.swap-btn{position: absolute;top: -2px;right:-14px;background-color: white;border-radius: 50%;width: 27px;height: 27px;display: flex;align-items: center;justify-content: center;transform: translateY(50%);z-index: 99;}
.swap-btn i{font-size: 13px}
.trip{font-size: 13px;font-weight: 700; padding:8px 14px 8px 14px;cursor: pointer; border: 2px solid #2a828c33;border-radius: 12px;color: #000;}
.trip.active{border: 2px solid  var(--dynamic-color);color: var(--dynamic-color);}
.mailer span{font-size: 15px;}
.mailer i{color: var(--dynamic-color);}
.field svg g{fill: var(--dynamic-color);}
.list_items svg g{fill: var(--dynamic-color);}