/* ==========================================================================
   MSS Brand Override Stylesheet
   Loads AFTER style.css and responsive.css to override SUPA accent colors
   with MSS brand colors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties — MSS Brand Colors
   -------------------------------------------------------------------------- */
:root {
    --mss-light-blue: #0079B0;
    --mss-dark-blue: #004063;
    --mss-light-green: #6DC432;
    --mss-dark-green: #347415;

    /* Override the SUPA --blue-color variable used throughout style.css */
    --blue-color: #6DC432;
}

/* --------------------------------------------------------------------------
   2. Header / Navbar — MSS Dark Blue Background
   -------------------------------------------------------------------------- */
header {
    background: var(--mss-dark-blue);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
}

header .navbar-nav .nav-item .nav-link {
    color: #ffffffde;
}

header .navbar-nav .nav-item .nav-link:hover {
    color: var(--mss-light-green);
}

header .navbar-nav .features_list .sub_menu {
    background: #fff;
}

header .navbar-nav .features_list .sub_menu li a {
    color: #333333;
}

header .navbar-nav .features_list .sub_menu li a:hover {
    color: var(--mss-light-green);
}

header .navbar-nav .features_list .sub_menu li {
    border-bottom: 1px solid #6DC43220;
}

/* "Let's Talk" element in header */
header .lets_talk a,
header .lets_talk span {
    color: #ffffffde;
}

header .letstalk .nav-link i {
    margin-right: 8px;
}

/* --------------------------------------------------------------------------
   3. Logo Sizing — MSS GIF Logos
   -------------------------------------------------------------------------- */
header .navbar-brand img {
    width: 180px;
    height: auto;
    max-height: 60px;
    object-fit: contain;
}

.footer_box img {
    width: 200px;
    height: auto;
    max-height: 80px;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   4. Buttons — .main_btn Override
   -------------------------------------------------------------------------- */
.main_btn {
    background: var(--mss-light-green);
    box-shadow: -4px 3px 0px 2px rgba(109, 196, 50, 0.47);
}

.main_btn:hover {
    background: var(--mss-dark-green);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Features / Service Cards — .features_box Override
   -------------------------------------------------------------------------- */
.features_box:hover {
    background: var(--mss-light-green);
}

/* Equal-height feature boxes: stretch columns and cards to fill the row */
.features_box {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.features_box p.pairagraph {
    flex-grow: 1;
}

/* --------------------------------------------------------------------------
   6. Home Section — Hero Accent Overrides
   -------------------------------------------------------------------------- */
.home_section .home_content h1 span {
    color: var(--mss-light-green);
}

.home_section {
    background-image: linear-gradient(#fcffff, rgba(109, 196, 50, 0.15));
}

/* --------------------------------------------------------------------------
   7. Why Choose Us — Counter & List Accents
   -------------------------------------------------------------------------- */
.list_number li i {
    background-color: rgba(109, 196, 50, 0.08);
    color: var(--mss-light-green);
    min-width: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.counter_style {
    border-right: 3px solid rgba(109, 196, 50, 0.12);
}

.why_choose_us img {
    border: 10px solid rgba(0, 121, 176, 0.1);
}

.element_1 {
    border: 3px solid rgba(109, 196, 50, 0.5);
}

.element_2 {
    border: 3px solid var(--mss-light-green);
}

/* --------------------------------------------------------------------------
   8. Services Section Background
   -------------------------------------------------------------------------- */
.our_services_section {
    background: rgba(109, 196, 50, 0.08);
}

.our_services_2 {
    background-color: rgba(109, 196, 50, 0.08);
}

/* --------------------------------------------------------------------------
   9. Team Member Accents
   -------------------------------------------------------------------------- */
.team_member .member_img .sociol_media {
    background: var(--mss-light-green);
}

.team_member .member_img .sociol_media ul li i {
    color: var(--mss-light-green);
}

.team_member .designation a h3:hover {
    color: var(--mss-light-blue);
}

.our_team_section {
    background-color: rgba(109, 196, 50, 0.12);
}

.our_team_section .btn-dark:hover {
    background: var(--mss-light-green);
}

/* --------------------------------------------------------------------------
   10. Testimonials Accents
   -------------------------------------------------------------------------- */
.testimonial_img:before {
    background-color: var(--mss-light-green);
}

.our_costomer .Star span i {
    color: var(--mss-light-green);
}

/* --------------------------------------------------------------------------
   11. Blog / Date Badge Accents
   -------------------------------------------------------------------------- */
.blog_box {
    border: 1px solid rgba(109, 196, 50, 0.1);
}

.blog_box h3:hover {
    color: var(--mss-light-blue);
}

.blog_box:hover .blog_content a h3 {
    color: var(--mss-light-blue);
}

.blog_box .blog_img .date {
    background: var(--mss-light-green);
    box-shadow: 8px 7px 4px rgba(109, 196, 50, 0.72);
}

/* --------------------------------------------------------------------------
   12. Footer — MSS Dark Blue Background
   -------------------------------------------------------------------------- */
.footer {
    background-image: none;
    background-color: var(--mss-dark-blue);
}

.footer_box ul li a {
    background: var(--mss-light-green);
}

.footer_box ul li a:hover {
    background: var(--mss-dark-green);
}

.footer_quick_links li a:hover {
    color: var(--mss-light-green);
}

.footer_quick_links h5::before {
    background-color: var(--mss-light-green);
}

.footer_quick_links h5::after {
    border-bottom: 5px dotted var(--mss-light-green);
}

.footer_contact h5::before {
    background-color: var(--mss-light-green);
}

.footer_contact h5::after {
    border-bottom: 5px dotted var(--mss-light-green);
}

.footer_contact .contact_info {
    margin-bottom: 20px;
}

.footer_contact .contact_info .details p {
    margin-bottom: 0;
}

.footer_contact .contact_info:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   13. Copyright Bar
   -------------------------------------------------------------------------- */
.copyright {
    background-color: #002d45;
    border-top: 2px solid rgba(255, 255, 255, 0.16);
}

.copyright p a {
    color: var(--mss-light-green);
}

/* --------------------------------------------------------------------------
   14. Breadcrumb Section Accents
   -------------------------------------------------------------------------- */
.breadcrumb_list ul li i {
    color: var(--mss-light-green);
}

/* --------------------------------------------------------------------------
   15. Link Highlight Colors — MSS Light Blue
   -------------------------------------------------------------------------- */
a {
    color: var(--mss-light-blue);
}

a:hover {
    color: var(--mss-dark-green);
}

.read_more a:hover {
    color: var(--mss-light-blue);
}

.social_icons li a:hover i {
    color: var(--mss-light-blue);
}

.post_content .meta a {
    color: var(--mss-light-blue);
}

/* --------------------------------------------------------------------------
   16. Navigation Button / Arrow Accents
   -------------------------------------------------------------------------- */
.next_btn i {
    background: var(--mss-light-green);
}

.nex_prevBnt .swiper-button-next:hover,
.next_btn .swiper-button-prev:hover {
    color: var(--mss-light-green);
}

/* --------------------------------------------------------------------------
   17. Counter Section Accents
   -------------------------------------------------------------------------- */
.counter_img {
    background: var(--mss-light-green);
    border: 1px dotted var(--mss-dark-green);
}

.counter_section {
    background-image: none;
    background-color: rgba(109, 196, 50, 0.06);
}

/* --------------------------------------------------------------------------
   18. Progress Bar / Skill Bar Accents
   -------------------------------------------------------------------------- */
.bar .progress-line span {
    background: var(--mss-light-green);
}

.skill-bars .bar .progress-line {
    background: rgba(109, 196, 50, 0.15);
}

/* --------------------------------------------------------------------------
   19. Get In Touch / Contact Form Accents
   -------------------------------------------------------------------------- */
.talk_form_box textarea {
    border: 1px solid rgba(0, 121, 176, 0.19);
}

/* --------------------------------------------------------------------------
   20. Miscellaneous Component Overrides
   -------------------------------------------------------------------------- */

/* Icon info boxes */
.icon_info {
    background: var(--mss-light-green);
}

/* Portfolio hover */
.portfolio_box:hover .project_btn {
    color: var(--mss-light-green);
}

.portfolio_box:hover .project_btn i {
    color: var(--mss-light-green);
}

/* Tag badges */
.portfolio_box .project_btn,
.main_innner_box {
    background: var(--mss-light-green);
}

/* Card box */
.card_box {
    background: var(--mss-light-green);
}

.card_section_2 .border {
    border-bottom: 2px solid var(--mss-light-green) !important;
}

.card_section_2 .top_border {
    border-top: 2px solid var(--mss-light-green);
}

/* Widget sidebar accents */
.widget_side .widget_header h5::before {
    background-color: var(--mss-light-green);
}

.widget_side .widget_header h5:after {
    border-bottom: 5px dotted var(--mss-light-green);
}

.widget_category ul li a:hover span:first-child {
    color: var(--mss-light-green);
}

.widget_category ul li a:hover span:last-child {
    background-color: var(--mss-light-green);
}

.widget_archive ul li:hover {
    background: var(--mss-light-green);
}

/* Blog footer icons */
.blog_footer .right a i,
.blog_footer .viewall i {
    color: var(--mss-light-green);
}

/* Numbered heading stroke */
.number_heading {
    -webkit-text-stroke: 1px var(--mss-light-green);
}

/* Pagination active */
.pagination_btn .active {
    background: var(--mss-light-green);
}

/* Sidebar mobile nav link hover */
.sidebar details ul li a:hover {
    color: var(--mss-light-green);
}

/* Responsive overrides for mobile button */
@media (max-width: 991px) {
    .sidebar .navbar-nav .nav-item .nav-link {
        color: #000000d4;
    }
}