/*START PAGINTAION*/
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 10px;
        margin-top: 20px;
    }
    
    .pagination .page-numbers {
        display: inline-block;
        padding: 8px 12px;
        border-radius: 6px;
        text-decoration: none;
        color: #333;
        background: #f1f1f1;
        font-weight: bold;
        transition: all 0.3s ease;
    }
    
    .pagination .page-numbers:hover {
        background: #0650a3;
        color: #fff;
    }
    
    .pagination .current {
        background: #0650a3;
        color: #fff;
        cursor: default;
    }
    
    .pagination .next {
        background: #f1f1f1;
    ;
        color: #021959;
        padding: 8px 14px;
        border-radius: 6px;
    }
    
    .pagination .next:hover {
        background: #0650a3;
    ;
    }
/*END PAGINTAION*/



/*SEARCH BOX */
    #search-answer{
            width: 100%;
        flex-wrap: nowrap;
        /* overflow-x: auto; */
        overflow-y: hidden;
        margin: 20px 0;
        border-bottom: 2px solid #f0f0f0;
        display: flex;
        align-items: center;
        height: 65px;
        box-shadow: 0 3px 2px rgba(2, 25, 89, 0.02);
        border-radius: 10px;
        background-color: #ffffff;
        color: #003c7f;
        font-size: 16px;
        font-weight: 700;
        padding: 0 20px;
        margin-bottom: 33px;
    }
    #searchbox {
            display: flex
    ;
        padding-bottom: 20px;
        justify-content: space-between;
        
    
    } 
    
    #search-botton {
            Z-INDEX: 1;
        margin: 40px;
    }
    
    #search-answer p::before {
    width: 8px;
    height: 20px;
    position: absolute;
    right: 7px;
    top: 40px;
    /* -webkit-transform: translateY(-50%); */
    /* transform: translateY(-50%); */
    content: '';
    border-radius: 2px;
    background-color: #f15928;
}
/* END SEARCHBOX */



/* HASHTAG */
    #tag-name{
            width: 100%;
        flex-wrap: nowrap;
        /* overflow-x: auto; */
        overflow-y: hidden;
        margin: 20px 0;
        border-bottom: 2px solid #f0f0f0;
        display: flex;
        align-items: center;
        height: 65px;
        box-shadow: 0 3px 2px rgba(2, 25, 89, 0.02);
        border-radius: 10px;
        background-color: #ffffff;
        color: #003c7f;
        font-size: 16px;
        font-weight: 700;
        padding: 0 20px;
        margin-bottom: 33px;
        
        
    }
    
    #hashtag {
            display: flex
    ;
        padding-bottom: 20px;
        justify-content: space-between;
        
    
    } 
    #tag-button {
            Z-INDEX: 1;
    }
    #tag-name p::before {
    width: 8px;
    height: 20px;
    position: absolute;
    right: 7px;
    top: 40px;
    /* -webkit-transform: translateY(-50%); */
    /* transform: translateY(-50%); */
    content: '';
    border-radius: 2px;
    background-color: #f15928;
}
/* HASHTAG */

/*CATEGORY FILTER*/
    #filter {
        width:200%;
        flex-wrap: nowrap;  /* جلوگیری از شکست خط */
        overflow-x: auto;  /* فعال کردن اسکرول افقی */
        overflow-y: hidden;  /* جلوگیری از اسکرول عمودی */
        margin: 20px 0;
        border-bottom: 2px solid #f0f0f0;
        display: flex;
        align-items: center;
        height: 65px;
        box-shadow: 0 3px 2px rgba(2, 25, 89, 0.02);
        border-radius: 10px;
        background-color: #ffffff;
        padding: 0 20px;
        margin-bottom: 33px;
        
    }
    
    #filter button {
        background: none;
        border: none;
        color: #808080;
        font-size: 15px;
        cursor: pointer;
        padding: 10px 15px;
        transition: all 0.3s ease;
        position: relative;
        white-space: nowrap;  /* جلوگیری از جدا شدن کلمات */
    }
    
    #filter button:hover,
    #filter button.active {
        color: #0650a3;
    }
    
    #filter button.active::after {
        content: '';
        display: block;
        width: 100%;
        height: 5px;
        background-color: #0650a3;
        position: absolute;
        border-radius: 10px 10px 0px 0px;
        bottom: -10px;
        left: 0;
    }
    
    
    /* استایل اسکرول */
    
    #filter::-webkit-scrollbar {
        width: 8px; /* عرض اسکرول */
        height: 6px; /* ارتفاع اسکرول */
    }
    #filter::-webkit-scrollbar-thumb {
        background-color: #0035d61c; /* رنگ اسکرول هنگام هاور */
    }
    
    #filter::-webkit-scrollbar-track {
        background: #ffffff; /* رنگ ترک اسکرول هنگام هاور */
    }
    
    #category {
        display: flex ;
        padding-bottom: 20px;
        justify-content: space-between;
    }
    
    

    #category-bottom {
            Z-INDEX: 1;
            }
    
    #more-filter-btn {
    margin: 30px -20px 20px 5px;
        font-size: 14px;
        display: inline-block;
        padding: 12px 20px;
        border-radius: 10px 10px 10px 10px;
        text-decoration: none;
        color: #ffffff;
        background: #0650a3;
        font-weight: bold;
        transition: all 0.3s ease;
            box-shadow: 0px 1px 0px 6px rgb(45 145 224 / 16%);
    }

/* END CATEGORY FILTER*/

.message-load {
    text-align: center;
    font-size: 20px;
    padding: 20px;
    margin: 20px auto;

}

/* POST */
    /*ایکون فونت اسوم*/
    
    .custom-icon-margin {
        margin: 5px; /* اعمال مارجین 5px به تمام جهات آیکون */
    }
    
    /* استایل کل بخش */
    .single-widget__relate-post {
        -webkit-box-shadow: 0 3px 2px rgba(2, 25, 89, 0.1);
        box-shadow: 0 3px 2px rgba(2, 25, 89, 0.1);
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 30px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .single-widget__relate-post:hover {
        -webkit-box-shadow: 0 6px 6px rgba(2, 25, 89, 0.1);
        box-shadow: 0 6px 6px rgba(2, 25, 89, 0.1);
    }
    
    .single-widget__relate-post figure {
        margin-bottom: 25px;
        position: relative;
    }
    
    .single-widget__relate-post figure a {
        display: block;
        overflow: hidden;
    }
    
    .single-widget__relate-post figure a img {
        width: 100%;
        height: auto;
        border-radius: 10px 10px 0 0;
        transition: transform 0.3s ease;
    }
    
    .single-widget__relate-post figure a:hover img {
        transform: scale(1.05);
    }
    
    .single-widget__relate-caption {
        padding: 15px;
    }
    
    .single-widget__relate-caption h2 {
        font-size: 18px;
        color: #021959;
        font-weight: 700;
        margin-bottom: 10px;
    }
    
    .single-widget__relate-caption h2 a {
        text-decoration: none;
        color: inherit;
        transition: color 0.3s ease;
    }
    
    .single-widget__relate-caption h2 a:hover {
        color: #00aaff;
    }
    
    .single-widget__relate-caption p {
        font-size: 14px;
        color: #021959;
        line-height: 1.6;
        margin-bottom: 15px;
        text-align: justify;
    }
    
    .single-widget__relate-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .single-widget__relate-foot-r {
        display: flex;
        align-items: center;
    }
    
    .single-widget__relate-foot-r i {
        font-size: 18px;
        color: #021959;
        margin-right: 6px;
    }
    
    .single-widget__relate-foot-r em {
        padding: 8px;
        font-size: 15px;
        font-weight: 700;
        color: #021959;
    }
    
    .single-widget__relate-foot-r span {
        font-size: 14px;
        color: #021959;
    }
    
    .single-widget__relate-foot-l {
        display: flex;
        align-items: center;
    }
    
    .single-widget__relate-foot-l span {
        font-size: 15px;
        font-weight: 700;
        color: #021959;
    }
    
    .single-widget__relate-foot-l i {
            font-size: 14px;
        padding: 4px;
        color: #021959;
        margin-left: 5px;
    }
    
    .icon-comment {
        font-size: 15px;
    }
    
    i.icon-clock {
        font-size: 14px;
    }
    
    
/* END POST */


/* GAME */

    #game-container {
        display: flex;
        margin-bottom: 30px;
        justify-content: center;
    }
    
    
    #game-frame {
        height: 100%;
        max-height: auto;
    }
    
    .morfi-device {
        display: inline-block;
        position: relative;
        -webkit-box-sizing: content-box !important;
        box-sizing: content-box !important
    }
    
    .morfi-device .screen {
        width: 100%;
        position: relative;
        height: 100%;
        z-index: 3;
        background: white;
        overflow: hidden;
        display: block;
        border-radius: 1px;
        -webkit-box-shadow: 0 0 0 3px #111;
        box-shadow: 0 0 0 3px #111
    }
    
    .morfi-device.ipad {
        width: 576px;
        height: 768px;
        padding: 90px 25px;
        background: #242324;
        border-radius: 44px
    }
    
    .morfi-device.ipad:before {
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        position: absolute;
        content: '';
        display: block;
        top: 4px;
        left: 4px;
        border-radius: 40px;
        background: #1e1e1e
    }
    
    .morfi-device.ipad .camera {
        background: #3c3d3d;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 44px;
        left: 50%;
        margin-left: -5px;
        border-radius: 100%
    }
    
    .morfi-device.ipad .top-bar,.morfi-device.ipad .bottom-bar {
        display: none
    }
    
    .morfi-device.ipad .home {
        background: #242324;
        border-radius: 36px;
        width: 50px;
        height: 50px;
        position: absolute;
        left: 50%;
        margin-left: -25px;
        bottom: 22px
    }
    
    .morfi-device.ipad .home:after {
        width: 15px;
        height: 15px;
        margin-top: -8px;
        margin-left: -8px;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 4px;
        position: absolute;
        display: block;
        content: '';
        top: 50%;
        left: 50%
    }
    
    .morfi-device.ipad.landscape {
        height: 346px;
        width: 573px;
        padding: 25px 90px;
        box-shadow: 1px 1px 18px 0px #00000085;
    }
    .morfi-device.ipad.landscape .camera {
        left: calc(100% - 44px);
        top: 50%;
        margin-left: 0;
        margin-top: -5px
    }
    
    .morfi-device.ipad.landscape .home {
        top: 50%;
        left: 22px;
        margin-left: 0;
        margin-top: -25px
    }

/* END GAME */


/* Responsive */
@media (max-width: 768px) {
    /*game container*/

    
    #game-container {
    display: flex;
    justify-content: center;
    margin: 10px;
    margin-bottom: 30px;
    }


        #game-frame {
        height: 100%;
        max-height: auto;
    }
    
    .morfi-device {
        display: inline-block;
        position: relative;
        -webkit-box-sizing: content-box !important;
        box-sizing: content-box !important
    }
    
    .morfi-device .screen {
        width: 100%;
        position: relative;
        height: 100%;
        z-index: 3;
        background: white;
        overflow: hidden;
        display: block;
        border-radius: 1px;
        -webkit-box-shadow: 0 0 0 3px #111;
        box-shadow: 0 0 0 3px #111
    }
    
    .morfi-device.ipad {
        width: 576px !important;
        height: 400px !important;
        padding: 90px 25px !important;
        background: #242324;
        border-radius: 44px
    }
    
    .morfi-device.ipad:before {
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        position: absolute;
        content: '';
        display: block;
        top: 4px;
        left: 4px;
        border-radius: 40px;
        background: #1e1e1e
    }
    
    .morfi-device.ipad .camera {
        background: #3c3d3d;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 44px !important;
        left: 50% !important;
        margin-left: -5px;
        border-radius: 100%
    }
    
    .morfi-device.ipad .top-bar,.morfi-device.ipad .bottom-bar {
        display: none
    }
    
    .morfi-device.ipad .home {
        background: #242324;
        border-radius: 36px;
        width: 50px;
        height: 50px;
        position: absolute;
        left: 50% !important;
        top: 92% !important;
        margin-left: -25px !important;
        bottom: 22px
    }
    
    .morfi-device.ipad .home:after {
        width: 15px;
        height: 15px;
        margin-top: -8px;
        margin-left: -8px;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 4px;
        position: absolute;
        display: block;
        content: '';
        top: 50%;
        left: 50%
    }

#category-bottom {
    z-index: 100;
}
    #more-filter-btn {
margin: 30px -20px 20px 5px;
        font-size: 11px;
        display: inline-block;
        padding: 12px 18px;
        border-radius: 10px 10px 10px 10px;
        text-decoration: none;
        color: #ffffff;
        background: #0650a3;
        font-weight: bold;
        transition: all 0.3s ease;
    }
    #filter button {
        background: none;
        border: none;
        color: #808080;
        font-size: 12px;
        cursor: pointer;
        padding: 10px 15px;
        transition: all 0.3s ease;
        position: relative;
        white-space: nowrap;
    }
    .single-widget__relate-post {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    gap: 0px;
}
    .single-widget__relate-post figure {
    margin-left: 17px;
    flex: 0 0 calc(46% - 17px);
    max-width: calc(46% - 17px);
    }
    .single-widget__relate-post figure a img:hover{
        transform:none!Important;
    }
    .single-widget__relate-post figure a img {
                border-radius: 20px;
        /* left: 41%; */
        left: -3%;
        top: -50px;
        min-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        /* transform: translate(-50%, -50%); */
        /* -webkit-transform: translate(-50%, -50%); */
        transition: transform 0.3s ease;
}
    
    .single-widget__relate-post h2 {
      margin-bottom: 0px ! IMPORTANT;
    }
    
    .single-widget__relate-post h2 a {
      color: #0650a3;
      font-size: 14px;
      font-weight: 700;
    }
    
    .single-widget__relate-post p {
      color: #021959;
      font-size: 11px;
      font-weight: 700;
      line-height: 22px;
      text-align: justify;
      margin-bottom: 0px !important;
    }
    .single-widget__relate-post:hover {
    box-shadow: 0 2px 6px rgba(2, 25, 89, 0.1);
}



.single-widget__relate-foot-r em {
    padding: 3px 7px 0px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #021959;
}

.single-widget__relate-caption {
    padding: 15px 15px 5px 15px;
}
.single-widget__relate-foot-r span {
    font-size: 12px;
    color: #021959;
}

.single-widget__relate-foot-l span {
    font-size: 12px;
    font-weight: 700;
    color: #021959;
}
.icon-comment:before {
    font-size: 12px;
    content: "\e90d";
}
i.icon-clock {
    font-size: 11px;
}
.icon-comment:before {
    content: "\e90d";
    font-size: 10px;
}





}