/* jq ui dialogue and datepicker*/

.ui-dialog {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0
}

.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative
}

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 20px;
    width: 20px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
    background-color: transparent;
    border: 0
}

.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: 0 0;
    overflow: auto
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin-top: .5em;
    padding: .3em 1em .5em .4em
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer
}

.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px
}

.ui-draggable .ui-dialog-titlebar {
    cursor: move
}

.ui-dialog-titlebar {
    border: none;
    background: 0 0
}

.ui-dialog-titlebar {
    border: none;
    background: 0 0
}

.mdlcls .ui-dialog-content {
    padding: .5em 1.4em;
    width: 100% !important
}

.down-mdlcls .ui-dialog-content {
    padding: .5em 1.4em;
    width: 100% !important
}


.pkdtl .ui-dialog-content {
    padding: 0 0px;
    width: 100% !important
}

.pkdtl.ui-dialog .ui-dialog-titlebar {
    display: none;
}

.pkdtl.ui-dialog .ui-dialog-title {
    display: none;
}

#cardDeclined,
#errdialog,
#timesUp,
#editDates,
#mobVerification,
#downloadApp {
    display: none
}

.hide-top {
    position: absolute;
    top: -9999px;
}

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ui-widget-overlay {
    opacity: .3;
    filter: Alpha(Opacity=30)
}

.ui-widget-overlay {
    background: 0 0;
    background-color: #000;
    opacity: .5
}

.ui-dialog .ui-widget-content {
    z-index: 1010 !important;
    border: 1px solid #aaa;
    color: #222;
    background-color: #fff;
    border-radius: 18px;
    border: 0;
    padding: 0;
}

.ui-dialog .ui-widget-content a {
    color: #222
}

.down-mdlcls .ui-dialog-content {
    padding: 20px;
    width: 100% !important;
    padding-bottom: 28px;
}

.downloadApp {
    overflow: hidden !important;
}

.downloadApp .closebtn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.close-btn {
    background: url('./assets/images/myreservation.png') no-repeat -80px -11px !important;
    background-size: 302px 187px !important;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 20px;
    display: block;
}

.success-logo {
    display: inline-block;
    background: url('./assets/images/myreservation.png') no-repeat -11px -43px;
    background-size: 302px 187px;
    width: 68px;
    height: 68px;
    margin-bottom: 12px;
}

.wylg {
    border-bottom: 1px solid #DCDCDC;
    padding: 20px 28px;
    margin: -20px;
    margin-bottom: 20px;
}

.wylg img {
    width: 78.622px;
    height: 29px;
    margin-bottom: 8px;
}

.wylg p {
    max-width: 250px;
    color: #535A53;
    font-size: 12px;
    margin-bottom: 0;
    color: #535A53;
    line-height: 16px;
}

.wylgg {
    border-bottom: 1px solid #DCDCDC;
    padding: 16px 0px 0px 0px;
    margin: -20px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
}

.wylgg img {
    width: 78.622px;
    height: 29px;
    margin-bottom: 8px;
}

.wylgg p {
    max-width: 250px;
    color: #535A53;
    font-size: 12px;
    margin-bottom: 0;
    line-height: 16px;
}


p.gtwa {
    color: #312E2E;
    text-align: center;
    font-family: Arial;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 20px;
}

p.sqda {
    text-align: center;
    font-family: Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    color: #E1471D;
    margin-bottom: 30px;
}

.qrbox {
    width: 183.774px;
    height: 183.774px;
    border-radius: 4px;
    border: 0.6px solid #312E2E;
    margin: 0 auto;
    display: block;
    margin-bottom: 30px;
}

.ayrlul {
    list-style-image: url('./assets/images/check.png');
    padding-inline-start: 30px;
}

.ayrlul li {
    color: var(--Text-Grey, #535A53);
    font-size: 20px;
    margin-bottom: 17px;
    padding-left: 15px;
}

.mt-15 {
    margin-top: 15px;
}

.p-8 {
    padding: 0 8px;
}

.d-flex {
    display: flex;
}

.bene {
    color: var(--Text-Grey, #535A53);
    font-family: Arial;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 12px;
}

.align-items-center {
    align-items: baseline;
}

.check-icon {
    background: url('./assets/images/myreservation.png') no-repeat -111px -12px;
    background-size: 302px 187px;
    width: 22px;
    min-width: 22px;
    height: 16px;
    display: block;
    margin-top: 4px;
}

.dwbtnmob {
    display: none;
}

.desktop-only {
    display: block;
}

.mobile-only,
.tablet-only,
.tablet-only-flex,
.mobile-only-flex {
    display: none;
}

.mobile-tablet-only,
.mobile-tablet-flex {
    display: none;
}

/*!jQuery UI Datepicker 1.9.0*/
.ui-datepicker {
    display: none;
    padding: 1em;
    width: 22em
}

.ui-datepicker .ui-datepicker-header {
    padding: .2em 0;
    position: relative;
    background: #ffffff;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    height: 1.8em;
    position: absolute;
    top: 2px;
    width: 1.8em
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 1px
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px
}

.ui-datepicker .ui-datepicker-next {
    right: 14px;
    top: 1px;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 2px;
    top: 2px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 14px
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: block;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    position: absolute;
    cursor: pointer;
    top: 50%;
    color: #bac2c7;
    font-size: 16px;
}

.ui-datepicker-month,
.ui-datepicker-year {
    font-weight: 700;
    color: #2c3135;
}

.ui-datepicker .ui-datepicker-title {
    line-height: 1.8em;
    margin: 0 2.3em;
    text-align: center
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0
}

.ui-datepicker select.ui-datepicker-month-year {
    width: 100%
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 49%
}

.ui-datepicker table {
    border-collapse: collapse;
    font-size: .9em;
    margin: 0 0 .4em;
    width: 100%
}

.ui-datepicker th {
    border: 0;
    font-weight: 700;
    padding: .7em .3em;
    text-align: center
}

.ui-datepicker th span {
    color: #7f8fa4;
    font-weight: 400;
    font-size: 11px;
}

.ui-datepicker td {
    padding: 2px
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
    text-align: center;
    color: #2c3135
}

.ui-datepicker td span,
.ui-datepicker td a:hover {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
    color: #fff;
    background: #E1471D;
    text-align: center
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    margin: .7em 0 0;
    padding: 0 .2em
}

.ui-datepicker .ui-datepicker-buttonpane button {
    cursor: pointer;
    float: right;
    margin: .5em .2em .4em;
    overflow: visible;
    padding: .2em .6em .3em;
    width: auto
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left
}

.ui-datepicker.ui-datepicker-multi {
    width: auto
}

.ui-datepicker-multi .ui-datepicker-group {
    float: left
}

.ui-datepicker-multi .ui-datepicker-group table {
    margin: 0 auto .4em;
    width: 95%
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
    border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left
}

.ui-datepicker-row-break {
    clear: both;
    font-size: 0;
    width: 100%
}

.ui-state-highlight {
    background: #d0cece;
    color: #000
}

.ui-state-active {
    background: #E1471D;
    color: #fff !important
}

.ui-datepicker-rtl {
    direction: rtl
}

.ui-datepicker-rtl .ui-datepicker-prev {
    left: auto;
    right: 2px
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    left: auto;
    right: 1px
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: right
}

.ui-datepicker-rtl .ui-datepicker-group {
    float: right
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
    border-left-width: 1px;
    border-right-width: 0
}

.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 1px;
    border-right-width: 0
}

.ui-state-disabled .ui-state-default {
    opacity: .3;
    background: #fff !important;
    color: #000
}

.ui-datepicker-cover {
    filter: mask();
    height: 200px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 200px;
    z-index: -1
}

.ui-datepicker {
    border-radius: 4px;
    box-shadow: 0 2px 41px 0 rgba(0, 0, 0, 0.09);
    background-color: #ffffff;
    border: solid 0.6px #dcdcdc;
}

.ui-timepicker-wrapper {
    overflow-y: auto;
    max-height: 150px;
    width: 6.5em;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    outline: none;
    z-index: 10052;
    margin: 0;
}

.ui-timepicker-wrapper.ui-timepicker-with-duration {
    width: 13em;
}

.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
    width: 11em;
}

.otherStats {
    font-size: 14px;
    text-align: left;
    padding: 5px;
}

.ui-timepicker-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #ffffff;
}

.ui-timepicker-duration {
    margin-left: 5px;
    color: #888;
}

.ui-timepicker-list:hover .ui-timepicker-duration {
    color: #888;
}

.ui-timepicker-list li {
    padding: 4px 0 3px 5px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    color: #2c3135;
    list-style: none;
    margin: 0;
    font-size: 14px;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
    background: #fff;
    color: #000;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
    background: #E1471D;
    color: #fff;
}

li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
    color: #ccc;
}

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    color: #888;
    cursor: default;
}

.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    background: #f2f2f2;
}

/* .ui-datepicker */

body {
    margin: 0;
    font-family: 'Arial';
}

input:focus {
    outline: none;
}

:before,
:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

.text-right {
    text-align: right;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.visible-xs {
    display: none;
}

button {
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}
/*default css ends*/



/* search pop */
.airportlist {
    position: absolute;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #DCDCDC;
    width: 100%;
    left: 0;
    top: 85px;
    max-height: 317px;
    overflow: auto;
    display: none;
    z-index: 1;
}

.airportlist.noborder {
    border: 0;
}

.airportlist li {
    cursor: pointer;
    border-bottom: 1px solid #DCDCDC;
    padding: 10px 0;
    padding: 22px 24px;
}

/* search pop */
.whtbar{
    display: flex;
    align-items: flex-end;
    gap: 12px;
    align-self: stretch;
    position: relative;
}
.whtbar label{
    color: var(--Text-Tertiary, #717683);
    /* Paragraph/P5/Medium */
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
    margin-bottom: 8px;
}
.inpbxselect{
    display: flex;
    flex-direction: column;
}
.inpbx{
    display: flex;
    flex-direction: column;
    width: 24%;
}
.schbtn{
    width: 18%;
    border-radius: var(--Button-Border-Radius-large, 8px);
    background: #E1471D;
    color: var(--Button-Text-On-Primary, #FFF);
    padding: var(--Spacing-Point-System-x-big, 16px) var(--Spacing-Point-System-xxx-big, 24px);
    /* Button/Large/SemiBold */
    font-family: var(--Font-Family-Heading, "Plus Jakarta Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 0%;
    border: none;
    height: 52px;
    /* 0 */
}
.inpbxselect input {
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
    width: 100%;
    padding: 0;
}
.icon-search{
    background: url('assets/images/airport-directory-sprite.png') no-repeat -4px -4px;
    background-size: 215px 50px;
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}
.search-box {
    border-radius: 8px;
    border: 1px solid var(--Stroke-Border-Base-2, #D3D5D9);
    background: #FFF;
    padding: 16px;
    width: 362px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-box input::placeholder{
    color: #818181;
}
.seoPatchValidation,
.seoDateValidation {
    display: none;
    color: red;
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
}
.inpcal{
    border: 1px solid var(--Stroke-Border-Base-2, #D3D5D9);
    border-radius: 8px 0 0 8px;
    height: 52px;
    padding: 15px 20px;
    color: var(--Input-Label-Default, #15172E);
    /* Paragraph/P5/Medium */
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    width: 60%;
    /* 21px */
    cursor: pointer;
}
.inpcal.oytime{
    border-radius: 0 8px 8px 0;
    border: 1px solid var(--Stroke-Border-Base-2, #D3D5D9);
    border-left: none;
    background: var(--Surface-Base, #FFF);
    width: 40%;
    text-transform: uppercase;
    cursor: pointer;
}
.calhold{
    display: flex;
}
header{
    max-width: 1176px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding: 32px 0;
}
/* header img{
    height: 50px;
} */
.header-btn{
    display: flex;
    gap: 24px;
    align-items: center;
    align-self: stretch;
    position: relative;
}
.header-btn a{
    display: block;
    color: var(--Button-Text-On-Secondary, #15172E);
    font-family: var(--Font-Family-Heading, "Plus Jakarta Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    /* 0 */
    text-transform: capitalize;
    text-decoration: none;
    border-radius: var(--Button-Border-Radius-medium, 6px);
    border: 1px solid var(--Button-Border-Outline-Default, #A0A6D4);
    min-width: 87px;
    min-height: 44px;
    padding: var(--Spacing-Point-System-md, 12px) var(--Spacing-Point-System-xx-big, 20px);
}
.header-btn button{
    color: var(--Button-Text-On-Secondary, #15172E);
    font-family: var(--Font-Family-Heading, "Plus Jakarta Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    text-decoration: none;
    border-radius: var(--Button-Border-Radius-medium, 6px);
    border: 1px solid #A0A6D4;
    background: #ffffff;
    min-width: 135px;
    min-height: 44px;
    padding: var(--Spacing-Point-System-md, 12px) var(--Spacing-Point-System-xx-big, 20px);
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}
.header-btn button:hover{
    background: #f8f9ff;
}
.dropdown-arrow{
    transition: transform 0.3s ease;
    display: none;
}
.header-btn button.active .dropdown-arrow{
    transform: rotate(180deg);
}
.help-submenu{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}
.help-submenu.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.help-submenu a{
    display: block;
    padding: 12px 20px;
    color: #15172E;
    text-decoration: none;
    font-family: var(--Font-Family-Heading, "Plus Jakarta Sans");
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
    border: none;
    min-width: auto;
    min-height: auto;
    border-radius: 0;
}
.help-submenu a:hover{
    background-color: #f8f9ff;
}
.header-mobile-menu{
    display: none;
}
.view-all-airports-btn{
    display: none;
}
.top-container{
    max-width: 1400px;
    margin: 0 auto;
    height: 674px;
    border-radius: 20px;
    background: url(assets/images/gap-dir-hero.jpg) 0 0 / cover no-repeat;
    padding-top: 133px;
}
.text-frame{
    max-width: 1176px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text-frame h1{
    color: #FFF;
    /* Heading/H2/Bold */
    font-family: var(--Font-Family-Heading, "Plus Jakarta Sans");
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    margin-bottom: 24px;
}
.text-frame h2{
    color: #FFF;
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    margin: 0;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

@keyframes fadeInOnScroll {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.powered-by-way-container img{
    position: absolute;
    width: 20.095px;
    height: 22.412px;
}
.white-frame{
    max-width: 1176px;
    height: 121px;
    margin: 0 auto;
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 12px;
    background: #FFF;
    margin-top: 115px;
}
.cap-features{
    display: flex;
    padding: 38px 0;
    justify-content: center;
    align-items: center;
    gap: 28px;
    align-self: stretch;
    border-bottom: 1px solid var(--Stroke-Divider-Base-2, #E9EAEC);
    max-width: 1400px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}
.cap-feature-item{
    display: flex;
    align-items: center;
    gap: 8px;
}
.cap-feature-item p{
    color: var(--Text-Primary, #15172E);
    font-family: "Plus Jakarta Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    margin: 0;
    /* 22.4px */
}
.line{
    width: 24px;
    height: 0;
    transform: rotate(90deg);
    border-bottom: 1px solid var(--Stroke-Divider-Base-2, #E9EAEC);
}
.icon-cap-feature-1{
    background: url('assets/images/airport-directory-sprite.png') no-repeat -31px -2px;
    background-size: 215px 50px;
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}
.icon-cap-feature-2{
    background: url('assets/images/airport-directory-sprite.png') no-repeat -60px -2px;
    background-size: 215px 50px;
    width: 20px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}
.icon-cap-feature-3{
    background: url('assets/images/airport-directory-sprite.png') no-repeat -89px -2px;
    background-size: 215px 50px;
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}
.common{
    max-width: 1176px;
    margin: 0 auto;
    margin-top: 120px;
}

/* Scroll-triggered animation classes */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.airports-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.airports-section.visible {
    opacity: 1;
    transform: translateY(0);
}
.common-title{
    color: var(--Text-Primary, #15172E);
    text-align: center;

    /* Heading/H5/SemiBold */
    font-family: var(--Font-Family-Heading, "Plus Jakarta Sans");
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}
.airports-list{
    margin-top: 60px;
    /* make 3 columns */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.cl3 a{
    color: var(--Text-Secondary, #555963);
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 340%;
    text-decoration: none;
}
.popular-airports-list{
    max-width: 1176px;
    margin: 0 auto;
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.popular-airports-list a{
    display: block;
    text-decoration: none;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}
.popular-airports-list a:hover{
    transform: scale(1.05);
}
.airport-item{
    width: 100%;
    height: 464px;
    border-radius: 12px;
    padding: 33px 20px;
    position: relative;
}
.airport-item p{
    color: var(--Text-Negative-Primary, #FFF);
    /* Heading/H8/SemiBold */
    font-family: var(--Font-Family-Heading, "Plus Jakarta Sans");
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.lax-airport{
    background: url(assets/images/los-angeles.jpg) 0 0 / cover no-repeat;
}
.den-airport{
    background: url(assets/images/denver.jpg) 0 0 / cover no-repeat;
}
.sfo-airport{
    background: url(assets/images/san-francisco.jpg) 0 0 / cover no-repeat;
}
.mia-airport{
    background: url(assets/images/miami.jpg) 0 0 / cover no-repeat;
}
.onhover-block{
    opacity: 0;
    height: 268px;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(4, 56, 246, 0.36) 60%, rgba(0, 0, 0, 0.77) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20px;
}
.onhover-block p{
    color: #FFF;
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    height: 28px;
}
.popular-airports-item:hover .onhover-block{
    opacity: 1;
    padding: 30px 20px;
}

.rotate-button{
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    width: 28px;
    height: 28px;
    padding: 4px 4px 4px 0;
}
.arocont {
    position: relative;
    height: 24px;
    width: 24px;
    overflow: hidden;
    padding: 4px 4px 4px 0;
}

.arrow-img-1 {
    width: 13px;
    height: 12px;
    position: absolute;
    transform: rotate(-90deg);
    top: 4px;
    left: -30px;
    transition: all .4s ease;
}

.arrow-img-2 {
    width: 13px;
    height: 12px;
    position: absolute;
    top: 4px;
    left: 6px;
    transition: all .4s ease;
}

.popular-airports-item:hover .arrow-img-1 {
    left: 7px;
    transform: rotate(0deg);
}

.popular-airports-item:hover .arrow-img-2 {
    left: 30px;
    transform: rotate(90deg);
}
.faq-item{
    border-bottom: 1px solid var(--Stroke-Divider-Base-2, #E9EAEC);
    padding: 32px 0;
}
.faq-item .question{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.icon-arrow-down{
    background: url('assets/images/airport-directory-sprite.png') no-repeat -121px -8px;
	background-size: 215px 50px;
	width: 14px;
	height: 8px;
    display: block;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
}
.icon-arrow-down.active{
    transform: rotate(180deg);
}
.faq-item .question p{
    color: var(--Text-Secondary, #555963);
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 30px */
    margin: 0;
}
.faq-item .answer{
    margin-top: 24px;
    display: none;
}
.faq-item .answer.active {
    display: block;
}
.faq-item .answer p{
    color: var(--Text-Tertiary, #717683);
    /* Paragraph/P3/Regular */
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
}
.faq-item .answer p a{
    color: #E1471D
}
.faq-item:hover .question p{
    color: var(--Text-Primary, #15172E);
    font-weight: 600;
}
.get-way-app-section {
    max-width: 1400px;
    margin: 0 auto;
    margin-top: 80px;
    min-height: 725px;
    padding-top: 50px;
}
.get-way-app-section img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
}

.testimonials-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
}
.testimonials-item{
    display: flex;
    padding: var(--Spacing-4-point-grid-x-big, 24px) var(--Spacing-4-point-grid-big, 20px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-4-point-grid-x-big, 24px);
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid var(--Stroke-Border-Base-1, #E9EAEC);
    background: var(--Surface-Base, #FFF);
    height: 300px;
}
.testimonials-item-header{
    display: flex;
    align-items: center;
    gap: 8px;
}
.testimonials-item-header img{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.testimonials-item-header .testmn-name{
    display: flex;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
}
.testimonials-item p{
    color: var(--Text-Secondary, #555963);
    /* Paragraph/P5/Regular */
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
}
.testimonials-item-header p{
    overflow: hidden;
    color: var(--Text-Primary, #15172E);
    text-align: center;
    text-overflow: ellipsis;

    /* Paragraph/P5/Medium */
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 19.6px */
}
.subscribe-section{
    background: var(--Surface-Oxford-blue-Medium, #E6E8F4);
    padding: 48px 0;
    margin-top: 120px;
}
.subscribe-content{
    max-width: 1176px;
    margin: 0 auto;
    position: relative;
}
.sub-img{
    width: 141.5px;
    height: 134.5px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.sub-title{
    color: var(--Text-Primary, #15172E);
    /* Heading/H7/SemiBold */
    font-family: var(--Font-Family-Heading, "Plus Jakarta Sans");
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 12px;
}
.sub-desc{
    color: var(--Text-Primary, #15172E);
    /* Paragraph/P3/Regular */
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin-bottom: 40px;
}
.subscribe-form{
    border-radius: 8px;
    border: 1px solid var(--Input-Outline-Hero-Input-Default, #D3D5D9);
    background: var(--Surface-Base, #FFF);
    display: flex;
    width: 498px;
    height: 52px;
    padding: 4px 4px 4px 14px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.subscribe-form button,.join-btn-mobile{
    border-radius: var(--Button-Border-Radius-medium, 6px);
    background: var(--Button-Surface-Primary, #101223);
    display: flex;
    min-width: 87px;
    min-height: 44px;
    max-height: 44px;
    padding: var(--Spacing-Point-System-md, 12px) var(--Spacing-Point-System-xx-big, 20px);
    justify-content: center;
    align-items: center;
    gap: var(--Spacing-Point-System-s, 8px);
    border: none;
    color: var(--Button-Text-On-Primary, #FFF);
    font-family: var(--Font-Family-Heading, "Plus Jakarta Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 0%;
}
.join-btn-mobile {
    display: none;
}
.subscribe-form button:disabled, .join-btn-mobile:disabled{
    background: var(--Button-Surface-Primary-Disabled, #D3D5D9);
    cursor: not-allowed;
}
.subscribe-form.error{
    border: 1px solid var(--Icon-Error, #DA1E28);
}
.error-msg{
    width: 498px;
    text-align: right;
    color: var(--Input-Helper-Text-Error, #DA1E28);
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    margin-top: 8px;
    display: none;
}
.subscribe-input{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.subscribe-input input{
    overflow: hidden;
    color: var(--Input-Input-Text-Filled, #15172E);
    text-overflow: ellipsis;

    /* Paragraph/P5/Medium */
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 21px */
    border: none;
    outline: none;
    width: 100%;
    background: transparent;
}
.subscribe-input input::placeholder{
    color: var(--Input-Input-Text-Unfilled, #A0A6D4);
    /* Paragraph/P5/Medium */
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
}
.icon-mail{
    background: url('assets/images/airport-directory-sprite.png') no-repeat -146px -4px;
    background-size: 215px 50px;
    width: 18px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}
.icon-clear{
    background: url('assets/images/airport-directory-sprite.png') no-repeat -170px -2px;
    background-size: 215px 50px;
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
    cursor: pointer;
    display: none;
}
.icon-stars{
    background: url('assets/images/airport-directory-sprite.png') no-repeat -6px -32px;
	background-size: 215px 50px;
	width: 98px;
	height: 16px;
    display: block;
}
footer{
    background: #0B3040;
}
.footer-content{
    max-width: 1176px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 82px 0;
}
/* .footer-content img{
    height: 50px;
} */
.footer-links ul{
    display: flex;
    gap: 70px;
}
.footer-links ul li{
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-links ul li a{
    color: var(--Text-Negative-Primary, #FFF);
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 21px */
    text-decoration: none;
}

.way-footer{
    padding: 20px 0;
    background: #FFF;
    display: flex;
    align-items: center;
    gap: 25px;
    justify-content: center;
}
.way-footer p{
    color: var(--Text-Primary, #15172E);
    /* Paragraph/P5/Medium */
    font-family: var(--Font-Family-Paragraph, Inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
}
.way-footer img{
    width: 72.999px;
    height: 21.863px;
}

.show-on-mobile{
    display: none;
}
.subscribe-form-success{
    height: 158.5px;
    display: none;
    padding-top: 50px;
}
@media (max-width: 1400px) {
    .top-container,.cap-features,.get-way-app-section {
        max-width: 1280px;
    }
    .get-way-app-section{
        min-height: 663px;
    }
}
@media (max-width: 1300px) {
    .top-container,.cap-features,.get-way-app-section {
        max-width: 1200px;
    }
    .get-way-app-section{
        min-height: 621px;
    }
}
@media (max-width: 1280px) {
    .top-container{
        height: auto;
        padding-bottom: 20px;
    }
    .top-container,.cap-features,.get-way-app-section {
        max-width: 1200px;
    }
    .text-frame,.white-frame{
        max-width: 1100px;
    }
    header{
        max-width: 1200px;
    }
    .common,.subscribe-content,.footer-content{
        max-width: 1200px;
    }
}
@media (max-width: 1240px) {
    .top-container,.cap-features,.get-way-app-section {
        max-width: 1000px;
    }
    .get-way-app-section{
        min-height: 518px;
    }
    .text-frame,.white-frame{
        max-width: 900px;
    }
    header{
        max-width: 1000px;
    }
    .common,.subscribe-content,.footer-content{
        max-width: 1000px;
    }
    .whtbar{
        flex-wrap: wrap;
    }
    .white-frame{
        height: auto;
    }
    .schbtn{
        width: auto;
    }
    .whtbar{
        flex-direction: column;
        align-items: flex-start;
    }
    .inpbxselect{
        width: 100%;
    }
    .inpbx{
        width: 100%;
    }
    .schbtn{
        width: 100%;
    }
    .search-box{
        width: 100%;
    }
    .testimonials-item{
        height: auto;
    }
}
@media (max-width: 1080px) {
    .top-container,.cap-features,.get-way-app-section {
        max-width: 1000px;
    }
    .text-frame,.white-frame{
        max-width: 900px;
    }
    header{
        max-width: 1000px;
    }
    .common,.subscribe-content,.footer-content{
        max-width: 1000px;
    }
}
@media (max-width: 1024px) {
    .top-container,.cap-features,.get-way-app-section {
        max-width: 900px;
    }
    .get-way-app-section{
        min-height: 466px;
    }
    .text-frame,.white-frame{
        max-width: 800px;
    }
    header{
        max-width: 900px;
    }
    .common,.subscribe-content,.footer-content{
        max-width: 900px;
    }
}
@media (max-width: 992px) {
    .dropdown-arrow{
        display: block;
    }
    .help-submenu{
        right: 0;
        left: auto;
        min-width: 160px;
    }
    .header-btn button{
        min-width: 100px;
        min-height: 40px;
        font-size: 13px;
        padding: 10px 16px;
        border: none;
    }
    .header-mobile-menu{
        display: block;
        position: relative;
    }
    .menu-btn{
        border: none;
        background: transparent;
        padding: 0;
        height: 30px;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .menu-content{
        display: none;
        width: 224px;
        position: absolute;
        border-radius: 8px;
        border: 1px solid var(--Stroke-Border-Subtle, #F3F5F9);
        background: var(--Surface-Base, #FFF);
        box-shadow: 0 2px 6px 0 rgba(16, 24, 40, 0.06);
        top: 30px;
        right: 0;
        z-index: 100;

    }
    .menu-content.active{
        display: block;
    }
    .menu-content li{
        padding: 16px;
        color: var(--Text-Secondary, #555963);
        font-family: var(--Font-Family-Paragraph, Inter);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 140%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .menu-content li + li{
        border-top: 1px solid var(--Stroke-Divider-Base-1, #F3F5F9);
    }
    .menu-content li a{
        text-decoration: none;
        color: var(--Text-Secondary, #555963);
        font-family: var(--Font-Family-Paragraph, Inter);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 140%;
    }
    /* .download-icon-mobile{
        background: url('assets/img/airport-parking/airport-directory-sprite.png') no-repeat -196px -3px;
        background-size: 215px 50px;
        width: 17px;
        height: 17px;
        display: block;
        flex-shrink: 0;
    } */
    .view-all-airports-btn{
        display: block;
        border-radius: var(--Button-Border-Radius-large, 8px);
        background: var(--Button-Surface-Secondary, #F1F2F9);
        height: 52px;
        width: 100%;
        color: var(--Button-Text-On-Secondary, #15172E);
        font-family: var(--Font-Family-Heading, "Plus Jakarta Sans");
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 0%;
        border: none;
        margin-top: 20px;
    }
    header{
        max-width: 100%;
        padding: 16px 20px;
    }
    header img{
        width: 84px;
        height: 28px;
    }
    .header-btn button {
        min-width: 100px;
        min-height: 32px;
        font-size: 12px;
    }
    .header-btn button:hover .download-icon{
        top: -17px;
    }
    .header-btn button:hover .download-text{
        top: 8px;
    }
    .download-text {
        top: 8px;
    }
    .top-container{
        padding: 0 20px;
        padding-top: 60px;
        background: url(assets/images/main-background-mobile.jpg) 0 0 / cover no-repeat;
        height: 611px;
        position: relative;
    }
    .powered-by-way-container img{
        width: 15.032px;
        height: 16.765px;
    }
    .powered-by-way-container{
        width: 75px;
        height: 75px;
        position: absolute;
        top: 15px;
        right: 20px;
    }
    .powered-by-way{
        width: 75px;
        height: 75px;
    }
    .text-frame h1{
        color: #FFF;
        /* Heading/H6/Bold */
        font-family: var(--Font-Family-Heading, "Plus Jakarta Sans");
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 16px;
    }
    .text-frame h2{
        color: #FFF;
        font-family: "Plus Jakarta Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 140%;
    }
    .white-frame{
        margin-top: 26px;
        height: auto;
    }
    
    .hide-on-mobile{
        display: none;
    }
    .show-on-mobile{
        display: flex;
    }
    .common-title{
        font-size: 20px;
    }
    .common{
        margin-top: 60px;
        max-width: 100%;
        padding: 0 20px;
    }
    .airports-list{
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }
    .airports-section .common-title{
        font-size: 16px;
    }
    .popular-airports-list{
        margin: 0 -20px;
        margin-top: 32px;
        display: flex;
        flex-wrap: nowrap;
        overflow: scroll;
        padding: 0 10px;
    }
    .airport-item{
        width: 276px;
    }
    .faq-item .question p{
        font-size: 16px;
    }
    .faq-item{
        padding: 20px 0;
    }
    .faq-item .answer p{
        font-size: 14px;
    }
    .faq-list{
        margin-top: 32px;
    }
    .get-way-app-section{
        margin-top: 10px;
    }
    .testimonials-list{
        margin: 0 -20px;
        padding: 0 20px;
        margin-top: 30px;
        display: flex;
        overflow: scroll;
    }
    .testimonials-item{
        width: 316px;
        padding: 12px;
    }
    .cap-features{
        gap: 20px;
        margin-top: 56px;
        padding: 36px 30px;
        background: var(--Surface-Subtle, #F3F5F9);
        border: none;
        max-width: 100%;
    }
    .cap-feature-item{
        display: flex;
        align-items: flex-start;
        gap: 8px;
        flex-direction: column;
    }
    .cap-feature-item p{
        font-size: 14px;
    }
    .subscribe-section{
        margin-top: 0px;
    }
    .subscribe-section{
        padding: 48px 32px;
    }
    .sub-title{
        font-size: 20px;
        margin-bottom: 16px;
    }
    .sub-desc{
        font-size: 15px;
    }
    .sub-img{
        display: none;
    }
    .subscribe-form{
        width: auto;
    }
    .footer-content{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding: 50px 20px;
    }
    .footer-links ul{
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
    }
    .way-footer{
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        padding-bottom: 32px;
    }
    .subscribe-form button{
        display: none;   
    }
    .join-btn-mobile{
        display: block;
        width: 100%;
        margin-top: 16px;
    }
    .subscribe-form{
        padding: 4px 14px 4px 14px;
    }
    .ui-datepicker{
        width: calc(100% - 80px);
    }
    .error-msg{
        width: 100%;
    }
    .subscribe-form-success {
        height: auto;
        padding-top: 0;
    }
    .icon-greencheck{
        background: url('assets/images/green-tick.png') no-repeat -3px -2px;
        background-size: 25px 24px;
        width: 21px;
        height: 18px;
        display: block;
        margin-bottom: 16px;
    }
    .subscribe-form-success .sub-desc{
        margin: 0;
    }
}