/* Scoped Dark Mode Styles for the entire website */

html.dark-mode,
html.dark-mode body {
  background-color: #15342a !important; /* Premium dark forest green background */
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(110, 148, 24, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 60%, rgba(110, 148, 24, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(110, 148, 24, 0.05) 0%, transparent 45%) !important;
  background-attachment: fixed !important;
  color: #94a3b8 !important; /* Soft grey text */
}

/* Headings & Links */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .h1,
html.dark-mode .h2,
html.dark-mode .h3,
html.dark-mode .h4,
html.dark-mode .h5,
html.dark-mode .h6 {
  color: #ffffff !important;
}

html.dark-mode p,
html.dark-mode span,
html.dark-mode li {
  color: #94a3b8 !important;
}

html.dark-mode a {
  color: #ffffff;
}
html.dark-mode a:hover {
  color: var(--ul-2-primary, #6e9418);
}

/* Header & Navigation */
html.dark-mode header.ul-2-header,
html.dark-mode header.ul-2-header-bottom,
html.dark-mode .ul-2-header-bottom {
  background-color: #0d382f !important; /* Matches hero section background color */
  border-bottom: none !important;
}

html.dark-mode .ul-2-header-top {
  background-color: #0d382f !important; /* Matches hero section background color */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .ul-2-header-top-right a,
html.dark-mode .ul-2-header-top-right span,
html.dark-mode .ul-2-header-top-left p {
  color: #94a3b8 !important;
}

html.dark-mode nav.ul-header-nav a {
  color: #ffffff !important;
}

html.dark-mode nav.ul-header-nav a:hover,
html.dark-mode nav.ul-header-nav a.active {
  color: var(--ul-2-primary, #6e9418) !important;
}

/* Sticky Header State */
html.dark-mode .to-be-sticky.sticky {
  background-color: #0d382f !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Dark Mode Button Styling */
.ul-header-dark-mode-toggle {
  background: var(--ul-2-primary, #6e9418) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 16px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  margin-right: 15px !important;
  box-shadow: 0 4px 12px rgba(110, 148, 24, 0.15) !important;
}

.ul-header-dark-mode-toggle:hover {
  background-color: #5d7e12 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 6px 16px rgba(110, 148, 24, 0.25) !important;
}

html.dark-mode .ul-header-dark-mode-toggle {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Standard Section Elements & Backgrounds */
html.dark-mode .aboutinner-section-area,
html.dark-mode .whychoose2-section-area,
html.dark-mode .service3-section-area,
html.dark-mode .our-service-section-area,
html.dark-mode .showcase-section,
html.dark-mode .services-showcase-section,
html.dark-mode .sp1,
html.dark-mode .sp2,
html.dark-mode .sp3,
html.dark-mode .sp4 {
  background-color: #012420 !important;
}

/* Lighter alternating sections to create subtle contrast */
html.dark-mode .service1-section-area,
html.dark-mode .testimonial1-section-area,
html.dark-mode .history1-scetion-area {
  background-color: #022e29 !important;
  background-image: none !important;
}

/* Ensure inner cards inside these sections stand out on the lighter background */
html.dark-mode .service1-section-area .service-item-card,
html.dark-mode .testimonial1-section-area .testimonial-vertical {
  background-color: #044d44 !important;
  border-color: #055249 !important;
}

html.dark-mode .service1-section-area .heading1 h2 {
  color: #ffffff !important;
}

html.dark-mode .services-prev-btn,
html.dark-mode .services-next-btn {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .services-prev-btn:hover,
html.dark-mode .services-next-btn:hover {
  background: var(--ul-2-primary, #6e9418) !important;
  border-color: var(--ul-2-primary, #6e9418) !important;
  color: #ffffff !important;
}

/* Footer Section */
html.dark-mode .footer-area {
  background-color: #001815 !important; /* Deepest forest green footer */
  border-top: 1px solid #055249 !important;
}

/* Custom Cards, Lists & Boxes (Sleek Dark style) */
html.dark-mode .service-item-card,
html.dark-mode .scroll-nav-card,
html.dark-mode .team-boxarea,
html.dark-mode .why-choose-boxarea,
html.dark-mode .service3-single-boxarea,
html.dark-mode .about-boxarea,
html.dark-mode .blog-boxarea,
html.dark-mode .pricing-boxarea,
html.dark-mode .contact-info-box,
html.dark-mode .project1-section .project-single-boxarea .project-boxarea {
  background-color: #033b34 !important; /* Sleek forest card bg */
  border: 1px solid #055249 !important; /* Thin clean border */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

html.dark-mode .service-item-card:hover,
html.dark-mode .scroll-nav-card:hover,
html.dark-mode .why-choose-boxarea:hover,
html.dark-mode .service3-single-boxarea:hover {
  border-color: rgba(110, 148, 24, 0.45) !important; /* Green glowing border */
  box-shadow: 0 15px 35px rgba(110, 148, 24, 0.08) !important; /* Green ambient shadow */
  transform: translateY(-6px) !important;
}

/* Titles inside box areas */
html.dark-mode .service3-single-boxarea a,
html.dark-mode .team-boxarea .content-area a,
html.dark-mode .why-choose-boxarea a,
html.dark-mode .scroll-nav-title,
html.dark-mode .service-item-title,
html.dark-mode .project-boxarea h2 a {
  color: #ffffff !important;
}

html.dark-mode .project-boxarea h2 a:hover {
  color: var(--ul-2-primary, #6e9418) !important;
}

html.dark-mode .project-boxarea h5 {
  color: var(--ul-2-primary, #6e9418) !important;
}

html.dark-mode .service3-single-boxarea p,
html.dark-mode .team-boxarea p,
html.dark-mode .why-choose-boxarea p,
html.dark-mode .service-item-desc,
html.dark-mode .scroll-nav-desc {
  color: #94a3b8 !important; /* Clean description text */
}

/* Custom hover overrides for team page in dark mode to keep text white */
html.dark-mode .team-card,
html.dark-mode .team-card:hover {
  border-color: #055249 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode .team-card .hover-content-wrap .hover-content .title,
html.dark-mode .team-card .hover-content-wrap .hover-content .title a,
html.dark-mode .team-card .hover-content-wrap .hover-content span,
html.dark-mode .team-card .hover-content-wrap .hover-content p,
html.dark-mode .team-card .team-content .title,
html.dark-mode .team-card .team-content .title a,
html.dark-mode .team-card .team-content span {
  color: #ffffff !important;
}

/* Forms & Inputs */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background-color: #033b34 !important;
  border: 1px solid #055249 !important;
  color: #ffffff !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  border-color: var(--ul-2-primary, #6e9418) !important;
}

/* Highlight Cards in Light Theme */
html.dark-mode .service-highlight-card {
  background: linear-gradient(135deg, #102013 0%, #033b34 100%) !important;
  border: 1px solid var(--ul-2-primary, #6e9418) !important;
  box-shadow: 0 8px 25px rgba(110, 148, 24, 0.08) !important;
}



html.dark-mode .inner-header h2 {
  color: #ffffff !important;
}

html.dark-mode .inner-header a {
  color: rgba(255, 255, 255, 0.85) !important;
}
html.dark-mode .inner-header a i {
  color: rgba(255, 255, 255, 0.85) !important;
}
html.dark-mode .inner-header a span {
  color: #ffffff !important;
}

/* Section Tagline */
html.dark-mode .heading1 h5,
html.dark-mode .heading2 h5,
html.dark-mode .heading3 h5,
html.dark-mode .heading4 h5,
html.dark-mode .heading5 h5,
html.dark-mode .about-heading h5,
html.dark-mode .whychoose-heading h5,
html.dark-mode .service-heading h5,
html.dark-mode .category-tag,
html.dark-mode .sub-heading-custom,
html.dark-mode .testimonial1-section-area .heading1 h5,
html.dark-mode .testimonial-about-section-area .heading1 h5,
html.dark-mode .testimonial1-section-area .heading1 h5:not(:has(span)),
html.dark-mode .testimonial-about-section-area .heading1 h5:not(:has(span)) {
  color: var(--ul-2-primary, #6e9418) !important;
}

/* Subheading Double Slashes */
html.dark-mode .slashes {
  color: var(--ul-2-primary, #6e9418) !important;
}

/* Separator Line */
html.dark-mode .divider-line {
  color: #055249 !important;
}

/* Card Icons Tints (Green style matching screenshot) */
html.dark-mode .service-item-icon-wrap,
html.dark-mode .scroll-nav-icon,
html.dark-mode .about-boxarea .icons,
html.dark-mode .service3-single-boxarea .icons {
  background: rgba(110, 148, 24, 0.12) !important;
  color: #9cc828 !important;
}

html.dark-mode .service-item-card:hover .service-item-icon-wrap,
html.dark-mode .scroll-nav-card:hover .scroll-nav-icon,
html.dark-mode .service3-single-boxarea:hover .icons {
  background: var(--ul-2-primary, #6e9418) !important;
  color: #ffffff !important;
}

/* Dark Mode styles for dropdown submenus */
html.dark-mode .ul-header-submenu ul {
  background-color: #0C382F !important; /* Matches main header background color */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  border: none !important;
  border-top: 4px solid var(--ul-2-primary, #6e9418) !important;
}

html.dark-mode .ul-header-submenu li {
  border-bottom: none !important;
}

html.dark-mode .ul-header-submenu li a {
  color: #ffffff !important;
}

html.dark-mode .ul-header-submenu li a:hover {
  color: var(--ul-2-primary, #6e9418) !important;
  background-color: transparent !important;
}

html.dark-mode .history1-scetion-area .heading1 h2 {
  color: #ffffff !important;
}

html.dark-mode .history-boxarea h2 {
  color: #ffffff !important;
}

html.dark-mode .history-boxarea p {
  color: #94a3b8 !important;
}

html.dark-mode .history1-scetion-area .boredr {
  border: none !important;
}

html.dark-mode .history1-scetion-area .boredr::after {
  background: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .history1-scetion-area .history-single-slider .history-boxarea span {
  background: var(--ul-2-primary, #6e9418) !important;
  border: 4px solid #022e29 !important;
}

/* Footer Section Dark Mode Optimization */
html.dark-mode .vl-footer1-section-area {
  background: #001815 !important;
  border-top: 1px solid #055249 !important;
}

html.dark-mode .vl-footer1-section-area .vl-footer-widget h3 {
  color: #ffffff !important;
}

html.dark-mode .vl-footer1-section-area .footer-logo1 p,
html.dark-mode .vl-footer1-section-area .vl-footer-widget ul li a {
  color: #94a3b8 !important;
}

html.dark-mode .vl-footer1-section-area .vl-footer-widget ul li a:hover {
  color: var(--ul-2-primary, #6e9418) !important;
}

html.dark-mode .vl-footer1-section-area .footer-logo1 ul li a {
  background: #033b34 !important;
  color: #ffffff !important;
}

html.dark-mode .vl-footer1-section-area .footer-logo1 ul li a:hover {
  background: var(--ul-2-primary, #6e9418) !important;
  color: #ffffff !important;
}

html.dark-mode .vl-footer1-section-area .vl-copyright-area p {
  color: #94a3b8 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* History Section Dark Mode Contrast Fixes */
html.dark-mode .history-boxarea a {
  color: #ffffff !important;
  transition: all 0.3s ease !important;
}

html.dark-mode .history-boxarea a:hover {
  color: var(--ul-2-primary, #6e9418) !important;
}

html.dark-mode .history1-scetion-area .history-single-slider .owl-nav button {
  color: #ffffff !important;
  background: rgba(110, 148, 24, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .history1-scetion-area .history-single-slider .owl-nav button:hover {
  background: var(--ul-2-primary, #6e9418) !important;
  border-color: var(--ul-2-primary, #6e9418) !important;
  color: #ffffff !important;
}

/* Why Choose Us Section Dots Overrides */
html.dark-mode .project1-section .project-single-boxarea .slick-dots li button {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .project1-section .project-single-boxarea .slick-dots li.slick-active button,
html.dark-mode .project1-section .project-single-boxarea .slick-dots li button:hover {
  background: var(--ul-2-primary, #6e9418) !important;
  color: #ffffff !important;
  border-color: var(--ul-2-primary, #6e9418) !important;
}

/* FAQ Section Dark Mode Optimization */
html.dark-mode .homepage-faq-section-area {
  background-color: #012420 !important;
}

html.dark-mode .faq-custom-desc {
  color: #94a3b8 !important;
}

html.dark-mode .faq-still-box {
  background: #033b34 !important;
  border: 1px solid #055249 !important;
}

html.dark-mode .faq-still-box h4 {
  color: #ffffff !important;
}

html.dark-mode .faq-still-box p {
  color: #94a3b8 !important;
}

html.dark-mode .faq-accordion-card {
  background: #033b34 !important;
  border-color: #055249 !important;
}

html.dark-mode .faq-accordion-card .faq-accordion-title,
html.dark-mode .faq-accordion-card .faq-index,
html.dark-mode .faq-accordion-card .faq-icon {
  color: #ffffff !important;
}

html.dark-mode .faq-accordion-card .faq-accordion-content p {
  color: #94a3b8 !important;
}

html.dark-mode .faq-accordion-card.active {
  background: var(--ul-2-primary, #6e9418) !important;
  border-color: var(--ul-2-primary, #6e9418) !important;
}

html.dark-mode .faq-accordion-card.active .faq-accordion-content p {
  color: #ffffff !important;
}

/* Footer Logo Dark Mode Swap */
html.dark-mode .vl-footer1-section-area .footer-logo1 .logo-light {
  display: none !important;
}

html.dark-mode .vl-footer1-section-area .footer-logo1 .logo-dark {
  display: block !important;
}

/* Dark Mode Overlap Border Adjustments */
html.dark-mode .custom-overlap-pattern .overlap-rotated-img {
  border-color: #012420 !important;
}

/* Mission & Vision Section Dark Mode Overrides */
html.dark-mode .mission-vision-section {
  background-color: #022e29 !important;
}

html.dark-mode .mission-vision-grid .stats-gradient-card {
  background: linear-gradient(135deg, #001815 0%, #033b34 100%) !important;
  border-color: #055249 !important;
}

html.dark-mode .mv-vertical-card.mission-card {
  background: linear-gradient(180deg, #2e1065 0%, #012420 100%) !important;
  border-color: #3b0764 !important;
}

html.dark-mode .mv-vertical-card.mission-card .card-text h3 {
  color: #ffffff !important;
}

html.dark-mode .mv-vertical-card.mission-card .card-text p {
  color: #cbd5e1 !important;
}

html.dark-mode .mv-vertical-card.vision-card {
  background: linear-gradient(180deg, #0c4a6e 0%, #012420 100%) !important;
  border-color: #082f49 !important;
}

html.dark-mode .mv-vertical-card.vision-card .card-text h3 {
  color: #ffffff !important;
}

html.dark-mode .mv-vertical-card.vision-card .card-text p {
  color: #cbd5e1 !important;
}

/* Scoped Dark Mode Overrides for CTA Section */
html.dark-mode .theme-cta-desc-banner {
  color: rgba(255, 255, 255, 0.9) !important; /* High contrast soft white text */
}

html.dark-mode .theme-cta-btn-primary-banner {
  color: #0d382f !important; /* Visible dark green text on white background */
  background-color: #ffffff !important;
}

html.dark-mode .theme-cta-btn-primary-banner:hover {
  color: #ffffff !important;
  background-color: transparent !important;
}

html.dark-mode .theme-cta-btn-secondary-banner {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
}

/* Mobile Sidebar Drawer Dark Mode Overrides */
html.dark-mode .ul-sidebar {
  background-color: #0C382F !important; /* Beautiful dark teal matching header */
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .ul-sidebar-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .ul-sidebar-closer {
  color: #ffffff !important;
}

html.dark-mode .ul-sidebar-closer:hover {
  color: var(--ul-2-primary, #6e9418) !important;
}

html.dark-mode .ul-sidebar-footer-title {
  color: #ffffff !important;
}

html.dark-mode .ul-sidebar-footer-social a {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .ul-sidebar-footer-social a:hover {
  color: #ffffff !important;
  background-color: var(--ul-2-primary, #6e9418) !important;
  border-color: var(--ul-2-primary, #6e9418) !important;
}

/* Mobile nav menu items inside sidebar in dark mode */
html.dark-mode .ul-sidebar .ul-header-nav a {
  color: #ffffff !important;
}

html.dark-mode .ul-sidebar .ul-header-nav a:hover,
html.dark-mode .ul-sidebar .ul-header-nav a.active {
  color: var(--ul-2-primary, #6e9418) !important;
}

/* Mobile submenu items inside sidebar in dark mode */
html.dark-mode .ul-sidebar .ul-header-submenu ul {
  background-color: #07251f !important; /* Darker green shade for contrast against main sidebar bg */
  box-shadow: none !important;
  border: none !important;
  border-top: none !important;
}

html.dark-mode .ul-sidebar .ul-header-submenu li a {
  color: rgba(255, 255, 255, 0.8) !important;
}

html.dark-mode .ul-sidebar .ul-header-submenu li a:hover {
  color: var(--ul-2-primary, #6e9418) !important;
}

/* Contact Form Optimization for Dark Mode */
html.dark-mode .contact-inner-area .contact-header-area .input-area input,
html.dark-mode .contact-inner-area .contact-header-area .input-area textarea {
  background-color: #07251f !important; /* Dark forest green input background */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

html.dark-mode .contact-inner-area .contact-header-area .input-area input:focus,
html.dark-mode .contact-inner-area .contact-header-area .input-area textarea:focus {
  border-color: var(--ul-2-primary, #6e9418) !important;
  outline: none !important;
}

html.dark-mode .contact-inner-area .contact-header-area .input-area input::placeholder,
html.dark-mode .contact-inner-area .contact-header-area .input-area textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Contact Info 3 Cards Dark Mode Optimization */
html.dark-mode .contact-inner-area .contact-bottom-box {
  background-color: #0C382F !important; /* Brand dark green cards */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .contact-inner-area .contact-bottom-box:hover {
  transform: translateY(-5px);
  border-color: var(--ul-2-primary, #6e9418) !important;
}

/* Icon wrappers */
html.dark-mode .contact-inner-area .contact-bottom-box .contact-box .icons {
  background-color: #07251f !important; /* Darker green inside the icons */
}

/* Titles (e.g. Call Us Today, Mail Information, Our Location) */
html.dark-mode .contact-inner-area .contact-bottom-box .contact-box .text h4 {
  color: #ffffff !important; /* White titles */
}

/* Subtitles (e.g. 24/7 Service, Drop Line, Address) */
html.dark-mode .contact-inner-area .contact-bottom-box .contact-box .text span {
  color: rgba(255, 255, 255, 0.7) !important; /* Soft white description */
}

/* Divider lines */
html.dark-mode .contact-inner-area .contact-bottom-box .call {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Contact numbers, emails, addresses links */
html.dark-mode .contact-inner-area .contact-bottom-box .call a {
  color: #ffffff !important;
}

html.dark-mode .contact-inner-area .contact-bottom-box .call a:hover {
  color: var(--ul-2-primary, #6e9418) !important; /* Highlight green on hover */
}