/**
 * Custom Color Scheme - Green & Red Combination
 * Applied on top of default styles
 */

:root {
    --primary-green: #28a745;
    --primary-red: #dc3545;
    --dark-green: #218838;
    --dark-red: #c82333;
    --light-green: #d4edda;
    --light-red: #f8d7da;
}

/* ========================================
   PRIMARY COLOR - GREEN
======================================== */

/* Buttons - Primary Green */
.btn-brand,
.btn-primary,
.cbx-btn,
.btn-brand-dark {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important;
    border-color: #28a745 !important;
    color: #fff !important;
}

.btn-brand:hover,
.btn-primary:hover,
.cbx-btn:hover {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%) !important;
    border-color: #1e7e34 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

/* Links and Text */
a {
    color: #28a745;
}

a:hover {
    color: #218838;
}

.text-primary {
    color: #28a745 !important;
}

/* Backgrounds */
.bg-primary,
.bg-brand {
    background-color: #28a745 !important;
}

/* Borders */
.border-primary {
    border-color: #28a745 !important;
}

/* ========================================
   SECONDARY COLOR - RED
======================================== */

/* Buttons - Red */
.btn-brand-rev,
.btn-secondary,
.btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.btn-brand-rev:hover,
.btn-secondary:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%) !important;
    border-color: #bd2130 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
}

.text-secondary {
    color: #dc3545 !important;
}

.bg-secondary {
    background-color: #dc3545 !important;
}

/* ========================================
   HEADER & NAVIGATION
======================================== */

.header-topbar {
    background: linear-gradient(90deg, #28a745 0%, #218838 100%);
    border-bottom: 2px solid #dc3545;
}

.header-topbar a {
    color: #fff !important;
}

.btn-auth {
    background: #fff !important;
    color: #28a745 !important;
    border: 2px solid #fff !important;
}

.btn-auth:hover {
    background: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}

.btn-auth-rev {
    background: #dc3545 !important;
    color: #fff !important;
    border: 2px solid #dc3545 !important;
}

.btn-auth-rev:hover {
    background: #c82333 !important;
    border-color: #c82333 !important;
}

.main-nav .codeboxr-main-menu > li > a:hover,
.main-nav .codeboxr-main-menu > li.active > a {
    color: #28a745 !important;
}

/* ========================================
   SLIDER / HERO SECTION
======================================== */

#slider-area .single-slide-wrap {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
}

.slider-content h2,
.slider-content h3 {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(220, 53, 69, 0.3);
}

/* ========================================
   SECTIONS
======================================== */

.section-title h2 {
    color: #28a745;
    border-bottom: 3px solid #dc3545;
    padding-bottom: 10px;
}

.section-title::after {
    background: linear-gradient(90deg, #28a745 0%, #dc3545 100%);
}

/* ========================================
   CARDS & BOXES
======================================== */

.single-upcoming-event:hover,
.single-blog-post:hover,
.single-gallery-item:hover {
    border-color: #28a745;
    box-shadow: 0 5px 20px rgba(40, 167, 69, 0.3);
}

.up-event-date {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

/* ========================================
   ICONS & BADGES
======================================== */

.icon-box,
.feature-icon {
    color: #28a745;
}

.badge-success,
.badge-primary {
    background: #28a745 !important;
}

.badge-danger,
.badge-warning {
    background: #dc3545 !important;
}

/* ========================================
   FOOTER
======================================== */

#footer-area {
    background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
    color: #fff;
}

#footer-area .widget-title {
    color: #fff;
    border-bottom: 2px solid #dc3545;
}

#footer-area a {
    color: #d4edda;
}

#footer-area a:hover {
    color: #fff;
}

.footer-social-icons a {
    background: #28a745;
    border: 2px solid #28a745;
}

.footer-social-icons a:hover {
    background: #dc3545;
    border-color: #dc3545;
}

.footer-bottom {
    background: #155724;
    border-top: 2px solid #dc3545;
}

/* ========================================
   FORMS
======================================== */

.form-control:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-section {
    background: #f8f9fa;
    border-left: 4px solid #28a745;
}

.form-section.payment-section {
    border-left-color: #dc3545;
}

.section-title {
    color: #28a745;
    border-bottom: 2px solid #dc3545;
}

/* ========================================
   ALERTS & NOTIFICATIONS
======================================== */

.alert-success {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #28a745;
    color: #0c5460;
}

/* ========================================
   SPECIAL ELEMENTS
======================================== */

/* Newsletter Form */
.newsletter-form button {
    background: #dc3545 !important;
}

.newsletter-form button:hover {
    background: #c82333 !important;
}

/* Social Icons */
.social-networks-icon li a {
    background: #28a745;
    border: 2px solid #28a745;
}

.social-networks-icon li a:hover {
    background: #dc3545;
    border-color: #dc3545;
}

/* Gallery Hover */
.gallery-hvr-wrap {
    background: rgba(40, 167, 69, 0.9);
}

.btn-zoom {
    background: #dc3545;
    border-color: #dc3545;
}

.btn-zoom:hover {
    background: #c82333;
}

/* Event Countdown */
.event-countdown-counter {
    color: #28a745;
}

/* Breadcrumbs */
.breadcrumb-item a {
    color: #28a745;
}

.breadcrumb-item a:hover {
    color: #218838;
}

/* ========================================
   DONATION & MEMBERSHIP FORMS
======================================== */

.register-form-wrap {
    box-shadow: 0 0 30px rgba(40, 167, 69, 0.15);
}

.register-form-wrap h3 {
    color: #28a745;
}

.input-group-text {
    background-color: #28a745;
    color: #fff;
    border-color: #28a745;
}

/* Payment Section */
.payment-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9f7ef 100%);
}

.payment-section .section-title {
    color: #dc3545;
}

/* Sponsor Cards */
.sponsor-card:hover {
    border-color: #28a745;
    box-shadow: 0 8px 30px rgba(40, 167, 69, 0.2);
}

.sponsor-card.featured-card {
    border: 2px solid #28a745;
    background: linear-gradient(135deg, #fff 0%, #e9f7ef 100%);
}

/* ========================================
   CUSTOM GRADIENTS
======================================== */

.gradient-primary {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.gradient-mixed {
    background: linear-gradient(90deg, #28a745 0%, #dc3545 100%);
}

/* ========================================
   CTA SECTIONS
======================================== */

#scholership-promo {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
}

.sponsor-cta-section {
    background: linear-gradient(135deg, #28a745 0%, #dc3545 100%);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

@media (max-width: 991px) {
    .header-topbar {
        padding: 10px 0;
    }
}

@media (max-width: 768px) {
    .btn-brand,
    .btn-brand-rev {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
}

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
}

.pulse-green {
    animation: pulse-green 2s infinite;
}

.pulse-red {
    animation: pulse-red 2s infinite;
}

/* ========================================
   SCROLL TO TOP BUTTON
======================================== */

.scroll-top {
    background: #28a745 !important;
    border: 2px solid #28a745 !important;
}

.scroll-top:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* ========================================
   PAGE TITLE AREA
======================================== */

#page-title-area {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.9) 0%, rgba(220, 53, 69, 0.9) 100%),
                url('../images/page-title.jpg');
    background-size: cover;
    background-position: center;
}

#page-title-area h1,
#page-title-area h2 {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ========================================
   CHRISTMAS/FESTIVE THEME ELEMENTS
======================================== */

.festive-accent {
    border-top: 3px solid #28a745;
    border-bottom: 3px solid #dc3545;
}

.christmas-card {
    border: 2px solid #28a745;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.2);
}

/* End of Custom Green & Red Color Scheme */