/*----------------------------------------------------------------------------------- 

Template Name: Bistly - Restaurant & Cafe HTML Template
URI: pixelfit.agency
Description: Bistly is a clean, modern, and fully responsive HTML template designed specifically for restaurants, cafes, bakeries, coffee shops, and food-related businesses. Crafted with attention to detail and built using the latest web technologies, Bistly ensures an exceptional user experience on all devices.
Author: Pixelfit
Author URI: https://themeforest.net/user/pixelfit
Version: 1.0 


------------------------------------------------------
   CSS INDEX
-----------------------------------------------------

    # Common CSS
    # Page Banner CSS
    # About Page CSS
    # Menu Grid Page CSS
    # Menu List Page CSS
    # Shop Page CSS
    # Shop Details Page CSS
    # Cart Page CSS
    # Checkout Page CSS
    # Team Page CSS
    # Gallery Page CSS
    # Blog Page CSS
    # Blog Details Page CSS
    # Contact Page CSS
    # 404 Page CSS
    
-------------------------------------------------------    */

/* Common CSS */ 

@import "../abstract";

/* Page Banner */

.page-banner{
    padding: 220px 0 160px;
    @include respond(md){
        padding: 170px 0 120px;
    }
    &:after{
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 100%;
        background-color: rgba(45, 68, 67, 0.80);
        z-index: -1;
    }
    & .page-content{
        & h1{
            color: $white-color;
            margin-bottom: 15px;
            @include respond(md){
                font-size: 42px;
                line-height: 1;
            }
        }
        & ul{
            & li{
                display: inline-block;
                color: $white-color;
            }
        }
    }
}

.bistly-iconic-box{
    display: flex;
    align-items: center;
    & .icon{
        flex: 0 0 auto;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        border: 1px solid $primary-color;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: $primary-color;
        margin-right: 15px;
    }
    & .content{
        & h5{
            @include respond(md){
                font-size: 18px;
            }
        }
    }
}

/* About Page CSS */

.bistly-about-sec{
    & .bistly-content-box{
        padding-inline-end: 50px;
        @include respond(xl){
            padding-inline-end: 0;
        }
        & .section-title{
            max-width: 550px;
        }
        & p{
            max-width: 630px;
        }
        & .gallery-slider-wrap{
            & .gallery-slider{
                margin-inline-start: -50%;
                @include respond(xl){
                    margin-inline-start: 0;
                }
                & .slick-slide{
                    margin-inline-end: 30px;
                    @include respond(md){
                        margin-inline-end: 12px;
                    }
                }
            }
            & .gallery-item{
                & .thumbnail{
                    & img{
                        width: 100%;
                    }
                }
            }
        }
    }
    & .bistly-image{
        & img{
            border-radius: 400px 400px 0px 0px;
        }
    }
}

.bistly-fun-fact{
    & .counter-item-wrapper{
        & .counter-item-border{
            &:not(:last-child){
                border-right: 1px solid rgba(208, 150, 92, 0.30);
                @include respond(md){
                    border-right: none;
                    border-bottom: 1px solid rgba(208, 150, 92, 0.30);
                    padding-bottom: 25px;
                    margin-bottom: 25px;
                }
            }
        }
    }
}

.bistly-counter-item{
    & .icon{
        color: $primary-color;
        font-size: 55px;
        margin-bottom: 20px;
    }
    & .content{
        & h2{
            margin-bottom: 12px;
        }
    }
}

.bistly-features-sec{
    background-color: $primary-black-color;
    & .bistly-content-box{
        & .bistly-button{
            & .theme-btn{
                &.style-one{
                    &:hover{
                        background-color: $white-color;
                        color: $heading-color;
                    }
                }
            }
        }
    }
    & .bistly-image{
        & img{
            border-radius: 400px 400px 0px 0px;
        }
    }
}

.bistly-intro-sec{
    &:after{
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: rgba(0, 0, 0, 0.70);
    }
    & .bistly-content-box{
        & .video-popup{
            width: 110px;
            height: 110px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.10);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: $white-color;
        }
        & h2{
            color: $white-color;
            @include respond(lg){
                font-size: 48px;
                line-height: 60px;
            }
            @include respond(md){
                font-size: 32px;
                line-height: 45px;
            }
        }
    }
}

.rs-testimonial{
    background-color: $primary-black-color;
}

.testimonial-slider{
    & .slick-arrow{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 50px;
        color: $primary-color;
        cursor: pointer;
        &.next{
            right: -15%;
        }
        &.prev{
            left: -15%;
        }
    }
}

.bistly-testimonial-item{
    text-align: center;
    & .testimonial-content{
        & .ratings{
            margin-bottom: 20px;
            & i{
               color: #FF9F1A;
            }
        }
        & p{
            font-size: 32px;
            line-height: 50px;
            color: $white-color;
            font-family: $heading-font;
            margin-bottom: 25px;
            @include respond(md){
                font-size: 20px;
                line-height: 30px;
            }
        }
        & span{
            color: $white-color;
        }
    }
}


.bistly-blog-post{
    & .post-content{
        padding-top: 25px;
        & .post-meta{
            & span{
                margin-bottom: 10px;
                &:not(:last-child){
                    margin-right: 25px;
                }
                & i{
                    margin-right: 10px;
                }
            }
        }
        & h4{
            margin-bottom: 25px;
            border-bottom: 1px solid $border-color;
            padding-bottom: 25px;
            &:hover{
                color: $primary-color;
            }
        }
        & .read-more{
            &.style-one{
                &:hover{
                    color: $primary-color;
                }
            }
        }
    }
}

.bistly-instagram-item{
    &:hover{
        & .thumbnail{
            & .hover-content{
                visibility: visible;
                opacity: 1;
                & .icon{
                    transform: translateY(0);
                }
            }
        }
    }
    & .thumbnail{
        position: relative;
        overflow: hidden;
        & .hover-content{
            position: absolute;
            top: 0;
            left: 0;
            width:  100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(45, 68, 67, 0.502);
            visibility: hidden;
            opacity: 0;
            transition: all .3s;
            & .icon{
                color: $white-color;
                font-size: 20px;
                transform: translateY(20px);
                transition: all .35s;
            }
        }
    }
}

/* Menu Grid Page CSS */

.rs-booking{
    &:after{
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 100%;
        background-color: rgba(45, 68, 67, 0.50);
        z-index: -1;
    }
}

.bistly-product-item{
    &:hover{
        & .product-thumbnail{
            & img{
                transform: scale(1.1);
            }
            & .hover-overlay{
                visibility: visible;
                opacity: 1;
                & .action-button{
                    transform: translateY(0px);
                }
            }
        }
    }
    & .product-thumbnail{
        position: relative;
        z-index: 1;
        overflow: hidden;
        & img{
            width: 100%;
            transform: scale(1);
            transition: all .35s;
        }
        & .hover-overlay{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding: 20px;
            visibility: hidden;
            opacity: 0;
            transition: all .3s;
            & .action-button{
                transform: translateY(-40px);
                transition: all .35s;
                & a{
                    margin-left: 2.5px;   
                    margin-right: 2.5px;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 18px;
                    background-color: $white-color;
                    &:hover{
                        background-color: $primary-color;
                        color: $white-color;
                    }
                }
            }
        }
    }
    & .product-info{
        padding-top: 25px;
        & .ratings-price{
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            & .ratings{
                & i{
                    color: $primary-color;
                }
            }
            & .price{
                color: #FF4040;
                font-size: 20px;
                font-weight: 600;
            }
        }
        & h4{
            margin-bottom: 10px;
            &:hover{
                color: $primary-color;
            }
        }
        & h3{
            margin-bottom: 8px;
        }
    }
}

/* Menu List Page CSS */ 


.bistly-menu-list-item{
    display: flex;
    align-items: center;
    width: 100%;
    @include respond(md){
        flex-direction: column;
        align-items: flex-start;
    }
    & .thumbnail{
        flex: 0 0 auto;
        width: 150px;
        margin-right: 30px;
        @include respond(md){
            margin-bottom: 20px;
        }
    }
    & .content{
        width: 100%;
        & h4{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            @include respond(xl){
                font-size: 18px;
                margin-bottom: 5px;
            }
            &:hover{
                color: $primary-color;
            }
            & span{
                float: right;
                color: #FF4040;
                font: 600 24px $body-font;
                line-height: 1;
                @include respond(xl){
                    font-size: 18px;
                }
            }
        }
        & p{
            line-height: 27px;
            margin-bottom: 10px;
            max-width: 330px;
            @include respond(xl){
                font-size: 14px;
            }
        }
        & .ratings{
            & i{
                color: #FF9F1A;
            }
        }
    }
}

/* Shop Page CSS */ 

.bistly-shop-sec{
    & .product-search{
        & .form-group{
            max-width: 300px;
            margin-inline-start: auto;
            & .form_control{
                padding: 13px 20px;
                width: 100%;
                border: 1px solid $border-color;
                background-color: $gray-color;
            }
            & .submit-btn{
                position: absolute;
                bottom: 13px;
                right: 20px;
                background-color: transparent;
                color: $primary-black-color;
                font-size: 24px;
            }
        }
    }
}


/* Shop Details Page CSS */ 


.bistly-shop-details-sec{
    & .shop-details-wrapper{
        & .product-thumb-slider{
            margin-left: -8px;
            margin-right: -8px;
            margin-top: 20px;
            & .slick-slide{
                margin-left: 8px;
                margin-right: 8px;
                cursor: pointer;
            }
        }
        & .product-img{
            & a{
                display: block;
            }
            img{
                width: 100%;
            }
        }
        & .product-info{
            padding-left: 70px;
            @include respond(xl){
                padding-left: 0;
            }
            & .ratings{
                margin-bottom: 15px;
                & i{
                    color: #FF9F1A;
                }
                & a{
                    font-weight: 600;
                }
            }
            & h4.title{
                font-size: 45px;
                margin-bottom: 20px;
                @include respond(md){
                    font-size: 22px;
                    line-height: 35px;
                }
            }
            & .price{
                font-size: 24px;
                color: #FF4040;
                font-weight: 600;
                padding-bottom: 20px;
                border-bottom: 1px solid $border-color;
                margin-bottom: 25px;
            }
            & p{
                margin-bottom: 30px;
                & a{
                    color: $primary-color;
                }
            }
            & .product-cart-variation{
                & ul{
                    display: inline-flex;
                    flex-wrap: wrap;
                    align-items: center;
                    gap: 0 15px;
                    & li{
                        margin-bottom: 15px;
                    }
                }
                & .quantity-input{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: #F6F7F7;
                    width: 150px;
                    margin: 0 auto;
                    & input{
                        width: 50px;
                        height: 45px;
                        border: none;
                        text-align: center;
                        background-color: #F6F7F7;
                    }
                    & button{
                        width: 50px;
                        height: 45px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: transparent;
                    }
                }
            }
            & .action-button{
                margin-bottom: 30px;
                padding-bottom: 25px;
                border-bottom: 1px solid $border-color;
                & a{
                    &:not(:last-child){
                        margin-right: 20px;
                    }
                    & i{
                        margin-right: 10px;
                    }
                }
            }
            & .product-meta{
                margin-bottom: 28px;
                & .title{
                    font-weight: 700;
                    color: $heading-color;
                }
            }
            & .category{
                & span{
                    & a{
                        color: $text-color;
                        margin-inline-start: 5px;
                        font-weight: 400;
                    }
                }
            }
            & .social-box{
                & span{
                    font-weight: 600;
                    color: $heading-color;
                    margin-right: 20px;
                }
                & a{
                    width: 36px;
                    height: 36px;
                    border: 1px solid $border-color;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    font-size: 14px;
                    &:hover{
                        background-color: $primary-color;
                        color: $white-color;
                    }
                    &:not(:last-child){
                        margin-right: 5px;
                    }
                }
            }
            & .check-list{
                & li{
                    & i{
                        color: $primary-black-color;
                        font-size: 22px;
                    }
                }
            }
        }
    }
}

.product-description-info{
    padding-top: 120px;
    @include respond(xl){
        padding-top: 60px;
    }
    & .bistly-tabs{
        & .nav-tabs{
            border-bottom: none;
        }
        & li{
            margin-right: 10px;
        }
        & .nav-link{
            border-radius: 0;
            padding: 11px 30px;
            font-size: 18px;
            border: 1px solid $border-color;
            color: $text-color;
            background-color: #F3F5F5;
            letter-spacing: 0.1em;
            &.active{
                color: $white-color;
                background-color: $primary-black-color;
            }
            @include respond(md){
                padding-right: 10px;
                font-size: 16px;
            }
        }
    }
    & .tab-content{
        background-color: #F3F5F5;
        padding: 23px 30px;
        @include respond(md){
            padding: 23px 15px;
        }
    }
}
.bistly-review-area{
    background-color: #F3F5F5;
    padding: 30px;
    @include respond(md){
        padding: 30px 15px;
    }
    & .bistly-reviews-list{
        & .review-item{
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid $border-color;
            @include respond(md){
                flex-direction: column;
            }
            & .author-thumb{
                flex: 0 0 auto;
                width: 80px;
                margin-right: 20px;
                @include respond(md){
                    margin-bottom: 20px;
                }
                & img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            & .author-ratings-wrap{
                align-items: center;
                @include respond(md){
                    flex-direction: column;
                    align-items: flex-start;
                }
                & .author-info{
                    & h4{
                        font-family: $body-font;
                    }
                    & .position{
                        margin-bottom: 10px;
                    }
                }
                & .ratings{
                    & i{
                        color: var(--rating-color);
                    }
                }
            }
        }
    }
}

.bistly-form-area{
    & h3{
        margin-bottom: 20px;
    }
    & form{
        & .ratings{
            margin-bottom: 20px;
            & i{
                color: var(--rating-color);
            }
        }
        & label{
            margin-bottom: 10px;
        }
        & .form_control{
            margin-bottom: 22px;
            padding: 12px 20px;
            background-color: #FBFBFB;
            border: 1px solid #F3F5F5;
        }
    }
}

.related-product-slider{
    margin-left: -15px;
    margin-right: -15px;
    @include respond(lg){
        margin-left: -12px;
        margin-right: -12px;
    }
    & .slick-slide{
        margin-left: 15px;
        margin-right: 15px;
        @include respond(lg){
            margin-left: 12px;
            margin-right: 12px;
        }
    }
}

/* Cart Page CSS */ 

.quantity-cart{
    & .quantity-input{
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid $border-color;
        width: 150px;
        margin: 0 auto;
        & input{
            width: 50px;
            height: 45px;
            border: none;
            border-left: 1px solid $border-color;
            border-right: 1px solid $border-color;
            text-align: center;
        }
        & button{
            width: 50px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
        }
    }
}
.cart-wrapper{
    & .cart-table{
        & table{
            @include respond(lg){
                min-width: 900px
            }
            & thead{
                & tr{
                    & th{
                        background-color: $gray-color;
                    }
                }
            }
            & th{
                &.remove,
                &.sub-total,
                &.price,
                &.quantity{
                    text-align: center;
                }
            }
            & td{
                padding: 30px 0px;
                vertical-align: middle;
                & .cart-remove,
                & .total-price,
                & .price{
                    text-align: center;
                    color: $heading-color;
                    font-weight: 600;
                }
            }
            & .product-thumb-item{
                display: flex;
                align-items: center;
                & .product-thumbnail{
                    flex: 0 0 auto;
                    width: 60px;
                    margin-right: 20px;
                }
                & .product-info{
                    & h6.title{
                        color: #0A0B0C;
                    }
                }
            }
            & .cart-remove{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(255, 64, 64, 0.10);
                cursor: pointer;
                & i{
                    color: #FF4040;
                }
            }
        }
    }
    & .cart-bottom{
        & .cart-coupon{
            flex-grow: 1;
            margin-right: 20px;
            & .form_control{
                background-color: $gray-color;
                border: 1px solid #F3F5F5;
                padding: 12px 30px;
                margin-bottom: 20px;
            }
            & a{
                font-size: 18px;
                color: $primary-black-color;
                margin-inline-start: 20px;
            }
        }
    }
}
.cart-total-area{
    & .checkout-button{
        & .theme-btn{
            width: 100%;
        }
    }
}
.cart-total-box{
    background-color: $gray-color;
    border: 1px solid $border-color;
    & h3{
        margin-bottom: 10px;
        padding: 20px 25px;
        border-bottom: 1px solid $border-color;
    }
    & .cart-list{
        padding: 20px 25px 10px;
        & li{
            padding-bottom: 25px;
            & .list-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 700;
                font-size: 18px;
                color: $heading-color;
                & .item-title{
                    font-weight: 400;
                }
            }
            &:last-child{
                border-top: 1px solid $border-color;
                padding-top: 25px;
                & .list-item{
                    & .item-title{
                        color: $heading-color;
                        font-weight: 600;
                    }
                    & .total-price{
                        color: #FF4040;
                    }
                }
            }
        }
    }
    & .checkout-button{
        text-align: right;
    }
}

/* Checkout Page CSS */ 

.bistly-billing-wrapper{
    padding-right: 50px;
    & .billing-wrapper{
        & form{
            & .nice-select,
            & .form_control{
                padding: 11px 20px;
                background-color: $gray-color;
                border: 1px solid $border-color;
                margin-bottom: 22px;
            }
            & .nice-select{
                line-height: 30px;
                &:after{
                    position: absolute;
                    top: 12px;
                    right: 20px;
                }
            }
            & label{
                margin-bottom: 10px;
            }
        }
    }
    & .place-order{
        & .theme-btn{
            width: 100%;
        }
    }
}
.billing-sidebar{
    & .checkout-total-box{
        background-color: $gray-color;
        & h4{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid $border-color;
            margin-bottom: 20px;
            padding: 30px 25px;
        }
        & ul{
            padding: 0 20px 20px;
            & li{
                padding-bottom: 25px;
                &:not(:last-child){
                    border-bottom: 1px solid $border-color;
                    padding: 20px 0;
                }
                & .list-item{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-weight: 700;
                    font-size: 18px;
                    color: $heading-color;
                    & .item-title{
                        font-weight: 400;
                    }
                }
                &:last-child{
                    border-top: 1px solid $border-color;
                    padding-top: 25px;
                    & .list-item{
                        & .item-title{
                            color: $heading-color;
                            font-weight: 600;
                        }
                        & .total-price{
                            color: #FF4040;
                        }
                    }
                }
            }
        }
    }
}

.payment-method{
    & .form-check{
        padding-left: 0;
        margin-bottom: 25px;
        & p{
            margin-bottom: 27px;
        }
    }
    & .form-check-label{
        width: 100%;
        padding: 10px 20px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        cursor: pointer;
        font-weight: 500;
        color: $heading-color;
        background-color: $gray-color;
        border: 1px solid rgba(17, 34, 28, 0.10);
        border-radius: 0;
        & .form-check-input{
            margin-inline-start: 0;
            margin-top: 0;
            margin-right: 10px;
        }
    }
    & .form-check-label[aria-expanded=true]{
        background-color: $primary-black-color;
        color: $white-color;
        & .form-input-radio{
            &:checked{
                border-color: $white-color;
                &:after{
                    background-color: $white-color;;
                }
            }
        }
    }
    & p{
        margin-bottom: 32px;
        & a{
            color: $heading-color;
        }
    }
}
.payment-form{
    & label{
        margin-bottom: 10px;
        font-weight: 500;
        color: $heading-color;
    }
    & .pay{
        position: absolute;
        right: 20px;
        bottom: 15px;
    }
    & .nice-select,
    & .form_control{
        background-color: $gray-color;
        border: 1px solid #EAECEC;
        padding: 17px 20px;
        line-height: 1;
        margin-bottom: 17px;
    }
    & .nice-select{
        padding: 18px 20px;
        line-height: 17px;
        &:after{
            position: absolute;
            right: 20px;
        }
    }
}
/* Team Page CSS */ 

.rs-team{
    & .text-box{
        & p{
            font-size: 20px;
            line-height: 35px;
        }
    }
}
.rs-team-item{
    & .member-image{
        & img{
            transition: all .3s;
        }
    }
    &:hover{
        & .member-image{
            & img{
                border-radius: 300px 300px 0px 0px;
            }
        }
    }
}

/* Gallery Page CSS */ 

.bistly-gallery-sec{
    & .container-fluid{
        padding-left: 30px;
        padding-right: 30px;
    }
}
.bistly-gallery-item{
    & .gallery-img{
        & img{
            width: 100%;
        }
    }
}

/* Blog Page CSS */ 

.bistly-blog-sec{
    & .text-box{
        & p{
            font-size: 20px;
            line-height: 35px;
        }
    }
}

/* Blog Details Page CSS */ 

.blog-details-wrapper{
    & .blog-post{
        & .content{
            & .post-meta{
                & span{
                    &:not(:last-child){
                        margin-right: 20px;
                    }
                    & i{
                        margin-right: 10px;
                    }
                }
            }
            & h4{
                font-size: 48px;
                line-height: 65px;
                margin-bottom: 30px;
                @include respond(xl){
                    font-size: 24px;
                    line-height: 35px;
                }
            }
            & .author-meta{
                margin-bottom: 40px;
                & img{
                    margin-right: 10px;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
                & span{
                    & a{
                        font-weight: 700;
                    }
                }
            }
            & figure{
                margin-bottom: 60px;
            }
            & > p{
                margin-bottom: 40px;
            }
            & .content-box{
                padding-right: 50px;
                @include respond(xl){
                    padding-right: 0;
                }
                & h4{
                    max-width: 740px;
                }
                & p{
                    max-width: 740px;
                    margin-bottom: 30px;
                }
            }
            & .bistly-image{
                & img{
                    border-radius: 310px 310px 0 0;
                }
            }
            & .bistly-content-box{
                padding-left: 100px;
                @include respond(xxxl){
                    padding-left: 50px;
                }
                @include respond(lg){
                    padding-left: 0;
                }
                & p{
                    margin-bottom: 30px;
                }
                & .check-list{
                    &.style-one{
                        & li{
                            &:not(:last-child){
                                margin-bottom: 30px;
                            }
                        }
                    }
                }
            }
            & blockquote{
                padding: 50px 50px 47px;
                background-color: $primary-black-color;
                display: flex;
                @include respond(md){
                    flex-direction: column;
                }
                & .icon{
                    flex: 0 0 auto;
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    border: 1px solid $primary-color;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: $primary-color;
                    font-size: 40px;
                    margin-right: 30px;
                    @include respond(md){
                        margin-bottom: 25px;
                    }
                }
                & h3{
                    color: $white-color;
                    margin-bottom: 20px;
                    @include respond(lg){
                        font-size: 22px;
                        line-height: 35px;
                    }
                }
                & h5{
                    color: $white-color;
                    font-family: $body-font;
                    font-weight: 400;
                }
            }
        }
    }
}

.bistly-iconic-box-two{
    display: flex;
    align-items: center;
    & .icon{
        flex: 0 0 auto;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #EAECEC;
        font-size: 24px;
        color: $heading-color;
        margin-right: 15px;
    }
    & .content{
        & h5{
            font-family: $body-font;
            @include respond(xxxl){
                font-size: 17px;
                line-height: 27px;
            }
        }
    }
}

.comments-area{
    background-color: $gray-color;
    padding: 40px 50px;
    @include respond(md){
      padding: 30px 30px;  
    }
    & h3{
        margin-bottom: 30px;
    }
    &  .comment{
        position: relative;
        display: flex;
        align-items: flex-start;
        & .comment-avatar{
            margin-right: 20px;
            flex: 0 0 auto;
            width: 80px;
            & img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        & .comment-content{
            & .author-name{
                font-size: 24px;
                font-weight: 500;
                margin-bottom: 15px;
                & span{
                    display: block;
                    font-size: 18px;
                    font-weight: 400;
                }
            }
            & .reply{
                position: absolute;
                top: 0;
                right: 0;
                font-size: 20px;
                font-weight: 500;
                color: $heading-color;
            }
        }
    }
}

.comments-form{
    background-color: $gray-color;
    border: 1px solid #F3F5F5;
    padding: 45px 50px 50px;
    @include respond(md){
      padding: 30px 30px;  
    }
    & h3{
        margin-bottom: 30px;
    }
    & .contact-form{
        & label{
            margin-bottom: 10px;
        }
        & .form_control{
            margin-bottom: 22px;
            padding: 12px 20px;
            background-color: #F6F7F7;
            border: 1px solid #F3F5F5;
        }
    }
}

/* Contact Page CSS */ 


.contact-info-box{
    background-color: $gray-color;
    border-color: 1px solid $border-color;
    padding: 40px 45px;
    & .icon{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: $primary-black-color;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: $white-color;
        font-size: 32px;
        margin-bottom: 15px;
    }
    & .content{
        & h3{
            margin-bottom: 20px;
            @include respond(xl){
                font-size: 20px;
                line-height: 30px;
            }
        }
        & p{
            font-size: 20px;
            line-height: 32px;
        }
    }
}

.map-sec{
    & .map-box{
        & iframe{
            height: 500px;
        }
    }
}


.bistly-contact-sec{
    & .bistly-content-box{
        & .bistly-opening-time{
            margin-top: 35px;
            padding-top: 30px;
            border-top: 1px solid $border-color;
        }
    }
}

.bistly-open-box{
    &  .content{
        & h4{
            margin-bottom: 13px;
        }
        & ul{
            & li{
                display: flex;
                &:not(:last-child){
                    margin-bottom: 7px;
                }
                & span{
                    &.days{
                        font-size: 18px;
                        font-weight: 700;
                        flex: 0 0 auto;
                        width: 95px;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}

.contact-wrapper{
    background-color: $primary-black-color;
    padding: 50px;
    & form{
        & label{
            display: block;
            font-weight: 500;
            color: $white-color;
        }
        & .form_control{
            padding: 10px 20px;
            background-color: #374D4C;
            border: none;
            color: rgba(255, 255, 255, 0.70);
            margin-bottom: 20px;
            &::placeholder{
                color: rgba(255, 255, 255, 0.70);
            }
        }
        & .nice-select{
            color: rgba(255, 255, 255, 0.70);
            border: none;
            background-color: #374D4C;
            padding: 10px 20px;
            margin-bottom: 20px;
            &:after{
                content: '\f107';
                font-family: 'Font Awesome 5 Pro';
                position: absolute;
                top: 10px;
                right: 20px;
                font-size: 22px;
            }
            & .list{
                background-color: #18302e;
                & li{
                    &:hover,
                    &.selected{
                        background-color: #374D4C;
                        color: $white-color;
                    }
                }
            }
        }
        & .theme-btn{
            width: 100%;
            &.style-one{
                &:hover{
                    background-color: $white-color;
                    color: $primary-color;
                }
            }
        }
    }
}

/* 404 Page CSS */ 

.error-content-box{
    & h2{
        @include respond(xl){
            font-size: 50px;
        }
        @include respond(md){
            font-size: 32px;
            line-height: 45px;
        }
        @include respond(sm){
            font-size: 28px;
            line-height: 40px;
        }
    }
}