@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-family: 'Lato-Regular';
}
body {
    font-family: 'Lato-Regular';
    font-size: 12px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #535353;direction:rtl;
}
.content .col-auto{padding:0}header{background:#9bead7}header img:last-child{float:right}
.breadcrumb{border-bottom:3px solid #00c0ef;border-radius:0;background:#f7f7f7}.breadcrumbLinks a {
    color: #18222c;line-height:23px;text-decoration:none;
}.breadcrumbLinks span {
    color: #18222c;
    padding: 0 10px;
}.breadcrumbLinks a.active {
    color: #937614;
}
h1 {
    color: #865015;
    font-size: 40px;
    font-family: 'Lato-Light';
    text-transform: uppercase;
    margin: 30px 0;
    text-align: center;
}
.banner {
    background: url("../../images/banner-bg.png") no-repeat;background-size:100%;
}
.col.img{width:30%;}.col.img img{max-width:100%;}
.col.img + div{width:70%;display:flex;justify-content:center;flex-direction:column;}
.banner p {
    font-size: 20px;
    font-family: 'lato-light';
    color: #000;
    max-width: 765px;text-align:right;
}
    .banner h1{text-align:right;text-transform:capitalize;max-width:765px;margin:0 0 10px;}
    .banner h1::after{display:none;}
    .banner a{margin-top:30px;display:inline-block}
    .banner a:first-child{margin-right:20px}
    .banner .row{align-items:center;}
.container-fluid {
    max-width: 1500px;padding:0 30px
}
.quran-logo {
    width: auto;
}
.video-section {
    padding: 0 30px 50px;
}
    .video-section span {
        color: #886236;display:block;font-size:14px;font-weight:500;text-align:right;
    }
    h1::after, .banner.bottom p:first-child::after {
        display: block;
        content: "";
        height: 1px;
        width: 200px;
        background: #e5c57c;margin:15px auto;
    }
    .grey-row {
        background: #f9fafb;
        border-top: 1px solid #ebebeb;
    }
        .grey-row h3 {
            color: #218c74;
            font-size: 16px;
            font-family: 'Lato-Semibold';
            margin-top: 20px;
            display: block;position:relative;
        }
    .grey-row p::after{content:"";display:block;clear:both}
    .grey-row p {
        color: #7f8c8d;
        font-size: 12px;
        text-align: justify;
    }
        .grey-row a {
            color: #905625;
            font-size: 11px;
            font-family: 'Lato-Semibold';
            text-decoration: underline;
            float: left;
        }
.grey-row .col-auto{max-width:30%;}
.grey-row img{max-width:100%;}
.col.col-left, .col.col-right {
    max-width: 35%
}
.LangChanger{margin-left:200px}
.col.col-right ul, .col.col-left ul{text-align:right;}
.col.col-left ul{padding-right:0}
.col.col-left h3 {
    text-align: left;padding-right:0;padding-left:30px;
}
    .col.col-left p {
    padding-left:30px;padding-right:0;
    }
.col.col-right h3 {
    text-align: right
}
h3::after {
    content: "";
    display: block;
    height: 2px;
    width: 25px;
    background: #00BB9C;
    position: absolute;
    right: -10px;
    top: calc(50% - 1px);
}h3::before {
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #00BB9C;
    display: block;
    position: absolute;
    right: -20px;
    top: calc(50% - 5px);
}
 .col.col-left h3::after{right:auto;left:-10px;}
 .col.col-left h3::before{right:auto;left:-20px;}
.QuranNav{font-size:1rem}
.FooterContainer{padding-top:50px !important;}
.FooterBody ul, .FooterBody ol, .footer-head, .FooterContentRight{text-align:right}
.FooterInfo{position:static}
.banner.bottom {
    background: #A77749;color:#FFF;
}
    .banner.bottom p{color:#FFF;}
        .banner.bottom p:first-child {
            margin-bottom: 0;
            padding: 30px 0 0
        }
.visible-sm{text-align:center;color:#000;padding:15px 0 0;display:none;}
    .visible-sm i{font-size:20px;}
    .banner.bottom .col-12 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align:center;
    }
    .grey-row .col-left ul + a{margin-left:30px;}
    .banner.bottom a{margin-top:10px;margin-bottom:10px;}
    
    .policy-content h3{text-align:right}
    .policy-content h3::before, .policy-content h3::after{display:none;}
    @media (max-width:991px) {
        .banner .col.img, .grey-row, .FooterContainer {
        /*display: none;*/
    }
    .col.img + div{width:100%;text-align:center;padding:20px}
    .banner h1, .banner p {
        max-width: 100%;text-align:center
    }
    .banner{background-size:cover;}
    .video-section .col-md-8, .video-section .col-md-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    header{text-align:center}
    .banner a {
        margin-top: 10px;
    }
    .banner a:first-child {
        margin-right: 0;
    }
    header img:last-child {
        display: none
    }
        .visible-sm{display:block}
}
@media (max-width:767px) {
    .banner h1{font-size:30px;}
    .banner p{font-size:16px}

}
@media (max-width:400px) {
    .QuranNav {
        flex-wrap:wrap
    }
        .QuranNav > a {
        flex:0 0 100%;text-align:center
        }
}