/* --------------media query of 1240px ----------- */
@media (max-width: 1240px) {
    .booking-search {
        height: 300px;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        background-position: 0%;
    }

    .search-tabs .select-items label {
        font-size: 14px;
    }

    .select-menu .select-btn,
    .select-menu2 .select-btn2 {
        font-size: 16px;
    }

    .selected-display {
        font-size: 18px;
    }

    .search-tabs .select-items input {
        font-size: 16px;
    }

    .search-btn a {
        height: 46px;
        width: 46px;
    }

    .select-items>div {
        width: 20%;
    }

    .select-items>div:last-child {
        width: 5%;
    }

    .stepp-inner ul.nav.nav-tabs li:after {
        width: 263px;
    }

    .search-section .hero-section .heading h1 {
        font-size: 36px;
    }

    .sub-heading p {
        font-size: 16px;
        padding-top: 10px;
    }

    .confirm-date-calendar table.ui-datepicker-calendar thead tr th,
    .confirm-date-calendar table.ui-datepicker-calendar tbody tr td {
        height: 32px;
        width: 32px;
    }

    .select-boat-body .row .image-card {
        height: 375px;
        margin-bottom: 30px;
    }

    .boat-name h3 {
        width: 100%;
    }

    .booking-info {
        margin-bottom: 20px;
    }
}

/* ---------------------1024px------------------- */
@media (max-width: 1024px) {
    .boat-name h3 {
        font-size: 28px;
    }

    .search-btn a.ipad-none {
        height: 50px;
        width: 50px;
    }
}

/* --------------------media query of 920px------------- */
@media (max-width: 992px) {

    .search-engine .container-fluid,
    .search-engine-steamboat .container-fluid {
        padding: 0;
    }

    .container,
    .container-md,
    .container-sm {
        max-width: 100%;
    }

    .confirm-date-calendar .ui-datepicker-title {
        font-size: 18px;
    }

    .checkbox-sharing {
        flex-wrap: wrap;
        row-gap: 30px;
    }

    .checkbox-sharing .sharing {
        width: 100%;
    }
}

/* --------------------media query of 920px------------- */
@media (max-width: 920px) {
    .stepp-inner ul.nav.nav-tabs li:after {
        width: 203px;
    }

    .stepper-form {
        padding: 40px 0px;
    }

    .calendar-section {
        left: 0;
    }

    .search-engine .container-fluid,
    .search-engine-steamboat .container-fluid {
        padding: 0px;
    }

    header {
        padding: 20px;
    }

    .select-items>div {
        width: 23%;
    }

    .select-menu2 .options2 {
        left: -200px;
    }

    .room-cards .row {
        margin: 0px;
    }
}

/* -----------media query max-width 820px for calendar css----------- */
@media (max-width: 820px) {

    .calendar-section table.ui-datepicker-calendar thead tr th,
    table.ui-datepicker-calendar tbody tr td {
        height: 30px;
        width: 30px;
    }

    .calendar-section .ui-datepicker-inline {
        gap: 15px;
    }

    .calendar-section .ui-datepicker-group.ui-datepicker-group-first:after {
        right: -4%;
    }

    .calendar-section {
        left: 0%;
        width: 100%;
        top: 0;
        z-index: 999;
    }

    .logo>img {
        height: 40px;
    }

    .boat-name h3 {
        font-size: 22px;
    }

    .booking-form .row,
    .boat-room-info .row,
    .personal-info .row {
        row-gap: 20px;
    }

    .search-engine {
        background-position-y: 0;
        overflow-x: hidden;
    }

    .partners-scroll {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        margin: 0px auto;
    }

    .search-btn a.ipad-none {
        height: 40px;
        width: 40px;
    }
}

/* --------------------media query of 768------------- */
@media (max-width: 768px) {
    .select-items>div:last-child {
        margin-bottom: 0px;
        width: 100%;
        margin-top: 20px;
    }

    .selected-display {
        font-size: 18px;
    }

    .search-tabs .select-items label {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .search-tabs .select-items input {
        font-size: 16px;
        width: 100%;
    }

    .search-detail-wf .stepp-inner ul.nav.nav-tabs li.active a,
    .search-detail-stb .stepp-inner ul.nav.nav-tabs li.active a {
        height: 60px;
        width: 60px;
    }

    span.image-step img {
        height: 30px;
    }

    .stepp-inner ul.nav.nav-tabs li.active:after {
        top: 36%;
    }

    .stepp-inner ul.nav.nav-tabs li:after {
        width: 141px;
    }

    .stepp-inner ul.nav.nav-tabs li:after {
        width: 151px;
    }

    .stepp-inner ul.nav.nav-tabs li.active .step-name {
        font-size: 16px;
        display: block;
    }

    .step-name {
        font-size: 16px;
    }

    .search-tabs {
        border-radius: 20px;
        padding: 20px;
        background: rgb(255 255 255 / 93%);
        z-index: 2;
    }

    .select-items>div {
        width: 20%;
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0px;
        flex-direction: column;
        margin-bottom: 15px;
    }

    .select-menu,
    .select-menu2 {
        padding: 10px 15px;
        border: 1px solid silver;
        border-radius: 50px;
        background-color: #fff;
    }

    .select-items {
        flex-direction: column;
        align-items: start !important;
    }

    .calendar-inputs {
        width: auto;
    }

    .calendar-display {
        width: 100%;
        padding: 8px 15px;
        border: 1px solid silver;
        border-radius: 50px;
        background-color: #fff;
    }

    .select-menu.active .options,
    .select-menu.active2 .options2 {
        left: 0;
        top: 20px;
    }

    .search-section .select-items .location,
    .search-section .select-items .guests,
    .search-section .select-items .arrival-date,
    .search-section .select-items .departure-date {
        position: relative;
        width: 100% !important;
    }

    .search-section .select-items .location:after,
    .search-section .select-items .arrival-date:after,
    .search-section .select-items .departure-date:after {
        content: "";
        background-color: transparent;
    }

    .confirm-date-calendar .ui-datepicker-inline {
        flex-wrap: wrap;
        row-gap: 20px;
    }

    .confirm-date-calendar .ui-datepicker-group {
        width: 100%;
    }

    .search-section .hero-section .heading span.alaska-text:after {
        bottom: -4px;
    }

    .search-section .hero-section .heading span.steamboat-alaska-text:after {
        bottom: -4px;
    }

    .search-booking-tab .check-availability .heading h2 {
        font-size: 20px;
        color: #171414;
        letter-spacing: 1px;
    }

    .search-btn-2 {
        display: block;
    }

    .ipad-none {
        display: none !important;
    }

    .our-partners {
        padding-top: 40px;
        z-index: 1;
        padding-bottom: 40px;
    }

    .sub-heading p {
        display: none;
    }

    .arrow {
        margin-left: 0px;
        margin-right: 0px;
    }

    .search-engine-steamboat {
        position: relative;
    }

    .search-engine-steamboat:after,
    .search-engine-wf:after {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: rgb(23 20 20 / 25%);
        top: 0;
        z-index: 1;
    }

    header {
        padding: 20px;
        z-index: 2;
        position: relative;
    }

    .select-menu2 .options2 {
        left: 0px;
        top: 20px;
    }

    .heading {
        position: relative;
        z-index: 2;
    }

    .stepper-body {
        padding-top: 30px;
    }

    .stepp-inner:after {
        top: 46%;
        left: 4%;
        width: 80%;
    }

    .stepper-form {
        padding: 0;
    }

    div#step1,
    div#step2 .bg-div,
    .recommendation,
    div#step3,
    div#step4,
    .guest-registration {
        padding: 20px;
    }
}

/* ---------- */
@media (max-width: 767px) {
    .sign-content h3 {
        font-size: 40px;
    }

    .stepp .nav-tabs>li a i {
        display: none;
    }

    .signup-logo-header .navbar-toggle {
        margin: 0;
        margin-top: 8px;
    }

    .signup-logo-header .logo_area {
        margin-top: 0;
    }

    .signup-logo-header .header-flex {
        display: block;
    }

    .calendar-section {
        left: 0;
        top: 0;
        z-index: 999;
    }

    .step-name {
        font-size: 16px;
        display: none;
    }

    .booking-search {
        height: 200px;
    }

    .booking-search .main-heading {
        height: calc(100% - 10px);
    }

    .detail-card .payment-info .item span {
        font-size: 16px;
        color: rgb(107, 107, 107);
    }

    .search-section .hero-section {
        height: 100%;
    }
}

/* ------------------media query of 620px------ */
@media (max-width: 620px) {
    .calendar-section .ui-datepicker-group {
        width: 100%;
    }

    .calendar-section .ui-datepicker-inline {
        gap: 15px;
        flex-wrap: wrap;
    }

    .calendar-section .ui-datepicker-group.ui-datepicker-group-first:after {
        background-color: transparent;
    }

    header .social-btn a.contact-btn {
        padding: 7px 15px;
        font-size: 14px;
    }

    header .social-btn a {
        font-size: 14px;
    }

    .search-section .hero-section .heading h1 {
        font-size: 28px;
    }

    .sub-heading p {
        font-size: 14px;
    }

    .search-tabs .select-items label {
        font-size: 16px;
    }

    .select-menu .select-btn,
    .select-menu2 .select-btn2 {
        font-size: 18px;
    }

    .booking-search .main-heading h2 {
        font-size: 1.5rem;
    }

    .stepper-form .confirm-date-section .confirm-date h2 {
        font-size: 22px;
    }

    .stepper-form .confirm-date-section .confirm-date p {
        font-size: 14px;
    }

    span.ui-icon.ui-icon-circle-triangle-w:before,
    span.ui-icon.ui-icon-circle-triangle-e:before {
        height: 14px;
        width: 14px;
    }

    .booking-search {
        background-position-x: 3%;
    }

    .select-boat-body {
        padding: 15px;
    }

    .header .logo img {
        height: 35px;
    }

    .search-detail-wf .header .logo img {
        height: 40px;
    }

    .search-section .hero-section {
        padding-top: 55px;
    }

    .select-boat-body .row .image-card {
        height: 200px;
        margin-bottom: 8px;
    }

    .stepp-inner ul.nav.nav-tabs li:after {
        width: 100px;
    }

    .search-booking-tab {
        margin: 15px auto;
    }

    .search-tabs {
        padding: 15px;
    }

    .select-items>div {
        margin-bottom: 9px;
    }

    .select-items>div:last-child {
        margin-top: 10px;
    }

    .div#step1,
    div#step2 .bg-div,
    .recommendation,
    div#step3,
    div#step4,
    .guest-registration {
        padding: 15px 0px;
        margin-top: 20px;
    }

    .confirm-date-calendar .ui-datepicker-group.ui-datepicker-group-first,
    .confirm-date-calendar .ui-datepicker-group.ui-datepicker-group-last {
        padding: 20px;
    }

    div#confirm-date {
        margin-bottom: 20px;
    }

    .stepper-body {
        padding-top: 15px;
    }

    .boat-name h3 {
        margin-bottom: 0px;
    }

    .capacity span {
        margin-top: 0;
    }

    .checkbox-sharing {
        row-gap: 15px;
    }

    .booking-info p {
        font-size: 16px;
    }

    .checkbox-sharing .sharing .description label {
        font-size: 16px;
    }

    .checkbox-sharing .sharing .check input {
        height: 25px;
    }

    .select-boat-body {
        margin: 15px 0px;
    }

    .search-detail-stb .stepper-form .confirm-date-section .confirm-date h2,
    .search-detail-wf .stepper-form .confirm-date-section .confirm-date h2 {
        font-size: 20px;
    }

    .selected-boat {
        font-size: 16px;
    }

    .search-detail-stb .next-step,
    .search-detail-stb .prev-step,
    .search-detail-wf .next-step {
        font-size: 14px;
        padding: 10px 30px;
    }

    .room-cards .room-aminities {
        margin-top: 0;
    }

    .booking-form .row label,
    .boat-room-info .row label,
    .personal-info .row label {
        font-size: 16px;
        padding-bottom: 8px;
    }

    .booking-form .booking-heading h2,
    .boat-room-info .top-heading h2,
    .personal-info .booking-heading h2 {
        font-size: 18px;
    }

    .booking-form .row,
    .boat-room-info .row,
    .personal-info .row {
        row-gap: 10px;
    }

    .search-detail-stb .room-cards .select-btn {
        margin-top: 15px;
    }

    .booking-form,
    .boat-room-info,
    .personal-info {
        margin-bottom: 15px;
    }

    .room-cards {
        margin-bottom: 5px;
    }

    .booking-search {
        padding: 15px;
    }

    .description-text {
        font-size: 14px;
    }

    .booking-info {
        margin-bottom: 0;
    }

    .booking-form .booking-heading h2,
    .boat-room-info .top-heading h2,
    .personal-info .booking-heading h2 {
        margin-bottom: 10px;
    }

    .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-left {
        gap: 28%;
    }

    .search-detail-stb .confirm-date-calendar .ui-datepicker-title,
    .search-detail-wf .confirm-date-calendar .ui-datepicker-title {
        font-size: 18px;
    }

    .succesfull-information .modal-body .success-icon span {
        font-size: 14px;
    }

    .succesfull-information .modal-body .success-icon h2 {
        font-size: 22px;
    }

    .succesfull-information .modal-footer {
        margin: 5px;
    }

    .succesfull-information .modal-footer .maybe-later-btn,
    .succesfull-information .modal-footer .continue-btn,
    .succesfull-information .modal-body .success-icon p.add-detail-imp {
        font-size: 16px;
    }

    .succesfull-information .modal-body .success-icon span:before {
        content: "";
        position: absolute;
        width: 38px;
        left: -13%;
    }

    .succesfull-information .modal-body .success-icon span:after {
        content: "";
        position: absolute;
        width: 38px;
        right: -13%;
    }
}

/* --------------440px----- */
@media (max-width: 440px) {
    .social-btn a:first-child {
        display: none;
    }

    .search-tabs .select-items input {
        font-size: 16px;
        width: 100%;
    }

    .select-menu .select-btn,
    .select-menu2 .select-btn2 {
        font-size: 16px;
    }

    .select-menu .options .option .option-text,
    .select-menu2 .options2 .option .option-text {
        font-size: 18px;
        color: #333;
    }

    .stepp-inner ul.nav.nav-tabs li:after {
        width: 81px;
    }

    .step-name {
        font-size: 14px;
        display: none;
    }

    .stepp-inner ul.nav.nav-tabs li.active .step-name {
        font-size: 14px;
    }

    .stepp-inner ul.nav.nav-tabs li a {
        height: 40px;
        width: 40px;
    }

    .boat-name h3 {
        font-size: 18px;
    }

    .search-section .hero-section .heading h1 {
        font-size: 20px;
    }

    .search-engine-steamboat {
        background-size: cover;
    }

    .logo>img {
        height: 30px;
    }

    .search-engine-wf .logo>img {
        /* height: 60px; */
        height: 70px;
        position: relative;
        top: 30px;
    }

    .room-cards .room-info h2 {
        font-size: 16px;
    }

    .search-detail-wf .room-cards .select-btn {
        margin-top: 20px;
    }

    .room-cards .row .card {
        height: 350px;
    }

    .succesfull-information .modal-body .success-icon span:before {
        content: none;
    }

    .succesfull-information .modal-body .success-icon span:after {
        content: none;
    }

    .succesfull-information .modal-body .success-icon span {
        font-size: 12px;
    }

    .detail-card .payment-info .item span {
        font-size: 14px;
        color: rgb(107, 107, 107);
    }

    .detail-card .total-payment {
        font-size: 16px;
    }

    .succesfull-information .modal-footer .maybe-later-btn {
        padding: 10px 15px;
    }
}

/* --------------media query of small devices --------------- */
@media (max-width: 360px) {

    .calendar-section table.ui-datepicker-calendar thead tr th,
    table.ui-datepicker-calendar tbody tr td {
        height: 25px;
        width: 25px;
    }

    .search-tabs .select-items label {
        font-size: 12px;
    }

    .select-menu .select-btn,
    .select-menu2 .select-btn2 {
        font-size: 14px;
    }

    .search-tabs .select-items input {
        font-size: 14px;
    }

    .calendar-display img {
        height: 25px;
    }

    .select-menu.active .options,
    .select-menu.active2 .options2 {
        width: 200px;
    }

    .select-menu2 .options2 {
        width: 200px;
    }

    .booking-search .main-heading h2 {
        font-size: 1.5rem;
    }

    .booking-search {
        padding: 10px 0px;
    }

    .confirm-date-calendar table.ui-datepicker-calendar thead tr th,
    .confirm-date-calendar table.ui-datepicker-calendar tbody tr td {
        height: 25px;
        width: 25px;
    }

    .search-detail-wf .confirm-date-calendar table.ui-datepicker-calendar tbody tr td a,
    .search-detail-wf .confirm-date-calendar table.ui-datepicker-calendar tbody tr td span {
        font-size: 12px;
    }

    .search-detail-wf .confirm-date-calendar .ui-datepicker-title {
        font-size: 18px;
    }

    .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-left {
        align-items: center;
    }

    .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-left {
        gap: 18%;
    }

    .stepp-inner ul.nav.nav-tabs li:after {
        width: 36px;
    }

    .search-btn a {
        font-size: 16px;
    }

    .search-detail-wf .stepper-form .confirm-date-section .confirm-date h2 {
        font-size: 18px;
    }

    .search-detail-wf .next-step {
        font-size: 14px;
    }

    .select-boat-body {
        padding: 10px;
    }

    .boat-name h3 {
        font-size: 16px;
    }

    .description-text {
        font-size: 14px;
    }

    .checkbox-sharing .sharing .description label {
        font-size: 14px;
    }

    .selected-boat {
        font-size: 16px;
    }

    .booking-info p {
        color: #1f1d1d;
        text-align: center;
        font-size: 16px;
    }

    div#step1,
    div#step2 .bg-div,
    .recommendation,
    div#step3,
    div#step4,
    .guest-registration {
        padding: 20px 0px;
    }

    .room-cards .room-info h2 {
        font-size: 16px;
    }

    .stepp-inner ul.nav.nav-tabs li.active .step-name {
        font-size: 12px;
    }

    .room-cards .room-aminities span {
        font-size: 12px;
    }

    .booking-form .booking-heading h2,
    .boat-room-info .top-heading h2,
    .personal-info .booking-heading h2 {
        font-size: 16px;
    }
}

@media (min-width: 992px) {
    .calendar-section {
        transform: translate(20%, 0);
    }
}

@media (min-width: 768px) {

    .search-booking-tab .select-items .location,
    .search-booking-tab .select-items .guests,
    .search-booking-tab .select-items .arrival-date,
    .search-booking-tab .select-items .departure-date {
        position: relative;
        width: 20%;
    }
}

@media (max-width: 991px) {
    .tooltip-inner {
        max-width: 100% !important;
        margin: 0 40px;
        background-color: #292929 !important;
        color: #fff;
        text-align: justify !important;
    }
}