@media (max-width: 1400px){
    .blog-main-cards img{
            width: 530px;
    }

    .text-blog-main-cards{
        width: 378px;
    }
    .div-cards-blog-tags{
        justify-content: center;
        gap: 1.5rem;
    }
    .Vector-slider-blog{
        width: 21%;
    }
}

@media (max-width: 1200px){

    .Vector-slider-blog{
        position: absolute;
        bottom: -1px;
        z-index: 1;
        width: 22%;
    }
    .swiper-slide-blog p{
        left: 25%;
    }

    .arrows-slider-blog{
        height: 5rem;
    }

}

@media (max-width: 992px){
    .swiper-container-blog{
        position: relative;
    }
    .arrows-slider-blog{
        display: none;
    }
    .swiper-container-blog-res{
        display: block;
    }
    .swiper-slide-blog p{
        left: auto;
        font-size: 32px;
    }
    .swiper-container-blog{
        border-radius: 1.5rem;
        aspect-ratio: 16 / 10;          /* کمی بلندتر برای موبایل */
    }
    .swiper-slide-blog > img{
        object-position: 50% 70%;
    }
    .swiper-slide-blog > p{
        left: 16px; right: 16px; bottom: 16px;
        font-size: clamp(16px, 4.2vw, 22px);
    }
    .swiper-slide-blog > p > span{
        font-size: 12px; margin-bottom: 6px;
    }
    .arrows-slider-blog{
        left: 16px; bottom: 16px; gap: 10px;
    }
    .swiper-button-prev-blog,
    .swiper-button-next-blog{
        width: 52px; height: 52px; border-radius: 14px;
    }
    .swiper-container-blog .swiper-pagination{
        bottom: 8px;
    }
    .Vector-slider-blog{ display: none; }
    .swiper-pagination{
        position: unset !important;
        margin-top: 2rem !important;
        display: block !important;
    }
}


@media (max-width: 768px){
    .swiper-backface-hidden .swiper-slide img {
        height: inherit;
    }
    .inputs-row {
        flex-direction: row;
        gap: 16px;
    }

    .inputs-row .input-form-votatec {
        flex: 1;
    }
    .blog-main-cards img{
        width: 100%;
    }

    .text-blog-main-cards p{
            font-size: 24px;
            font-weight: 700;
            line-height: 40px;
            color: #222222;
        }

    .swiper-slide-blog p {
        font-size: 24px;
        margin-left: 1.5rem;
        margin-bottom: 2rem;
    }
    .div-swiper-container-blog .swiper-pagination {
        position: absolute !important;
        bottom: 1rem;
    }
    .breadcrumb{
        margin-top: 3rem;
    }

    .blog-main-cards span{
            font-size: 12px;
            line-height: 19px;
        }
}


@media (max-width: 576px){
    .div-blog-main-cards{
        margin-top: 2.5rem;
        gap: 1.25rem;
    }
    .tags-blog-page{
        font-size: 20px;
        font-weight: 700;
        line-height: 48px;
        padding: 2.5rem 0 2.5rem 0.8rem;
        gap: 0.75rem;
    }
    .latest-blog h6{
        font-size: 24px;
        font-weight: 700;
        line-height: 24px;
        margin-bottom: 2rem;
    }
    .text-blog-main-cards{
        padding: 22px 24px;
        gap: 0;
        width: 65%;
    }
    .text-blog-main-cards svg{
        width: 19px;
        height: 19px;
    }
    .text-blog-main-cards p{
        font-size: 16px;
        font-weight: 700;
        line-height: 32px;
        color: #222222;
    }
    .blog-title{
        font-size: 24px;
        font-weight: 700;
        line-height: 48px;
        margin-bottom: 0.75rem;
        margin-top: 0.5rem;
    }

    .swiper-slide-blog p{
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
    }
    .swiper-slide-blog p span{
        font-size: 10px;
    }
}

@media (max-width: 400px){
    .swiper-slide-blog p{
        font-size: 1rem;
    }

    .text-blog-main-cards span{
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #757575;
    }
    .text-blog-main-cards p{
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        color: #222222;
    }
}