/*===============================================================
  light-theme.css  —  v2 (scoped approach)
  ---------------------------------------------------------------
  Strategy:
    1. Override CSS variables in :root → content areas go light
    2. Restore ORIGINAL dark values on nav / topbar / footer via
       element-scoped custom properties → those stay unchanged
    3. Explicit overrides for hardcoded dark colours in content
================================================================*/


/* ---------------------------------------------------------------
   1. ROOT — remap variables so CONTENT areas use light palette
---------------------------------------------------------------- */
:root {
  --techguru-black: #f0f4ff;
  /* page/section bg  → light blue-white */
  --techguru-black-rgb: 240, 244, 255;

  --techguru-white: #1a1a2e;
  /* heading/text     → dark navy        */
  --techguru-white-rgb: 26, 26, 46;

  --techguru-gray: #4a5568;
  /* body copy        → mid slate-gray   */
  --techguru-gray-rgb: 74, 85, 104;

  --techguru-base: #3D72FC;
  /* accent           → blue             */
  --techguru-base-rgb: 61, 114, 252;

  /* Light-theme utility tokens */
  --lt-bg-page: #f0f4ff;
  --lt-bg-card: #ffffff;
  --lt-shadow: 0px 4px 30px rgba(26, 26, 46, 0.08);
  --lt-shadow-lg: 0px 10px 60px rgba(26, 26, 46, 0.12);
}


/* ---------------------------------------------------------------
   2. RESTORE ORIGINAL DARK VARIABLES
      Scoped only to footer, sidebar, and page-header.
      Navbar is now LIGHT (white bg, dark text).
---------------------------------------------------------------- */
.mobile-nav__wrapper,
.xs-sidebar-group,
.site-footer,
.site-footer-two,
.page-header {
  --techguru-black: #0B192C;
  --techguru-black-rgb: 11, 25, 44;

  --techguru-white: #ffffff;
  --techguru-white-rgb: 255, 255, 255;

  --techguru-gray: #C5C8CD;
  --techguru-gray-rgb: 197, 200, 205;

  --techguru-base: #FFD25D;
  --techguru-base-rgb: 255, 210, 93;
}


/* ---------------------------------------------------------------
   3. BODY — light background, gray text
---------------------------------------------------------------- */
body {
  background-color: #f0f4ff;
  color: #4a5568;
}


/* ---------------------------------------------------------------
   4. GLOBAL HEADINGS — dark in content areas
      (nav / footer / page-header restore via scoped vars above)
---------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1a1a2e;
}


/* ---------------------------------------------------------------
   5. PRELOADER
---------------------------------------------------------------- */
.loader {
  background: #f0f4ff;
}


/* ---------------------------------------------------------------
   LIGHT NAVBAR & TOPBAR
   White background, dark text links, blue accent hover.
---------------------------------------------------------------- */

/* Top announcement bar — light theme */
.main-menu-two__top {
  background-color: #f8faff;
  border-bottom: 1px solid rgba(26, 26, 46, 0.08);
}

.main-menu-two__top:before {
  display: none;
}

.main-menu-two__top-text,
.main-menu-two__contact-list li .text p,
.main-menu-two__contact-list li .text p a {
  color: #4a5568;
}

.main-menu-two__contact-list li .text p a:hover {
  color: #3D72FC;
}

.main-menu-two__contact-list li .icon i {
  color: #3D72FC;
}

/* Nav wrapper — white bg */
.main-menu-two__wrapper,
.main-menu-three__wrapper,
.main-menu__wrapper {
  background-color: #ffffff;
  box-shadow: 0px 2px 20px rgba(26, 26, 46, 0.08);
}

/* Nav links — dark */
.main-menu .main-menu__list>li>a,
.stricky-header .main-menu__list>li>a {
  color: #1a1a2e;
}

.main-menu .main-menu__list>li.current>a,
.main-menu .main-menu__list>li:hover>a,
.stricky-header .main-menu__list>li.current>a,
.stricky-header .main-menu__list>li:hover>a {
  color: #3D72FC;
}

/* Dropdown caret arrow */
.main-menu .main-menu__list>li.dropdown>a::after {
  color: #1a1a2e;
}

/* Dropdown panels */
.main-menu .main-menu__list>li>ul,
.main-menu .main-menu__list>li>ul>li>ul,
.stricky-header .main-menu__list>li>ul,
.stricky-header .main-menu__list>li>ul>li>ul {
  background-color: #ffffff;
  box-shadow: 0px 10px 40px rgba(26, 26, 46, 0.12);
}

.main-menu .main-menu__list>li>ul>li>a,
.main-menu .main-menu__list>li>ul>li>ul>li>a,
.stricky-header .main-menu__list>li>ul>li>a,
.stricky-header .main-menu__list>li>ul>li>ul>li>a {
  background-color: #ffffff;
  color: #4a5568;
}

.main-menu .main-menu__list>li>ul>li:hover>a,
.main-menu .main-menu__list>li>ul>li>ul>li:hover>a,
.stricky-header .main-menu__list>li>ul>li:hover>a,
.stricky-header .main-menu__list>li>ul>li>ul>li:hover>a {
  background-color: rgba(61, 114, 252, 0.08);
  color: #3D72FC;
}

/* Sticky header */
.stricky-header {
  background-color: #ffffff;
  box-shadow: 0px 4px 20px rgba(26, 26, 46, 0.10);
}

/* Mobile toggler icon */
.main-menu .mobile-nav__toggler {
  color: #1a1a2e;
}

/* Search + sidebar icon */
.main-menu-two__search {
  color: #1a1a2e;
  border-color: rgba(26, 26, 46, 0.25);
}

/* Logo on light nav */
/*.main-menu-two__logo img,*/
.main-menu-three__logo img,
.main-menu__logo img {
  /* If logo is a white/light PNG, invert it to dark */
  filter: brightness(0) saturate(100%);
}

/* Home showcase mega-menu (inside nav) */
.home-showcase__title {
  background-color: #0B192C;
  color: #ffffff;
}

.home-showcase__buttons {
  background-color: rgba(11, 25, 44, 0.70);
}


/* ---------------------------------------------------------------
   6. SCROLL-TO-TOP
---------------------------------------------------------------- */
.scroll-to-top__inner {
  background-color: #f0f4ff;
}


/* ---------------------------------------------------------------
   7. DROPDOWN PANELS  (inside nav — hardcoded #0B192C)
      nav/topbar vars are restored in scope 2, so var() calls
      resolve correctly. Only hardcoded hex values need fixing.
      Since user wants navbar UNCHANGED → keep dropdowns dark.
      Nothing to override here.
---------------------------------------------------------------- */


/* ---------------------------------------------------------------
   8. STRICKY HEADER — background already dark via scoped vars.
      The original rule sets background-color:#fff for sticky,
      override it back to the dark nav colour.
---------------------------------------------------------------- */
.stricky-header {
  background-color: #0B192C;
}


/* ---------------------------------------------------------------
   9. HOME SHOWCASE (mega-menu inside nav — keep dark)
      Already inherits dark vars from .main-header-two scope.
      Only the title bg was hardcoded; restore it.
---------------------------------------------------------------- */
.home-showcase__title {
  background-color: #0B192C;
  color: #ffffff;
}

.home-showcase__buttons {
  background-color: rgba(11, 25, 44, 0.70);
}


/* ---------------------------------------------------------------
   10. SECTION TITLES (in content areas)
---------------------------------------------------------------- */
.section-title__title {
  color: #1a1a2e;
}


/* ---------------------------------------------------------------
   11. SERVICES SECTIONS
---------------------------------------------------------------- */
.servces-one,
.services-three {
  background-color: #f8faff;
}

.servces-one::before,
.services-three::before {
  background-color: rgba(61, 114, 252, 0.03);
}

.services-one__services-single {
  border-bottom-color: rgba(26, 26, 46, 0.10);
}

.services-one__title a,
.services-two__title a,
.services-three__title a {
  color: #1a1a2e;
}

.services-one__arrow a {
  color: #1a1a2e;
}

.services-three__single:before {
  border-color: rgba(26, 26, 46, 0.10);
}

.services-three__list li .icon span,
.services-three__list li .text p,
.services-three__btn {
  color: #1a1a2e;
}


/* ---------------------------------------------------------------
   12. SERVICE DETAILS PAGE (inner page sidebar + content)
---------------------------------------------------------------- */
.services-details {
  background-color: #f0f4ff;
}

/* Left sidebar dark card (#0D1D35 hardcoded) → white */
.services-details__services-list-box {
  background-color: #ffffff;
  box-shadow: var(--lt-shadow);
}

.services-details__services-list-title {
  color: #1a1a2e;
  border-bottom-color: rgba(26, 26, 46, 0.12);
}

/* List links — translucent dark → translucent light */
.services-details__services-list li a {
  background-color: rgba(26, 26, 46, 0.05);
  color: #4a5568;
}

.services-details__services-list li:hover a,
.services-details__services-list li.active a {
  color: #ffffff;
  /* gradient overlay handles bg */
}

/* Content area */
.services-details__title-1,
.services-details__title-2 {
  color: #1a1a2e;
}

.services-details__text-1,
.services-details__text-2,
.services-details__text-3 {
  color: #4a5568;
}

.services-details__points-list li p {
  color: #1a1a2e;
}

/* Need-help block sits on a photo overlay — keep white text */
.services-details__need-help-title,
.services-details__need-help-number a {
  color: #ffffff;
}


/* ---------------------------------------------------------------
   13. ABOUT SECTIONS
---------------------------------------------------------------- */
.about-two {
  background-color: #f0f4ff;
}

.about-three {
  background-color: #f8faff;
}

.about-two__client-box {
  background-color: #ffffff;
}

/* Hardcoded #08111F borders → light */
.about-two__img-2::before,
.about-two__client-img img,
.about-two__client-img-list li a {
  border-color: #f0f4ff;
}

.about-two__experience-box::before,
.about-two__call-box::before {
  background-color: rgba(26, 26, 46, 0.20);
}

.about-two__experience-text,
.about-two__client-text,
.about-two__client-text span {
  color: #4a5568;
}

.about-two__call-content p a,
.about-one__call-box .content p a {
  color: #1a1a2e;
}

.about-one__points li .icon span,
.about-one__call-box .icon span,
.about-two__points-list li .icon span {
  color: #3D72FC;
}

.about-one__points li .content h3 {
  color: #1a1a2e;
}

.about-two__points-box {
  border-top-color: rgba(26, 26, 46, 0.15);
  border-bottom-color: rgba(26, 26, 46, 0.15);
}

.about-three__progress-box .progress-box .bar {
  background-color: rgba(26, 26, 46, 0.10);
}

.about-three__progress-box .progress-box .bar-title {
  color: #1a1a2e;
}


/* ---------------------------------------------------------------
   14. GENERIC SECTION BACKGROUNDS
       Cover all named content sections that use --techguru-black
       as background (now resolved to #f0f4ff via :root override).
       Only explicit hardcoded dark values need fixing here.
---------------------------------------------------------------- */

/* Sections with slightly brighter card bg */
.servces-one,
.about-two,
.services-three,
.about-three,
.process-one,
.why-choose-one,
.testimonial-one,
.blog-one,
.pricing-one,
.team-one,
.faq-one,
.skill-one {
  background-color: #f8faff;
}

/* Sections with base page bg */
.counter-one,
.counter-two,
.counter-three,
.portfolio-one,
.portfolio-two,
.portfolio-three,
.process-two,
.contact-one,
.contact-two,
.contact-three,
.testimonial-two,
.testimonial-three,
.team-two,
.pricing-two,
.event-one,
.blog-two,
.blog-three,
.why-choose-two,
.newsletter-one,
.newsletter-two,
.brand-one,
.brand-two,
.sliding-text-one,
.faq-two,
.gallery-one,
.error-page,
.feature-one,
.cta-one,
.cta-two {
  background-color: #f0f4ff;
}


/* ---------------------------------------------------------------
   15. CARD ELEMENTS  (explicit bg + shadow)
---------------------------------------------------------------- */
.services-three__single,
.portfolio-one__single,
.process-one__single,
.team-one__single,
.pricing-one__single,
.blog-one__single,
.testimonial-one__single,
.faq-one__single,
.why-choose-one__single,
.feature-one__single,
.counter-one__single,
.event-one__single,
.cta-one__inner {
  background-color: #ffffff;
  box-shadow: var(--lt-shadow);
}

.services-three__single:before {
  border-color: rgba(26, 26, 46, 0.09);
}


/* ---------------------------------------------------------------
   16. MAIN SLIDER — LIGHT THEME
       Keep the full-width background photos.
       Add a bright white overlay so images feel light.
       Use white text (photos are moody/dark so white reads well).
       The slider is in content scope so --techguru-black = #f0f4ff.
       We explicitly set bg + overlay below.
---------------------------------------------------------------- */

/* Section bg (behind the photo) — match page bg */
.main-slider-two {
  background-color: #f0f4ff;
  position: relative;
}

.main-slider-two .swiper-slide {
  background-color: #f0f4ff;
}

/* Light overlay on top of background images */
.main-slider-two__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fix the dark gradients over the slider images */
.main-slider-two__bg::before {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 78.9%);
  background: none;
}

.main-slider-two__bg::after {
  background: none;
  opacity: 1;
}

/* Slide content above the overlay */
      .main-slider-two__content {
      position: relative;
      z-index: 10;
    }

    /* Title — dark navy on light overlay */
    .main-slider-two__title {
      color: #1a1a2e;
    }

    .main-slider-two__title span {
      color: #3D72FC;
    }

    /* Sub-title text */
    .main-slider-two__sub-title {
      color: #1a1a2e;
    }

    /* Sub-title pill bg */
    .main-slider-two__sub-title-box {
      background-color: rgba(61, 114, 252, 0.08);
    }

    .main-slider-two__sub-title-box::before {
      border-color: rgba(61, 114, 252, 0.25);
      background: none;
    }

    /* Body text */
    .main-slider-two__text {
      color: #4a5568;
    }

    /* Social sidebar */
    .main-slider-two__social-title {
      color: #1a1a2e;
    }

    .main-slider-two__social-box-inner a {
      color: #1a1a2e;
      border-color: rgba(26, 26, 46, 0.25);
    }

    .main-slider-two__social-box-inner a:hover {
      color: #3D72FC;
    }

    /* Bullet pagination */
    .swiper-pagination-bullet {
      background-color: rgba(26, 26, 46, 0.30);
    }

    .swiper-pagination-bullet-active {
      background-color: #3D72FC;
    }

    /* Nav arrow buttons */
    .main-slider-two__nav .swiper-button-prev,
    .main-slider-two__nav .swiper-button-next {
      background-color: #ffffff;
      color: #1a1a2e;
      box-shadow: 0px 4px 15px rgba(26, 26, 46, 0.12);
    }

    .main-slider-two__nav .swiper-button-prev:hover,
    .main-slider-two__nav .swiper-button-next:hover {
      background-color: #3D72FC;
      color: #ffffff;
    }

    /* Right menu links on slider */
    .main-slider-two__menu li a {
      color: #1a1a2e;
      border-color: rgba(26, 26, 46, 0.20);
    }

    .main-slider-two__menu li a:hover {
      color: #3D72FC;
    }

    /* index.html main-slider (dark photo hero — keep dark) */
    .main-slider,
    .main-slider .swiper-slide {
      background-color: #0B192C;
    }

    .main-slider__img::before {
      background: linear-gradient(0deg, #0B192C 23%, rgba(11, 25, 44, 0) 100%);
    }


    /* ---------------------------------------------------------------
   17. SHADOW BOX (dropdown panels — inside dark nav, unchanged)
---------------------------------------------------------------- */
    .shadow-box {
      box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.30);
    }


    /* ---------------------------------------------------------------
   18. BUTTONS
---------------------------------------------------------------- */
    .thm-btn:hover {
      color: #ffffff;
    }


    /* ---------------------------------------------------------------
   19. FORM INPUTS (in content areas)
---------------------------------------------------------------- */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
      background-color: #ffffff;
      color: #1a1a2e;
      border-color: rgba(26, 26, 46, 0.18);
    }

    input[type="text"]::placeholder,
    input[type="email"]::placeholder,
    input[type="tel"]::placeholder,
    textarea::placeholder {
      color: #8c9aaf;
    }


    /* ---------------------------------------------------------------
   20. HARDCODED DARK BG OVERRIDES in content sections
       Some CSS rules use hardcoded hex values (not variables).
       Override only the ones that appear in content sections.
---------------------------------------------------------------- */

    /* about-two img inner border hardcoded as #08111F */
    .about-two__img-2::before {
      border-color: #f0f4ff;
    }

    /* Main slider bg gradient uses hardcoded rgb(11,25,44) — already
   handled in section 16 above*/