/* Custom Branding for Mid-Valley School */
:root {
    --color-primary: #002147;    /* Deep Navy from Logo */
    --color-secondary: #D32F2F;  /* Red from Logo */
    --color-tertiary: #FFB300;   /* Gold from Logo */
    --color-heading: #002147;
}


/* Update Buttons to match Brand Red */
.edu-btn {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.edu-btn:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Header & Navigation */
.mainmenu-nav nav.mainmenu-nav ul.mainmenu > li > a:hover {
    color: var(--color-secondary) !important;
}

/* Topbar Background */
.header-top-bar {
    background-color: var(--color-primary) !important;
}

/* Mobile Menu Specifics */
.popup-mobile-menu .inner .header-top .logo img {
    max-height: 60px; /* Adjust based on your preference */
}

.popup-mobile-menu .inner .mainmenu li a:hover {
    color: var(--color-secondary) !important;
}

/* Preloader matching brand */
#edublink-preloader {
    background-image: linear-gradient(20deg, var(--color-primary) 0%, #003366 100%) !important;
}

.edu-header .header-brand .logo{
    height: 120px;
}
.edu-header .header-brand img.logo-light{
    height: 150px;
    border-radius: 15px;
}

.header-top-bar{
    background-color: #011241;
}


/* Category or Icon boxes - using the Gold accent */
.features-box .icon {
    background-color: var(--color-tertiary) !important;
    color: #fff;
}

/* Color the number and title in school colors */
.instructor-info .inner .title {
    color: var(--color-primary) !important; /* Navy Blue */
}

.instructor-info .content span {
    color: var(--color-secondary) !important; /* School Red */
    font-weight: 700;
}

/* Styling the category boxes to match Mid-Valley colors */
.features-style-2 .icon {
    background-color: rgba(255, 179, 0, 0.1) !important; /* Light Gold Background */
}

.features-style-2 .icon img {
    filter: sepia(100%) saturate(300%) hue-rotate(5deg); /* Tint icons toward Gold */
}

.features-style-2 .content .title span {
    color: #D32F2F !important; /* Red for the highlight text */
}

.features-style-2 .content .title {
    color: #002147 !important; /* Navy for the main text */
}

/* 1. Primary Color (Navy Blue) */
/* .color-primary-style .icon, 
.color-extra02-style .icon, 
.color-extra05-style .icon {
    background-color: #002147 !important;
    color: #ffffff !important;
}

/* 2. Secondary Color (School Red) */
/* .color-secondary-style .icon, 
.color-extra03-style .icon, 
.color-extra04-style .icon {
    background-color: #D32F2F !important;
    color: #ffffff !important;
} */

/* Hover Effects */
.categorie-grid.categorie-style-2:hover {
    border-color: #002147 !important; /* Changes border to Navy on hover */
}

.categorie-grid.categorie-style-2 .content .title:hover {
    color: #D32F2F !important; /* Changes text to Red on hover */
}

/* Section Title Underline */
.section-title .shape-line i {
    color: #FFB300 !important; /* Gold Icon under the title */
}

/* Pre-title (Welcome to Mid-Valley) - School Red */
.edu-about-area .pre-title {
    color: #D32F2F !important;
    font-weight: 600;
    letter-spacing: 2px;
}

/* Main Heading - Navy Blue */
.edu-about-area .title {
    color: #002147 !important;
}

/* Feature List Icons - School Gold */
.edu-about-area .features-list li::before {
    background-color: #FFB300 !important;
    color: #002147 !important;
}

/* Award Box Styling */
.award-status .inner {
    background-color: #002147 !important; /* Navy Background */
}

.award-status .inner .icon i {
    color: #FFB300 !important; /* Gold Icon */
}

.award-status .inner .content .title {
    color: #ffffff !important;
}

.award-status .inner .content .subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Video Button - Red */
.video-box .video-popup-activation {
    background-color: #D32F2F !important;
}

/* Counterup Area UI Upgrade */

/* 1. The Container Box */
.counterup-box-wrap {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px !important;
    padding: 60px 40px !important;
    box-shadow: 0 30px 60px rgba(0, 33, 71, 0.1) !important;
}

/* 2. Number Colors - Mapping to School Brand */

/* Navy Blue for the Main Numbers */
.counterup-box-wrap .count-number.primary-color,
.counterup-box-wrap .count-number.extra05-color {
    color: #002147 !important; /* School Navy */
    font-weight: 800;
}

/* Red for the Highlight Numbers */
.counterup-box-wrap .count-number.secondary-color,
.counterup-box-wrap .count-number.extra02-color {
    color: #D32F2F !important; /* School Red */
    font-weight: 800;
}

/* 3. Title Styling */
.counterup-style-2 .title {
    color: #555 !important;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
}

/* 4. Animation on hover */
.edu-counterup:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}
.brand-grid-wrap{
    grid-template-columns: repeat(3,1fr);
}