@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Lato-Black';
    src: url('../../fonts/Lato-Black.eot');
    src: url('../../fonts/Lato-Black.eot') format('embedded-opentype'), url('../../fonts/Lato-Black.woff') format('woff'), url('../../fonts/Lato-Black.ttf') format('truetype'), url('../../fonts/Lato-Black.svg#CoconNextBold') format('svg');
}

@font-face {
    font-family: 'Lato-Light';
    src: url('../../fonts/Lato-Light.eot');
    src: url('../../fonts/Lato-Light.eot') format('embedded-opentype'), url('../../fonts/Lato-Light.woff') format('woff'), url('../../fonts/Lato-Light.ttf') format('truetype'), url('../../fonts/Lato-Light.svg#CoconNextLight') format('svg');
}

@font-face {
    font-family: 'Lato-Regular';
    src: url('../../fonts/Lato-Regular.eot');
    src: url('../../fonts/Lato-Regular.eot') format('embedded-opentype'), url('../../fonts/Lato-Regular.woff') format('woff'), url('../../fonts/Lato-Regular.ttf') format('truetype'), url('../../fonts/Lato-Regular.svg#CoconNextRegular') format('svg');
}

@font-face {
    font-family: 'Lato-Bold';
    src: url('../../fonts/Lato-Bold.eot');
    src: url('../../fonts/Lato-Bold.eot') format('embedded-opentype'), url('../../fonts/Lato-Bold.woff') format('woff'), url('../../fonts/Lato-Bold.ttf') format('truetype'), url('../../fonts/Lato-Bold.svg#CoconNextBold') format('svg');
}

@font-face {
    font-family: 'Lato-Hairline';
    src: url('../../fonts/Lato-Hairline.eot');
    src: url('../../fonts/Lato-Hairline.eot') format('embedded-opentype'), url('../../fonts/Lato-Hairline.woff') format('woff'), url('../../fonts/Lato-Hairline.ttf') format('truetype'), url('../../fonts/Lato-Hairline.svg#CoconNextLight') format('svg');
}

@font-face {
    font-family: 'Lato-Medium';
    src: url('../../fonts/Lato-Medium.eot');
    src: url('../../fonts/Lato-Medium.eot') format('embedded-opentype'), url('../../fonts/Lato-Medium.woff') format('woff'), url('../../fonts/Lato-Medium.ttf') format('truetype'), url('../../fonts/Lato-Medium.svg#CoconNextRegular') format('svg');
}

@font-face {
    font-family: 'Lato-Semibold';
    src: url('../../fonts/Lato-Semibold.eot');
    src: url('../../fonts/Lato-Semibold.eot') format('embedded-opentype'), url('../../fonts/Lato-Semibold.woff') format('woff'), url('../../fonts/Lato-Semibold.ttf') format('truetype'), url('../../fonts/Lato-Semibold.svg#CoconNextLight') format('svg');
}

@font-face {
    font-family: 'Lato-Thin';
    src: url('../../fonts/Lato-Thin.eot');
    src: url('../../fonts/Lato-Thin.eot') format('embedded-opentype'), url('../../fonts/Lato-Thin.woff') format('woff'), url('../../fonts/Lato-Thin.ttf') format('truetype'), url('../../fonts/Lato-Thin.svg#CoconNextRegular') format('svg');
}

@font-face {
    font-family: 'CoconNextRegular';
    src: url('../../fonts/Cocon/CoconNextRegular.eot');
    src: url('../../fonts/Cocon/CoconNextRegular.eot') format('embedded-opentype'), url('../../fonts/Cocon/CoconNextRegular.woff') format('woff'), url('../../fonts/Cocon/CoconNextRegular.ttf') format('truetype'), url('../../fonts/Cocon/CoconNextRegular.svg#CoconNextRegular') format('svg');
}

@font-face {
    font-family: 'Quran2020A';
    src: url('../../fonts/ScriptPgFont/Quran2020A.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
* {
    font-family: 'Lato-Regular';
}

a, input, select, textarea, button {
    box-shadow: none !important;
    outline: 0 !important;
}

.cookieBannerMain {
    z-index: 5000 !important;
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    padding: 0px !important;
    background-color: #e74c3c !important;
    color: #FFF !important;
    border: 0;
    font-size: 12px;
    vertical-align: baseline;
    font-family: Verdana;
    text-align: center;
}

.slider-handle {
    cursor: pointer
}

.cookieBanner {
    max-width: 81.025641rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    color: #FFF !important;
}

.cookieGridCell {
    margin-top: 0;
    margin-bottom: 0;
    margin: 4px;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    color: #FFF !important;
    /*margin-left: 10%;*/
}

.whitecolor {
    color: #FFF !important;
}

.cookieCloseButton {
    position: relative;
    /*padding: .8em;*/
    /*border: 1px solid transparent;*/
    border-radius: 3px;
    background-color: transparent;
    outline: none;
    font-weight: 400;
    line-height: 1.15384615;
    text-decoration: none;
    cursor: pointer;
    border-color: rgba(0,89,153,0);
    box-shadow: 0 0 0 0 rgba(0,149,255,0);
    background-color: #e74c3c !important;
    color: #FFF !important;
    font-size: 15px;
}

.signup-social {
    position: absolute;
    top: -59px;
    bottom: 0;
    right: 0;
    background: rgba(185, 146, 36, 0.92);
    width: 0px;
    text-align: center;
    padding: 30px 0;
    overflow: hidden;
    transition: ease all 1s;
}

    .signup-social.open {
        width: 180px;
    }

    .signup-social h2 {
        font-size: 22px;
        color: #FFF;
        text-transform: uppercase;
    }

    .signup-social a {
        color: #FFF;
        display: block;
    }

        .signup-social a .teacher-bg, .signup-social a .student-bg {
            width: 70px;
            background-size: 100%;
            height: 80px;
            margin: 0 auto;
        }

.btn-red {
    background: #c0392b !important;
    color: #FFF !important;
    display: inline-block
}

.cookieGridCellMargin {
    /*margin-left: auto !important;*/
}

.cookieInfoMessage {
    padding-top: 10px;
}

li.objLi.innerBullet a {
    padding-left: 10px;
    position: relative;
    display: block;
}

li.objLi a span {
    position: absolute;
    left: 0;
}

.FAQBodyContainer > div, .FAQBodyContainer {
    width: 100%;
}

#pricingDetails .container {
    max-width: 100%;
}

#pricingDetails .answersOpt input, #pricingDetails .answersOpt span {
    display: inline-block;
    vertical-align: middle;
}

#pricingDetails .answersOpt input {
    margin: 3px 5px 0 10px;
}

#signInPopup {
    z-index: 9999;
}

.LangChanger .socialLinks {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
}

    .LangChanger .socialLinks a {
        padding: 0 3px;
        position: static;
        color: #5b8a80;
    }

        .LangChanger .socialLinks a:hover {
            color: #000;
        }

.list-style {
    position: relative;
    left: 39px;
    list-style: square;
    color: #666666;
}

.info-links {
    padding-left: 90px;
}

.link-head {
    color: #78521b;
}

.link-txt {
    color: #78521b;
    border-bottom: 1px solid;
}

.inner-link-txt {
    color: #666666;
    border-bottom: 1px solid;
}

.feature-links {
    padding-left: 0;
}

.study-links {
    padding-left: 20px;
}

.separator {
    border-top: 1px solid #c2c2c2;
    max-width: 100%;
    padding-top: 10px;
}

.footer-head {
    padding-top: 10px;
}

.footer-head1 {
    padding-top: 34px;
}

.FooterBody ul,
.FooterBody ol {
    margin: 0;
    padding: 0;
}

.profile-main-bio-others .heading-experience, .heading-education {
    text-align: left;
}

.profile-main .floatLeft {
    padding-left: 0;
}

#calendar {
    margin: 20px 0 !important;
}

.profile-main-courses-schedule {
    padding: 0;
}

.teachingSchedule .fcs-center select {
    height: 30px !important;
    padding: 0;
    margin-bottom: 10px;
    border-radius: 0;
}

#EditProfilePage .row > div {
    padding: 0 15px;
}

.WWAContainer .card {
    border: none;
    background: none;
    margin: 0 auto;
    max-width: 1200px;
}

.video-btns-w {
    text-align: center;
}

    .video-btns-w .btn.collapsed, .video-btns-w .btn.collapsed:focus {
        width: 420px;
        margin: 5px 0;
        max-width: 100%;
        background: #2c3e50 !important;
        border-color: #2c3e50 !important;
        box-shadow: none !important;
    }

    .video-btns-w .btn, .video-btns-w .btn:focus {
        width: 420px;
        margin: 5px 0;
        max-width: 100%;
        background: #6f6f6f !important;
        border-color: #6f6f6f !important;
        box-shadow: none !important;
    }


    .video-btns-w i {
        margin-right: 5px;
        color: #E4C043;
        float: left;
        margin-top: 5px;
    }

    .video-btns-w i {
        margin-right: 5px;
    }

.videos-w a.close {
    color: #c81f1f;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: right;
}

.footer-head .fa-facebook {
    color: #3b5999;
}

.footer-head .fa-twitter {
    color: #03a9f4;
}

.footer-head .fa-instagram {
    color: #e4405f;
}

a.watchBtn i {
    margin-right: 5px;
}

.UniqueFeatureRight a.readBtn.featureFiveBtn {
    margin-top: 0px !important;
}

.modal.video-Model .modal-dialog {
    max-width: 1200px;
}

.modal.video-Model .modal-body {
    position: relative;
    display: block;
}

    .modal.video-Model .modal-body::before {
        display: block;
        content: "";
        padding-top: 56.25%;
    }

    .modal.video-Model .modal-body iframe {
        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        bottom: 15px;
        width: calc(100% - 30px);
        height: calc(100% - 15px);
    }

.InnerPg3Bottom .col-md-6 a.innervideo-a, .Pg8Inner .col-md-4 .col-md-6 a, a.innervideo-a {
    display: inline-block;
}

    .InnerPg3Bottom .col-md-6 a.innervideo-a img {
        width: 100%;
        max-width: 250px;
    }

#btnClearGeneralInformation, #btnSaveGeneralformation {
    width: 100%;
}

div#eduHistoryModal .modal-dialog, #workExpModal .modal-dialog {
    max-width: 550px;
    display: flex;
    align-items: center;
    height: 100%;
}

    div#eduHistoryModal .modal-dialog .modal-body, #workExpModal .modal-dialog .modal-body {
        margin-top: -8px;
        margin-bottom: 2px;
        text-align: center;
    }

        div#eduHistoryModal .modal-dialog .modal-body h2, #workExpModal .modal-dialog .modal-body h2 {
            display: inline-block;
        }

        div#eduHistoryModal .modal-dialog .modal-body h1, #workExpModal .modal-dialog .modal-body h1 {
            display: inline-block;
            text-transform: unset;
            margin-left: 4px;
        }

    div#eduHistoryModal .modal-dialog .modal-footer, #workExpModal .modal-dialog .modal-footer {
        justify-content: center;
    }

div#StudentListContainer table a {
    color: #007bff;
    text-decoration: underline;
}

#divSignInMessage {
    margin-left: 74px;
}

@media (min-width:1681px) and (max-width:1920px) {
    .LearnGridIc .SkypeCallingImg {
        width: 90% !important;
        margin-top: 53px !important;
        margin-left: -3px;
    }

    .LearnGridIc .phone {
        width: 83% !important;
        margin-top: 0%;
        margin-left: 30px;
    }

    .LearnGridIc .clock {
        width: 120% !important;
        margin-top: -18%;
        margin-left: -20px;
    }

    .LearnGridIc .globe {
        width: 116% !important;
        margin-top: 2% !important;
        margin-left: -5px;
    }

    .LearnGridIc .offlineImg {
        margin-top: 2%;
        margin-left: -10px;
    }

    .LearnGridIc .study {
        width: 180% !important;
        margin-top: 0%;
        margin-left: -145px;
    }

    .FeaturesLeft .LearnGridDesc {
        padding: 0 0 0 10px !important;
    }

    .FeaturesRight .LearnGridDesc {
        padding: 0 10px 0 0 !important;
    }

    .LearnGridDesc .SoftwareSteps span.Steptext {
        width: 98% !important;
    }

    .LearnGridIc .FlexiblePaymentImg {
        margin-top: 7%;
        margin-left: -15px;
    }

    .LearnLMSStudyHeading {
        padding-right: 60px;
    }

    .LearnLMSStudyBody {
        padding-right: 150px;
    }
}

@media (min-width:1441px) and (max-width:1680px) {

    .LearnGridIc .SkypeCallingImg {
        width: 90% !important;
        margin-top: 53px !important;
        margin-left: -3px;
    }

    .LearnGridIc .phone {
        width: 83% !important;
        margin-top: 0%;
        margin-left: 30px;
    }

    .LearnGridIc .clock {
        width: 120% !important;
        margin-top: 0%;
        margin-left: -20px;
    }

    .LearnGridIc .globe {
        width: 116% !important;
        margin-top: 2% !important;
        margin-left: -5px;
    }

    .LearnGridIc .offlineImg {
        margin-top: 19%;
        margin-left: -10px;
    }

    .LearnGridIc .study {
        width: 180% !important;
        margin-top: 0%;
        margin-left: -95px;
    }

    .FeaturesLeft .LearnGridDesc {
        padding: 0 0 0 10px !important;
    }

    .FeaturesRight .LearnGridDesc {
        padding: 0 10px 0 0 !important;
    }

    .LearnGridDesc .SoftwareSteps span.Steptext {
        width: 98% !important;
    }

    .LearnGridIc .FlexiblePaymentImg {
        margin-top: 7%;
        margin-left: -15px;
    }

    .LearnLMSStudyHeading {
        padding-right: 60px;
    }

    .LearnLMSStudyBody {
        padding-right: 100px;
    }
}

@media (min-width:1366px) and (max-width:1440px) {

    .LearnGridIc .SkypeCallingImg {
        width: 90% !important;
        margin-top: 2px !important;
        margin-left: -3px;
    }

    .LearnGridIc .phone {
        width: 83% !important;
        margin-top: -25%;
        margin-left: 30px;
    }

    .LearnGridIc .clock {
        width: 120% !important;
        margin-top: 22%;
        margin-left: -20px;
    }

    .LearnGridIc .globe {
        width: 116% !important;
        margin-top: -20%;
        margin-left: -5px;
    }

    .LearnGridIc .offlineImg {
        margin-top: -1%;
        margin-left: -10px;
    }

    .LearnGridIc .study {
        width: 180% !important;
        margin-top: -25%;
        margin-left: -95px;
    }

    .FeaturesLeft .LearnGridDesc {
        padding: 0 0 0 10px !important;
    }

    .FeaturesRight .LearnGridDesc {
        padding: 0 10px 0 0 !important;
    }

    .LearnGridDesc .SoftwareSteps span.Steptext {
        width: 98% !important;
    }

    .LearnGridIc .FlexiblePaymentImg {
        margin-top: 18%;
        margin-left: -15px;
    }

    .LearnLMSStudyHeading {
        padding-right: 60px;
    }

    .LearnLMSStudyBody {
        padding-right: 100px;
    }
}

@media (min-width:1280px) and (max-width:1365px) {

    .LearnGridIc .SkypeCallingImg {
        width: 90% !important;
        margin-top: 12px !important;
        margin-left: -3px;
    }

    .LearnGridIc .phone {
        width: 83% !important;
        margin-top: -25%;
        margin-left: 30px;
    }

    .LearnGridIc .clock {
        width: 120% !important;
        margin-top: 22%;
        margin-left: -20px;
    }

    .LearnGridIc .globe {
        width: 116% !important;
        margin-top: -20%;
        margin-left: -5px;
    }

    .LearnGridIc .offlineImg {
        margin-top: -1%;
        margin-left: -10px;
    }

    .LearnGridIc .study {
        width: 180% !important;
        margin-top: -25%;
        margin-left: -95px;
    }

    .FeaturesLeft .LearnGridDesc {
        padding: 0 0 0 10px !important;
    }

    .FeaturesRight .LearnGridDesc {
        padding: 0 10px 0 0 !important;
    }

    .LearnGridDesc .SoftwareSteps span.Steptext {
        width: 98% !important;
    }

    .LearnGridIc .FlexiblePaymentImg {
        margin-top: 18%;
        margin-left: -15px;
    }

    .LearnLMSStudyHeading {
        padding-right: 60px;
    }

    .LearnLMSStudyBody {
        padding-right: 100px;
    }
}

/*@media (min-width:1024px) and (max-width:1920px){

.LearnGridIc .SkypeCallingImg{margin-top:-13px !important;}
.LearnGridIc .phone{width:83% !important;}
.LearnGridIc .clock{width:112% !important;}
.LearnGridIc .globe{width:116% !important;}
.LearnGridIc .study{width:150% !important;}



}*/


::-webkit-scrollbar-track {
    background: #ccc;
}


::-webkit-scrollbar-thumb {
    background: #888;
}


    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


.tooltip1 {
}

    .tooltip1 .tooltiptext {
        visibility: hidden;
        width: 450px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 12px;
        font-size: 12px;
        /*margin-left:20px;*/
        /* Position the tooltip */
        position: absolute;
        left: 0;
        top: 40px;
        z-index: 10;
    }

    .tooltip1:hover .tooltiptext {
        visibility: visible;
    }

    .tooltip1 .tooltiptext::after {
        content: "";
        position: absolute;
        top: -3%;
        right: 50%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent black transparent;
    }


.BrowseFit {
    z-index: -1;
}


body {
    padding: 0 !important;
}

.modal {
    padding: 0 !important;
}

.SubmitRequest {
    background-color: rgba(0,0,0,0.50);
}


.HowQuranWorks p {
    margin-bottom: 0;
}

.QuranNav {
    background-color: #9AEAD8;
    padding: .8125rem 1rem;
}

    .QuranNav .QuranNavBar ul {
        color: #676767;
    }

.QuranNavBar .rightMenu a img {
    width: 70px;
}

.separatorNav {
    margin: 0 2px;
}

.loginNav {
    background-color: #F7EDA5;
    color: #2E2E2E;
    border-radius: 0px;
    margin-right: -4px;
    border: 1px solid #2E2E2E;
    font-size: 14px;
    padding: 5px 15px;
}

.signUpNav {
    background-color: #2E2E2E;
    color: #F7EDA5;
    border-radius: 0px;
    border: 1px solid #2E2E2E;
    font-size: 14px;
    padding: 5px 15px;
}

.LeftMainMenu li.show {
    background-color: #fffbdc;
}

.LeftMainMenu li a i {
    font-size: 22px;
}

.MainMenu {
    color: #a98212;
    padding: 0 4px 0px 4px;
}

.CustomDropDown {
    margin-top: 0px;
    border: none;
    border-radius: 0px;
    background-color: rgba(255,251,220,1.00);
    float: left;
    width: 850px;
}

.CustomDropMenu .col-md-2 {
    float: left;
    padding: 0;
}

    .CustomDropMenu .col-md-2 .dropdown-item {
        text-align: center;
    }

        .CustomDropMenu .col-md-2 .dropdown-item p {
            margin-bottom: 0 !important;
            max-width: 100%;
            padding: 0 10px;
            white-space: normal;
            font-size: 14px;
        }

        .CustomDropMenu .col-md-2 .dropdown-item:hover {
            background-color: #9aead8;
        }

.logoBrand {
    /*text-align: center;*/
    text-align: left;
    padding-left: 30px;
}

.login-btns {
    order: 4;
}

.navbar-collapse {
    justify-content: space-between;
}

.LangChanger .arabic {
    color: #5b8a80;
    font-size: 15px;
    font-weight: bold;
    font-family: 'CoconNextRegular';
}

    .LangChanger .arabic img {
        padding: 3px;
    }

    .LangChanger .arabic:hover {
        color: #313131;
    }

.lan_AR {
    margin: 10px 5px 10px;
}

.LangChanger .eng {
    color: #5b8a80;
    font-size: 14px;
    font-weight: bold;
}

    .LangChanger .eng img {
        padding: 3px;
    }


    .LangChanger .eng:hover {
        color: #313131;
    }


@media (min-width:769px) {
    .StudyTypeImg {
        width: 180% !important;
    }

    .FlexiblePaymentImg {
        width: 120% !important;
    }
}

.CustomDropDown {
    width: 1200px;
    z-index: 1200
}

@media (min-width:1900px) {
    .CustomDropDown {
        width: 1400px;
    }
}

@media (min-width:1400px) and (max-width:1899px) {
}

    .InnerPageSearch {
        float: left;
    }

@media (min-width:1200px) and (max-width:1399px) {
    .CustomDropDown {
        width: 1100px;
    }
}

@media (min-width:1000px) and (max-width:1299px) {
    .CustomDropDown {
        width: 900px;
    }
}

/* ################################  Inner Header Start ########################### */

.InnerHeader {
    background-image: url(../../images/quraan-holding.jpg);
    float: left;
    height: 194px;
    padding-bottom: 0px;
    z-index: -1;
}

.InnerHeaderDownloadLink {
    float: right;
    text-align: right;
    padding: 0;
    padding-top: 8px;
}

    .InnerHeaderDownloadLink a img {
        width: 170px;
    }

@media screen and (max-width:1080px) {
.InnerHeaderDownloadLink a img {
    width: 115px;
}
}
.InnerPageSearch {
    background-color: rgba(255,255,255,0.20);
    margin-top: 8px;
    color: #FFFFFF;
    text-align: center;
    position: relative;
    padding: 10px;
}

    .InnerPageSearch a {
        position: absolute;
        top: 11px;
        right: 22px;
        font-size: 28px;
        color: #6f4a00;
    }

    .InnerPageSearch input {
        border-radius: 0;
        padding: 12px;
    }

/* ################################  InnerHeader End ########################### */

/* ################################  Breadcrumb Start ########################### */

.Innerbreadcrumb {
    background-color: #eaeaea;
    float: left;
}

.breadcrumbLinks {
    float: left;
    margin-top: 10px;
    font-weight: bold;
}

    .breadcrumbLinks a {
        color: #18222c;
    }

        .breadcrumbLinks a.active {
            color: #937614;
        }

    .breadcrumbLinks span {
        color: #18222c;
        padding: 0 10px;
    }

/* ################################  Breadcrumd End ########################### */



/*  ---------------------  Tajweed Page Start      -----------------------*/

/* ################################  Tajweed body Start ########################### */

.TajweedContainer {
    background-color: #EAEAEA;
    padding-top: 13px !important;
    padding: 30px;
    float: left;
}

.TajweedBody {
    background-color: #FFFFFF;
    border-radius: 5px; /*border:1px solid #95989A;*/
    padding-bottom: 20px;
    float: left;
}

.TajweedHeaderContent {
    margin-top: 35px;
    margin-bottom: 35px;
}

    .TajweedHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.Tajweedheading {
    margin: 0px 0px 10px;
    text-align: center;
}

.TajweedBodyContainer {
    text-align: center;
}

.TajweedFirstVideos .col-12 {
    float: left;
    margin: 5px;
    padding: 2px;
}

    .TajweedFirstVideos .col-12 img {
        max-width: 100%;
    }

    .TajweedFirstVideos .col-12 p {
        color: #000000;
        font-size: 14px;
        font-weight: 700;
    }

.TajweedSecondVideos .col-12 {
    background-color: red;
    padding: 10px;
    margin: 10px;
}

.zoom {
    transition: transform .2s;
}

    .zoom:hover {
        z-index: 1;
        -ms-transform: scale(1.2); /* IE 9 */
        -webkit-transform: scale(1.2); /* Safari 3-8 */
        transform: scale(1.2);
    }

.TajweedDetails h5 {
    text-align: left;
    font-weight: bold;
}

.TajweedDetails ul {
    text-align: left;
    text-align: justify;
    margin-top: 15px;
}

    .TajweedDetails ul li {
        margin-bottom: 5px;
        width: 100%;
        font-weight: 600;
    }

        .TajweedDetails ul li i {
            color: #9d6d0d;
        }

.TajweedBody .container {
    float: left;
}

.TajweedDetails .SoftwareSteps {
    text-align: left;
    padding: 5px 0;
}

.TajweedFirstVideos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

::placeholder {
    opacity: 1;
    color: #555f77 !important;
}

.HeaderBanner {
    min-height: 300px
}

.tajweedMainBoxTopTwo {
    cursor: pointer;
    width: 25%;
    padding: 0 10px;
    text-align: center;
}

.tajweesMainBox-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}

.tajweedMainBox {
    cursor: pointer;
    width: 20%;
    float: left;
    padding: 0 10px;
    text-align: center;
}

#videoDetail .vidList.videosList, .videoObjectives {
    scrollbar-width: thin;
}

    #videoDetail .vidList.videosList .tajweedMainBox {
        width: 100%;
        text-align: left;
    }

        #videoDetail .vidList.videosList .tajweedMainBox .VidTitle {
            text-align: left;
        }

.videoObjectives {
    padding-right: 4px !important;
}

    .videoObjectives a[target="_blank"] {
        word-break: break-all;
    }

@media (max-width:600px) {
    .TajweedBodyContainer {
        margin-left: -8px;
    }
}

@media (max-width:1024px) {
    #resetPwPopup {
        margin-top: 4% !important;
    }
}
/* ################################  Tajweed body End ########################### */

/*  ---------------------  Tajweed Page Start End    -----------------------*/

/*  ---------------------  Tajweed Detail Page  Start  -----------------------*/

.TajweeVideoDetailContainer {
    background-color: #EAEAEA;
    padding-top: 13px !important;
    padding: 30px;
    float: left;
}

.TajweeVideoDetailBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.TajweeVideoDetailHeaderContent {
    margin-top: 35px;
    margin-bottom: 35px;
}

    .TajweeVideoDetailHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.TajweeVideoDetailheading {
    margin: 10px 97px;
    text-align: center;
}

.TajweeVideoDetailBodyContainer {
    padding: 20px 15px 0;
}

#videoDetail .vidList.videosList::-webkit-scrollbar, .videoObjectives::-webkit-scrollbar {
    width: 8px;
}

.UserComments {
    height: auto !important;
    max-height: 350px;
    overflow-y: auto !important;
}

#commentsContainerMain {
    float: left;
    width: 100%;
    margin: 0 !important;
}

    #commentsContainerMain .comments {
        height: auto !important;
    }

#videoDetail .vidList.videosList::-webkit-scrollbar-track, .videoObjectives::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #F0F0F0;
    border-radius: 10px;
}

#videoDetail .vidList.videosList::-webkit-scrollbar-thumb, .videoObjectives::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px #CDCDCD;
}

.vidList .col-xs-6 {
    padding: 0px !important;
}

.mobiViewVideos {
    float: left;
    padding: 0;
    margin: 0;
}

    .mobiViewVideos img {
        width: 100%;
    }

.vidDetails {
    float: left;
    padding: 0 10px;
    margin: 0;
}


.vidList .col-xs-5 {
    padding: 0px 0px 0px 5px !important;
}

.VidTitle {
    text-align: center;
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 13px;
    line-height: normal;
}

.moreVid {
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    margin-top: 10px;
}

    .moreVid .panel-body {
        padding: 0px !important;
        border-bottom: 1px solid #ccc !important;
        float: left;
        margin-bottom: 14px;
    }

.vidList {
    border-left: 1px solid #ccc;
}

.videosList {
    height: 530px;
    overflow-y: scroll;
}

@media (min-width: 992px) {
    .vidList {
        height: 545px;
        overflow-y: scroll;
    }
}


.VideoLink h5 {
    text-transform: uppercase;
    font-weight: bold;
    color: #b9820d;
}

.VideoObjectives {
    border-right: 1px solid #ccc;
}

@media (min-width: 992px) {
    .VideoObjectives {
        border-right: 1px solid #ccc;
        height: 545px;
        overflow-y: scroll;
    }
}

.videoObjectives {
    height: 530px;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
}

.objList {
    padding: 0 0 0 22px;
}

.durationinfo {
    float: right;
}

.vidDuration {
    text-align: right;
    padding-top: 10px;
}

.downloadVideo {
    margin-left: 22%;
    padding: 7px;
    /* border-radius: 4px; */
    /* background-color: #f7f1d9; */
    /* border: 1px solid #b9820d; */
    color: black;
    font-weight: bold;
    text-align: center;
    /* margin-top: 14px; */
    float: left;
}

.TV_DownloadQuranUniversityMobileAppQurani {
    margin-top: 5px;
}







#tutorialVideoArea .tajweedMainBox, #tutorialVideoArea .tajweedMainBoxTopTwo {
    cursor: pointer;
}


/*  ---------------------  Tajweed Detail Page  End    -----------------------*/



/*  ---------------------  Software Page Start      -----------------------*/

/* ################################  Software body Start ########################### */

.SoftwareContainer {
    background-color: #EAEAEA;
    padding-top: 13px !important;
    padding: 30px;
    float: left;
}

.SoftwareBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.SoftwareHeaderContent {
    margin: 35px 0 15px;
}

    .SoftwareHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.Softwareheading h2, .Softwareheading p {
    padding: 0px 30px;
    text-align: center;
}

.Softwareheading p {
    text-align: center;
    margin: 0;
}

.SoftwareBodyContainer {
}

.SoftwareGridSection {
    float: left;
    padding: 0 25px 25px;
}

#tutorialVideoArea .SoftwareGridSection {
    width: 100%;
    margin-bottom: 15px;
}

h4.TV_CommentOnVideo {
    font-weight: bold;
}

.comment-actions li.comment {
    padding: 7px 0.75rem !important;
    width: 100px;
    display: inline-block;
    text-align: center;
}

.DesktopImg {
    text-align: center;
}

    .DesktopImg img {
        width: 85%;
    }

.DesktopDesc span {
    color: #000000;
    float: left;
}

.DesktopDesc i {
    color: #9d6d0d;
}

.SoftwareSteps {
    float: left;
    padding: 5px 15px;
    width: 100%;
}

.MobleStoreImg {
    margin-bottom: 15px;
    font-size: 0;
}

.SoftwareSteps span.Stepicon {
    float: left;
    width: 15px;
    color: #9d6d0d;
}

.SoftwareSteps span.Steptext {
    float: left;
    width: calc(100% - 15px);
    text-align: justify;
}

.MobileDesc {
    float: left;
    width: 100%;
    margin-bottom: 25px;
}

.w100 {
    float: left;
    width: 100%;
    padding: 0 15px;
}

.MobileHeading {
    text-align: center;
}

.MobileImg {
    text-align: center;
}

    .MobileImg img {
    }

.MobleStoreImg a {
    width: auto;
    max-width: 50%;
    display: inline-block;
}

    .MobleStoreImg a img {
        width: 100%;
        max-width: 180px;
    }
/* ################################  Software body End ########################### */



/*  ---------------------  Software Page Start End    -----------------------*/

/*  ---------------------  Arabic Page Start      -----------------------*/

/* ################################  Arabic body Start ########################### */

.ArabicContainer {
    background-color: #EAEAEA;
    padding-top: 13px !important;
    padding: 30px;
    float: left;
}

.ArabicBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.ArabicHeaderContent {
    margin-top: 35px;
    margin-bottom: 0;
}

    .ArabicHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.Arabicheading {
    margin: 10px 97px;
    text-align: center;
}

.ArabicBodyContainer {
}

.ArabicGridSection {
    float: left;
    padding: 0;
}




/* ################################ Arabic body End ########################### */



/*  ---------------------  Arabic Page Start End    -----------------------*/

/*  ---------------------  Pricing Start      -----------------------*/

/* ################################  Pricing body Start ########################### */

.PricingContainer {
    background-color: #EAEAEA;
    padding-top: 13px !important;
    padding: 30px;
    float: left;
}

.PricingBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.PricingHeaderContent {
    margin-top: 35px;
    margin-bottom: 35px;
}

    .PricingHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.Pricingheading {
    margin: 10px 97px;
    text-align: center;
}

.PricingBodyContainer {
}

.PricingGridSection {
    float: left;
    padding: 0 25px 25px;
}

.Pricing {
    margin-bottom: 18px;
}

.PricingBodyContainer {
    text-align: left;
}

    .PricingBodyContainer h5 {
        font-weight: bold;
        padding: 0 15px;
    }

    .PricingBodyContainer .col-md-4 {
        float: left;
        margin-top: 25px;
    }

        .PricingBodyContainer .col-md-4 img {
            padding: 10px 0;
        }


.firstRow {
    background-color: #f1f4f5;
}

    .firstRow .mainContainer {
        padding: 0px !important;
    }

    .firstRow .question {
        padding: 30px 5px 0px 30px;
        margin: 0px;
        text-align: left;
    }

    .firstRow .answersOpt {
        padding: 0 !important;
    }

    .firstRow .text-center .col-lg-6 {
        float: left;
    }

        .firstRow .text-center .col-lg-6 .col-lg-4 {
            float: left;
        }

.options .card .card-body {
    background-color: #f1f4f5;
}

.options .card .card-header {
    font-size: 12px !important;
    padding: 10px 0 !important;
}

.firstRow .options {
    padding: 0px;
    margin: 0px;
}

    .firstRow .options .card {
        border-radius: 0px !important;
        border-left: 1px solid #FFFFFF !important;
        border-right: 1px solid #FFFFFF !important;
        border-top: none !important;
        border-bottom: none !important;
        margin: 0px !important;
    }

.Assignments .card-header {
    background-color: #64b5f6;
    border-radius: 0px !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.CostAssignments .card-header {
    background-color: #4fc3f7;
    border-radius: 0px !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.CostMonths .card-header {
    background-color: #9ccc65;
    border-radius: 0px !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.secondRow {
    background-color: #f1f4f5;
    margin-top: 10px !important;
}

    .secondRow .mainContainer {
        padding: 0px !important;
    }

    .secondRow .text-center .col-lg-6 {
        float: left;
    }

        .secondRow .text-center .col-lg-6 .col-lg-4 {
            float: left;
        }

    .secondRow .question {
        padding: 30px 5px 30px 30px;
        margin: 0px;
        text-align: left;
        border-right: 1px solid #FFFFFF !important;
    }

    .secondRow .answersOpt {
        padding: 30px 5px 30px 30px;
        text-align: left;
        border-left: 1px solid #FFFFFF !important;
    }

    .secondRow .options {
        padding: 0px;
        margin: 0px;
    }

        .secondRow .options .card {
            border-radius: 0px !important;
            border-right: 1px solid #FFFFFF !important;
            border-left: 1px solid #FFFFFF !important;
            border-top: none !important;
            border-bottom: none !important;
            margin: 0px !important;
        }

.Minutes .card-header {
    background-color: #4dd0e1;
    border-radius: 0px !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.CostMin .card-header {
    background-color: #ffa726;
    border-radius: 0px !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.TotalConf .card-header {
    background-color: #ff7043;
    border-radius: 0px !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.thirdRow {
    background-color: #f1f4f5;
    margin-top: 10px !important;
}

    .thirdRow .mainContainer {
        padding: 0px !important;
    }

    .thirdRow .text-center .col-lg-6 {
        float: left;
    }

        .thirdRow .text-center .col-lg-6 .col-lg-4 {
            float: left;
        }

    .thirdRow .question {
        padding: 30px 5px 0px 30px;
        margin: 0px;
        text-align: left;
        border-right: 1px solid #FFFFFF !important;
    }

    .thirdRow .answersOpt {
        padding: 0 !important;
        border-left: 1px solid #FFFFFF !important;
    }

    .thirdRow .options {
        padding: 0px;
        margin: 0px;
    }

        .thirdRow .options .card {
            border-radius: 0px !important;
            border-right: 1px solid #FFFFFF !important;
            border-left: 1px solid #FFFFFF !important;
            border-top: none !important;
            border-bottom: none !important;
            margin: 0px !important;
        }

.forthRow {
    margin-top: 10px !important;
}

    .forthRow .mainContainer {
        padding: 0px !important;
    }

    .forthRow .question {
        padding: 30px 5px 0px 30px;
        margin: 0px;
        text-align: left;
        border-right: 1px solid #FFFFFF !important;
        color: #876d29;
        font-weight: bold;
    }

#pricingDetails .forthRow .question {
    padding: 10px 5px 0px 30px;
}

    #pricingDetails .forthRow .question .col-sm-1 {
        width: 30px;
        float: left;
        padding: 0;
    }

    #pricingDetails .forthRow .question .noticeText {
        float: none;
        padding-left: 40px;
    }

.forthRow .answersOpt {
    padding: 0 !important;
    border-left: 1px solid #FFFFFF !important;
}

.forthRow .text-center .col-lg-6 {
    float: left;
}

    .forthRow .text-center .col-lg-6 .col-lg-4 {
        float: left;
    }

.forthRow .TotalCount {
    padding: 0px;
    margin: 0px;
    float: right;
}

    .forthRow .TotalCount .card {
        border-radius: 0px !important;
        border-right: 1px solid #FFFFFF !important;
        border-left: 1px solid #FFFFFF !important;
        border-top: none !important;
        border-bottom: none !important;
        margin: 0px !important;
    }

.forthRow .options {
    padding: 0px;
    margin: 0px;
}

    .forthRow .options .card {
        border-radius: 0px !important;
        border-right: 1px solid #FFFFFF !important;
        border-left: 1px solid #FFFFFF !important;
        border-top: none !important;
        border-bottom: none !important;
        margin: 0px !important;
    }

.totalCost {
    border: none !important;
}

    .totalCost .card-body {
        border: none !important;
        background-color: #FFFFFF;
        padding: 35px 0 35px 0;
        color: #e74c3c;
    }

.totalVal {
    background-color: #e74c3c !important;
    padding: 32px 0px;
}

.answersOpt .col-lg-8 {
    float: left;
}

.question .col-sm-1 {
    float: left;
}

.noticeText {
    float: left;
}

.explore-more-link {
    cursor: pointer;
    font-weight: bold;
    color: #337ab7 !important;
}

.PricingBodyContainer, .FeeCalcu {
    float: left;
}

#pricingDetails .TeacherConference-nav {
    float: left;
    position: relative;
    height: 27px;
}

#pricingDetails .TeacherConference-button.TeacherConference-up {
    position: absolute;
    height: 50%;
    top: 1px;
    border-bottom: 1px solid #eee;
    right: -39px;
    background: #d3d3d3;
}

#pricingDetails .TeacherConference-button.TeacherConference-down {
    position: absolute;
    bottom: 0px;
    height: 50%;
    right: -39px;
    background: #d3d3d3;
}

#pricingDetails .TeacherConference-button {
    position: relative;
    cursor: pointer;
    border-left: 1px solid #eee;
    width: 20px;
    text-align: center;
    color: #333;
    font-size: 13px;
    line-height: 1.7;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    line-height: 13px;
}

#pricingDetails .TeacherConference {
    position: relative;
    margin: 0 auto;
    width: 60px;
}

    #pricingDetails .TeacherConference input {
        width: 45px;
        height: 27px;
        line-height: 1.65;
        float: left;
        display: block;
        padding: 0;
        margin: 0;
        text-align: center;
        border: 1px solid #eee;
    }




@media (max-width: 1186px) {
    .options .card .card-header {
        padding: 10px 0px 10px 0px;
    }

    .tajweedMainBox {
        width: 25%;
    }

    .tajweedMainBoxTopTwo {
        width: 30%;
    }
}

@media (max-width: 767px) {
    .totalCost .text-right {
        text-align: center;
    }

    .TotalCount {
        width: 100%;
    }

    .question .col-sm-1 {
        margin: 0 auto;
    }

    .WhoWeAreImg2 {
        margin: 0 0 15px !important;
        text-align: center;
    }

    .WWAHeaderContent span img {
        position: static;
    }

    .WWAHeaderContent {
        padding: 0 15px;
    }

        .WWAHeaderContent span {
            float: left;
        }

            .WWAHeaderContent span:nth-child(2) {
                width: calc(100% - 60px) !important;
                padding: 0;
            }

                .WWAHeaderContent span:nth-child(2) span {
                    width: 100%;
                    text-align: center;
                }

    .row.justify-content-md-center.MainBodyContainerContent .Block5Body .col-md-6:first-child {
        margin-bottom: 25px;
    }

    .secondRow .answersOpt {
        padding: 30px;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        align-items: center;
        height: 100%;
        justify-content: center;
    }
}




/* ################################ Pricing body End ########################### */



/*  ---------------------  Pricing Page Start End    -----------------------*/



/*  ---------------------  FAQs Start      -----------------------*/

/* ################################  FAQs body Start ########################### */

.FAQContainer {
    background-color: #EAEAEA;
    padding-top: 13px !important;
    padding: 30px;
    float: left;
}

.FAQBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.FAQHeaderContent {
    margin-top: 35px;
    margin-bottom: 35px;
}

    .FAQHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.FAQheading {
    margin: 10px 97px;
    text-align: center;
}

.FAQBodyContainer {
}

.FAQGridSection {
    float: left;
    padding: 0 90px;
}

.FAQ {
    margin-bottom: 18px;
}

.FAQBodyContainer {
    text-align: left;
}

.orangeheading {
    width: 100%;
    text-align: center;
    background-color: #dda53b;
    padding: 15px 0;
    margin: 0;
    margin-top: 10px;
    color: #FFFFFF;
    font-size: 22px;
}

.FAQBodyContainer .panel {
    padding: 0;
}

    .FAQBodyContainer .panel .panel-body, #accordion .panel-body {
        background-color: #fff9f1;
        padding: 20px 25px;
        text-align: justify;
        border: 1px solid #ccc;
        border-top: 0;
    }

.FAQBodyContainer .accordion, #accordion .panel-heading {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    border: 1px solid #eee;
}

.panel.panel-default {
    margin-bottom: 2px;
}

.panel-heading {
    position: relative;
}

    .panel-heading .panel-title {
        width: 100%;
        display: inline-block;
        margin: 0;
        vertical-align: middle;
    }

        .panel-heading .panel-title a {
            display: block;
            font-size: 1.25rem;
            color: #444;
            padding: 18px;
        }

.FAQBodyContainer .active, .accordion:hover, #accordion .panel-heading:hover, #accordion .panel-heading.active {
    background-color: #6a3a1d;
    color: #FFFFFF;
}

.FAQBodyContainer .accordion:after, #accordion .panel-heading::after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    position: absolute;
    top: 18px;
    right: 20px;
}

.FAQBodyContainer .active:after, #accordion .panel-heading.active::after {
    content: "\2212";
    color: #FFFFFF;
}

.FAQBodyContainer .panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#accordion .panel-heading:hover a, #accordion .panel-heading:hover::after, #accordion .panel-heading.active a {
    color: #FFF;
}


/* ################################ FAQs body End ########################### */

/*  ---------------------  FAQs Page Start End    -----------------------*/



/*  ---------------------  Video Page Start End    -----------------------*/

.VideoContainer {
    background-color: #EAEAEA;
    padding-top: 13px !important;
    padding: 30px;
    float: left;
}

.VideoBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.VideoHeaderContent {
    margin-top: 35px;
    margin-bottom: 35px;
}

    .VideoHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.Videoheading {
    margin: 10px 97px;
    text-align: center;
}

.VideoBodyContainer {
}

.VideoGridSection {
    float: left;
    padding: 0 90px;
}

.Video {
    margin-bottom: 18px;
}

.VideoBodyContainer {
    text-align: left;
}

.thumbwrap {
    float: left;
}
/*  ---------------------  Video Page Start End    -----------------------*/
/* ################################  Header Start ########################### */
.HeaderBanner {
    position: absolute;
    top: 85px !important;
    z-index: 100;
}

.HeaderDownloadLink {
    float: right;
    text-align: right;
    position: absolute;
    top: 78px;
    right: 0;
    z-index: 100;
}

    .HeaderDownloadLink a img {
        width: 173px;
    }

.BannerTagLine {
    background-color: rgba(45,185,154,0.60);
    color: #FFFFFF;
    text-align: center;
    position: absolute;
    top: 140px;
    height: 100px;
    display: table;
}

    .BannerTagLine h1 {
        font-size: 1.4rem;
        padding: 15px 0 15px 0;
        display: table-cell;
        height: 100px;
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }

    .BannerTagLine p {
        font-size: 1rem;
        padding-bottom: 15px;
    }

@media (max-width:1280px) {




    .BannerTagLine h1 {
        font-size: 1.4rem;
    }

    .BannerTagLine p {
        font-size: 1rem;
    }
}


.HeaderFormContainer {
    margin-top: 10px;
}

.Headerform {
    float: left;
}

.inputHeaderBanner {
    background-color: rgba(255,255,255,0.20);
    padding: 10px;
    border: 1px solid;
    border-color: rgba(130,122,96,0.20);
    position: relative;
}

    .inputHeaderBanner input {
        border-radius: 0;
    }

    .inputHeaderBanner a {
        position: absolute;
        top: 12px;
        right: 22px;
        font-size: 28px;
        color: #6f4a00;
    }

.Learnmenu {
}

.LearnPills {
    background-color: #FFFFFF;
    padding: 6px;
    border-radius: 6px;
    font-size: 1.2rem;
}

    .LearnPills a {
        color: #525252;
        padding: 0 1rem;
    }

        .LearnPills a span {
            float: right;
            font-size: 12px;
        }

    .LearnPills .active {
        background-color: #9AEAD8 !important;
    }

.dropIcon {
    position: absolute;
    margin-top: -27px;
    margin-left: 13px;
    font-size: 41px !important;
    color: white;
}

.mainSlider {
    z-index: -1;
}

    .mainSlider .carousel-item img {
        object-fit: cover;
        object-position: top;
    }



.HowLearnInput {
    padding: 13px;
    color: #443000;
}

.DownloadAppBtn {
    margin-bottom: 0 !important;
    border-radius: 0px;
    background-color: #F7EDA5;
    color: #000000;
    border: 1px solid #4A4A4A;
}


.carousel-control-prev, .carousel-control-next {
    z-index: 1;
}

.carousel-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 14px;
}

.carousel-indicators .active {
    /*width: 14px;
    height: 14px;*/
    width: 18px;
    height: 18px;
}

@media (min-width:600px) and (max-width: 1100px) {
    .HeaderBanner {
        top: 27%;
    }
}

@media (min-width:1101px) and (max-width: 1400px) {
    .HeaderBanner {
        top: 46%;
    }
}

@media (min-width:1401px) {
    .HeaderBanner {
        top: 34%;
    }
}


/* ################################  Header End ########################### */




/* ################################  Menu Start ########################### */

.menuContainer {
    background-color: #EAEAEA;
    padding-top: 25px;
    padding-bottom: 25px;
    float: left;
}

.MenuBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #95989A;
    padding-bottom: 200px;
    float: left;
}

.menuHeader span {
    float: left;
}

.Menuheading {
    margin: 10px 97px;
}

.headerContent {
    margin-top: 35px;
}

    .headerContent span img {
        width: 30px;
        margin-top: 10px;
    }

.tabsMenu {
    margin-top: 35px;
}

/* Tab Menu  Style Start */

a:hover, a:focus {
    text-decoration: none;
    outline: none;
}

.tab .nav-tabs {
    border-bottom: 0 none;
}

    .tab .nav-tabs li {
        margin-right: 10px;
    }

        .tab .nav-tabs li a {
            position: relative;
            padding: 15px 32px;
            color: #444;
            font-size: 17px;
            z-index: 1;
        }

            .tab .nav-tabs li a:hover {
                background: transparent;
                border: 1px solid transparent;
            }

            .tab .nav-tabs li a:before {
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                bottom: 8px;
                left: -1px;
                font-size: 17px;
                background: #F4F4F4;
                border: 1px solid #d3d3d3;
                border-bottom: 0px none;
                transform-origin: left center 0;
                transform: perspective(4px) rotateX(2deg);
                z-index: -1;
            }

        .tab .nav-tabs li.active a:before {
            border: 2px solid #15A283;
            border-bottom: none;
        }

        .tab .nav-tabs li.active a, .tab .nav-tabs li.active a:focus, .tab .nav-tabs li.active a:hover {
            border: 1px solid transparent;
            background: transparent;
            color: #444;
            z-index: 2;
        }

.tab-content .tab-pane {
    border: 2px solid #15A283;
    padding: 50px;
    background: #F4F4F4;
    line-height: 22px;
}

    .tab-content .tab-pane h3 {
        margin-top: 0;
    }

.table table td, .table table th {
    border: none;
    vertical-align: top;
    table-layout: fixed;
}

#tblCourseStudentSettings table {
    width: 100%;
    table-layout: fixed;
}

    #tblCourseStudentSettings table th {
        color: #FFF;
    }

#tblCourseStudentSettings > tr > td {
    padding: 0;
}

#tblCourseStudentSettings th.courseSetting {
    padding-bottom: .75rem !important;
}

@media only screen and (max-width: 767px) {
    .tab .nav-tabs li a {
        padding: 15px 10px;
        font-size: 14px;
    }

        .tab .nav-tabs li a:before {
            bottom: 6px;
        }

    .page-description {
        margin: 0 0 15px !important;
    }
}

@media only screen and (max-width: 576px) {
    .video-btns-w .btn {
        font-size: 13px !important;
    }

    .tab .nav-tabs li {
        width: 100%;
        margin-bottom: 5px;
    }

        .tab .nav-tabs li a:before {
            bottom: 0;
            transform: none;
            border-bottom: 1px solid #d3d3d3;
        }

        .tab .nav-tabs li.active a:before {
            background-color: #15A283;
            border: none;
            color: #FFFFFF;
            text-align: center;
        }


    .BannerTagLine {
        width: calc(100% - 40px);
        left: 20px;
        right: 20px;
    }

    .mainSlider .carousel-item img {
    }

    .totalCost .card-body {
        padding-bottom: 10px;
        text-align: center !important;
    }

    .forthRow .TotalCount {
        margin-bottom: 20px;
    }

    .secondRow .answersOpt {
        height: auto;
    }

    #tblCourseStudentSettings > tr:nth-child(7) > td > table {
        width: 100%;
    }

        #tblCourseStudentSettings > tr:nth-child(7) > td > table > tbody > tr, #tblCourseStudentSettings > tr:nth-child(7) > td > table > tbody > tr > td {
            width: 100%;
            display: block;
        }

    td.courseSetting, th.courseSetting {
        width: 50% !important;
    }

    #tblCourseStudentSettings > tr:nth-child(7) > td td.courseSetting {
        width: 100% !important;
    }

    .courseNameHoolder .col-md-8.col-sm-12.float-right {
        padding: 0;
    }

    th.colToRemoveAtRoot, td.colToRemoveAtRoot {
        display: none !important;
    }

    .SelectedCourseName {
        white-space: normal !important;
    }

    .colToRemoveAtRoot.studentCriteria {
        display: none;
    }
}

.tab-content {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*  Tab Menu Style End*/

/* ################################  Menu End ########################### */

/* ################################  Who We Are Start ########################### */

.WWAContainer {
    background-color: #EAEAEA;
    padding: 30px;
    float: left;
}

.WWABody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.WWAHeaderContent2 {
    margin-top: -30px;
}

.WWAHeaderContent1 {
    margin-top: 30px;
    margin-bottom: 48px;
}

.WWAHeaderContent {
    margin-top: 30px;
    /*margin-bottom: 35px;*/
}

    .WWAHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.WWAheading {
    margin: 10px 10px;
}

.WWABodyContainer {
}

.WWAGridSection {
    float: right;
    padding: 6px 15px;
}

.img-icon {
    width: 155px;
    margin: 0 0 15px;
}

    .img-icon + span.MainBodyheading {
        max-width: 690px;
        margin: 0;
    }

.WhoWeAreContent {
    float: right;
    text-align: justify;
}

.WhoWeAreImg {
    float: right;
}

    .WhoWeAreImg img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }



/* ################################  Who We Are End ########################### */


/* ################################  Certified Start ########################### */

.CertifiedContainer {
    background-color: #EAEAEA;
    padding-top: 50px !important;
    padding: 30px;
    float: left;
}

.CertifiedBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.CertifiedHeaderContent {
    margin-top: 35px;
    margin-bottom: 35px;
}

    .CertifiedHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.Certifiedheading {
    margin: 12px 10px;
    text-align: center;
    max-width: calc(100% - 120px);
}

.WWAHeaderContent2 span {
    display: inline-block;
    vertical-align: middle;
}

.Imgresponsive {
    max-width: 100%;
    height: auto;
    margin-top: -65px;
}

.CertifiedTeachers, .VarietyTeachers, .AffordablePrices {
    float: left;
    text-align: center;
    padding: 60px;
    margin: 0 !important;
}

    .CertifiedTeachers p, .VarietyTeachers p, .AffordablePrices p {
        /*color: #2DB99A;*/
        text-align: justify;
    }


/* ################################  Certified End ########################### */

/* ################################  Learn Anywhere Start ########################### */

.LearnContainer {
    background-color: #EAEAEA;
    padding: 30px;
    padding-top: 0 !important;
    float: left;
}

.LearnBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.LearnHeaderContent {
    margin-top: 35px;
    margin-bottom: 35px;
}

    .LearnHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.Learnheading {
    margin: 10px 97px;
}

.LearnBodyContainer {
}

.LearnGridSection {
    float: left;
}

.LearnGridSection2 {
    float: left;
    padding: 25px 6%;
}

    .LearnGridSection2 .FeaturesLeft {
        float: left;
        text-align: left;
        margin: 15px 0;
    }

    .LearnGridSection2 .FeaturesRight {
        float: right;
        text-align: right;
        margin: 15px 0;
    }

.FeaturesLeft .LearnGridIc img {
    width: 100%;
}

.FeaturesRight .LearnGridIc {
    float: right;
}

    .FeaturesRight .LearnGridIc img {
        width: 100%;
    }

.FeaturesLeft .LearnGridDesc {
    padding: 0 30px;
}

    .FeaturesLeft .LearnGridDesc p {
        text-align: justify;
    }

    .FeaturesLeft .LearnGridDesc .SoftwareSteps {
        text-align: justify;
    }

.FeaturesRight .LearnGridDesc {
    float: right;
}

    .FeaturesRight .LearnGridDesc p {
        text-align: justify;
    }

.LearnDesc {
    text-align: center;
    font-size: 20px;
}

.LearnGridIc {
    float: left;
    padding: 0;
}

.LearnGridDesc {
    float: left;
    padding: 0 30px;
}

    .LearnGridDesc h5 {
        font-size: 18px;
        text-align: left;
    }

        .LearnGridDesc h5 a {
            color: #15A283;
        }

    .LearnGridDesc p {
        font-size: 16px;
        color: #000;
    }

.with2Icons {
    margin-top: 100px;
}

.StudyAnywhere {
    float: left;
    margin-bottom: 30px;
}

@media (min-width: 1500px) {
    .dontUseSkype .LearnGridDesc {
        padding: 70px 0px !important;
    }

    .onMobile {
        margin-top: -50px !important;
    }

        .onMobile .LearnGridDesc {
            padding: 80px 0px !important;
        }

    .TFclock {
        margin-top: -50px !important;
    }

        .TFclock .LearnGridDesc {
            padding: 0 0px !important;
        }

    .globe {
        margin-top: -10px !important;
    }

        .globe .LearnGridDesc {
            padding: 70px 0px !important;
        }

    .offlineSec {
        margin-top: -45px !important;
    }

        .offlineSec .LearnGridDesc {
            padding: 45px 0px !important;
        }

    .studySec {
        margin-top: -20px !important;
    }

        .studySec .LearnGridDesc {
            padding: 70px 0px !important;
        }
}

@media (min-width:768px) {

    .LearnGridSection2 {
        padding: 25px 20%;
    }

    .FeaturesLeft .LearnGridDesc {
        padding: 0 30px;
    }

    .FeaturesRight .LearnGridDesc {
        padding: 0 30px;
    }
}

/* ################################  Learn Anywhere End ########################### */

/* ################################  No Time Search Start ########################### */

.SearchContainer {
    background-color: #EAEAEA;
    padding-top: 0 !important;
    padding: 30px;
    float: left;
}

.SearchBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.SearchHeaderContent {
    margin-top: 35px;
    margin-bottom: 35px;
}

    .SearchHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.Searchheading {
    margin: 10px 97px;
}

.SearchBodyContainer {
    text-align: center;
}

.SearchDesc {
    text-align: center;
    font-size: 18px;
    margin-bottom: 35px;
}

.RequestBtn {
    border: 1px solid #000000;
    border-radius: 0;
    background-color: #F7EDA5;
    color: #000000;
    font-size: 14px;
    margin-bottom: 35px;
    padding: 10px 35px;
}

/* ################################  No Time Search End ########################### */

/* ################################  How Quran LMS Works Start ########################### */

.HowQuranLMSWorksContainer {
    background-color: #EAEAEA;
    padding-top: 0 !important;
    padding: 30px;
    float: left;
}

.HowQuranLMSBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.HowQuranLMSHeaderContent {
    margin-top: 35px;
}

    .HowQuranLMSHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.HowQuranLMSheading {
    margin: 10px 86px;
}

.HowQuranLMSWorks {
    margin-bottom: 18px;
}

.HowQuranLMSBodyContainer {
    text-align: center;
    padding: 0 45px;
}

    .HowQuranLMSBodyContainer h5 {
        font-weight: bold;
    }

    .HowQuranLMSBodyContainer p {
        text-align: justify;
    }
/* ################################  How Quran LMS Works End ########################### */

/* ################################  How Quran Works Start ########################### */

.HowQuranWorks {
    margin-bottom: 18px;
}

.HowQuranContainer {
    background-color: #EAEAEA;
    padding-top: 0 !important;
    padding: 30px;
    float: left;
}

.HowQuranBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.HowQuranHeaderContent {
    margin-top: 35px;
}

    .HowQuranHeaderContent span img {
        width: 30px;
        margin-top: 10px;
        margin-left: 14px;
    }

.HowQuranheading {
    margin: 10px 86px;
}

.HowQuranBodyContainer {
    text-align: center;
}

    .HowQuranBodyContainer .col-md-4 {
        float: left;
        margin-top: 25px;
    }

        .HowQuranBodyContainer .col-md-4 img {
            padding: 10px 0;
        }

    .HowQuranBodyContainer img {
        max-width: 100%;
        height: auto;
        margin-top: 30px;
    }

.HowQuranDesc {
    text-align: center;
    font-size: 18px;
    margin-bottom: 15px !important;
}

.HowQuranDownlad {
    background-image: url(../../images/InstallBg.png);
    background-size: cover;
    background-position: right;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    width: 200px;
    position: absolute;
}

    .HowQuranDownlad p {
        padding: 10px 15px 10px 0;
    }

.LearnAbout {
    background-image: url(../../images/InstallBg.png);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 5px;
    width: 400px;
    position: absolute;
}

    .LearnAbout p {
        padding: 10px 15px 10px 15px;
    }

.FindTeacher {
    background-image: url(../../images/InstallBg-left.png);
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    width: 400px;
    position: absolute;
}

    .FindTeacher p {
        padding: 10px 0 10px 10px;
    }


.FindTeacherHoverContent {
    display: none;
    color: #000000;
    position: absolute;
    top: 0;
    right: 98%;
    background-color: rgba(247,237,165,0.90);
    padding: 10px;
    width: 398px;
    z-index: 5;
    border-radius: 8px;
    border: 1px solid #5a521c;
}

    .FindTeacherHoverContent p {
        text-align: left;
        padding: 10px;
    }

    .FindTeacherHoverContent ul {
        text-align: left;
        padding: 0 15px;
    }

.FindTeacher:hover .FindTeacherHoverContent {
    display: block;
    color: #000000;
}



.SlctPlan {
    background-image: url(../../images/InstallBg.png);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    width: 165px;
    position: absolute;
}

    .SlctPlan p {
        padding: 10px 15px 10px 0;
    }

.YourStudy {
    background-image: url(../../images/InstallBg.png);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    width: 287px;
    position: absolute;
}

    .YourStudy p {
        padding: 10px 30px 10px 5px;
    }

.AssignmentAppears {
    background-image: url(../../images/InstallBg-left.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    width: 153px;
    position: absolute;
}

    .AssignmentAppears p {
        padding: 10px 0 10px 25px;
    }

.TeacherCorrect {
    background-image: url(../../images/InstallBg-left.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    width: 178px;
    position: absolute;
}

    .TeacherCorrect p {
        padding: 10px 0 10px 15px;
    }

.ScheduleOnline {
    background-image: url(../../images/InstallBg-left.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    width: 178px;
    position: absolute;
}

    .ScheduleOnline p {
        padding: 10px 0 10px 15px;
    }

.TeacherPrivate {
    background-image: url(../../images/InstallBg-left.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    width: 165px;
    position: absolute;
}

    .TeacherPrivate p {
        padding: 10px 0 10px 15px;
        margin-bottom: 0;
    }



.flowMobile {
    display: none;
}

.right_col #EditProfilePage .container {
    width: 100%;
    max-width: 100% !important;
    padding: 0 15px;
}

@media (max-width:350px) {
    .flowMobile {
        display: block;
    }

    .flowDesktop {
        display: none;
    }

    .HowQuranDownlad {
        display: none;
    }

    .LearnAbout {
        display: none;
    }

    .FindTeacher {
        display: none;
    }

    .SlctPlan {
        display: none;
    }

    .YourStudy {
        display: none;
    }

    .AssignmentAppears {
        display: none;
    }

    .TeacherCorrect {
        display: none;
    }

    .ScheduleOnline {
        display: none;
    }

    .TeacherPrivate {
        display: none;
    }
}

@media (min-width:351px) and (max-width:359px) {

    .flowMobile {
        display: block;
    }

    .flowDesktop {
        display: none;
    }

    .HowQuranDownlad {
        display: none;
    }

    .LearnAbout {
        display: none;
    }

    .FindTeacher {
        display: none;
    }

    .SlctPlan {
        display: none;
    }

    .YourStudy {
        display: none;
    }

    .AssignmentAppears {
        display: none;
    }

    .TeacherCorrect {
        display: none;
    }

    .ScheduleOnline {
        display: none;
    }

    .TeacherPrivate {
        display: none;
    }
}

@media (min-width:360px) and (max-width:374px) {

    .flowMobile {
        display: none;
    }

    .flowDesktop {
        width: 70%;
        margin-top: 0 !important;
    }

    .HowQuranDownlad {
        top: 16%;
        left: 16%;
        font-size: 7px;
        width: 95px;
    }

        .HowQuranDownlad p {
            padding: 5px 15px 5px 0;
        }

    .LearnAbout {
        top: 26%;
        left: 0.5%;
        width: 143px;
        font-size: 7px;
    }

        .LearnAbout p {
            padding: 5px 15px 6px 5px;
        }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -14%;
        }

    .FindTeacher {
        top: 35%;
        right: 1%;
        width: 148px;
        font-size: 7px;
    }

        .FindTeacher p {
            padding: 5px 0 5px 10px;
        }

    .FindTeacherHoverContent {
        width: 210px;
        right: 63%;
    }

    .SlctPlan {
        top: 45%;
        left: 20%;
        font-size: 7px;
        width: 85px;
    }

        .SlctPlan p {
            padding: 5px 15px 5px 0;
        }

    .YourStudy {
        top: 61%;
        left: 0%;
        width: 88px;
        font-size: 7px;
    }

        .YourStudy p {
            padding: 5px 11px 5px 0px;
        }

    .AssignmentAppears {
        top: 66%;
        left: 33%;
        font-size: 7px;
        width: 80px;
    }

        .AssignmentAppears p {
            padding: 5px 0 5px 19px;
        }

    .TeacherCorrect {
        top: 83%;
        left: 33%;
        font-size: 7px;
        width: 100px;
    }

        .TeacherCorrect p {
            padding: 2px 0 3px 15px;
        }

    .ScheduleOnline {
        top: 66%;
        right: 2%;
        width: 75px;
        font-size: 7px;
    }

        .ScheduleOnline p {
            padding: 2px 0 2px 9px;
        }

    .TeacherPrivate {
        top: 76%;
        right: 1%;
        width: 79px;
        font-size: 7px;
    }

        .TeacherPrivate p {
            padding: 2px 0 2px 5px;
        }
}


@media (min-width:375px) and (max-width:399px) {

    .flowMobile {
        display: none;
    }

    .flowDesktop {
        width: 70%;
        margin-top: 0 !important;
    }

    .HowQuranDownlad {
        top: 16%;
        left: 16%;
        font-size: 7px;
        width: 95px;
    }

        .HowQuranDownlad p {
            padding: 5px 15px 5px 0;
        }

    .LearnAbout {
        top: 26%;
        left: 0.5%;
        width: 143px;
        font-size: 7px;
    }

        .LearnAbout p {
            padding: 5px 15px 6px 5px;
        }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -59%;
        }

    .FindTeacher {
        top: 35%;
        right: 1%;
        width: 148px;
        font-size: 7px;
    }

        .FindTeacher p {
            padding: 5px 0 5px 10px;
        }

    .FindTeacherHoverContent {
        width: 210px;
        right: 63%;
    }

    .SlctPlan {
        top: 45%;
        left: 20%;
        font-size: 7px;
        width: 85px;
    }

        .SlctPlan p {
            padding: 5px 15px 5px 0;
        }

    .YourStudy {
        top: 65%;
        left: 0%;
        width: 88px;
        font-size: 7px;
    }

        .YourStudy p {
            padding: 5px 11px 5px 0px;
        }

    .AssignmentAppears {
        top: 67%;
        left: 33%;
        font-size: 7px;
        width: 80px;
    }

        .AssignmentAppears p {
            padding: 5px 0 5px 19px;
        }

    .TeacherCorrect {
        top: 83%;
        left: 33%;
        font-size: 7px;
        width: 100px;
    }

        .TeacherCorrect p {
            padding: 2px 0 3px 15px;
        }

    .ScheduleOnline {
        top: 67%;
        right: 2%;
        width: 75px;
        font-size: 7px;
    }

        .ScheduleOnline p {
            padding: 2px 0 2px 9px;
        }

    .TeacherPrivate {
        top: 76%;
        right: 1%;
        width: 79px;
        font-size: 7px;
    }

        .TeacherPrivate p {
            padding: 2px 0 2px 5px;
        }
}

@media (min-width:400px) and (max-width:414px) {

    .flowMobile {
        display: none;
    }

    .flowDesktop {
        width: 70%;
        margin-top: 0 !important;
    }

    .HowQuranDownlad {
        top: 15%;
        left: 17%;
        font-size: 7px;
        width: 95px;
    }

        .HowQuranDownlad p {
            padding: 5px 15px 5px 0;
        }

    .LearnAbout {
        top: 26%;
        left: 0.5%;
        width: 157px;
        font-size: 7px;
    }

        .LearnAbout p {
            padding: 5px 15px 6px 5px;
        }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -62%;
        }

    .FindTeacher {
        top: 36%;
        right: 1%;
        width: 148px;
        font-size: 7px;
    }

        .FindTeacher p {
            padding: 5px 0 5px 10px;
        }

    .FindTeacherHoverContent {
        width: 210px;
    }

    .SlctPlan {
        top: 46%;
        left: 20%;
        font-size: 7px;
        width: 85px;
    }

        .SlctPlan p {
            padding: 5px 15px 5px 0;
        }

    .YourStudy {
        top: 68%;
        left: 0%;
        width: 88px;
        font-size: 7px;
    }

        .YourStudy p {
            padding: 5px 11px 5px 0px;
        }

    .AssignmentAppears {
        top: 69%;
        left: 33%;
        font-size: 7px;
        width: 80px;
    }

        .AssignmentAppears p {
            padding: 5px 0 5px 19px;
        }

    .TeacherCorrect {
        top: 87%;
        left: 33%;
        font-size: 7px;
        width: 100px;
    }

        .TeacherCorrect p {
            padding: 2px 0 3px 15px;
        }

    .ScheduleOnline {
        top: 70%;
        right: 3%;
        width: 75px;
        font-size: 7px;
    }

        .ScheduleOnline p {
            padding: 2px 0 2px 9px;
        }

    .TeacherPrivate {
        top: 81%;
        right: 2%;
        width: 79px;
        font-size: 7px;
    }

        .TeacherPrivate p {
            padding: 2px 0 2px 5px;
        }
}

@media (min-width:415px) and (max-width:500px) {


    .flowMobile {
        display: none;
    }

    .flowDesktop {
        width: 70%;
        margin-top: 0 !important;
    }

    .HowQuranDownlad {
        top: 15%;
        left: 17%;
        font-size: 7px;
        width: 95px;
    }

        .HowQuranDownlad p {
            padding: 5px 15px 5px 0;
        }

    .LearnAbout {
        top: 26%;
        left: 0.5%;
        width: 157px;
        font-size: 7px;
    }

        .LearnAbout p {
            padding: 5px 15px 6px 5px;
        }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -65%;
        }

    .FindTeacher {
        top: 35%;
        right: 1%;
        width: 148px;
        font-size: 7px;
    }

        .FindTeacher p {
            padding: 5px 0 5px 10px;
        }

    .FindTeacherHoverContent {
        width: 210px;
    }

    .SlctPlan {
        top: 46%;
        left: 20%;
        font-size: 7px;
        width: 85px;
    }

        .SlctPlan p {
            padding: 5px 15px 5px 0;
        }

    .YourStudy {
        top: 68%;
        left: 0%;
        width: 88px;
        font-size: 7px;
    }

        .YourStudy p {
            padding: 5px 11px 5px 0px;
        }

    .AssignmentAppears {
        top: 69%;
        left: 33%;
        font-size: 7px;
        width: 80px;
    }

        .AssignmentAppears p {
            padding: 5px 0 5px 19px;
        }

    .TeacherCorrect {
        top: 87%;
        left: 33%;
        font-size: 7px;
        width: 100px;
    }

        .TeacherCorrect p {
            padding: 2px 0 3px 15px;
        }

    .ScheduleOnline {
        top: 70%;
        right: 3%;
        width: 75px;
        font-size: 7px;
    }

        .ScheduleOnline p {
            padding: 2px 0 2px 9px;
        }

    .TeacherPrivate {
        top: 81%;
        right: 2%;
        width: 79px;
        font-size: 7px;
    }

        .TeacherPrivate p {
            padding: 2px 0 2px 5px;
        }
}

@media (min-width:501px) and (max-width:549px) {

    .flowMobile {
        display: none;
    }

    .flowDesktop {
    }

    .HowQuranDownlad {
        top: 13%;
        left: 9%;
        font-size: 10px;
        width: 150px;
    }

    .LearnAbout {
        top: 26%;
        left: 0.5%;
        width: 221px;
        font-size: 10px;
    }

        .LearnAbout p {
            padding: 5px 15px 6px 5px;
        }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -30%;
        }

    .FindTeacher {
        top: 35%;
        right: 1%;
        width: 213px;
        font-size: 10px;
    }

    .FindTeacherHoverContent {
        width: 300px;
    }

    .SlctPlan {
        top: 46%;
        left: 12%;
        font-size: 10px;
    }

    .YourStudy {
        display: none;
    }

    .AssignmentAppears {
        top: 65%;
        left: 21%;
        font-size: 10px;
        width: 115px;
    }

        .AssignmentAppears p {
            padding: 10px 0 10px 19px;
        }

    .TeacherCorrect {
        top: 85%;
        left: 25%;
        font-size: 10px;
    }

    .ScheduleOnline {
        top: 70%;
        right: 28%;
        width: 108px;
        font-size: 10px;
        background-image: url(../../images/InstallBg.png);
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
    }

        .ScheduleOnline p {
            padding: 10px 15px 10px 0;
        }

    .TeacherPrivate {
        top: 78%;
        right: 24%;
        font-size: 10px;
        background-image: url(../../images/InstallBg.png);
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
    }

        .TeacherPrivate p {
            padding: 10px 15px 10px 0;
        }
}

@media (min-width:550px) and (max-width:576px) {

    .HowQuranheading {
        width: 472px !important;
    }

    .flowMobile {
        display: none;
    }

    .flowDesktop {
        width: 70%;
        margin-top: 0 !important;
    }

    .HowQuranDownlad {
        top: 13%;
        left: 9%;
        font-size: 10px;
        width: 150px;
    }

    .LearnAbout {
        top: 26%;
        left: 0.5%;
        width: 221px;
        font-size: 10px;
    }

        .LearnAbout p {
            padding: 5px 15px 6px 5px;
        }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -76%;
        }

    .FindTeacher {
        top: 35%;
        right: 1%;
        width: 213px;
        font-size: 10px;
    }

    .FindTeacherHoverContent {
        width: 300px;
    }

    .SlctPlan {
        top: 46%;
        left: 12%;
        font-size: 10px;
    }

    .YourStudy {
        display: none;
    }

    .AssignmentAppears {
        top: 67%;
        left: 32%;
        font-size: 10px;
        width: 115px;
    }

        .AssignmentAppears p {
            padding: 10px 0 10px 19px;
        }

    .TeacherCorrect {
        top: 88%;
        left: 32%;
        font-size: 10px;
    }

    .ScheduleOnline {
        top: 68%;
        right: 3%;
        width: 108px;
        font-size: 10px;
    }

        .ScheduleOnline p {
            padding: 10px 0 10px 15px;
        }

    .TeacherPrivate {
        top: 79%;
        right: 32%;
        font-size: 10px;
        background-image: url(../../images/InstallBg.png);
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
    }

        .TeacherPrivate p {
            padding: 10px 15px 10px 0;
        }
}

@media (min-width:577px) and (max-width:768px) {

    .flowMobile {
        display: none;
    }

    .flowDesktop {
    }

    .HowQuranDownlad {
        top: 13%;
        left: 24%;
        font-size: 10px;
        width: 150px;
    }

    .LearnAbout {
        top: 26%;
        left: 3%;
        width: 295px;
        font-size: 10px;
    }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -30%;
        }

    .FindTeacher {
        top: 35%;
        right: 7%;
        width: 265px;
        font-size: 10px;
    }

    .FindTeacherHoverContent {
        width: 300px;
    }

    .SlctPlan {
        top: 46%;
        left: 22%;
        font-size: 10px;
    }

    .YourStudy {
        top: 68%;
        left: 0%;
        width: 174px;
        font-size: 10px;
    }

        .YourStudy p {
            padding: 10px 12px 10px 5px;
        }

    .AssignmentAppears {
        top: 69%;
        left: 34%;
        font-size: 10px;
    }

    .TeacherCorrect {
        top: 88%;
        left: 35%;
        font-size: 10px;
    }

    .ScheduleOnline {
        top: 70%;
        right: 8%;
        width: 108px;
        font-size: 10px;
    }

    .TeacherPrivate {
        top: 81%;
        right: 1%;
        font-size: 10px;
    }
}

@media (min-width:769px) and (max-width:800px) {
    .HowQuranheading {
        margin: 10px 86px;
    }

        .HowQuranheading h2 {
            font-size: 24px;
            text-align: center;
        }

    .HowQuranBodyContainer img {
        margin-top: 0;
    }

    .HowQuranHeaderContent span img {
        width: 30px;
        margin-top: 0;
        margin-left: 7px;
    }

    .flowMobile {
        display: none;
    }

    .flowDesktop {
    }

    .HowQuranDownlad {
        top: 13%;
        left: 25%;
        font-size: 12px;
        width: 150px;
    }

    .LearnAbout {
        top: 26%;
        left: 4%;
        width: 295px;
        font-size: 12px;
    }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -30%;
        }

    .FindTeacher {
        top: 35%;
        right: 8%;
        width: 265px;
        font-size: 12px;
    }

        .FindTeacher p {
            padding: 10px 0px 10px 32px;
        }

    .SlctPlan {
        top: 46%;
        left: 22%;
        font-size: 12px;
    }

    .YourStudy {
        top: 68%;
        left: 0%;
        width: 194px;
        font-size: 12px;
    }

    .AssignmentAppears {
        top: 69%;
        left: 35%;
        font-size: 12px;
    }

    .TeacherCorrect {
        top: 88%;
        left: 34%;
        font-size: 12px;
    }

    .ScheduleOnline {
        top: 70%;
        right: 1%;
        font-size: 12px;
    }

    .TeacherPrivate {
        top: 81%;
        right: 3%;
        font-size: 12px;
    }
}

@media (min-width:801px) and (max-width:992px) {
    .HowQuranheading {
        margin: 10px 86px;
    }

        .HowQuranheading h2 {
            font-size: 24px;
            text-align: center;
        }

    .HowQuranBodyContainer img {
        margin-top: 0;
    }

    .HowQuranHeaderContent span img {
        width: 30px;
        margin-top: 0;
        margin-left: 7px;
    }

    .flowMobile {
        display: none;
    }

    .flowDesktop {
    }

    .HowQuranDownlad {
        top: 13%;
        left: 25%;
    }

    .LearnAbout {
        top: 26%;
        left: 4%;
    }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -30%;
        }

    .FindTeacher {
        top: 35%;
        right: 18%;
        width: 265px;
    }

        .FindTeacher p {
            padding: 10px 0px 10px 32px;
        }

    .SlctPlan {
        top: 46%;
        left: 29%;
    }

    .YourStudy {
        top: 69%;
        left: 7%;
        width: 229px;
    }

    .AssignmentAppears {
        top: 69%;
        left: 38%;
    }

    .TeacherCorrect {
        top: 88%;
        left: 38%;
    }

    .ScheduleOnline {
        top: 70%;
        right: 12%;
    }

    .TeacherPrivate {
        top: 81%;
        right: 13%;
    }
}

@media (min-width:993px) and (max-width:1024px) {
    .HowQuranheading {
        margin: 10px 86px;
    }

        .HowQuranheading h2 {
            text-align: center;
        }

    .HowQuranBodyContainer img {
        margin-top: 0;
    }

    .HowQuranHeaderContent span img {
        width: 30px;
        margin-top: 0;
        margin-left: 7px;
    }

    .flowMobile {
        display: none;
    }

    .flowDesktop {
    }

    .HowQuranDownlad {
        top: 13%;
        left: 25%;
    }

    .LearnAbout {
        top: 26%;
        left: 4%;
    }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -30%;
        }

    .FindTeacher {
        top: 35%;
        right: 18%;
        width: 265px;
    }

        .FindTeacher p {
            padding: 10px 0px 10px 32px;
        }

    .SlctPlan {
        top: 46%;
        left: 29%;
    }

    .YourStudy {
        top: 69%;
        left: 7%;
        width: 229px;
    }

    .AssignmentAppears {
        top: 69%;
        left: 38%;
    }

    .TeacherCorrect {
        top: 88%;
        left: 38%;
    }

    .ScheduleOnline {
        top: 70%;
        right: 12%;
    }

    .TeacherPrivate {
        top: 81%;
        right: 13%;
    }
}

@media (min-width:1025px) and (max-width:1280px) {
    .HowQuranheading {
        margin: 10px 86px;
    }

        .HowQuranheading h2 {
            text-align: center;
        }

    .HowQuranBodyContainer img {
        margin-top: 0;
    }

    .HowQuranHeaderContent span img {
        width: 30px;
        margin-top: 0;
        margin-left: 7px;
    }

    .flowMobile {
        display: none;
    }

    .flowDesktop {
    }

    .HowQuranDownlad {
        top: 13%;
        left: 30%;
    }

    .LearnAbout {
        top: 26%;
        left: 13%;
    }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -30%;
        }

    .FindTeacher {
        top: 35%;
        right: 24%;
        width: 265px;
    }

        .FindTeacher p {
            padding: 10px 0px 10px 32px;
        }

    .SlctPlan {
        top: 46%;
        left: 33%;
    }

    .YourStudy {
        top: 69%;
        left: 15%;
        width: 229px;
    }

    .AssignmentAppears {
        top: 69%;
        left: 41%;
    }

    .TeacherCorrect {
        top: 88%;
        left: 41%;
    }

    .ScheduleOnline {
        top: 70%;
        right: 20%;
    }

    .TeacherPrivate {
        top: 81%;
        right: 21%;
    }
}

@media (min-width:1281px) and (max-width:1366px) {
    .HowQuranheading {
        margin: 10px 86px;
    }

        .HowQuranheading h2 {
            text-align: center;
        }

    .HowQuranBodyContainer img {
        margin-top: 0;
    }

    .HowQuranHeaderContent span img {
        width: 30px;
        margin-top: 14px;
        margin-left: 7px;
    }

    .flowMobile {
        display: none;
    }

    .flowDesktop {
    }

    .HowQuranDownlad {
        top: 13%;
        left: 31%;
    }

    .LearnAbout {
        top: 26%;
        left: 16%;
    }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -30%;
        }

    .FindTeacher {
        top: 35%;
        right: 26%;
        width: 265px;
    }

        .FindTeacher p {
            padding: 10px 0px 10px 32px;
        }

    .SlctPlan {
        top: 46%;
        left: 34%;
    }

    .YourStudy {
        top: 69%;
        left: 18%;
        width: 229px;
    }

    .AssignmentAppears {
        top: 69%;
        left: 42%;
    }

    .TeacherCorrect {
        top: 88%;
        left: 42%;
    }

    .ScheduleOnline {
        top: 70%;
        right: 22%;
    }

    .TeacherPrivate {
        top: 81%;
        right: 23%;
    }
}


@media (min-width:1367px) and (max-width:1440px) {
    .HowQuranheading {
        margin: 10px 86px;
    }

        .HowQuranheading h2 {
            text-align: center;
        }

    .HowQuranBodyContainer img {
        margin-top: 0;
    }

    .HowQuranHeaderContent span img {
        width: 30px;
        margin-top: 0;
        margin-left: 7px;
    }

    .flowMobile {
        display: none;
    }

    .flowDesktop {
    }

    .HowQuranDownlad {
        top: 13%;
        left: 32%;
    }

    .LearnAbout {
        top: 26%;
        left: 17%;
    }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -30%;
        }

    .FindTeacher {
        top: 35%;
        right: 27%;
        width: 265px;
    }

        .FindTeacher p {
            padding: 10px 0px 10px 32px;
        }

    .SlctPlan {
        top: 46%;
        left: 35%;
    }

    .YourStudy {
        top: 69%;
        left: 19%;
        width: 229px;
    }

    .AssignmentAppears {
        top: 69%;
        left: 42%;
    }

    .TeacherCorrect {
        top: 88%;
        left: 42%;
    }

    .ScheduleOnline {
        top: 70%;
        right: 23%;
    }

    .TeacherPrivate {
        top: 81%;
        right: 24%;
    }
}

@media (min-width:1441px) and (max-width:1650px) {
    .HowQuranheading {
        margin: 10px 86px;
    }

        .HowQuranheading h2 {
            text-align: center;
        }

    .HowQuranBodyContainer img {
        margin-top: 0;
    }

    .HowQuranHeaderContent span img {
        width: 30px;
        margin-top: 0;
        margin-left: 7px;
    }

    .flowMobile {
        display: none;
    }

    .flowDesktop {
    }

    .HowQuranDownlad {
        top: 13%;
        left: 32%;
    }

    .LearnAbout {
        top: 26%;
        left: 17%;
    }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -30%;
        }

    .FindTeacher {
        top: 35%;
        right: 27%;
        width: 265px;
    }

        .FindTeacher p {
            padding: 10px 0px 10px 32px;
        }

    .SlctPlan {
        top: 46%;
        left: 35%;
    }

    .YourStudy {
        top: 69%;
        left: 19%;
        width: 229px;
    }

    .AssignmentAppears {
        top: 69%;
        left: 42%;
    }

    .TeacherCorrect {
        top: 88%;
        left: 42%;
    }

    .ScheduleOnline {
        top: 70%;
        right: 23%;
    }

    .TeacherPrivate {
        top: 81%;
        right: 24%;
    }
}

@media (max-width: 1920px) {
    .resetWindowTxt {
        font-size: 13px;
        margin-left: 74px;
    }
}

@media (min-width:1651px) and (max-width:1920px) {
    .HowQuranheading {
        margin: 10px 86px;
    }

        .HowQuranheading h2 {
            text-align: center;
        }

    .HowQuranBodyContainer img {
        margin-top: 0;
    }

    .HowQuranHeaderContent span img {
        width: 30px;
        margin-top: 14px;
        margin-left: 7px;
    }

    .flowMobile {
        display: none;
    }

    .flowDesktop {
    }

    .HowQuranDownlad {
        top: 13%;
        left: 37%;
    }

    .LearnAbout {
        top: 26%;
        left: 26%;
    }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -30%;
        }

    .FindTeacher {
        top: 35%;
        right: 33%;
        width: 265px;
    }

        .FindTeacher p {
            padding: 10px 0px 10px 32px;
        }

    .SlctPlan {
        top: 46%;
        left: 39%;
    }

    .YourStudy {
        top: 69%;
        left: 27%;
        width: 229px;
    }

    .AssignmentAppears {
        top: 69%;
        left: 44%;
    }

    .TeacherCorrect {
        top: 88%;
        left: 44%;
    }

    .ScheduleOnline {
        top: 70%;
        right: 30%;
    }

    .TeacherPrivate {
        top: 81%;
        right: 31%;
    }
}

@media (min-width:1921px) {
    .HowQuranheading {
        margin: 10px 86px;
    }

        .HowQuranheading h2 {
            text-align: center;
        }

    .HowQuranBodyContainer img {
        margin-top: 0;
    }

    .HowQuranHeaderContent span img {
        width: 30px;
        margin-top: 0;
        margin-left: 7px;
    }

    .flowMobile {
        display: none;
    }

    .flowDesktop {
    }

    .HowQuranDownlad {
        top: 13%;
        left: 37%;
    }

    .LearnAbout {
        top: 26%;
        left: 26%;
    }

        .LearnAbout img {
            position: absolute;
            width: 20%;
            left: -7%;
            top: -30%;
        }

    .FindTeacher {
        top: 35%;
        right: 33%;
        width: 265px;
    }

        .FindTeacher p {
            padding: 10px 0px 10px 32px;
        }

    .SlctPlan {
        top: 46%;
        left: 39%;
    }

    .YourStudy {
        top: 69%;
        left: 27%;
        width: 229px;
    }

    .AssignmentAppears {
        top: 69%;
        left: 44%;
    }

    .TeacherCorrect {
        top: 88%;
        left: 44%;
    }

    .ScheduleOnline {
        top: 70%;
        right: 30%;
    }

    .TeacherPrivate {
        top: 81%;
        right: 31%;
    }
}



/* ################################ How Quran Works End ########################### */

/* ################################ Become a Teacher Start ########################### */

.BecomeTeacherContainer {
    background-color: #EAEAEA;
    padding-top: 0 !important;
    padding: 30px;
    float: left;
}

.BecomeTeacherBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.BecomeTeacherHeaderContent {
    margin-top: 35px;
}

    .BecomeTeacherHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.BecomeTeacherheading {
    margin: 10px 97px;
}

.BecomeTeacherBodyContainer {
    text-align: center;
    margin-top: 50px;
}

.BecomeTeacherDesc {
    text-align: center;
    font-size: 18px;
}

.BecomeTeacherTimeLine {
    margin-top: 30px;
    margin-bottom: 70px;
}

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

    .timeline::after {
        content: '';
        position: absolute;
        width: 12px;
        background-image: url(../../images/timelineBg.png);
        background-repeat: repeat-y;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -3px;
    }

.BecomeTeacherContent {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 24%;
}

    .BecomeTeacherContent::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        right: -20px;
        background-color: white;
        border: 4px solid #33B5A2;
        top: 15px;
        border-radius: 50%;
        z-index: 1;
    }

.Contentleft {
    left: 284px;
}

.Contentright {
    left: 50%;
}

.Contentleft::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 19px;
    width: 0;
    z-index: 1;
    right: 16px;
    border: medium solid #33B5A2;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #33B5A2;
}

.Contentright::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 18px;
    width: 0;
    z-index: 1;
    left: 22px;
    border: medium solid #33B5A2;
    border-width: 10px 10px 10px 0;
    border-color: transparent #33B5A2 transparent transparent;
}

.Contentright::after {
    left: -9px;
}

.BecomeTeacherContent .content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}

.AlignLg {
    margin-right: -36px;
}

.ContentRightAlign {
    text-align: center;
    padding: 0 !important;
    background: none !important;
}

    .ContentRightAlign .BuildYourProfile {
        background-color: #33B5A2;
        color: #FFFFFF;
        border-radius: 7px;
        border: 1px solid #000000;
    }

    .ContentRightAlign .SearchNewStudents {
        background-color: #33B5A2;
        color: #FFFFFF;
        border-radius: 7px;
        border: 1px solid #000000;
    }

    .ContentRightAlign .StartEarn {
        background-color: #33B5A2;
        color: #FFFFFF;
        border-radius: 7px;
        border: 1px solid #000000;
    }

    .ContentRightAlign p {
        margin-top: 10px;
    }

.BecomeTeacherBtn {
    text-align: center;
}

.BecomeTeacherRequestBtn {
    border: 1px solid #000000;
    border-radius: 0;
    background-color: #F7EDA5;
    color: #000000;
    font-size: 14px;
    padding: 10px 35px;
    margin-top: 35px;
    margin-bottom: 35px;
}

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

    .BecomeTeacherContent::after {
        left: 21px !important;
    }

    .ContentRightAlign {
        text-align: left;
    }

    .Contentleft {
        left: 0;
    }

    .timeline::after {
        left: 31px;
    }

    .BecomeTeacherContent {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

        .BecomeTeacherContent::before {
            left: 60px;
            border: medium solid #33B5A2;
            border-width: 10px 10px 10px 0;
            border-color: transparent #33B5A2 transparent transparent;
        }

    .Contentleft::after, .Contentright::after {
        left: 15px;
    }

    .Contentright {
        left: 0%;
    }

    .AlignLg {
        margin-right: 0;
    }
}

@media (min-width:601px) and (max-width:1024px) {
    .Contentleft {
        left: 239px;
    }
}


/* ################################  Become a Teacher End ########################### */

/* ################################ Join Us Arabic Teacher Start ########################### */

.ArabicTeacherContainer {
    background-color: #EAEAEA;
    padding-top: 0 !important;
    padding: 30px;
    float: left;
}

.ArabicTeacherBody {
    padding: 0;
    background-image: url(../../images/quraan-holding.jpg);
    border-radius: 5px;
    background-position: center;
    float: left;
}

.ArabicTeacherLeft {
    background-color: #FFFFFF;
    float: left;
    padding-bottom: 0 !important;
    padding: 50px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

    .ArabicTeacherLeft p, .ArabicTeacherLeft span {
        font-size: 20px;
    }

    .ArabicTeacherLeft span {
        margin-left: 15px;
    }

        .ArabicTeacherLeft p i, .ArabicTeacherLeft span i {
            color: #33b5a2;
        }

.ArabicTeacherDesc {
    padding-right: 17%;
}

.ArabicTeacherRight {
    float: left;
    text-align: right;
    padding-right: 0;
    position: relative;
    right: -0.9%;
}

    .ArabicTeacherRight img {
        width: 800px;
        height: 500px;
    }

.ArabicTeacherDetails {
    margin-bottom: 15px;
}

    .ArabicTeacherDetails h5 i {
        color: #33b5a2;
    }

    .ArabicTeacherDetails p {
        margin-bottom: 0;
        margin-left: 35px;
        margin-top: -6px;
        font-size: 16px;
    }

.EarnMoneySignUp {
    background-color: #FFFFFF;
    text-align: center;
    padding: 18px 45px;
    border: 1px solid #000000;
}

    .EarnMoneySignUp h3 {
        padding: 10px;
    }

.EarnMoneyInput {
    padding: 10px 0;
}

    .EarnMoneyInput .col-md-6 input {
        border-radius: 0;
        padding: 10px 5px;
    }

.SignUpEmailBtn {
    width: 100%;
    background-color: #33b5a2;
    border: none;
    border-radius: 0;
    padding: 10px 0px;
    margin-bottom: 10px;
}

.SignUpFbBtn {
    width: 100%;
    background-color: #FFFFFF;
    color: #2d5192;
    border-color: #2d5192;
    border-radius: 0;
    padding: 10px 0px;
    margin-top: 10px;
}

tooltip {
    background-color: #000000;
}

@media (min-width: 1600px) {
    .EarnMoney {
        position: absolute;
        top: 30px;
        left: -24%;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .EarnMoney {
        position: absolute;
        top: 0px;
        left: 0%;
        padding: 5px;
    }

    .EarnMoneySignUp {
        padding: 5px 20px;
    }
}

/* ################################  Join Us Arabic Teacher End ########################### */

/* ################################  Join Quran Start ########################### */

.JoinQuranContainer {
    background-color: #EAEAEA;
    padding-top: 0 !important;
    padding: 30px;
    float: left;
}

.JoinQuranBody {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 20px;
    float: left;
}

.JoinQuranHeaderContent {
    margin-top: 35px;
    margin-bottom: 35px;
}

    .JoinQuranHeaderContent span img {
        width: 30px;
        margin-top: 10px;
    }

.JoinQuranheading {
    margin: 10px 97px;
}

.JoinQuranBodyContainer {
    text-align: center;
}

.JoinQuranDesc {
    text-align: center;
    font-size: 18px;
}

.JoinQuranRequestBtn {
    border: 1px solid #000000;
    border-radius: 0;
    background-color: #F7EDA5;
    color: #000000;
    font-size: 14px;
    padding: 10px 35px;
    margin-top: 35px;
    margin-bottom: 35px;
}

/* ################################  Join Quran End ########################### */

/* ################################ Footer Start ########################### */

.FooterContainer {
    background-color: #eaeaea;
    padding: 0;
}

.FooterBody {
    background-color: #eaeaea;
    float: left;
    padding-bottom: 10px;
}

.FooterContent {
    float: left;
}

.FooterAbout {
    min-width: 200px;
    text-align: center;
}

    .FooterAbout img {
    }

.FooterContentLeft {
    float: left;
}

.footerLogo {
    float: left;
}

.footerDesc {
    float: left;
    padding: 0;
    text-align: justify;
    font-size: 12px;
}

.FooterContent {
    font-size: 13px;
    padding-bottom: 20px;
}

    .FooterContent .row > div {
        margin-bottom: 20px
    }

.FooterInfo .col-md-12 .col-md-6 {
    float: left;
    padding: 0;
}

    .FooterInfo .col-md-12 .col-md-6 a {
        width: 100%;
        float: left;
        color: #5a5a5a;
    }

        .FooterInfo .col-md-12 .col-md-6 a:hover {
            color: #33b5a2;
        }

.FooterLinks {
    float: left;
    padding: 0;
    margin-top: 10px;
}

.contactInfo {
    float: left;
}

.footer-head1 .list-style {
    position: static;
    padding-left: 20px;
}

.hidden {
    visibility: hidden;
}

.Block5RightGridDetail .container.block5ReadMore {
    margin-top: 10px !important;
}

    .Block5RightGridDetail .container.block5ReadMore a.ReadMore {
        margin-bottom: 0px !important;
    }

.FooterContact {
    padding: 0;
    margin-top: 10px;
}

    .FooterContact p {
        color: #5a5a5a;
        border-bottom: 0.75px solid #dbdbdb;
        padding-bottom: 0px;
        width: 100%;
        margin-bottom: 5px;
    }

.FooterNewsLetter {
    float: left;
}

.FooterBottom {
    text-align: center;
    float: left;
    padding-left: 6%;
}

    .FooterBottom p {
        margin-bottom: 0;
        font-size: 13px;
    }

.FooterContentRight a i {
    padding: 0 10px;
    font-size: 22px;
    color: #5a5a5a;
}

    .FooterContentRight a i:hover {
        color: #33b5a2;
    }

/* ################################  Footer End ########################### */

/* ################################  Submit a Request Popup Start ########################### */

.SubmitRequestBody {
}
    /*.SubmitRequest{background-color:rgba(0,0,0,0.50) !important;}*/
    .SubmitRequestBody b {
        text-align: center;
    }

.LessonToggle .active {
    background-color: green !important;
}

.SubmitRequestForm .form-group label i {
    color: red;
}

.SubmitRequestForm .row label {
    float: left;
}

.PopupSaveBtn {
    text-align: right;
}

.studentData {
    text-align: center;
    font-size: 14px;
    margin-top: 25px;
}

.RespondAlert {
    font-size: 14px;
}

.RequiredIcon {
    font-size: 12px;
}

/* Price Range Slider Start */

slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .slider:hover {
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
    }

/* Price Range Slider End */

.SubmitReqSubHeading {
    font-weight: bold;
}

#spResultBox {
    width: 100%;
}
/* ################################  Submit a Request Popup End ########################### */
@media (max-width: 576px) {
    .QuranNav {
        z-index: 9999;
    }

    .mainSlider .carousel-item img {
        height: auto;
    }

    .HeaderBanner {
        top: 30%;
    }

    .HeaderFormContainer {
        margin-top: 0px;
    }

    .Headerform {
        margin-top: 15px;
    }

    .HeaderDownloadLink {
        float: left;
        margin-top: 0px;
    }

        .HeaderDownloadLink a img {
            width: 140px;
        }

    .BannerTagLine {
    }

        .BannerTagLine h1 {
            font-size: 1rem;
        }


    .CertifiedTeachers, .VarietyTeachers, .AffordablePrices {
        padding: 20px;
    }

    .Learnheading {
        margin: 0;
    }

    .Searchheading {
        margin: 0;
    }

    .HeaderDownloadLink {
        text-align: center;
        right: 0 !important;
    }

    .EarnMoney {
        position: absolute;
        top: 10px;
        left: 0;
    }

    .HeaderDownloadLink {
        width: auto !important;
    }

        .HeaderDownloadLink img {
            height: 30px;
            width: 30px !important;
            object-fit: cover;
            object-position: left;
            border-radius: 5px;
        }

        .HeaderDownloadLink a:last-child img {
            width: 29px !important;
        }

    .HeaderBanner .inputHeaderBanner {
        margin-top: -5px !important;
        padding: 3px !important;
    }

    #rev_slider_1_1_wrapper #rev_slider_1_1 .uranus.tparrows, #rev_slider_1_1_wrapper .tp-rightarrow.tparrows.uranus {
        width: 22px !important;
        height: 22px !important;
        top: 70% !important;
        display: none;
    }

    #rev_slider_1_1_wrapper #rev_slider_1_1:hover .uranus.tparrows, #rev_slider_1_1_wrapper .tp-rightarrow.tparrows.uranus {
        display: block;
    }

    #rev_slider_1_1_wrapper #rev_slider_1_1 .tp-leftarrow {
        background-position: center left !important;
    }
    body .selector-btn {
    width:50px !important;
    }
    body .selector-box {
        height: 32px !important;
        width: calc(100% - 50px) !important;
        padding: 6px !important;
        font-size: 12px !important;
        font-weight: normal !important;
    }

    .selector-btn {
        height: 32px !important;
        width: 50px !important;
        padding: 5px 0px 9px 0px !important;
    }

    body .BannerTagLine {
        width: calc(100% - 30px);
        left: 15px;
        right: 15px;
        max-width: 100%;
        margin: 0;
        height: 60px !important;
        top: 90px;
    }

        body .BannerTagLine h1 {
            height: 60px !important;
            padding: 15px;
            font-size: 0.85rem !important;
        }

    .carousel-indicators {
        bottom: -10px !important;
    }

    .UniqueFeatureRight p a, a.ReadMore {
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) {

    .Headerform {
        width: 45% !important;
        margin: 0 2%;
    }

    .BannerTagLine {
        width: 50%;
        margin-left: 25%;
    }

    .InnerPageSearch {
        width: 50%;
    }

    .HeaderFormContainer {
        width: 50%;
    }

    .SearchBodyContainer {
        width: 40%;
    }

    .BecomeTeacherBodyContainer {
        width: 39%;
    }

    .JoinQuranBodyContainer {
        width: 40%;
    }

    .CustomDropMenu .col-md-2 .dropdown-item {
        border-right: 1px solid #e9e5ca;
        padding: 20px 0 15px;
    }

        .CustomDropMenu .col-md-2 .dropdown-item img {
            width: 30px;
            margin-bottom: 5px;
        }

    .CustomDropMenu .col-md-2 .lastMenu {
        border: none;
    }
}


@media (min-width:576px) and (max-width:600px) {

    .JoinQuranheading {
        margin: 10px 86px;
    }

        .JoinQuranheading h2 {
            font-size: 28px;
            text-align: center;
        }

    .BecomeTeacherheading {
        margin: 10px 54px;
    }

        .BecomeTeacherheading h2 {
            font-size: 28px;
            text-align: center;
        }



    .Searchheading {
        margin: 10px 110px;
    }

        .Searchheading h2 {
            font-size: 28px;
            text-align: center;
        }

    .Learnheading {
        margin: 10px 20px;
        width: 81%;
    }

        .Learnheading h2 {
            font-size: 28px;
            text-align: center;
        }

    .Menuheading {
        margin: 10px 205px;
    }

        .Menuheading h2 {
            font-size: 28px;
            text-align: center;
        }
}

@media (min-width:480px) and (max-width:575px) {

    .JoinQuranheading {
        margin: 10px 61px;
    }

        .JoinQuranheading h2 {
            font-size: 24px;
            text-align: center;
        }

    .BecomeTeacherheading {
        margin: 10px 33px;
    }

        .BecomeTeacherheading h2 {
            font-size: 24px;
            text-align: center;
        }


    .Searchheading {
        margin: 10px 82px;
    }

        .Searchheading h2 {
            font-size: 24px;
            text-align: center;
        }

    .Learnheading {
        margin: 10px 20px;
        width: 77%;
    }

        .Learnheading h2 {
            font-size: 24px;
            text-align: center;
        }

    .Menuheading {
        margin: 10px 162px;
    }

        .Menuheading h2 {
            font-size: 24px;
            text-align: center;
        }
}

@media (min-width:400px) and (max-width:479px) {

    .JoinQuranheading {
        margin: 10px 29px;
    }

        .JoinQuranheading h2 {
            font-size: 22px;
            text-align: center;
        }

    .BecomeTeacherheading {
        margin: 10px 12px;
    }

        .BecomeTeacherheading h2 {
            font-size: 22px;
            text-align: center;
        }



    .Searchheading {
        margin: 10px 51px;
    }

        .Searchheading h2 {
            font-size: 22px;
            text-align: center;
        }

    .Learnheading {
        margin: 10px 20px;
        width: 70%;
    }

        .Learnheading h2 {
            font-size: 22px;
            text-align: center;
        }

    .Menuheading {
        margin: 10px 124px;
    }

        .Menuheading h2 {
            font-size: 22px;
            text-align: center;
        }
}


@media (min-width:611px) and (max-width:768px) {

    .VideoContainer {
        padding: 12px;
    }

    .Videoheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Videoheading h2 {
            font-size: 22px;
        }

    .VideoBody {
        padding: 0;
    }

    .btnTeacherStudents .container-fluid .SoftwareSteps .Steptext h4 {
        font-size: 18px;
    }

    ul.youtubewall li .panel i, ul.youtubewall li .panel a {
        line-height: 9.8 !important;
    }

    .brick {
        max-width: 100% !important;
    }

    ul.youtubewall li .thumbwrap {
        margin: 0 !important;
    }

    .PricingContainer {
        padding: 12px;
    }

    .Pricingheading {
        margin: 0 15px;
        text-align: center;
        width: 100%;
    }

        .Pricingheading h2 {
            font-size: 22px;
        }


    .PricingBodyContainer .SoftwareSteps .Steptext h4 {
        font-size: 16px;
    }

    .ArabicContainer {
        padding: 12px;
    }

    .Arabicheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Arabicheading h2 {
            font-size: 22px;
        }

    .ArabicGridSection {
        padding: 0px;
    }

    .TajweedContainer {
        padding: 12px;
    }

    .Tajweedheading {
        text-align: center;
        width: 100%;
    }

        .Tajweedheading h2 {
            font-size: 22px;
        }

    

    .SoftwareContainer {
        padding: 12px;
    }

    .SoftwareBody {
        padding: 2px;
    }

    .BannerTagLine {
        width: 70%;
        margin-left: 15%;
    }

    .HeaderBanner {
        top: 31%;
    }

    .HeaderFormContainer {
        width: 70%;
    }

    .WWAContainer {
        padding: 20px;
    }

    .WWAheading {
        margin: 0;
        width: 611px;
        text-align: center;
    }

    .LearnGridSection2 {
        padding: 0;
    }

    .LearnContainer {
        padding: 20px;
    }

    .Learnheading {
        margin: 0;
        width: 611px;
        text-align: center;
    }

    .CertifiedContainer {
        padding: 20px;
    }

    .Certifiedheading {
        margin: 0;
        width: 611px;
        text-align: center;
    }

    .CertifiedTeachers, .VarietyTeachers, .AffordablePrices {
        padding: 15px;
    }

        .CertifiedTeachers h4, .VarietyTeachers h4, .AffordablePrices h4 {
            font-size: 16px;
        }


    .SearchContainer {
        padding: 20px;
    }

    .Searchheading {
        margin: 0;
        width: 611px;
        text-align: center;
    }

    .SearchBodyContainer {
        width: 65%;
    }

    .HowQuranLMSWorksContainer {
        padding: 20px;
    }

    .HowQuranLMSheading {
        margin: 0;
        width: 611px;
        text-align: center;
    }

    .HowQuranContainer {
        padding: 20px;
    }

    .HowQuranheading {
        margin: 0;
        width: 611px;
        text-align: center;
    }

    .BecomeTeacherContainer {
        padding: 12px;
    }

    .BecomeTeacherheading {
        margin: 0;
        width: 611px;
        text-align: center;
    }

    .BecomeTeacherBodyContainer {
        width: 65%;
    }

    .Contentleft {
        left: 97px;
    }

    .BecomeTeacherContent {
        width: 35%;
    }

    .JoinQuranContainer {
        padding: 20px;
    }

    .JoinQuranheading {
        margin: 0;
        width: 611px;
        text-align: center;
    }

    .JoinQuranBodyContainer {
        width: 75%;
    }

    .PricingContainer {
        padding: 12px;
    }

    .Pricingheading {
        margin: 0 15px;
        text-align: center;
        width: 100%;
    }

        .Pricingheading h2 {
            font-size: 22px;
        }

    .PricingBodyContainer .SoftwareSteps .Steptext h4 {
        font-size: 16px;
    }
}

@media (min-width:576px) and (max-width:610px) {

    .VideoContainer {
        padding: 12px;
    }

    .Videoheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Videoheading h2 {
            font-size: 22px;
        }

    .VideoBody {
        padding: 0;
    }

    .btnTeacherStudents .container-fluid .SoftwareSteps .Steptext h4 {
        font-size: 18px;
    }

    ul.youtubewall li .panel i, ul.youtubewall li .panel a {
        line-height: 6.8 !important;
    }

    .FAQContainer {
        padding: 12px;
    }

    .FAQheading {
        margin: 0 15px;
        text-align: center;
        width: 100%;
    }

        .FAQheading h2 {
            font-size: 22px;
        }

    .FAQGridSection {
        padding: 0;
    }

    .orangeheading {
        font-size: 16px;
    }

    .FAQBodyContainer {
        padding: 0 7px;
    }

        .FAQBodyContainer .accordion {
            font-size: 14px;
        }

        .FAQBodyContainer .panel .panel-body p, .FAQBodyContainer .panel .panel-body ul {
            font-size: 12px;
        }


    .ArabicContainer {
        padding: 12px;
    }

    .Arabicheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Arabicheading h2 {
            font-size: 22px;
        }

    .ArabicGridSection {
        padding: 0px;
    }


    .TajweedContainer {
        padding: 12px;
    }

    .Tajweedheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Tajweedheading h2 {
            font-size: 22px;
        }

    .TajweedDetails {
        padding: 0 50px !important;
    }

    .InnerHeaderDownloadLink a img {
        width: 140px;
    }

    .SoftwareContainer {
        padding: 12px;
    }

    .SoftwareBody {
        padding: 2px;
    }


    .BannerTagLine {
        max-width: 100%;
    }

    .HeaderBanner {
        top: 26%;
    }

    .WWAContainer {
        padding: 12px;
    }

    .WWAheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .WWAheading h2 {
            font-size: 22px;
        }

    .WWAHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .WWAGridSection {
        padding: 0;
    }

    .JoinQuranRequestBtn {
        margin: 1%;
        width: 35%;
    }

    .LearnContainer {
        padding: 12px;
    }

    .LearnHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Learnheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .Learnheading h2 {
            font-size: 22px;
        }

    .LearnGridSection2 {
        padding: 0;
    }

    .FeaturesLeft .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesRight .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesLeft .LearnGridIc img {
        width: 70%;
        margin-left: 15%;
    }

    .FeaturesRight .LearnGridIc img {
        width: 70%;
        margin-right: 15%;
    }

    .CertifiedContainer {
        padding: 12px;
    }

    .CertifiedHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Certifiedheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .Certifiedheading h3 {
            font-size: 22px;
        }

    .CertifiedTeachers, .VarietyTeachers, .AffordablePrices {
        padding: 0;
    }

        .CertifiedTeachers h4, .VarietyTeachers h4, .AffordablePrices h4 {
            font-size: 18px;
        }

    .SearchContainer {
        padding: 12px;
    }

    .SearchHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Searchheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .Searchheading h2 {
            font-size: 22px;
        }

    .RequestBtn {
        width: 50%;
    }

    .HowQuranLMSWorksContainer {
        padding: 12px;
    }

    .HowQuranLMSHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .HowQuranLMSheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .HowQuranLMSheading h2 {
            font-size: 22px;
        }

    .HowQuranLMSBodyContainer .col-md-4 h4 {
        font-size: 18px;
    }

    .HowQuranContainer {
        padding: 12px;
    }

    .HowQuranHeaderContent span img {
        width: 24px;
        margin-top: 0;
        margin-left: 0;
    }

    .HowQuranheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .HowQuranheading h2 {
            font-size: 22px;
        }

    .BecomeTeacherContainer {
        padding: 12px;
    }

    .BecomeTeacherHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .BecomeTeacherheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .BecomeTeacherheading h2 {
            font-size: 22px;
        }

    .BecomeTeacherBodyContainer {
        margin-top: 10px;
    }

    .BecomeTeacherDesc {
        font-size: 16px;
    }

    .BecomeTeacherTimeLine {
        padding: 0;
        margin-bottom: 0;
    }

    .BecomeTeacherRequestBtn {
        width: 50%;
    }

    .ArabicTeacherContainer {
        padding: 12px;
    }

    .ArabicTeacherLeft {
        padding: 25px;
        text-align: center;
        border-radius: 5px;
    }

        .ArabicTeacherLeft h2 {
            font-size: 22px;
        }

        .ArabicTeacherLeft p, .ArabicTeacherLeft span {
            font-size: 14px;
        }

    .ArabicTeacherDesc {
        padding: 0;
    }

    .ArabicTeacherDetails h5 {
        font-size: 18px;
    }

    .ArabicTeacherDetails p {
        margin-left: 0;
    }

    .ArabicTeacherLeft span {
        margin: 0;
    }

    .BecomeTeacherRequestBtn {
        margin: 1%;
    }

    .JoinQuranContainer {
        padding: 12px;
    }

    .JoinQuranHeaderContent {
        margin-bottom: 10px;
    }

        .JoinQuranHeaderContent span img {
            width: 24px;
            margin-top: 0;
        }

    .JoinQuranheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .JoinQuranheading h2 {
            font-size: 22px;
        }

    .JoinQuranDesc {
        font-size: 14px;
    }

    .PricingContainer {
        padding: 12px;
    }

    .Pricingheading {
        margin: 0 15px;
        text-align: center;
        width: 100%;
    }

        .Pricingheading h2 {
            font-size: 22px;
        }

    .PricingGridSection {
        padding: 0;
    }

    .PricingBodyContainer {
        padding: 0 10px;
    }

        .PricingBodyContainer .SoftwareSteps .Steptext h4 {
            font-size: 16px;
        }
}




@media (min-width:501px) and (max-width:575px) {

    .VideoContainer {
        padding: 12px;
    }

    .Videoheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Videoheading h2 {
            font-size: 22px;
        }

    .VideoBody {
        padding: 0;
    }

    .btnTeacherStudents .container-fluid .SoftwareSteps .Steptext h4 {
        font-size: 18px;
    }

    ul.youtubewall li .panel i, ul.youtubewall li .panel a {
        line-height: 5.8 !important;
    }

    .FAQContainer {
        padding: 12px;
    }

    .FAQheading {
        margin: 0 15px;
        text-align: center;
        width: 100%;
    }

        .FAQheading h2 {
            font-size: 22px;
        }

    .FAQGridSection {
        padding: 0;
    }

    .orangeheading {
        font-size: 16px;
    }

    .FAQBodyContainer {
        padding: 0 7px;
    }

        .FAQBodyContainer .accordion {
            font-size: 14px;
        }

        .FAQBodyContainer .panel .panel-body p, .FAQBodyContainer .panel .panel-body ul {
            font-size: 12px;
        }

    .ArabicContainer {
        padding: 12px;
    }

    .Arabicheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Arabicheading h2 {
            font-size: 22px;
        }

    .ArabicGridSection {
        padding: 0;
    }

    .TajweedContainer {
        padding: 12px;
    }

    .Tajweedheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Tajweedheading h2 {
            font-size: 22px;
        }

    .TajweedDetails {
        padding: 0 50px !important;
    }

    .InnerHeaderDownloadLink a img {
        width: 140px;
    }

    .SoftwareContainer {
        padding: 12px;
    }

    .SoftwareBody {
        padding: 2px;
    }

    .HeaderBanner {
        top: 26%;
    }

    .WWAContainer {
        padding: 12px;
    }

    .WWAheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .WWAheading h2 {
            font-size: 20px;
        }

    .WWAHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .WWAGridSection {
        padding: 0;
    }

    .JoinQuranRequestBtn {
        margin: 1%;
        width: 100%;
    }

    .LearnContainer {
        padding: 12px;
    }

    .LearnHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Learnheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .Learnheading h2 {
            font-size: 20px;
        }

    .LearnGridSection2 {
        padding: 0;
    }

    .FeaturesLeft .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesRight .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesLeft .LearnGridIc img {
        width: 70%;
        margin-left: 15%;
    }

    .FeaturesRight .LearnGridIc img {
        width: 70%;
        margin-right: 15%;
    }

    .CertifiedContainer {
        padding: 12px;
    }

    .CertifiedHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Certifiedheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .Certifiedheading h3 {
            font-size: 20px;
        }

    .CertifiedTeachers, .VarietyTeachers, .AffordablePrices {
        padding: 0;
    }

        .CertifiedTeachers h4, .VarietyTeachers h4, .AffordablePrices h4 {
            font-size: 18px;
        }

    .SearchContainer {
        padding: 12px;
    }

    .SearchHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Searchheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .Searchheading h2 {
            font-size: 20px;
        }

    .RequestBtn {
        width: 100%;
    }

    .HowQuranLMSWorksContainer {
        padding: 12px;
    }

    .HowQuranLMSHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .HowQuranLMSheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .HowQuranLMSheading h2 {
            font-size: 20px;
        }

    .HowQuranLMSBodyContainer .col-md-4 h4 {
        font-size: 18px;
    }

    .HowQuranContainer {
        padding: 12px;
    }

    .HowQuranHeaderContent span img {
        width: 24px;
        margin-top: 0;
        margin-left: 0;
    }

    .HowQuranheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .HowQuranheading h2 {
            font-size: 20px;
        }

    .BecomeTeacherContainer {
        padding: 12px;
    }

    .BecomeTeacherHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .BecomeTeacherheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .BecomeTeacherheading h2 {
            font-size: 20px;
        }

    .BecomeTeacherBodyContainer {
        margin-top: 10px;
    }

    .BecomeTeacherDesc {
        font-size: 16px;
    }

    .BecomeTeacherTimeLine {
        padding: 0;
        margin-bottom: 0;
    }

    .BecomeTeacherRequestBtn {
        width: 100%;
    }

    .ArabicTeacherContainer {
        padding: 12px;
    }

    .ArabicTeacherLeft {
        padding: 25px;
        text-align: center;
        border-radius: 5px;
    }

        .ArabicTeacherLeft h2 {
            font-size: 20px;
        }

        .ArabicTeacherLeft p, .ArabicTeacherLeft span {
            font-size: 14px;
        }

    .ArabicTeacherDesc {
        padding: 0;
    }

    .ArabicTeacherDetails h5 {
        font-size: 18px;
    }

    .ArabicTeacherDetails p {
        margin-left: 0;
    }

    .ArabicTeacherLeft span {
        margin: 0;
    }

    .BecomeTeacherRequestBtn {
        margin: 1%;
    }

    .JoinQuranContainer {
        padding: 12px;
    }

    .JoinQuranHeaderContent {
        margin-bottom: 10px;
    }

        .JoinQuranHeaderContent span img {
            width: 24px;
            margin-top: 0;
        }

    .JoinQuranheading {
        margin: 0;
        width: 500px;
        text-align: center;
    }

        .JoinQuranheading h2 {
            font-size: 20px;
        }

    .JoinQuranDesc {
        font-size: 14px;
    }

    .PricingContainer {
        padding: 12px;
    }

    .Pricingheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Pricingheading h2 {
            font-size: 22px;
        }

    .PricingGridSection {
        padding: 0;
    }

    .PricingBodyContainer {
        padding: 0 10px;
    }

        .PricingBodyContainer .SoftwareSteps .Steptext h4 {
            font-size: 16px;
        }
}


@media (min-width:421px) and (max-width:500px) {

    .VideoContainer {
        padding: 12px;
    }

    .Videoheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Videoheading h2 {
            font-size: 22px;
        }

    .VideoBody {
        padding: 0;
    }

    .btnTeacherStudents .container-fluid .SoftwareSteps .Steptext h4 {
        font-size: 16px;
    }

    .FAQContainer {
        padding: 12px;
    }

    .FAQheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .FAQheading h2 {
            font-size: 22px;
        }

    .FAQGridSection {
        padding: 0;
    }

    .orangeheading {
        font-size: 16px;
    }

    .FAQBodyContainer {
        padding: 0 7px;
    }

        .FAQBodyContainer .accordion {
            font-size: 14px;
        }

        .FAQBodyContainer .panel .panel-body p, .FAQBodyContainer .panel .panel-body ul {
            font-size: 12px;
        }

    ul.youtubewall li .panel i, ul.youtubewall li .panel a {
        line-height: 4.5 !important;
    }

    .ArabicContainer {
        padding: 12px;
    }

    .Arabicheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Arabicheading h2 {
            font-size: 22px;
        }

    .ArabicGridSection {
        padding: 0;
    }

    .TajweedContainer {
        padding: 12px;
    }

    .Tajweedheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Tajweedheading h2 {
            font-size: 22px;
        }


    .InnerHeaderDownloadLink a img {
        width: 140px;
    }

    .SoftwareContainer {
        padding: 12px;
    }

    .SoftwareBody {
        padding: 2px;
    }


    .HeaderBanner {
        top: 26%;
    }

    .WWAContainer {
        padding: 12px;
    }

    .WWAheading {
        margin: 0;
        width: 340px;
        text-align: center;
    }

        .WWAheading h2 {
            font-size: 16px;
        }

    .WWAHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .WWAGridSection {
        padding: 0;
    }

    .JoinQuranRequestBtn {
        margin: 1%;
        width: 100%;
    }

    .LearnContainer {
        padding: 12px;
    }

    .LearnHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Learnheading {
        margin: 0;
        width: 340px;
        text-align: center;
    }

        .Learnheading h2 {
            font-size: 16px;
        }

    .LearnGridSection2 {
        padding: 0;
    }

    .FeaturesLeft .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesRight .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesLeft .LearnGridIc img {
        width: 70%;
        margin-left: 15%;
    }

    .FeaturesRight .LearnGridIc img {
        width: 70%;
        margin-right: 15%;
    }

    .CertifiedContainer {
        padding: 12px;
    }

    .CertifiedHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Certifiedheading {
        margin: 0;
        width: 340px;
        text-align: center;
    }

        .Certifiedheading h3 {
            font-size: 16px;
        }

    .CertifiedTeachers, .VarietyTeachers, .AffordablePrices {
        padding: 0;
    }

        .CertifiedTeachers h4, .VarietyTeachers h4, .AffordablePrices h4 {
            font-size: 18px;
        }

    .SearchContainer {
        padding: 12px;
    }

    .SearchHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Searchheading {
        margin: 0;
        width: 340px;
        text-align: center;
    }

        .Searchheading h2 {
            font-size: 16px;
        }

    .RequestBtn {
        width: 100%;
    }

    .HowQuranLMSWorksContainer {
        padding: 12px;
    }

    .HowQuranLMSHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .HowQuranLMSheading {
        margin: 0;
        width: 340px;
        text-align: center;
    }

        .HowQuranLMSheading h2 {
            font-size: 16px;
        }

    .HowQuranLMSBodyContainer .col-md-4 h4 {
        font-size: 18px;
    }

    .HowQuranContainer {
        padding: 12px;
    }

    .HowQuranHeaderContent span img {
        width: 24px;
        margin-top: 0;
        margin-left: 0;
    }

    .HowQuranheading {
        margin: 0;
        width: 340px;
        text-align: center;
    }

        .HowQuranheading h2 {
            font-size: 16px;
        }

    .BecomeTeacherContainer {
        padding: 12px;
    }

    .BecomeTeacherHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .BecomeTeacherheading {
        margin: 0;
        width: 340px;
        text-align: center;
    }

        .BecomeTeacherheading h2 {
            font-size: 16px;
        }

    .BecomeTeacherBodyContainer {
        margin-top: 10px;
    }

    .BecomeTeacherDesc {
        font-size: 16px;
    }

    .BecomeTeacherTimeLine {
        padding: 0;
        margin-bottom: 0;
    }

    .BecomeTeacherRequestBtn {
        width: 100%;
    }

    .ArabicTeacherContainer {
        padding: 12px;
    }

    .ArabicTeacherLeft {
        padding: 25px;
        text-align: center;
        border-radius: 5px;
    }

        .ArabicTeacherLeft h2 {
            font-size: 20px;
        }

        .ArabicTeacherLeft p, .ArabicTeacherLeft span {
            font-size: 14px;
        }

    .ArabicTeacherDesc {
        padding: 0;
    }

    .ArabicTeacherDetails h5 {
        font-size: 18px;
    }

    .ArabicTeacherDetails p {
        margin-left: 0;
    }

    .ArabicTeacherLeft span {
        margin: 0;
    }

    .BecomeTeacherRequestBtn {
        margin: 1%;
    }

    .JoinQuranContainer {
        padding: 12px;
    }

    .JoinQuranHeaderContent {
        margin-bottom: 10px;
    }

        .JoinQuranHeaderContent span img {
            width: 24px;
            margin-top: 0;
        }

    .JoinQuranheading {
        margin: 0;
        width: 340px;
        text-align: center;
    }

        .JoinQuranheading h2 {
            font-size: 16px;
        }

    .JoinQuranDesc {
        font-size: 14px;
    }

    .InnerHeaderDownloadLink a img {
        width: 140px;
    }

    .PricingContainer {
        padding: 12px;
    }

    .Pricingheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Pricingheading h2 {
            font-size: 22px;
        }

    .PricingGridSection {
        padding: 0;
    }

    .PricingBodyContainer {
        padding: 0 10px;
    }

        .PricingBodyContainer .SoftwareSteps .Steptext h4 {
            font-size: 16px;
        }
}


@media (min-width:401px) and (max-width:420px) {

    .VideoContainer {
        padding: 12px;
    }

    .Videoheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Videoheading h2 {
            font-size: 16px;
        }

    .VideoBody {
        padding: 0;
    }

    .btnTeacherStudents .container-fluid .SoftwareSteps .Steptext h4 {
        font-size: 14px;
    }

    .FAQContainer {
        padding: 12px;
    }

    .FAQheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .FAQheading h2 {
            font-size: 16px;
        }

    .FAQGridSection {
        padding: 0;
    }

    .orangeheading {
        font-size: 18px;
    }

    .FAQBodyContainer {
        padding: 0 7px;
    }

        .FAQBodyContainer .accordion {
            font-size: 14px;
        }

        .FAQBodyContainer .panel .panel-body p, .FAQBodyContainer .panel .panel-body ul {
            font-size: 12px;
        }

    ul.youtubewall li .panel i, ul.youtubewall li .panel a {
        line-height: 4.1 !important;
    }


    .ArabicContainer {
        padding: 12px;
    }

    .Arabicheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Arabicheading h2 {
            font-size: 16px;
        }

    .ArabicGridSection {
        padding: 0;
    }

    .TajweedContainer {
        padding: 12px;
    }

    .Tajweedheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Tajweedheading h2 {
            font-size: 22px;
        }

    .TajweedDetails {
        padding: 0 8px !important;
    }



    .InnerHeaderDownloadLink a img {
        width: 140px;
    }

    .SoftwareContainer {
        padding: 12px;
    }

    .SoftwareBody {
        padding: 2px;
    }


    .HeaderBanner {
        top: 26%;
    }

    .WWAContainer {
        padding: 12px;
    }

    .WWAheading {
        margin: 0;
        width: 339px;
        text-align: center;
    }

        .WWAheading h2 {
            font-size: 16px;
        }


    .WWAGridSection {
        padding: 0;
    }

    .SoftwareSteps span.Stepicon {
        width: 4%;
    }

    .JoinQuranRequestBtn {
        margin: 1%;
        width: 100%;
    }

    .LearnContainer {
        padding: 12px;
    }

    .LearnHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Learnheading {
        margin: 0;
        width: 339px;
        text-align: center;
    }

        .Learnheading h2 {
            font-size: 16px;
        }

    .LearnGridSection2 {
        padding: 0;
    }

    .FeaturesLeft .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesRight .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesLeft .LearnGridIc img {
        width: 70%;
        margin-left: 15%;
    }

    .FeaturesRight .LearnGridIc img {
        width: 70%;
        margin-right: 15%;
    }

    .CertifiedContainer {
        padding: 12px;
    }

    .CertifiedHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Certifiedheading {
        margin: 0;
        width: 339px;
        text-align: center;
    }

        .Certifiedheading h3 {
            font-size: 16px;
        }

    .CertifiedTeachers, .VarietyTeachers, .AffordablePrices {
        padding: 0;
    }

        .CertifiedTeachers h4, .VarietyTeachers h4, .AffordablePrices h4 {
            font-size: 18px;
        }

    .SearchContainer {
        padding: 12px;
    }

    .SearchHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Searchheading {
        margin: 0;
        width: 339px;
        text-align: center;
    }

        .Searchheading h2 {
            font-size: 16px;
        }

    .RequestBtn {
        width: 100%;
    }

    .HowQuranLMSWorksContainer {
        padding: 12px;
    }

    .HowQuranLMSHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .HowQuranLMSheading {
        margin: 0;
        width: 340px;
        text-align: center;
    }

        .HowQuranLMSheading h2 {
            font-size: 16px;
        }

    .HowQuranLMSBodyContainer .col-md-4 h4 {
        font-size: 18px;
    }

    .HowQuranContainer {
        padding: 12px;
    }

    .HowQuranHeaderContent span img {
        width: 24px;
        margin-top: 0;
        margin-left: 0;
    }

    .HowQuranheading {
        margin: 0;
        width: 339px;
        text-align: center;
    }

        .HowQuranheading h2 {
            font-size: 16px;
        }

    .BecomeTeacherContainer {
        padding: 12px;
    }

    .BecomeTeacherHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .BecomeTeacherheading {
        margin: 0;
        width: 339px;
        text-align: center;
    }

        .BecomeTeacherheading h2 {
            font-size: 16px;
        }

    .BecomeTeacherBodyContainer {
        margin-top: 10px;
    }

    .BecomeTeacherDesc {
        font-size: 16px;
    }

    .BecomeTeacherTimeLine {
        padding: 0;
        margin-bottom: 0;
    }

    .BecomeTeacherRequestBtn {
        width: 100%;
    }

    .ArabicTeacherContainer {
        padding: 12px;
    }

    .ArabicTeacherLeft {
        padding: 25px;
        text-align: center;
        border-radius: 5px;
    }

        .ArabicTeacherLeft h2 {
            font-size: 20px;
        }

        .ArabicTeacherLeft p, .ArabicTeacherLeft span {
            font-size: 14px;
        }

    .ArabicTeacherDesc {
        padding: 0;
    }

    .ArabicTeacherDetails h5 {
        font-size: 18px;
    }

    .ArabicTeacherDetails p {
        margin-left: 0;
    }

    .ArabicTeacherLeft span {
        margin: 0;
    }

    .BecomeTeacherRequestBtn {
        margin: 1%;
    }

    .JoinQuranContainer {
        padding: 12px;
    }

    .JoinQuranHeaderContent {
        margin-bottom: 10px;
    }

        .JoinQuranHeaderContent span img {
            width: 24px;
            margin-top: 0;
        }

    .JoinQuranheading {
        margin: 0;
        width: 339px;
        text-align: center;
    }

        .JoinQuranheading h2 {
            font-size: 16px;
        }

    .JoinQuranDesc {
        font-size: 14px;
    }

    .InnerHeaderDownloadLink a img {
        width: 140px;
    }

    .LangChanger {
        padding: 0;
    }

    .PricingContainer {
        padding: 12px;
    }

    .Pricingheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Pricingheading h2 {
            font-size: 18px;
        }

    .PricingGridSection {
        padding: 0;
    }

    .PricingBodyContainer {
        padding: 5px;
    }

        .PricingBodyContainer .SoftwareSteps .Steptext h4 {
            font-size: 16px;
        }
}


@media (min-width:360px) and (max-width:400px) {

    .VideoContainer {
        padding: 12px;
    }

    .Videoheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Videoheading h2 {
            font-size: 16px;
        }

    .VideoBody {
        padding: 0;
    }

    .btnTeacherStudents .container-fluid .SoftwareSteps .Steptext h4 {
        font-size: 14px;
    }

    .FAQContainer {
        padding: 12px;
    }

    .FAQheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .FAQheading h2 {
            font-size: 16px;
        }

    .FAQGridSection {
        padding: 0;
    }

    .orangeheading {
        font-size: 16px;
    }

    .FAQBodyContainer {
        padding: 0 7px;
    }

        .FAQBodyContainer .accordion {
            font-size: 14px;
        }

        .FAQBodyContainer .panel .panel-body p, .FAQBodyContainer .panel .panel-body ul {
            font-size: 12px;
        }

    ul.youtubewall li .panel i, ul.youtubewall li .panel a {
        line-height: 3.7 !important;
    }

    .ArabicContainer {
        padding: 12px;
    }

    .Arabicheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Arabicheading h2 {
            font-size: 16px;
        }

    .ArabicGridSection {
        padding: 0;
    }

    .TajweedContainer {
        padding: 12px;
    }

    .Tajweedheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Tajweedheading h2 {
            font-size: 16px;
        }

    .TajweedDetails {
        padding: 0 5px !important;
    }

    .InnerHeaderDownloadLink a img {
        width: 140px;
    }

    .SoftwareContainer {
        padding: 12px;
    }

    .SoftwareBody {
        padding: 2px;
    }

    .SoftwareGridSection, .PricingBodyContainer {
        padding: 0 0 25px;
    }

        .SoftwareGridSection.MobileImg {
            padding: 0 25px 25px;
        }

    .HeaderBanner {
        top: 30%;
    }

    .WWAContainer {
        padding: 12px;
    }

    .WWAheading {
        margin: 0;
        width: 288px;
        text-align: center;
    }

        .WWAheading h2 {
            font-size: 16px;
        }

    .WWAHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .WWAGridSection {
        padding: 0;
    }

    .SoftwareSteps span.Stepicon {
        width: 4%;
    }

    .JoinQuranRequestBtn {
        margin: 1%;
        width: 100%;
    }

    .LearnContainer {
        padding: 12px;
    }

    .LearnHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Learnheading {
        margin: 0;
        width: 288px;
        text-align: center;
    }

        .Learnheading h2 {
            font-size: 16px;
        }

    .LearnGridSection2 {
        padding: 0;
    }

    .FeaturesLeft .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesRight .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesLeft .LearnGridIc img {
        width: 70%;
        margin-left: 15%;
    }

    .FeaturesRight .LearnGridIc img {
        width: 70%;
        margin-right: 15%;
    }

    .CertifiedContainer {
        padding: 12px;
    }

    .CertifiedHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Certifiedheading {
        margin: 0;
        width: 288px;
        text-align: center;
    }

        .Certifiedheading h3 {
            font-size: 16px;
        }

    .CertifiedTeachers, .VarietyTeachers, .AffordablePrices {
        padding: 0;
    }

        .CertifiedTeachers h4, .VarietyTeachers h4, .AffordablePrices h4 {
            font-size: 18px;
        }

    .SearchContainer {
        padding: 12px;
    }

    .SearchHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Searchheading {
        margin: 0;
        width: 288px;
        text-align: center;
    }

        .Searchheading h2 {
            font-size: 16px;
        }

    .RequestBtn {
        width: 100%;
    }

    .HowQuranLMSWorksContainer {
        padding: 12px;
    }

    .HowQuranLMSHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .HowQuranLMSheading {
        margin: 0;
        width: 288px;
        text-align: center;
    }

        .HowQuranLMSheading h2 {
            font-size: 16px;
        }

    .HowQuranLMSBodyContainer .col-md-4 h4 {
        font-size: 18px;
    }

    .HowQuranContainer {
        padding: 12px;
    }

    .HowQuranHeaderContent span img {
        width: 24px;
        margin-top: 0;
        margin-left: 0;
    }

    .HowQuranheading {
        margin: 0;
        width: 288px;
        text-align: center;
    }

        .HowQuranheading h2 {
            font-size: 16px;
        }

    .BecomeTeacherContainer {
        padding: 12px;
    }

    .BecomeTeacherHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .BecomeTeacherheading {
        margin: 0;
        width: 288px;
        text-align: center;
    }

        .BecomeTeacherheading h2 {
            font-size: 16px;
        }

    .BecomeTeacherBodyContainer {
        margin-top: 10px;
    }

    .BecomeTeacherDesc {
        font-size: 16px;
    }

    .BecomeTeacherTimeLine {
        padding: 0;
        margin-bottom: 0;
    }

    .BecomeTeacherRequestBtn {
        width: 100%;
    }

    .ArabicTeacherContainer {
        padding: 12px;
    }

    .ArabicTeacherLeft {
        padding: 25px;
        text-align: center;
        border-radius: 5px;
    }

        .ArabicTeacherLeft h2 {
            font-size: 20px;
        }

        .ArabicTeacherLeft p, .ArabicTeacherLeft span {
            font-size: 14px;
        }

    .ArabicTeacherDesc {
        padding: 0;
    }

    .ArabicTeacherDetails h5 {
        font-size: 18px;
    }

    .ArabicTeacherDetails p {
        margin-left: 0;
    }

    .ArabicTeacherLeft span {
        margin: 0;
    }

    .BecomeTeacherRequestBtn {
        margin: 1%;
    }

    .JoinQuranContainer {
        padding: 12px;
    }

    .JoinQuranHeaderContent {
        margin-bottom: 10px;
    }

        .JoinQuranHeaderContent span img {
            width: 24px;
            margin-top: 0;
        }

    .JoinQuranheading {
        margin: 0;
        width: 288px;
        text-align: center;
    }

        .JoinQuranheading h2 {
            font-size: 16px;
        }

    .JoinQuranDesc {
        font-size: 14px;
    }

    .InnerHeaderDownloadLink a img {
        width: 140px;
    }

    .LangChanger {
        padding: 0;
    }

    .separatorNav {
        margin: 0 2px;
    }

    .HeaderDownloadLink {
    }

    .BannerTagLine {
    }

    .PricingContainer {
        padding: 12px;
    }

    .Pricingheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Pricingheading h2 {
            font-size: 18px;
        }

    .PricingGridSection {
        padding: 0;
    }

    .PricingBodyContainer .SoftwareSteps .Steptext h4 {
        font-size: 16px;
    }
}

@media (max-width:359px) {

    .VideoContainer {
        padding: 12px;
    }

    .Videoheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Videoheading h2 {
            font-size: 16px;
        }

    .VideoBody {
        padding: 0;
    }

    .btnTeacherStudents .container-fluid .SoftwareSteps .Steptext h4 {
        font-size: 14px;
    }

    .FAQContainer {
        padding: 12px;
    }

    .FAQheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .FAQheading h2 {
            font-size: 16px;
        }

    .FAQGridSection {
        padding: 0;
    }

    .orangeheading {
        font-size: 16px;
    }

    .FAQBodyContainer {
        padding: 0 7px;
    }

        .FAQBodyContainer .accordion {
            font-size: 14px;
        }

        .FAQBodyContainer .panel .panel-body p, .FAQBodyContainer .panel .panel-body ul {
            font-size: 12px;
        }

    ul.youtubewall li .panel i, ul.youtubewall li .panel a {
        line-height: 3.5 !important;
    }

    .ArabicContainer {
        padding: 12px;
    }

    .Arabicheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Arabicheading h2 {
            font-size: 16px;
        }

    .ArabicGridSection {
        padding: 0;
    }


    .TajweedContainer {
        padding: 12px;
    }

    .Tajweedheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Tajweedheading h2 {
            font-size: 16px;
        }

    .TajweedDetails {
        padding: 0 5px !important;
    }

    .InnerHeaderDownloadLink a img {
        width: 140px;
    }

    .SoftwareContainer {
        padding: 12px;
    }

    .SoftwareBody {
        padding: 2px;
    }

    .SoftwareGridSection, .PricingBodyContainer {
        padding: 0 0 25px;
    }

        .SoftwareGridSection.MobileImg {
            padding: 0 25px 25px;
        }

    .HeaderBanner {
        top: 41%;
    }

    .WWAContainer {
        padding: 12px;
    }

    .WWAheading {
        margin: 0;
        width: 248px;
        text-align: center;
    }

        .WWAheading h2 {
            font-size: 16px;
        }

    .WWAHeaderContent span img {
        margin-top: 0;
    }

    .WWAGridSection {
        padding: 0;
    }

    .SoftwareSteps span.Stepicon {
        width: 4%;
    }

    .JoinQuranRequestBtn {
        margin: 1%;
        width: 100%;
    }

    .LearnContainer {
        padding: 12px;
    }

    .LearnHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Learnheading {
        margin: 0;
        width: 248px;
        text-align: center;
    }

        .Learnheading h2 {
            font-size: 16px;
        }

    .LearnGridSection2 {
        padding: 0;
    }

    .FeaturesLeft .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesRight .LearnGridDesc {
        padding: 0 4px;
    }

    .FeaturesLeft .LearnGridIc img {
        width: 70%;
        margin-left: 15%;
    }

    .FeaturesRight .LearnGridIc img {
        width: 70%;
        margin-right: 15%;
    }

    .CertifiedContainer {
        padding: 12px;
    }

    .CertifiedHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Certifiedheading {
        margin: 0;
        width: 248px;
        text-align: center;
    }

        .Certifiedheading h3 {
            font-size: 16px;
        }

    .CertifiedTeachers, .VarietyTeachers, .AffordablePrices {
        padding: 0;
    }

        .CertifiedTeachers h4, .VarietyTeachers h4, .AffordablePrices h4 {
            font-size: 18px;
        }

    .SearchContainer {
        padding: 12px;
    }

    .SearchHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .Searchheading {
        margin: 0;
        width: 248px;
        text-align: center;
    }

        .Searchheading h2 {
            font-size: 16px;
        }

    .RequestBtn {
        width: 100%;
    }

    .HowQuranLMSWorksContainer {
        padding: 12px;
    }

    .HowQuranLMSHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .HowQuranLMSheading {
        margin: 0;
        width: 248px;
        text-align: center;
    }

        .HowQuranLMSheading h2 {
            font-size: 16px;
        }

    .HowQuranLMSBodyContainer .col-md-4 h4 {
        font-size: 18px;
    }

    .HowQuranContainer {
        padding: 12px;
    }

    .HowQuranHeaderContent span img {
        width: 24px;
        margin-top: 0;
        margin-left: 0;
    }

    .HowQuranheading {
        margin: 0;
        width: 248px;
        text-align: center;
    }

        .HowQuranheading h2 {
            font-size: 16px;
        }

    .BecomeTeacherContainer {
        padding: 12px;
    }

    .BecomeTeacherHeaderContent span img {
        width: 24px;
        margin-top: 0;
    }

    .BecomeTeacherheading {
        margin: 0;
        width: 248px;
        text-align: center;
    }

        .BecomeTeacherheading h2 {
            font-size: 16px;
        }

    .BecomeTeacherBodyContainer {
        margin-top: 10px;
    }

    .BecomeTeacherDesc {
        font-size: 16px;
    }

    .BecomeTeacherTimeLine {
        padding: 0;
        margin-bottom: 0;
    }

    .BecomeTeacherRequestBtn {
        width: 100%;
    }

    .ArabicTeacherContainer {
        padding: 12px;
    }

    .ArabicTeacherLeft {
        padding: 25px;
        text-align: center;
        border-radius: 5px;
    }

        .ArabicTeacherLeft h2 {
            font-size: 20px;
        }

        .ArabicTeacherLeft p, .ArabicTeacherLeft span {
            font-size: 14px;
        }

    .ArabicTeacherDesc {
        padding: 0;
    }

    .ArabicTeacherDetails h5 {
        font-size: 18px;
    }

    .ArabicTeacherDetails p {
        margin-left: 0;
    }

    .ArabicTeacherLeft span {
        margin: 0;
    }

    .BecomeTeacherRequestBtn {
        margin: 1%;
    }

    .JoinQuranContainer {
        padding: 12px;
    }

    .JoinQuranHeaderContent {
        margin-bottom: 10px;
    }

        .JoinQuranHeaderContent span img {
            width: 24px;
            margin-top: 0;
        }

    .JoinQuranheading {
        margin: 0;
        width: 248px;
        text-align: center;
    }

        .JoinQuranheading h2 {
            font-size: 16px;
        }

    .JoinQuranDesc {
        font-size: 14px;
    }


    .InnerHeaderDownloadLink a img {
        width: 140px;
    }

    .LangChanger {
        padding: 0;
    }

    .separatorNav {
        margin: 0 10px;
    }

    .inputHeaderBanner a {
        top: 20px;
        font-size: 20px;
    }

    .HowLearnInput {
        font-size: 14px;
    }

    .PricingContainer {
        padding: 12px;
    }

    .Pricingheading {
        margin: 0 12px;
        text-align: center;
        width: 100%;
    }

        .Pricingheading h2 {
            font-size: 16px;
        }

    .PricingGridSection {
        padding: 0;
    }

    .PricingBodyContainer .SoftwareSteps .Steptext h4 {
        font-size: 16px;
    }
}

@media (width:414px) {
    .HeaderBanner {
        top: 30%;
    }
}

@media (width:360px) and (height:640px) {
    .HeaderBanner {
        top: 34%;
    }
}

@media (width:414px) and (height:736px) {
    .HeaderBanner {
        top: 32%;
    }
}

@media (width:375px) and (height:667px) {
    .HeaderBanner {
        top: 33%;
    }
}

@media (min-width:660px) and (max-height:810px) {
    .HeaderBanner {
    }
}


.headingareatop {
    width: 100%;
    float: left;
    padding: 0px;
    text-align: center;
    font-weight: 300 !important;
    color: #2c3e50;
    font-size: 36px;
}

/* Sign Up Calling start*/
#signUpPopup {
    margin-top: 47.2px;
    z-index: 9999;
}

    #signUpPopup .modal-dialog .modal-content {
        border-radius: 0;
        background-color: #f5f0d8;
    }

        #signUpPopup .modal-dialog .modal-content .modal-header {
            border: none;
            color: #000;
        }

            #signUpPopup .modal-dialog .modal-content .modal-header h5 {
                width: 100%;
                text-align: center;
                padding: 10px 0px 0px 0px;
                margin-right: -65px;
                font-size: 22px;
            }

            #signUpPopup .modal-dialog .modal-content .modal-header button {
                color: #000;
                padding-top: 25px;
            }

        #signUpPopup .modal-dialog .modal-content .modal-body .col-md-6 {
            text-align: center;
            float: right;
        }

            #signUpPopup .modal-dialog .modal-content .modal-body .col-md-6:hover p {
                color: #385723;
            }

a .teacher-bg {
    background-image: url(../../images/teacherPhotoSignUp.png);
    background-repeat: no-repeat;
    width: 205px;
    height: 202px;
    background-position: center center;
}
/*#signUpPopup .modal-dialog .modal-content .modal-body .col-md-6 a .teacher-bg:hover{background-image: url(../../images/hoverTeacher.png); background-repeat:no-repeat;}*/
a .student-bg {
    background-image: url(../../images/studentPhotoSignUp.png);
    background-repeat: no-repeat;
    width: 205px;
    height: 202px;
    background-position: center center;
}
/*#signUpPopup .modal-dialog .modal-content .modal-body .col-md-6 a .student-bg:hover{background-image: url(../../images/hoverStudent.png); background-repeat:no-repeat;}*/
#signUpPopup .modal-dialog .modal-content .modal-body .col-md-6 a p {
    color: #002060;
    font-size: 22px;
    padding: 10px;
    font-weight: 500;
    text-align: center;
}

    #signUpPopup .modal-dialog .modal-content .modal-body .col-md-6 a p:hover {
        color: #866f00;
    }


/* Signin Calling start*/
#signInPopup {
    margin-top: 48px;
}

    #signInPopup .modal-dialog .modal-content {
        border-radius: 0;
        background-color: #e1b12c;
    }

        #signInPopup .modal-dialog .modal-content .modal-header {
            border: none;
            color: white;
            padding-bottom: 0;
        }

            #signInPopup .modal-dialog .modal-content .modal-header h5 {
                width: 100%;
                text-align: center;
                padding: 10px 0px 0px 35px;
                font-size: 22px;
            }

            #signInPopup .modal-dialog .modal-content .modal-header button {
                color: white;
                padding-top: 15px;
            }

        #signInPopup .modal-dialog .modal-content .modal-body .col-md-12 {
            float: left;
        }

            #signInPopup .modal-dialog .modal-content .modal-body .col-md-12 .col-md-2 {
                float: left;
            }

                #signInPopup .modal-dialog .modal-content .modal-body .col-md-12 .col-md-2 img {
                    width: 112%;
                    margin-top: 4%;
                }

            #signInPopup .modal-dialog .modal-content .modal-body .col-md-12 .LoginTxtField {
                max-width: 80%;
            }

        #signInPopup .modal-dialog .modal-content .modal-body .LoginTxtField {
            background-color: #FFFFFF;
            padding-bottom: 5px;
            border-radius: 2px;
        }

        #signInPopup .modal-dialog .modal-content .modal-body .col-md-12 .LoginTxtField span {
            font-size: 14px;
            font-weight: 500;
        }

        #signInPopup .modal-dialog .modal-content .modal-body .LoginTxtField input {
            border: none;
            padding: 0;
        }

        #signInPopup .modal-dialog .modal-content .modal-body .LoginPassword {
            margin-top: 18px;
        }

        #signInPopup .modal-dialog .modal-content .modal-body .ForgotPassword {
            float: left;
            margin-top: 5px;
        }

.or {
    position: absolute;
    font-size: 18px;
    background: #e1b12c;
    top: calc(50% - 50px);
    left: calc(50% - 13px);
    display: block;
    z-index: 100;
    padding: 5px 0;
}

img {
    max-width: 100%;
}

#signInPopup .modal-dialog .modal-content .modal-body .ForgotPassword a {
    color: #75210d;
    font-weight: 500;
    font-size: 15px;
    text-decoration: underline;
    margin-left: 64px;
}

#signInPopup .modal-dialog .modal-content .modal-body .ForgotPassword strong a {
    margin: 0;
}

#signInPopup .modal-dialog .modal-content .modal-body .ForgotPassword button {
    border-radius: 0;
    border: 1px solid #000000;
    background-color: #f8edaa;
    color: #635425;
    font-weight: 500;
    font-size: 14px;
    margin-top: 2%;
    padding: 8px 40px;
}

#signInPopup .modal-dialog .modal-content .modal-body .col-md-12 .LoginTxtField input:focus {
    border-color: none !important;
    box-shadow: none !important;
}

#videoDetail .videoLinkContainer {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

    #videoDetail .videoLinkContainer::before {
        padding-top: 56.25%;
        display: block;
        content: "";
    }

    #videoDetail .videoLinkContainer img {
        position: absolute;
        top: 0;
    }

    #videoDetail .videoLinkContainer iframe {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

#videoDetail .VideoLink {
    height: auto !important;
}

@media (max-width:768px) {
    #signInPopup .modal-dialog .modal-content .modal-body .col-md-12 .col-md-2 {
        max-width: 20%;
    }

    #signInPopup .modal-dialog .modal-content .modal-body .col-md-12 {
        padding-left: 0;
    }
}

/* Signin Calling end*/

/* Change Password Calling start*/

#resetPwPopup {
    margin-top: 2%;
}

    #resetPwPopup .modal-dialog .modal-content {
        border-radius: 0;
        background-color: #e1b12c;
    }

        #resetPwPopup .modal-dialog .modal-content .modal-header {
            border: none;
            color: white;
            padding-bottom: 0;
        }

            #resetPwPopup .modal-dialog .modal-content .modal-header h5 {
                width: 100%;
                text-align: center;
                padding: 10px 0px 0px 35px;
                font-size: 22px;
            }

            #resetPwPopup .modal-dialog .modal-content .modal-header button {
                color: white;
                padding-top: 15px;
            }

        #resetPwPopup .modal-dialog .modal-content .modal-body .col-md-12 {
            float: left;
        }

            #resetPwPopup .modal-dialog .modal-content .modal-body .col-md-12 .col-md-2 {
                float: left;
            }

                #resetPwPopup .modal-dialog .modal-content .modal-body .col-md-12 .col-md-2 img {
                    width: 112%;
                    margin-top: 4%;
                }

            #resetPwPopup .modal-dialog .modal-content .modal-body .col-md-12 .LoginTxtField {
                max-width: 80%;
            }

            #resetPwPopup .modal-dialog .modal-content .modal-body .col-md-12 .col-md-10 {
                float: left;
                background-color: #FFFFFF;
                padding-bottom: 5px;
                border-radius: 2px;
            }

            #resetPwPopup .modal-dialog .modal-content .modal-body .col-md-12 .LoginTxtField span {
                font-size: 14px;
                font-weight: 500;
            }

            #resetPwPopup .modal-dialog .modal-content .modal-body .col-md-12 .LoginTxtField input {
                border: none;
                padding: 0;
            }

        #resetPwPopup .modal-dialog .modal-content .modal-body .LoginPassword {
            margin-top: 18px;
            float: left;
        }

        #resetPwPopup .modal-dialog .modal-content .modal-body .ForgotPassword {
            float: left;
            margin-top: 5px;
        }

            #resetPwPopup .modal-dialog .modal-content .modal-body .ForgotPassword a {
                color: #75210d;
                font-weight: 500;
                font-size: 15px;
                text-decoration: underline;
                margin-left: 17%;
            }

            #resetPwPopup .modal-dialog .modal-content .modal-body .ForgotPassword button {
                border-radius: 0;
                border: 1px solid #000000;
                background-color: #f8edaa;
                color: #635425;
                font-weight: 500;
                font-size: 14px;
                float: right;
                margin-right: 4%;
                margin-top: 2%;
                padding: 8px 40px;
            }

        #resetPwPopup .modal-dialog .modal-content .modal-body .col-md-12 .LoginTxtField input:focus {
            border-color: none !important;
            box-shadow: none !important;
        }

#content.innerpage.FeeCalcu {
    width: 100%;
    padding: 0 30px;
    margin-top: 30px;
}

::selection {
    color: #FFF;
    background: #9AEAD8;
}

.ClsStatus.float-right {
    width: 100%;
    max-width: 600px;
    float: right !important;
}

.ClsStatus .chosen-container {
    width: calc(100% - 63px) !important;
    display: inline-block;
}

#btnSearch {
    width: 60px;
    display: inline-block !important;
}

.quran-logo {
    position: absolute;
    left: calc(50% - 75px);
    top: 3px;
    z-index: 1000;
    margin: 0;
}

@media (min-width:992px) {

    .video-main-wrapper .col-lg-8 {
        width: 75%;
        max-width: 75%;
        flex: 0 0 75%;
        float: right !important;
    }
}

@media screen and (max-width:1250px) {
    .videoObjectives {
        height: auto !important;
        border: none;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding: 0 15px;
    }

    .VideoLink {
        width: 66.667%;
        max-width: 66.667%;
        flex: 0 0 66.667%;
    }

    .RegisterForCourses_wrapper_BottomArea .col-lg-2.col-md-2.col-sm-2.col-xs-2 {
        width: 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .mainContainerSearchCourse {
        width: 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    table.table-courses-offered thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    table.table-courses-offered td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .8em;
        text-align: left;
    }

        table.table-courses-offered td::before {
            content: attr(data-label);
            float: left;
            font-weight: bold;
            text-transform: uppercase;
            left: 0px;
            width: 100%;
            text-align: left;
            padding-right: 0px;
            font-weight: bold;
            white-space: nowrap;
            font-size: .8em;
            text-transform: uppercase;
            padding: 8px 5px;
            background-color: #8fe9d8;
        }

    .table-courses-offered-container {
        max-height: unset !important;
    }
}

@media screen and (max-width:991px) {
    html {
        overflow-x: hidden;
    }

    body {
        width: 100%;
        overflow-x: hidden;
    }

    .login-btns {
        order: unset;
    }

    .col-md-7.inner-links {
        width: calc(100% - 190px) !important;
        max-width: 100%;
        float: left;
        padding: 0;
    }

    .LangChanger {
        width: 100%;
        float: right;
        margin: 0;
        padding: 10px 0;
    }

    .BannerTagLine h1 br {
        display: none;
    }

    .selector-box {
        overflow: hidden;
        white-space: nowrap;
    }

    .HeaderFormContainer {
        width: 100% !important;
    }

    .BannerTagLine {
        width: calc(100% - 100px);
        left: 50px;
        right: 50px;
        max-width: 100%;
        margin: 0;
    }

    #navbarSupportedContent {
        position: relative;
    }

    .LangChanger .socialLinks {
        float: left;
    }

        .LangChanger .socialLinks + div {
            float: right;
        }

    .col-md-7.LangChanger {
        margin: 0;
        text-align: center;
    }

    .navbar-nav.mr-auto.LeftMainMenu {
        flex-direction: unset;
        flex-wrap: wrap;
    }

        .navbar-nav.mr-auto.LeftMainMenu li:first-child {
            width: 30px;
        }

        .navbar-nav.mr-auto.LeftMainMenu li:nth-child(2) {
            width: 30px;
            text-align: center;
            padding-bottom: 0;
            margin-right: 15px;
        }

        .navbar-nav.mr-auto.LeftMainMenu li:nth-child(3), .navbar-nav.mr-auto.LeftMainMenu li:nth-child(4) {
            padding: 0;
            width: 100%;
        }

    .dropdown-menu.CustomDropDown {
        background: #FFF;
        float: left;
        padding-bottom: 10px;
        width: calc(100vw - 130px);
    }

    .CustomDropMenu .col-md-2 {
        width: 16.667%;
        max-width: 100%;
    }

        .CustomDropMenu .col-md-2 img {
            height: 28px;
        }

    .navbar.navbar-expand-lg.navbar-light.QuranNav.wow.fadeInDown + div {
        position: relative;
    }

    .HeaderDownloadLink {
        top: 8px !important;
        right: -5px !important;
    }

    .HeaderBanner {
        top: 10px !important;
    }

    .UniqueFeatureRight p a, a.ReadMore {
        margin-bottom: 20px;
    }

    .WWAHeaderContent2, .WWAHeaderContent1 {
        padding: 0 15px;
    }

        .WWAHeaderContent2 span, .WWAHeaderContent1 span {
            float: left;
        }

            .WWAHeaderContent2 span:nth-child(2), .WWAHeaderContent1 span:nth-child(2) {
                width: calc(100% - 86px) !important;
                margin: 0 !important;
            }

                .WWAHeaderContent2 span:nth-child(2) span, .WWAHeaderContent1 span:nth-child(2) span {
                    width: 100%;
                    text-align: center;
                    border: none !important;
                }

                .WWAHeaderContent1 span:nth-child(2) span {
                    width: 100%;
                    text-align: center;
                    width: auto;
                    display: inline-block;
                    float: none;
                }

    .WWAHeaderContent span:nth-child(2) h2 {
        display: table;
        width: 100%;
        margin: 0;
    }

        .WWAHeaderContent span:nth-child(2) h2 span {
            display: table-cell;
            vertical-align: middle;
            height: 40px;
            float: none;
        }

    .HeaderFormContainer {
        padding: 0;
    }

    .SpanGreen {
        padding-bottom: 4px;
        position: relative;
    }

        .SpanGreen > a {
            position: absolute !important;
            bottom: 20px !important;
            left: 0 !important;
            margin: 0;
        }

        .SpanGreen > ul {
            padding-bottom: 50px;
        }

    .quranLearning {
        clear: both;
    }

    ul.Feature8Text {
        padding-bottom: 20px;
    }

    .Softwareheading h2 {
        font-size: 30px;
    }

    .InnerPageSearch {
        padding: 5px;
    }

    .selector-box {
        font-size: 13px !important;
        height: 32px !important;
        padding: 6px 10px !important;
    }

    .selector-btn {
        height: 32px !important;
        padding: 5px 0px 9px 0px !important;
    }

    .InnerHeaderDownloadLink {
        padding-top: 10px;
    }

    .InnerPageSearch {
        margin-top: 10px;
    }

    .tajweedMainBox, .tajweedMainBoxTopTwo {
        width: 33.33%;
    }

    .HowQuranLMSBodyContainer {
        text-align: center;
        padding: 0 15px;
    }

    .VideoLink {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        height: auto;
    }

    #tutorialVideoArea #videoDetailMobile, #tutorialVideoArea #videoDetailMobile > div {
        width: 100%;
    }

    #tutorialVideoArea #videoDetailMobile {
        padding: 0 35px !important;
    }

    #videoDetailMobile .line {
        margin: 7px 0 0 !important;
        width: auto !important;
    }

    #videoDetailMobile .mobileTabs ul li {
        width: auto !important;
    }

    .XtraSpan {
        width: 100%;
    }

    .profile-left#sec1, .profile-left#sec1 + .profile-main {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .fc-toolbar.fc-header-toolbar {
        display: flex;
        flex-wrap: wrap;
    }

    .fc-toolbar .fc-left {
        order: 1;
        width: 50%;
    }

    .fc-toolbar .fc-right {
        order: 2;
        width: 50%;
    }
}

@media (max-width:768px) {
    #resetPwPopup .modal-dialog .modal-content .modal-body .col-md-12 .col-md-2 {
        max-width: 20%;
    }

    .navbar-toggler {
        padding: 5px;
    }

    #resetPwPopup .modal-dialog .modal-content .modal-body .col-md-12 {
        padding-left: 0;
    }

    .HeaderBanner {
        top: 135px;
    }

    #carouselExampleIndicators .carousel-indicators li {
        height: 15px !important;
        width: 15px !important;
    }

    .fc td, .fc th {
        font-size: 12px;
        padding: 5px 0;
    }
}

@media (max-width:576px) {

    .col-md-7.inner-links {
        width: 100% !important;
    }

    .quran-logo img {
        width: 110px;
    }

    .quran-logo {
        top: 15px;
        left: calc(50% - 75px);
    }

    .navbar-nav.mr-auto.LeftMainMenu li:nth-child(3), .navbar-nav.mr-auto.LeftMainMenu li:nth-child(4) {
        display: block;
        width: 100%;
    }

    .loginNav, .signUpNav {
        padding: 5px;
    }

    .LangChanger {
        width: 100% !important;
        text-align: center;
    }
}
/* Change Password Calling end*/

.englihLink {
    /*padding: 2px 6px 2px 6px;
    margin: 0px 0px 0px -5px;*/
}

.arabicLink {
    /*padding: 0px 5px 2px 3px;
    float: left;*/
}


.carousel-item:nth-child(1) .BannerTagLine {
    background: RGBA(235, 236, 231,0.80);
    color: RGB(146, 96, 63);
}

.carousel-item:nth-child(2) .BannerTagLine {
    background: RGBA(215, 237, 225,0.80);
    color: RGB(56, 145, 128);
}

.carousel-item:nth-child(3) .BannerTagLine {
    background: RGBA(231, 219, 203,0.80);
    color: RGB(106, 94, 78);
}

.carousel-item:nth-child(4) .BannerTagLine {
    background: RGBA(231, 217, 190,0.80);
    color: RGB(143, 104, 41);
}

.carousel-item:nth-child(5) .BannerTagLine {
    background: RGBA(224, 220, 159,0.50);
    color: RGB(126, 115, 0);
}

.carousel-item:nth-child(6) .BannerTagLine {
    background: RGBA(249, 236, 191,0.80);
    color: RGB(121, 110, 2);
}

.carousel-item:nth-child(7) .BannerTagLine {
    background: RGBA(255, 228, 201,0.80);
    color: RGB(141, 79, 17);
}

.carousel-item:nth-child(8) .BannerTagLine {
    background: RGBA(249, 222, 213,0.80);
    color: RGB(162, 69, 69);
}

.carousel-item:nth-child(9) .BannerTagLine {
    background: RGBA(216, 225, 198,0.80);
    color: RGB(99, 119, 36);
}

.carousel-item:nth-child(10) .BannerTagLine {
    background: RGBA(213, 226, 204,0.80);
    color: RGB(64, 118, 66);
}

.carousel-item:nth-child(11) .BannerTagLine {
    background: RGBA(250, 236, 191,0.80);
    color: RGB(119, 101, 22);
}

.carousel-item:nth-child(12) .BannerTagLine {
    background: RGBA(230, 218, 202,0.80);
    color: RGB(108, 96, 80);
}

    .carousel-item:nth-child(12) .BannerTagLine span {
        color: RGB(128, 41, 38);
    }

.carousel-item:nth-child(13) .BannerTagLine {
    background: RGBA(231, 241, 206,0.80);
    color: RGB(103, 152, 58);
}

    .carousel-item:nth-child(13) .BannerTagLine span {
        color: RGB(137, 38, 33);
    }

.carousel-item:nth-child(14) .BannerTagLine {
    background: RGBA(250, 237, 192,0.80);
    color: RGB(122, 115, 18);
}

    .carousel-item:nth-child(14) .BannerTagLine span {
        color: RGB(128, 14, 3);
    }

.carousel-item:nth-child(15) .BannerTagLine {
    background: RGBA(197, 231, 214,0.80);
    color: RGB(27, 116, 103);
}

.carousel-item:nth-child(16) .BannerTagLine {
    background: RGBA(223, 231, 180,0.80);
    color: RGB(84, 111, 11);
}

.radiobuttonsbar_customcontent .radio-inline, .radiobuttonsbar_customcontent .checkbox-inline {
    max-width: calc(100% - 18px);
}

@media screen and (max-width:576px) {
    .carousel-item:nth-child(1) .BannerTagLine {
        background: RGBA(235, 236, 231,0.95);
        color: RGB(146, 96, 63);
    }

    .carousel-item:nth-child(2) .BannerTagLine {
        background: RGBA(215, 237, 225,0.95);
        color: RGB(56, 145, 128);
    }

    .carousel-item:nth-child(3) .BannerTagLine {
        background: RGBA(231, 219, 203,0.95);
        color: RGB(106, 94, 78);
    }

    .carousel-item:nth-child(4) .BannerTagLine {
        background: RGBA(231, 217, 190,0.95);
        color: RGB(143, 104, 41);
    }

    .carousel-item:nth-child(5) .BannerTagLine {
        background: RGBA(224, 220, 159,0.95);
        color: RGB(126, 115, 0);
    }

    .carousel-item:nth-child(6) .BannerTagLine {
        background: RGBA(249, 236, 191,0.95);
        color: RGB(121, 110, 2);
    }

    .carousel-item:nth-child(7) .BannerTagLine {
        background: RGBA(255, 228, 201,0.95);
        color: RGB(141, 79, 17);
    }

    .carousel-item:nth-child(8) .BannerTagLine {
        background: RGBA(249, 222, 213,0.95);
        color: RGB(162, 69, 69);
    }

    .carousel-item:nth-child(9) .BannerTagLine {
        background: RGBA(216, 225, 198,0.95);
        color: RGB(99, 119, 36);
    }

    .carousel-item:nth-child(10) .BannerTagLine {
        background: RGBA(213, 226, 204,0.95);
        color: RGB(64, 118, 66);
    }

    .carousel-item:nth-child(11) .BannerTagLine {
        background: RGBA(250, 236, 191,0.95);
        color: RGB(119, 101, 22);
    }

    .carousel-item:nth-child(12) .BannerTagLine {
        background: RGBA(230, 218, 202,0.95);
        color: RGB(108, 96, 80);
    }

        .carousel-item:nth-child(12) .BannerTagLine span {
            color: RGB(128, 41, 38);
        }

    .carousel-item:nth-child(13) .BannerTagLine {
        background: RGBA(231, 241, 206,0.95);
        color: RGB(103, 152, 58);
    }

        .carousel-item:nth-child(13) .BannerTagLine span {
            color: RGB(137, 38, 33);
        }

    .carousel-item:nth-child(14) .BannerTagLine {
        background: RGBA(250, 237, 192,0.95);
        color: RGB(122, 115, 18);
    }

        .carousel-item:nth-child(14) .BannerTagLine span {
            color: RGB(128, 14, 3);
        }

    .carousel-item:nth-child(15) .BannerTagLine {
        background: RGBA(197, 231, 214,0.95);
        color: RGB(27, 116, 103);
    }

    .carousel-item:nth-child(16) .BannerTagLine {
        background: RGBA(223, 231, 180,0.95);
        color: RGB(84, 111, 11);
    }

    .fc .fc-axis {
        width: auto;
    }

    .fc td, .fc th {
        font-size: 10px;
    }



    .teachingSchedule .fcs-center h3, .teachingSchedule .fcs-center select {
        font-size: 15px;
    }

    .profile-main-header {
        flex-wrap: wrap;
    }

    .profile-left .profile-left-value {
        position: static;
    }

    .statistics .gSmlTxt {
        padding-top: 0 !important;
        padding-right: 3px;
        font-size: 12px;
    }

    .statistics .value .gBigTxt {
        font-size: 12px !important;
        margin: 0 !important;
    }

    .statistics .teacher-detail-separator:nth-child(2) .head {
        width: 100%;
    }

    .headingareatop {
        font-size: 24px !important;
    }
}

@media screen and (max-height:285px) {

    #signInPopup {
        max-height: calc(100% - 48px);
    }

        #signInPopup .modal-dialog {
            height: calc(100% - 16px);
            overflow-y: hidden;
        }

        #signInPopup .modal-content {
            height: 100%;
            padding-bottom: 15px;
        }

        #signInPopup .modal-body {
            height: calc(100% - 59px);
            overflow: scroll;
        }
}

@media screen and (max-height:655px) and (max-width:767px) {
    .navbar-nav.mr-auto.LeftMainMenu li:nth-child(3), .navbar-nav.mr-auto.LeftMainMenu li:nth-child(4) {
        display: block;
        width: 100%;
    }

    #signUpPopup {
        max-height: calc(100% - 48px);
    }

        #signUpPopup .modal-dialog {
            height: calc(100% - 16px);
            overflow-y: hidden;
        }

        #signUpPopup .modal-content {
            height: 100%;
            padding-bottom: 15px;
        }

        #signUpPopup .modal-body {
            height: calc(100% - 59px);
            overflow: scroll;
        }
}

#signUpPopup .modal-dialog .modal-content .modal-body .col-md-6 a .student-bg, #signUpPopup .modal-dialog .modal-content .modal-body .col-md-6 a .teacher-bg {
    width: 100%;
}

.BodyMainContainer ul {
    padding-left: 10px;
}

ul.youtubewall li .image img {
    float: none !important;
}

ul.youtubewall li .thumbwrap {
    margin: 0 !important;
}

ul.youtubewall li .panel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-height: unset;
}

.reset-password {
    float: right;
    margin-right: 15px;
}

.list-heading {
    padding-left: 15px;
}

    .list-heading::before {
        content: '';
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background: #000;
        margin-left: -15px;
        display: inline-block;
        vertical-align: middle;
    }

h5.bordered {
    border: none;
    line-height: 1.5;
}

.InnerPageHeading h2.bordered {
    border: none;
    line-height: 1.5;
}

    .InnerPageHeading h2.bordered span {
        border-bottom: 2px solid;
        padding-bottom: 4px;
    }

@media (max-width:1200px) {
    .mad-layout {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

        .mad-layout .col-md-3 {
            width: 50%;
            max-width: 50%;
            flex: 0 0 50%;
            order: 1;
        }

        .mad-layout .col-md-6 {
            width: 100%;
            max-width: 100%;
            flex: 0 0 100%;
            order: 3;
        }
}

@media (max-width:991px) and (min-width:701px) {
    .RegisterForCourses_wrapper_BottomArea > div.col-md-2 {
        padding: 0 20px !important;
    }

    .RegisterForCourses_wrapper_BottomArea > div {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
        border: none !important;
    }

    #timezonebox .headingright, .RegisterForCourses_wrapper_BottomArea .col-lg-2.col-md-2.col-sm-2.col-xs-2 .rowbox .rangeslider_blue, .RegisterForCourses_wrapper_BottomArea, .RegisterForCourses_wrapper_BottomArea .col-lg-2.col-md-2.col-sm-2.col-xs-2 .rowbox .rangeslider, .RegisterForCourses_wrapper_BottomArea .col-lg-2.col-md-2.col-sm-2.col-xs-2 .rowbox .rangeslider_blue {
        width: 100% !important;
    }

        .RegisterForCourses_wrapper_BottomArea .searchcriteriabox {
            margin: 0 -20px !important;
        }

        .RegisterForCourses_wrapper_BottomArea .imgs {
            width: 40px !important;
        }

        .RegisterForCourses_wrapper_BottomArea .headingright {
            width: calc(100% - 40px) !important;
            padding: 0 !important;
        }

    .table-courses-offered-container {
        max-height: unset !important;
    }

    .RegisterForCourses_wrapper_BottomArea .spResultBox {
        margin: 0 -5px !important;
        padding: 0 !important;
    }


    .FooterContent > div:nth-child(2), .FooterContent > div:nth-child(3) {
        width: 40%;
        max-width: 40%;
        flex: 0 0 40%;
        left: 0;
        margin-bottom: 40px;
    }

    .FooterContent > div:nth-child(4), .FooterContent > div:nth-child(5) {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }

    #divSearchBottom button, #tutorialVideoArea .brick {
        width: 100% !important;
    }

    #tutorialVideoArea .brick {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

@media screen and (max-width:600px) and (min-width:300px) {

    .InnerPg3Bottom .col-md-6 {
        padding: 0;
    }

        .InnerPg3Bottom .col-md-6 a {
            font-size: 14px;
            padding-bottom: 10px !important;
            line-height: 2.0;
            margin-bottom: 15px;
            display: block;
        }

    .FooterContent > div:nth-child(2), .FooterContent > div:nth-child(3) {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        left: 0;
        margin-bottom: 40px;
    }

    .FooterContent > div:nth-child(4), .FooterContent > div:nth-child(5) {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-top: 0;
    }
}

@media screen and (max-width:767px) {
    .center h2 {
        font-size: 24px;
    }

        .center h2 span {
            display: inline-block;
            max-width: calc(100% - 92px);
            font-size: 18px;
        }

    .lead {
        font-size: 14px;
    }

    .RegisterForCourses_wrapper_BottomArea > div.col-md-2 {
        padding: 0 20px !important;
    }

    #divSearchBottom button {
        width: 100% !important;
    }

    .teacherName.FTHeader {
        display: flex;
        align-items: center;
        max-width: calc(100% - 87px);
    }

    .FTSearchResultRow .statistics .head {
        display: inline-block;
    }

    .FTSearchResultRow .statistics .value {
        float: right;
        min-width: 50%;
    }

    .statistics .gBigTxt, .statistics .gSmlTxt {
        position: static;
    }

    .RegisterForCourses_wrapper_BottomArea > div {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
        border: none !important;
    }

    #timezonebox .headingright, .RegisterForCourses_wrapper_BottomArea .col-lg-2.col-md-2.col-sm-2.col-xs-2 .rowbox .rangeslider_blue, .RegisterForCourses_wrapper_BottomArea, .RegisterForCourses_wrapper_BottomArea .col-lg-2.col-md-2.col-sm-2.col-xs-2 .rowbox .rangeslider, .RegisterForCourses_wrapper_BottomArea .col-lg-2.col-md-2.col-sm-2.col-xs-2 .rowbox .rangeslider_blue {
        width: 100% !important;
    }

        .RegisterForCourses_wrapper_BottomArea .searchcriteriabox {
            margin: 0 -20px !important;
        }

        .RegisterForCourses_wrapper_BottomArea .imgs {
            width: 40px !important;
        }

        .RegisterForCourses_wrapper_BottomArea .headingright {
            width: calc(100% - 40px) !important;
            padding: 0 !important;
        }

    .table-courses-offered-container {
        max-height: unset !important;
    }

    .RegisterForCourses_wrapper_BottomArea .spResultBox {
        margin: 0 -5px !important;
        padding: 0 !important;
    }

    .RegisterForCourses_wrapper_BottomArea .col-sm-2 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .courseDetail_Class .container {
        width: 100%;
        max-width: 100%;
    }

    #dvCourseStudentSettings {
        margin-top: 20px !important;
    }

    .teacherDetail-courseNameTxt table.CourseHalqaUpperTable > tbody > tr > td {
        padding: 0 !important;
    }

    .courseDetail_Class .teacherDetail > .TeacherCourseDetail {
        padding: 0;
    }

    .MobleStoreImg {
        text-align: center;
        padding: 0 15px;
    }

    .InnerHeaderDownloadLink img {
        height: 30px;
        width: 29px !important;
        object-fit: cover;
        object-position: left;
        border-radius: 5px;
    }

    .InnerHeaderDownloadLink a:last-child img {
        object-position: -4px 0;
    }

    .InnerPageSearch {
        padding: 3px;
        margin-top: 6px;
        width: calc(100% - 100px);
    }

    .tajweedMainBox, .tajweedMainBoxTopTwo {
        width: 50%;
    }

    .CustomDropMenu .col-md-2 {
        width: 33.33%;
        float: left;
    }

        .CustomDropMenu .col-md-2 .dropdown-item {
            padding: 15px 0 10px;
        }

    .dropdown-menu.CustomDropDown {
        width: calc(100vw - 100px);
    }

    #pricingDetails .firstRow .text-center .col-lg-6, #pricingDetails .forthRow .text-center .col-lg-6 {
        width: 100%;
        max-width: 100%;
        padding: 15px;
    }

    .HeaderFormContainer {
        width: 50% !important;
    }

    .selector-box {
        font-size: 13px !important;
        height: 32px !important;
    }

    .inputHeaderBanner {
        margin: 0 !important;
        padding: 5px;
    }

    .selector-btn {
        height: 32px !important;
        padding: 5px 0px 9px 0px !important;
    }

    .tp-bullets {
        display: none;
    }

    .HeaderDownloadLink img {
        height: 30px;
        width: 29px !important;
        object-fit: cover;
        object-position: left;
        border-radius: 5px;
    }

    .HeaderDownloadLink a:last-child img {
        object-position: -4px 0;
    }

    .HeaderBanner .HeaderFormContainer {
        width: calc(100% - 100px) !important;
    }
}

@media (max-width:574px) {
}

@media (max-width:550px) {
    .col-md-7.inner-links {
        padding-left: 0;
    }

    .navbar-nav.mr-auto.LeftMainMenu li:nth-child(2) {
        margin-right: 5px;
    }

    .navbar-nav.mr-auto.LeftMainMenu li:nth-child(3), .navbar-nav.mr-auto.LeftMainMenu li:nth-child(4) {
        padding: 0 5px;
        font-size: 13px;
    }

    .LangChanger {
        margin: 0;
    }

        .LangChanger .arabic {
            font-size: 13px;
        }

        .LangChanger .eng {
            font-size: 12px;
            margin: 0 !important;
        }

    .tajweedMainBox, .tajweedMainBoxTopTwo {
        width: 100%;
    }

    .dropdown-menu {
        font-size: 13px;
    }

    .speedCalcBoxtable.table-responsive thead {
        display: none;
    }

    table.speedCalcBoxtable.table-responsive, table.speedCalcBoxtable.table-responsive tbody, table.speedCalcBoxtable.table-responsive tbody tr, .RegisterForCourses_wrapper_BottomArea .col-lg-2.col-md-2.col-sm-2.col-xs-2 .rowbox .openspeedboxinfo .speedCalcBox {
        display: block;
        width: 100% !important;
    }

        table.speedCalcBoxtable.table-responsive td {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: .8em;
            text-align: left;
        }

            table.speedCalcBoxtable.table-responsive td::before {
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
                left: 0px;
                width: 100%;
                text-align: left;
                padding-right: 0px;
                font-weight: bold;
                white-space: nowrap;
                font-size: 1em;
                text-transform: uppercase;
                padding: 8px 5px;
                color: #FFF;
                background-color: #42819f;
            }

    .RegisterForCourses_wrapper_BottomArea .col-lg-2.col-md-2.col-sm-2.col-xs-2 .rowbox .openspeedboxinfo .closebutton {
        left: auto !important;
        right: -12px;
    }
}

@media (max-width:414px) {

    .navbar-nav.mr-auto.LeftMainMenu {
        width: 170px;
    }

    .CustomDropMenu .col-md-2 {
        width: 50%;
    }

    #signUpPopup .modal-dialog .modal-content .modal-body .col-md-6 a .teacher-bg,
    #signUpPopup .modal-dialog .modal-content .modal-body .col-md-6 a .student-bg {
        width: 100%;
    }

    #signInPopup .modal-dialog .modal-content .modal-body .ForgotPassword a {
        margin-left: 64px;
    }

    #divSignInMessage {
        margin-left: 73px;
    }

    .inner-options {
        margin-bottom: 10px;
    }

    .quran-logo {
        margin-right: 1px;
    }

    .Softwareheading h2 {
        font-size: 24px;
    }

    body #carouselExampleIndicators .carousel-indicators li {
        height: 10px !important;
        width: 10px !important;
    }

    .menu_section > ul {
        justify-content: center;
    }

    .nav.side-menu > li {
        width: auto !important;
        max-width: 80px;
        padding-bottom: 10px;
    }

    .lan_AR {
        margin-top: 14px;
    }
}

@media (max-width:375px) {
    #divSignInMessage {
        margin-left: 64px !important;
    }

    .quran-logo {
        margin-right: 1px;
    }

        .quran-logo > img {
            max-width: 125px;
        }
}

@media (max-width: 360px) {
    #divSignInMessage {
        margin-left: 61px !important;
    }
}

@media (max-width: 359px) {
    #divSignInMessage {
        margin-left: 53px !important;
    }

    .quran-logo > img {
        max-width: 100px;
    }

    .loginNav,
    .signUpNav {
        padding: 3px;
    }
}

#divImageContainer {
    position: relative
}

.ViewQuranDetailsbox_left .imgarea.imgPaddingForScriptPg div[id*="mapster_wrap"] {
    width: 100% !important;
    height: auto !important;
    padding-right: 20px !important;
}

.ViewQuranDetailsbox_left .imgarea img {
    width: 100% !important;
    height: auto !important;
}

div#lnkRow {
    width: 20px !important;
    padding: 0 !important;
    position: absolute;
    top: 0;
    right: 6px;
}

a.scriptSelectRow {
    margin-top: 28px;
    display: block;
}

div#divRow {
    position: absolute;
    top: 60px;
    right: 30px;
    left: 0;
    font-size: 24px;
}

    div#divRow > div {
        background: #FFF;
        padding: 10px;
        text-align: right !important;
        width: 100%;
        display: block;
        padding: 6px 10px 7px;
        border: 1px solid #000;
        position: relative;
        height: 93px;
        z-index:5;
    }

.ViewQuranDetailsbox_left .imgarea + .navigationbtnsarea {
    margin-top: 20px;
}

div#divRow > div:empty {
    background: none;
    outline: 0;
}

.col-md-auto.ViewQuranDetailsbox_left {
    width: 600px;
}

.imgarea[pg2="pg2"] div#lnkRow {
    top: 273px;
    right: 84px;
}

    .imgarea[pg2="pg2"] div#lnkRow a.scriptSelectRow {
        margin-top: 23px
    }

        .imgarea[pg2="pg2"] div#lnkRow a.scriptSelectRow:first-child {
            position: relative;
            left: -35px
        }

        .imgarea[pg2="pg2"] div#lnkRow a.scriptSelectRow:nth-child(5) {
            position: relative;
            left: -40px
        }

        .imgarea[pg2="pg2"] div#lnkRow a.scriptSelectRow:nth-child(6) {
            position: relative;
            left: -90px
        }

.ViewQuranDetailsbox_left [pg2="pg2"] .imgarea img {
    width: 545px;
    display: block;
    margin: 0 auto
}

.imgarea[pg1="pg1"] div#lnkRow a.scriptSelectRow:first-child {
    position: relative;
    left: -75px
}

.imgarea[pg1="pg1"] div#lnkRow a.scriptSelectRow:nth-child(2) {
    position: relative;
    left: -35px
}

.imgarea[pg1="pg1"] div#lnkRow a.scriptSelectRow:nth-child(5) {
    position: relative;
    left: -10px
}

.imgarea[pg1="pg1"] div#lnkRow a.scriptSelectRow:nth-child(6) {
    position: relative;
    left: -44px
}

.imgarea[pg1="pg1"] div#lnkRow a.scriptSelectRow:nth-child(7) {
    position: relative;
    left: -90px
}

.ViewQuranDetailsbox_left [pg1="pg1"].imgarea img.mapster_el, .ViewQuranDetailsbox_left [pg2="pg2"].imgarea img.mapster_el {
    width: 545px !important;
    display: block !important;
    margin: 0 auto;
    position: static !important;
    opacity: 1 !important;
}

.imgarea[pg1="pg1"] div#lnkRow {
    top: 224px;
    right: 84px;
}

.imgarea[pg1="pg1"] div#divRow {
    top: 280px;
    left: 105px;
    right: 200px;
}

.ViewQuranDetailsbox_left [pg1="pg1"].imgarea > div, .ViewQuranDetailsbox_left [pg2="pg2"].imgarea > div {
    padding: 0 !important;
}

.ViewQuranDetailsbox_left [pg1="pg1"].imgarea a.scriptSelectRow {
    margin-top: 23px;
}

.imgarea[pg1="pg1"] div#divRow > div:first-child {
    position: relative;
    left: 35px;
    width: 109%
}

.imgarea[pg1="pg1"] div#divRow > div:nth-child(2) {
    position: relative;
    left: 0px;
    width: 133%
}

.imgarea[pg1="pg1"] div#divRow > div:nth-child(3) {
    position: relative;
    left: 7px;
    width: 130%
}

.imgarea[pg1="pg1"] div#divRow > div:nth-child(4) {
    position: relative;
    left: 7px;
    width: 130%
}

.imgarea[pg1="pg1"] div#divRow > div:nth-child(5) {
    position: relative;
    left: -24px;
    width: 126%;
}

.imgarea[pg1="pg1"] div#divRow > div:nth-child(6) {
    position: relative;
    left: 0px;
    width: 100%
}

.imgarea[pg1="pg1"] div#divRow > div:nth-child(7) {
    position: relative;
    left: 150px;
    width: 60%
}

.imgarea[pg1="pg1"] div#divRow > div {
    padding: 5px 10px
}

.imgarea[pg2="pg2"] div#divRow {
    top: 328px;
    right: 200px;
    left: 90px;
}

    .imgarea[pg2="pg2"] div#divRow > div {
        padding: 7px 10px
    }

        .imgarea[pg2="pg2"] div#divRow > div:first-child {
            position: relative;
            left: 0px;
            width: 128%
        }

        .imgarea[pg2="pg2"] div#divRow > div:nth-child(2) {
            position: relative;
            left: -19px;
            width: 140%;
        }

        .imgarea[pg2="pg2"] div#divRow > div:nth-child(3) {
            position: relative;
            left: -20px;
            width: 138%;
        }

        .imgarea[pg2="pg2"] div#divRow > div:nth-child(4) {
            position: relative;
            left: 20px;
            width: 110%
        }

        .imgarea[pg2="pg2"] div#divRow > div:nth-child(5) {
            position: relative;
            left: -55px;
            width: 120%;
        }

.ViewQuranDetailsbox_left .imgarea[pg2="pg2"] canvas, .ViewQuranDetailsbox_left .imgarea[pg1="pg1"] canvas {
    width: 545px !important;
    height: 808px !important;
}

div#divRow > div a {
    font-size: 18px;
    margin-top: 13px;
    top: 1px;
    left: 2px;
    line-height: 18px;
}

.imgarea[pg50="pg50"] div#lnkRow, .imgarea[pg128="pg128"] div#lnkRow, .imgarea[pg151="pg151"] div#lnkRow, .imgarea[pg177="pg177"] div#lnkRow, .imgarea[pg249="pg249"] div#lnkRow, .imgarea[pg262="pg262"] div#lnkRow, .imgarea[pg282="pg282"] div#lnkRow, .imgarea[pg305="pg305"] div#lnkRow, .imgarea[pg322="pg322"] div#lnkRow, .imgarea[pg411="pg411"] div#lnkRow, .imgarea[pg428="pg428"] div#lnkRow, .imgarea[pg477="pg477"] div#lnkRow, .imgarea[pg483="pg483"] div#lnkRow, .imgarea[pg496="pg496"] div#lnkRow, .imgarea[pg511="pg511"] div#lnkRow, .imgarea[pg518="pg518"] div#lnkRow, .imgarea[pg542="pg542"] div#lnkRow, .imgarea[pg553="pg553"] div#lnkRow, .imgarea[pg560="pg560"] div#lnkRow, .imgarea[pg562="pg562"] div#lnkRow, .imgarea[pg572="pg572"] div#lnkRow, .imgarea[pg574="pg574"] div#lnkRow, .imgarea[pg582="pg582"] div#lnkRow, .imgarea[pg587="pg587"] div#lnkRow, .imgarea[pg591="pg591"] div#lnkRow, .imgarea[pg601="pg601"] div#lnkRow, .imgarea[pg602="pg602"] div#lnkRow, .imgarea[pg603="pg603"] div#lnkRow, .imgarea[pg604="pg604"] div#lnkRow {
    top: 105px;
}

.imgarea[pg50="pg50"] div#divRow, .imgarea[pg128="pg128"] div#divRow, .imgarea[pg151="pg151"] div#divRow, .imgarea[pg177="pg177"] div#divRow, .imgarea[pg249="pg249"] div#divRow, .imgarea[pg262="pg262"] div#divRow, .imgarea[pg282="pg282"] div#divRow, .imgarea[pg305="pg305"] div#divRow, .imgarea[pg322="pg322"] div#divRow, .imgarea[pg411="pg411"] div#divRow, .imgarea[pg428="pg428"] div#divRow, .imgarea[pg477="pg477"] div#divRow, .imgarea[pg483="pg483"] div#divRow, .imgarea[pg496="pg496"] div#divRow, .imgarea[pg511="pg511"] div#divRow, .imgarea[pg518="pg518"] div#divRow, .imgarea[pg542="pg542"] div#divRow, .imgarea[pg553="pg553"] div#divRow, .imgarea[pg560="pg560"] div#divRow, .imgarea[pg562="pg562"] div#divRow, .imgarea[pg572="pg572"] div#divRow, .imgarea[pg574="pg574"] div#divRow, .imgarea[pg582="pg582"] div#divRow, .imgarea[pg587="pg587"] div#divRow, .imgarea[pg591="pg591"] div#divRow, .imgarea[pg601="pg601"] div#divRow, .imgarea[pg602="pg602"] div#divRow, .imgarea[pg603="pg603"] div#divRow, .imgarea[pg604="pg604"] div#divRow {
    top: 165px;
}

.imgarea[pg77="pg77"] div#lnkRow, .imgarea[pg208="pg208"] div#lnkRow, .imgarea[pg332="pg332"] div#lnkRow, .imgarea[pg342="pg342"] div#lnkRow, .imgarea[pg350="pg350"] div#lnkRow, .imgarea[pg367="pg367"] div#lnkRow, .imgarea[pg377="pg377"] div#lnkRow, .imgarea[pg415="pg415"] div#lnkRow, .imgarea[pg418="pg418"] div#lnkRow, .imgarea[pg446="pg446"] div#lnkRow, .imgarea[pg453="pg453"] div#lnkRow, .imgarea[pg499="pg499"] div#lnkRow, .imgarea[pg507="pg507"] div#lnkRow, .imgarea[pg526="pg526"] div#lnkRow, .imgarea[pg549="pg549"] div#lnkRow, .imgarea[pg556="pg556"] div#lnkRow, .imgarea[pg558="pg558"] div#lnkRow, .imgarea[pg585="pg585"] div#lnkRow {
    top: 53px;
}

.imgarea[pg77="pg77"] div#divRow, .imgarea[pg208="pg208"] div#divRow, .imgarea[pg332="pg332"] div#divRow, .imgarea[pg342="pg342"] div#divRow, .imgarea[pg350="pg350"] div#divRow, .imgarea[pg367="pg367"] div#divRow, .imgarea[pg377="pg377"] div#divRow, .imgarea[pg415="pg415"] div#divRow, .imgarea[pg418="pg418"] div#divRow, .imgarea[pg446="pg446"] div#divRow, .imgarea[pg453="pg453"] div#divRow, .imgarea[pg499="pg499"] div#divRow, .imgarea[pg507="pg507"] div#divRow, .imgarea[pg526="pg526"] div#divRow, .imgarea[pg549="pg549"] div#divRow, .imgarea[pg556="pg556"] div#divRow, .imgarea[pg558="pg558"] div#divRow, .imgarea[pg585="pg585"] div#divRow {
    top: 113px;
}

.imgarea[pg187="pg187"] div#lnkRow {
    top: 60px
}

.imgarea[pg187="pg187"] div#divRow {
    top: 115px
}

.imgarea[pg221="pg221"] div#lnkRow a:nth-child(7), .imgarea[pg235="pg235"] div#lnkRow a:nth-child(9), .imgarea[pg255="pg255"] div#lnkRow a:nth-child(3), .imgarea[pg267="pg267"] div#lnkRow a:nth-child(7), .imgarea[pg293="pg293"] div#lnkRow a:nth-child(10), .imgarea[pg312="pg312"] div#lnkRow a:nth-child(5), .imgarea[pg359="pg359"] div#lnkRow a:nth-child(11), .imgarea[pg385="pg385"] div#lnkRow a:nth-child(8), .imgarea[pg396="pg396"] div#lnkRow a:nth-child(8), .imgarea[pg404="pg404"] div#lnkRow a:nth-child(10), .imgarea[pg434="pg434"] div#lnkRow a:nth-child(8), .imgarea[pg440="pg440"] div#lnkRow a:nth-child(4), .imgarea[pg458="pg458"] div#lnkRow a:nth-child(4), .imgarea[pg467="pg467"] div#lnkRow a:nth-child(3), .imgarea[pg489="pg489"] div#lnkRow a:nth-child(5), .imgarea[pg502="pg502"] div#lnkRow a:nth-child(7), .imgarea[pg515="pg515"] div#lnkRow a:nth-child(7), .imgarea[pg520="pg520"] div#lnkRow a:nth-child(12), .imgarea[pg523="pg523"] div#lnkRow a:nth-child(8), .imgarea[pg528="pg528"] div#lnkRow a:nth-child(10), .imgarea[pg531="pg531"] div#lnkRow a:nth-child(5), .imgarea[pg534="pg534"] div#lnkRow a:nth-child(7), .imgarea[pg537="pg537"] div#lnkRow a:nth-child(11), .imgarea[pg545="pg545"] div#lnkRow a:nth-child(7), .imgarea[pg551="pg551"] div#lnkRow a:nth-child(7), .imgarea[pg554="pg554"] div#lnkRow a:nth-child(7), .imgarea[pg564="pg564"] div#lnkRow a:nth-child(6), .imgarea[pg566="pg566"] div#lnkRow a:nth-child(10), .imgarea[pg568="pg568"] div#lnkRow a:nth-child(9), .imgarea[pg570="pg570"] div#lnkRow a:nth-child(5), .imgarea[pg575="pg575"] div#lnkRow a:nth-child(8), .imgarea[pg577="pg577"] div#lnkRow a:nth-child(6), .imgarea[pg578="pg578"] div#lnkRow a:nth-child(10), .imgarea[pg580="pg580"] div#lnkRow a:nth-child(7), .imgarea[pg583="pg583"] div#lnkRow a:nth-child(8), .imgarea[pg586="pg586"] div#lnkRow a:nth-child(2), .imgarea[pg587="pg587"] div#lnkRow a:nth-child(10), .imgarea[pg589="pg589"] div#lnkRow a:nth-child(3), .imgarea[pg590="pg590"] div#lnkRow a:nth-child(2), .imgarea[pg591="pg591"] div#lnkRow a:nth-child(8), .imgarea[pg592="pg592"] div#lnkRow a:nth-child(5), .imgarea[pg593="pg593"] div#lnkRow a:nth-child(3), .imgarea[pg594="pg594"] div#lnkRow a:nth-child(6), .imgarea[pg595="pg595"] div#lnkRow a:nth-child(2), .imgarea[pg595="pg595"] div#lnkRow a:nth-child(9), .imgarea[pg596="pg596"] div#lnkRow a:nth-child(6), .imgarea[pg596="pg596"] div#lnkRow a:nth-child(11), .imgarea[pg597="pg597"] div#lnkRow a:nth-child(3), .imgarea[pg597="pg597"] div#lnkRow a:nth-child(7), .imgarea[pg598="pg598"] div#lnkRow a:nth-child(4), .imgarea[pg598="pg598"] div#lnkRow a:nth-child(7), .imgarea[pg599="pg599"] div#lnkRow a:nth-child(6), .imgarea[pg599="pg599"] div#lnkRow a:nth-child(10), .imgarea[pg600="pg600"] div#lnkRow a:nth-child(4), .imgarea[pg600="pg600"] div#lnkRow a:nth-child(9), .imgarea[pg601="pg601"] div#lnkRow a:nth-child(3), .imgarea[pg601="pg601"] div#lnkRow a:nth-child(7), .imgarea[pg602="pg602"] div#lnkRow a:nth-child(4), .imgarea[pg602="pg602"] div#lnkRow a:nth-child(8), .imgarea[pg603="pg603"] div#lnkRow a:nth-child(4), .imgarea[pg603="pg603"] div#lnkRow a:nth-child(7), .imgarea[pg604="pg604"] div#lnkRow a:nth-child(3), .imgarea[pg604="pg604"] div#lnkRow a:nth-child(6) {
    margin-top: 136px
}

.imgarea[pg221="pg221"] div#divRow > div:nth-child(7), .imgarea[pg235="pg235"] div#divRow div:nth-child(9), .imgarea[pg255="pg255"] div#divRow div:nth-child(3), .imgarea[pg267="pg267"] div#divRow div:nth-child(7), .imgarea[pg293="pg293"] div#divRow div:nth-child(10), .imgarea[pg312="pg312"] div#divRow div:nth-child(5), .imgarea[pg359="pg359"] div#divRow div:nth-child(11), .imgarea[pg385="pg385"] div#divRow div:nth-child(8), .imgarea[pg396="pg396"] div#divRow div:nth-child(8), .imgarea[pg404="pg404"] div#divRow div:nth-child(10), .imgarea[pg434="pg434"] div#divRow div:nth-child(8), .imgarea[pg440="pg440"] div#divRow div:nth-child(4), .imgarea[pg458="pg458"] div#divRow div:nth-child(4), .imgarea[pg467="pg467"] div#divRow div:nth-child(3), .imgarea[pg489="pg489"] div#divRow div:nth-child(5), .imgarea[pg502="pg502"] div#divRow div:nth-child(7), .imgarea[pg515="pg515"] div#divRow div:nth-child(7), .imgarea[pg520="pg520"] div#divRow div:nth-child(12), .imgarea[pg523="pg523"] div#divRow div:nth-child(8), .imgarea[pg528="pg528"] div#divRow div:nth-child(10), .imgarea[pg531="pg531"] div#divRow div:nth-child(5), .imgarea[pg534="pg534"] div#divRow div:nth-child(7), .imgarea[pg537="pg537"] div#divRow div:nth-child(11), .imgarea[pg545="pg545"] div#divRow div:nth-child(7), .imgarea[pg551="pg551"] div#divRow div:nth-child(7), .imgarea[pg554="pg554"] div#divRow div:nth-child(7), .imgarea[pg564="pg564"] div#divRow div:nth-child(6), .imgarea[pg566="pg566"] div#divRow div:nth-child(10), .imgarea[pg568="pg568"] div#divRow div:nth-child(9), .imgarea[pg570="pg570"] div#divRow div:nth-child(5), .imgarea[pg575="pg575"] div#divRow div:nth-child(8), .imgarea[pg577="pg577"] div#divRow div:nth-child(6), .imgarea[pg578="pg578"] div#divRow div:nth-child(10), .imgarea[pg580="pg580"] div#divRow div:nth-child(7), .imgarea[pg583="pg583"] div#divRow div:nth-child(8), .imgarea[pg586="pg586"] div#divRow div:nth-child(2), .imgarea[pg587="pg587"] div#divRow div:nth-child(10), .imgarea[pg589="pg589"] div#divRow div:nth-child(3), .imgarea[pg590="pg590"] div#divRow div:nth-child(2), .imgarea[pg591="pg591"] div#divRow div:nth-child(8), .imgarea[pg592="pg592"] div#divRow div:nth-child(5), .imgarea[pg593="pg593"] div#divRow div:nth-child(3), .imgarea[pg594="pg594"] div#divRow div:nth-child(6), .imgarea[pg595="pg595"] div#divRow div:nth-child(2), .imgarea[pg595="pg595"] div#divRow div:nth-child(9), .imgarea[pg596="pg596"] div#divRow div:nth-child(6), .imgarea[pg596="pg596"] div#divRow div:nth-child(11), .imgarea[pg597="pg597"] div#divRow div:nth-child(3), .imgarea[pg597="pg597"] div#divRow div:nth-child(7), .imgarea[pg598="pg598"] div#divRow div:nth-child(4), .imgarea[pg598="pg598"] div#divRow div:nth-child(7), .imgarea[pg599="pg599"] div#divRow div:nth-child(6), .imgarea[pg599="pg599"] div#divRow div:nth-child(10), .imgarea[pg600="pg600"] div#divRow div:nth-child(4), .imgarea[pg600="pg600"] div#divRow div:nth-child(9), .imgarea[pg601="pg601"] div#divRow div:nth-child(3), .imgarea[pg601="pg601"] div#divRow div:nth-child(7), .imgarea[pg602="pg602"] div#divRow div:nth-child(4), .imgarea[pg602="pg602"] div#divRow div:nth-child(8), .imgarea[pg603="pg603"] div#divRow div:nth-child(4), .imgarea[pg603="pg603"] div#divRow div:nth-child(7), .imgarea[pg604="pg604"] div#divRow div:nth-child(3), .imgarea[pg604="pg604"] div#divRow div:nth-child(6) {
    margin-top: 110px
}

div#divRow > div .sp-replacer {
    top: 22px;
    left: 1px;
}

div#divRow > div:empty {
    border-color: transparent;
    height: 48px;
    
    z-index:0;
}

div#divRow > div > div[contenteditable="true"] {
    border-bottom: 1px solid #000;
    margin: 0 -10px;
    padding: 0 10px;
    outline: 0
}

#divPoP {
    position: absolute;
    top: 43px;
    text-align: right;
    left: 35px;
    right: 75px;
}

body div#divRow > div > #editDiv, #myWordslist, #myWordslist td {
    font-family: 'Quran2020A' !important;
    font-size: 27px;
}
#myWordslist, #myWordslist td {font-size:20px}
#editDiv + #divWords {
    position: absolute;
    top: 91px;
    left:-1px;
    right: -1px;
    padding: 0 5px;
}

#editDiv + div#divWords ul {
    text-align: right;
}

#editDiv + div#divWords li {
    display: inline-block;
    float: none;
}
@media screen and (max-width:991px) {
#signInPopup .modal-dialog{max-width:700px !important;width:96%;}
}
@media screen and (max-width:767px) {
#signInPopup .modal-body .row>div:not(.signup-social){width:100%;flex:0 0 100%;padding:0 1.5rem !important}
#signInPopup .modal-body .row>div.or{text-align:center;position:relative;padding:15px 1.5rem !important;left:0;}
.or span{background:#e1b12c;position:relative;padding:0 10px}
#signInPopup .modal-body .row>div.or::before{content:"";height:1px;background:#dee2e6!important;position:absolute;top:50%;left:1.5rem;right:1.5rem}
#signInPopup .modal-body .row>div.border-left{border-left:0 !important;}
#signInPopup .modal-body .row .form-row{margin-left:0 !important;margin-right:0 !important;}
#signInPopup .modal-dialog .modal-content .modal-body .ForgotPassword{margin-left:0 !important;padding:0 !important;}
#googleSignIn {background:#DE4B39;}
a[onclick="FBLogin();"]{background:#3B5999;}
}
.fb-login {
    margin-bottom: 18px;
}

    .fb-login img, #googleSignIn img {
        width: 272px;
        height: 54px;
        object-fit: cover;
        border-radius: 3px
    }