@media only screen and (min-width: 0px) and (max-width: 640px) {

    :root {
        --font-18: 16px;
        --font-16: 14px;
    }

    .container {
        padding: 0 2px;
    }

    .p-x {
        padding: 0 15px;
    }

    .top-bar {
        border-radius: 8px !important;
    }

    .top-bar a {
        margin-right: 0px !important;

    }

    .hideTitle .special-news-container .section-header-style {
        display: flex !important;
        align-items: center !important;
    }

    .gap-3 {
        font-size: 10px !important;

    }

    .events-panel .date-badge {

        font-size: 8px !important;


    }

    .special-news-container .main-news-feed {
        border: none !important;
        margin-left: 1rem !important;
    }

        .make-it-sticky {
        top: 0px !important;
    }
        .make-it-sticky {
        position: relative !important;
        z-index: 999 !important;
        padding: 0px 10px !important;
    }

        .metro-border-left {
        border-left: 0px !important;

    }
        .news-categories-clean .cat-card-text {
        font-size: 10px !important;

    }
        .news-item-thumb img {
        width: 80px !important;
        height: 60px !important;
    }
        .news-item-content .news-title {
        font-size: 14px    !important;
        margin-top: -76px  !important;
        margin-right: 90px !important;
        padding: 1px       !important;
    }
        .news-item-meta {
        margin-right: 110px !important;
    }
    .news-main-image {
        float: none !important;
        width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
    }
        .meta-box-item {
        flex-direction: column !important;
        padding: 5px 25px !important;

    }
        .modern-input {
        padding: 8px 0px 8px 50px !important;
        font-size: 0.7rem !important;
    }

        .copy-btn-modern {
        left: 10px !important;
        padding: 8px !important;
    }
        .link-label-text {
        margin-top: 15px !important;
    }
            .email_box,
        .name_box {
        width: 100% !important;

    }


@media screen and (min-width: 768px) and (max-width:1201px) {
    .b5-popular-widget .nav-item .nav-link {
        font-size: 10px;
    }
}







    /* تنظیم ظرف اصلی هدر برای شکستن خط */
    .main-header .container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        padding: 10px 15px !important;
        flex-direction: row-reverse !important;
    }

    .main-header .navbar-toggler-icon {
        filter: brightness(0) invert(1) !important;
    }

    /* همبرگری در ردیف اول سمت راست */
    .custom-toggler {
        order: 1 !important;
        display: block !important;
        margin: 0 !important;
    }

    /* لوگو در ردیف اول سمت چپ/وسط */
    .logo-area {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        position: relative;

        order: 2 !important;
        margin: 0 !important;
    }

    .logo-area a img {
        top: -80px !important;
        right: -40px;
        padding: 0px 4px;
        position: absolute;
        background-color: var(--blue);
        border-radius: 15px;
        width: 51px;
        margin-top: 40px;
        max-width: 60px;
        margin-right: 50px;
    }

    /* باکس جستجو تمام‌عرض در ردیف پایین */
    .search-capsule {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 5px 0 !important;
        flex-basis: 100%;
        /* اجبار به شکستن خط */
        height: 40px !important;
        display: flex !important;
    }

    /* بهینه سازی سایز لوگو در موبایل */
    .logo-area .logo-circle {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.2rem !important;
        margin-left: 8px !important;
    }

    .brand-text h1 {
        font-size: 0.9rem !important;
    }

    .brand-text {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        display: flex;
    }

    .brand-text span {
        font-size: 0.7rem;
        opacity: 0.9;
        display: block;
        text-align: left;
        display: flex;
    }


    /* حذف فاصله های اضافی منو در حالت موبایل برای جلوگیری از تداخل */
    .search-socials {
        display: none !important;
    }

    @media (max-width: 767px) {

        /* فیکس کردن کل باکس اسلایدر */
        .hero-section .slider-card.fixed-h {
            display: block !important;
            /* خارج کردن از حالت فلکس برای نمایش زیر هم */
            height: auto !important;
            min-height: 380px;
            position: relative;
        }

        /* عکس برود بالا و تمام عرض شود */
        .hero-section .slider-img-wrap {
            width: 100% !important;
            height: 180px !important;
            display: block !important;
        }

        .hero-section .slider-img-wrap img {
            height: 180px !important;
            width: 100% !important;
            object-fit: cover;
        }

        /* محتوا بیاید زیر عکس */
        .hero-section .slider-content {
            width: 100% !important;
            display: block !important;
            padding: 10px 15px 50px 15px !important;
            /* ۵۰ پیکسل فاصله از پایین برای دکمه‌ها */
        }

        /* کوچک کردن تیتر */
        .hero-section .slider-title {
            font-size: 1rem !important;
            margin-top: 5px !important;
            line-height: 1.5 !important;
        }

        /* تنظیم توضیحات */
        .hero-section .slider-desc {
            font-size: 0.85rem !important;
            -webkit-line-clamp: 3 !important;
            margin-bottom: 0 !important;
        }

        /* دکمه‌های ناوبری (دقیقاً مثل عکس ۷: کوچک و آبی تیره) */
        .hero-section .slider-nav {
            position: absolute !important;
            bottom: 10px !important;
            left: 10px !important;
            right: auto !important;
            display: flex !important;
            gap: 5px !important;
            z-index: 99;
        }

        .hero-section .slider-nav-btn {
            width: 30px !important;
            /* سایز کوچک دکمه */
            height: 30px !important;
            background-color: #000080 !important;
            /* رنگ سرمه‌ای تیره مشابه عکس ۷ */
            color: #fff !important;
            border-radius: 50% !important;
            border: none !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .hero-section .slider-nav-btn i {
            font-size: 12px !important;
            /* آیکون کوچک */
        }

        /* تاریخ در سمت راست پایین */
        .hero-section .slider-meta {
            position: absolute !important;
            bottom: 15px !important;
            right: 15px !important;
            font-size: 11px !important;
            margin: 0 !important;
        }

        .content-main .slider-section .slider .owl-nav {
            bottom: 45px;
        }



        .content-main .body-section .news-site .item {
            flex-direction: column;
        }

        .content-main .body-section .news-site .item .img-slider img {
            width: 100%;
            margin-bottom: 10px;
        }

        .content-main .body-section .news-site .info-slider .slider-card h3 {
            font-size: 16px;
            text-align: center;
        }

        .content-main .body-section .news-site .info-slider .slider-card {
            text-align: justify;
        }

        .content-main .body-section .banners-site {
            flex-direction: column;
        }

        .content-main .body-section .banners-site .banners-right img {
            width: 97px !important;
            height: 250px;

        }

        .content-main .body-section .banners-site .banners-left img {
            width: 100%;

        }

        .content-main .gallery-section .item .gallery-box {

            margin-bottom: 30px;
        }

        .content-main .gallery-section {
            padding: 20px 0;
        }



        .content-main .slider-section .slider .item {
            gap: 10px;
        }

        .content-main .slider-section .slider .item .img-slider {
            height: 150px;
            width: 100% !important;
            display: flex;
        }

        .content-main .slider-section .slider .item .img-slider a {
            display: flex !important;
            width: 100%;
        }

        .content-main .slider-section .slider .item .info-slider .slider-card h3 {
            font-size: 14px !important;
        }

        .content-main .slider-section .slider .item .info-slider .slider-card p {
            font-size: 13px !important;
            height: 133px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .content-main .slider-section .slider .item .info-slider .slider-card {
            gap: 14px;
        }

        .content-main .slider-section .slider .owl-nav {
            padding: 3px 5px;
            position: absolute;
            left: 12px !important;
            bottom: 38px !important;
        }

        .content-main .slider-section .slider .owl-nav .owl-prev,
        .content-main .slider-section .slider .owl-nav .owl-next {
            width: 25px !important;
            height: 25px !important;
            padding: 4px !important;
        }





        .content-main .body-section .im-news {
            overflow: scroll;
        }

        .content-main .body-section .im-news .info-news .img-card img {
            width: 100%;
        }

        .content-main .body-section .tabs-news {
            width: 100%;
        }

        .header-main .header-menu .header-right .logo-site img {
            width: 100%;
        }

        /* فشرده کردن باکس اصلی */
        .news-ticker-bar {
            padding: 4px 6px !important;
            gap: 5px !important;
            margin-top: 8px !important;
        }

        /* کوچک کردن برچسب قرمز */
        .ticker-label {
            padding: 4px 6px !important;
            font-size: 10px !important;
            gap: 3px !important;
        }

        .ticker-dot {
            width: 4px !important;
            height: 4px !important;
        }

        /* تنظیم فضای متن خبر برای جلوگیری از بیرون زدن */
        .ticker-right {
            gap: 6px !important;
            flex-shrink: 1 !important;
        }

        .ticker-link {
            font-size: 11px !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 150px;
            /* محدود کردن عرض متن برای جا شدن دکمه‌ها */
        }

        /* کوچک کردن دکمه‌های کنترلی برای جلوگیری از شکستن خط */
        .ticker-controls {
            gap: 3px !important;
            margin-right: 0 !important;
            flex-shrink: 0 !important;
        }

        .ticker-btn {
            width: 22px !important;
            height: 22px !important;
        }

        .ticker-btn i {
            font-size: 8px !important;
        }

        .content-main .owl-nav .owl-next {
            margin-top: 50px;
        }

        .content-main .owl-nav .owl-prev {
            margin-top: 50px;
        }


        .content-main .body-section {
            margin-bottom: -18px !important;
        }

        .content-main .body-section .news-site .item .img-slider img {
            width: 100% !important;
            height: 170px !important;
        }

        .content-main .body-section .news-site .item .info-slider::after {
            display: none !important;
        }

        .content-main .body-section .news-site .item .img-slider {
            margin-bottom: 20px;
        }

        .info-header {
            flex-direction: column;
            text-align: center;
        }

        .menu-content {
            flex-direction: column;
        }

        .banners-site {
            flex-direction: column;
        }

        .im-news .all-news {
            flex-direction: column;
        }

        .content-main .body-section .news-site .info-slider .slider-card div {
            width: 313px;
            font-size: 16px;
            line-height: 1.2em;
            height: auto;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
            padding: 0;
        }

        .content-main .body-section .news-site .info-slider .slider-card {
            gap: 0 !important;
        }

        .content-main .body-section .tabs-news .links {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .content-main .main-title h3 {
            text-align: center;
        }

        .content-main .body-section .news-site .info-slider .slider-card {
            text-align: center;
        }

        .content-main .body-section .banners-site .banners-right {
            margin-bottom: 10px;
        }

        .content-main .body-section .suggest-sec .info-suggest {
            height: auto !important;
        }

        .content-main .slider-section .slider .owl-nav.disabled {
            bottom: 38px !important;
        }

        .header-main {
            margin-bottom: 0 !important;
        }

        .content-main .news-meta-box {
            overflow: scroll;
        }

        .content-main .news-meta-box .meta-info {
            white-space: nowrap;
        }

        .content-main .news-meta-box .meta-info i {
            font-size: 14px;
        }

        .content-main .news-meta-box .meta-icons a {
            margin-left: 0 !important;
        }

        .content-main .news-meta-box {
            margin-bottom: 10px;
        }

        .content-main .news-meta-box .meta-info {
            margin-left: 10px;
        }

        .content-main .body-section .tabs-news ul {
            justify-content: space-around !important;
        }

        /* ۱. بدنه اصلی فوتر */
        .kaf-mini-footer {
            padding: 50px 10px 30px 10px !important;
            overflow: hidden !important;
        }

        /* ۲. اصلاح موج بالای صفحه */
        .kaf-wave-top {
            top: -40px !important;
        }

        .kaf-wave-top svg {
            height: 45px !important;
        }

        /* ۳. اجبار به تک‌ستونه شدن تمام ردیف‌ها */
        .kaf-rtl {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 40px !important;
            /* فاصله بین بخش‌های مختلف */
        }

        .kaf-rtl>div {
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            text-align: center !important;
        }

        /* ۴. مرتب‌سازی بخش منوها (حل مشکل تصویر ارسالی) */
        .f-menus-container {
            flex-direction: column;
            justify-items: center !important;
            width: 100% !important;
        }

        .kaf-newsletter-desc p {
            margin-bottom: 15px !important;
        }

        .f-nav-col {
            width: 100% !important;
            text-align: center !important;
        }

        /* ۵. اصلاح متون و عناوین */
        .f-cyan-label,
        .f-menus-container .links h3 {
            text-align: center !important;
            font-size: 16px !important;
            margin-bottom: 15px !important;
            width: 100% !important;
        }

        .kaf-mini-footer ul li {
            text-align: center !important;
            margin-bottom: 12px !important;
        }

        /* ۶. اصلاح خبرنامه (Newsletter) */
        .f-desc-small {
            margin: 0 auto 15px auto !important;
            text-align: center !important;
            max-width: 100% !important;
        }

        .kaf-input-wrapper {
            margin: 0 auto !important;
            width: 100% !important;
            max-width: 320px !important;
            flex-direction: row-reverse !important;
            /* نگه داشتن دکمه و اینپوت در یک خط */
        }

        /* ۷. آیکون‌های اجتماعی و تلفن */
        .f-social-icons {
            justify-content: center !important;
            margin-bottom: 20px !important;
        }

        .f-label-tiny,
        .f-phone-big {
            text-align: center !important;
            width: 100% !important;
            display: block !important;
        }

        .f-phone-big {
            font-size: 22px !important;
            margin-top: 10px !important;
        }

        /* ۸. نوار کپی‌رایت پایین */
        .f-bottom-bar div {
            flex-direction: column !important;
            gap: 15px !important;
            text-align: center !important;
        }

        .f-copy-txt,
        .f-dev-tag {
            text-align: center !important;
        }
    }
}