@media screen and (max-width: 1199.98px) {
    /* margins/paddings */
    .m0-lg {
        margin: 0; 
    }
    .p0-lg {
        padding: 0;
    }
    .mb0-lg {
        margin-bottom: 0;
    }
    .mb10-lg {
        margin-bottom: 10px;
    }
    .mb20-lg {
        margin-bottom: 20px;
    }
    .mb30-lg {
        margin-bottom: 30px;
    }
    .mb40-lg {
        margin-bottom: 40px;
    }
    .mb50-lg {
        margin-bottom: 50px;
    }
    .mb60-lg {
        margin-bottom: 60px;
    }
    .mb70-lg {
        margin-bottom: 70px;
    }
    .mb80-lg {
        margin-bottom: 80px;
    }
    .mb90-lg {
        margin-bottom: 90px;
    }
    .mb100-lg {
        margin-bottom: 100px;
    }
    .featured-brands img,
    .membership-benefits .benefit-bl img,
    .our-values .values-bl img {
        filter: none;
        -webkit-filter: none;
        opacity: 1;
    }
    .plans ul.checklist li {
        height: auto;
        min-height: 80px;
        display: flex;
        align-items: center;
        text-align: left;
    }
    .plans ul.checklist li p {
        display: block !important;
        margin-right: 30px;
    }
    .plans ul.checklist li .ml-auto {
        margin: 0 !important;
        margin-left: auto !important;
    }
}

@media screen and (max-width: 991.98px) {
    /* margins/paddings */
    .m0-md {
        margin: 0;
    }
    .p0-md {
        padding: 0;
    }
    .mb0-md {
        margin-bottom: 0;
    }
    .mb10-md {
        margin-bottom: 10px;
    }
    .mb20-md {
        margin-bottom: 20px;
    }
    .mb30-md {
        margin-bottom: 30px;
    }
    .mb40-md {
        margin-bottom: 40px;
    }
    .mb50-md {
        margin-bottom: 50px;
    }
    .mb60-md {
        margin-bottom: 60px;
    }
    .mb70-md {
        margin-bottom: 70px;
    }
    .mb80-md {
        margin-bottom: 80px;
    }
    .mb90-md {
        margin-bottom: 90px;
    }
    .mb100-md {
        margin-bottom: 100px;
    }
    .benefit-bl {
        padding: 0;
    }
    .testimonials .swiper-button-prev,
    .testimonials .swiper-button-next {
        display: none;
    }
    .nav-pills {
        display: inline-flex;
        width: 100%;
        overflow-x: auto;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
    }
    .nav-pills .nav-link {
        display: inline-block !important;
        white-space: nowrap !important;
        float: left;
        margin: 0 10px 0 0;
    }
    .pricing-plans .pricing-text {
        min-height: 170px;
    }
    .payment ul.steps {
        margin-bottom: 60px;
    }
    .payment ul.steps li {
        margin-right: 40px;
    }
     .account ul.steps {
        margin-bottom: 30px;
    }
    .account ul.steps li {
        margin-right: 0;
    }
}

@media screen and (max-width: 767.98px) {
    /* margins/paddings */
    .m0-sm {
        margin: 0;
    }
    .p0-sm {
        padding: 0;
    }
    .mb0-sm {
        margin-bottom: 0;
    }
    .mb10-sm {
        margin-bottom: 10px;
    }
    .mb20-sm {
        margin-bottom: 20px;
    }
    .mb30-sm {
        margin-bottom: 30px;
    }
    .mb40-sm {
        margin-bottom: 40px;
    }
    .mb50-sm {
        margin-bottom: 50px;
    }
    .mb60-sm {
        margin-bottom: 60px;
    }
    .mb70-sm {
        margin-bottom: 70px;
    }
    .mb80-sm {
        margin-bottom: 80px;
    }
    .mb90-sm {
        margin-bottom: 90px;
    }
    .mb100-sm {
        margin-bottom: 100px;
    }
    header .navbar-nav {
        padding: 20px 0 30px 0;
        border-bottom: 1px solid var(--grey-light3);        
    }
    header .navbar-nav .nav-item {
        margin: 0;
        width: 100%;
        height: 40px;
    }
    header .navbar-nav .nav-item .nav-link,
    header .navbar-nav li.active .nav-link {
        text-align: center !important;
        width: 100%;
        font-size: 18px;
        display: block;
    }
    header .navbar-nav hr {
        width: 60px;
        top: 55px;
        display: none;
    }
    header .navbar-nav .nav-item:nth-child(1):hover~hr,
    header .navbar-nav li:nth-child(1).active~hr {
        width: 60px;
        left: 50%;
        margin-left: -30px;
        margin-top: 0;
        display: block;
    }
    header .navbar-nav .nav-item:nth-child(2):hover~hr,
    header .navbar-nav li:nth-child(2).active~hr {
        width: 60px;
        left: 50%;
        margin-left: -30px;
        margin-top: 40px;
        display: block;
    }
    header .navbar-nav .nav-item:nth-child(3):hover~hr,
    header .navbar-nav li:nth-child(3).active~hr {
        width: 60px;
        left: 50%;
        margin-left: -30px;
        margin-top: 80px;
        display: block;
    }
    header .navbar-nav .nav-item:nth-child(4):hover~hr,
    header .navbar-nav li:nth-child(4).active~hr {
        width: 60px;
        left: 50%;
        margin-left: -30px;
        margin-top: 120px;
        display: block;
    }
    header .navbar-nav .nav-item:nth-child(5):hover~hr,
    header .navbar-nav li:nth-child(5).active~hr {
        width: 60px;
        left: 50%;
        margin-left: -30px;
        margin-top: 160px;
        display: block;
    }
    header .navbar-nav .nav-item:nth-child(6):hover~hr,
    header .navbar-nav li:nth-child(6).active~hr {
        width: 60px;
        left: 50%;
        margin-left: -30px;
        margin-top: 200px;
        display: block;
    }
    .plans ul.checklist li {
        min-height: 60px;
    }
    .plans ul.checklist li p {
        font-size: 16px;
    }
    .hww-bl img {
        width: 130px;
        height: auto;
    }
    .days .arrow {
        position: absolute;
        left: 50%;
        bottom: 100% !important;
        margin-left: -25px;
        text-align: right !important;
    }
    .days .arrow img {
        width: auto;
        height: 90px;
        transform: rotateY(180deg) !important;
    }
    .websitesapps .work-item .video,
    .videos .work-item .video {
        display: none;
    }

    .booking-bl {
        border-radius: 0;
        border: none;
    }
    .booking-bl-info.left {
        background: none;
        border: none;        
    }
    .booking-bl-info, .booking-bl-info.right {
        min-height: auto;
        padding-left: 0; 
        padding-right: 0; 
    }
    .payment ul.steps {
        margin-bottom: 30px;
    }
    .payment ul.steps li {
        margin-right: 20px;
    }
    .payment ul.steps li h1 {
        font-size: 48px;
    }
    .payment ul.steps li h1 span {
        display: none;
        font-size: 16px;
    }
    .payment ul.steps li.active h1 span {
        display: block;
    }
    .login {
        min-height: 600px;
    }
}

@media screen and (max-width: 575.98px) {
    /* headings */
    h1 {
        font-size: 30px;
        line-height: 36px;
    }
    h2 {
        font-size: 24px;
        line-height: 30px;
    }
    h3 {
        font-size: 20px;
        line-height: 26px;
    }
    h4 {
        font-size: 18px;
        line-height: 24px;
    }
    h5 {
        font-size: 16px;
        line-height: 22px;
    }
    h6 {
        font-size: 14px;
        line-height: 20px;
    }
    /* margins/paddings */
    .m0-xs {
        margin: 0;
    }
    .p0-xs {
        padding: 0;
    }
    .mb0-xs {
        margin-bottom: 0;
    }
    .mb10-xs {
        margin-bottom: 10px;
    }
    .mb20-xs {
        margin-bottom: 20px;
    }
    .mb30-xs {
        margin-bottom: 30px;
    }
    .mb40-xs {
        margin-bottom: 40px;
    }
    .mb50-xs {
        margin-bottom: 50px;
    }
    .mb60-xs {
        margin-bottom: 60px;
    }
    .mb70-xs {
        margin-bottom: 70px;
    }
    .mb80-xs {
        margin-bottom: 80px;
    }
    .mb90-xs {
        margin-bottom: 90px;
    }
    .mb100-xs {
        margin-bottom: 100px;
    }
    .featured-brands img {
        width: auto;
        height: 60px;
        opacity: 1;
    }
    .membership-benefits .benefit-bl img {
        width: auto;
        height: 128px;
    }
    .swiper-text, .benefit-bl {
        padding: 0 15px !important;
    }
    .swiper-pricing .swiper-slide {
        width: 220px;
    }
    .featured-brands {
        margin: 0 !important;
    }
    select {
        background-position-x: 95% !important;
    }
    .banner {
        height: 400px;
    }
    .banner-about {
        background-position: 55% 50%;
    }
    #backtotop {
        right: 10px;
        bottom: 10px;
    }
    .hero-home .heading hr {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .container {
        padding-right: 30px;
        padding-left: 30px;
    }
.account ul.steps li {
    display: block;
    float: left;
    width: 33%;
    margin-bottom: 0;
}
.account ul.steps li:last-child {
    margin-bottom: 20px;
}
.account ul.steps li h5 {
    display: block;
    text-align: center;
    font-size: 12px;
}
.account ul.steps li.active h5 {
    color: var(--primary);
}
.account ul.steps li .img {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;    
    margin-right: 0;
}
.account ul.steps li .img img {
    width: auto;
    height: 50px;
}
}