﻿/************************************************************* Start Import Droid Kufi font-face **************************************************************/
@charset "utf-8";
@import url('droidarabickufi.css'); /*Dont't forget to add droidarabickufi - droidarabickufi fonts*/
/************************************************************* End Import Droid Kufi font-face **************************************************************/


/************************************************************** Start Main Rules **************************************************************/
body {
    font-family: 'Droid Arabic Kufi', sans-serif; /*Online Google Font See https://www.google.com/fonts/earlyaccess*/
}

.clear { /*Fix Float Problem*/
    clear: both;
}
/************************************************************** End Main Rules **************************************************************/

/************************************************************* Start Overwrite Styles to bootstrap **************************************************************/
.navbar-inverse {
    border-radius: 0;
}

    .navbar-inverse .navbar-nav > li > a:hover {
        color: #ffff00;
    }

.navbar-nav {
    width: 100%;
    text-align: center;
}

    .navbar-nav > li {
        float: none;
        display: inline-block;
    }

        .navbar-nav > li:hover {
            background-color: #383737;
        }


/************************************************************* End Overwrite Styles to bootstrap **************************************************************/


/************************************************************* Start Header **************************************************************/
header {
    padding: 0;
    margin: 0;
}

    header .top-bar {
        min-height: 40px;
        background-color: #a00000;
        border-bottom: 1px solid #FFF;
    }

        header .top-bar .bank-account h3 {
            margin: 0;
            padding: 0;
            font-size: 1em;
            color: #FFF;
            line-height: 40px;
        }

            header .top-bar .bank-account h3 span {
                color: #ffff00;
                padding-right: 5px;
            }

        header .top-bar .contact {
        }

            header .top-bar .contact .contact-item {
                display: inline-block;
            }

                header .top-bar .contact .contact-item h3 {
                    padding: 0;
                    margin: 0;
                    color: #FFF;
                    line-height: 40px;
                    font-size: 1em;
                }

                    header .top-bar .contact .contact-item h3 span {
                        color: #ffff00;
                        padding-right: 5px;
                    }

    header .title-logo {
        min-height: 150px;
        padding: 0px;
        background: rgba(255,255,255,1);
        background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
        background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
        background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
        background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
        background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1 );
    }

        header .title-logo .title {
            padding: 0;
            margin: 0;
            padding-right: 138px;
        }

            header .title-logo .title h1 {
                padding: 0;
                margin: 0;
                font-weight: bolder;
                text-shadow: 0px 6px 4px rgba(150, 150, 150, 1);
                margin-top: 35px;
            }

            header .title-logo .title h2 {
                padding: 0;
                margin: 0;
                color: #B70000;
                font-weight: bolder;
                margin-top: 40px;
            }

        header .title-logo .logo {
            width: 200px;
            height: 170px;
            margin-top: 10px;
            margin-right: 80px;
            margin-bottom: 10px;
        }

            header .title-logo .logo img {

                border-radius: 5px;
            }
#SocialIcon            
            {
                border-radius: 5px;
            }            
.navbar
{
    margin-bottom: 0px;
    }
.news
{
    font-size: 14px;
    background: rgba(255, 238, 114, 0.1);
    color: #BB0000;
    margin-top: 1px;
    margin-bottom: 10px;
    padding: 12px;
}
.news a
{
    color: #FF0000;
    text-decoration: none;
}
.news a:hover
{
    color: green;
    text-decoration:none;
    }    
/************************************************************* End Header **************************************************************/

/************************************************************* Start Content **************************************************************/
.krar {
    display: block;
    padding-top: 15px;
    text-align: center;
    font-weight: bold;
    color: #950000;
}

.krar1 {
    display: block;
    padding-top: 0px;
    text-align: center;
    font-weight: bold;
    color: #005500;
}

.text {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    line-height: 40px;
}

.text1 {
    font-size: 16px;
    line-height: 40px;
    margin: 0px;
    padding: 0px;
}

.text2 {
    font-size: 14px;
    line-height: 30px;
    text-align:justify;
    margin: 0px;
    padding: 0px;
}

.president {
    display: block;
    padding-top: 15px;
    text-align: left;
    font-weight: bold;
    line-height: 30px;
    color: #AE0000;
}

.naeb {
    display: block;
    padding-top: 15px;
    text-align: left;
    color: #AE0000;
}

.title1
{
    text-align: center;
    padding: 0;
    margin: 0;
    font-weight: bold;
    color: #950000;
}

.title2
{
    font-size: 16px;
    line-height:30px;
    text-align: right;
    padding: 0;
    margin: 0;
    font-weight: bold;
    color: #950000;
}

.title3
{
    font-size: 16px;
    line-height: 30px;
    text-align: right;
    padding: 0;
    margin: 0;
    font-weight: bold;
    color: #999999;
}

.title4
{
    font-size: 14px;
    line-height: 30px;
    text-align: right;
    padding: 0;
    margin: 0;
    color: #005500;
}
.vision {
    margin-right: 50px;
}

.imglogo {
    width: 200px;
    height: 90px;
    margin-right: 334px;
    margin-top: 4px;
}

.odd {
    color: #AE0000;
}

.even {
    color: #00910E;
}

/************************************************************* End Content **************************************************************/


/************************************************************* Start Footer **************************************************************/
footer {
    min-height: 40px;
    background-color: #2E2E2E;
    padding: 25px;
    margin-top: 15px;
}


    footer h3 {
        color: #C0C0C0;
        font-size: 1em;
        padding: 0;
        margin: 0;
    }


        footer h3 span {
            display: block;
            padding-top: 15px;
        }
/************************************************************* End Footer **************************************************************/

/************************************************************* Start Media Query **************************************************************/
@media (max-width:768px) {
    .navbar-nav > li {
        display: block;
        margin: 0;
    }

    .navbar-nav li a {
        display: block;
        text-align: right;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

        .navbar-collapse.collapse.in {
            display: block !important;
        }

    .navbar-header .collapse, .navbar-toggle {
        display: block !important;
    }

    .navbar-header {
        float: none;
    }
}
/********** small screens *****/
@media (min-width:768px) and (max-width:991px) {
    .navbar-nav > li {
        display: block;
        margin: 0;
    }

    .navbar-nav li a {
        display: block;
        text-align: right;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

        .navbar-collapse.collapse.in {
            display: block !important;
        }

    .navbar-header .collapse, .navbar-toggle {
        display: block !important;
    }

    .navbar-header {
        float: none;
    }
}
/********** medium screens *****/
@media (min-width:992px) and (max-width:1199px) {
    .navbar-nav > li {
        display: block;
        margin: 0;
    }

    .navbar-nav li a {
        display: block;
        text-align: right;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

        .navbar-collapse.collapse.in {
            display: block !important;
        }

    .navbar-header .collapse, .navbar-toggle {
        display: block !important;
    }

    .navbar-header {
        float: none;
    }

    header .title-logo {
    }

        header .title-logo .title {
            float: none;
        }

            header .title-logo .title h1 {
            }

        header .title-logo .logo {
            float: none;
        }

            header .title-logo .logo img {
                width: 10px;
            }
}
/********** large screens *****/
@media (min-width:1200px) {
}
/************************************************************* End Media Query **************************************************************/
html {
    overflow: hidden;
}

html, body {
    min-height: 100%;
    height: 100%;
    position: relative;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
}



#complaints .col-md-6 {
    text-align: center;
    margin-top: 50px;
    font-size: 24px;
}

#complaints .col-md-6 p {
    margin: 20px;
}
