/* *************** AMIRI FONT ******************* */


/* GOOGLE FONTS */


/* arabic */


/* @font-face {
    font-family: "Amiri";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Amiri/Amiri-Regular.ttf") format("ttf");
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
        U+FB50-FDFF, U+FE80-FEFC;
}
/* latin-ext */


/* @font-face {
    font-family: "Amiri";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Amiri/Amiri-Bold.ttf") format("ttf");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} */


/* latin */


/* @font-face {
    font-family: "Amiri";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Amiri/Amiri-BoldItalic.ttf") format("ttf");

    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
} */

*/
/* *************** TAB ICON ******************** */

.contact-info {
    background-color: white !important;
    width: 15px !important;
    height: 15px !important;
}


/* *************** GENERALS ******************* */

body {
    font-family: "Cairo", sans-serif;
    background: url("../images/pattern.png") repeat;
    overflow-x: hidden;
}


/* ******** SCROLL BARS ******* */

.modal::-webkit-scrollbar,
.right-box .topics-container::-webkit-scrollbar,
.subject-content::-webkit-scrollbar {
    width: 5px;
    /* width of the entire scrollbar */
}

.modal::-webkit-scrollbar-track,
.right-box .topics-container::-webkit-scrollbar-track,
.subject-content::-webkit-scrollbar-track {
    background: #a48020;
    /* color of the tracking area */
}

.modal::-webkit-scrollbar-thumb,
.right-box .topics-container::-webkit-scrollbar-thumb,
.subject-content::-webkit-scrollbar-thumb {
    background-color: #58783c;
    /* color of the scroll thumb */
    /* roundness of the scroll thumb */
    border: 1px solid #a48020;
    /* creates padding around scroll thumb */
}


/* ******************* NAVBAR ***************** */

.navbar-default {
    background-color: #58783c;
    font-weight: bold;
    border: none;
    border-radius: 0;
    border-bottom: 4px solid #a48020;
    margin-bottom: 0;
}

.navbar-default .navbar-nav>li {
    color: #fff;
    transition: all ease-in-out 0.3s;
}

.navbar-default .navbar-nav>li.active a {
    border-radius: 6px;
    background: transparent;
    padding: 5px 10px;
    color: #fff;
    border: 1px solid #ccc;
    margin-top: 8px;
    box-shadow: 2px 3px 0px 0px #ccc;
}

.navbar-default .supervisor {
    background: #58783c;
    color: rgb(255, 255, 255);
    position: absolute;
    z-index: 9999;
    width: 130px;
    padding: 5px 10px;
    border-bottom: 4px solid #a48020;
}

.hide-menue {
    display: none;
}

.navbar-default .supervisor li {
    margin-bottom: 15px;
}

.navbar-default .supervisor li:hover a {
    color: #232323;
}

.navbar-default .supervisor li a {
    text-decoration: none;
    transition: all ease-in-out 0.3s;
    color: #fff;
}

.navbar-default .navbar-nav>li .supervisor-parent:hover .supervisor {
    display: block;
    color: #fff;
}

.navbar-default .navbar-nav>li:hover {
    cursor: pointer;
    color: #232323;
}

.navbar-default .navbar-nav>li>a {
    color: #fff;
    transition: all ease 0.3s;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #e8b326;
}

.navbar-default .navbar-right li:hover {
    color: #fff;
}

.navbar-default .navbar-right li:hover i,
.fa-sign-out {
    border: 2px solid #e8b326;
}

.navbar-default .navbar-right li i,
.fa-sign-out {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    text-align: center;
    line-height: 20px;
    margin-left: 5px;
}

.navbar-default .social-links ul {
    border-left: 1px solid #fff;
    padding-left: 10px;
}

.navbar-default .social-links li {
    border: none;
}

.navbar-default .social-links li a {
    color: #fff;
    border: none;
}

.navbar-default .social-links li a i {
    border: none;
    transition: all ease-in-out 0.3s;
    font-size: 16px;
}

.navbar-default .social-links li a i:hover {
    border: 0;
}

.navbar-default .social-links li a:hover {
    border: 0;
}

.navbar-default .social-links li:hover i {
    border: 0;
    color: #a48020;
}


/* ******************* HEADER SECTION ***************** */

.header {
    height: 180px;
    background: url("../images/header-bg.png") 37% 92%;
}

.header .container {
    display: flex;
    align-items: baseline;
}

.header .nosrah-logo {
    margin-top: 10px;
}

.header .nosrah-logo img {
    width: 320px;
    height: 105px;
}

.header .hazem-name {
    margin-top: 20px;
    margin-top: 50px;
}

.header .hazem-name img {
    width: 270;
    height: 100px;
    float: left;
}


/* ******************* MIDLLE NAVBAR SECTION ***************** */

.mid-nav {
    -webkit-box-shadow: 0px -4px 3px rgb(162 159 159 / 75%);
    -moz-box-shadow: 0px -4px 3px rgb(162 159 159 / 75%);
    box-shadow: 0px -4px 3px rgb(162 159 159 / 75%);
}

.mid-nav .navbar-nav {
    background: #f6f6f6;
    margin-top: 5px;
    margin-bottom: 0;
}

.mid-nav .navbar-default {
    background: #f6f6f6;
}

.mid-nav .navbar-default .navbar-nav>li {
    font-weight: bold;
    font-size: 18px;
    padding-right: 5px;
}

.mid-nav .navbar-default .navbar-nav>li>a {
    color: #58783c;
    transition: all ease 0.3s;
    font-weight: bold;
}

.mid-nav .navbar-default .navbar-nav>li>a:hover {
    color: #a48020;
}

.mid-nav .navbar-default .navbar-right {
    display: flex;
}

.mid-nav .navbar-default .navbar-right form {
    padding-top: 10px;
    margin-bottom: -5px;
}

.mid-nav .navbar-default .navbar-right form .form-group {
    display: flex;
}

.mid-nav .navbar-default .navbar-right form input {
    display: inline;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border: 1px solid #e2e0e0;
    border-left: 0;
}

.mid-nav .navbar-default .navbar-right form a {
    border: none;
    border-radius: 0;
    background: #a48020;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    color: #fff;
    font-size: 16px;
    padding-top: 8px;
    padding-right: 20px;
    padding-left: 20px;
}


/* ******************* TREE SECTION ***************** */

.main {
    margin-top: 20px;
    margin-bottom: 30px;
}

.main>.row {
    padding-bottom: 0;
}

.main .right-box {
    background: #f4f4f4;
    border: 3px solid #a48020;
    border-radius: 13px;
    padding-top: 20px;
    margin-top: 10px;
    padding-right: 8px;
    height: 745px;
    overflow-y: hidden;
}

.main .right-box #searchTree {
    margin-bottom: 15px;
    border: 2px solid #a48020;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}

.main .right-box .fa.fa-search {
    padding: 10px;
    background: #a48020;
    margin-bottom: 15px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: #fff;
}

.main .right-box .topics-container {
    height: 84%;
    overflow-y: auto;
    padding-bottom: 20px;
}

.main .right-box .topics-container #tree-table tbody tr:hover {
    cursor: pointer;
}

.main .right-box table tbody tr td {
    border-bottom: 1px solid #9e9e9e;
    font-weight: 600;
}

.main .right-box .close-all,
.main .right-box .open-all {
    border: 1px solid #a48020;
    padding: 3px 7px;
    color: #a48123;
    margin-left: 10px;
    margin-bottom: 15px;
}

.main .right-box .close-all:focus,
.main .right-box .open-all:focus {
    outline: none;
}

.main .leftbox {
    height: 745px;
}

.main .leftbox .subject-header {
    font-weight: bold;
    padding: 6px 14px;
    font-weight: bold;
    margin-top: 14px;
    background-color: #a48020;
    border-radius: 7px;
}

.main .leftbox .subject-header h2 {
    color: #a48020;
    padding: 5px 20px;
    border-radius: 5px;
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 24px;
}

.main .leftbox .subject-share ul {
    float: left;
    margin-top: 20px;
}

.main .leftbox .subject-share ul li {
    transition: ease-in-out all 0.3s;
    float: left;
    margin-left: 5px;
    width: 35px;
    height: 35px;
    background-color: #58783c;
    text-align: center;
}

.main .leftbox .subject-share ul li:hover {
    background: #a48020;
    cursor: pointer;
}

.main .leftbox .subject-share ul li a .fa {
    color: #fff;
    line-height: 35px;
}

.main .leftbox .subject-content {
    margin-top: 10px;
    height: 745px;
    overflow-y: scroll;
    text-align: justify;
    padding-left: 50px;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 3px 15px 3px #ccc;
    border-radius: 10px;
    position: relative;
    padding-bottom: 0;
}

.main .leftbox .subject-content .subject-content-share {}

.main .leftbox .subject-content .subject-content-text {
    padding-bottom: 60px;
    padding-top: 20px;
    font-size: 14px;
    min-height: 81%;
}

.main .leftbox .subject-content .subject-content-text p:first-of-type {
    margin-top: 60px;
}

.main .leftbox .subject-content .subject-content-controls {
    position: sticky;
    bottom: 0px;
    background: #fff;
    padding-bottom: 5px;
}

.main .leftbox .subject-content .no-text {
    margin-top: 140px;
    font-weight: 600;
    font-size: 22px;
    color: #a48020;
}

.main .leftbox .full-screen {
    color: #fff;
    float: left;
    left: 20px;
    position: relative;
    background: #a48020;
    border-radius: 11px;
    border: 4px solid #a48020;
    transition: all ease-in-out 0.3s;
    font-size: 18px;
}

.main .leftbox .font-size-box {
    color: #fff;
    float: left;
    left: 20px;
    position: relative;
    background: #a48020;
    border-radius: 11px;
    border: 4px solid #a48020;
    transition: all ease-in-out 0.3s;
    font-size: 18px;
}

.inc-font-size,
.dec-font-size {
    background: #a48020;
    border: 2px solid #59793d;
    text-align: center;
    font-size: 12px;
    border: none;
}

.inc-font-size:hover,
.dec-font-size:hover {
    background: none;
}

.inc-font-size:focus,
.inc-font-size:active,
.dec-font-size:focus,
.dec-font-size:active {
    background: none;
    border: none;
    outline: none;
}

.inc-font-size:hover i,
.dec-font-size:hover i {
    color: #3c522a;
}

.main .leftbox .font-size-box .inc-font-size i {
    text-align: center;
}

.main .leftbox .font-size-box .font-size-text {
    height: 52%;
    background: #fff;
    border-radius: 9px;
    color: #a48020;
    font-family: 'Amiri';
    font-size: 16px;
    background: #fff;
    padding: 5px;
    border: none;
}


/* .glyphicon-chevron-left:before {
    content: '';
} */

.main .leftbox #rateYo {
    margin-top: 10px;
}

.main .leftbox .subject-options .full-screen:hover {
    background: #455d31;
}

.main .leftbox .subject-options {
    margin-top: 45px;
    padding-right: 15px;
}

.main .leftbox .subject-options ul li {
    float: right;
    margin-left: 10px;
    text-align: center;
}

.main .leftbox .subject-options ul li:hover div {
    background: #58783c;
    cursor: pointer;
}

.main .leftbox .subject-options ul li div {
    background: #a48020;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    transition: ease-in-out all 0.3s;
}

.main .leftbox .subject-options ul li .fa {
    color: #fff;
    line-height: 55px;
    display: inline-block;
    font-size: 20px;
}

.main .leftbox .subject-options ul li span {
    color: black;
    font-weight: bold;
    display: block;
    margin-top: 7px;
}

.main .add-comment-form .success-message {
    border: 1px solid #4dbb60;
    margin-top: 10px;
}

.modal.open {
    padding-right: 5px;
}

.videomodal {
    width: 100%;
    height: 100%;
}

.videomodal .modal-header h4,
.bookmodal .modal-header h4 {
    border-bottom: none;
    color: #000;
    text-decoration: none;
    font-size: 22px;
    margin: 0;
}

.videomodal .modal-dialog {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    padding-right: 5px;
}

.videomodal .modal-content,
.bookmodal .modal-content {
    padding: 20px;
    background: #fcfcfc;
}

.modal-header .close {
    margin-top: -35px;
    background: #58783c;
    color: #fcfcfc;
    opacity: 1;
    padding: 2px 5px;
    border-radius: 4px;
}

.videomodal .modal-content video {
    width: 60%;
    display: block;
    border: 3px solid #a48020;
    margin: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}

.videomodal .video_modal_footer a {
    color: #a48020;
    font-weight: bold;
    transition: all ease-in-out 0.3s;
    text-decoration: none;
    margin-left: 10px;
}

.videomodal .video_modal_footer a:hover {
    color: #85c931;
}

#shareOptions .modal-dialog .modal-content .modal-body .share-options-list {
    display: flex;
    justify-content: space-around;
}

#shareOptions .modal-dialog .modal-content .modal-body .share-options-list li input[type="checkbox"] {
    margin: auto;
}


/* ******************* COMMENTS SECTION *************** */

.comments {
    margin-top: 50px;
}

.comments-number {
    font-weight: lighter;
    font-size: 18px;
    color: #232323;
}

.comments-number i {
    padding-left: 5px;
}

.comments>ul {
    padding-right: 0;
    border-radius: 10px;
    list-style: none;
    box-shadow: 1px 1px 20px 0 #465c2c;
    overflow: hidden;
}

.comments .one-comment {
    background: #58783c;
    color: #fff;
    padding: 15px 15px 25px 15px;
    border-bottom: 1px solid #fff;
}

.comments ul li:last-child .one-comment {
    border-bottom: 8px solid #ab831a;
}

.comments .one-comment img {
    max-width: 100%;
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: 10px;
    margin-bottom: 5px;
    background: rgb(164, 128, 32);
    background: linear-gradient( 208deg, rgba(164, 128, 32, 1) 12%, rgba(157, 215, 88, 1) 83%, rgba(200, 255, 136, 1) 100%);
}

.comments .one-comment .comment-user-name {
    font-weight: 600;
    display: inline-block;
}

.comments .one-comment .comment-user-name>span {
    color: #e8b326;
    font-size: 14px;
    font-weight: lighter;
    padding-right: 5px;
}

.comments .one-comment .comment-text,
.reply-text {
    padding: 10px;
    background: #4e6937;
    border-radius: 10px;
    border: 1px solid #455d31;
    font-size: 16px;
    line-height: 23px;
    padding-bottom: 30px;
}

.comments .one-comment .comment-text .comment {
    padding-right: 75px;
}

.reply-text {
    border: 1px solid #3c522a;
    padding-bottom: 45px;
}

.comments .one-comment .comment-date {
    float: left;
    color: #e8b326;
    font-size: 14px;
    letter-spacing: 1px;
    padding-left: 7px;
}

.comments .one-comment .comment-replies {
    margin-right: 37px;
    padding-top: 4px;
    background: #455d31;
    width: 95%;
    padding-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #3c522a;
    margin-bottom: 10px;
    margin-bottom: 20px;
}

.comments .one-comment .comment-replies li {
    padding: 10px 10px 5px 10px;
    border-bottom: 1px solid #fff;
}

.comments .one-comment .comment-replies li:last-child {
    border-bottom: none;
}

.comments .one-comment .comment-replies .reply-date {
    float: left;
    float: left;
    margin-top: 15px;
    color: #e8b326;
    font-size: 14px;
    letter-spacing: 1px;
    padding-left: 7px;
}

.comments .no-comments {
    display: block;
    padding: 15px;
    background: #fefefe;
    border-radius: 10px;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 0 #bfbfbf;
    margin-bottom: 20px;
    font-size: 21px;
}


/* ****************** ADD COMMENT PART ******************* */

.add-comment-form {
    margin-top: 20px;
}

.add-comment-form textarea {
    border-radius: 10px;
    border: 3px solid rgb(171, 131, 26);
    padding: 15px;
}

.add-comment-form textarea:focus {
    border-color: #58783c;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(87, 167, 76, 0.075), 0 0 8px rgba(53, 156, 84, 0.6);
}

.add-comment-form .btn {
    background: #a48020;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    border-radius: 10px;
    transition: all ease-in-out 0.3s;
    border: 1px solid #a48020;
    float: left;
}

.add-comment-form .btn:hover {
    background: #58783c;
}

.add-comment-form .btn .fa {
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.add-comment-form .comment-login {
    text-decoration: none;
    color: #b9932c;
    font-weight: 700;
}


/* ****************** REPLIES PART ******************* */

.one-comment .btn-default {
    color: #fff;
    background: #455d31;
    line-height: 6px;
    border-radius: 10px;
    border: 2px solid #b9932c;
    letter-spacing: 2px;
    padding: 8px 20px 12px 20px;
    transition: all ease-in-out 0.3s;
    margin-bottom: 10px;
}

.one-comment .btn-default:hover {
    background: #b9932c;
}

.one-comment #reply-input {
    background: #4e6937;
    border: 2px solid #ab831a;
    border-radius: 10px;
    margin-bottom: 10px;
}

.one-comment #reply-input:focus {
    background: #fff;
    box-shadow: inset 0 1px 1px rgba(87, 167, 76, 0.075), 0 0 8px rgba(53, 156, 84, 0.6);
}

.one-comment .reply-form textarea:focus {
    border-color: #58783c;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(87, 167, 76, 0.075), 0 0 8px rgba(53, 156, 84, 0.6);
}


/* ******************* SHARE CONTENT SECTION ********** */

.share-section {
    border-bottom: 4px solid #a48020;
    padding: 50px 0;
    overflow: hidden;
}

.share-section .subject-header h2 {
    font-size: 30px;
    padding: 13px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 1px 1px 10px 0 #bfbfbf;
}

.share-section .leftbox .subject-content {
    margin-top: 10px;
}

.share-section .leftbox .full-screen {
    margin-top: 15px;
    margin-bottom: 50px;
}

.share-section .leftbox .leada,
.share-section .leftbox label {
    font-weight: 600;
    margin-bottom: 0;
    color: #b9932c;
}

.share-section .leftbox .video-player video {
    width: 60%;
    border: 4px solid #a48020;
    border-radius: 10px;
    margin-top: 15px;
}

.share-section .no-book {
    color: #b79230;
    padding-left: 5px;
    padding-right: 5px;
}

.share-section .comments {
    margin-top: 0;
}

.share-section .comments .comments-header {
    margin-top: 40px;
}


/* ******************* SLIDER SECTION ***************** */

.sliderParent {
    position: relative;
}

.sliderParent .event-happening {
    height: 212px;
    border-radius: 10px;
    border: 4px solid #a48020;
    background: url("../../images/podback.png") no-repeat 30% 53%;
    /* filter: blur(1px);
    -webkit-filter: blur(1px);  */
    display: flex;
    background-size: cover;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.sliderParent .event-happening i.left {
    margin: auto;
    font-size: 50px;
    color: #fff;
    transform: rotate(-80deg);
    color: #4d6933;
    filter: blur(none);
    -webkit-filter: blur(none);
}

.sliderParent .event-happening i.right {
    margin: auto;
    font-size: 50px;
    color: #fff;
    transform: rotate(80deg);
    color: #4d6933;
    filter: blur(none);
    -webkit-filter: blur(none);
}

.sliderParent .event-happening .mobasher .badge {
    background: #4d6933;
    margin-top: -25px;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 18px;
    border: 2px solid #4d6933;
}

.slider {
    border: 4px solid #a48020;
    border-radius: 10px;
}

.slider .item {
    height: 205px;
}

.slider .item img {
    width: 100%;
    border-radius: 6px;
    height: 100%;
}


/* ******************* LOGOS SECTION ***************** */

.logos {
    border-top: 4px solid #a48020;
    margin-top: 45px;
    padding-top: 30px;
    padding-bottom: 30px;
    background: url("../images/logos/bg.jpg");
}

.logos .share,
.logos .happy {
    margin-top: 40px;
    padding: 30px 0;
}

.logos .share ul li,
.logos .happy ul li {
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    transition: all ease-in-out 0.3s;
}

.logos .share ul li:nth-child(2),
.logos .happy ul li:nth-child(2) {
    border-top: 3px solid #748e5c;
    border-bottom: 3px solid #748e5c;
}

.logos .share ul li a,
.logos .happy ul li a {
    color: #fff;
    text-decoration: none;
}

.logos .share ul li:hover a,
.logos .happy ul li:hover a {
    color: #a48020;
}

.logos .top-img {
    margin-bottom: 15px;
}

.logos .top-img img {
    width: 72%;
    height: 75px;
    margin: auto;
}

.logos .logos-imgs {
    border-right: 3px solid #748e5c;
    border-left: 3px solid #748e5c;
    padding: 20px 20px;
}

.logos .logos-imgs .center-imgs img {
    margin: 5px auto;
}


/* ******************* SIDE BAR ***************** */


/* tr[data-level="2"] {
    color: #f12;
    margin-right: 30px;
    padding-right: 20px;
} */


/*
tr td[data-leaf="0"]:hover {
    pointer-events: none;
    cursor: pointer;
}

tr td[data-leaf="0"] .glyphicon-chevron-left:hover {
    pointer-events: cursor;
} */


/* ******************* Infographs ********************** */

.infographs-slider {
    padding: 50px 0 0 0;
}

.infographs-slider .col-md-4 {
    margin-bottom: 30px;
}

.infographs-slider .one-info {
    border: 2px solid #b9932c;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.infographs-slider .one-info img {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 100%;
    height: 450px;
    cursor: pointer;
    transition: all ease-in-out 0.5s;
}

.infographs-slider .one-info:hover img {
    transform: scale(1.1);
}

.infographs-slider .caption {
    background-color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 10px;
    font-size: 18px;
    color: #b79230;
    font-weight: 500;
    box-shadow: 0 1px 10px #ddd;
}


/* ******************* CONTACT US PAGE ***************** */

.top-panner {
    background: url("../images/serag.png") no-repeat 50% 75%;
    background-size: cover;
    color: #fff;
}

.top-panner .header-para {
    margin-bottom: 40px;
}

.top-panner .inner-title {
    padding: 0;
    background: rgba(0, 0, 0, 0.75);
    padding: 60px 0;
}

.top-panner form .form-group .form-control {
    color: #58783c;
    font-weight: 700;
}

.top-panner form .form-group .btn {
    background: #58783c;
    border: 1px solid #58783c;
    font-weight: 700;
    transition: all ease-in-out 0.3s;
}

.top-panner form .form-group .btn:hover {
    background: #64a064;
    border: 1px solid #58783c;
}

.top-panner .inner-title .contact-info ul li {
    color: #f12;
    font-size: 16px;
    font-weight: 700;
    color: #58783c;
}

.top-panner .inner-title .contact-info .list-group .list-group-item {
    border: 1px solid #58783c;
}

.top-panner .inner-title ul li .left-span {
    float: left;
}


/* ******************* SUPERVISOR WORD **************** */

.supervisor-word {
    padding: 0;
    background: url("../images/txt3.png");
}

.supervisor-word .word-wrapper {
    background: rgba(252, 252, 252, 0.555);
    padding: 80px 0;
    color: #111;
}

.supervisor-word .word-wrapper .lead {
    font-size: 20px;
    font-weight: 400;
}

.supervisor-word .signiture {
    float: left;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
}


/* ******************* SUPERVISOR  **************** */

.supervisor {
    padding: 80px 0 0 0;
    /* background: rgb(228, 227, 227); */
    background: url("../images/txt3.png");
}

.supervisor h1 {
    font-weight: bold;
}

.supervisor .sector {
    background-color: #f8f8f8;
    border-radius: 20px;
    padding: 10px 20px;
    box-shadow: 0 1px 10px 0 #ccc;
    transition: all ease-in-out 0.3s;
    border: 1px solid #ddd;
}

.supervisor .sector:hover {
    box-shadow: 3px 3px 26px 0 #ccc;
}

.supervisor .sector h2 {
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700;
}

.supervisor .sector p {
    font-size: 16px;
    font-weight: 600;
}

.supervisor .sector ul li {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 35px;
    color: #232323;
}


/* ******************* ABOUT US *********************** */

.aboutus {
    padding: 80px 0 0;
    background: url("../images/txt3.png");
}

.aboutus h1 {
    font-weight: bold;
}

.aboutus .sector-one {
    padding: 20px;
    background-color: #4f5c0e;
    color: #fff;
}

.aboutus .sector-two {
    padding: 20px;
    background-color: #6b9943;
    color: #fff;
}

.aboutus .sector-three {
    padding: 20px;
    background-color: #77cb2d;
    color: #fff;
    margin-top: 25px;
}

.aboutus .sector-three h2 {
    margin-top: 20px;
    font-weight: 600;
}

.aboutus .sector-three ol li {
    font-size: 18px;
    margin-bottom: 10px;
}


/* ******************* LOGIN SECTION ****************** */

.site-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url("../../images/login.png");
    overflow: hidden;
}

.site-login .form-container {
    background-color: #dfdfdf;
    padding: 40px 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.site-login h1 {
    color: #b79230;
    margin-bottom: 30px;
}

.site-login label {
    color: #b79230;
}

.site-login button.btn-default {
    background-color: #b79230;
    border: 0;
    width: 100%;
    color: #fff;
    transition: all ease-in-out 0.3s;
    margin: 20px 0;
}

.site-login button.btn-default:hover {
    background-color: #8a6e22;
    color: #fff;
}

.site-login button.btn-default:focus {
    outline: 0;
}

.site-login .dont-have-account p {
    float: left;
    font-size: 15px;
}

.site-login .dont-have-account {}

.site-login .dont-have-account p a {
    color: #34702b;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.notifications {
    color: #a94442;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    border-radius: 10px;
    padding: 10px 10px 0 10px;
    box-shadow: 0 3px 10px #f2dede;
    transition: transform ease-in-out 0.3s;
    text-align: center;
    align-items: center;
    margin-bottom: 15px;
    opacity: 0;
    transition: opacity ease-in-out 0.3s;
}

.notifications.show {
    opacity: 1;
}

.notifications.logeddin {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    opacity: 1;
}

.go-home {
    margin-top: 30px;
}

.go-home p {
    text-align: center;
    opacity: 0.5;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

.go-home p a {
    text-decoration: none;
    color: #fff;
    background-color: #34702b;
    padding: 2px 25px;
    border-radius: 5px;
    border: 2px solid #b79230;
}

.go-home p:hover {
    opacity: 1;
}


/* ******************* REGISTER DIALOG **************** */

#RegModal {}

.site-modal-dialog {
    width: 360px;
}

#RegModal .modal-header {
    background-color: #34702b;
    color: #fff;
    font-weight: 600;
}

#RegModal .modal-header .close {
    background: #fff;
    border-radius: 3px;
    padding: 0px 6px;
}

#RegModal .modal-header .close:focus {
    outline: 0;
}

#RegModal .modal-header h4 {
    margin: 0;
}

#RegModal .modal-content {
    border-bottom: 6px solid #35702b;
}

#RegModal .modal-content .form-group {
    margin-bottom: 10px;
}

#RegModal .modal-content .form-control.country {
    padding: 0 12px;
}

#RegModal .modal-content .btn-default {
    margin: 0;
    margin-top: 10px;
}

#RegModal .modal-content .modal-body .alert-danger {
    display: none;
    transition: all ease-in-out 0.4s;
    padding: 5px 15px;
    margin: 0;
    margin-bottom: 10px;
}

#RegModal .alert-danger.show {
    opacity: 1;
}

#RegModal .modal-content .modal-body .alert-success {
    display: none;
    transition: all ease-in-out 0.4s;
    padding: 5px 15px;
    margin: 0;
    margin-bottom: 10px;
}

#RegModal .alert-success.show {
    opacity: 1;
}

#regModal .form-group span {
    font-size: 10px;
    font-weight: 600;
    margin-top: 3px;
    display: block;
}


/* ******************* FOOTER SECTION ***************** */

footer {
    padding: 10px;
    background: #496431;
    font-weight: bold;
    color: #fff;
    border-top: 4px solid #a48020;
}

footer .lead {
    margin-bottom: 0;
    font-size: 18px;
}


/* ************* Comments Modal ***************** */

#commentsModal .modal-footer {
    border-top: 0;
    background-color: #455d31;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #b9932c;
    margin-top: 20px;
    text-align: right;
}

#commentsModal .modal-footer p {
    margin-right: 20px;
}


/* ==================== FONT FAMILY ======================= */

* {
    font-family: "Amiri", serif;
}