/* ========================================
   MI-DOSE BRAND COLORS - COMPLETE OVERRIDE
   Primary: #00A650 (Green)
   Secondary: #FFF200 (Yellow)
   ======================================== */

/* ========================================
   1. OVERRIDE INLINE BLUE COLORS TO GREEN
   ======================================== */
[style*="background-color: #10609D"],
[style*="background-color: rgb(16, 96, 157)"],
[style*="background-color: rgb(61, 94, 191)"] {
  background: linear-gradient(135deg, #00A650 0%, #008a44 100%) !important;
}

[style*="color: #10609D"],
[style*="color: rgb(16, 96, 157)"] {
  color: #00A650 !important;
}

/* ========================================
   2. BUTTONS - GREEN WITH YELLOW TEXT
   ======================================== */
.btn,
.theme_button,
a.btn,
button.btn,
.theme_button.color2 {
  background: linear-gradient(135deg, #00A650 0%, #008a44 100%) !important;
  color: #FFF200 !important;
  border: 2px solid #00A650 !important;
  font-weight: 600 !important;
}

.btn:hover,
.theme_button:hover,
a.btn:hover,
.theme_button.color2:hover {
  background: linear-gradient(135deg, #FFF200 0%, #ffd700 100%) !important;
  color: #00A650 !important;
  border: 2px solid #FFF200 !important;
}

/* ========================================
   3. HERO SECTION - GREEN OVERLAY
   ======================================== */
.hero .carousel-item:before,
.hero .carousel-item::before {
  background: linear-gradient(135deg, rgba(0, 166, 80, 0.75) 0%, rgba(0, 138, 68, 0.65) 100%) !important;
}

.hero h2 {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 166, 80, 0.5) !important;
}

/* ========================================
   4. WHY CHOOSE SECTION - GREEN BACKGROUND
   ======================================== */
#features,
section[style*="background-color: rgb(61, 94, 191)"],
.container-fluid[style*="background-color: rgb(61, 94, 191)"] {
  background: linear-gradient(135deg, #00A650 0%, #008a44 100%) !important;
}

/* Section Header - WHITE color for main heading */
#features .section_header,
#features h3.section_header {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Why Choose Section Text - WHITE for better visibility */
#features .text-light,
#features h3.text-light,
#features h6,
section[style*="background-color: rgb(61, 94, 191)"] h3,
section[style*="background-color: rgb(61, 94, 191)"] h6,
.container-fluid[style*="background-color: rgb(61, 94, 191)"] h3,
.container-fluid[style*="background-color: rgb(61, 94, 191)"] h6 {
  color: #ffffff !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* White text on green backgrounds */
section[style*="background-color: rgb(61, 94, 191)"] .text-white,
.container-fluid[style*="background-color: rgb(61, 94, 191)"] .text-white,
section[style*="background-color: rgb(61, 94, 191)"] .text-light,
.container-fluid[style*="background-color: rgb(61, 94, 191)"] .text-light {
  color: #ffffff !important;
}
@media (max-width: 768px) {
  #features .media-body h5,
  #features .teaser .media-body h5,
  #features h5.text-dark,
  #features .hover-color2.text-dark,
  section#features h5,
  section#features .text-dark {
    color: #ffffff !important;
  }
}

/* ========================================
   5. TEASER BOX HEADINGS - WHITE WITH GREEN BACKGROUND
   ======================================== */
.hover-color2 {
  color: #ffffff !important;
  background: linear-gradient(135deg, #00A650 0%, #008a44 100%) !important;
  padding: 8px 15px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 3px 10px rgba(0, 166, 80, 0.3) !important;
}

.teaser:hover .hover-color2 {
  background: linear-gradient(135deg, #FFF200 0%, #ffd700 100%) !important;
  color: #00A650 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 15px rgba(255, 242, 0, 0.4) !important;
}

/* ========================================
   6. ICONS - YELLOW COLOR
   ======================================== */
.teaser .media-left i,
.teaser i.fa-check {
  color: #FFF200 !important;
  background: rgba(255, 242, 0, 0.2) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #FFF200 !important;
}

.teaser:hover .media-left i {
  background: #FFF200 !important;
  color: #00A650 !important;
}

/* ========================================
   7. TEASER BOXES - WHITE BACKGROUND
   ======================================== */
.teaser {
  background: #ffffff !important;
  border-left: 4px solid #00A650 !important;
}

.teaser:hover {
  border-left: 4px solid #FFF200 !important;
  box-shadow: 0 8px 20px rgba(0, 166, 80, 0.15) !important;
}

.teaser p {
  color: #555 !important;
}

/* ========================================
   8. "LIFE AT MI-DOSE" SECTION - YELLOW TEXT FOR LINKS
   ======================================== */
/* Make "Make a difference with us" and "Do your best work with us" YELLOW */
.container-fluid[style*="background-color: rgb(61, 94, 191)"] h5 a,
.container-fluid[style*="background-color: rgb(61, 94, 191)"] h5 a.text-white,
.container-fluid[style*="background-color: rgb(61, 94, 191)"] h5 {
  color: #FFF200 !important;
  text-decoration: none !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease !important;
  font-weight: 700 !important;
}

.container-fluid[style*="background-color: rgb(61, 94, 191)"] h5 a:hover {
  color: #ffffff !important;
  text-shadow: 2px 2px 6px rgba(255, 242, 0, 0.6) !important;
}
/* ========================================
   9. CARDS - HOVER EFFECTS
   ======================================== */
.card:hover {
  border-color: #00A650 !important;
  box-shadow: 0 8px 25px rgba(0, 166, 80, 0.2) !important;
}

.card h4,
.card h5 {
  color: #00A650 !important;
}

/* ========================================
   10. OFFERING TITLES - GREEN COLOR
   ======================================== */
.offering-titles {
  color: #00A650 !important;
  font-weight: 700 !important;
}

/* ========================================
   11. BEHIND THE SCIENCE SECTION
   ======================================== */
.wrapper h5[style*="color: #10609D"],
.wrapper h5 {
  color: #00A650 !important;
}

.wrapper h2 {
  color: #00A650 !important;
}

/* ========================================
   12. NAVIGATION - SWIPER (PRESERVE ORIGINAL)
   ======================================== */
/* DO NOT change swiper/carousel navigation colors */
.navigation-prev,
.navigation-next,
.js-custom-prev,
.js-custom-next,
.swiper-pagination-bullet,
.swiper-pagination-bullet-active,
.carousel-indicators button,
.carousel-control-prev,
.carousel-control-next {
  /* Keep original colors - NO OVERRIDES */
}

/* ========================================
   13. OWL CAROUSEL (PRESERVE ORIGINAL)
   ======================================== */
/* DO NOT change owl carousel colors */
.owl-carousel .owl-nav button,
.owl-carousel .owl-dots .owl-dot span,
.owl-carousel .owl-dots .owl-dot.active span {
  /* Keep original colors - NO OVERRIDES */
}

/* ========================================
   14. GALLERY & MEDIA LINKS
   ======================================== */
.gallery-item:hover {
  box-shadow: 0 8px 30px rgba(0, 166, 80, 0.25) !important;
}

.media-links {
  background: rgba(0, 166, 80, 0.85) !important;
}

/* ========================================
   15. SERVICE ITEM TITLES
   ======================================== */
.service-item-title {
  color: #00A650 !important;
}

/* ========================================
   16. SCROLL TOP BUTTON
   ======================================== */
.scroll-top {
  background-color: #00A650 !important;
}

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

.scroll-top:hover i {
  color: #00A650 !important;
}

/* ========================================
   17. PRELOADER
   ======================================== */
#preloader:before {
  border-color: #00A650 transparent #00A650 transparent !important;
}

/* ========================================
   18. HEADINGS - GENERAL (NOT ON GREEN BACKGROUNDS)
   ======================================== */
h1, h2, h3, h4, h5, h6,
.section-header {
  color: #00A650 !important;
}

/* Exception: Headings on green backgrounds should be white */
#features h1,
#features h2,
#features h3,
#features h4,
#features h5,
#features h6,
section[style*="background-color: rgb(61, 94, 191)"] h1,
section[style*="background-color: rgb(61, 94, 191)"] h2,
section[style*="background-color: rgb(61, 94, 191)"] h4,
section[style*="background-color: rgb(61, 94, 191)"] h5,
.container-fluid[style*="background-color: rgb(61, 94, 191)"] h1,
.container-fluid[style*="background-color: rgb(61, 94, 191)"] h2,
.container-fluid[style*="background-color: rgb(61, 94, 191)"] h4,
.container-fluid[style*="background-color: rgb(61, 94, 191)"] h5 {
  color: black !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* h3 and h6 on green backgrounds are YELLOW (already styled above) */
section[style*="background-color: rgb(61, 94, 191)"] h3,
.container-fluid[style*="background-color: rgb(61, 94, 191)"] h3 {
  color: #FFF200 !important;
}

/* ========================================
   19. LINKS - GREEN COLOR (EXCEPT IN HEADER NAV)
   ======================================== */
a:not(.btn):not(.theme_button):not(.navmenu a):not(.mobile-nav-toggle) {
  color: #FFF200 !important;
}

a:not(.btn):not(.theme_button):not(.navmenu a):not(.mobile-nav-toggle):hover {
  color: #008a44 !important;
}

/* Links on green backgrounds - handled individually above */

/* ========================================
   20. PRESERVE HEADER NAVIGATION COLORS
   ======================================== */
/* Keep original header/nav colors - DO NOT CHANGE */
.header,
.header .logo,
.header .logo h1,
.header .logo h3,
.navmenu,
.navmenu a,
.navmenu a:focus,
.navmenu li,
.navmenu .active,
.mobile-nav-toggle {
  /* Preserve original colors - no overrides */
}

/* Explicitly preserve nav text colors */
.navmenu a,
.navmenu a span {
  color: #212529 !important; /* Original nav color */
}

.navmenu .active,
.navmenu a:hover {
  color: #145693 !important; /* Original hover color */
}

/* ========================================
   21. PRESERVE FOOTER (DO NOT CHANGE)
   ======================================== */
.footer,
.footer *,
.footer a,
.footer h3,
.footer h4,
.footer p,
.footer .social-links,
.footer .social-links a {
  /* Keep original footer colors - NO OVERRIDES */
}

/* ========================================
   22. BORDERS & SHADOWS
   ======================================== */
.border-primary {
  border-color: #00A650 !important;
}

.shadow-primary {
  box-shadow: 0 8px 25px rgba(0, 166, 80, 0.25) !important;
}

/* ========================================
   23. UTILITY CLASSES
   ======================================== */
.bg-primary-green {
  background-color: #00A650 !important;
}

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

.text-primary-green {
  color: #00A650 !important;
}

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

/* ========================================
   24. RESPONSIVE - MOBILE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
  .btn,
  .theme_button {
    background: linear-gradient(135deg, #00A650 0%, #008a44 100%) !important;
    color: #FFF200 !important;
  }
  
  #features,
  section[style*="background-color: rgb(61, 94, 191)"],
  .container-fluid[style*="background-color: rgb(61, 94, 191)"] {
    background: linear-gradient(135deg, #00A650 0%, #008a44 100%) !important;
  }
  
  .hover-color2 {
    font-size: 16px !important;
    padding: 6px 12px !important;
  }
}

/* ========================================
   END OF BRAND COLORS
   ======================================== */