@import "https://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css";
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;700;800;900&display=swap');

    body{
        background:#f8f9fa;overflow-x:hidden;direction:rtl;text-align:right;font-family:droid arabic naskh}
    a{color:#333;text-decoration:none!important;font-family:"Cairo"}
    .bushracolor{color:#7a489c}
    a:hover{color:#7a489c}
     /* .swiper-slide a:hover{color:#21372b !important} */
    .bg-dark a{color:#a79f9f}
    .bg-dark a:hover{color:#ffffff}
    h1,h2,h3,h4,h5,h6{color:#444;font-weight:600;line-height:1.5;margin:0 0 10px;font-family:Cairo,sans-serif}
    h4{font-size:18px}
    h2{font-size:18px !important}
    .logo{width:150px}
    img{max-width:100%;   
        height: 100%;
        object-fit: cover;
        width: 100%;}
/* .primery-background{background:#005689;} */

span.date{font-size: 0.6rem;
    color: #939393;}
    .rounded-10{border-radius: 10%;}
.fa-clock.bn-color{font-size: 0.6rem;
    color: #939393;}
.header,.time{padding:0}
.topbar{background: #e5e5e5;}
.mainBackground{background:#21372b}
.mainBackground{background:#21372b}
.FotterBackground{background:#242424}
ul,li{list-style: none;margin:0;padding:0}
.topbar li a,.time{color:#fff;font-size:12px}
.dropdown-menu[data-bs-popper]{right:0}
.dropdown-menu .dropdown-submenu{left:-100%;top:0}
.topbar{background:{{ $info->maincolor }}}
.primery-background{ background:{{ $info->seconderycolor }} }
.fotter-backround,.fotter-backround-2 { background:{{ $info->thirdcolor }}}
.swiper-news .image{height:160px;overflow: hidden;}
.swiper-container {
  width: 100%;
  /* max-width: 800px; */
  height: auto; /* Allow dynamic height adjustment */
  padding-bottom: 5px;
  overflow: hidden;
  position: relative;
  /*space for the scrollbar*/
}
.swiper-wrapper {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.swiper-slide {
  width: auto;
}
.swiper-slide a {
  display: block;
  color: white;
  text-align: center;
  padding: .3em .8em;
  text-decoration: none;
}


/* Styling the scroll bar for dark mode */

.nav-link{font-weight:bold}
/* nav{box-shadow:0 0 4px rgb(0 0 0 / 24%)} */
.nav-item{
    display: flex;
    align-items: center;
}
.border-right {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-top {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.headtitle{
    width: 7px;
    height: 22px;
    position: relative;
    background: #000;
    display: flex;
    border-radius: 6px;
}
.cheadtitle{
    width: 7px;
    height: 4px;
    position: relative;
    background: #000;
    display: flex;
    border-radius: 6px;
}
.links{height:70px}
.links .swiper-slide{
    height: 40px;
}
.swiper-slide ul{position:absolute;bottom:-15px;right:0;height:100%;display:flex;height:0;transition:all 0.3s ease-in-out;background-color: #fff;overflow: hidden;z-index: 9999;}
.swiper-slide ul a{color:#fff;width: max-content;}
.swiper-slide:hover ul{height: auto;
    width: auto;}
.fs-10{font-size: 5px !important;}
.fs-8{font-size: 10px !important;}
.ts-image{position: relative;}
.s-image{     height: 100px;
    border-radius: 20px;
   }
   .round-image{border-radius: 50px!important;height:100px;width:100px;overflow: hidden;}
.ts-image::after{content:'';position: absolute;width: 100%;height: 100%;right:0;top:0;
    background: linear-gradient(0deg,rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.53) 18%, rgba(255, 255, 255, 0.51) 100%);}
img.rounded,.mainpost.rounded{border-radius: 20px!important;}
.mainpost {height:180px;overflow: hidden;}
.lastposts .mainpost {height:130px;overflow: hidden;}
img.full-rounded{border-radius: 50px!important;}
.swiper-important .swiper-wrapper{padding-bottom:40px}
.swiper-pagination{width: 100%;bottom:20px}
.swiper-pagination-clickable .swiper-pagination-bullet{margin:0 3px}
#expedit{
    position: fixed;
    bottom: -80px;
    max-height: 100px;
    width: 100%;
    background: rgb(0 0 0 / 92%);
    transition:ease-in-out 0.3s;
    z-index: 9999;
}
.show{bottom:0 !important}
#expedit .swiper-wrapper{height:80px !important;    flex-direction: column;}
#expedit  .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: #fff; */
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff
  }
  #expedit .swiper-pagination-bullets {
    right: 8px;
    left: auto;
    top: 57px;
    bottom: 0;
    /* transform: translate3d(0px, -50%, 0); */
}
#expedit .swiper-pagination-bullet-active {
    opacity: 1;
    background: #eeeeee;
}
#expedit .swiper-pagination-bullet {
    background: #bfbfbf;
    
}
.closer{position: absolute;
    width: 30px;
    height: 20px;
    background:rgb(0 0 0 / 92%);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    top: -10px;
    left: 30px;
    transform: translate(-50%, -50%);
    cursor: pointer;}
 .closer::before{
    content: "";
    position: absolute;
    top: 8px;
    border-top: 7px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    cursor: pointer;
    left: 8px;
    transition:ease-in-out 0.3s

} 
.closer.close::before{
    rotate: 180deg;
}

.category-title{ background:#000;top:10%}
.show-date {
    background: #f8f9fa;
    bottom: 0px;
    border-bottom-right-radius: 13px;
    box-shadow: 1px 1px 11px #ccc;
}
.bg-dark .show-date {
    background: #212529;
    box-shadow: 1px 1px 11px #0e0e0e;
    ;
}
.fs-7{
    font-size: 1rem;
}