body {
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     background: url(../images/bg.jpg) repeat-x;
     background-attachment: fixed;
 }

 .maraja,
 .maraja option {
     font-weight: bold;
     font-style: italic;
 }
 
 h1,
 h2,
 h3,
 h4,
 ul,
 input {
     margin: 0;
     padding: 0;
 }
 
 * {
     outline: none;
 }
 
 img {
     max-width: 100%;
     max-height: 100%;
 }


  /* ################################### 

  ismail work start 

   ################################### */

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

   #main .inner-content .breadcrum{
	padding-bottom: 25px;
}


/* css styling for Donate Popup */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    width: 400px;  
    padding: 40px;  
	border: 2px solid #0f0f0f;
    text-align: center;
    color: white;
    z-index: 9999;
	border-radius: 25px;
}

.popup-content {
    font-family: Arial, sans-serif;
	font-size: 18px;
}



.site_info{
    margin-top: -30px;
    text-align: right;
    font-style: italic;
    font-weight: bold;
    width: 100%;
    margin-left: -15px;
 }

 .agree-checkbox{
 
    margin-top: 10px;
    display: block;
    float: left;
    line-height: 15px;
    font-size: 1.083em;
    color: #fff;

 }




 .ulama-image
 {
     height: 200px;
     width: 450px;
 }


 .ulama-name
 {
    margin-left: 10px;
 }

 

 .ulama-heading{
    position: relative;
    margin-bottom: 20px;
 }

 .ulama-heading::before {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: -20px;
}

 .ulama-para{
    padding-top: 20px;
    font-family: Brill;
 }


 .ulama-image{
    max-width: 170px;
    width: 100%;
    max-height: 231px;
    height: 100%;
    
 }

 .ulama-image img{
    width: 100%;
    height: 100%;
 }

 .ulama-content{
    padding-left: 25px;
    padding-top: 20px;
 }

 .meet-ulama{
     display: inline-flex;
     align-items: center;
     padding-bottom: 70px;
 }

 .meet-ulama:last-child{
     padding-bottom: 0px;
 }



 /* RESPONSIVE */


 @media screen and (max-width:980px) {
    .meet-ulama{
        display: block;
        padding-bottom: 50px;
    }

    .ulama-content{
        padding-left: 0px;
    }
 }

 @media screen and (max-width:1041px) and (min-width:981px) {
    .ulama-content{
        padding-left: 15px;
    }

    #main .inner-content p{
        line-height: 22px;
    }

    .ulama-heading::before{
        bottom: -10px;
    }

    .ulama-para{
        padding-top: 0px;
        font-family: Brill;
    }
 }

 @media screen and (max-width:480px) {
    .meet-ulama{
        display: flex;
        flex-direction: column;
        padding: 0px 20px 50px;
    }

    .ulama-heading h2{
        text-align: center;
    }

    .ulama-para{
        text-align: center;
        font-family: Brill;
    }
 }

   /* ################################### 

  ismail work end 

   ################################### */
 


 
 .container {
     max-width: 1250px;
     margin: auto;
 }
 /* = = = = = PreHeader = = = = = */
 
 .pre-header,
 .pre-header * {
     box-sizing: border-box
 }
 
 .pre-header {
     float: left;
     width: 100%;
     background: rgba(266, 266, 266, 0.6);
     padding: 5px 10px;
     text-align: center;
 }
 
 .pre-header-left {
     float: left;
     width: 310px;
     max-width: 100%;
 }
 
 .pre-header-left p {
     font-family: 'Open Sans', sans-serif;
     font-size: 11px;
     color: #181818;
     margin: 0;
 }
 
 .pre-header-left p strong {
     margin-right: 5px;
 }
 
 .pre-header-right {
     float: right;
     width: 60px;
 }
 
 .pre-header-soc {
     text-align: right;
 }
 
 .pre-header-soc li {
     display: inline-block;
     vertical-align: middle;
     height: 18px;
     width: 18px;
     background-image: url(../images/pre-header-soc-sprite.png);
     background-repeat: no-repeat;
 }
 
 .pre-header-soc li a {
     display: block;
     text-decoration: none;
 }
 
 li.pre-header-soc-fb {
     background-position: left center;
 }
 
 li.pre-header-soc-tw {
     background-position: -23px center;
 }
 
 li.pre-header-soc-yt {
     background-position: -46px center;
 }
 /* = = = = = PreHeader = = = = = */
 /* = = = = = Header = = = = = */
 
 #header {
     float: left;
     width: 100%;
     background: url(../images/header-bg-top.png) repeat;
 }
 
 #header .header-bottom-bg {
     float: left;
     padding-bottom: 20px;
     width: 100%;
     height: 100%;
     /* background: url(../images/blue-bg.png) no-repeat bottom;
     background-color: white; */
     position: relative;
 }
 
 #header .header-bottom-bg .header-left {
    float: left;
    width: 17%;
    position: absolute;
    left: 0;
    top: 30px;
 }
 
 #header .header-bottom-bg .logo {
     width: 39%;
     margin: auto;
     text-align: center;
 }
 
 #header .header-bottom-bg .logo img {
     margin: 2% 0 4%;
 }
 
 #header .header-bottom-bg .header-right {
     float: right;
     margin: 2% 2% 1% 0;
     width: 16%;
     font-family: 'titilliumregular';
     color: #062d61;
     text-align: right;
     box-sizing: border-box;
 }
 
 #header .header-bottom-bg .header-right p {
     font-size: 17px;
     margin: 16px 0;
 }
 
 #header .header-bottom-bg .header-right p span {
     font-size: 14px;
     width: 100%;
     float: left;
     display: block;
 }
 /* = = = = = sajjad start = = = = = */
 
 .datecss {
     font-size: 12px;
     font-weight: bold;
 }
 /* = = = = = sajjad end = = = = = */
 /* = = = = = Header = = = = = */
 /* = = = = = Navigation = = = = = */
 
 #navigation {
     float: left;
     width: 100%;
     background: #328c16;
     padding: 0 15px;
     box-sizing: border-box;
 }
 
 #navigation ul {
     list-style: none;
 }
 
 #navigation ul li {
     font-family: 'titilliumregular';
     font-size: 16px;
     float: left;
     margin: 6px 0px;
 }
 
 #navigation>ul>li {
     margin-right: 2px;
 }
 
 #navigation ul li:first-child {
     /* margin-left:24px;*/
 }
 
 #navigation ul li a {
     text-decoration: none;
     color: #fff;
     padding: 8px 13px;
     float: left;
     transition: all 0.5s ease 0s;
 }
 
 #navigation ul li a:hover {
     background: #25351f;
     border-radius: 6px;
 }
 
 #navigation ul li a.active {
     background: #25351f;
     border-radius: 6px;
 }
 
 #navigation .search-box {
     float: right;
     box-sizing: border-box;
     width: 30%;
     width: 32%;
     margin: 0.7% 0;
     /*padding-right:15px;*/
 }
 
 #navigation .search-box h4 {
     font-family: 'titilliumregular';
     font-size: 1.5em;
     color: #fff;
     font-weight: normal;
     float: left;
     margin-top: 4px;
 }
 
 #navigation .search-box .search-field {
     float: right;
     width: 64%;
     /*width:60%;*/
     background: #fff;
     border-radius: 8px;
     box-sizing: border-box;
     padding: 5px;
 }
 
 #navigation .search-box .search-field input.searchfield-nav {
     float: left;
     width: 85%;
     padding: 4px 0;
     border: none;
 }
 
 #navigation .search-box .search-field input.search-btn-nav {
     float: right;
     border: none;
     cursor: pointer;
     background: url(../images/nav-search-btn.png) no-repeat;
     text-indent: -9999px;
     width: 18px;
     height: 18px;
     margin: 3px;
 }
 /* = = = = = Navigation = = = = = */
 /* = = = = = Mobile Nav = = = = = */
 
 #mobile {
     float: left;
     width: 100%;
     background: #328c16;
     box-sizing: border-box;
     padding: 4% 2%;
 }
 
 
 #toggle-bar a {
     text-decoration: none;
     color: #fff;
 }
 
 #toggle-bar a.menu-title {
     font-size: 1.5em
 }
 
 #toggle-bar a.navicon {
     float: right;
     font-size: 15px;
     font-weight: bold;
 }
 
 #mobile ul#menu {
     padding: 2%;
     list-style: none;
 }
 
 #mobile ul#menu li {
     padding: 10px 0;
     border-top: 1px dotted #fff;
 }
 
 #mobile ul#menu li:first-child {
     border: none;
 }
 
 #mobile ul#menu li a {
     color: #fff;
     text-decoration: none;
 }
 
 #mobile ul#menu li ul {
     padding: 0;
     position: inherit;
 }
 
 #mobile ul#menu li ul li a {
     font-size: 12px;
 }
 
 #mobile ul#menu li a.navicon {
     float: right;
 }
 /* = = = = = Mobile Nav = = = = = */
 /* = = = = = Main = = = = = */
 
 #main {
     float: left;
     width: 100%;
     box-sizing: border-box;
     padding: 1.6% 2%;
     background: #fff;
 }
 /* = = = = = Main Top = = = = = */
 
 #main .main-top {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column-reverse;
     width: 100%;
 }
 /*Main Left*/
 
 #main .main-top .main-left {
     float: left;
     width: 100%;
     box-sizing: border-box;
     padding: 0 12px 0 0;
 }
 
 #main .main-top .main-left .main-left-top {
     float: left;
     width: 100%;
     margin-bottom: 15px;
     min-height: 100%!important;
 }
 
 #main .main-top .main-left .main-left-top h1 {
     font-family: 'titilliumregular';
     font-size: 3.17em;
     color: #2e2e2e;
    text-align: center;
 }
 
 #main .main-top .main-left .main-left-top p {
    color: #2e2e2e;
    font-size: 16px;
    font-weight: 600;
    margin: 5px 0 10px 0;
    line-height: 22px;
 }
 
 #main .main-top .main-left .main-left-top .md-hd-head {
     margin: 0px;
     text-align: center;
 }
 
 #main .main-top .main-left .main-left-top .main-txt-head {
     margin: 20px 0 15px 0;
     text-align: center;
 }
 
 #main .main-top .main-left .main-left-top .buttons {
     float: left;
     width: 100%;
 }
 
 #main .main-top .main-left .main-left-top .buttons a.light-green-btn {
     background: url(../images/green-btn.jpg) repeat-x;
     color: #fff;
     text-decoration: none;
     font-weight: bold;
     padding: 0 25px;
     border-radius: 5px;
     line-height: 31px;
     float: left;
 }
 
 #main .main-top .main-left .main-left-top .buttons a.dark-green-btn {
     background: url(../images/dark-green-btn.jpg) repeat-x;
     color: #fff;
     text-decoration: none;
     font-weight: bold;
     padding: 0 25px;
     border-radius: 5px;
     line-height: 31px;
     float: left;
     margin-left: 6px;
 }
 
 #main .main-top .main-left .form-area {
     float: left;
     width: 50%;
     background: url(../images/form-bg.jpg) repeat-y;
     box-sizing: border-box;
     padding: 3%;
     min-height: 625px;
     text-align: center;
 }
 
 #main .main-top .main-left .form-area .form-title {
     font-family: 'titilliumregular';
     font-weight: 600;
     font-size: 2.5em;
     color: #fff;
     margin-bottom: 5%;
     text-align: left
 }
 
 #main .main-top .main-left .form-area .form-title span {
     display: block;
     font-size: 14px !important;
     margin: 5px 0 0;
     letter-spacing: 1px;
     font-family: Arial;
 }
 
 #main .main-top .main-left .form-area .field-row {
     float: left;
     width: 100%;
     margin-bottom: 3%;
 }
 
 #main .main-top .main-left .form-area .field-row .field-box {
     float: left;
     box-sizing: border-box;
     padding: 0 1%;
 }
 
 #main .main-top .main-left .form-area .field-row .w-100 {
     width: 100%;
 }
 
 #main .main-top .main-left .form-area .field-row .w-90 {
     width: 90%;
 }
 
 #main .main-top .main-left .form-area .field-row .w-80 {
     width: 80%;
 }
 
 #main .main-top .main-left .form-area .field-row .w-70 {
     width: 70%;
 }
 
 #main .main-top .main-left .form-area .field-row .w-60 {
     width: 60%;
 }
 
 #main .main-top .main-left .form-area .field-row .w-50 {
     width: 50%;
 }
 
 #main .main-top .main-left .form-area .field-row .w-40 {
     width: 40%;
 }
 
 #main .main-top .main-left .form-area .field-row .w-30 {
     width: 30%;
 }
 
 #main .main-top .main-left .form-area .field-row .w-20 {
     width: 20%;
 }
 
 #main .main-top .main-left .form-area .field-row .w-10 {
     width: 10%;
 }
 
 #main .main-top .main-left .form-area .field-row .w-25 {
     width: 25%;
 }

 #main .main-top .main-left .form-area .field-row .w-33 {
    width: 33.3%;
}
 
 #main .main-top .main-left .form-area .field-row .field-box label {
     float: left;
     color: #ffffff;
     font-size: 1em;
     margin-bottom: 5px;
     line-height: 15px;
     text-align: left
 }
 
 #main .main-top .main-left .form-area .field-row .field-box label .label-right {
     float: right;
     font-size: 11px;
     color: #fecb2c;
     font-style: italic;
 }
 
 #main .main-top .main-left .form-area .field-row .field-box label .label-right img {
     vertical-align: middle;
     margin-left: 5px;
 }
 
 #main .main-top .main-left .form-area .field-row .field-box input,
 textarea {
     float: left;
     border-radius: 5px;
     font-size: 15px;
     box-sizing: border-box;
     color: #000000;
     padding: 5px 5px 3px 5px;
     font-family: Arial, Helvetica, sans-serif;
 }
 
 #main .main-top .main-left .form-area .field-row .field-box input {
     height: 28px;
     /*line-height:28px;*/
 }
 
 #gender {
     /*height:28px; line-height:28px;*/
     padding: 4px 0;
     border-radius: 5px;
 }
 
 #main .main-top .main-left .form-area .field-row .field-box textarea {
     height: 170px;
     resize: none;
 }
 
 #main .main-top .main-left .form-area .field-row .field-box select {
     padding: 4px 0;
     border-radius: 5px;
     font-size: 13px;
     color: #3f3e3e
 }
 
 #main .main-top .main-left .form-area .field-row .field-box span.field {
     float: left;
     padding: 0 5px;
     box-sizing: border-box;
 }
 
 #main .main-top .main-left .form-area .field-row .field-box span.pl-margin {
     padding-left: 0px;
 }
 
 #main .main-top .main-left .form-area .field-row .field-box span.pr-margin {
     padding-right: 0px;
 }
 
 #main .main-top .main-left .form-area .field-row .field-box span.field input {
     width: 100%;
     float: left;
 }
 
 #main .main-top .main-left .form-area .form-bottom-area {
     float: left;
     width: 100%;
     box-sizing: border-box;
     padding: 0 1%;
 }
 
 #main .main-top .main-left .form-area .form-bottom-area .form-bottom-left {
     float: left;
     width: 80%;
 }
 
 #main .main-top .main-left .form-area .form-bottom-area .form-bottom-left span {
     float: left;
     margin-right: 20px;
     line-height: 15px;
     vertical-align: middle;
     font-size: 1.083em;
     color: #fff;
 }
 
 #main .main-top .main-left .form-area .form-bottom-area .form-bottom-left span input {
     line-height: 15px;
 }
 
 #main .main-top .main-left .form-area .form-bottom-area .form-bottom-left span img {
     line-height: 15px;
 }
 
 #main .main-top .main-left .form-area .form-bottom-area .form-bottom-right {
     float: right;
     width: 18%;
 }
 
 #main .main-top .main-left .form-area .form-bottom-area .form-bottom-right input {
     float: right;
     width: 100%;
     cursor: pointer;
     background: url(../images/yellow-submit-btn.jpg) repeat-x;
     border: none;
     border-radius: 8px;
     line-height: 24px;
     height: 24px;
     color: #333333;
     font-weight: bold;
     font-family: arial;
     font-size: 14px;
 }
 
 .disabled {
     cursor: default !important;
     color: #adadad;
     background: buttonface !important;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     z-index: 9999;
 }
 /*ISHRAQ START*/
 
 .social-icons {
     width: 100%;
     float: left;
     padding-top: 25px;
     padding-bottom: 10px;
 }
 /*ISHRAQ END*/
 /*Main Left*/
 /*Main right*/
 /* = = = = = sajjad start = = = = = */
 
 .Disheading {
     font-size: 18px;
     font-weight: bold;
 }
 
 .salawat {
     height: 55px;
     /* width: 285px; */
 }
 
 .cookie-container1 {
     position: fixed;
     bottom: -100%;
     left: 0;
     right: 0;
     background: #414b88;
     color: #f5f6fa;
     padding: 0 32px;
     box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39);
     transition: 400ms;
     display: flex;
     justify-content: space-between;
     padding: 10px;
     align-items: center;
 }
 
 .cookie-container1.active {
     bottom: 0;
 }
 
 .cookie-container1 a {
     color: #f5f6fa;
 }
 
 .cookie-btn {
     background: #328c16;
     border: 0;
     color: #f5f6fa;
     padding: 5px 35px;
     font-size: 12px;
     border-radius: 8px;
     cursor: pointer;
     margin-right: 70px;
 }
 
 .cookie-btn1 {
     background: #000000;
     border: 0;
     color: #f5f6fa;
     padding: 5px 35px;
     font-size: 12px;
     margin-bottom: 10px;
     border-radius: 8px;
     cursor: pointer;
 }
 /* = = = = = sajjad end = = = = = */
 
 #main .main-right {
    width: 100%;
    box-sizing: border-box;
    padding: 0px;
 }
 
 #main .main-right .search-box {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    background: #2e6aa2;
    padding: 1% 3% 1% 3%;
    justify-content: center;
    align-items: center;
 }
 
 #main .main-right .search-box h4 {
    font-family: 'titilliumregular';
    width: 30%;
    font-size: 26px;
    color: #fff;
    font-weight: normal;
    background: url(../images/search-icon.png) no-repeat left 6px;
    padding-left: 35px;
    line-height: 32px;
 }
 
 #main .main-right .search-box .search-field {
    float: left;
    width: 100%;
    background: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
 }

 #main .main-right .search-box .search-field form{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
 }
 

 #main .main-right .search-box .search-field input.searchfield {
    width: 90%;
    padding: 1px 15px;
    border: none;
 }
 
 #main .main-right .search-box .search-field input.search-btn {
     float: right;
     font-size: 14px;
     border: none;
     border-radius: 6px;
     background: #328c16;
     color: #fff;
     font-weight: bold;
     padding: 4px 8px;
     cursor: pointer;
 }
 
 #main .main-top .main-left .faq-area {
    width: 49%;
    float: right;
     box-sizing: border-box;
     background: #f5f5f5;
     padding: 3% 5% 5% 5%;
     min-height: 625px;
 }
 
 #main .main-top .main-left .faq-area .faq-title {
     font-family: 'titilliumregular';
     font-size: 2.166em;
     color: #2e2e2e;
     font-weight: normal;
 }
 
 #main .main-top .main-left .faq-area ul {
     list-style: none;
     float: left;
     width: 100%;
     margin: 5% 0;
     padding-right: 5%;
     overflow-y: hidden;
     height: 463px;
 }
 
 #main .main-top .main-left .faq-area ul li {
     float: left;
     width: 100%;
     padding: 3% 0;
     border-bottom: 1px solid #dadada;
     border-top: 1px solid #fff;
 }
 
 #main .main-top .main-left .faq-area ul li:first-child {
     border-top: none;
 }
 
 #main .main-top .main-left .faq-area ul li:last-child {
     border-bottom: none;
 }
 
 #main .main-top .main-left .faq-area ul li p {
     float: left;
     width: 100%;
     margin: 0;
     font-size: 1.2em;
 }
 
 #main .main-top .main-left .faq-area ul li p.question {
     font-weight: bold;
     color: #3f4986;
     margin-bottom: 10px;
 }
 
 #main .main-top .main-left .faq-area ul li p.answer {
     color: #575757;
 }
 
 #main .main-top .main-left .faq-area ul li p span.tag {
     float: left;
     width: 35px;
 }
 
 #main .main-top .main-left .faq-area ul li p span.q-txt {
     float: left;
     width: 92.5%;
 }
 
 #main .main-top .main-left .faq-area a.view-more-btn {
     float: left;
     width: 100%;
     background: url(../images/green-btn.jpg) repeat-x;
     line-height: 31px;
     height: 31px;
     text-align: center;
     font-weight: bold;
     font-size: 1.25em;
     color: #fff;
     border-radius: 8px;
     text-decoration: none;
 }
 /*Main right*/
 /* = = = = = Main Top = = = = = */
 /* = = = = = Main Bottom = = = = = */
 
 #main .main-bottom {
     float: left;
     width: 100%;
 }
 
 #main .main-bottom .search-area {
     float: left;
     width: 100%;
     margin: 3% 0 2% 0;
 }
 
 #main .main-bottom .search-area h3 {
     font-family: 'titilliumregular';
     color: #2e2e2e;
     font-size: 2.166em;
     font-weight: bold;
     padding-bottom: 1%;
 }
 
 #main .main-bottom .search-area .alphabets {
     padding: 1% 0;
     float: left;
     width: 100%;
     border-top: 1px solid #9b9b9b;
     border-bottom: 1px solid #9b9b9b;
 }
 
 #main .main-bottom .search-area .alphabets ul {
     float: left;
     list-style: none;
 }
 
 #main .main-bottom .search-area .alphabets ul li {
     float: left;
     font-family: "Times New Roman", Times, serif;
     font-size: 14px;
     border-left: 1px solid #2e2e2e;
 }
 
 #main .main-bottom .search-area .alphabets ul li:first-child {
     border: none
 }
 
 #main .main-bottom .search-area .alphabets ul li:first-child a {
     margin-left: 0;
 }
 
 #main .main-bottom .search-area .alphabets ul li a {
     text-decoration: none;
     width: 24px;
     height: 21px;
     line-height: 21px;
     float: left;
     text-align: center;
     color: #2e2e2e;
     margin: 0 10.5px;
     transition: all 0.5s ease 0s;
     border-radius: 3px;
 }
 
 #main .main-bottom .search-area .alphabets ul li a:hover {
     background: #4f4f4f;
     color: #fff;
 }
 
 #main .main-bottom .search-area .alphabets ul li.active a {
     background: #4f4f4f;
     color: #fff;
 }
 
 #main .main-bottom .search-area .search-result {
     padding: 1.5% 0 0;
     float: left;
     width: 100%;
 }
 
 #main .main-bottom .search-area .search-result ul {
     float: left;
     width: 100%;
     list-style: square;
     box-sizing: border-box;
     padding: 0 2% 0 1%;
 }
 
 #main .main-bottom .search-area .search-result ul li {
     float: left;
     font-size: 13px;
     color: #575757;
     /*margin-left:7%;*/
     width: 17%;
     line-height: 30px;
     margin-right: 3%;
 }
 /*#main .main-bottom .search-area .search-result ul li:first-child{ margin-left:0;}*/
 
 #main .main-bottom .search-area .search-result ul li a {
     text-decoration: underline;
     color: #575757;
     transition: all 0.5s ease 0s;
 }
 
 #main .main-bottom .search-area .search-result ul li a:hover {
     color: #3d4784;
 }
 
 #main .main-bottom .useful-links {
     float: left;
     width: 100%;
 }
 
 #main .main-bottom .useful-links h3 {
     font-family: 'titilliumregular';
     color: #2e2e2e;
     font-size: 2.166em;
     font-weight: bold;
     padding-bottom: 1%;
 }
 
 #main .main-bottom .useful-links .links {
     float: left;
     width: 100%;
     border-top: 1px solid #9b9b9b;
     padding-top: 2%;
 }
 
 #main .main-bottom .useful-links .links ul {
     list-style: none;
 }
 
 #main .main-bottom .useful-links .links ul li {
     float: left;
     margin: 5px;
     font-size: 1em;
 }
 
 #main .main-bottom .useful-links .links ul li:first-child {}
 
 #main .main-bottom .useful-links .links ul li a {
     line-height: 30px;
     height: 29px;
     float: left;
     background: url(../images/links-btn-bg.jpg) repeat-x;
     padding: 0 34.5px;
     color: #737166;
     border-radius: 8px;
     text-decoration: none;
     transition: all 0.5s ease 0s;
 }
 
 #main .main-bottom .useful-links .links ul li a:hover {
     background: url(../images/links-btn-bg-hover.jpg) repeat-x;
     color: #333333;
 }
 /* = = = = = Main Bottom = = = = = */
 /* = = = = = Inner Content = = = = = */
 
 #main .inner-content {
     float: left;
     width: 100%;
 }
 
 #main .inner-content .breadcrum {
     float: left;
     width: 100%;
     padding-bottom: 1%;
     margin-bottom: 1.5%;
     border-bottom: 1px dashed #9b9b9b;
     color: #2e2e2e;
     font-size: 1em;
     font-weight: bold;
 }
 
 #main .inner-content .breadcrum a {
     text-decoration: none;
     color: #1F7305;
     font-weight: bold
 }
 
 #main .inner-content .breadcrum a:hover {
     text-decoration: underline;
 }
 
 #main .inner-content .signature h1 {
     float: right;
     font-size: 2em;
 }
 
 #main .inner-content h1 {
     font-family: 'titilliumregular';
     font-weight: normal;
     font-size: 3.166em;
     color: #2e2e2e;
 }
 
 #main .inner-content p {
     color: #2e2e2e;
     font-size: 1.2em;
     line-height: 24px;
     text-align: justify;
 }
 
 #main .inner-content p.tag-line {
     margin-top: 0;
     font-size: 1.33em;
 }
 
 #main .inner-content .content-left {
     float: left;
     width: 59%;
 }
 
 #main .inner-content .content-right {
     float: left;
     width: 39%;
     margin-left: 2%;
 }
 
 #main .inner-content .content-right ul {
     margin: 5px 0 0 15px;
 }
 
 #main .inner-content .content-right ul li {
     color: #2e2e2e;
     font-size: 1.083em;
     line-height: 22px;
 }
 
 #main .inner-content img.maulana-img {
     float: left;
     margin: 1.2% 2% 0.5% 0;
     border: 1px solid #e2e2e2;
 }
 
 #main .inner-content .faq-area {
     float: left;
     width: 100%;
 }
 
 #main .inner-content .faq-area .faq-title {
     font-family: 'titilliumregular';
     font-size: 1.887em;
     /*font-size:2.166em;*/
     color: #2e2e2e;
     font-weight: normal;
 }
 
 #main .inner-content .faq-area ul {
     list-style: none;
     float: left;
     width: 100%;
 }
 
 #main .inner-content .faq-area ul li {
     float: left;
     width: 100%;
     background: #f5f5f5;
     padding: 3%;
     box-sizing: border-box;
     margin-top: 2%;
     border-radius: 5px;
     box-shadow: -2px 16px 11px -15px #999;
 }
 
 #main .inner-content .faq-area ul li:first-child {
     border-top: none;
 }
 
 #main .inner-content .faq-area ul li:last-child {
     border-bottom: none;
 }
 
 #main .inner-content .faq-area ul li p {
     float: left;
     width: 100%;
     margin: 0;
     font-size: 1.2em;
 }
 
 #main .inner-content .faq-area ul li p.question {
     font-weight: bold;
     color: #3f4986;
     margin-bottom: 10px;
 }
 
 #main .inner-content .faq-area ul li p.question a {
     color: #3f4986;
 }
 
 #main .inner-content .faq-area ul li p.answer {
     color: #575757;
 }
 
 #main .inner-content .faq-area ul li p span.tag {
     float: left;
     width: 45px;
 }
 
 #main .inner-content .faq-area ul li p span.q-txt {
     float: left;
     width: 92.5%;
     cursor: default;
 }
 
 #main .inner-content .faq-area ul li p>a.link-exists span.q-txt {
     cursor: pointer;
 }
 
 #main .inner-content .cotact-form {
     float: left;
     width: 50%;
     box-sizing: border-box;
     padding-right: 2%;
 }
 
 #main .inner-content .cotact-form h1 {
     margin-bottom: 5%;
 }
 
 #main .inner-content .cotact-form .field-row {
     float: left;
     width: 100%;
     margin-bottom: 5%;
 }
 
 #main .inner-content .cotact-form .field-row label {
     float: left;
     width: 100%;
     color: #2e2e2e;
     font-size: 1.083em;
     margin-bottom: 3px;
     font-weight: bold;
 }
 
 #main .inner-content .cotact-form .field-row label span.req {
     float: right;
     color: #d00000;
 }
 
 #main .inner-content .cotact-form .field-row input.textfield,
 textarea {
     float: left;
     width: 100%;
     border: 1px solid #bbbbbb;
     border-radius: 5px;
     box-sizing: border-box;
     padding: 8px;
     color: #2e2e2e;
     font-size: 15px;
 }
 
 #main .inner-content .cotact-form .field-row input.textfield {}
 
 #main .inner-content .cotact-form .field-row textarea {
     height: 175px;
     resize: none;
 }
 
 #main .inner-content .cotact-form .field-row .field-txt {
     color: #2e2e2e;
     font-size: 1.083em;
     float: left;
 }
 
 #main .inner-content .cotact-form .field-row input.submit-btn {
     float: right;
     font-size: 1.25em;
     color: #FFF;
     font-weight: bold;
     border: none;
     border-radius: 5px;
     background: url(../images/submit-bg.png) no-repeat;
     padding: 0px 10%;
     line-height: 28px;
     cursor: pointer;
     background-size: 100% 100%;
 }
 
 #main .inner-content .contact-info {
     float: left;
     width: 50%;
     box-sizing: border-box;
     padding-left: 2%;
 }
 
 #main .inner-content .contact-info h1 {
     margin-bottom: 5%;
 }
 
 #main .inner-content .contact-info span.address {
     font-size: 1.83em;
     color: #2e2e2e;
 }
 
 .map {
     float: left;
     width: 100%;
     margin: 3% 0;
 }
 
 .map iframe {
     width: 100%;
 }
 
 #main .inner-content .contact-info .contact-box {
     color: #2e2e2e;
     font-size: 1.167em;
     line-height: 29px;
 }
 
 #main .inner-content .contact-info .contact-box a {
     color: #2e6aa2;
     text-decoration: none;
 }
 
 #main .inner-content .contact-info .contact-box a:hover {
     text-decoration: underline;
 }
 
 #main .inner-content .question-answer-sec {
     float: left;
     width: 100%;
 }
 
 #main .inner-content .question-answer-sec .question-answer-row {
     float: left;
     width: 100%;
     padding: 5% 0 3.5%;
     box-shadow: -2px 16px 11px -15px #999;
 }
 
 #main .inner-content .question-answer-sec .question-answer-row .question-answer-left {
     float: left;
     width: 8%;
 }
 
 #main .inner-content .question-answer-sec .question-answer-row .question-answer-left span {
     color: #328c16;
     float: left;
     font-family: "titilliumregular";
     font-size: 3.5em;
     height: 75px;
     line-height: 75px;
     text-align: center;
     text-shadow: 2px 0 3px -moz-buttondefault;
     width: 75px;
 }
 
 #main .inner-content .question-answer-sec .question-answer-row .question-answer-right {
     float: left;
     width: 92%;
 }
 
 #main .inner-content .question-answer-sec .question-answer-row .question-answer-right ul {
     list-style: none;
 }
 
 #main .inner-content .question-answer-sec .question-answer-row .question-answer-right ul li {
     display: inline-block;
     font-size: 1.25em;
     margin: 0 5px 10px 5px;
 }
 
 #main .inner-content .question-answer-sec .question-answer-row .question-answer-right ul li a {
     padding: 0 15px;
     text-decoration: none;
     color: #575757;
     line-height: 32px;
     height: 32px;
     float: left;
     border: 1px solid #c5c5c5;
     border-radius: 5px;
     transition: all 0.5s ease 0s;
 }
 
 #main .inner-content .question-answer-sec .question-answer-row .question-answer-right ul li a:hover {
     background: #ededed;
 }
 
 #main .inner-content .mview {
     float: left;
     width: 100%;
 }
 
 #main .inner-content .mview .alphabets {
     float: left;
     width: 100%;
     padding: 5% 0;
     /*box-shadow:-2px 16px 11px -15px #ddd;*/
     border-bottom: 1px solid #ddd;
     margin-bottom: 8%;
 }
 
 #main .inner-content .mview .alphabets ul {
     float: left;
     width: 100%;
     text-align: center;
     list-style: none;
 }
 
 #main .inner-content .mview .alphabets ul li {
     display: inline;
 }
 
 #main .inner-content .mview .alphabets ul li a {
     margin-bottom: 1%;
     background: #328C16;
     border-radius: 100%;
     color: #fff;
     display: inline-block;
     text-decoration: none;
     width: 45px;
     height: 45px;
     line-height: 45px;
     font-size: 20px;
 }
 
 #main .inner-content .mview .search-result {
     float: left;
     width: 100%;
     margin-bottom: 3%;
 }
 
 #main .inner-content .mview .search-result ul {
     list-style: none;
     text-align: center;
 }
 
 #main .inner-content .mview .search-result ul li {
     display: inline;
     font-size: 1.25em;
     margin: 0 5px 10px;
 }
 
 #main .inner-content .mview .search-result ul li a {
     padding: 0 15px;
     text-decoration: none;
     color: #575757;
     line-height: 32px;
     height: 32px;
     border: 1px solid #c5c5c5;
     border-radius: 5px;
     transition: all 0.5s ease 0s;
     display: inline-block;
     margin-bottom: 2%;
 }
 
 #main .inner-content .mview .search-result ul li a:hover {
     background: #ededed;
 }
 /* = = = = = Inner Content = = = = = */
 /* = = = = = Main = = = = = */
 /* = = = = = Footer = = = = = */
 
 #footer {
     float: left;
     width: calc(100% - 4%);
     font-size: 1em;
     padding: 2.5% 2% 0;
     color: #575757;
     background-image: linear-gradient(
        180deg
        , white 80%,transparent);
 }
 
 #footer ul {
     list-style: none;
     float: right;
 }
 
 #footer ul li {
     /*float:left; */
     border-right: 1px solid #575757;
     padding: 0 8px;
     display: inline-block;
     line-height: 22px;
 }
 /*#footer ul li:first-child{ border-left:none;}*/
 
 #footer ul li:last-child {
     border-right: none;
 }
 
 #footer ul li a {
     text-decoration: none;
     color: #575757;
 }
 
 #footer ul li a:hover {
     text-decoration: underline;
 }
 
 #footer a.footer-link {
     text-decoration: none;
     color: #1F7305;
     font-weight: bold;
 }
 
 #footer a.footer-link:hover {
     text-decoration: underline;
 }
 /* = = = = = Footer = = = = = */
 
 .disclaimer {
     float: left;
     width: 100%;
     box-sizing: border-box;
     padding: 0 10%;
     text-align: center;
     font-size: 12px;
     color: #797979;
     padding-bottom: 2%;
     line-height: 21px;
 }
 
 .disclaimer span {
     float: left;
     width: 100%;
     text-align: center;
     font-size: 13px;
     font-weight: bold;
     text-transform: capitalize;
     padding-bottom: 1%;
     display: block;
 }
 
 .val_error {
     color: #ff0000;
     margin-top: 5px;
     float: left;
 }
 /*hussain*/
 
 .drop-lib-li {
     position: relative;
 }
 
 .drop-lib-li:hover .drop-lib {
     display: block!important;
 }
 
 .drop-lib {
     position: absolute;
     background: #328c16;
     top: 100%;
     padding: 4% 0 0;
     border-radius: 0 0 5px 5px;
     overflow: hidden;
     width: 150%;
 }
 
 .drop-lib li {
     display: inline-block;
     margin: 0!important;
     border-bottom: dashed 1px #ffffff;
     width: 100%;
 }
 
 .drop-lib li:last-child {
     border: 0;
 }
 
 .drop-lib li a {
     font-size: 15px;
     border-radius: 0!important;
     width: 100%;
     box-sizing: border-box;
     padding: 6px 15px!important;
 }
 
 .drop-lib li a:hover {
     border-radius: 0;
     !important
 }
 /* Success Message */
 
 .message {
     clear: both;
     padding: 10px 2%;
     width: 96%;
     color: #ffffff;
     font-weight: bold;
     margin-bottom: 10px;
     border-radius: 4px;
 }
 
 .success {
     background: rgba(86, 153, 13, 0.6);
     border: 1px solid #56990D;
     font-size: 15px;
     text-align: center;
 }
 
 .error {
     background: rgba(207, 30, 30, 0.6);
     border: 1px solid #CF1E1E;
 }
 
 .p-404 {
     background: rgba(207, 30, 30, 0.6);
     border: 1px solid #CF1E1E;
     box-sizing: border-box;
     padding: 1%;
     border-radius: 5px;
     color: #fff;
     margin-top: 2%;
     float: left;
     width: 100%;
 }
 
 .nocatfound {
     color: rgba(207, 30, 30, 0.6) !important;
     font-weight: bold;
 }
 /* Success Message */
 
 p.thankyou-text {
     font-size: 18px !important;
 }
 
 .blue_button {
     background: #2E6AA2;
     border-radius: 5px;
     padding: 5px 10px;
     text-decoration: none;
     color: #ffffff;
     float: left;
     margin-top: 10px;
 }
 /*Font Face*/
 
 @font-face {
     font-family: 'titilliumregular';
     src: url('../fonts/titillium-regular-webfont.eot');
     src: url('../fonts/titillium-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/titillium-regular-webfont.woff') format('woff'), url('../fonts/titillium-regular-webfont.ttf') format('truetype'), url('../fonts/titillium-regular-webfont.svg#titilliumregular') format('svg');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'titilliumbold';
     src: url('../fonts/titillium-semibold-webfont.eot');
     src: url('../fonts/titillium-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/titillium-semibold-webfont.woff') format('woff'), url('../fonts/titillium-semibold-webfont.ttf') format('truetype'), url('../fonts/titillium-semibold-webfont.svg#titilliumbold') format('svg');
     font-weight: normal;
     font-style: normal;
 }
 /*Font Face*/
 /* jarry */
 
 .ui-autocomplete {
     max-height: 100px;
     overflow-y: auto;
     /* prevent horizontal scrollbar */
     overflow-x: hidden;
 }
 /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
 
 * html .ui-autocomplete {
     height: 100px;
 }
 
 #topcontrol {
     bottom: 3% !important;
     right: 2.5% !important;
 }
 /* jarry */
 /** POPUP */
 
 .ob-overlay {
     background: rgba(255, 255, 255, 0.88);
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
 }
 
 .ob-main {
     width: 60%;
     background: #FFFFFF;
     padding: 30px 5%;
     -webkit-box-shadow: 0px 6px 21px 0px rgba(50, 50, 50, 0.27);
     -moz-box-shadow: 0px 6px 21px 0px rgba(50, 50, 50, 0.27);
     box-shadow: 0px 6px 21px 0px rgba(50, 50, 50, 0.27);
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     margin: auto;
     height: 7%;
 }
 
 .ob-close {
     background: #000000;
     position: absolute;
     right: -10px;
     top: -10px;
     width: 24px;
     height: 24px;
     background: url(../images/close-n.png) no-repeat;
 }
 /** POPUP */
 
 #recaptcha_area {
     float: left;
 }
 
 #moreCat img {
     display: none;
 }
 
 #captcha {
     margin-top: 5px;
 }
 
 .rightSbox {
     float: left;
     width: 100%;
     min-height: 100%!important;
 }
 
 .blue_button {
     color: #2E6AA2;
     display: inline-blokc;
     margin-top: 5px;
     background: none;
     padding: 0;
     font-size: 12px;
     float: none;
 }
 /*YasirAbbas*/
 
 .custom-nb {
     background-color: #328c16;
     float: left;
     width: 100%;
     margin-top: 13px;
     padding: 25px 0px;
 }
 
 .custom-nb h2 {
     font-size: 26px;
     line-height: 22px;
     color: #fff;
     padding: 0 20px 12px;
     font-weight: bold;
 }
 
 .custom-nb p {
     font-size: 16px;
     line-height: 21px;
     color: #FFF;
     padding: 0px 20px;
     margin-top: 0;
     font-weight: 500;
     margin-bottom: 0;
 }
 
 .custom-cat-links {
     text-decoration: none;
     color: #1F7305;
     font-weight: 600;
 }
 /*YasirAbbas end*/
 /* Muzzamil Qureshi UI */
 





 








 .header-bottom-bg .pre-header .datecss {font-size: 16px;}
.hadees-section{  padding: 0px 110px 10px;}
.hadees-section .arabic-hadees{font-size: 23px; margin: 00px 0px 20px; text-align: center; line-height: 1.4em; flex-basis: calc(50% - 40px); padding: 0px 20px; font-weight: 600;}
.hadees-section .arabic-hadees span{font-size: 15px; font-weight: 600; }
.hadees-section .hadees:nth-child(2){font-size: 12px; margin: 0px 0px 20px; text-align: center; flex-basis: calc(50% - 40px); padding: 0px 20px; font-weight: 800; line-height: 21px;}
.hadees-section .hadees:nth-child(3){font-size: 12px; margin: 0px; text-align: center; font-weight: 600;}
.hadees-section .hadees:nth-child(4){font-size: 12px; line-height: 18px; text-align: center; font-weight: 600; margin: 6px 0px 6px;}

.btn-askalim{
    float: right;
    background: #368c11;
    color: #fff;
    text-decoration: none;
    padding:15px 3%;
    font-size: 15px;
    border-radius: 10px;
    position: absolute;
    top: 54%;
    right: 6%;
}
@media only screen and (max-width: 980px) {
    .hadees-section { padding: 0px 50px 10px;}
}

@media only screen and (max-width: 768px) {
    .hadees-section { padding: 0px 40px 10px;}
}











 .main-hero-add {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 4px;
 }
 
 .add-container-sp {
     width: 100%;
     overflow: hidden;
 }
 
 .main-hero-add .content-upper-section {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
 }
 
 .main-hero-add .content-upper-section .head {
     flex-basis: 100%;
     display: flex;
     justify-content: center;
     font-size: 16px;
     padding: 10px 0px 10px;
 }
 
 .main-hero-add .content-upper-section .head h2 {
     padding: 0px 20px;
     border-radius: 4px;
     margin: 0px;
     font-size: 22px;
 }
 
 .main-hero-add .content-upper-section .main-hero-heading {
     flex-basis: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .main-hero-add .content-upper-section .main-hero-heading p{
    text-align: center;
    font-size: 12px;
    line-height: 22px;
    font-weight: 600;
    margin: 0px;
 }


 
 .main-hero-add .content-upper-section .main-hero-heading h2 {
     font-size: 16px;
     text-transform: uppercase;
     margin: 10px 0px 0px;
 }
 
 .main-hero-add .content-upper-section .sub-hero-heading {
     flex-basis: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .main-hero-add .content-upper-section .sub-hero-heading p {
     font-size: 18px;
     font-weight: 700;
     padding: 0px 20px;
     margin: 0px 0px 20px;
     border-radius: 4px;
     text-align: center;
 }
 
 .main-hero-add .content-upper-section .sub-txt-content {
     flex-basis: 100%;
     display: flex;
     justify-content: center;
 }
 
 .main-hero-add .content-upper-section .sub-txt-content p {
     border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     border-top: 1px solid rgba(0, 0, 0, 0.2);
     padding: 15px 0px;
     text-align: center;
     font-size: 14px;
     font-weight: 600;
 }
 
 .main-hero-add .content-lower-section {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     flex-wrap: wrap;
 }
 
 .main-hero-add .content-lower-section .heading {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
 }
 
 .main-hero-add .content-lower-section .heading h3 {
     padding: 0px 0px 25px;
     font-size: 22px;
     color: #800000;
 }
 .main-hero-add .content-lower-section .heading h3 span{
     text-decoration: underline;
 }
 
 .main-hero-add .content-lower-section .p {
    font-size: 14px;
    text-align: inherit;
    margin-bottom: 12px;
    padding: 0px 10px;
    width: 25%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
 }

 .main-hero-add .content-lower-section .p:nth-child(2){border-left: 1px solid rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(0, 0, 0, 0.3) ;}
 .main-hero-add .content-lower-section .p:nth-child(3){}
 .main-hero-add .content-lower-section .p:nth-child(4){border-left: 1px solid rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(0, 0, 0, 0.3);padding-bottom: 16px;}

 
 .main-hero-add .content-lower-section .p .main-letter {
    font-size: 26px;
    font-weight: 600;
    color: #800000;
    text-decoration: underline;
    width: 5%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 11px;
    padding-right: 1%;
 }
 
 .main-hero-add .content-lower-section .p .sec-letter {
    color: black;
    font-weight: 600;
    width: 94%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
 }
 
 .dis-main-content {
     border-top: 2px dashed white;
     border-bottom: 2px dashed white;
     border-radius: 14px;
     padding: 20px 0px;
     margin-top: 30px;
 }
 
 .dis-main-content h2 {
     font-size: 24px;
     margin-bottom: 30px;
 }
 
 .dis-main-content ul {
     padding: 0px 0px 0px 15px;
 }
 
 .dis-main-content ul li {
     margin-bottom: 10px;
     font-size: 15px;
     font-weight: 500;
 }
 /* width */
 
 ::-webkit-scrollbar {
     width: 10px;
 }
 /* Track */
 
 ::-webkit-scrollbar-track {
     background: #f1f1f1;
 }
 /* Handle */
 
 ::-webkit-scrollbar-thumb {
     background: #888;
 }
 /* Handle on hover */
 
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }



/* new changes */
.header-bottom-bg .pre-header .datecss {font-size: 16px;}
.hadees-section{  padding: 0px 110px 10px;}
.hadees-section .arabic-hadees{font-size: 23px; margin: 00px 0px 20px; text-align: center; line-height: 1.4em; flex-basis: calc(50% - 40px); padding: 0px 20px; font-weight: 600;}
.hadees-section .arabic-hadees span{font-size: 15px; font-weight: 600; }
.hadees-section .hadees:nth-child(2){font-size: 12px; margin: 0px 0px 20px; text-align: center; flex-basis: calc(50% - 40px); padding: 0px 20px; font-weight: 800; line-height: 21px;}
.hadees-section .hadees:nth-child(3){font-size: 12px; margin: 0px; text-align: center; font-weight: 600;}
.hadees-section .hadees:nth-child(4){font-size: 12px; line-height: 18px; text-align: center; font-weight: 600; margin: 6px 0px 6px;}








/* Responsive Section Style */


/* Monitor & Laptop Screen */


@media only screen and (max-width: 1024px) {
    #header .header-bottom-bg { padding-bottom: 0px;}
    #main .main-right .search-box h4 { width: 40%;}
    #main .main-bottom .search-area .alphabets ul li a { margin: 0 6.5px;}
}


@media only screen and (max-width: 980px) {
    .hadees-section { padding: 0px 50px 10px;}
    .main-hero-add .content-lower-section .p { width: 29%;}
    .main-hero-add .content-lower-section .p .main-letter { width: 7%;}
    .main-hero-add .content-lower-section .p .sec-letter { width: 92%;}
    #main .main-top .main-left .form-area { padding: 1%;}
    #main .main-top .main-left .faq-area { padding: 1% 2% 1% 2%;}
    #main .main-bottom .search-area .alphabets ul li a { margin: 0 5.5px; }
      /* muzzamil logo */
      .site_info {
        margin-top: -20px;
        margin-left: 2px;
    }
      /* muzzamil logo */
}
@media only screen and (max-width: 768px) {
    .hadees-section { padding: 0px 40px 10px;}
    #header .header-bottom-bg .logo img { margin: 5% 0!important; }
    #main .main-right .search-box { padding: 1% 2% 1% 2%;}
    #main .main-right .search-box h4 { font-size: 24px;    width: 50%;}
    .main-hero-add .content-lower-section .p .main-letter { width: 8.5%; }
    .main-hero-add .content-lower-section .p .sec-letter { width: 90%; }
    #main .main-top .main-left .form-area .field-row .field-box label span{font-size: 12px!important;}
    #main .main-top .main-left .form-area .field-row .field-box input { border: none;}
    #header .header-bottom-bg { background-position: bottom; background-size: 100% 50%; }
       /* muzzamil logo */
       .site_info {
        margin-top: -15px;
        margin-left: 2px;
    }
    .smat{
        position: relative;
    }
    .smat span{
        position: absolute;
    }
      /* muzzamil logo */
}
@media only screen and (max-width: 600px) {
     /* muzzamil logo */
  #header .header-bottom-bg .logo { width: 75%; margin: 0 auto 0% auto!important;     padding-bottom: 25px!important; }
  #header .header-bottom-bg .logo img { margin: 3% 0 0!important; }
  .site_info { margin-top: 0px; margin-left: 2px; }
  /* muzzamil logo */
    #mobile { padding: 2% 2%; }
    #toggle-bar{display: flex; justify-content: space-between; align-items: center;}
    #main .main-right .search-box h4 { font-size: 20px; width: 60%; }
    #main .main-right .search-box .search-field input.searchfield { width: 75%!important;padding: 1px 5px;}
    .main-hero-add .content-lower-section .p .sec-letter { width: 85%; }
    .main-hero-add .content-lower-section .p .main-letter { width: 11.5%; }
    #main .main-top .main-left .form-area { padding: 3%; width: 100%; }
    #main .main-top .main-left .form-area .form-title { text-align: center; margin-bottom: 2%;}
    #main .main-top .main-left .form-area .form-bottom-area .form-bottom-right input { line-height: 40px; height: 40px; font-size: 18px; background-position: center; background-size: contain;margin-top: 20px; }
    .main-hero-add .content-lower-section .p:nth-child(4) { padding-bottom: 32px; }
    #main .main-top .main-left .faq-area { width: 100%; padding: 2% 4% 2% 4%;    margin-top: 15px;}
    #footer { width: 100%!important;}
    .btn-askalim{
        position: static;
        display: flex;
        float: none;
        width: 30%;
        margin: auto;
        justify-content: center;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 480px) {
    .hadees-section { padding: 0px 20px 10px; }
    .hadees-section .arabic-hadees { font-size: 22px;    margin: 00px 0px 15px;}
    .hadees-section .hadees:nth-child(2) { margin: 0px 0px 15px;}
    .header-bottom-bg .pre-header .datecss { font-size: 14px; }
    .pre-header { padding: 15px 10px;}
    #main .main-right .search-box { flex-wrap: wrap; }
    #main .main-right .search-box h4 { width: 42%;padding-bottom: 5px; }
    #main .main-right .search-box .search-field { margin-bottom: 5px; }
    .main-hero-add .content-lower-section .heading h3 { font-size: 18px; text-align: center; }
    .main-hero-add .content-lower-section .p { width: 90%;align-items: flex-end;    margin-bottom: 15px; }
    .main-hero-add .content-lower-section .p:nth-child(2) { border-left: none; border-right: none; }
    .main-hero-add .content-lower-section .p:nth-child(4) { border-left: none; border-right: none;    padding-bottom: 0px;}
    .main-hero-add .content-lower-section .p .main-letter { width: 4%;font-size: 24px;padding-bottom: 5px;}
    .main-hero-add .content-lower-section .p .sec-letter { padding-bottom: 5px; }
    #main .main-top .main-left .form-area .field-row .field-box label .label-right{ width: 100%; text-align: right; padding-bottom: 0px; }
    #main .main-top .main-left .form-area .form-bottom-area .form-bottom-right { width: 35%; }
}

@media only screen and (max-width: 414px) {
    #main .main-right .search-box h4 { width: 50%;}
    .header-bottom-bg .pre-header .datecss { display: flex; justify-content: center; flex-wrap: wrap; }
    .main-hero-add .content-lower-section .p { width: 100%;}
    .hadees-section .hadees:nth-child(4) { margin: 15px 0px 6px; }
}

@media only screen and (max-width: 380px) {
    #main .main-right .search-box h4 { width: 57%; }
    .main-hero-add .content-lower-section .heading h3 { font-size: 16px;}
    .main-hero-add .content-upper-section .head h2 { text-align: center; }
}

@media only screen and (max-width: 360px) {
    .main-hero-add .content-upper-section .head h2 { font-size: 18px; }
    .main-hero-add .content-upper-section .sub-txt-content p { line-height: 20px;}
    .main-hero-add .content-lower-section .heading h3 { font-size: 14px; }
    #main .main-top .main-left .form-area .field-row .w-50 { width: 100%; margin-bottom: 4%;}
    #main .main-top .main-left .form-area .field-row .field-box input { margin: 0px; }
    #main .main-top .main-left .form-area .field-row { margin-bottom: 0%; }
    #main .main-top .main-left .form-area .field-row .w-100 { margin-bottom: 4%; }
    #main .main-top .main-left .form-area .field-row .field-box select { margin-bottom: 0px; padding: 6px 0;border: none;}
    .dis-main-content ul li { margin-bottom: 20px;}
}

@media only screen and (max-width: 320px) {
    #main .main-right .search-box h4 { width: 65%; }
}


 /* Muzzamil Qureshi UI End */

 
 .custom_success{
    background: rgb(66 149 69);
    font-size: 19px;
    text-align: center;
    padding: 20px 0;
    /* margin: 17px 0 !important; */
    font-weight: 900;
    width: 100%;
}


.keyworderror
{
    margin-left: 6px;
}