*{direction: rtl; padding: 0; margin: 0; outline: 0; }

#b25d{width:90%; margin-right:auto; margin-left:auto; height:auto;}

#header{width: 100%; height: 100px; margin-bottom: 15px;}
#header .r-header{float: right;}
#header .r-header img{ height: 100px;}
#header .l-header{float: left;}
/*  =========== ===================== start navbar ================================ */
#navbar{width:100%;background-color:#f3f3f3; height:40px; font-size: 20px; float: right;
display: block; border:#ddd 1px solid; border-radius: 8px; margin-bottom: 40px;}

#navbar .r-navbar{float: right; width: 70%;display:flex; flex-wrap: wrap;
 justify-content: space-between; line-height: 40px;}
#navbar .l-navbar{float: left; width: 15%; display:flex; flex-wrap: wrap;
 justify-content: space-between; line-height: 40px;}
#navbar .l-navbar img{height: 40px; }
/*  =========== ===================== end  navbar ================================ */

/* ============================== start r-area === and === l-area ========== */
#r-area{width: 65%; float: right;}
#r-area #article{width: 100%;  float: right; border-bottom: #000 solid 1px;
margin-bottom: 35px; }
#r-area #article #title{ margin-bottom: 10px;}
#r-area #article #title a{font-size: 30px; font-weight: bold;  margin-bottom: 10px;}
#r-area #article #pic {width: 100%; height: 30vh; margin-bottom: 20px;}
#r-area #article #pic img{width: 100%; height: 100%; border-radius: 8px;}
#r-area #article table{width: 100%; margin-bottom: 15px;  }
#r-area #article table tr{border: #ADD8E6 solid 1px; }
#r-area #article table td{padding: 5px;}
#r-area #article table td img{width:20px; height:20px;}
#r-area #article #s-article{width: 100%; font-size:20px; color: #696969; text-align: center;
   text-align: justify;}
#r-area #article #com{ text-align: left; font-weight: bold; margin-bottom: 5px; }
#r-area #article #com a{font-size: 20px;padding: 7px;border-radius: 8px; 
    background-color: #ADD8E6;  opacity:0.6; }
 #r-area table{ display: inline-block;}
#r-area td{float: right; margin-left: 15px; display: block;}
#r-area td a{color: #CE9424; }
/* =============  l-area */
#l-area{width: 25%; float: left; }
#blocks{width: 100%; margin-bottom: 15px;  border-radius: 8px;
border: solid 1px #ADD8E6;  padding: 7px;box-shadow: 3px 3px 3px 6px #f3f3f3;}
#blocks .adres{width: 100%; text-align: center; font-size: 20px; padding: 5px;}
#blocks .blocks{width: 100%; float: right; text-align: center;}

/* ============================== end r-area === and === l-area ========== */

/* ===================================   start footer  ============================================  */
 #footer{ background-color: #F3F3F3; text-align: center; font-size: 25px; color: #000;
   border: solid 1px #CE9424; border-radius: 8px; font-family:Droid Arabic Kufi; 
   font-weight: bold; letter-spacing: 3px;width: 100%;}
      
       /* ===================================   end  footer ============================================  */

/* ================ start page article.php ========================== */
#article{width: 100%; text-align: center;}
#article .title{font-size: 35px; font-weight: bold; margin-bottom: 15px;}
#article .pic{width: 100%; height: 50vh;margin-bottom: 15px;}
#article .pic img{width: 100%;height: 100%;}
#article .article{font-size: 25px; text-align: justify;line-height: 50px;}
#article .article img{width: 100%;}
/* ================ end page article.php ========================== */

/* ===================================   star  page cat.php ============================================  */
#cat{ width: 100%; display:flex; flex-wrap: wrap; justify-content: space-between; }
 .cat{width: 30%; height: 25%; border: solid 1px #F0FFFF;  border-radius: 8px;
  box-shadow: 3px 3px 3px 6px #f3f3f3;  }
  #cat .cat .pic{ width: 100%; height: 120px;}
  #cat .cat .pic img{width: 100%; height: 120px;}
  #cat .cat .title{ font-size: 18px;}
  #cat .cat .title a{ font-size: 18px; color: #696969;}
  #cat .cat .s_article{}
  /* ===================================   end  page cat.php ============================================  */


/* ===============  start page call.php ============================ */
#call{width: 80%; margin: auto; font-size: 20px;}
#call form{width: 100%; display: flex; justify-content: space-around; /* توسيط أفقي */
  flex-direction: column; align-items: center; /* توسيط رأسي */
text-align: right;}
#call form input{width: 100%; font-size: 20px; border-radius: 8px; 
border: solid 1px #000;}
#call form textarea{width: 100%; height: 200px;}
/* ===============  end   page call.php ============================ */

.stop{height: 50vh; width: 100%; background-color: rgb(142, 65, 46);
text-align: center; font-size: 35px;display: flex;
  justify-content: space-around; /* توسيط أفقي */
  flex-direction: column;
  align-items: center; /* توسيط رأسي */}
.no-stop{height: 50vh; width: 100%; background-color:rgb(0, 255, 183);
text-align: center; font-size: 35px;display: flex;
  justify-content: space-around; /* توسيط أفقي */
  flex-direction: column;
  align-items: center; /* توسيط رأسي */}

#clear{ clear: both;}
a{text-decoration: none;}
/* ====================    start size scren ============================ */
@media screen and (max-width: 600px)  {
  #header{width: 100%; height: 60px; margin-bottom: 15px;}
#header .r-header img{height: 60px;}
#navbar{ position: absolute;display: none;overflow: hidden;}
#r-area{width: 100%;}
#r-area #article #title a{font-size: 25px;}
#article{border-radius: 8px;border: solid 2px #ADD8E6; padding: 7px; border-bottom: none;
  box-shadow: 3px 3px 3px 6px #f3f3f3;}
#l-area{ position: absolute;display: none;overflow: hidden;}
}
/* ====================    end size scren ============================ */