.about-us-boxes-div {
    padding: 4rem 0;
}

.about-us-boxes {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
}

.about-us-boxes li {
    background: var(--white-color);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem 3rem;
    gap: 3.5rem;
    width: 100%;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2.5rem;
    text-align: left;
    color: var(--main-color);
    max-height: 278px;

}


.about-us-boxes li img {
    background: var(--white-color);
    padding: 1.25rem;
    box-shadow: 0 20px 80px -15px var(--black-border);
    border-radius: 1rem;
    height: 90px;
    width: 90px;
}


.about-us-home span {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: var(--btn-primary-bgc);
}

.about-us-home h5 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 3.25rem;
    color: var(--main-color);
}

.about-us-home p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75rem;
    color: var(--color-gray-booking);
    margin-top: 0.5rem;
    text-align: center;
}

.about-us-home {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    padding: 0 17.5rem;
}


.search-box-div {
    background-image: url("../img/img-background-home.webp");
    padding: 6rem 0;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    min-height: 700px;
}

.search-box-div .container {
    background: var(--white-color);
    padding: 1.5rem;
    box-shadow: 10px 10px 40px 0 var(--dark-blue);
    border-radius: 0 1.25rem 1.25rem 1.25rem;
    gap: 1.5rem;
    display: flex;
    flex-direction: column;
    margin-top: 7.5rem;
}

.trip-type ul {
    display: flex;
    list-style: none;
    gap: 1.75rem;
    margin-bottom: 1.5rem;
}

.trip-type ul li {

    display: flex;
    gap: 0.5rem;
    align-items: center;
    cursor: pointer;
}
.trip-type ul li label{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--black-color);
}

.reverse-btn {
    border-radius: 50%;
    border: 1px solid var(--gray-border);
    padding: 0.5rem;
    display: flex;
    background: var(--white-color);
    position: absolute;
    bottom: 4px;
    cursor: pointer;
    z-index: 1;
}


div#class,
div#passengers ,
.round-trip-grid-2 div.passengers
, .one-way-form select{
    width: 236px;
}

.custom-select {
    width: 283px;
}

.hotel-flight-class div#class{
    width: 100%;
}
div#passengers ,.round-trip-grid-2 div.passengers,
.flight-forms form .passengers
{
    border-right: 0;
    border-radius: 0.25rem 0 0 0.25rem;
}

div#class{
    border-radius: 0 0.25rem 0.25rem 0;
}


.flight-forms form .passengers,
.flight-forms form .class,
.one-way-form .passengers,
.one-way-form .class {
    position: relative;
}

.flight-forms form .passengers::before,
.flight-forms form .class::before,
.rooms-guests-num::before {
    content: "";
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2300B5DD' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 3px;
    margin: 0.5rem;
}

.destination-div {
    display: flex;
    align-items: end;
    position: relative;
    justify-content: center;
    gap: 1.5rem;
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
}


.flight-forms form,
.one-way-form,
.hotel-flight-reservation form,
.hotel-reservation form {
    display: grid;
    gap: 1.5rem;
}

.flight-forms form .search-flight-btn,
.one-way-form .search-flight-btn {
    grid-area: 1/3;
    align-self: end;
}

.round-trip-grid-2 {
    grid-column: 1 / span 2;
    grid-row: 2 / span 1;
    display: flex;
    width: 100%;
    gap: 1.5rem;
}

.round-trip-grid-2 div {
    display: flex;
    width: 100%;
}

.round-trip-grid-3 {
    display: flex;
    grid-column: 2 / span 2;
    grid-row: 2 / span 1;
}

.round-trip-grid-4 {
    grid-area: 2/3;
    align-self: end;
    margin-bottom: .75rem;
    display: flex;
    gap: 0.5rem;
    font-size: 14px;
}

.pos-relative .passengers-dropdown,
.pos-relative .class-dropdown {
    position: absolute;
    background: var(--white-color);
    padding: 1.25rem;
    top: 100%;
    box-shadow: 10px 10px 40px 0 var(--black-border-100);
    border-radius: 0.5rem;
    width: fit-content;
    opacity: 0;
    z-index: -1;
    transition: opacity 200ms ease-in-out, z-index 0s linear;
    transition-delay: 0s, 200ms;
}

.passengers-dropdown.show, .class-dropdown.show {
    opacity: 1;
    z-index: 2;
    transition-delay: 0s, 0ms;
}

.class-dropdown.show {
    z-index: 100;
}

.pos-relative .class-dropdown {
    width: 100%;
}

.passengers-dropdown ul, .class-dropdown ul {
    list-style: none;
    width: 100%;
}

.passengers-dropdown ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0 1rem;
    border-bottom: 1px solid var(--gray-border-second);
}

.class-dropdown ul li label {
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 0.5rem 0 1rem;
    border-bottom: 1px solid var(--gray-border-second);
    gap: 0.5rem;

}

.passengers-dropdown ul li:last-child,
.class-dropdown ul li:last-child label {
    border-bottom: none;
    padding-bottom: 0;
}

.passengers-dropdown ul div {
    width: auto;
}

.passengers-dropdown ul div:first-child {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-align: left;
    color: var(--main-color);
    display: flex;
    flex-direction: column;
    min-width: 100px;
}

.passengers-dropdown ul div:first-child span {
    color: var(--gray-border-second);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
    text-align: left;

}

.passengers-dropdown ul div:last-child .number-of-passengers {
    border: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-align: center;
    color: var(--gray-border-second);
    width: 32px;
    height: auto;
}

.passengers-dropdown ul div:last-child {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.passengers-dropdown ul div:last-child span {
    border: 1px solid var(--black-border-200);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.reserve-type {
    display: flex;
    list-style: none;
    background: var(--white-color-100);
    position: absolute;
    bottom: 100%;
    left: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    z-index: 1;
}

.reserve-type li {
    padding: 1rem 1.5rem;
    color: var(--gray-border-second);
    border-bottom: 2px solid var(--gray-border-second);
    cursor: pointer;
}

.reserve-type li:first-child {
    border-radius: 1.5rem 0 0 0;
}

.reserve-type li:last-child {
    border-radius: 0 1.5rem 0 0;
}

.reserve-type .active {
    background: var(--white-color);
    color: var(--btn-primary-bgc);
    border-bottom: 2px solid var(--btn-primary-bgc);
}


.reserve-form form {
    display: grid;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    color: var(--main-color);
}

.hotel-reservation form > div {
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

.hotel-reservation form .date-hotel-reservation {
    flex-direction: row;
    gap: 0;
}

.reserve-form form label {
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    color: var(--dark-blue);
    position: relative;
}

span.validation-error {
    position: absolute;
    top: 0;
    color: red;
    right: 0;
}

.reserve-form form.one-way-form,
.reserve-form form.multi-city-form {
    display: none;
}


.hotel-reservation div:first-child {
    grid-area: 1/1;
}

.hotel-reservation div:nth-child(2) {
    grid-area: 1/2;
}

.hotel-reservation div:nth-child(3) {
    grid-area: 1/3;
}

.hotel-reservation button:last-child {
    grid-area: 1/4;
    align-self: end;
}

.date-hotel-reservation {
    display: flex;
    grid-area: 1/3;
    justify-self: flex-end;
    width: 100%;

}

.rooms-guests-num {
    border: 1px solid var(--gray-border);
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    position: relative;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    color: var(--main-color);
    width: 170px;
}

.reserve-form form.multi-city-form button {
    justify-self: right;
    grid-area: 1/2;
    width: 52.5%;
}

.multi-city-div {
    display: grid;
    gap: 1.5rem;
    border-bottom: 1px solid var(--gray-border);
    padding-bottom: 1.5rem;
}

.passengers-multi-city {
    flex-direction: row;
    gap: 0;
}

.passengers-multi-city div#passengers, .passengers-multi-city div#class {
    width: 100%;
}

.btn-multi-city-div {
    display: grid;
}


.multi-city-div .round-trip-grid-4 {
    grid-area: 2/2;
}

.next-flights {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.next-flights .next-flight {
    display: grid;
    gap: 1.5rem;
    border-bottom: 1px solid var(--gray-border);
    padding-bottom: 1.5rem;
}

.next-flights .next-flight:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.next-flights .next-flight .date-hotel-reservation svg {
    margin-top: 0.5rem;
}

.next-flight .date-hotel-reservation {
    align-items: end;
    gap: 0.5rem;
}

.next-flight .date-hotel-reservation img.remove-flight {
    margin-bottom: .75rem;
}

.next-flight .date-hotel-reservation svg {
    width: 24px;
    height: 24px;
    margin-bottom: -1rem;

}

.rooms-guests-dropdown {
    position: absolute;
    top: 100%;
    display: none;
    flex-direction: column;
    background: var(--white-color);
    box-shadow: 10px 10px 40px 0 var(--black-border-100);
    padding: 0.75rem;
    border-radius: 0.5rem;
    width: 300px;
    z-index: 1;
}

.hotel-reservation form div.new-room-btns {
    display: flex;
    flex-direction: row;
}

.new-room-btns .add-new-room {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--btn-primary-bgc);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.new-room-btns .add-new-room:before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5V19M5 12H19' stroke='%23008CC0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 1.5rem;
    height: 1.5rem;
}

.new-room-btns .done-room {
    background: var(--main-color);
    color: var(--white-color);
    padding: 0.75rem;
    border-radius: 0.25rem;
    width: 100%;
    text-align: center;
    cursor: pointer;
}


.btn-multi-city-div span {
    grid-area: 1/1;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--light-blue);
    align-self: center;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: fit-content;
    cursor: pointer;
}


.btn-multi-city-div span:before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5V19M5 12H19' stroke='%23008CC0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 1.5rem;
    height: 1.5rem;
}

.hotel-reservation form div.new-room {
    gap: 0.75rem;
    display: flex;
    flex-direction: column;
}

.new-room p {
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    color: var(--dark-blue);
}

.new-room ul {
    list-style: none;
    width: 100%;
    gap: 0.25rem;
    display: flex;
    flex-direction: column;
}

.new-room ul li {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    color: var(--black-bg-200);
}

.new-room ul li .minus {
    background: var(--light-bg);
    border: 1px solid var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--black-bg-200);
    border-radius: 0.25rem;
    cursor: pointer;
}

.new-room ul li .plus {
    background: var(--btn-primary-bgc);
    border: 1px solid var(--btn-primary-bgc);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--white-color);
    border-radius: 0.25rem;
    cursor: pointer;
}

.new-room ul li div, .new-room > ul > li > label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-direction: row;
}

.new-room > ul > li > label{
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.new-room ul li .adults-num-hotel,
.new-room ul li .children-num-hotel {
    text-align: center;
    border: 1px solid var(--gray-border);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 1.5rem;

}

.rooms-guests-dropdown {
    display: none;
}

.calendar-container {
    position: relative;
}


body .calendar-container-div {
    position: absolute;
    top: 100%;
    background: white;
    border-radius: 0.5em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1em;
    flex-direction: column;
    display: none;
    z-index: 1;
}

body .calendar-container-div .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-bottom: 1em;
}

body .calendar-container-div .header h6 {
    margin: 0;
    font-size: 1.5em;
    color: var(--black-color);
}

body .calendar-container-div .controls {
    display: flex;
    justify-content: space-between;
    margin: 0.5em 0;
}

body .calendar-container-div .btn {
    padding: 0.5em 1em;
    color: var(--gray-border-second);
    border: none;
    border-radius: 0.3em;
    cursor: pointer;
    transition: background-color 0.3s;
}

body .calendar-container-div .btn:hover {
    background-color: var(--light-blue-100);
    color: var(--white-color);
}

body .calendar-container-div .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5em;
    margin-bottom: 1em;
}

body .calendar-container-div .day {
    padding: 1em;
    text-align: center;
    cursor: pointer;
    border-radius: 0.3em;
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

body .calendar-container-div .day:hover {
    background-color: rgba(0, 123, 255, 0.2);
}

body .calendar-container-div .day[data-selected-start] {
    background: var(--btn-primary-bgc);
    color: white;
}

body .calendar-container-div .day[data-selected-end],
body .calendar-container-single .calendar-container-div .day[data-selected] {
    background: var(--btn-primary-bgc);
    color: white;
}

body .calendar-container-div .day[data-selected] {
    background: var(--main-color-100);
    color: white;
}


body .calendar-container .selected-dates,
body .calendar-container .selected-dates-return,
body .calendar-container-single .selected-dates-single {
    text-align: left;
    font-weight: bold;
    color: var(--black-color);
    border: 1px solid var(--gray-border);
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.hotel-flight-reservation form .hotel-flight-from {
    grid-area: 1/1;
}

.hotel-flight-reservation form .hotel-flight-to {
    grid-area: 1/2;
}

.hotel-flight-reservation form .hotel-flight-class {
    grid-area: 1/3;
}

.hotel-flight-reservation form .calendar-container {
    grid-area: 2/1;
    display: flex;
}

.hotel-flight-reservation form .hotel-flight-rooms {
    grid-area: 2/2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rooms-guests-dropdown {
    gap: 0.5rem;
}

.new-room-btns {
    display: flex;
}

.hotel-flight-reservation form .hotel-flight-btn {
    grid-area: 2/3;
    align-self: end;
    border: 0;
}

.reversed {
    flex-direction: row-reverse;
}

.date-icon.full-width {
    border-radius: .25rem;
}

.new-room:first-child > p > span {
    display: none;
}

.hotel-reservation form div:nth-child(7) {
    grid-area: 1/1;
}

.hotel-reservation form div:nth-child(8) {
    grid-area: 1/2;
}

.hotel-reservation form div:nth-child(9) {
    grid-area: 1/3;
}

.hotel-reservation form .search-flight-btn {
    grid-area: 1/4;
    align-self: end;
}

.child-age-input {
    width: 50%;
    padding: 0.5rem;
    outline: none;
    border: 1px solid var(--gray-border);
    border-radius: 0.5rem;
}

.child-age-input-div {
    justify-content: space-between;
    margin: 0.5rem 0;
    width: 100%;
}

.reserve-form form .child-age-input-div label {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

li.children-ages-container {
    flex-direction: column;
}

.multi-city-form .select2-container--default .select2-selection--single {
    min-width: 421px;
}

.hotel-flight-rooms .rooms-guests-num{
    min-width: 191px;
    width: auto;
}

.hotel-flight-rooms div#class {
    width: 100%;
}

li.children-ages-container div {
    margin: 0.5rem 0;
    width: 100%;
    justify-content: space-between;
}

li.children-ages-container div label {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;

}
/*date-picker-library*/
span.easepick-wrapper {
    z-index: 2 !important;
}

.hotel-reservation .calendar-container {
    display: flex;
    gap: 0;
    flex-direction: row;
}