// .homepage-hero-area
.homepage-hero-area{
    &.banner-area {
        height: 250px;
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: end;
        color: #fff;
        position: relative;
        h1 {
            position: relative;
            z-index: 3;
            margin-bottom: 60px;
        }
        &:after{
            background: #000000f2;
        }
    }
}

// .featured-area
.featured-area{
    &.listing-area{
        .fiter-btn {
            border: 1px solid #303131;
            padding: 10px 20px;
            border-radius: 100px;
            background: #222428;
            color: #fff;
            cursor: pointer;
            img {
                margin-right: 5px;
                position: relative;
                top: -1px;
            }

        }
        .listing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            @include mmx-desktops{
                grid-template-columns: repeat(2, 1fr);
            }
            @include all-below-mobile-lg{
                grid-template-columns: repeat(1, 1fr);
            }
        }
        .listing-content {
            color: #fff;
            font-size: 18px;
            font-weight: 500;
            background: #222428;
            border-radius: 0 0 16px 16px;
            padding: 18px 12px 10px;
            min-height: 250px;
            span {
                font-weight: 400;
                color: #ffffffcf;
            }
            .price {
                font-size: 20px;
                font-weight: 700;
                color: #fff;
            }
        }
        .single-featured-item {
            .featured-car {
                border-radius: 16px 16px 0 0;
                img {
                    border-radius: 16px 16px 0 0;
                    height: 214px;
                    transition: all .5s ease;
                }
            }
            &:hover {
                .featured-car img {
                    transform: scale(1.1);
                }
            }
        }
    }
}




// .filter-modal
.filter-modal{
    z-index: 9999;
    .close-btn {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }
    .modal-body {
        padding: 30px;
        h2 {
            color: #222428;
        }
        .input-search {
            margin-bottom: 20px;
            i {
                position: absolute;
                left: 16px;
                top: 19px;
            }
            input {
                padding-left: 46px;
                font-size: 16px;
                font-weight: 400;
            }
        }
        .dropdown-search{
            .single-dropdown {
                height: 80px;
                margin-bottom: 10px;
                label {
                    color: #222428;
                    font-size: 16px;
                    font-weight: 400;
                    margin-bottom: 4px;
                }
            }
            .buttons {
                .boxed-btn {
                    background: #000;
                    &.btn2{
                        background: #E8E7E5;
                        color: #0C0F1580;
                        &:before {
                            background: none;
                        }
                    }
                }
            }
        }
    }
    .modal-dialog {
        margin: 50px auto; /* 50px top & bottom margin */
        height: calc(100vh - 100px); /* subtract margin space from full height */
        display: flex;
        flex-direction: column;
        justify-content: center;
        .modal-content {
            height: 100%;
            overflow-y: auto;
        }
    }
    .or {
        text-align: center;
        border-bottom: 1px dashed #0C0C0975;
        margin-bottom: 24px;
        span {
            position: relative;
            width: 40px;
            display: block;
            margin: 0 auto -14px;
            background: #fff;
            text-transform: uppercase;
            font-size: 18px;
            color: #222428C7;
        }
    }
}


// .breadcrumb-area
.breadcrumb-area {
    height: 60px;
    ul{
        li {
            position: relative;
            margin-right: 6px;
            padding-right: 16px;
            font-size: 16px;
            &:hover a{
                color: $accent;
            }
            &:after {
                position: absolute;
                right: 0;
                top: 0;
                content: "/";
                width: 10px;
                height: 10px;
            }
            &:last-child:after {
                content: "";
            }
        }
    }
}