html,body{
       direction: rtl;
       text-align: right;
       display: flex;
       min-height: 100vh;
       font-size: 13px;
       margin: 0;
       padding: 0;
       flex-direction: column;}

body{
    font-weight: 300;
    font-size: 13px;}
main{
    flex: 1;}
*{
    
    box-sizing: border-box;
    scroll-behavior: smooth ;}
@font-face {
    font-family: Kufi-fun;
    src: url(fonts/Reem_Kufi_Fun/ReemKufiFun-VariableFont_wght.ttf);}
@font-face {
    font-family: Kufi;
    src: url(fonts/Reem\ kufi/ReemKufi-VariableFont_wght.ttf);}
@font-face {
    font-family: Amiri;
    src: url(fonts/Amiri/Amiri-Bold.ttf);}  
@font-face {
    font-family: AmiriQuran;
    src: url(fonts/Amiri_Quran/AmiriQuran-Regular.ttf);} 
@font-face {
    font-family: CairoPlay;
    src: url(fonts/Cairo_Play/CairoPlay-VariableFont_slnt\,wght.ttf);}  
@font-face {
    font-family: Handjet;
    src: url(fonts/Handjet/Handjet-VariableFont_ELGR\,ELSH\,wght.ttf);} 
@font-face {
    font-family: Jomhuria;
    src: url(fonts/Jomhuria/Jomhuria-Regular.ttf);}  
@font-face {
    font-family: Marhey;
    src: url(fonts/Marhey/Marhey-VariableFont_wght.ttf);}   
@font-face {
    font-family: Ruwudu;
    src: url(fonts/Ruwudu/Ruwudu-Regular.ttf);}   
@font-face {
    font-family: Vibes;
    src: url(fonts/Vibes/Vibes-Regular.ttf);}

/*_______________________azkar notifiction______________________________________*/
        
.alert-box {
            position: fixed;
            top: 0;
            height: 12vh;
            margin-top: 40px;
            z-index: 10000;
            width: auto;
            bottom: 20px;
            padding: 15px;
            font-family: Amiri;
            background-color: ivory;
            border: 3px solid rgb(1, 1, 21);
            border-radius: 5px;
            font-size: 18px;
            color: rgb(16, 16, 76);
            display: none;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}
/*______________________________________________________________________________*/


/*________________________________header________________________________________*/
nav{
    width: 100%;
    background-color: rgb(16, 16, 76);
    display: flex;
    align-items: center;
    height: 30vh;
    position: relative;}
.menu-icon{
      width: 200px;
      height: 100%;
      margin-right: 30px;
      background-size: cover;
      background-repeat: none;
      border: none;}
.menu-icon img{
    height: 100%;
    width: 100%;}
.mobile-menu-icon { display: none;}
.menu-items{
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center; }
.menu-items ul{
    display: flex;
    padding-left: 20px;
    width: 100%;
    gap: 30px;}
.menu-items ul li {
    width: 120px;
    margin-top: 10px;
    margin-left:10px ;
    border: #ffffff;
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: beige;
    border-radius: 20%  0% 20% 0%;
    height: 45px;
    list-style: none;}
.menu-items ul li a {
    color: rgb(16, 16, 76);
    font-family: CairoPlay;
    font-weight: 500;
    font-size: 1.5em;
    width: 100%;
    height: 100%;
    text-decoration: none;}
#selected{
        background-color: red;
        font-family: Kufi;
        color: beige;
        border: 3px black solid;
        font-size: 1.7em;}
.logo{
    height: 100%;
    width: 15%;
    display: flex;
    align-items: center; }
.logo h1{
    color: beige;
    font-size: 3.9em;
    cursor: pointer;
    text-align: center;
    font-family:Kufi;
    margin-left: 5px;}
.menu-items ul li a:hover{
    background-color:red;
    color:beige;}
#header-social{
    display: none;}
/*______________________________________________________________________________*/


/*________________________back graound and search section_______________________*/
.background{
    top: 0;
    width: 100%;
    height: 100vh;
    opacity: 1;
    background-image: url("images/background.jpg");
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:cover;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
.div-search{
    width: 700px;
    height: 10vh;}
.div-search:hover{
    border: 1px solid blue;}
.search{
    width: 90%;
    height: 100%;
    opacity: 0.6;
    font-size: 1.5em;
    padding-right: 20px;
    font-family:CairoPlay ;}
.button{
    height: 100%;
    width: 10%;
    float: right;
    font-size: 2em;
    font-family: CairoPlay;
    background-color:beige;
    color:rgb(16, 16, 76);
    cursor: pointer;}
.button:hover{
    background-color: rgb(16, 16, 76);
    color: beige;}
/*______________________________________________________________________________*/

    

/*_____________________________all news section_________________________________*/
.all-news-header{
    width: 100%;
    top: 0;
    height: 10vh; }
.all-news{
    display: flex;
    background-color: #201c09;
    flex-direction: column;
    min-height: 70vh;
    border: 2px grey solid;
    background-color: #f9f9f9;}
.all-news-header ul{
    list-style-type: none;
    display: flex;
    padding: 0;
    margin: 0;
    flex-direction: row;
    width: 100%;
    height: 100%;}
.all-news-header ul li{
    color:#00477d;
    font-size: 2em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Marhey;
    width: 25%;
    height: 100%;
    border: 3px solid rgb(155, 155, 135);}
.all-news-header ul li.active{
    background-color: #47433F;
    color: #ffffff;}
.all-news-header ul li:hover{
    background-color: #47433F;
    color: #ffffff;}
.all-news-content{
    height:auto ;
    width: 100%;}
/*______________________________________________________________________________*/



/*___________________________moktatf news section_______________________________*/
.title{
    text-align: center;
    font-size: 3em;
    cursor: pointer;
    font-family: Kufi;
    color: rgb(16, 16, 76);}
.news-section{        
    width: 100%;
    padding: 30px 0px;
    display: flex;
    background-color: #4a5c6a2a; 
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;}
.new1{
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom:20px ;
    height:50vh;
    width: 200px;
    align-items: center;
    display: inline-block;
    background-color: beige;
    border: 1.5px solid rgba(0, 0, 0, 0.601);
    box-shadow: 10px;
    box-shadow:0 0 15px rgba(4, 4, 18, 0.968);
    cursor: pointer;}
.new1:hover{
    transform: scale(1.1);}
.news1-img{
    width: 100%;
    height: 70%;
    margin-right:0;
    border-bottom:0.5px solid rgb(16, 16, 76) ;
    background-size:cover;
    background-color: rgb(16, 16, 76);
    background-repeat: no-repeat;}
.news1-img img{
    width: 100%;
    height: 100%;}
.news1-h{
    width: 100%;
    height: 30%;}
.news1-h h1{
    font-size: 1em;
    color: rgb(16, 16, 76);
    font-family:CairoPlay ;
    margin-right: 8px;}
/*______________________________________________________________________________*/


/*____________________________praying time section______________________________*/
#prayer-times h2 {
    font-size: 24px;
    cursor: pointer;
    color: #f4e7a0;
    font-size: 3.2em;
    font-family: Kufi;
    margin-bottom: 10px;}
#prayer-times p{
    font-size: 2em;
    margin: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: aliceblue;
    padding: 0;
    font-size: 18px;}
#prayer-times-list {
    list-style: none;
    font-size: 2em;
    margin: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: aliceblue;
    padding: 0;
    font-size: 18px;}
#prayer-times {
        text-align: center;
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
        margin: 20px 0;}       
#prayer-times h2 {
        font-size: 24px;
        margin-bottom: 10px;}        
#prayer-times-list {
        list-style: none;
        padding: 0;
        font-size: 18px;}
/*______________________________________________________________________________*/
 

/*________________________________Azkar section_________________________________*/
.all-azkar a{
    width: 90px;
    height: 130px;
    margin: 30px;
    display: flex;
    flex-direction: column;
    margin-bottom: 70px;
    background-size:cover;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 1.5em;
    font-family: Amiri;
    color: rgba(21, 1, 41, 0.974);
    text-decoration: none;}
.all-azkar a:hover{
    transform: scale(1.1);}
/*______________________________________________________________________________*/

/*_____________________________footer___________________________________________*/
footer {
    width: 100%;
    height: 35vh;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    background-color: rgb(16, 16, 76);
    color: beige;
    bottom: 0;}
footer div{
    height: 100%;
    background-size: cover;}
.footer-list{
    float: left;
    width: 50%;}
.ul1{
    font-size: 1.6em;
    width: 100%;
    height: 95%;
    margin-top: 10px;
    display: block;
    justify-content: space-between;
    padding-right: 100px;
    font-family:Amiri ;}
footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:30vh;}
footer ul li a{
    cursor: pointer;
    margin-right:5px ;
    color: beige;}
footer ul li a:hover{
    color: blue;}
.footer-copy{
    float: right;
    width: 40%;
    height: 50%;
    float: none;}
.footer-copy p{
    margin-top: 40px;
    text-align: center;
    cursor: pointer;
    color: white;
    font-family:Amiri ;}
.footer-icon{
     width: 200px;}
.footer-icon img{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;}
.footer-social{
    float: right;
    display: flex;
    width: 700px;
    height: 100px;
    margin-left: 50px;
    border: beige solid 1.5px;
    justify-content: center;
    align-items: center;
    color: beige;
    float: none;
    text-align: center;}
.footer-social a{
    text-decoration: none;}
.footer-social h3{
    font-size: 2em;
    cursor: pointer;
    margin-left: 50px;}
.footer-social a i{
    color: beige;
    font-size: 30px;
    margin-left: 20px;}
.footer-social a:hover{
    transform: scale(1.3);}
/*_____________________________________________________________________________*/



/*____________________lesssn,khotab style_______________________________________*/
.mainclass{
    display: flex;
    flex-direction: column-reverse;}
.main-div{
    background-color: rgba(226, 226, 226, 0.862);
    border: solid 1.1px rgb(16, 16, 76);
     height: 200px;
     box-shadow:0 0 15px rgba(5, 5, 21, 0.601) ;
     margin: 40px 10px;}
#audio-2{
    background-color: white;}
.div-img{
    width: 25%;
    border-left: solid 1.1px rgb(16, 16, 76);

    height: 100%;
    background: rgba(255, 255, 240, 0.442);
    display: inline-block;
    float: right;
    background-size:cover;
    background-repeat: no-repeat;
    background-position-x: right;}
.div-img img{
    width: 100%;
    height: 100%;}
.div-p{
    display: inline-block;
    float: right;
    font-size: 2em;
    cursor: pointer;
    width: 30%;
    color: rgb(16, 16, 76);
    height: 100%;
    margin-top: 0;
    padding-top: 10px;
    padding-right:10px ;}
.aud{
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 40%;
    align-items: center;}
.div-audio{
    display:block;
    width: 100%;
    height: 100px;
    padding-top: 20px;
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 10px;}
.div-audio audio{
    width: 100%;
    height: 100%;}
.div-button{
      /*margin-top: 20px;*/
      width: 50px;
      height: 50px;
      margin-top: 20px;}
.div-button:hover{
    transform: scale(1.3);}
.div-button i{
    color: rgb(16, 16, 76);
    font-size: 40px;}
/*______________________________________________________________________________*/


/*______________________Contact style___________________________________________*/
.content h1{
    font-family: Kufi;
    font-size: 3em;
    color: rgb(16, 16, 76);
    margin-right: 300px;}
.content p{
    font-family:AmiriQuran ;
    margin-right: 300px;
    font-size: 1.5em;}
.form_settings{ margin: 15px 0 0 0;}
.form_settings span{
  float: right;
  text-align: center; 
  width: 200px; 
  font-size: 1.2em;
  font-family: Amiri;
  margin-right: 20px;
  text-align: right;} 
.form_settings input{  
  padding: 5px;
  font-size: 1.5em;
  margin-right: 20px;
  width: 500px;
  font-size: 1em;
  font-family: Amiri;
  height: 40px;
  border: 1px solid rgb(16, 16, 76); 
  background: #FFF; 
  color: #47433F;}
.form_settings textarea{ 
  padding: 5px;
  margin-right: 20px;
  width: 500px;
  font-size: 1em;
  font-family: Amiri;
  height: 40px;
  border: 1px solid rgb(16, 16, 76); 
  background: #FFF; 
  color: #47433F;}
.form_settings .submit{ 
  border: 0; 
  width: 99px;
  margin-right: 20px;
  margin: 0 0 0 212px; 
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  font-family: Amiri ;
  background: rgb(16, 16, 76); 
  color: beige;}
#sub{margin-right: 20px;}
.form_settings textarea{
    font-size: 1em; 
    height: 200px;
    width: 500px;}
.form_settings select{
    font-size: 1em; 
    height: 200px;
    background-color: deeppink;
    width: 500px;}
.form_settings select{ width: 310px;}
.form_settings .checkbox{
  margin: 4px 0; 
  padding: 0; 
  width: 14px;
  border: 0;
  background: none;}
/*______________________________________________________________________________*/


/*_________________________moktatf______________________________________________*/
.main-moktatf{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;}
.moktatf{
    display: flex;
    flex-direction: column;
    width: 280px;
    height: 60vh;
    border: 1.5px solid rgba(0, 0, 0, 0.601);
    box-shadow: 10px;
    box-shadow:0 0 15px rgba(4, 4, 18, 0.968);
    cursor: pointer;
    margin: 40px;
    background-color: rgba(226, 226, 226, 0.862);}
.moktatf-button:hover{
    transform: scale(1.2);}
.moktatf-img{
    width: 100%;
    background-color: #ffffff;
    border-bottom: 2px solid rgb(16, 16, 76);
    height: 60%;}
.moktatf-img img{
    background-size: cover;
    width: 100%;
    height: 100%;}
.moktatf-aud{
    width: 100%;
    display: flex;
    height: 25%;
    justify-content: center;
    align-items: center;
    flex-direction: column;}
.moktatf-aud audio{
    width: 95%;
    margin-top:10px ;
    height: 30px;} 
.moktatf-button i{
    color: rgb(16, 16, 76);
    font-size: 30px;
    margin: 10px 0px;}  
.moktatf-p{
    width: 100%;
    height: 15%}
.moktatf-p p{
    overflow: hidden;
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    color: rgb(16, 16, 76);
    font-family:CairoPlay ;
    margin-right: 8px;}
   
/*______________________________________________________________________________*/



/*__________________________Quraan_____________________________________________*/
.options{ 
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;}
.options a{
   width: 80%;
   height: 100px;
   margin: 30px;
   display: flex;
   box-shadow:0 0 15px rgba(4, 4, 18, 0.968);
   /*border: 1px solid rgb(16, 16, 76); */
   border-radius: 10px;
   align-items: center;
   font-family: Amiri;
   justify-content: center;
   background-color: whitesmoke;
   font-size: 2em;
   color: rgb(16, 16, 76);
   text-align: center;
   text-decoration: none;}
.options a:hover{
  transform: scale(1.1);}
.quraan-list{
    background-color: rgba(226, 226, 226, 0.862);
    border: solid 1.1px rgb(16, 16, 76);
     height: 200px;
     display: flex;
     box-shadow:0 0 15px rgba(5, 5, 21, 0.601) ;
     margin: 40px 10px;}
.quraan-list p{
    width: 40%;
    height: 100%;
    font-size: 2em;
    padding-right: 10px;
    font-family: Amiri;
    color: rgb(16, 16, 76);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;}
.quraan-list div{
    width: 60%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
.quraan-list div audio{
    width: 70%;}
.quraan-list div i{
    font-size: 30px;
    margin-top: 20px;
    color: rgb(16, 16, 76);}
.quraan-list div i:hover{
    transform: scale(1.3);}
/*_____________________________________________________________________________*/


/*__________________________Azkari_____________________________________________*/
.azkari{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;}
.azkari p{
    background-color: rgba(255, 255, 240, 0.686);
    border: solid 1.1px rgb(16, 16, 76);
    height: auto;
    width: 80%;
    display: flex;
    text-align: center;
    padding: 15px;
    font-size: 1.5em;
    box-shadow:0 0 15px rgba(5, 5, 21, 0.601) ;
    margin: 30px 10px;
    font-family: Amiri;}
.azkari span{
    width: 80px;
    margin-left: 20px;
    background-color: rgb(16, 16, 76);
    color: white;
    font-size: 1em;
    display: flex;
    margin-right: 0;
    justify-content: center;
    align-items: center;
    height: 70px;}
/*_____________________________________________________________________________*/



@media screen and (max-width:900px) {

    /*_______header________________*/
    nav ul{
        position: absolute;
        top: 0;
        margin-top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        flex-direction: column;
        text-align: right;
        background-color: rgb(16, 16, 76);
        height:700px;
        padding-right: 80px;
        gap: 0;
        overflow: hidden;}
    .menu-items ul li{
        width: 250px;}
    #items1{
        margin-top: 79px;}
    .logo{display: none;}
    .mobile-menu-icon {
	    display: block;
	    cursor: pointer;
	    color: rgb(16, 16, 76);
	    font-size: 25px;
	    top: 15px;
	    right: 15px;
	    background-color: beige;
        margin-right: 14px;
	    padding: 6px 15px;
	    z-index: 1000;}
    .menu-icon{
        width: 200px;}
    #menulist{
        transition: all 1.5s;}
    /*_____________________________*/

    /*____background section_______*/
    .div-search{
        width: 300px;
        height: 8vh;}
    .search{
        width: 80%;
        opacity: 0.6;
        font-size: 1.5em;}
    .button{
        display: flex;
        font-weight: 500;
        font-size: 1.7em;
        align-items: center;
        justify-content: center;
        width: 20%;}
    /*_____________________________*/

    /*_________lesson khotab_______*/
    .div-button{
        margin-top: 5px;}
    .div-button i{
        font-size: 30px;}
    .mainclass{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap-reverse;
            flex-direction: row-reverse;}
    .main-div{
            display: flex;
            flex-direction: column;
            width: 300px;
            justify-content: center;
            height: 70vh;}
    .aud{
            width: 100%;
            height: 30%;}
    .div-audio audio{
            width: 100%;
            height: 50px;} 
    .div-button i{
            margin-bottom: 30px;}  
    .div-img{
            width: 100%;
            height: 50%;}    
    .div-p{
            width: 100%;
            height: 25%;}
    .div-p p{font-size:0.7em;}
    /*_____________________________*/

    /*_________footer______________*/
    .footer{
        display: flex;
        justify-content: space-between;}
    .footer-social a i{
        margin: 0;
        margin-left: 15px;
        font-size: 25px;}
    .footer-social{
        width: 350px;
        height:80px ;
        margin: 0;
        border-width: 1px;
        margin-left: 10px;}
    .footer-social h3{
        display: none;}
    .footer-list{
        display: none;}
    .footer-icon{
        width: 200px;}
    .footer-copy p{
        font-size: 10px;
        margin-left: 3px;}
    /*_____________________________*/

    /*____________contant__________*/
    .content h1, .content p{margin-right: 10px;}
    .form_settings input, .form_settings textarea{width: 300px;}
    /*_____________________________*/

    /*__________Quraan_____________*/
    .quraan a{
        font-size: 1.5em;}
    .quraan-list{
        flex-direction: column;
        height: 200px;}
    .quraan-list p{
        width: 100%;
        font-size: 1.3em;}
    .quraan-list div audio{
        width: 100%;}
    .quraan-list div i{
        margin-bottom: 10px;}
    .quraan-list div{
        width: 100%;}
    /*_____________________________*/

    /*__________all news___________*/
    .all-news-header ul li{
        font-size: 1.3em;}}
@media screen and (max-width:1350px) and (min-width:801px) {

    .menu-items ul li{
        width: 290px;
        height: 30px;}
    .menu-items ul li a{
        font-size: 0.7em;}
    #selected{font-size: 1.1em;}
    .logo h1{font-size: 2.8em;}
    .div-search{
        width: 500px;
        height: 11vh;}
    .search{width: 85%;}
    .div-p p{
        font-size:0.7em;}
    .button{width: 15%;}
    .content h1, .content p{
        margin-right: 10px;}
    .footer-social h3{
        margin-right: 10px;}
    .footer-list ul{
        margin-left: 40px;}}