/*===============================================================
  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*/


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    /*background: #f0ece8;*/
    background: #e1edfc;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
    font-family: 'DM Sans', sans-serif;
}

/* ── Section wrapper ── */
.faq-wrap {
    /*background: #f9f7f4;*/
    background: #e1edfc;
    padding: 72px 56px;
    display: flex;
    gap: 56px;
    border-radius: 24px;
    /*max-width: 1100px;*/
    width: 100%;
    position: relative;
    overflow: hidden;
}

.faq-wrap::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, #e1edfc 0%, transparent 70%);
    pointer-events: none;
}

.faq-wrap::after {
    content: '';
    position: absolute;
    bottom: -60px; left: 20px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, #e1edfc 0%, transparent 70%);
    pointer-events: none;
}

/* ── Left column ── */
.faq-left {
    /*flex: 0 0 280px;*/
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.tagline-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.tagline-line {
    width: 28px; height: 2px;
    /*background: #7c5cbf;*/
    background: #2b5399;
    border-radius: 2px;
}

.tagline {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    /*color: #7c5cbf;*/
    color: #2b5399;
    text-transform: uppercase;
}

.faq-heading {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 600;
    color: #1c1a2e;
    line-height: 1.25;
    margin-top: 6px;
}

/*.faq-heading span { color: #7c5cbf; }*/
.faq-heading span { color: #2b5399; }

.faq-subtext {
    font-size: 13.5px;
    color: #6b6880;
    line-height: 1.65;
}

.faq-divider {
    width: 40px; height: 2px;
    background: #e2daea;
    border-radius: 2px;
}

.faq-contact {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    border: 0.5px solid #e0d8ef;
}

.contact-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #f0eafb;
    display: flex;
    align-items: center;
    justify-content: center;
    /*color: #7c5cbf;*/
    color: #2b5399;
    font-size: 20px;
    flex-shrink: 0;
}

.contact-label {
    font-size: 11px;
    color: #9990ae;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.contact-phone {
    font-size: 14px;
    font-weight: 500;
    color: #1c1a2e;
    text-decoration: none;
    transition: color 0.2s;
}

/*.contact-phone:hover { color: #7c5cbf; }*/
.contact-phone:hover { color: #2b5399; }

.faq-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /*background: #7c5cbf;*/
    background: #2b5399;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    padding: 12px 24px;
    border-radius: 100px;
    transition: background 0.2s;
    width: fit-content;
    border: none;
    cursor: pointer;
}

/*.faq-btn:hover { background: #6a4daa; }*/
.faq-btn:hover { background: #2b5399; }

/* ── Right column ── */
.faq-right {
    flex: 1;
    position: relative;
    z-index: 1;
}

/* ── Accordion container ── */
#faqContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Each accordion item ── */
.accrodion {
    background: #ffffff;
    border-radius: 14px;
    border: 0.5px solid #e8e2f3;
    overflow: hidden;
    transition: box-shadow 0.25s, border-color 0.25s;
}

.accrodion.active {
    box-shadow: 0 4px 20px rgba(124, 92, 191, 0.08);
    border-color: #c8b8e8;
}

/* Question row */
.accrodion-title {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 12px;
    user-select: none;
}

.accrodion-title h4 {
    font-size: 14px;
    font-weight: 500;
    color: #1c1a2e;
    flex: 1;
    font-family: 'DM Sans', sans-serif;
}

/* Plus/X icon via ::after */
.accrodion-title::after {
    content: '+';
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f0eafb;
    /*color: #7c5cbf;*/
    color: #2b5399;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.3s, color 0.2s;
}

.accrodion.active .accrodion-title::after {
    /*background: #7c5cbf;*/
    background: #2b5399;
    color: #fff;
    transform: rotate(45deg);
}

/* Answer panel */
.accrodion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.accrodion.active .accrodion-content {
    max-height: 300px;
}

.accrodion-content .inner {
    padding: 0 22px 18px;
    margin: 0 22px;
    border-top: 0.5px solid #f0eafb;
}

.accrodion-content .inner p {
    padding-top: 14px;
    margin: 0;
    font-size: 13.5px;
    /*color: #6b6880;*/
    color: #2b5399;
    line-height: 1.7;
    font-family: 'DM Sans', sans-serif;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .faq-wrap {
        flex-direction: column;
        padding: 48px 28px;
        gap: 36px;
    }
    .faq-left { flex: none; }
    .faq-heading { font-size: 26px; }
}