/*------------------ 
Frontend related CSS
------------------*/
body {
    background-color: #000;
}
header {
    background-color: #000 !important;
}
.container {max-width: 1450px !important;}
.hide-this {
    display: none !important;
}
.mr-10{
    margin-right: 10px;
}
.ml-10{
    margin-left: 10px;
}
.mt-10{
    margin-top: 10px;
}
.mb-10{
    margin-bottom: 10px;
}
.c-green {
    color: #4FF6B1;
}
.c-lblue {
    color: #9AC8FF;
}
.c-purple {
    color: #8A3FFF;
}
.c-pink {
    color: #F178B6;
}
#home-hotels {
    padding-top: 40px;
}
.daterangepicker .event-date {
    position: absolute;
    bottom: 0px;
    padding: 15px 15px 25px 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    }
.daterangepicker .event-date .event-date-icon {
    content: url(../images/event-date-icon.svg);
    height: 19px;
    }
.daterangepicker .event-date .event-date-text {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    display: flex;
    align-items: center;
    color: #000000;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    color: #000 !important;
}

.sub-hero {
    background-image: url(../images/passport-dent.svg);
    width: 840px;
    margin: auto;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: -54px;
}
.sub-hero .sub-hero-container {
    padding: 0px 70px;
    min-width: 613px;
    display: grid;
    justify-content: space-around;
    align-items: center;
    grid-column: 2;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.sub-hero .sub-hero-col {
    padding: 25px 0px 10px 0px;
    margin: auto;
    font-size: 14px;
    font-family: 'Poppins';
    line-height: 16px;
    display: flex;
    color: #777E90;
    font-weight: 700;
    border-bottom: 1px solid #353945;
    width: 33.33%;
    justify-content: center;
    cursor: pointer;
}

.sub-hero-container .col-active { 
    color:#FFFFFF;
    border-bottom: 2px solid #4FF6B1;
}

.sub-hero-col .sub-hero-icon { 
    margin-right: 10px;
    color:#777E90;
}

.sub-hero-col .hotel-icon {
    content: url(../images/hotel-icon.svg);
    height: 18px;
}

.col-active .hotel-icon {
    content: url(../images/hotel-icon-active.svg);
}

.sub-hero-col .package-icon {
    content: url(../images/package-icon.svg);
    height: 18px;
}

.col-active .package-icon {
    content: url(../images/package-icon-active.svg);
}

.sub-hero-col .extras-icon {
    content: url(../images/extras-icon.svg);
    height: 18px;
}

.col-active .extras-icon {
    content: url(../images/extras-icon-active.svg);
}

@media only screen and (max-width: 768px) {

    .sub-hero{
        width: 100%;
        top: 0px;
        margin: auto;
    }

    .sub-hero .sub-hero-container {
        width: 100% !important;
        min-width:auto;
        padding: 0px;
    }

}

/*------------------ 
Sub Hero Section CSS END
------------------*/

.hotel-avalibity-container{width: fit-content;margin: auto;}

.hotel-avalibity-container .avalibity-sub-container{display: flex;flex-direction: row;padding: 5px 20px 33px;gap: 20px;border: 1px solid #777E90;border-radius: 20px;width: fit-content;margin: auto;align-items: center;justify-content: center;max-width: 100%; margin: 20px 0 0 0; -webkit-box-sizing: border-box; box-sizing: border-box;}

.avalibity-sub-container .reservation-field{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
}

.avalibity-sub-container .reservation-field-dates{display: flex;flex-direction: column;/* flex: none; *//* order: 0; *//* flex-grow: 0; */}

.avalibity-sub-container .reservation-field-rooms{
    display: flex;
    flex-direction: column;
    /* padding: 0px; */
}

.avalibity-sub-container .reservation-field-dates .reservation-dates{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 10px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.reservation-field-rooms .reservation-room-title-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.reservation-field-rooms .reservation-room-title-wrapper .reservation-room-slide{font-family: monospace;font-style: normal;font-weight: bold;font-size: 16px;line-height: 20px;color: #4FF6B1;align-items: center;display: flex;gap: 10px;display:none;}

.reservation-field-rooms .reservation-room-title-wrapper .reservation-room-slide .room-count{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4FF6B1;
}

#room-display {
    font-weight: 700;
}

.reservation-dates-title .reservation-date-title{font-family: 'Poppins';font-style: normal;font-weight: 700;font-size: 16px;line-height: 20px;display: flex;align-items: center;color: #FFFFFF;flex: none;order: 0;flex-grow: 0;margin: 10px 0px;}

.reservation-field-rooms .reservation-room-title{font-family: 'Poppins';font-style: normal;font-weight: 700;font-size: 16px;line-height: 20px;
/* or 125% */display: flex;align-items: center;color: #FFFFFF;margin: 10px 0px;}

.avalibity-sub-container .reservation-field-dates .reservation-dates .reservation-date{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    gap: 7px;
    background: #23262F;
    border-radius: 12px;
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 9999;
    cursor: pointer;
    max-height: 80px;
}

.reservation-field-rooms .reservation-rooms-wrap{
    display: flex;
    padding: 0px;
    gap: 10px;
    flex: none;
    order: 1;
    flex-grow: 0;
    align-items: center;
    width: min-content;
    max-width: 900px;
    flex-direction: row-reverse;
}
.reservation-date .reservation-date-title,.reservation-date-title{font-family: 'Poppins';font-style: normal;font-weight: 700;font-size: 12px;line-height: 12px;text-transform: uppercase;color: #B1B5C4;flex: none;order: 0;flex-grow: 0;}
.reservation-date .reservation-input-area{display: flex;flex-direction: row;padding: 6px 10px 6px 11px;background: #15171C;border-radius: 8px;flex: none;order: 1;flex-grow: 0;align-items: center;cursor: pointer}
.reservation-date .reservation-input-area .date-input-icon{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;
    height: 20px;
}
.reservation-date .reservation-input-area .calender-green{display: flex;}
.reservation-date .reservation-input-area .calender-blue{display: none;}
.reservation-date .reservation-input-area .reservation-date-input{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    display: flex;
    align-items: center;
    color: #777E91;
    background: transparent;
    border: none;
    outline: none;
    max-width: 110px;
    cursor: pointer;
}

.avalibity-sub-container .reservation-field-dates .dates-active .date-active{
    position: relative;
    background: #F5EFFF;
    border: 1px solid #6707FD;
    top: 10px;
    left: 10px;
}
.avalibity-sub-container .reservation-field-dates .dates-active .date-active .reservation-date-title{
    color: #6707FD;
}
.avalibity-sub-container .reservation-field-dates .dates-active .date-active .reservation-input-area {
    background: #EFEFEF;
    color: #000000;
}
.avalibity-sub-container .reservation-field-dates .dates-active .date-active .reservation-input-area .reservation-date-input {
    color: #000;
}
.dates-active .date-active .reservation-input-area .calender-green{display: none;}
.dates-active .date-active .reservation-input-area .calender-blue{display: flex;}

.reservation-select-dates .select-dates-input-area {
    border: solid 1px #24262f;
}
.reservation-select-dates .select-dates-input-area .select-date-input {
    max-width: fit-content;
    /* margin: 0px 10px; */
    color: #fff;
    background: #15171C;
    appearance: none;
    padding: 0px 10px;
    padding-right: 25px;
    margin-right: -5px;
}
.reservation-select-dates .select-dates-input-area select {}
.reservation-select-dates .select-dates-input-area select option {}
.reservation-select-dates .select-dates-input-area .select-input-icon {}

.reservation-field-rooms .reservation-rooms-wrap .reservation-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    max-width: 600px;
    overflow: scroll;
}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    gap: 7px;
    background: #23262F;
    border-radius: 12px;
    flex: none;
    order: 1;
    flex-grow: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
    max-height: 80px;
}
.reservation-field-rooms .reservation-rooms-wrap .reservation-addroom{display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 15px;gap: 7px;width: 80px;height: 80px;background: #23262F;border-radius: 12px;cursor: pointer;}
.reservation-field-rooms .reservation-rooms-wrap .reservation-addroom .reservation-addroom-icon{color: #4FF6B1;font-size: larger;}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table{display: flex;flex-direction: column;align-items: flex-start;gap: 7px;background: #23262F;border-radius: 12px;flex: none;order: 1;flex-grow: 0;}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table thead tr {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 70px;
}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table thead tr th {font-family: 'Poppins';font-style: normal;font-weight: 700;font-size: 12px;line-height: 12px;text-transform: uppercase;color: #FFF;flex: none;order: 0;flex-grow: 0;background: none;padding: 0;}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table tbody tr {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px;
    gap: 31px;
    background: #15171C;
    border-radius: 8px;
}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table tbody tr td {
    padding: 0px;
    border: none;
}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table tbody tr td .selected-room {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 13px;
    border: none;
}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table tbody tr td .selected-room span {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    width: max-content;
}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table tbody tr td .selected-room .selected-room-delete {
    width: 11px;
    height: 11px;
    color: #777E90;
}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table tbody tr td .selected-room .selected-room-delete i{font-family: 'FontAwesome';cursor: pointer;}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table tbody tr td .guest-selection {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;
}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table tbody tr td .guest-selection .guest-number {
    box-sizing: border-box;
    flex-direction: column;
    padding: 0px;
    background: #15171C;
    border: 1px solid #777E90;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
}
.reservation-field-rooms .reservation-rooms-wrap .reservation-room table tbody tr td .guest-selection .guest-active {
    color: #000000;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    background: #4FF6B1;
    border-color: #4FF6B1;
    border-radius: 4px;
    cursor: pointer;
} 
.hotel-avalibity-container .avalibity-search-container{margin: auto;width: fit-content;position: relative;top: -25px;}
.hotel-avalibity-container .avalibity-search-container .avalibility-search-button {
    background: #4FF6B1 !important;
    border-radius: 64px;
    color: #000 !important;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin-top: 5px;
    padding: 6px 40px;
    text-transform: initial;
    letter-spacing: 0;
    text-transform: uppercase;
    transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    -webkit-transition: all 300ms;
}
.hotel-avalibity-container .avalibity-search-container .avalibility-search-button:hover {
    background: #6707FD !important;
    border-color: #6707FD !important;
    color: #FFF !important;
}
@media only screen and (max-width: 768px) {
    .hotel-avalibity-container {
        width: 100%;
    }

    .hotel-avalibity-container .avalibity-sub-container {
        flex-direction: column;
    }
    .avalibity-sub-container .reservation-field-dates .reservation-dates {
        flex-direction: column;
    }
    .reservation-field-rooms .reservation-rooms-wrap {
        flex-direction: column;
    }
    .reservation-field-rooms .reservation-rooms-wrap .reservation-addroom {
        width: 100%;
        height: auto;
    }
}

/*------------------ 
Hotel Avalibility Search CSS END
------------------*/

.feature {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
    padding-bottom: 40px;
    background-image: linear-gradient(to right, #777E90 6px, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 16px 1px;
    background-repeat: repeat-x;    
}

.feature .feature-item {
    display: flex;
    flex-direction: column;
}

.feature .feature-gallery {
    display: flex;
    flex-direction: row;
    gap: 10px;
    max-width: 50%;
}

.feature .feature-gallery .feature-gallery-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature .feature-gallery .gallery-col-left {
    max-width: 45%;
}
.feature .feature-gallery .gallery-col-right {
    max-width: 55%;
}
.feature .feature-gallery .feature-gallery-col .feature-gallery-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.feature .feature-gallery .gallery-img {
    border-radius: 24px;
    border: 0px;
    background: #000;
    background-position: center !important;
    max-width: 100%;
    background-size: cover !important;
}
.feature .feature-gallery .gallery-img-1 {
    width: 14rem;
    height: 8.25rem;
}
.feature .feature-gallery .gallery-img-2 {
    width: 14rem;
    height: 17rem;
}
.feature .feature-gallery .gallery-img-3 {
    width: 9.5rem;
}
.feature .feature-gallery .gallery-img-4 {
    width: 9rem;
    height: 13rem;
}
.feature .feature-gallery .gallery-img-5 {
    height: 12rem;
}

.feature .feature-details {}
.feature .feature-details h2 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 55px;
}
.feature .feature-details .price-details {
    margin-bottom: 16px;
}
.feature .feature-details .price-details .price-from {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    text-transform: capitalize;
    position: relative;
    bottom: 20px;
    margin-right: 5px;
}
.feature .feature-details .price-details .price-amount {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 100%;
    color: #4FF6B1;
    text-align: right;
}
.feature .feature-details .price-details .price-for {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    color: #fff;
    letter-spacing: 0;
    text-transform: lowercase;
}
.feature .feature-details .info-details {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 15px;
}
.feature .feature-details .info-details p{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
}
.feature .feature-details .includes-details {}
.feature .feature-details .includes-details .includes-title {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #4FF6B1;
}
.feature .feature-details .includes-details .includes-elements {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 10px;
    gap: 10px;
}
.feature .feature-details .includes-details .includes-elements .includes-item {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    width: calc(50% - 5px);
    width: -webkit-calc(50% - 5px);
    width: -moz-calc(50% - 5px);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.feature .feature-details .includes-details .includes-elements .includes-item .includes-label {
   
background: #4FF6B1;
   
border-radius: 2px;
   
padding: 2px;
   
font-family: 'Poppins';
   
font-style: normal;
   
font-weight: 700;
   
font-size: 8px;
   
line-height: 12px;
   
align-items: center;
   
color: #000000;
margin-top: 5px;
}
.feature .feature-details .includes-details .includes-elements .includes-item .includes-name {}


@media only screen and (max-width: 768px) {

    .feature {display: flex;flex-direction: column;flex-wrap: wrap;}
    .feature .feature-item {

    }
    .feature .feature-gallery {
        max-width: 100%;
    }
    .feature .feature-details {

    }
    .feature .feature-details .includes-details .includes-elements .includes-item {
        width: 100%;
        line-height: 17px;
        font-size: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .feature .feature-details .includes-details .includes-elements .includes-item .includes-icon {
        height: auto;
        margin-right: 10px;
    }

}

/*------------------ 
Feature Section CSS END
------------------*/

@media only screen and (max-width: 768px) {
    .sorting-drop {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
        .sorting-drop .third-section {
        max-width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .sorting-drop span {
        font-size: inherit !important;
        margin-right: 0px !important;
    }

    .head-cont .view-button {
        margin-right: 10px;
    }
    
}

.sorting-drop .third-section {
    width: auto;
    float: left;
    max-width: 70% !important;
}
/*------------------ 
Hotels Section CSS END
------------------*/

.room-popup-wrapper{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 15px;
    margin-bottom: 30px;
}
.room-popup-wrapper .popup-col{
    display: flex;
    flex-direction: column;
    padding: 0px;
    max-width: 100%;
    align-items: flex-start;
}
.room-popup-wrapper .popup-col .popup-dates{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
}
.room-popup-wrapper .popup-col .dates-title{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
/* or 125% */
    display: flex;
    align-items: center;
    color: #FFFFFF;
    padding-left: 0px;
}

.room-popup-wrapper .popup-col .dates-selection{
    background: #23262F;
    border-radius: 12px;
    width: max-content;
}
.room-popup-wrapper .popup-col .popup-dates .date-selection{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    max-height: 20px;
}
.room-popup-wrapper .popup-col .dates-selection .date-input-icon{
    color: #4FF6B1;
    font-family: monospace;
    font-weight: bold;
}

.room-popup-wrapper .popup-col .popup-rooms{
    display: flex;
    flex-direction: row;
    padding: 0px;
    gap: 10px;
    align-items: flex-start;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.room-popup-wrapper .popup-col .rooms-title{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
/* or 125% */
    display: flex;
    align-items: center;
    color: #FFFFFF;
    padding: 10px;
    padding-left: 0px;
}
.room-popup-wrapper .popup-col .rooms-container{
    position: relative;
}
.room-popup-wrapper .popup-col .popup-rooms .rooms-container-col{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    gap: 10px;
    max-height: 40px;
}
.room-popup-wrapper .popup-col .popup-rooms .rooms-addnew{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 10px;
    background: #23262F;
    border-radius: 12px;
    color: #4FF6B1;
    font-weight: 400;
    max-height: 40px;
    box-sizing: border-box;    
}
.room-popup-wrapper .popup-col .popup-rooms .rooms-addnew:hover{
    color: #23262F;
    background: #4FF6B1;
}
.room-popup-wrapper .popup-col .popup-rooms .rooms-guests{
    display: flex;
    flex-direction: row;
    padding: 8px 10px;
    gap: 10px;
    background: #23262F;
    border-radius: 12px;
    align-items: center;
    float: left;
    margin-right: 10px;
    min-width: 195px;
    max-height: 40px;
    box-sizing: border-box;    
}
.room-popup-wrapper .popup-col .popup-rooms .rooms-container-col .room-door-icon svg {
    position: relative;
    top: 4px;
}
.room-popup-wrapper .popup-col .popup-rooms .rooms-container-col .room-col i{
    font-family: 'FontAwesome';
    font-weight: 100;
    color: #777E91;
}
.room-popup-wrapper .popup-col .popup-rooms .rooms-container-col .room-door-icon{}
.room-popup-wrapper .popup-col .popup-rooms .rooms-container-col .room-content{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}


/*------------------ 
Room Popup CSS END
------------------*/

.sorting-drop .nice-select {
    /* margin-right: 10px; */
    /* min-width: 160px; */
    /* background: transparent; */
    /* color: #fff; */
    /* padding: 7px 10px; */
    /* border-radius: 26px; */
    /* font-size: 14px; */
    /* font-family: Poppins; */
}

.sorting-drop .third-section {
    width: auto;
    float: left;
    display: flex;
    align-items: center;
}
.v2 .head-cont .sorting-drop {
    float: left;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
.crew_room_select{}
.crew_room_select label{}

.package-grid {
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
}
.package-grid .package-info-home {display: flex;min-width: 310px;background: #23262F;border-radius: 30px;height: fit-content;position: sticky;top: 50px;max-width: 23vw;}
.hotel-passport-price{
    margin-left: 1px;
    text-transform: initial;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Poppins';
}

.package-details {}
.package-details .package-details-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
    gap: 10px;
}
.package-details .package-details-container .package-info-title {}
.package-details .package-details-container .package-info-title h3 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    color: #FFFFFF;
}
.package-details .package-details-container .package-info-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: -webkit-fill-available;
}
.package-details .package-details-container .package-info-content .package-info-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.package-details .package-details-container .package-info-content .package-info-item .item-heading {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
}
.package-details .package-details-container .package-info-content .package-info-item .item-col {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}
.package-details .package-details-container .package-info-content .package-info-item .item-col .item-sub-col {
    min-width: 40px;
}
.package-details .package-details-container .package-info-content .package-info-item .item-col .item-image{
    width: 40px;
    height: 40px;
    background-size: contain !important;
    border-radius: 8px;
    box-shadow: 2px 10px 33px -6px rgba(0,0,0,0.75);
    -webkit-box-shadow: 2px 10px 33px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 10px 33px -6px rgba(0,0,0,0.75);
}
.package-details .package-details-container .package-info-content .package-info-item .item-col .item-title{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #E6E8EC;
    display: flex;
    align-items: center;
}
@media only screen and (min-width: 765px){
    .products-grid .extra-col img {
        height: 220px;
        width: 100%;
    }
}

.extras-con {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 10px;
    justify-content: space-between;
    border: 1px solid #777E90;
    border-radius: 12px;
    gap: 10px;
    cursor: pointer;
}
.extras-con .extras-con-icon{background: url(../images/extras-con-icon.jpg);height: 18px;width: 19px;}
.extras-con .extras-con-info{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    display: flex;
    align-items: flex-start;
    text-transform: capitalize;
    color: #FFFFFF;
    flex-direction: column;
}
.extras-con .extras-con-info .highlight{
    font-weight: 700;
    color: #4FF6B1;
}
.reservation-input-area select{}
/*------------------ 
Home Custom CSS END
------------------*/
.with-sidebar-container{
    display: flex;
    flex-direction: row;
    gap: 46px;
    justify-content: space-between;
}
.right-sidebar{
    display: flex;
    flex-direction: column;
    }
.brief-details{margin-bottom: 30px;/* max-width: 340px; */}
.hotel-details-container {display: flex;flex-direction: column;max-width: 100%;gap: 20px;}

.hotel-details-container .details-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 12px;
}
.hotel-details-container .hotel-amenities-load {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #4FF6B1;
    cursor: pointer;
}
.hotel-details-container .hotel-detail-title {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #fff;
}
.hotel-details-container .details-item .hotel-image img{
    max-width: 100%;
    background: #23262F;
    border-radius: 20px;
    min-height: 150px;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    height: auto;
}

/* Info */

.hotel-details-container .details-item .info-item {position: relative;}
.hotel-details-container .details-item .hotel-sub-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}
.hotel-details-container .details-item .hotel-detail{
    display: flex;
    flex-direction: column;
}
.hotel-details-container .details-item .hotel-detail .h-det-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    gap: 15px;
}
.hotel-details-container .details-item .hotel-detail .h-det-item .h-det-title{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
    color: #E6E8EC;
}
.hotel-details-container .details-item .hotel-detail .h-det-item .h-det-info{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 25px;
    white-space: nowrap;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: clip;
}
.hotel-details-container .details-item .info-item .h-sub-icon {background: url('../images/hotel-icon-blue.svg');width: 16px;height: 16px;}


.hotel-details-container .details-item .item-title {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
}
.hotel-details-container .details-item .h-inc-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
}
.hotel-details-container .details-item .h-inc-item .h-inc-icon{}
.hotel-details-container .details-item .h-inc-item .h-inc-info{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #E6E8EC;
}
.hotel-details-container .details-item .h-am-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 22px;
}
.hotel-details-container .details-item .h-am-item .h-am-icon {
    color: #777E91;
    display: flex;
    align-items: center;
}
.hotel-details-container .details-item .h-am-item .h-am-info {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #FFFFFF;
    text-transform: capitalize;
}
.booking-sidebar-map-view {
    height: 170px;
    width: 100%;
}
#map-holder {
    position: relative;
}
#hotel-map-view-expand {
    position: absolute;
    content: ' ';
    width: 20px;
    height: 20px;
    display: block;
    background-image: url(../images/map-extend.svg);
    background-size: 20px;
    z-index: 9;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

#home-hotels .right-sidebar{max-width: 23vw !important;}
/*------------------ 
Room Page CSS END
------------------*/
.passport-addon-cotainer{
    width: 100%;
}
#coupon {
    background: #313440;
    border-radius: 8px;    
    padding: 7px 12px;
    text-align: center;
    max-width: 100px;
    color: #FFF;
}
#passport-paypal-buttons {
    padding: 30px;
    max-width: 500px;
    margin: 0 auto;
}
/*------------------ 
Addon Page CSS END
------------------*/

/* Extras Tab  */
#home-tabs-content {
    min-height: 100px;
}

.extras-tab-container {
    padding-top: 20px;
    padding-bottom: 20px;
}

.extras-tab-container h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: 56px;
    letter-spacing: -0.02em;
    color: #FCFCFD;
}

.extras-tab-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.extra-card {
    flex-basis: calc(25% - 15px);
    margin: 0;
    box-sizing: border-box;
    min-height: 400px;
    display: flex;
    flex-grow: 0;
    flex-direction: column;
    background: #23262F;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

.extra-card-image {
    width: 100%;
    height: 200px;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
}

.extra-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.extra-card-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #E6E8EC;
}

.extra-card-price {
    font-weight: 700;
    font-size: 30px;
    line-height: 29px;
    color: #4FF6B1;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-end;
}

.extra-card-price span {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;    
    color: #777E90;
    margin-left: 5px;
}

.extra-card button {
    font-family: 'Poppins';
    margin-top: 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: #4FF6B1;
    border: 2px solid #4FF6B1;
    border-radius: 24px;
    background-color: transparent;
    padding: 7px 0;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 300ms, background-color 300ms, opacity 300ms;
    -moz-transition: color 300ms, background-color 300ms, opacity 300ms;
    -o-transition: color 300ms, background-color 300ms, opacity 300ms;
    -webkit-transition: color 300ms, background-color 300ms, opacity 300ms;
    position: absolute;
    bottom: 15px;
    width: 100%;
    right: 0;
    left: 0;
    width: calc(100% - 40px);
    margin-left: 20px;
}

.extra-card button:hover {
    background-color: #4FF6B1;
    color: #23262F;
}

.extra-card-description {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #E6E8EC;
    height: 44px;
    overflow: hidden;
    margin-bottom: 20px;
}

.extra-details-modal {
    width: 100%;
    max-width: 1000px;
    padding: 30px 100px;
    border-radius: 24px;
    box-sizing: border-box;
    min-height: 200px;
}

.extra-details-modal_close {
    z-index: 999999;
}

.extras-tab-filters {
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
}

.extras-tab-filters .extra-filter {
    display: flex;
    margin-right: 10px;
}

.extras-tab-filters .extra-filter label {
    font-weight: 600;
    font-size: 14px;
    line-height: 32px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    cursor: pointer;
}

.extras-tab-filters .nice-select {
    margin-left: 10px;
    margin-right: 15px;
    min-width: 150px;
}

.extra-details-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #E6E8EC;
    margin-bottom: 0;
}

.extra-modal-details {
    display: flex;
}

.extra-details-info {
    display: flex;
    flex-direction: column;
    flex-basis: 55%;
    width: 100%;
    padding: 10px;
    padding-left: 40px;
}

.extra-details-gallery {
    flex-basis: 45%;
    width: 100%;
    height: 250px;
    max-width: 360px;
    padding: 10px;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
}

.extra-details-description {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #E6E8EC;
    margin-top: 15px;
}

.extra-modal-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.add-extra-button {
    font-family: 'Poppins';
    padding: 2px 40px;
    background: #6707FD;
    border: solid 2px #6707FD;
    border-radius: 64px;
    font-weight: 700;
    font-size: 14px;
    line-height: 32px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFF;
    cursor: pointer;
    transition: all 5ms;
    text-transform: uppercase;
    transition: color 300ms, background-color 300ms, opacity 300ms;
    -moz-transition: color 300ms, background-color 300ms, opacity 300ms;
    -o-transition: color 300ms, background-color 300ms, opacity 300ms;
    -webkit-transition: color 300ms, background-color 300ms, opacity 300ms;    
}

.add-extra-button:hover {
    background-color: transparent;
}

.extra-modal-cancel {
    font-weight: 700;
    font-size: 14px;
    line-height: 12px;    
    text-align: center;
    color: #fff;
    margin-top: 20px;
    display: flex;
}

.extra-modal-select {
    margin-top: 5px;
    margin-bottom: 5px;
}

.extra-modal-select label {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #848998;
    margin-bottom: 10px;
    display: block;
}

.extra-quantity {
    margin-top: 15px;
}