.title-header .text {
    color: var(--color-6);
    font-size: var(--font14);
}

.title-header .text-2 {
    color: var(--color-6);
    font-size: var(--font16);
}

.title-header .line {
    width: 40px;
    height: 2px;
    background-color: var(--color-4);
    border-radius: 30px;
}

.title-h1 {
    color: var(--color-4);
    font-size: var(--font35);
}

.header .search .form-control {
    padding: 15px 45px 15px 15px;
    border-radius: 30px;
    background-color: #ffff;
    border-color: #DDDDDD;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
}

.header .search .form-control.suggestion{
    border-radius: 30px 30px 0 0;
    border: unset !important;
}

.header .search .form-control::placeholder {
    color: #999999;
    font-size: var(--font14);
}

.feature .box-feature {
    margin-left: 10px;
}

.feature .box-feature a {
    background-color: var(--color-2);
    color: var(--color-6);
    border: 1px solid #C2D8E5;
    border-radius: 30px;
    font-size: var(--font14);
    padding: 5px 10px;
    white-space: nowrap;
}

.header {
    background-image: url(../images/bgpic.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.header::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
    background-color: #f8f8f7f5;
}

.feature::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: #F8F8F7;
    background: linear-gradient(93deg, rgba(248, 248, 247, 1) 0%, rgba(248, 248, 247, 0) 100%);
}

.category::after {
    content: "";
    position: absolute;
    width: 500px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    background-color: #0582CA1F;
    z-index: -1;
    height: 350px;
    filter: blur(30px);
    margin: auto;
    border-radius: 50%;
}

.category .title-category h2 {
    color: var(--color-5);
    font-size: var(--font35);
}

.category .title-category p {
    color: var(--color-6);
    font-size: var(--font18);
}

.category .text-box-category {
    color: var(--color-6);
    font-size: var(--font18);
}

.swiper-pagination-bullet-active {
    width: 25px !important;
    border-radius: 30px !important;
    background-color: var(--color-4) !important;
}

.swiper-pagination-bullet {
    width: 15px;
    height: 10px;
    border-radius: 30px;
    background: #B2B2B2;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 25px !important;
    color: #7C7C7C !important;
}

.category .mySwiper-category::after {
    content: "";
    position: absolute;
    width: 200px;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    background: #fff;
    z-index: 2;
    filter: blur(30px);
}

.category .mySwiper-category::before {
    content: "";
    position: absolute;
    width: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    background: #fff;
    z-index: 2;
    filter: blur(30px);
}

.filter .title h2 {
    color: #FCAE30;
    font-size: var(--font30);
}

.filter .text-bg {
    font-size: var(--font16);
    color: #fff;
}

.filter .bg-filter {
    background-color: var(--color-4);
}

.btn-filter {
    background-color: #fff;
    font-size: var(--font14);
    color: var(--color-3);
    border-radius: 15px;
    padding: 15px;
}

.filter .icon-filter-1 {
    top: -30px;
    z-index: 1;
}

.filter .icon-filter-1 img {
    display: none;
}

.filter .icon-filter-1 img.active {
    display: block;
}

.box-1 .name p {
    color: var(--color-6);
    font-size: var(--font18);
    font-family: YekanBakhFaNum-Bold;
}

.box-1 {
    position: relative;
}

.feature-box .col-lg-3:not(:last-child) .box-1::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 70px;
    background-color: #C2D8E5;
    top: 0;
    bottom: 0;
    left: -9px;
    margin: auto;
}

.box-color::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background-color: #FCAE3026;
    filter: blur(60px);
    left: 0;
    top: -6rem;
    border-radius: 50%;
}


.boxs-image .banner img {
    border-radius: 20px;
}

.image-blog::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #0000002c;
    z-index: 1;
    border-radius: 20px;
}

.blogs .image-blog {
    border-radius: 20px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .4);
}


.blogs .text-blog p {
    color: var(--color-5);
    font-size: var(--font16);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blogs .text-blog span {
    color: #888888;
    font-size: var(--font14);
}

.blogs .image-blog img {
    border-radius: 20px;
}

.blogs .date p {
    font-size: var(--font14);
    color: #dddddd;
}


.blogs .title h2 {
    color: var(--color-5);
    font-size: var(--font30);

}

.btn-more {
    color: var(--color-4);
    font-size: var(--font18);
}



.btn-blog .date {
    padding: 10px;
}

.btn-blog .date p {
    color: white;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.50);
    background: rgba(0, 0, 0, 0.00);
    padding: 5px 10px 2.5px 10px;
    border-radius: 10px;
    border: 1px solid rgba(250, 250, 250, .3);
    font-size: 12px;
}

.feature ul {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.feature ul ::-webkit-scrollbar {
    display: none;
}

.box-ul li {
    width: max-content;
    display: inline-table;

}

.search-suggestion {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-radius: 0 0 30px 30px;
    background-color: #fff;
    max-height: 30.25rem;
    overflow: auto;
    z-index: 12;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);

}

.search-suggestion .box-1 .box-car a .text-suggestion{
    font-size: var(--font12);
    color: var(--color-5);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.search-suggestion .box-1 .box-car a img{
    border-radius: 8px !important;
}

.search-suggestion .box-1 .box-car a{
    border: 1px solid #55555526;
    background-color: #DFDFDF47;
    padding: 5px;
    border-radius: 10px;
}

.box-btn-category .btn-category{
    width: max-content;
  display: inline-table;
}

.box-btn-category .btn-category a{
    border: 1px solid var(--color-4);
    background-color: none;
  color: #333;
  padding: 2px 7px;
  border-radius: 30px;
  font-size: 12px;
  transition: 0.5s;
}

.box-btn-category .btn-category a:hover{
    border: 1px solid var(--color-4);
    background-color: var(--color-4);
    color: #fff !important;
}


@media (max-width: 576px) {
    .category .mySwiper-category::after {
        content: none !important;
    }

    .category .mySwiper-category::before {
        content: none !important;
    }

    .category::after {
        width: 220px;
    }

    .feature-box .col-lg-3:nth-child(even) .box-1::after {
        content: none;
    }

    .box-color::after {
        content: none !important;
    }

    .box-1 .name p {
        font-size: var(--font16) !important;
    }

    .title-h1 {
        font-size: var(--font30);
    }

    .category .title-category p {
        color: var(--color-6);
        font-size: var(--font14);
    }

    .title-header .text {
        color: var(--color-6);
        font-size: var(--font14);
    }

    .title-header .text-2 {
        color: var(--color-6);
        font-size: var(--font16);
    }

    .box-ul li {
        width: 49%;
        text-align: center;

    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .feature-box .col-lg-3:nth-child(even) .box-1::after {
        content: none;
    }

    .box-color::after {
        content: none !important;
    }

    .box-1 .name p {
        font-size: var(--font16) !important;
    }

    .category .title-category p {
        color: var(--color-6);
        font-size: var(--font14);
    }


}

@media (min-width: 768px) and (max-width: 992px) {
    .feature-box .col-lg-3:nth-child(even) .box-1::after {
        content: none;
    }

    .box-color::after {
        content: none !important;
    }

    .box-1 .name p {
        font-size: var(--font16) !important;
    }


}