@font-face {
     font-family: Jost-regular;
     src: url(../fonts/Jost-VariableFont_wght.ttf) format('truetype');
     font-weight: 400;
     font-style: normal
 }

 :root {
     --primary-color: #2d318c;
     --secondary_color: #cd100a;
     --black: #000000;
     --white: #ffffff;
     --secounday-color: #ededed
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 .search_form_box {
     background: #fff;
     padding: 20px;
     height: 100%
 }

 .search_form_box i.icf {
     position: absolute;
     left: 5px;
     top: 15px;
     color: gray;
     font-size: 20px
 }

 .input-border .form-control,
 .t-select {
     border-radius: 5px !important;

     padding: 15px 20px 11px;
     width: 100%;
     outline: 0;
     border: solid 1px #95989a;
     border-radius: 0;
     color: #2c3235;
     height: 46px;
     letter-spacing: .2px;
     font-weight: 400;
     resize: none;
     transition: all .2s ease;
     font-weight: 400;
     font-size: 15px !important;
     line-height: 18px;
     padding-left: 45px
 }

 .cursor-pointer {
     cursor: pointer
 }

 .input-border .form-label {
     font-size: 13px;
     display: inline-flex;
     color: var(--primary-color);
     position: absolute;
     padding: 0 4px;
     left: 14px;
     top: -10px;
     background-color: var(--white);
     margin: 0;
     z-index: 1;
     text-transform: uppercase;
     letter-spacing: .8px
 }

 .search_btn {
     position: relative;
     padding: 15px 20px 11px;
     width: 100%;
     border: none;
     
     color: var(--white) !important;
     letter-spacing: .2px;
     transition: all .2s ease;
     background: var(--primary-color)
 }

 .search_btn:hover {
     background: var(--secondary_color);
     padding: 5px;
     color: #fff;
     
 }

 .oneway_btn {
     font-weight: 500;
     height: 50px;
     white-space: nowrap
 }

 .btn-outline-secondary:hover {
     background-color: var(--secondary_color)
 }

 .btn-outline-secondary {
     border-radius: 5px !important
 }

 .white-box {
     background: #fff;
     border-radius: 6px
 }

 .white-shadow {
     border: 1px solid #eaeff5;
     box-shadow: 0 0 10px 1px rgba(71, 85, 95, .08);
     -webkit-box-shadow: 0 0 10px 1px rgba(71, 85, 95, .08);
     -moz-box-shadow: 0 0 10px 1px rgba(71, 85, 95, .08)
 }

 .btn.counter-btn:focus,
 .btn.counter-btn:hover {
     background: var(--primary-color);
     color: #fff;
     width: 35px;
     height: 35px;
     border-radius: 50px;
     padding: 3px
 }

 .btn.counter-btn {
     background: var(--primary-color);
     color: #fff;
     width: 35px;
     height: 35px;
     border-radius: 50px;
     padding: 3px
 }

 #divoptions_travellers {
     display: none
 }

 input[name="quant[1]"],
 input[name="quant[2]"],
 input[name="quant[3]"] {
     margin-top: 8px
 }

 .box-abs {
     position: absolute;
     background-color: var(--white);
     padding: 10px;
     overflow: auto;
     height: 250px;
     z-index: 4;
     max-width: 250px
 }

 .option-form .input-group {
     width: 50%
 }

 .option-form #txtadult,
 .option-form #txtchild,
 .option-form #txtinfant {
     width: 30%
 }

 @keyframes l17 {
     100% {
         background-size: 120% 100%
     }
 }

 .search-box input {
     height: 100%;
     width: 100%;
     border: none;
     outline: 0;
     border-radius: 6px;
     background-color: #fff;
     padding: 0 15px 0 45px
 }

 .input-group {
     margin-bottom: 15px
 }

 .input-group label {
     display: block;
     text-align: left;
     margin-bottom: 5px;
     font-size: .9rem
 }

 .input-group input,
 .input-group select {
     width: 100%;
     border-radius: 4px;
     border: 1px solid #ccc
 }

 .search-button {
     background: #0c6;
     border: none;
     color: #fff;
     padding: 10px 20px;
     cursor: pointer;
     border-radius: 4px;
     font-size: 1rem
 }

 .search_form_box {
     max-width: 600px
 }

 .content {
     display: flex;
     flex-direction: column;
     background: rgba(0, 0, 0, .8);
     border-radius: 10px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
     overflow: hidden;
     max-width: 1200px;
     width: 100%
 }

 @media (min-width:768px) {
     .content {
         flex-direction: row
     }
 }



 .route {
     position: relative;
     height: 100px;
     margin-top: 10px;
 }

 .line {
     position: absolute;
     top: 50px;
     left: 40px;
     right: 40px;
     height: 2px;
     border-top: 2px dashed #0a3e59;
     z-index: 1;
 }

 .dot {
     position: absolute;
     top: 46px;
     width: 12px;
     height: 12px;
     background-color: #0a3e59;
     border-radius: 50%;
     z-index: 2;
     font-size: 16px;
     font-weight: bold;
     color: #0a3e59;
 }

 .dot.from {
     left: 30px;
 }

 .dot.to {
     right: 30px;
 }

 .city {
     position: absolute;
     top: 15px;
     font-size: 16px;
     font-weight: 400;
     color: #212529;
     z-index: 3;
 }

 .city.from {
     left: 20px;
 }

 .city.to {
     right: 20px;
 }

 .plane-icon {
     position: absolute;
     top: 38px;
     left: 40px;
     font-size: 24px;
     color: #0a3e59;
     animation: flyPlane 4s ease-in-out infinite;
     z-index: 3;
 }

 @keyframes flyPlane {
     0% {
         left: 40px;
         transform: rotate(0deg);
     }

     50% {
         left: 50%;
         transform: rotate(10deg);
     }

     100% {
         left: calc(100% - 40px);
         transform: rotate(0deg);
     }
 }
 .fs-4{
    line-height: 2.5rem;
    margin-bottom: 15px;
 }
 .passenger-total, .date{
    font-size: 18px;
    font-weight: 600;
 }

  @media (max-width:568px) {
     .city {
         font-size: 13px;
     }
 }