/* ============================================================
   CHITTA SAMADHI
   Brand Theme Override for existing Edumart / Bootstrap 3 site

   IMPORTANT:
   Load AFTER bootstrap.css and custom.css
   ============================================================ */

:root {
    --cs-orange: #e75b1c;
    --cs-orange-light: #f36b21;
    --cs-orange-dark: #c94b14;
    --cs-green: #103d2c;
    --cs-green-2: #174b38;
    --cs-green-soft: #2c6250;
    --cs-ivory: #fff5e3;
    --cs-cream: #faecd5;
    --cs-cream-light: #fffaf1;
    --cs-peach: #f8ddc6;
    --cs-peach-light: #fce9d7;
    --cs-border: #e8c9aa;
    --cs-text: #243c31;
    --cs-muted: #6e776f;
    --cs-white: #ffffff;
}


/* ============================================================
   1. GLOBAL
   ============================================================ */

html {
    background: var(--cs-ivory);
}

body {
    background: var(--cs-ivory);
    color: var(--cs-text);
    font-family: 'Roboto', sans-serif;
}

p {
    color: var(--cs-text);
}

a {
    color: var(--cs-orange);
}

    a:hover,
    a:focus {
        color: var(--cs-orange-dark);
        text-decoration: none;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--cs-green);
}

::selection {
    background: var(--cs-orange);
    color: #fff;
}


/* ============================================================
   2. PAGE LOADER
   ============================================================ */

#loading {
    background: var(--cs-ivory);
}

.sk-folding-cube .sk-cube:before {
    background-color: var(--cs-orange);
}


/* ============================================================
   3. TOP HEADER
   ============================================================ */

.header-top {
    background: #103D2C !important;
    color: #F8E4CF !important;
}

    .header-top a {
        color: #F8E4CF !important;
    }

        .header-top a:hover,
        .header-top a:focus,
        .header-top .cs-top-gallery-link a:hover {
            color: #F36B21 !important;
            background: transparent !important;
            text-decoration: none;
        }

    .header-top .fa {
        color: #F36B21;
    }

    .header-top ul.follow-us li a {
        color: #f9d9bd !important;
    }

        .header-top ul.follow-us li a:hover {
            color: #ffffff !important;
        }

    .header-top ul.top-nav li a {
        color: #f4cfb0 !important;
    }

        .header-top ul.top-nav li a:hover {
            color: #ffffff !important;
        }

    .header-top .select2-container--default
    .select2-selection--single {
        background: var(--cs-green-2) !important;
    }

    .header-top .select2-container
    .select2-selection--single
    .select2-selection__rendered {
        color: #ffffff !important;
    }

.select2-container--default
.select2-results__option--highlighted[aria-selected] {
    background: var(--cs-orange) !important;
}


/* ============================================================
   4. MIDDLE HEADER / LOGO / CONTACT
   ============================================================ */

.header-middle {
    background: var(--cs-ivory);
}

    .header-middle .contact ul li {
        color: var(--cs-green);
        border-right-color: var(--cs-border);
    }

        .header-middle .contact ul li span {
            color: var(--cs-muted);
        }

        .header-middle .contact ul li a {
            color: var(--cs-green);
        }

            .header-middle .contact ul li a:hover {
                color: var(--cs-orange);
            }

    .header-middle a.login {
        border-color: var(--cs-orange);
        color: var(--cs-green);
    }

        .header-middle a.login span {
            color: var(--cs-orange);
        }

        .header-middle a.login:hover {
            background: var(--cs-orange);
            border-color: var(--cs-orange);
            color: #fff;
        }

            .header-middle a.login:hover span {
                color: #fff;
            }


/* ============================================================
   5. MAIN NAVIGATION
   ============================================================ */

.navbar-inverse {
    background: var(--cs-green) !important;
}

.navbar-nav > li {
    border-right-color: rgba(255,255,255,.15) !important;
}

.navbar-inverse .navbar-nav > li > a {
    color: #ffffff !important;
}

    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
        background: var(--cs-orange) !important;
        color: #ffffff !important;
    }

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .open > a:hover {
    background: var(--cs-orange) !important;
    color: #ffffff !important;
}

.navbar-inverse .navbar-nav > li > a i {
    color: #f5c49d !important;
}


/* mobile menu */

.navbar-inverse .navbar-toggle {
    border-color: rgba(255,255,255,.5);
}

    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
        background: var(--cs-orange);
    }

    .navbar-inverse .navbar-toggle .icon-bar {
        background: #ffffff;
    }


/* ============================================================
   6. NAV SEARCH
   ============================================================ */

.navbar-form {
    background: var(--cs-green-2) !important;
}

    .navbar-form .form-control {
        color: #ffffff;
        border-bottom-color: rgba(255,255,255,.45) !important;
    }

        .navbar-form .form-control::-webkit-input-placeholder {
            color: #f4d6be;
        }

    .navbar-form .search-btn {
        color: #ffffff;
    }


/* ============================================================
   7. DROPDOWN MENU
   ============================================================ */

.navbar .dropdown-menu {
    background: var(--cs-cream-light);
    border-top: 4px var(--cs-orange) solid;
    box-shadow: 0 8px 20px rgba(16,61,44,.12);
}

    .navbar .dropdown-menu:after {
        border-bottom-color: var(--cs-orange);
    }

    .navbar .dropdown-menu > li > a {
        color: var(--cs-green);
    }

        .navbar .dropdown-menu > li > a:hover,
        .navbar .dropdown-menu > li > a:focus {
            background: var(--cs-orange);
            color: #ffffff;
        }


/* ============================================================
   8. BUTTONS
   ============================================================ */

.btn,
.btn-primary {
    background: var(--cs-orange);
    border-color: var(--cs-orange);
    color: #ffffff;
}

    .btn:hover,
    .btn:focus,
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background: var(--cs-orange-dark) !important;
        border-color: var(--cs-orange-dark) !important;
        color: #ffffff !important;
    }

    .btn.blue {
        background: var(--cs-green);
        border-color: var(--cs-green);
    }

        .btn.blue:hover {
            background: var(--cs-orange);
        }

.btn-success {
    background: var(--cs-green);
    border-color: var(--cs-green);
}

    .btn-success:hover,
    .btn-success:focus {
        background: var(--cs-green-2);
        border-color: var(--cs-green-2);
    }

.btn-info {
    background: var(--cs-orange-light);
    border-color: var(--cs-orange-light);
}

.btn-warning {
    background: var(--cs-orange);
    border-color: var(--cs-orange);
}

.btn.white {
    background: #ffffff;
    color: var(--cs-green);
}

    .btn.white:hover {
        background: var(--cs-orange);
        color: #ffffff;
    }


/* ============================================================
   9. HOME ABOUT / QUICK LINKS
   ============================================================ */

.about {
    background-color: var(--cs-ivory);
}

    .about ul.our-links li.apply-online,
    .about ul.our-links li.prospects,
    .about ul.our-links li.certification,
    .about ul.our-links li.courses {
        background: var(--cs-peach) !important;
        border-right: 1px solid var(--cs-border);
    }

    .about ul.our-links li .detail {
        color: var(--cs-text);
    }

        .about ul.our-links li .detail h3 {
            color: var(--cs-green);
        }

        .about ul.our-links li .detail p {
            color: var(--cs-text);
        }

        .about ul.our-links li .detail a.more,
        .about ul.our-links li.apply-online .detail a.more,
        .about ul.our-links li.prospects .detail a.more,
        .about ul.our-links li.certification .detail a.more,
        .about ul.our-links li.courses .detail a.more {
            background: var(--cs-cream-light);
            border-color: var(--cs-orange);
            color: var(--cs-orange);
        }

            .about ul.our-links li .detail a.more:hover {
                background: var(--cs-orange);
                color: #ffffff;
            }

    .about h2 {
        color: var(--cs-green);
    }

    .about a.know-more {
        color: var(--cs-green);
    }

        .about a.know-more span {
            color: var(--cs-orange);
        }


/* ============================================================
   10. COURSE / DARK HOME SECTION
   ============================================================ */

.our-cources {
    background: var(--cs-green);
}

    .our-cources h2 {
        color: #ffffff;
    }

        .our-cources h2 span {
            color: #f3d7bf;
        }

    .our-cources ul.course-list li .fess-box {
        background: var(--cs-orange);
    }


/* ============================================================
   11. IMPORTANCE / FEATURE SECTION
   ============================================================ */

.our-impotance {
    background: var(--cs-ivory);
}

    .our-impotance ul li {
        border-right-color: var(--cs-border);
    }

        .our-impotance ul li:after {
            background: var(--cs-border);
        }

        .our-impotance ul li h3 {
            color: var(--cs-green);
        }

        .our-impotance ul li p {
            color: var(--cs-muted);
        }


/* ============================================================
   12. WHY CHOOSE / GREEN FEATURE AREA
   ============================================================ */

.why-choose {
    background: var(--cs-green);
}

ul.our-strength li {
    border-right-color: rgba(255,255,255,.25);
}


/* ============================================================
   13. NEWS / CARDS
   ============================================================ */

.news-events {
    background: var(--cs-ivory);
}

    .news-events h2,
    .news-events h2 span {
        color: var(--cs-green);
    }

    .news-events ul li .inner,
    .news-events ul li .cnt-block {
        background: var(--cs-cream-light);
    }

    .news-events ul li .inner {
        border: 1px solid var(--cs-border);
        box-shadow: 0 4px 14px rgba(16,61,44,.08);
    }

    .news-events ul li .cnt-block .plus-icon {
        background: var(--cs-orange);
        box-shadow: 0 4px 10px rgba(231,91,28,.20);
    }

        .news-events ul li .cnt-block .plus-icon:hover {
            background: var(--cs-green);
        }

    .news-events ul li .cnt-block h3 {
        color: var(--cs-green);
    }

    .news-events ul li .bottom-block {
        border-top-color: var(--cs-border);
        color: var(--cs-muted);
    }


/* ============================================================
   14. INNER PAGE BANNER
   ============================================================ */

.inner-banner {
    position: relative;
}

    .inner-banner:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(255,245,227,.42);
    }

    .inner-banner .container,
    .inner-banner .content {
        position: relative;
        z-index: 2;
    }

    .inner-banner h1 {
        color: var(--cs-green);
    }

    .inner-banner p {
        color: var(--cs-text);
    }

    .inner-banner a.apply-online {
        background: var(--cs-orange);
    }

        .inner-banner a.apply-online:hover {
            background: var(--cs-orange-dark);
        }

        .inner-banner a.apply-online .arrow {
            background: var(--cs-orange-dark);
        }

        .inner-banner a.apply-online:hover .arrow {
            background: var(--cs-green);
        }


/* ============================================================
   15. FORMS
   ============================================================ */

.form-control,
.form-outer input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
    background: #fffdf8;
    border-color: #dec7af;
    color: var(--cs-text);
}

    .form-control:focus,
    .form-outer input:not([type]):focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="tel"]:focus,
    input[type="date"]:focus,
    select:focus,
    textarea:focus {
        border-color: var(--cs-orange);
        box-shadow: 0 0 0 2px rgba(231,91,28,.10);
    }

label,
.control-label {
    color: var(--cs-green);
}


/* ============================================================
   16. BOOTSTRAP PANELS
   ============================================================ */

.panel {
    background: #fffdf8;
    border-color: var(--cs-border);
    box-shadow: 0 2px 8px rgba(16,61,44,.06);
}

.panel-default {
    border-color: var(--cs-border);
}

    .panel-default > .panel-heading {
        background: var(--cs-peach);
        border-color: var(--cs-border);
        color: var(--cs-green);
    }

.panel-primary {
    border-color: var(--cs-green);
}

    .panel-primary > .panel-heading {
        background: var(--cs-green);
        border-color: var(--cs-green);
    }

.panel-success > .panel-heading {
    background: #e7f0e9;
    border-color: #bfd0c4;
    color: var(--cs-green);
}

.well {
    background: var(--cs-cream-light);
    border-color: var(--cs-border);
}


/* ============================================================
   17. TABLES / GRIDVIEW
   ============================================================ */

.table {
    background: #fffdf8;
    color: var(--cs-text);
}

    .table > thead > tr > th {
        background: var(--cs-green);
        color: #ffffff;
        border-color: var(--cs-green-2);
    }

    .table > tbody > tr > td,
    .table > tbody > tr > th {
        border-color: #ead7c3;
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--cs-cream);
}

.table-hover > tbody > tr:hover {
    background: var(--cs-peach);
}


/* ============================================================
   18. PAGINATION
   ============================================================ */

.pagination > li > a,
.pagination > li > span {
    color: var(--cs-green);
    background: #fffdf8;
    border-color: var(--cs-border);
}

    .pagination > li > a:hover,
    .pagination > li > span:hover {
        background: var(--cs-peach);
        color: var(--cs-orange);
        border-color: var(--cs-orange);
    }

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background: var(--cs-orange);
    border-color: var(--cs-orange);
    color: #ffffff;
}


/* ============================================================
   19. LOGIN
   ============================================================ */

.login-wrapper {
    background: var(--cs-ivory);
}

    .login-wrapper .cnt-block {
        background: #fffdf8;
        border-color: var(--cs-border);
    }

    .login-wrapper .head-block h1 {
        color: var(--cs-green);
    }

    .login-wrapper .btn:hover {
        background: var(--cs-green);
    }


/* ============================================================
   20. ALERTS
   ============================================================ */

.alert-info {
    background: var(--cs-peach-light);
    border-color: var(--cs-border);
    color: var(--cs-green);
}

.alert-success {
    background: #eaf2eb;
    border-color: #bfd2c4;
    color: var(--cs-green);
}

.alert-warning {
    background: var(--cs-cream);
    border-color: #e7bd94;
    color: #7a421f;
}


/* ============================================================
   21. MODALS
   ============================================================ */

.modal-content {
    background: var(--cs-cream-light);
    border-color: var(--cs-border);
}

.modal-header {
    background: var(--cs-green);
    color: #ffffff;
    border-bottom: 0;
}

    .modal-header h4,
    .modal-header .modal-title {
        color: #ffffff;
    }

.modal-footer {
    border-top-color: var(--cs-border);
}


/* ============================================================
   22. FOOTER
   ============================================================ */

.footer {
    background: var(--cs-green) !important;
}

    .footer .row1 {
        background: var(--cs-green);
    }

    .footer h3 {
        color: #ffffff;
    }

    .footer .foot-nav ul li a,
    .footer p,
    .footer ul.terms li a {
        color: #eac8aa;
    }

        .footer .foot-nav ul li a:hover,
        .footer ul.terms li a:hover {
            color: #ffffff;
        }

        .footer p span {
            color: #ffffff;
        }

    .footer .footer-logo {
        border-bottom-color: rgba(255,255,255,.15);
    }

    .footer .bottom {
        background: #092f22 !important;
    }

    .footer .connect-us {
        border-color: rgba(255,255,255,.15);
    }

    .footer ul.follow-us li a {
        border-color: var(--cs-orange);
        color: #ffffff;
    }

        .footer ul.follow-us li a:hover {
            background: var(--cs-orange);
            border-color: var(--cs-orange);
            color: #ffffff;
        }

    .footer .subscribe {
        border-color: rgba(255,255,255,.15);
    }

        .footer .subscribe #mc_embed_signup {
            background: var(--cs-cream-light);
        }

        .footer .subscribe .clear {
            background: var(--cs-orange);
        }

            .footer .subscribe .clear:hover {
                background: var(--cs-orange-dark);
            }


/* ============================================================
   23. SCROLL TO TOP
   ============================================================ */

a.scroll-top {
    background: var(--cs-orange) !important;
    border-color: var(--cs-orange) !important;
    color: #ffffff !important;
}

    a.scroll-top:hover {
        background: var(--cs-green) !important;
        border-color: var(--cs-green) !important;
    }


/* ============================================================
   24. MISC OLD THEME BLUE/GREEN COMPONENTS
   ============================================================ */

.progress-bar {
    background: var(--cs-orange);
}

.label-primary,
.badge {
    background: var(--cs-orange);
}

.text-primary {
    color: var(--cs-orange);
}

.bg-primary {
    background: var(--cs-green);
}

hr {
    border-top-color: var(--cs-border);
}


/* ============================================================
   25. RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {

    body {
        background: var(--cs-ivory);
    }

    .header-middle {
        background: var(--cs-ivory);
    }

    .navbar-collapse {
        background: var(--cs-green);
    }

    .navbar-nav > li {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu {
        background: var(--cs-green-2);
    }

        .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
            color: #f6d8be;
        }

            .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
                background: var(--cs-orange);
                color: #ffffff;
            }

    .about ul.our-links li.apply-online,
    .about ul.our-links li.prospects,
    .about ul.our-links li.certification,
    .about ul.our-links li.courses {
        border-right: 0;
        border-bottom: 1px solid var(--cs-border);
    }

    .footer .foot-nav {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
}