@media (max-width: 1400px) {
    section.featured-pro .pro-cont {
        padding:var(--p20) var(--p15)
    }
}

@media (max-width: 1366px) {
    .search-bar form {
        width:96%
    }

    section.featured-pro .pro-cont::before {
        transform: skewY(-3deg);
        top: -44px
    }

    section.featured-pro .pro-cont::after {
        top: -53px;
        transform: skewY(-3deg)
    }

    section.featured-pro .icon-box {
        bottom: 3px;
        left: 15px
    }
}

@media (max-width: 1024px) and (min-width:981px) {
    .search-bar .col-3 {
        padding-left:var(--p5)
    }

    .search-bar button.main-btn {
        font-size: var(--f14)
    }

    .search-bar form {
        width: 99%
    }

    div#guestsss {
        min-width: 240px
    }

    section.featured-pro .col-md-4 {
        flex: 0 0 auto;
        width: 50%
    }
}

@media (max-width: 980px) {
    .search-bar input,.search-bar select {
        line-height:34px;
        font-weight: 400;
        background: #f5f5f5
    }

    .search-bar .col-3,.search-bar .main-check {
        padding-left: var(--p6);
        padding-right: var(--p6);
        padding-top: 0
    }

    .search-bar,.search-bar form {
        position: relative;
        width: 100%
    }

    .search-bar form {
        bottom: 0;
        margin-top: var(--m20);
        padding: var(--p20)
    }

    .search-bar input {
        border-radius: 0;
        padding: var(--p12) var(--p22) var(--p11) var(--p48);
        border: 1px solid #e0e0e0
    }

    .search-bar .form-control:focus {
        background-color: #f5f5f5!important;
        border-color: #e0e0e0!important
    }

    .search-bar .check.right:before,.search-bar .col-3:before {
        display: none
    }

    .search-bar i {
        top: 1.2rem;
        font-size: var(--f18);
        left: 25px;
        right: auto
    }

    .search-bar select {
        height: 59px;
        width: 100%;
        border-radius: 0;
        padding: var(--p12) var(--p22) var(--p11) var(--p12);
        border: 1px solid #e0e0e0;
        text-indent: 32px
    }

    .search-bar .col-3 {
        width: 100%;
        margin-bottom: var(--m20);
        padding-bottom: 0
    }

    .search-bar .col-3.md-12.sm-12.srch-btn {
        width: 100%;
        margin-bottom: 0;
        padding-left: var(--p6)
    }

    .search-bar .main-check {
        padding-bottom: var(--p20);
        width: 100%
    }

    input#demo17 {
        height: 59px!important
    }

    section.featured-pro {
        padding: var(--p50) var(--p12)
    }

    .search-bar .check.left input#start_date {
        border-right: 0px solid
    }

    .search-bar .check.right input#end_date {
        border-left: 0 solid
    }

    .search-bar .check:before {
        top: 23px
    }

    .search-bar .check i {
        top: 1.2rem;
        left: 20px
    }

    .search-bar input#end_date {
        padding-left: 48px
    }

    .search-bar {
        top: 0
    }

    section.featured-pro .col-md-4 {
        flex: 0 0 auto;
        width: 100%
    }

    section.featured-pro img.img-fluid {
        /* height: 350px; */
    }

    section.featured-pro .row {
        gap: 30px 0
    }

    a.sticky.main-btn {
        display: block
    }

    section.featured-pro .pro-cont p {
        height: auto
    }

    section.featured-pro .pro-cont::before {
        transform: skewY(-2deg);
        /* top:-43px; */
    }

    section.featured-pro .pro-cont::after {
        top: -52px;
        transform: skewY(-2deg)
    }

    section.featured-pro .icon-box {
        bottom: -1px
    }
}

@media (max-width: 540px) {
    section.featured-pro .pro-cont {
        padding: 0;
    }

    .search-bar .datepicker-common-2 {
        padding: 0;
        width: 100%
    }

    .search-bar .main-check {
        padding-left: var(--p6);
        padding-right: var(--p6)
    }

    .search-bar .check.right input#end_date {
        border-left: 1px solid #e0e0e0;
        margin-bottom: 20px
    }

    .search-bar .check.left input#start_date {
        border-right: 1px solid #e0e0e0;
        margin-bottom: 20px
    }

    .search-bar .check:before {
        display: none
    }

    input#demo17 {
        height: 138px!important
    }

    .search-bar .col-3 {
        width: 100%;
        margin-bottom: var(--m20)
    }

    .search-bar select {
        text-indent: 30px
    }

    .search-bar button.main-btn {
        height: 59px
    }

    .search-bar {
        bottom: -430px;
        z-index: 2
    }

    .datepicker__inner {
        padding: 10px!important
    }

    section.featured-pro {
        padding: var(--p40) var(--p12)
    }

    section.featured-pro .col-md-4 {
        flex: 0 0 auto;
        width: 100%;
        padding: 0
    }

    section.featured-pro img.img-fluid {
        height: 300px
    }

    section.featured-pro h5 span {
        font-size: var(--f22)
    }

    section.featured-pro h3.title {
        font-size: var(--f20);
        /* height: 27px; */
        margin-top:30px;
    }

    a.sticky.main-btn {
        transform: rotate(0);
        position: fixed;
        width: 100%;
        text-align: center;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0
    }
}

@media (max-width: 400px) {
    section.featured-pro ul {
        padding:var(--p20) var(--p10) var(--p15)
    }
}

@media (max-width: 380px) {
    section.featured-pro h5 span {
        font-size:var(--f21)
    }
}

@media (max-width: 360px) {
    section.featured-pro ul li {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px
    }

    section.featured-pro i {
        margin-right: 0
    }

    section.featured-pro .adr i {
        margin-right: var(--m5)
    }

    section.featured-pro img.img-fluid {
        height: 250px
    }
}

@media (max-width: 320px) {
    .search-bar form {
        padding:var(--p20) var(--p10)
    }

    section.featured-pro h3.title {
        font-size: var(--f19);
        height: 27px
    }
}