
/*** MNCI Brand Colors ***/
:root {
    --bs-primary: #1B3A6B;
    --bs-primary-rgb: 27, 58, 107;
    --bs-secondary: #C0392B;
    --bs-secondary-rgb: 192, 57, 43;
    --bs-dark: #1a1a2e;
    --bs-light: #f4f6fb;
}

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}
#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/*** Back to Top ***/
.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    transition: 0.5s;
    z-index: 99;
}

/*** Buttons ***/
.btn { font-weight: 600; transition: .5s; }
.btn-square  { width: 32px; height: 32px; }
.btn-sm-square { width: 34px; height: 34px; }
.btn-md-square { width: 44px; height: 44px; }
.btn-lg-square { width: 56px; height: 56px; }
.btn-xl-square { width: 66px; height: 66px; }
.btn-square,.btn-sm-square,.btn-md-square,.btn-lg-square,.btn-xl-square {
    padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal;
}
.btn.btn-primary { color: #fff; background-color: var(--bs-primary); border: none; }
.btn.btn-primary:hover { background: #C0392B; color: #fff; }
.btn.btn-secondary { color: #fff; background-color: #C0392B; border: none; }
.btn.btn-secondary:hover { background: var(--bs-primary); color: #fff; }
.btn.btn-light { color: var(--bs-primary); border: none; }
.btn.btn-light:hover { color: #fff; background: var(--bs-dark); }
.btn.btn-dark { color: #fff; border: none; }
.btn.btn-dark:hover { color: var(--bs-primary); background: var(--bs-light); }

/*** Text & Background helpers ***/
.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: #C0392B !important; }
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: #C0392B !important; }
.border-primary { border-color: var(--bs-primary) !important; }

/*** Topbar ***/
.topbar .dropdown-toggle::after {
    border: none; content: "\f107"; font-family: "Font Awesome 5 Free";
    font-weight: 600; vertical-align: middle; margin-left: 8px; color: var(--bs-primary);
}
.topbar .dropdown .dropdown-menu a:hover { background: var(--bs-primary); color: #fff; }
.topbar .dropdown .dropdown-menu {
    transform: rotateX(0deg); visibility: visible; background: var(--bs-light);
    padding-top: 10px; border: 0; transition: .5s; opacity: 1;
}

/*** Navbar ***/
.nav-bar { background: #fff; transition: 1s; box-shadow: 0 2px 20px rgba(27,58,107,0.08); }
.navbar-light .navbar-brand img { max-height: 60px; transition: .5s; }
.nav-bar .navbar-light .navbar-brand img { max-height: 90px; }
.navbar .navbar-nav .nav-item .nav-link { padding: 0; }
.navbar .navbar-nav .nav-item { display: flex; align-items: center; padding: 15px; }
.navbar-light .navbar-nav .nav-item:hover,
.navbar-light .navbar-nav .nav-item.active,
.navbar-light .navbar-nav .nav-item:hover .nav-link,
.navbar-light .navbar-nav .nav-item.active .nav-link { color: var(--bs-primary); }

@media (max-width: 991px) {
    .navbar { padding: 20px 0; }
    .navbar .navbar-nav .nav-link { padding: 0; }
    .navbar .navbar-nav .nav-item { display: flex; padding: 20px; flex-direction: column; justify-content: start; align-items: start; }
    .navbar .navbar-nav .nav-btn { display: flex; justify-content: start; }
    .navbar .navbar-nav { width: 100%; display: flex; margin-top: 20px; padding-bottom: 20px; background: var(--bs-light); border-radius: 10px; }
    .navbar.navbar-expand-lg .navbar-toggler { padding: 8px 15px; border: 1px solid var(--bs-primary); color: var(--bs-primary); }
}
.navbar .dropdown-toggle::after {
    border: none; content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 600; vertical-align: middle; margin-left: 8px;
}
.dropdown .dropdown-menu .dropdown-item:hover { background: var(--bs-primary); color: #fff; }

@media (min-width: 992px) {
    .navbar { padding: 20px 0; }
    .navbar .nav-btn { display: flex; align-items: center; justify-content: end; }
    .navbar .navbar-nav { width: 100%; display: flex; justify-content: center; align-items: center; background: var(--bs-light); border-radius: 10px; }
    .navbar .navbar-nav .nav-btn { width: 100%; display: flex; margin-left: auto; }
    .navbar .nav-item .dropdown-menu { display: block; visibility: hidden; top: 100%; transform: rotateX(-75deg); transform-origin: 0% 0%; border: 0; border-radius: 10px; transition: .5s; opacity: 0; }
    .navbar .nav-item:hover .dropdown-menu { transform: rotateX(0deg); visibility: visible; transition: .5s; opacity: 1; }
}

/*** Hero Carousel ***/
.header-carousel .header-carousel-item { height: 700px; }
.header-carousel-item { background: var(--bs-primary); }
.header-carousel-item.bg-red { background: #C0392B; }

/* Caption must fill the entire slide so the image column is visible */
.header-carousel .header-carousel-item .carousel-caption {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0;
    text-align: left;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    position: absolute;
    width: 55px;
    height: 55px;
    border-radius: 55px;
    background: rgba(255,255,255,0.2) !important;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
}
.header-carousel .owl-nav .owl-prev { bottom: 30px; left: 50%; transform: translateX(-50%); margin-left: 30px; }
.header-carousel .owl-nav .owl-next { bottom: 30px; right: 50%; transform: translateX(-50%); margin-right: 30px; }
.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover { background: rgba(255,255,255,0.5) !important; }
.header-carousel .owl-dots { margin-top: 25px; }
.header-carousel .owl-dot.active span,
.header-carousel .owl-dot:hover span { background: #fff; }

@media (max-width: 991px) {
    .header-carousel .header-carousel-item { height: auto; min-height: 500px; }
    .header-carousel .header-carousel-item .carousel-caption { position: relative; padding-top: 60px; padding-bottom: 40px; }
}
@media (max-width: 767px) {
    .header-carousel .header-carousel-item { min-height: 400px; }
}

/*** Breadcrumb Header ***/
.bg-breadcrumb {
    background: linear-gradient(rgba(27, 58, 107, 0.88), rgba(27, 58, 107, 0.88)), url('../img/bg-breadcrumb.jpg') center center/cover no-repeat;
    padding: 60px 0;
}
.bg-breadcrumb .breadcrumb-item a { color: #fff; text-decoration: none; }
.bg-breadcrumb .breadcrumb-item.active { color: #C0392B; }
.bg-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5); }

/*** About ***/
.about-item-content { border-left: 4px solid var(--bs-primary); }

/*** Counter ***/
.counter-item { border-left: 3px solid var(--bs-primary); }

/*** Service / Cards ***/
.service-item { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(27,58,107,0.08); transition: .5s; }
.service-item:hover { box-shadow: 0 8px 30px rgba(27,58,107,0.15); transform: translateY(-5px); }
.service-img { position: relative; overflow: hidden; }
.service-icon { position: absolute; bottom: 0; right: 20px; background: var(--bs-primary); border-radius: 50px 50px 0 0; color: #fff; }
.service-content-inner a { color: var(--bs-dark); text-decoration: none; transition: .3s; }
.service-content-inner a:hover { color: var(--bs-primary); }

/*** Team ***/
.team-item { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(27,58,107,0.08); transition: .5s; }
.team-item:hover { box-shadow: 0 8px 30px rgba(27,58,107,0.15); transform: translateY(-5px); }
.team-img { position: relative; overflow: hidden; }
.team-icon { position: absolute; top: 0; right: -50px; display: flex; flex-direction: column; padding: 10px; background: rgba(27,58,107,0.85); transition: .5s; }
.team-item:hover .team-icon { right: 0; }
.team-title { background: var(--bs-light); border-top: 3px solid var(--bs-primary); }

/*** Gallery ***/
.gallery-item { border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 4px 20px rgba(27,58,107,0.08); }
.gallery-item img { transition: .5s; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item .gallery-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: .5s; }
.gallery-item:hover .gallery-btn { opacity: 1; }
.gallery-item .gallery-overlay { position: absolute; inset: 0; background: rgba(27,58,107,0.5); opacity: 0; transition: .5s; }
.gallery-item:hover .gallery-overlay { opacity: 1; }

/*** News / Blog ***/
.news-item { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(27,58,107,0.08); transition: .5s; }
.news-item:hover { box-shadow: 0 8px 30px rgba(27,58,107,0.15); transform: translateY(-5px); }
.news-img { position: relative; overflow: hidden; }
.news-icon { position: absolute; bottom: 0; left: 20px; background: var(--bs-primary); border-radius: 50px 50px 0 0; color: #fff; padding: 8px 14px; }
.news-content-inner a { color: var(--bs-dark); text-decoration: none; transition: .3s; }
.news-content-inner a:hover { color: var(--bs-primary); }

/*** Timeline / Milestones ***/
.timeline { position: relative; padding: 0; list-style: none; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--bs-primary); margin-left: -1.5px; }
.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-item .timeline-badge { position: absolute; top: 24px; left: 50%; width: 50px; height: 50px; margin-left: -25px; border-radius: 50%; background: var(--bs-primary); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 1; font-weight: bold; }
.timeline-item .timeline-panel { position: relative; width: 45%; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(27,58,107,0.08); }
.timeline-item:nth-child(odd) .timeline-panel { float: left; }
.timeline-item:nth-child(even) .timeline-panel { float: right; }
.timeline-item::after { content: ''; display: table; clear: both; }
@media (max-width: 767px) {
    .timeline::before { left: 25px; }
    .timeline-item .timeline-badge { left: 25px; }
    .timeline-item .timeline-panel { width: 80%; float: right !important; margin-left: 60px; }
}

/*** FAQ ***/
.accordion-button { color: var(--bs-primary); font-weight: 600; }
.accordion-button:not(.collapsed) { background: var(--bs-primary); color: #fff; }
.accordion-button::after { filter: none; }
.accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.accordion-item { border: 1px solid rgba(27,58,107,0.15); border-radius: 8px !important; margin-bottom: 10px; overflow: hidden; }

/*** Downloads / Docs ***/
.doc-item { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 4px 20px rgba(27,58,107,0.08); transition: .5s; border-left: 4px solid var(--bs-primary); }
.doc-item:hover { box-shadow: 0 8px 30px rgba(27,58,107,0.15); transform: translateX(5px); }

/*** Membership / Enrolment Card ***/
.plan-item { background: #fff; border-radius: 10px; padding: 30px; box-shadow: 0 4px 20px rgba(27,58,107,0.08); transition: .5s; border-top: 4px solid var(--bs-primary); }
.plan-item:hover, .plan-item.featured { box-shadow: 0 8px 30px rgba(27,58,107,0.15); transform: translateY(-5px); border-top-color: #C0392B; }
.plan-item .plan-badge { background: #C0392B; color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 20px; }

/*** Footer ***/
.footer { background: var(--bs-primary); }
.footer .footer-item a { display: block; color: rgba(255,255,255,0.7); text-decoration: none; margin-bottom: 8px; transition: .3s; }
.footer .footer-item a:hover { color: #fff; padding-left: 5px; }
.footer .footer-item h4 { color: #fff; }
.footer .btn-md-square { background: rgba(255,255,255,0.15); color: #fff; transition: .3s; }
.footer .btn-md-square:hover { background: #C0392B; color: #fff; }
.footer-instagram { position: relative; overflow: hidden; border-radius: 5px; }
.footer-instagram img { transition: .5s; }
.footer-instagram:hover img { transform: scale(1.1); }
.footer-search-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(27,58,107,0.6); opacity: 0; transition: .3s; }
.footer-instagram:hover .footer-search-icon { opacity: 1; }

/*** Copyright ***/
.copyright { background: #0f2447; }
.copyright a { color: rgba(255,255,255,0.8); text-decoration: none; }
.copyright a:hover { color: #fff; }

/*** Page Section Backgrounds ***/
.bg-light { background-color: #f4f6fb !important; }
.section-title { position: relative; display: inline-block; }
.section-title::before { content: ''; position: absolute; bottom: -8px; left: 0; width: 50px; height: 3px; background: #C0392B; }

/*** Membership Form / Contact ***/
.contact-form .form-control:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(27,58,107,0.15); }

/*** Responsive ***/
@media (max-width: 576px) {
    .header-carousel-item { padding: 40px 0; }
}
