@font-face {
  font-family: Urdu;
  font-style: normal;
  src:  url('../fonts/MehrNastaliq/Mehr_Nastaliq_Web2.0.woff') format('woff'),
        url('../fonts/MehrNastaliq/Mehr_Nastaliq_Web2.0.ttf') format('truetype');
}

@font-face {
  font-family: kufi;
  font-style: normal;  
  src:  url('../fonts/DroidKufi-Regular.woff') format('woff'),
        url('../fonts/DroidKufi-Regular.ttf') format('truetype');
}

@font-face {
    font-family: amiri;
    font-style: normal;    
    src: 
         url('../fonts/AmiriQuran-Regular.ttf')  format('truetype');
}

@font-face {
    font-family: hafs;
    font-style: normal;    
    src: url('../fonts/UthmanicHafs.ttf')  format('truetype');
}

@font-face {
    font-family: nasakh;
    font-style: normal;    
    src: url('../fonts/AdobeNaskh-Medium.otf');
}

@font-face{
  font-family: Montserrat; 
  src: url(../fonts/Montserrat/Montserrat-Regular.ttf);
}

@font-face{
  font-family: qalam; 
  src: url(../fonts/AlQalamQuranMajeed.ttf);
}

.urdu{
  font-family: "Urdu";
  font-weight: 700;
}

.hafs{
  font-family: hafs;
  font-weight: 300;  
}

.nasakh{
  font-family: nasakh;
  font-weight: 300;
}

.qalam{
  font-family: "qalam";
  font-weight: 300 !important;
}

.kufi{
  font-family: kufi;
  font-style: normal;
  font-weight: 300 !important;  
}

.amiri{
    font-family: amiri !important;
    direction: rtl;
    font-weight: 300 !important;
}

.Montserrat{
    font-family: Montserrat;
    font-weight: 300;    
}

body {
  font-family: kufi;
  font-style: normal;
  font-weight: 300;  
  font-size: 15px;
}

  ul{
      margin-bottom: 0rem;
  }
  
  li{
      list-style: none;
  }
  

  .navbar{
    padding: 15px 10px;
  }

.btn, a{
  font-weight: 300;
}

.box-header > .box-tools form{
    margin-left: 10px;
}

.nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
  border-left-color: #f4f4f4;
}


.print-only{
  display: none !important;
}

.table>tbody+tbody {
    border-top: 2px solid #666;
}



.user-image {
    float: left;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: -2px;
}


.user-thumb { 
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 15px;    
}


.logo{
  text-align:center;
  display: inline-block;
  max-width: 211px;
  padding: 20px;
  margin: auto;

}

#sidebarMenu{
  border-left: 1px solid #dadada;
  position: fixed;
  min-height: 100%;
  height: 100%;
  z-index: 3 !important;
}

a { 
  text-decoration: none;
  color: darkcyan;
}

a:hover{
  color: darkgoldenrod
}

.card{  
  /*box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.card-footer {    
  border-top: 1px solid lightblue;
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: ccc;
    outline: 0;
    box-shadow: none;
}

.form-select:focus {
    border-color: #ccc;
    outline: 0;
    box-shadow: none;
}

.form-label{
  font-size: small;
  color: darkgray;
}

.container-fluid{
  z-index: 2 !important;
}
.card{
  z-index: 1 !important;
}

.profile-user-img{
    display: block;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    width: 220px;
    border-radius: 50%;
    border: 1px solid #ccc;
}


.error{
    color: red !important;
  }


/*-------------------------------------------------------------*/
.jumbotron{  
  background-color: rgba(238,238,238, 0.7);
  border-bottom: 1px solid #e3e3e3;
  padding: 30px 20px;
}

.card-foot{
  background-color: inherit;
  box-shadow: none;
}

.card-foot:hover{    
    box-shadow: none !important;
}
footer{ 
  
  z-index:1;
  line-height:2.5em;
  /*
  background: rgba(0,0,0, 0.8);
  text-shadow:1px 1px 1px #000; 
  color: #999;
  border-bottom: 1px solid #000;
  */  
  background-color: lightgray;

}

.footer-foot{
  line-height:50px;  
  background-color: darkslategrey;
  color: white;
}



/*--------------------------------------------------------------*/
.rounded-pill {    
    border: 1px solid;
}

.page-title{
  height: 95px;
  max-width: 400px;
  display: block;
  margin: auto;
  margin-bottom: 20px;
  margin-top: 70px;
  padding-top: 35px;
  background: url(../images/page_title.png);
  background-position: center;
  background-repeat: no-repeat; 
  background-size: contain;
  text-align: center;

}

.page-sub-title{  
  display: block;
  margin: auto;
  margin-bottom: 25px;
  padding: 0px 7px;  
  text-align: center;
}

.quran-page{  
  text-align: justify;
  box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
  margin: auto;
  max-width: 900px;
  padding-top: 5px;
  padding-bottom: 5px;
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-white-rgb),var(--bs-border-opacity))!important;
}

.quran-text, .urdu-text{
  text-align: justify;
  padding-right: 15px;
  padding-left:  15px;
  margin-bottom: 60px;
}

.urdu-text{  
  font-family: urdu;
  font-size: 18px !important;
  white-space: pre-line;
}

.nav-link {
  color: darkgray;
}


.min-hig{
  min-height: 100px;
}

.pattern{
  background: transparent url(../images/pattern.jpg) repeat top left;
}






/*-----------------------------------------------------------------------*/

/* Extra large devices (large desktops, 1200px and up)*/
@media (max-width: 1200px) {
 
  .fa-3x {
    font-size: 2.5em;
  }

  .logo{
    max-width: 175px;    
    text-align: center;    
  }

}


/* Large devices (desktops, 992px and up)*/
@media (max-width: 992px) {


}


/* Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {

  .contact {            
    margin: auto auto 20px;                  
    position: static;            
  }
  .logo{
    max-width: 175px;
    margin: 10px;
    text-align: center;
    display: block !important;
  }
  .title{
    margin-top: 25px;
    max-width: 300px;
    display: block;
  }
 


}



@media (max-width: 580px) {



  .logo{
    max-width: 175px;
    margin: auto !important;
    text-align: center;
    display: block !important;
  }
  .title{
    margin-top: 25px;
    max-width: 300px;
    display: block;
  }

   
  .contain {
    padding-left: 10px;
    padding-right:10px;
  }

  .fa-3x {
    font-size: 2.1em;
  }

  .nav-link {
    display: block;
    padding: 0.5rem .5rem;
  }

 
  .hide-me{
    display: none;
  }

  .btn-center{
    margin: 10px auto;
    display: block !important;
    text-align: center;
    float: none !important;
  }

    
  .mobile{
    display: none !important;
  }

  .upload-box{
    position: inherit !important;
    margin-bottom: 30px;
  } 

  .page-title{        
    margin-top: 30px;    
    margin-bottom: 5px;
  }

.quran-text, .urdu-text{
    padding-right: 5px;
    padding-left:  5px;
    margin-bottom: 30px;
}

}