@font-face {
    font-family: 'mohammad bold art 1';
    src: url('mohammadboldart1.woff2') format('woff2'),
        url('mohammadboldart1.woff') format('woff'),
        url('mohammadboldart1.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mohammad Head';
    src: url('MohammadHead.woff2') format('woff2'),
        url('MohammadHead.woff') format('woff'),
        url('MohammadHead.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'adwa-assalaf';
    src: url('adwa-assalaf-Bold.woff2') format('woff2'),
        url('adwa-assalaf-Bold.woff') format('woff'),
        url('adwa-assalaf-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'mylotus';
    src: url('mylotus.woff2') format('woff2'),
        url('mylotus.woff') format('woff'),
        url('mylotus.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SKR HEAD1 Decorative';
    src: url('SKR-HEAD1DecorativeItalic.woff2') format('woff2'),
        url('SKR-HEAD1DecorativeItalic.woff') format('woff'),
        url('SKR-HEAD1DecorativeItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}


*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;   
}

body
{
        font-family:adobe arabic !important;

}
#header
{
    background-image: url(../images/bk-head.png);
    background-size: cover;
    padding:20px 0 40px 0
}
.mene-sidebar
{
text-align: right;
}
.mene-sidebar img
{
height: 20px
}
 .ico-left img
{
    height: 20px;
    display:none;
}
 .ico-left a
{
margin-right: 22px
}
.search-head
{
text-align: center;
margin-top: 30px}
.search-head h4
{
font-weight: 700;
color: #87766D;
margin-bottom: 30px
}
.search-div
{

margin: 0 300px 0 250px;
 
}
.content-div
{
 background: #F2EADB 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
padding: 20px 0;  
display: inline-block;
}
.ico-input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color:#87766D;
    text-align: center;
    white-space: nowrap;
    background-color: transparent;
    border:0;
    border-radius: 0;
}
.input-search
{
border: none;
background: transparent;
    padding-right: 15px
}
.input-search::placeholder
{
color: #87766D}
.input-search:focus
{
    color: #87766D;
    background-color: transparent;
    border-color: none;
    outline: 0;
    box-shadow: 0 0 0 0 transparent;
}
.select-search:focus
{
    color: #87766D;
    background-color: transparent;
    border-color: none;
    outline: 0;
    box-shadow: 0 0 0 0 transparent;
}
.search-word
{
display: inline-block}
.select-search
{
width: 200px;
border: none;
background: transparent}
.col-auto1
{
border-left: 3px solid #87766D;
margin-left: 15px
}
.btn-search
{
    background: #CCB8AD;
    border-radius: 10px;
opacity: 1;
    color: #fff;
    padding: 20px 20px
}
.btn-search i
{
font-size: 20px;
}
.elshrouk
{
text-align: right
}
.basic-header
{
padding: 20px 0;
    border-bottom: 1px solid #fff
}
.elshrouk a
{
color: #fff;
margin-left: 30px;
font-size: 15px
}
.elshrouk i
{
margin-left: 3px}
.social-media
{
    text-align: left
}
.social-media a
{
color: #fff;
margin-left: 30px;
font-size: 15px
}
.social-media i
{
margin-left: 3px}
.bg-light
{
background: transparent!important
}
.link-header
{
color: #fff!important;
    margin-left: 15px
}
.bass-nav nav 
{
padding: .5rem 0 ;}
.contact-us a
{
background: #F99763;
padding: 2px 35px;
color: #fff;
border-radius: 7px;
margin-left: 25px
}
.link-header:hover
{
color: #F99763!important
}
.content
{
max-width: 1800px;

}
.content-header-right
{
text-align: right;
color: #fff;
margin:70px 100px 20px 0}
.content-header-right h4
{
    font-weight: 600;
    margin-bottom: 20px
}
.content-header-right p
{
color: #fff;
font-size: 15px}
.prev-linkk
{
    position: absolute;
    bottom: -50px!important;
    
}

.hr-top
{
width: 60px;
height: 3px;
background: #000;
margin-bottom: 4px}
.hr-bottom
{
    width: 60px;
height: 3px;
background: #000;
margin-top: 4px;
margin-right:50px
}
.content-about h4
{
font-weight: 600;
padding: 3px 0 }
.content-about p
{
margin-top: 15px;
color: #707070;
word-spacing: 3px}
.img-about
{
box-shadow: 0px 20px 99px #48484814;
border-radius: 20px;
opacity: 1;
}
#departments
{
background-image: url(../images/about-bk.svg);
    background-size: 100% 100%;
    padding: 50px 0 70px 0;
}
#departments h4
{
text-align: right;
font-weight: 600;
padding: 3px 0 }
.single-department
{
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 21px 34px 50px #00000012;
    border-radius: 20px;
opacity: 1;
padding: 20px 10px;
text-align: center;
margin: 50px 0;
min-height: 240px;
}
.single-department img
{
height: 90px;
    margin-bottom: 15px
}
.single-department h5
{
font-weight: 600}
.single-department p
{
    
font-size: 15px;}
#share
{
background:#FCF9F2;

    padding: 50px 0 70px 0;
}
#share h4
{
text-align: right;
font-weight: 600;
padding: 3px 0 }
#blogs
{
background: #fff;
    padding: 50px 0 70px 0;
}
#blogs h4
{
text-align: right;
font-weight: 600;
padding: 3px 0 }
.single-blog
{
border-radius: 20px;
opacity: 1;
background: #fff;

margin: 50px 0px 50px 10px;
box-shadow: 0px 7px 25px #A5A5A526;
}
.blog-detail
{
padding: 10px;
text-align: right}
.blog-detail h6
{
font-weight: 600;
font-size: 15px}
.blog-detail p
{
    color: #000000;
    font-size: 14px
}
.blog-detail a
{
margin-right: 2px;
color: #F99763}
.img-share
{
padding: 0 20px}
#footer
{
background:#fff;

    padding: 50px 0 10px 0;
}
.p-footer p
{
    margin-top: 10px;
    font-size: 15px;
    color: #707070
}
.links-footer
{
margin-top: 80px;
text-align: center;
}
.links-footer h5
{
font-weight: 600;
    color: #000000;
  
}
.links-footer ul
{
list-style: none;
}
.links-footer ul li
{
margin-bottom: 5px}
.links-footer ul li a
{
color: #000000}
.social-footer li 
{
display: inline-block;
margin-left: 5px;
background: #fff;
border-radius:7px;
opacity: 1;
    padding:5px 7px
}
.input-email {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #FFEBE1;
    border: 0;

    border-top-right-radius: 5px!important;
    border-bottom-right-radius: 5px!important;
        border-top-left-radius: 0px!important;
    border-bottom-left-radius:0 px!important;
}

.input-contact
{
border: none;
background: #FFEBE1;
    border-radius: 0;
      border-top-left-radius: 5px!important;
    border-bottom-left-radius: 5px!important;
        border-top-right-radius: 0px!important;
    border-bottom-right-radius:0 px!important;
    
}
.btn-subscribe
{
color: #fff;
background: #000;
padding: 1px 20px;
border-radius: 5px;
}
#departments1
{
background: #FFF;
    padding: 50px 0 70px 0;
}
#departments1 h4
{
text-align: right;
font-weight: 600;
padding: 3px 0 }
.social-contact
{
margin-top:50px}
.phone-con
{
margin-bottom: 20px}

.phone-con img
{
 background: #DF8759 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
    padding: 10px 13px;
    height: 40px;
}
.phone-con p
{
font-weight: 600}
.email-con
{
margin-bottom: 20px}

.email-con img
{
 background: #DF8759 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
    padding: 9px 11px;
    height:37px;
}
.email-con p
{
font-weight: 600}
.follow-contactt
{
margin-top: 20px}
.follow-contactt img 
{
    height: 45px
}
.follow-contactt a
{
    margin-left: 10px;
    margin-bottom: 10px
}
.head-contact
{
background: #87766D 0% 0% no-repeat padding-box;
border-radius: 20px 20px 0px 0px;
opacity: 1;
padding: 20px}
.head-contact h5
{
color: #fff;
font-weight: 600;
text-align: center}

.form-contact
{
    padding: 40px 20px
}
.input-contactt
{
 border: 1px solid #DAC69D;
border-radius: 5px;
background: #fff;
 padding: 13px 10px
}
.input-contactt::placeholder
{
color: #DAC69D }
.card-contact
{
    box-shadow:21px 35px 50px rgba(0,0,0,7%);
        border-radius: 0px 0px 20px 20px;

}
.btn-submit
{
background: #DAC69D 0% 0% no-repeat padding-box;
border-radius:10px;
opacity: 1;
color: #fff;
padding:8px 65px}
.bo5ary-carousl
{
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 2px solid #DAC69D;
border-radius: 10px;
opacity: 1;
padding: 10px}
.bo5ary-carousl h6
{
font-weight: 600;
color: #87766D
}
.hr-bo5ary
{
background: #DAC69D}
.bo5ary-carousl p
{
color: #707070;}
.carousel-control-next, .carousel-control-prev {
    position: absolute;
    bottom: -40px;
}
.carousel-control-prev {
        position: absolute;
    left:480px
}
.carousel-control-next {
        position: absolute;
    right:480px
}
.carousel-control-prev,.carousel-control-next 
{
background: #002433 0% 0% no-repeat padding-box;
border-radius: 5px;
opacity: 1;
padding: 10px;
width: 50px;
}
.rkm-7ades
{
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 2px solid #DAC69D;
border-radius: 10px;
opacity: 1;
padding: 20px
}

.rkm-7ades span
{
font-size: 22px}
.sidenav {
  height: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #fff;
  overflow-x: hidden;
    display: none;
    width: 20%

}
.mySidenav1
{
height: 100%;
  width: 80%;
  position: fixed;
  z-index: 1;
  top: 0;
      font-family:adobe arabic;

  left: 0;
  background-color: transparent;

}
.mySidenav1 *
{
    
     font-family:adobe arabic !important;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 18px;
  color: #000000;
      font-family:adobe arabic;
   
  display: block;
  transition: 0.3s;
    text-align: right
}
.sidenav a img
{
height: 18px;
margin-left: 10px}
.sidenav a:hover {
  color: #87766D;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  left: 0px;
  font-size: 30px;
    display: none;
    color: #fff
}

@media screen and (max-height: 450px) {
  .sidenav {}
  .sidenav a {font-size: 18px;}
}
.head-side
{
background: #87766D;
    text-align: center;
    padding: 25px 0;
     color: #fff;
    font-size: 13px
}
.links-sidebar
{
padding: 10px 20px }
#about
{
padding: 50px 0 0 0;
text-align: right}
#about p
{
font-size:18px}
#search-result
{
padding: 30px 0;
text-align: right
}
.p-result
{
color: #707070;
font-size: 16px;
font-weight: 600;
margin-bottom: 20px}
.head-result
{
font-weight: 600;
margin-bottom: 30px
}
.media-result{
    margin-top: 20px;
    border-bottom: 2px solid #DED5D0
}
.num-res
{
background: #FFAA7D 0% 0% no-repeat padding-box;
opacity: 1;
color: #fff;
padding:0px 7px;
border-radius: 50%;
margin-left: 5px}
.media-result h6
{
color: #87766D;
font-weight: 600;
font-size: 19px;
margin-bottom: 15px}
.span-media
{
color: #DED5D0;
font-size: 14px;
margin-right: 3px}
.desc-media
{
color: #707070;
font-weight: 500;
margin-bottom: 40px;}
#docu
{
padding: 100px 0
}
#docu div.nav-doc ul    { overflow-y: scroll;
    height: 600px;}
.book-she5
{
color: #fff;
background: #87766D 0% 0% no-repeat padding-box;
border: 1px solid #707070;
opacity: 1;
padding: 15px 0;
text-align: center;
margin-bottom: 40px;
margin-top: 20px}
.nav-doc
{
text-align: right}
.nav-doc .nav-link.active, .nav-doc.nav-pills .show>.nav-link {
    color: #F99763;
    background-color:transparent;
}
.li-tap 
{
margin-left: 7px}
.nav-doc .nav-link {
   color: #87766D;
    border-radius: 0;

}
.bm-line
{
  border-bottom: 2px solid #DED5D0;
    margin-bottom: 5px;
    margin-top: 7px

}
.collapse-ul-book
{
list-style: none;
margin-right: 20px}
.one-row
{

margin-bottom:6px
}
.one-row a
{
    color: #87766D;
text-decoration: none;
font-size: 15px;
}
.one-row a:hover {
    color:#F99763;
    text-decoration:none;
}
.collapse-ul-sec
{
    list-style: none;
margin-right: 10px
}
.sec-row a
{
    color: #BE7148;
text-decoration: none;
font-size: 13px}


.sec-row a:hover {
    color:#F99763;
    text-decoration:none;
}
.card-desc
{
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #ded5d0;
border-radius: 15px;
min-height:800px;
opacity: 1;
padding: 20px;
text-align: center!important;
margin-bottom: 120px}
 
.card-desc h5
{
color: #DF8759;
font-weight: 600;
margin-bottom: 20px}
.card-desc p
{
    color:#707070;
    font-weight: 500;
    font-family:adobe arabic;
}

.item-pag
{
border: none;
    color: #000;
 margin: 0 15px
}
.ico-pag:last-child .page-link {
   border-radius: 5px;
    border-color:#87766D!important;
    
}
.ico-pag i
{
 color: #87766D
 }

.ico-pag:first-child .page-link {
    border-radius: 5px;
    border-color:#87766D!important;
    
}

.ico-pag .page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0 0 0 0.2rem transparent;
}
.ico-pag .page-link:hover {
    color: #87766D!important;
    text-decoration: none!important;;
    background-color: #e9ecef!important;;
    border-color: #dee2e6!important;;
}
.item-pag:focus
{
        box-shadow: 0 0 0 0.2rem transparent;
    color: #87766D

}


@media(max-width:1200px) and (min-width:990px)
{
    .search-div
    {
    margin: 0 200px 0 200px;
}
}
@media(max-width:989px) and (min-width:767px)
{
  .search-div {
    margin: 0 50px 0 50px;
}
}
@media(max-width:766px) and (min-width:550px)
{
  .search-div 
    {
    margin: 0 ;
}
    .head-con
    {
         max-width: 750px;
}
     
}

@media(max-width:549px) and (min-width:478px)
{
  .search-div 
    {
    margin: 0 ;
}
    .head-con
    {
         max-width: 750px;
}
    .content-div {
  
    padding: 10px 0;

}
    .btn-search {
  
    padding: 10px;
}
    .select-search {
    width: 150px;
    }
}
@media(max-width:477px) and (min-width:406px)
{
      .search-div 
    {
    margin: 0 ;
}
    .head-con
    {
         max-width: 750px;
}
    .content-div {
  
    padding: 10px 0;

}
    .btn-search {
  
    padding: 10px;
}
    .select-search {
    width: 150px;
    }
}

@media(max-width:407px) and (min-width:0px)
{
  .search-div 
    {
    margin: 0 ;
}
    .head-con
    {
         max-width: 750px;
}
    .content-div {
  
    padding: 10px 0;

}
    .search-word {

    width: 100%;
    }
    .btn-search {
  
    padding: 10px;
        margin-top: 10px;
        width: 100%
}
    .select-search {
    width:100%;
        text-align: center
    }
    .col-auto1 {
    border-bottom: 3px solid #87766D;
    margin-left: 0;
        border-left: 0;
        margin-bottom: 5px
}
    .content-div {
   
    display:block;
}
}
@media(max-width:1200px)and (min-width:802px)
{

.sidenav {

    width: 30%

}
#mySidenav1
{

  width: 70%;
}
}
@media(max-width:801px)and (min-width:632px)
{

.sidenav {

    width: 35%

}
#mySidenav1
{

  width: 65%;
}
    .sidenav a {
    font-size: 16px;
}
}
@media(max-width:631px)and (min-width:480px)
{

.sidenav {

    width: 45%

}
#mySidenav1
{

  width: 55%;
}
    .sidenav a {
    font-size: 16px;
}
}
@media(max-width:497px)and (min-width:0px)
{

.sidenav {

    width:100%

}
#mySidenav1
{

  width: 0
}
    .sidenav a {
    font-size: 16px;
}

.sidenav .closebtn {

    display: block
}
}

 

.brand-small{ font-size:14px; color:#1d1d1d; opacity:.85; }

.brand-logo{
  height:130px;
  width:auto;
}


.topbar-brand {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: right;
    direction: rtl;
}


  display:flex;
  align-items:center;
  gap:10px;
}

.topbar-search input{
  width:360px;
  max-width:55vw;
  padding:10px 12px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.15);
  outline:none;
}

.topbar-search button{
  padding:10px 14px;
  border:0;
  border-radius:6px;
  background:#6f7273;
  color:#fff;
  cursor:pointer;
}

.topbar-brand{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.brand-small{ font-size:14px; color:#1d1d1d; opacity:.85; }

.brand-logo{
  height:120px;
  width:auto;
}

/* Nav */
.mainnav{
  background: #1f5461; /* أزرق مخضر */
 
    background-image: url('https://alfawzan.af.org.sa/themes/alfawzan/css/menubg1.png');  
  background-size:cover;
  border-top: 3px solid rgba(255,255,255,.15);
}

.mainnav-menu{
  list-style:none;
  margin:0;
  padding:12px 0;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.mainnav-menu a{
  color:#f3f3f3;
  text-decoration:none;
  padding:6px 2px;
  font-size:15px;
  opacity:.95;
}

.mainnav-menu a:hover{
  opacity:1;
  text-decoration:underline;
}

.mainnav-menu a.is-active{
  color:#ffd86b; /* لون تمييز للرئيسية مثل الصورة */
}

/* Responsive */
@media (max-width: 768px){
  .topbar-inner{ flex-wrap:wrap; }
  .topbar-search{ order:3; width:100%; margin-right:0; }
  .topbar-search input{ width:100%; max-width:100%; }
  .topbar-brand{ width:100%; align-items:flex-end; }
}

.topbar-brand {
   
    align-items: flex-start!important;
     
}

.is-highlight{
    outline: 2px solid #FFAA7D;
    background: rgba(255,170,125,0.15);
    border-radius: 8px;
    padding: 8px;
}
