@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

        :root {
            --el-checkbox-bg-color: #ffffff;
            --el-checkbox-input-border: 1px solid #dcdfe6;
            --el-checkbox-border-radius: 2px;
            --el-checkbox-input-height: 14px;
            --el-checkbox-input-width: 14px;
            --el-index-normal: 1;
        }

        body {
            font-family: "Manrope", sans-serif;
            max-width: 100%;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            background-color: #f7f9fa;
        }


        /* Header-3 start Css*/
        .header-3 {
            width: 100%;
            padding: 20px 0px;
            background-color: #ffffff;
            margin-bottom: 5vw;
        }

        .header-content-3 {
            max-width: 1270px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: auto;
        }

        .header-content-3 div {
            display: flex;
			justify-content: start;
			height: auto;
			flex-wrap: wrap;
			padding: 0px
        }

        .header-search-btn {
            cursor: pointer;
            display: flex;
            width: 186px;
            height: 38px;
            justify-content: center;
            align-items: center;
            gap: 20px;
            border-radius: var(--4, 4px);
            border: 1px solid var(-----, #17b290);
            background: var(----, rgba(0, 198, 132, .12));
            color: #17b290;
            text-transform: uppercase;
            position: relative;
            padding-right: 10px;
        }

        .input-group {
            position: relative;
            flex: 1;
            margin-right: 1vw;
        }

        .input-field {
            width: 100%;
            padding: 10px 50px;
            border: 1px solid #dcdfe6;
            border-radius: 3px;
            font-size: 15px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            appearance: none;
            color: #666;
            outline: none;
        }

        .icon img {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            width: 20px;
        }

        .input-field.has-icon {
            width: 12vw;
        }

        .dropdown-arrow {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #999;
        }

        /* Header-3 End css */


        .cruisetour-container {
            max-width: 1270px;
            margin: 0 auto;
            display: flex;
            gap: 15px;
        }

        .cruisetour-left {
            width: 280px;
            height: 75vh;
            background: #fff;
            border-radius: 16px;
            padding-bottom: 24px;
        }

        .cruisetour-left>p {
            padding: 0 16px;
            height: 48px;
            line-height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 57, 57, .07);
            margin: 0;
        }

        .cruisetour-left>p span {
            color: #1b2122;
            font-weight: 700;
            border-bottom: 2px solid #17b290;
            font-style: normal;
            text-transform: uppercase;
            font-size: 21px;
        }

        .cruisetour-left-menu-box {
            max-height: 70vh;
            overflow: auto;
        }

        .item-box {
            width: calc(100% - 32px);
            padding: 0 10px;
        }

        .item-title {
            margin-top: 10px;
            height: 42px;
            line-height: 42px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px 0 32px;
            background: #f7f9fa;
            border-radius: 8px;
        }

        .item-title span {
            color: #1b2122;
            font-weight: 700;
            border-bottom: 2px solid #17b290;
            font-style: normal;
            text-transform: uppercase;
        }

        .item-checkbox {
            margin-left: 48px;
            margin-bottom: 12px;
        }

        .item-checkbox label {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
            color: #606266;
            line-height: 36px;
        }

        .item-checkbox input[type="checkbox"] {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            accent-color: #17b290;
        }

        .cruisetour-right-main {
            flex: 1;
            width: 870px;
        }

        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding: 0 4px;
        }

        .results-count {
            display: flex;
            align-items: center;
        }

        .seven-tour-heading {
            color: #1b2122;
            font-size: 21px;
            font-weight: 700;
        }

        .seven-tour-heading::after {
            content: '';
            display: block;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #17b290 0%, #17b290 60%, transparent 60%);
            margin-top: 4px;
        }

        .sort-section {
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #b2bebf;
        }

        .sort-label {
            color: #606266;
            font-size: 12px;
            font-weight: 500;
            padding-left: 4px;
        }

        .sort-select {
            position: relative;
            display: inline-block;
        }

        .sort-select select {
            border-radius: 8px;
            padding: 8px 0px 8px 0px;
            font-size: 14px;
            color: #1b2122;
            cursor: pointer;
            border: none;
            color: #606266;
            background: transparent;
            outline: none;
        }

        .cruisetour-right {
            background: #fff;
            border-radius: 16px;
            padding: 24px;
            min-height: 400px;
        }

        .cruisetour-right h2 {
            margin: 0 0 16px 0;
            color: #1b2122;
            font-weight: 700;
        }

        .cruisetour-right p {
            color: #1b2122;
            margin: 0;
        }

        .tour-card {
            display: flex;
            gap: 0px;
        }

        .tour-card-img {
            position: relative;
        }

        .tour-card-img img {
            width: 225px;
            height: 225px;
            margin-right: 24px;
            border-radius: 8px;
        }

        .tour-card-img span {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 4px 8px;
            border-radius: 999px;
            background: var(---, rgba(0, 22, 23, .52));
            -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
            color: #fff;
        }

        .tour-card-content {
            display: flex;
        }

        .tour-card-left-content p,
        .tour-card-left-content div {
            color: #5d6667;
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            line-height: 21px;
        }

        #card-content-div-p {
            margin: 0px 0px;
            display: flex;
            gap: 6px;
        }

        #title-font {
            font-style: normal;
            font-weight: var(---, 700);
            text-transform: uppercase;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #1b2122;
            cursor: pointer;
            margin-bottom: 16px;
            line-height: 26px;
            font-size: 20px;
        }

        .tour-card-left-content p img,
        .tour-card-content div img {
            width: 18px;
            height: 18px;
            margin-right: 8px;
        }

        .tour-card-right-content {
            width: 186px;
            text-align: right;
            position: relative;
        }

        .font-12 {
            color: rgb(178, 190, 191);
            font-size: 12px;
        }

        .font-16 {
            color: #1b2122;
            font-weight: 700;
            line-height: 38px;
        }

        .detail-btn button {
            position: absolute;
            bottom: 34px;
            right: 0;
            width: 120px;
            height: 40px;
            background-color: #17b290;
            color: #fff;
            border: none;
            line-height: 40px;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
        }

        .cards-hr {
            margin: 21px 0px;
            border: 1px solid #edf1f1;
        }

         .nav-container {
            border-radius: 8px;
            padding: 12px;
            max-width: 600px;
            margin: 0 auto;
        }

        .nav-tabs {
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
        }

        .nav-arrow {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .nav-arrow:disabled {
            color: #666;
            cursor: not-allowed;
        }

        .tabs-wrapper {
            display: flex;
            align-items: center;
            gap: 4px;
            flex: 1;
            overflow: hidden;
        }

        .tab {
            display: flex;
            align-items: center;
            border: 1px solid rgba(0, 57, 57, .07);
            border-radius: 20px;
            padding: 6px 12px;
            font-size: 13px;
            white-space: nowrap;
            transition: all 0.2s;
        }

        .tab.active {
            color: rgb(0, 0, 0);
        }

        .tab-text {
            margin-right: 8px;
            font-size: 12px;
            color: #5b5c5c;
        }

        .close-btn {
            background: none;
            border: none;
            color: currentColor;
            cursor: pointer;
            padding: 2px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            transition: background-color 0.2s;
            color: #5b5c5c;
        }

        .close-btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .tab:not(.active) .close-btn:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        @media (min-width: 1440px) {
            .cruisetour-container {
                max-width: 1270px;
                gap: 15px;
            }

            .cruisetour-left {
                width: 320px;
            }

            .cruisetour-right-main {
                width: 1000px;
            }

            .tour-card-img img {
                width: 225px;
                height: 225px;
            }

            .tour-card-right-content {
                width: 220px;
            }
        }

        @media (max-width: 1439px) and (min-width: 1200px) {
            .cruisetour-container {
                max-width: 1100px;
                gap: 15px;
            }

            .cruisetour-left {
                width: 260px;
            }

            .cruisetour-right-main {
                width: 860px;
            }

            .tour-card-img img {
                width: 220px;
                height: 220px;
            }

            .tour-card-right-content {
                width: 170px;
            }

            .tour-card {
                gap: 0px;
            }

            #title-font {
                font-size: 14px;
            }

            .tour-card-left-content p {
                font-size: 14px;
            }
            
            .nav-container{
                max-width: 380px;
            }

            .header-content-3{
                width: 1100px;
            }
			
			.input-group{
		width:24vw
	}
        }

        @media (max-width: 1199px) and (min-width: 1024px) {
            .cruisetour-container {
                max-width: 1024px;
                gap: 32px;
                padding: 0 16px;
            }

            .cruisetour-left-menu-box {
                max-height: 62vh;
            }

            .cruisetour-left {
                width: 240px;
                height: 70vh;
            }

            .cruisetour-right-main {
                width: 720px;
            }

            .tour-card {
                flex-direction: column;
                gap: 12px;
            }

            .tour-card-img img {
                width: 200px;
                height: 200px;
                margin-right: 0;
            }

            .tour-card-content {
                flex-direction: column;
                gap: 16px;
            }

            .tour-card-right-content {
                width: 100%;
                text-align: left;
                position: static;
            }

            .detail-btn button {
                position: static;
                width: 140px;
                margin-top: 16px;
            }

            #title-font {
                font-size: 18px;
                line-height: 24px;
            }

            .nav-container{
                max-width: 300px;
            }


            /* Header-3 media Query */
            .header-content-3 {
                width: 1024px;
            }

            .input-field.has-icon {
                width: 23vw
            }
			
			.input-group{
		width:24vw
	}

        }

        @media (max-width: 1023px) and (min-width: 768px) {
            body {
                padding: 16px;
            }

            .cruisetour-container {
                flex-direction: column;
                gap: 24px;
                max-width: 100%;
            }

            .cruisetour-left {
                width: 100%;
                height: auto;
                max-height: 300px;
            }

            .cruisetour-left-menu-box {
                max-height: 200px;
            }

            .item-title {
                padding: 0 8px 0 24px;
                height: 36px;
                line-height: 36px;
            }

            .item-checkbox {
                margin-left: 32px;
                margin-bottom: 8px;
            }

            .item-checkbox label {
                line-height: 36px;
                font-size: 13px;
            }

            .tour-card-left-content p {
                font-size: 12px;
            }

            .cruisetour-right {
                padding: 0;
            }

            .cruisetour-right-main {
                width: 100%;
            }

            .results-header {
                flex-direction: column;
                gap: 12px;
                align-items: flex-start;
            }

            .sort-section {
                align-self: flex-end;
            }

            .tour-card {
                flex-direction: col;
                gap: 16px;
                padding: 10px;
            }

            .tour-card-img img {
                width: 180px;
                height: 180px;
                margin-right: 0;
            }

            .tour-card-content {
                flex-direction: row;
                gap: 12px;
            }

            .tour-card-right-content {
                width: 100%;
                text-align: left;
                position: static;
                display: flex;
                flex-direction: column;
                align-items: end;
                gap: 7vw;
            }

            .detail-btn button {
                position: static;
                width: 120px;
                margin-top: 12px;
            }

            #title-font {
                font-size: 16px;
                line-height: 22px;
            }

            .font-16 {
                line-height: 32px;
            }

            /* Header-3 media Query */
            .input-field.has-icon {
                width: 27vw;
            }
        }

        @media (max-width: 767px) {
            body {
                padding: 12px;
            }

            .cruisetour-container {
                flex-direction: column;
                gap: 20px;
                max-width: 100%;
            }

            .cruisetour-left {
                width: 100%;
                height: auto;
                max-height: 250px;
            }

            .cruisetour-left>p {
                height: 40px;
                line-height: 40px;
                padding: 0 12px;
            }

            .cruisetour-left-menu-box {
                max-height: 180px;
            }

            .item-box {
                width: calc(100% - 24px);
                padding: 0 10px;
            }

            .item-title {
                padding: 0 8px 0 20px;
                height: 32px;
                line-height: 32px;
                margin-top: 8px;
                margin-bottom: 8px;
            }

            .item-checkbox {
                margin-left: 28px;
                margin-bottom: 6px;
            }

            .item-checkbox label {
                line-height: 32px;
                font-size: 12px;
            }

            .item-checkbox input[type="checkbox"] {
                width: 14px;
                height: 14px;
                margin-right: 6px;
            }

            .cruisetour-right-main {
                width: 100%;
            }

            .cruisetour-right {
                padding: 16px;
            }

            .results-header {
                align-items: center;
                flex-wrap: wrap;
            }

            .results-count {
                font-size: 16px;
                flex-wrap: wrap;
            }

            .sort-section {
                align-self: flex-end;
            }

            .tour-card {
                flex-direction: column;
                gap: 12px;
            }


            .tour-card-img img {
                width: 100%;
                height: 30vh;
                margin-right: 0;
                object-fit: cover;
            }

            .tour-card-img span {
                top: 8px;
                left: 8px;
                padding: 3px 6px;
                font-size: 12px;
            }

            .tour-card-content {
                flex-direction: column;
                gap: 8px;
            }

            .tour-card-left-content p,
            .tour-card-left-content div {
                margin-bottom: 8px;
                line-height: 18px;
                font-size: 13px;
            }

            .tour-card-left-content p img,
            .tour-card-content div img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
            }

            .tour-card-right-content {
                width: 100%;
                text-align: left;
                position: static;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }

            .detail-btn button {
                position: static;
                width: 100px;
                height: 36px;
                line-height: 36px;
                margin-top: 8px;
                font-size: 13px;
            }

            #title-font {
                font-size: 14px;
                line-height: 20px;
                margin-bottom: 12px;
            }

            .font-12 {
                font-size: 11px;
            }

            .font-16 {
                line-height: 28px;
                font-size: 14px;
            }

            .cards-hr {
                margin: 16px 0;
            }

            #card-content-div-p {
                gap: 5px;
                flex-wrap: wrap;
            }

            /* Header-3 media Query */
            .header-content-3 {
                flex-direction: column;
                align-items: end;
                gap: 3vw;
            }

            .input-field.has-icon {
                padding-left: 49px;
                width: 100%;
                font-size: 12px;
            }

            #header-btn-div {
                display: flex;
                align-items: end;
            }

            .nav-container{
                padding: 12px 0px;
                margin: 0;
            }

            .tabs-wrapper{
                flex-wrap: wrap;
            }
        }

.multiSelect {
    position: relative;
}

.multiSelect *, .multiSelect *::before, .multiSelect *::after {
    box-sizing: border-box;
}

.multiSelect_dropdown {
    font-size: 14px;
    min-height: 35px;
    line-height: 35px;
    border-radius: 4px;
    box-shadow: none;
    outline: none;
    background-color: #fff;
    color: #444f5b;
    border: 1px solid #d9dbde;
    font-weight: 400;
    padding: 0.5px 13px;
    margin: 0;
    transition: .1s border-color ease-in-out;  
    cursor: pointer;
}

.multiSelect_dropdown.-hasValue {
    padding: 5px 30px 5px 5px;
	height: 100%
    cursor: default;
}

.multiSelect_dropdown.-open {
    box-shadow: none;
    outline: none;
 	border: none;
    width: 100%;
    height: 100%;
}

.multiSelect_dropdown:focus,
.multiSelect_dropdown:active {
    outline: none;
    background-color: transparent; /* or your desired background color */
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
}

.multiSelect_arrow::before,
.multiSelect_arrow::after {
    content: '';
    position: absolute;
    display: block;
    width: 2px;
    height: 8px;
    border-radius: 20px;
    border-bottom: 8px solid #99A3BA;
    top: 40%;
    transition: all .15s ease;
}

.multiSelect_arrow::before {
    right: 18px;
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
}

.multiSelect_arrow::after {
    right: 13px;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}

.multiSelect_list {
    margin: 0;
    margin-bottom: 25px;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    max-height: calc(10 * 31px);
    top: 28px;
    left: 0;
    z-index: 9999;
    right: 0;
    background: #fff;
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    transition: opacity 0.1s ease, visibility 0.1s ease, -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32), -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    -webkit-transform: scale(0.8) translate(0, 4px);
    transform: scale(0.8) translate(0, 4px);
    border: 1px solid #d9dbde;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);
}

.multiSelect_option {
    margin: 0;
    padding: 0;
    opacity: 0;
    -webkit-transform: translate(6px, 0);
    transform: translate(6px, 0);
    transition: all .15s ease;
}

.multiSelect_option.-selected {
    display: none;
}

.multiSelect_option:hover .multiSelect_text {
    color: #fff;
    background: #4d84fe;
}

.multiSelect_text {
    cursor: pointer;
    display: block;
    padding: 5px 13px;
    color: #525c67;
    font-size: 14px;
    text-decoration: none;
    outline: none;
    position: relative;
    transition: all .15s ease;
}

.multiSelect_list.-open {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1) translate(0, 12px);
    transform: scale(1) translate(0, 12px);
    transition: opacity 0.15s ease, visibility 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32), -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
}

.multiSelect_list.-open + .multiSelect_arrow::before {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
}

.multiSelect_list.-open + .multiSelect_arrow::after {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
}

.multiSelect_list.-open .multiSelect_option {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.multiSelect_list.-open .multiSelect_option:nth-child(1) {
  transition-delay: 10ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(2) {
  transition-delay: 20ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(3) {
  transition-delay: 30ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(4) {
  transition-delay: 40ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(5) {
  transition-delay: 50ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(6) {
  transition-delay: 60ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(7) {
  transition-delay: 70ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(8) {
  transition-delay: 80ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(9) {
  transition-delay: 90ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(10) {
  transition-delay: 100ms;
}

.multiSelect_choice {
    background: #f4f4f5;
    color: #444f5b;
    padding: 4px 8px;
    line-height: 17px;
    margin: 5px;
    display: inline-block;
    font-size: 12px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 500;
	display:flex;
	align-items: center;
}

.multiSelect_deselect {
    width: 12px;
    height: 12px;
    display: inline-block;
    stroke: #b2bac3;
    stroke-width: 4px;
    margin-top: -1px;
    margin-left: 2px;
    vertical-align: middle;
}

.multiSelect_choice:hover .multiSelect_deselect {
    stroke: #a1a8b1;
}

.multiSelect_noselections {
    text-align: center;
    padding: 7px;
    color: #b2bac3;
    font-weight: 450;
    margin: 0;
}

.multiSelect_placeholder {
    position: absolute;
    left: 20px;
    font-size: 14px;
    top: 8px;
    padding: 0 4px;
    background-color: #fff;
    color: #b8bcbf;
    pointer-events: none;
    transition: all .1s ease;
}

.multiSelect_dropdown.-open + .multiSelect_placeholder,
.multiSelect_dropdown.-open.-hasValue + .multiSelect_placeholder {
    top: -15px;
    left: 17px;
    color: #adaca7;
    font-size: 13px;
}

.multiSelect_dropdown.-hasValue + .multiSelect_placeholder {
    top: -15px;
    left: 17px;
    color: #6e7277;
    font-size: 13px;
}

.input-group {
  display: flex;
  align-items: center;
  position: relative;
  background: #fff;
  border: 2px solid #e6ece8;
  border-radius: 6px;
  padding: 0 16px;
  height: 48px;
  min-width: 340px;
  margin-right: 16px;
  box-sizing: border-box;
  transition: border-color 0.2s;
	width:18vw
}

.input-group:focus-within {
  border-color: #10b981;
}

.input-group .icon {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.input-group .icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.input-field {
  border: none;
  background: transparent;
  font-size: 16px;
  color: #222;
  padding: 0 24px 0 0;
  height: 48px;
  min-width: 120px;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.input-field:focus {
  outline: none;
}

.input-group .dropdown-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #10b981;
}

.input-group select::-ms-expand {
  display: none;
}

.input-group select[multiple] {
  background: transparent;
  height: 48px;
  overflow: hidden;
}

.multiSelect {
  flex: 1;
  display: flex;
  align-items: center;
	justify-content: start;
	margin-top:0px;
}

.multiSelect_choice{
background: #f4f4f5;
    color: #444f5b;
    padding: 4px 4px;
    line-height: 17px;
    margin: 2px;
    display: inline-block;
    font-size: 12px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 500;
	display:flex;
	align-items: center;
}

.input-group select:disabled {
  color: #aaa;
}

.input-group select option {
  color: #222;
  background: #fff;
}

.input-group select:focus {
  outline: none;
}

.input-group select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media (max-width: 600px) {
  .input-group {
    min-width: 140px;
    padding: 0 8px;
    height: 40px;
  }
  .input-field {
    font-size: 14px;
    height: 40px;
  }
}

.multiSelect_dropdown{
	border:none;
	width: 100%
}

.multiSelect_dropdown:focus,
.multiSelect_dropdown.-open:focus {
    outline: none;
}

.multiSelect{
	margin-top:0px;
}

.singleSelect {
    width: 300px;
    position: relative;
	display:flex;
	align-items:center;
}

.singleSelect *, .singleSelect *::before, .singleSelect *::after {
    box-sizing: border-box;
}

.singleSelect_dropdown {
   
    min-height: 100%;

    border-radius: 4px;
  
    background-color: #fff;
    color: #444f5b;

    margin: 0;
   
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    align-items: center;
   border: 2px solid #e6ece8;
	width: 100%
}

.singleSelect_dropdown.-hasValue {
    padding: 0.5px 30px 0.5px 13px;
}

.singleSelect_dropdown.-open {
    box-shadow: none;
    outline: none;
    border: 1.5px solid #e6ece8;
	top: 40;
}

.singleSelect_arrow::before,
.singleSelect_arrow::after {
    content: '';
    position: absolute;
    display: block;
    width: 2px;
    height: 8px;
    border-radius: 20px;
    border-bottom: 8px solid #99A3BA;
    top: 40%;
    transition: all .15s ease;
}

.singleSelect_arrow::before {
    right: 18px;
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
}

.singleSelect_arrow::after {
    right: 13px;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}

.singleSelect_list {
    margin: 0;
    margin-bottom: 25px;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    max-height: calc(10 * 31px);
    top: 28px;
    left: 0;
    z-index: 9999;
    right: 0;
    background: #fff;
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    transition: opacity 0.1s ease, visibility 0.1s ease, -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32), -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    -webkit-transform: scale(0.8) translate(0, 4px);
    transform: scale(0.8) translate(0, 4px);
    border: 1px solid #d9dbde;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);
}

.singleSelect_option {
    margin: 0;
    padding: 0;
    opacity: 0;
    -webkit-transform: translate(6px, 0);
    transform: translate(6px, 0);
    transition: all .15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.singleSelect_option.-selected {
    background-color: rgba(77, 132, 254, 0.1);
}

.singleSelect_option:hover .singleSelect_text {
    color: #fff;
    background: #4d84fe;
}

.singleSelect_text {
    cursor: pointer;
    display: block;
    padding: 5px 13px;
    color: #525c67;
    font-size: 14px;
    text-decoration: none;
    outline: none;
    position: relative;
    transition: all .15s ease;
    flex-grow: 1;
}

.singleSelect_icon {
    margin-left: 13px;
    color: #6e7277;
    width: 16px;
    text-align: center;
}

.singleSelect_list.-open {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1) translate(0, 12px);
    transform: scale(1) translate(0, 12px);
    transition: opacity 0.15s ease, visibility 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32), -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
	top:40px
}

.singleSelect_list.-open + .singleSelect_arrow::before {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
}

.singleSelect_list.-open + .singleSelect_arrow::after {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
}

.singleSelect_list.-open .singleSelect_option {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.singleSelect_list.-open .singleSelect_option:nth-child(1) {
  transition-delay: 10ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(2) {
  transition-delay: 20ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(3) {
  transition-delay: 30ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(4) {
  transition-delay: 40ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(5) {
  transition-delay: 50ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(6) {
  transition-delay: 60ms;
}

.singleSelect_placeholder {
    position: absolute;
    left: 20px;
    font-size: 14px;
    top: 8px;
    padding: 0 4px;
    background-color: #fff;
    color: #b8bcbf;
    pointer-events: none;
    transition: all .1s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.singleSelect_dropdown.-open + .singleSelect_placeholder,
.singleSelect_dropdown.-open.-hasValue + .singleSelect_placeholder {
    top: -11px;
    left: 17px;
    color: #b8bcbf;
    font-size: 13px;
}

.singleSelect_dropdown.-hasValue + .singleSelect_placeholder {
    top: -11px;
    left: 17px;
    color: #6e7277;
    font-size: 13px;
}


	.tabs-wrapper{
		flex-wrap:wrap;
	}
	
	@media
	
	.input-field.has-icon {
		width:15vw;
	}
	#nav-container-div-id{
		max-width:100%;
		display:flex;
		flex-wrap:wrap;
	}
	.detail-btn {
    position: absolute;
    bottom: 34px;
    right: 0;
    width: 120px;
    height: 40px;
    background-color: #17b290;
    color: #fff;
    border: none;
    line-height: 40px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
	}
	
	.detail-btn a{
		color: #fff;
	}
	
	.tour-card{
		gap:15px;
	}
	.tour-card-img{
		width:310px
	}
	
	.nav-tabs{
		border-bottom:none;
	}
	.nav-tabs{
	margin-bottom: 0px;
	}
	
	@media (min-width: 1440px) {
    .cruisetour-container {
        gap: 15px;
    }
}
	
	#selectors-main-div{
		gap: 1vw;
		max-width:63%;
	}

	/* Loader Styles */
	.loader-container {
		display: flex;
		justify-content: center;
		min-height: 0vh;
		width: 100%;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	@media (max-width: 1200px) {
		.circle-loader {
			width: 28px;
			height: 28px;
			border-width: 3.5px;
		}
	}
	@media (max-width: 900px) {
		.circle-loader {
			width: 22px;
			height: 22px;
			border-width: 3px;
		}
	}
	@media (max-width: 600px) {
		.circle-loader {
			width: 18px;
			height: 18px;
			border-width: 2.5px;
		}
	}
	@media (max-width: 400px) {
		.circle-loader {
			width: 14px;
			height: 14px;
			border-width: 2px;
		}
	}
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}



.content-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.circle-loader {
    border: 4px solid #e0f7f1;
		border-top: 4px solid #19c197;
		border-right: 4px solid #19c197;
		border-bottom: 4px solid #e0f7f1;
		border-left: 4px solid #b2dfd5;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		animation: spin 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
		box-shadow: 0 2px 8px 0 rgba(25,193,151,0.10);
		background: linear-gradient(135deg, #f8fffc 60%, #e0f7f1 100%);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.content-wrapper {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.content-wrapper.loaded {
    opacity: 1;
}
.detail-btn a:hover {
    color: white;
}