@import url('https://fonts.googleapis.com/css?family=El Messiri&display=swap');
@import url('https://fonts.googleapis.com/css?family=El Messiri&display=swap');

body {
  direction: rtl;
  text-align:right;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  font-family:'El Messiri';
  background: #fff;
}

input {
  border-color: transparent;
  background-color: #fafafa;
  font-size: 1.2rem !important;
  text-align: right;
}

.buttons button {
  position: relative;
  background-color: #005570;
  border: none;
  font-size: 20px;
  color: #FFFFFF;
  padding: 5px;
  width: 150px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  margin: 5px 60px;
}

#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#wrapper.toggled {
padding-right: 250px;
}

#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 250px;
width: auto;
height: 175%;
margin-right: -250px;
overflow-y: auto;
background: #efeeee;/*---new----*/
border: #999999;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
width: 250px;
}

#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: 0px;
}


/* Sidebar Styles */

.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}

.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}

.sidebar-nav li a {
display: block;
text-decoration: none;
color: #000;
}

.sidebar-nav li a:hover {
text-decoration: none;
color: blue;
background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}

.sidebar-nav>.sidebar-brand a {
color: #000;
}

.sidebar-nav>.sidebar-brand a:hover {
color: blue;
background: none;
}

@media(min-width:768px) {
#wrapper {
  padding-left: 0;
}
#wrapper.toggled {
  padding-right: 250px;
}
#sidebar-wrapper {
  width: 0;
}
#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}
#page-content-wrapper {
  padding: 20px;
  position: relative;
}
#wrapper.toggled #page-content-wrapper {
  position: relative;
  margin-right: 0;
}
}

/*----------bootstrap-navbar-css------------*/
/*.navbar-bg {
  background-color: #efeeee;
  padding: 12px 30px;
  width: auto;
  height: 60px;
  position: fixed;
  display: flex;
  flex-direction: row-reverse;
  
}
*/
/*.navbar-text {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  align-items: baseline;
  position: fixed;
}*/
/*
.navbar-text a {
  color: #000;
  text-decoration-line: inherit;
}
 ------------ */

/*  
.scroll {
  width: auto;
  height: 150px;
  overflow-y: scroll;
}*/
/* 
.scroll2 {
  width: auto;
  height: 150px;
  margin:22px ;
} */
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        
        }

        body {
            background-color: #f5f5f5;
            transition: margin-right 0.3s ease;
        }

        /* زر التحكم في الشريط الجانبي */
        .toggle-sidebar {
               display: none; /* مخفي افتراضياً */
            position: fixed;
            top: 20px;
            right: 20px;
            background: #2c3e50;
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 20px;
            cursor: pointer;
            z-index: 1001;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }

        .toggle-sidebar:hover {
            background: #34495e;
            transform: scale(1.05);
        }

        /* الشريط الجانبي */
        #sidebar-wrapper {
            position: fixed;
            top: 0;
            
            width: 250px;
            height: 100vh;
            background: #2c3e50;
            color: white;
            overflow-y: auto;
            transition: transform 0.3s ease;
            z-index: 1000;
            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        }

        /* حالة الشريط الجانبي المخفي */
       /* #sidebar-wrapper.hidden {
            transform: translateX(100%);
        }*/

        /* تعديل الجسم عند فتح الشريط الجانبي */
        body.sidebar-open {
            margin-left: 300px;
        }

        /* تحسينات للشريط الجانبي */
        .sidebar-nav {
            padding: 20px 0;
        }

        .sidebar-nav li {
            list-style: none;
            padding: 10px 20px;
        }

        .sidebar-nav li.sidebar-brand {
            padding: 15px 20px;
            background: rgba(255,255,255,0.1);
        }

        .sidebar-nav span {
            font-weight: bold;
            color: #ecf0f1;
            display: block;
            margin-bottom: 10px;
            font-size: 16px;
        }

        .filter-input.search {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            background: #ecf0f1;
            color: #2c3e50;
        }

        .filter-input.search::placeholder {
            color: #7f8c8d;
        }

        .scroll {
            max-height: 300px;
            overflow-y: auto;
            padding-right: 5px;
        }

        .scroll::-webkit-scrollbar {
            width: 6px;
        }

        .scroll::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
        }

        .filter {
            margin-left: 10px;
        }

        .sidebar-nav label {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 5px 0;
            transition: background 0.2s;
            border-radius: 4px;
            padding-left: 10px;
        }

        .sidebar-nav label:hover {
            background: rgba(255,255,255,0.1);
        }

        hr {
            border: none;
            height: 1px;
            background: rgba(255,255,255,0.2);
            margin: 15px 0;
        }

        /* تصميم متجاوب */
        @media (max-width: 768px) {
            #sidebar-wrapper {
                width: 250px;
            }
            
            body.sidebar-open {
                margin-right: 250px;
            }
            
            .toggle-sidebar {
                right: 10px;
                top: 10px;
            }
        }
   /* حالة الشريط الجانبي المخفي للشاشات الصغيرة */
        @media (max-width: 480px) {
            #sidebar-wrapper.mobile-hidden {
                transform: translateX(100%);
            }
        }

        @media (max-width: 480px) {
            
            
              .toggle-sidebar {
                display: block !important; /* إظهار الزر فقط في الشاشات الصغيرة */
            }
            #sidebar-wrapper {
                width: 50%;
            }
             #sidebar-wrapper {
                width: 70%;
                position: fixed;
                height: 100%;
                z-index: 1000;
                transform: translateX(100%);
            }
            
            #sidebar-wrapper.hidden {
                transform: translateX(100%);
            }
            
            #sidebar-wrapper:not(.hidden) {
                transform: translateX(0);
            }
            
            body.sidebar-open {
                margin-right: 0;
                 overflow: hidden; /* منع التمرير عند فتح الشريط الجانبي */
            }
        }
/* ------------------- */

.pen-title {
  color: #333;
  margin-bottom: 0;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
}

.pen-description {
  color: #333;
  margin-bottom: 3rem;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
}
.pen-description a {
  color: #333;
  text-decoration: underline;
}

a {
  text-decoration: none;
  padding: 0 12px;
}
a:hover {
  text-decoration: underline;
}

img {
  height: auto;
  max-width: 100%;
}

.wrap {
  max-width: 85.375rem;
  margin: 0 auto;
}

.image-as-background {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.screen-reader-text {
  height: auto;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
}
.screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus {
  height: auto;
  width: auto;
  background-color: #000000;
  border-radius: 2px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #333;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  left: 0.3125rem;
  line-height: normal;
  padding: 0.9375rem 1.4375rem 0.875rem;
  text-decoration: none;
  top: 0.3125rem;
  z-index: 100000;
}

.block-item {
  display: flex;
  justify-content: center;
  align-items: center;
  /*width: 20%;======= */
  color: #333;
  float: right;
  margin-bottom: 2.1875rem;
  text-align: center;
}

@media screen and (min-width: 40rem) {
  .block-item {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 24.7615653177%;
  
  }
  .block-item:last-child {
    margin-right: 0;
  }
  .block-item:nth-child(3n) {
    margin-right: 0;
  }
  .block-item:nth-child(3n+1) {
    clear: left;
  }
}

.block-item h1 {
  margin: 9px;
 font-size: 1.2em;
 font-family: 'El Messiri';
}

.block-item img {
  border-radius: 100%;
  width: 210px;
  height: 210px;
   border: 1px solid #005570;  /* border around image (you can change color & thickness) */
  padding: 10px;           /* space between image and border */
  background: #fff;        /* background behind border */
  margin: 10px;  
}
.block-item h3{
    display: block;
    font-size: 1.2em;
    margin:5px;
    font-family: 'El Messiri' ;
}
.block-item p {
  display: block;
  margin:12px;
  font-size: 1em ;
  font-family:'El Messiri';
}
/*  */
.social-icons {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width:auto;
margin: 0 120px;
font-size: 22px;

}
.social-icons a i{
position: relative;
z-index: 3;
text-align: center;
width: 100%;
height: 100%;
line-height: 40px;
}
.social-icons a.fb i{
color: rgba(40,57,101,.9);
}

.view-radio {
  display: none;
}
.view-radio + label {
  transition: all 0.2s ease-in-out;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 600;
 margin: 20px 10px; /************/
}

.view-radio + label:hover {
  color: #333;
}

.view-radio:checked + label {
  color: rgba(40,57,101,.9);/*****************/
}

.list-view-radio:checked ~ .content-container .block-item {
  width: 98%;
  margin: 0px 10px;/*===================*/
  transition: all 1s ease-in-out;
  text-align: right;/********/
}

@media screen and (min-width: 48rem) {
  .list-view-radio:checked ~ .content-container .block-item {
    min-height: 18.75rem;
  }
}
.list-view-radio:checked ~ .content-container .block-item img {
  height: 8rem;
  width: 8rem;
  float: left;
  margin: 10px;
}

.list-view-radio:checked ~ .content-container .block-item .entry-content {
  overflow: hidden;
}
/*  */
.container{
   flex-wrap: wrap;
  min-height: 100px;
  padding: 10px 20px;
  border-radius: 30px;
  background-color: white;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  position: relative;
  z-index: 3;
  margin: 0 12px;/*=============*/
}
/*
.container:after {
content: "";
display: block;
width: 190px;
height: 300px;
background: rgba(40,57,101,.9);
position: absolute;
animation: rotatemagic 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both;
}*/
.Pagination{
display: inline-block;
  padding-left: 0;
margin:20px 0;
border-radius: 4px;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #005570;
  border-color: #005570;
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
  z-index: 2;
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination>li>a, .pagination>li>span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}