/*==============================================================
  SV Enviro Labs — Responsive Fixes + Dark/Light Mode
  Load this file AFTER style.css and responsive.css so it can
  safely override fixed-pixel / non-responsive rules.
================================================================*/

/* -------------------------------------------------
   0. Base sanity fixes (apply at every width)
-------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }

img, video, iframe { max-width: 130%; height: auto; }
.hero-thumb img, .about-thumb img, .skills-thumb img { height: auto; }

.container { width: 100%; padding-left: 15px; padding-right: 15px; }

/* Many rows in this template only declare col-lg-*/col-md-* classes
   with no small/extra-small fallback, so on phones the columns sit
   side-by-side instead of stacking. Force a safe single-column stack
   below the tablet breakpoint. */
@media (max-width: 767.98px) {
  .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Columns that only define col-lg-* (no col-md-* fallback) still need
   fixing between 768px and 991px */
@media (max-width: 991.98px) {
  .about-area > .container > .row > .col-lg-6,
  .skill-area > .container > .row > .col-lg-7,
  .skill-area > .container > .row > .col-lg-5,
  .service-area .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* -------------------------------------------------
   1. Header / Navigation
-------------------------------------------------- */
.header-logo img { max-height: 56px; width: auto; }

/* Hide the desktop mega-menu below lg (the mobile-menu-area / meanmenu
   already carries d-lg-none, but the desktop nav has no matching
   d-none d-lg-block, so both menus were showing at once on phones/tablets) */
@media (max-width: 991.98px) {
  .header-area .header-menu { display: none !important; }
  .header-area .col-lg-4 { flex: 0 0 100%; max-width: 100%; text-align: center; }
  .home-two.header-area { margin-bottom: 0; padding: 10px 0; }
  .header-area .row.add-bg { padding: 8px 10px; }
}
@media (min-width: 992px) {
  .mobile-menu-area { display: none !important; }
}

@media (max-width: 575.98px) {
  .header-logo img { max-height: 44px; }
  .mean-container .mean-bar::before { font-size: 18px; top: 20px; }
  .mean-container .mean-bar { min-height: 50px; }
  .mean-container a.meanmenu-reveal { padding: 14px; }
}

/* -------------------------------------------------
   2. Hero Area (home-two slider)
-------------------------------------------------- */
@media (max-width: 991.98px) {
  .hero-area.home-two {
    height: auto;
    padding: 130px 0 60px;
  }
  .home-two .hero-thumb {
    position: static;
    top: 0;
    left: 0;
    margin-top: 30px;
    text-align: center;
  }
  .home-two .hero-social-icon,
  .home-two .hero-shape {
    display: none;
  }
  .hero-content .main-title,
  .hero-content h1.main-title,
  .hero-content h2.main-title { font-size: 34px; line-height: 1.25; }
  .hero-content .main-title-2,
  .hero-content h1.main-title-2,
  .hero-content h2.main-title-2,
  .hero-content h3.main-title-2 { font-size: 24px; }
  .hero-content p.hero-desc { width: 100%; }
}

@media (max-width: 575.98px) {
  .hero-area.home-two { padding: 110px 0 50px; }
  .hero-content .main-title,
  .hero-content h1.main-title,
  .hero-content h2.main-title { font-size: 26px; }
  .hero-content .main-title-2,
  .hero-content h1.main-title-2,
  .hero-content h2.main-title-2,
  .hero-content h3.main-title-2 { font-size: 19px; }
  .hero-content .sub-title { font-size: 14px; }
  .echofy-button a { padding: 12px 22px !important; font-size: 14px; }
}

/* Hero bullet-list slides (Welcome / Community slides) */
.hero-content .hero-highlights { width: 100%; }
.hero-content .hero-highlights ul {
  list-style: none;
  margin: 14px 0;
  padding: 0;
}
.hero-content .hero-highlights ul li {
  position: relative;
  padding: 4px 0 4px 26px;
  font-size: 15px;
  line-height: 1.5;
}
.hero-content .hero-highlights ul li i {
  position: absolute;
  left: 0;
  top: 6px;
  color: #49AF45;
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .hero-content .hero-highlights ul li { font-size: 13px; padding-left: 22px; }
}
[data-theme="dark"] .hero-content .hero-highlights ul li i { color: #6adf63; }

/* -------------------------------------------------
   3. Accreditation tab-track / grid / cards
-------------------------------------------------- */
@media (max-width: 575.98px) {
  .tab-track { padding: 14px; border-radius: 8px; }
  .tabs { gap: 8px; }
  .tab { padding: 8px 14px; font-size: 13px; }
  .grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
}

/* -------------------------------------------------
   4. Service slider + flipbook (skill-area)
-------------------------------------------------- */
@media (max-width: 991.98px) {
  .slide { flex: 0 0 calc(50% - 20px); }
}
@media (max-width: 767.98px) {
  .slide { flex: 0 0 calc(100% - 20px); }
  .slider-controls { top: auto; bottom: -46px; position: relative; margin-top: 10px; }
}

@media (max-width: 767.98px) {
  .flip-btn { flex: 1 1 calc(50% - 10px); font-size: 12px; padding: 10px 12px; }
  .flipbook { min-height: 310px; }
}
@media (max-width: 420px) {
  .flip-btn { flex: 1 1 100%; }
  .flipbook { min-height: 260px; }
}

/* -------------------------------------------------
   5. Counter / Process / Testimonial / Brand spacing
-------------------------------------------------- */
@media (max-width: 991.98px) {
  .process-area-two { padding: 90px 0 60px; margin-top: 0; }
  .counter-area { padding: 60px 0 90px; }
  .testimonial-area { padding: 70px 0 0; }
  .single-testimonial-box { margin: 40px 10px; }
}
@media (max-width: 575.98px) {
  .counter-content h4, .counter-content span { font-size: 32px; }
  .single-process-box-two { padding: 0 10px; }
  .single-process-box-two:before { display: none; }
}

/* -------------------------------------------------
   5b. Quality Policy tabs (Bootstrap nav-pills) + search popup
-------------------------------------------------- */
@media (max-width: 767.98px) {
  .about-section .nav-pills { gap: 8px; }
  .about-section .nav-pills .nav-link { font-size: 13px; padding: 8px 14px; }
  .about-section .about-img { text-align: center; margin-bottom: 20px; }
  .about-section .echofy-button.style-two { text-align: center; margin-bottom: 25px; }
}

/* -------------------------------------------------
   6. Footer
-------------------------------------------------- */
@media (max-width: 991.98px) {
  .footer-area { padding: 80px 0 0; text-align: center; }
  .footer-social-icon { text-align: center; margin-top: 15px; }
  .footer-contact-info { justify-content: center; }
  #mapContainer { margin-top: 15px; }
}
@media (max-width: 575.98px) {
  .footer-widget-title h4 { font-size: 18px; }
  .map-switcher-buttons button { padding: 5px 10px; font-size: 12px; }
}

/* -------------------------------------------------
   7. Floating Theme Toggle Button
   (sits beside the existing scroll-to-top .prgoress_indicator,
   which is fixed at right:26px; bottom:35px; 46x46)
-------------------------------------------------- */
.theme-toggle-btn {
  position: fixed;
  right: 86px;
  bottom: 35px;
  height: 46px;
  width: 46px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18), inset 0 0 0 2px rgba(73,175,69,0.25);
  color: #49AF45;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999999999;
  transition: all 200ms linear;
}
.theme-toggle-btn:hover {
  box-shadow: 0 2px 14px rgba(0,0,0,0.25), inset 0 0 0 2px #49AF45;
}
.theme-toggle-btn .icon-moon { display: inline-block; }
.theme-toggle-btn .icon-sun { display: none; }

@media (max-width: 575.98px) {
  .theme-toggle-btn { right: 76px; bottom: 26px; height: 40px; width: 40px; font-size: 16px; }
  .prgoress_indicator { right: 20px; bottom: 26px; height: 40px; width: 40px; }
  .prgoress_indicator::after, .prgoress_indicator::before { height: 40px; width: 40px; line-height: 40px; }
}

/* -------------------------------------------------
   8. DARK MODE
   Activated by data-theme="dark" on <html>
-------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body {
  background-color: #0e1512;
  color: #dfe6e2;
}

/* Toggle button swaps icon + colors in dark mode */
[data-theme="dark"] .theme-toggle-btn {
  background: #16211c;
  color: #6adf63;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(106,223,99,0.3);
}
[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle-btn .icon-sun { display: inline-block; }

/* Header */
/* [data-theme="dark"] .header-area:not(.home-two) { background: #0e1512 !important; } */
[data-theme="dark"] .home-two.header-area .row.add-bg { background: #1c3b1a; }
[data-theme="dark"] .header-menu ul li a { color: #dfe6e2; }
[data-theme="dark"] .mean-container .mean-bar { background: #1c3b1a; }
[data-theme="dark"] .mean-container .mean-nav ul li,
[data-theme="dark"] .mean-container .mean-nav ul li a { background: #16211c; color: #dfe6e2; }

/* Hero */
[data-theme="dark"] .hero-area.home-two::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6,14,10,0.55);
  z-index: 0;
}
[data-theme="dark"] .hero-area.home-two { position: relative; }
[data-theme="dark"] .hero-area.home-two .container { position: relative; z-index: 1; }
[data-theme="dark"] .home-two .hero-content h1,
[data-theme="dark"] .home-two .hero-content h2,
[data-theme="dark"] .home-two .hero-content h3,
[data-theme="dark"] .home-two .hero-content h4,
[data-theme="dark"] .home-two .hero-content h5,
[data-theme="dark"] .home-two .hero-content p,
[data-theme="dark"] .home-two .hero-content li { color: #eef3f0 !important; }

/* Accreditation tabs / cards */
[data-theme="dark"] .tab-track { background: #163315; }
[data-theme="dark"] .card { background: #16211c; color: #dfe6e2; }
[data-theme="dark"] .card p { color: #a9b3ae; }
[data-theme="dark"] .tab.active { background: #16211c; color: #6adf63; }

/* About / Service / Skill */
[data-theme="dark"] .about-area,
[data-theme="dark"] .service-area,
[data-theme="dark"] .skill-area,
[data-theme="dark"] .process-area-two,
[data-theme="dark"] .testimonial-area {
  background-color: #0e1512;
  background-blend-mode: multiply;
}
[data-theme="dark"] .about-area { background-image: linear-gradient(rgba(6,14,10,0.82), rgba(6,14,10,0.82)), url(../images/home1/about-bg.jpg); }
[data-theme="dark"] .service-area { background-image: linear-gradient(rgba(6,14,10,0.75), rgba(6,14,10,0.75)), url(../images/home1/service-bg.jpg); }

[data-theme="dark"] .about-box-content h4,
[data-theme="dark"] .section-title h1,
[data-theme="dark"] .section-title h2,
[data-theme="dark"] .section-title h4,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5 { color: #eef3f0; }
[data-theme="dark"] p, [data-theme="dark"] li { color: #c7d1cb; }

[data-theme="dark"] .service-content,
[data-theme="dark"] .slide,
[data-theme="dark"] .skills-item-content,
[data-theme="dark"] .single-testimonial-box,
[data-theme="dark"] .page {
  background: #16211c !important;
  color: #dfe6e2;
}
[data-theme="dark"] .slide-content h4 { color: #6adf63; }
[data-theme="dark"] .slide-content p { color: #a9b3ae; }
[data-theme="dark"] .flip-btn { background: #16211c; border-color: #49AF45; color: #6adf63; }
[data-theme="dark"] .flip-btn.active, [data-theme="dark"] .flip-btn:hover { background: #49AF45; color: #0e1512; }
[data-theme="dark"] .page h3 { color: #eef3f0; }
[data-theme="dark"] .page-link { color: #6adf63; }

/* Counter / Process / Testimonial / Brand / Footer (already dark photo
   backgrounds with white text — just deepen the overlay slightly) */
[data-theme="dark"] .counter-area,
[data-theme="dark"] .brand-area #brand-bg,
[data-theme="dark"] .footer-area {
  position: relative;
}
[data-theme="dark"] .counter-area::before,
[data-theme="dark"] .footer-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
}
[data-theme="dark"] .counter-area .container,
[data-theme="dark"] .footer-area .container { position: relative; z-index: 1; }

[data-theme="dark"] #mapFrame { filter: invert(90%) hue-rotate(180deg) contrast(90%); }

/* Scrollbar (webkit) */
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0e1512; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2c3b30; border-radius: 6px; }


[data-theme="dark"] .contacts_container {
  color: #04c728;
}

[data-theme="dark"] .row.add-bg {
    background-color: black;
}

[data-theme="dark"] .header-area .header-menu ul li a {
    color: #eef3f0;
}
[data-theme="dark"] .header-area .header-menu ul li a:hover {
    color: #6adf63;
}


[data-theme="dark"] .clients-header, .clients-header h2, .clients-header h2 strong, .clients-header p {
  color: #ffffff; 
}

/* Quality-policy tabs (Bootstrap nav-pills) + inline .section block +
   search popup, all newly added to the page markup */
[data-theme="dark"] .section { background: #0e1512; color: #dfe6e2; }
[data-theme="dark"] .about-section .nav-pills .nav-link {
  background: #16211c;
  color: #dfe6e2;
}
[data-theme="dark"] .about-section .nav-pills .nav-link.active {
  background: #49AF45;
  color: #0e1512;
}
[data-theme="dark"] .about-content h3,
[data-theme="dark"] .about-content p,
[data-theme="dark"] .about-list-item,
[data-theme="dark"] .about-list-item li { color: #c7d1cb; }
[data-theme="dark"] .about-list-item b { color: #eef3f0; }

[data-theme="dark"] .search-popup { background: rgba(8,14,11,0.95); }
[data-theme="dark"] .search-popup input[type="search"] {
  background: #16211c;
  color: #dfe6e2;
  border-color: #2c3b30;
}


/* -------------------------------------------------
   9. Modern inline-styled pages (services, careers,
   contact, enquiries, feedback) — dark mode overrides
-------------------------------------------------- */
[data-theme="dark"] .sv-hero,
[data-theme="dark"] .sv-services-section,
[data-theme="dark"] .sv-capability-section,
[data-theme="dark"] .sv-cta-section,
[data-theme="dark"] .sv-filter-section {
  background: #0e1512 !important;
}
[data-theme="dark"] .sv-card,
[data-theme="dark"] .sv-cap-item,
[data-theme="dark"] .office-card,
[data-theme="dark"] .job-card,
[data-theme="dark"] .enquiry-card,
[data-theme="dark"] .feedback-card {
  background: #16211c !important;
  border-color: #2c3b30 !important;
  color: #dfe6e2;
}
[data-theme="dark"] .sv-card-title,
[data-theme="dark"] .sv-section-title,
[data-theme="dark"] .job-title,
[data-theme="dark"] .enquiry-card h2,
[data-theme="dark"] .feedback-card h2 {
  color: #eef3f0 !important;
}
[data-theme="dark"] .sv-card-desc,
[data-theme="dark"] .job-desc,
[data-theme="dark"] .job-location,
[data-theme="dark"] .sv-section-desc {
  color: #a9b3ae !important;
}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .filter-container select {
  background: #1c2622;
  border-color: #2c3b30;
  color: #dfe6e2;
}
[data-theme="dark"] .modal-content {
  background: #16211c;
  color: #dfe6e2;
}

[data-theme="dark"] .office-body p {
	color: #fff;
}


@media (max-width: 767.98px) {
  .sv-hero-stats { gap: 20px; }
  .sv-hero .col-lg-5 { margin-top: 24px; }
  .sv-services-grid { grid-template-columns: 1fr !important; }
  .sv-card-wide { grid-column: span 1 !important; }
  .sv-card-wide .sv-card-body { grid-template-columns: 1fr !important; }
  .sv-caps-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .job-listings { grid-template-columns: 1fr !important; }
  .founder-row { flex-direction: column !important; }
  .founder-image, .founder-content { flex: 1 1 100% !important; }
  .ewaste-container { grid-template-columns: 1fr !important; }
}


/* footer css */
@media (max-width: 991.98px) {
  .footer-area .row.align-items-center.border-add > div {
    text-align: center;
    margin-bottom: 20px;
  }
  .contact-info-box:before,
  .contact-info-box:after { display: none; }
}
@media (max-width: 575.98px) {
  .footer-logo img { max-width: 140px; }
  .footer-widget-title h4 { font-size: 16px; }
  .footer-bottom .row > div { text-align: center !important; margin-bottom: 8px; }
  .footer-bottom-content ul { text-align: center !important; }
}

/* careers css */