@import "fonts.css";
html{
    direction: rtl !important;
    height: fit-content;
}
body{
    margin: 0;
    background-color: rgb(245, 225, 191);
    background-image: url("../../kimages/blog/nagsh.png");
    background-size:100%;
    background-position: 0 50px;
    background-repeat: repeat-y;
    position: relative;
}
body > footer {
    display: table-row;
}

a{
    text-decoration: none;
    color: inherit; 
}
a:hover{
    color: white;
    text-decoration: none;
}
.blog-footer{
    margin-bottom: -2%;
}
.under-header{
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: center;
    align-items: center;
    
}
.header-text{
    padding-top: 7%;
    color:  #523318;
    text-align: center;
    font-family: "Hacen Liner Screen", cursive;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.no-scroll-effect {
    position: relative;
    z-index: 10;
}
.tabs-box{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 3rem;
    padding: 0 15%;
}
.tab-main{
    color: white;
    display: flex;
    padding: 8px 24px;
    align-items: center;
    gap: 10px;
    border-radius: 24px;
    border: 1.5px solid rgba(255, 255, 255, 0.64);
    background: rgba(37, 29, 2, 0.5);
    box-shadow: -0.431px -0.431px 1.724px 0 rgba(255, 255, 255, 0.33) inset, 1.293px 1.293px 1.724px 0 rgba(255, 255, 255, 0.33) inset;
    backdrop-filter: blur(17.235532760620117px);
}

.tab-main.active {
    color: #523318;
    border: 1px solid #523318;
    background: #FFF;
}
.tab-main:hover {
    color: #523318;
    border: 1px solid #523318;
    background: #FFF;
}

.background-header{
    width: 100%;
    height: 100%;
}

.news-container{
    padding: 15px;
    border-radius: 32.748px;
    background: rgba(49, 43, 31, 0.5);
    box-shadow: -0.431px -0.431px 1.724px 0 rgba(255, 255, 255, 0.33) inset, 1.293px 1.293px 1.724px 0 rgba(255, 255, 255, 0.33) inset;
    backdrop-filter: blur(17.235532760620117px);
}
.page-container{
    padding: 6% 4% 20%;
}
.news-pic{
    border-radius: 25.494px;
    box-shadow: -0.32px -0.32px 1.281px 0 rgba(255, 255, 255, 0.33) inset, 0.961px 0.961px 1.281px 0 rgba(255, 255, 255, 0.33) inset;
    backdrop-filter: blur(12.806733131408691px);
}

.news-max-size{
    max-height: 500px;
}

.page-pic-max-size{
    border-radius: 47.373px;
    backdrop-filter: blur(23.797195434570312px);
    max-height: 500px;
}

.card-text{
    color: #FFF;
    text-align: right;
    font-family: "Hacen Liner Screen", serif;
    font-size: 21.297px;
    font-style: normal;
    font-weight: 400;
    line-height: 31.946px; 
    margin-top: 10px;
}

.text-date{
    color: rgba(255, 255, 255, 0.70);
    text-align: right;
    font-family: "Hacen Liner Screen", serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 37.069px; 
}

.card-body{
    padding: 5px 0 10px
}

.tab-branch{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #523318;
    text-align: center;
    font-family: "Hacen Liner Screen", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 20px;
}
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}
.breadcrumb-text {
    color: #523318;
    font-family: "Hacen Liner Screen", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #523318;
}

.breadcrumb a {
    text-decoration: none;
    color: #523318;
}
.breadcrumb .active {
    color: #523318;
}

.blog-page-header-link{
    text-decoration: underline;
}
.blog-page-header-tab{
    text-decoration: none;
}
.blog-page-header-tab:hover{color: white}

.page-text{
    color:  #523318;
    text-align: right;
    font-family: "Hacen Liner Screen", serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 43px; 
}
.page-title{
    color: #523318;
    font-family: "Hacen Liner Screen", serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
   
}
.page-date{
    color: #523318;
    font-family: "Hacen Liner Screen", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 31.946px; 
}
.preserve-lines {
    white-space: pre-line;
}

.custom-pagination  {
    gap: 4px;
    display: inline-flex;
    padding: 8px;
    margin:auto;             
    border-radius: 50px;
    border: 1.5px solid rgba(255, 255, 255, 0.64);
    background: linear-gradient(0deg, rgba(37, 29, 2, 0.36) 0%, rgba(37, 29, 2, 0.36) 100%), rgba(0, 0, 0, 0.10);
    box-shadow: -0.431px -0.431px 1.724px 0 rgba(255, 255, 255, 0.33) inset, 1.293px 1.293px 1.724px 0 rgba(255, 255, 255, 0.33) inset;
    backdrop-filter: blur(17.235532760620117px);
}

.custom-pagination .page-link {
    border: none;
    background: transparent;
    color: white;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    transition: all 0.2s ease;
}

.custom-pagination .page-link:hover {
    color: #2b1609;;
}

.custom-pagination .page-item.active .page-link {
    color: #2b1609;
    font-weight: bold;
    background: transparent;
}


.custom-pagination .page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

.custom-pagination .dots .page-link {
    cursor: default;
    color: white;
}

.custom-pagination .page-link.arrow {
    border-radius: 66px;
    background: #FFF;
    box-shadow: -0.431px -0.431px 1.724px 0 rgba(255, 255, 255, 0.33) inset, 1.293px 1.293px 1.724px 0 rgba(255, 255, 255, 0.33) inset;
    backdrop-filter: blur(17.235532760620117px);
    font-size: 24px;
    line-height: 1;
    color: #2b1609;
}


.card-ace {
    position: absolute;
    width: 230.606px;
    height: 308.704px;
    transition: all 0.8s ease-in-out;
   
}
.cards-container {
    position: fixed;
    top: 10%; 
    left: 20%;
    transform: translateX(-50%);
    width: 400px;
    height: 250px;
    pointer-events: none;
    transition: all 0.7s ease-in-out;
    z-index: -1;
}

/*_________________Start________________*/
.cards-container.start .c1 { transform: rotate(-2deg) translate(0, 0); left: 0; top: 30%; }
.cards-container.start .c2 { transform: rotate(-2deg) translate(0, 0); left: 90%; top: -15%; }
.cards-container.start .c3 { transform: rotate(25deg)  translate(0, 0); left: 200%; top:10%; }
.cards-container.start .c4 { transform: rotate(20deg)  translate(0, 0); left: 300%; top: 40%; }

/* --------------- Top --------------- */
.cards-container.top .c1 { transform: rotate(-10deg) translate(0, 0); left: 35%; top: 30%; }
.cards-container.top .c2 { transform: rotate(-5deg) translate(0, 0); left: 40%; top: 30%; }
.cards-container.top .c3 { transform: rotate(5deg)  translate(0, 0); left: 45%; top: 30%; }
.cards-container.top .c4 { transform: rotate(20deg)  translate(0, 0); left: 50%; top: 30%; }

/* ---------------Middle --------------- */
.cards-container.middle .c1 { left: 350%; top: 150%; transform: rotate(-10deg); }
.cards-container.middle .c2 { right: 90%; top: 5%; transform: rotate(-8deg);  }
.cards-container.middle .c3 { right: 90%; top: 150%; transform: rotate(20deg);   }
.cards-container.middle .c4 { left: 350%; top: 5%; transform: rotate(20deg);  }

/* ---------------Bottom --------------- */
.cards-container.bottom .c1 { transform: rotate(-10deg) translate(0, 0); left: 320%; top: 15%; }
.cards-container.bottom .c2 { transform: rotate(-5deg) translate(0, 0); left: 330%; top: 15%; }
.cards-container.bottom .c3 { transform: rotate(5deg)  translate(0, 0); left: 340%; top: 15%; }
.cards-container.bottom .c4 { transform: rotate(20deg)  translate(0, 0); left: 350%; top: 15%; }

/* إخفاء الكروت في الشاشات الصغيرة (موبايل) */
@media (max-width: 768px) {
    .cards-container {
        display: none;
    }
}

@media (max-width: 576px) {
    .cards-container {
        display: none;
    }
    .breadcrumb-text{
        font-size: 14px;
    }
    .page-title{font-size: 20px}
    .page-date{
        font-size: 14px;
    }
    .page-text{font-size: 22px}
}