/* ============================================================
   theme.css — Light / Dark theme variables & techy enhancements
   OmniByte Technologies
   ============================================================ */

/* ── CSS Variables ── */
:root {
  --th-bg:          #ffffff;
  --th-bg2:         #f9f9f9;
  --th-bg3:         #f0f4f8;
  --th-surface:     #ffffff;
  --th-text:        #1a1a2e;
  --th-text-muted:  #555;
  --th-border:      #ddd;
  --th-header-bg:   #ddd;
  --th-nav-bg:      #ffffff;
  --th-nav-text:    #222;
  --th-drop-bg:     rgba(255,255,255,0.95);
  --th-card-bg:     #ffffff;
  --th-card-shadow: rgba(0,0,0,0.1);
  --th-section-alt: #f5f7fa;
  --th-form-bg:     #f9f9f9;
  --th-input-bg:    #ffffff;
  --th-input-text:  #222;
  --th-testimonial-overlay: rgba(255,255,255,0.82);
  --th-marginDiv-bg: #7d42e50a;
  --blue: #0088c4;
  --purple: #673AB7;
}

body.dark {
  --th-bg:          #07090f;
  --th-bg2:         #0e1220;
  --th-bg3:         #111827;
  --th-surface:     #0e1220;
  --th-text:        #e2e8f0;
  --th-text-muted:  rgba(255,255,255,0.55);
  --th-border:      rgba(0,136,196,0.22);
  --th-header-bg:   #07090f;
  --th-nav-bg:      #0e1220;
  --th-nav-text:    #e2e8f0;
  --th-drop-bg:     rgba(14,18,32,0.97);
  --th-card-bg:     rgba(255,255,255,0.04);
  --th-card-shadow: rgba(0,136,196,0.15);
  --th-section-alt: #111827;
  --th-form-bg:     rgba(255,255,255,0.04);
  --th-input-bg:    rgba(255,255,255,0.07);
  --th-input-text:  #e2e8f0;
  --th-testimonial-overlay: rgba(7,9,15,0.88);
  --th-marginDiv-bg: rgba(103,58,183,0.07);
}

/* ── Global transitions ── */
body, header, section, .NavDiv, .servicesDropDown, .TestimoanialDivMain,
.CaseStudyMain, .form-wrapper, .blogMain, .abouMission, .CstmBox,
.whyPoint, .abtCall, input, textarea, select {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ── Apply variables to existing selectors ── */
body { background-color: var(--th-bg); color: var(--th-text); }
header { background-color: var(--th-header-bg) !important; }
.topLinksInnerDiv { border-right-color: var(--th-border); }
.topLinksInnerDiv a { color: var(--th-nav-text); }
.topLinksInnerDiv a i { color: var(--th-nav-text); }
section:not(.bannerDivMain):not(#testimonials):not(.logoSection):not(.servicesBg):not(.counterBg):not(.footer-section):not(.hero-saas):not(.tools-section):not(.intro-section) {
  background-color: var(--th-bg);
}
/* nav section — the one with border-bottom */
section[style*="border-bottom"] { background-color: var(--th-nav-bg) !important; border-color: var(--th-border) !important; }
.NavDiv ul li a { color: var(--th-nav-text) !important; }
.servicesDropDown { background-color: var(--th-drop-bg) !important; border: 1px solid var(--th-border); }
.servicesDropDown ul li { border-bottom-color: var(--th-border) !important; }
.TestimoanialDivMain { background-color: var(--th-card-bg); border-color: var(--th-border); }
.CaseStudyMain { background-color: var(--th-card-bg); border-color: var(--th-border); }
.form-wrapper { background-color: var(--th-form-bg) !important; }
.form-wrapper h2 { color: var(--th-text) !important; }
.form-wrapper input, .form-wrapper textarea, .form-wrapper select { background-color: var(--th-input-bg) !important; color: var(--th-input-text) !important; border-color: var(--th-border) !important; }
.blogMain { border-color: var(--th-border); }
.blogtext p { color: var(--th-text) !important; }
.marginDiv { background: var(--th-marginDiv-bg) !important; }
.aboutShorttext { border-left-color: var(--blue); }
.aboutShorttext p { color: var(--th-text-muted); }
.abouMission { background-color: var(--th-form-bg) !important; border-color: var(--th-border) !important; }
.abouMission h2 { color: var(--th-text); }
.abouMission p { color: var(--th-text-muted); }
.CstmBox { background-color: var(--th-card-bg) !important; border-color: var(--th-border) !important; }
.CstmBox h2 { color: var(--th-text); }
.CstmBox p { color: var(--th-text-muted); }
.sec-title { color: var(--th-text); }
.aboutText span { color: var(--blue); }
.abtCall { border-color: var(--th-border) !important; color: var(--blue); }
.abtContactDetails p { color: var(--th-text); }
.abtContactDetails span { color: var(--th-text-muted); }
.tab-container { border-color: var(--th-border) !important; }
.tab { color: var(--th-text) !important; background: transparent !important; }
#testimonials::after { background-color: var(--th-testimonial-overlay) !important; }
.testimonialLeft h2 { color: var(--th-text); }
.testimonialLeft p { color: var(--th-text-muted); }
.profDet p { color: var(--th-text); }
.profDet span { color: var(--th-text-muted); }
.tbContent101 p { color: var(--th-text-muted); }
.whyPoint { background: var(--th-bg3) !important; border-color: var(--th-border) !important; }
.whyPoint p { color: var(--th-text); }
.headingTextBox h3 { color: var(--th-text); }
.sectionpara p { color: var(--th-text-muted); }
.wwga h2 { color: var(--th-text); }
.wwga p { color: var(--th-text-muted); }

/* ── Dark mode dot-grid on alt sections ── */
body.dark section:not(.bannerDivMain):not(#testimonials):not(.logoSection):not(.servicesBg):not(.footer-section):not(.counterBg) {
  position: relative;
}
body.dark .marginDiv {
  background: rgba(103,58,183,0.07) !important;
  position: relative;
}
body.dark .marginDiv::before {
  content:'';
  position:absolute;inset:0;
  background-image: radial-gradient(rgba(0,136,196,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events:none;
}

/* ── Techy glow on nav links (both modes) ── */
.NavDiv ul li a {
  position: relative;
  transition: color 0.2s;
}
.NavDiv ul li a::after {
  content:'';
  position:absolute;
  bottom:-4px; left:0;
  width:0; height:2px;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  transition: width 0.3s ease;
  border-radius: 2px;
}
.NavDiv ul li a:hover::after,
.NavDiv ul li a.active::after { width:100%; }
.NavDiv ul li a:hover { color: var(--blue) !important; }

/* ── Techy section headings (sec-title gradient in dark) ── */
body.dark .sec-title {
  background: linear-gradient(90deg, #ffffff 0%, var(--blue) 55%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
body.dark .wwga h2 {
  background: linear-gradient(90deg, #ffffff 0%, var(--blue) 55%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* ── Techy card hover glow (both modes) ── */
.CstmBox {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.CstmBox:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 22px rgba(0,136,196,0.2), 0 8px 24px rgba(0,0,0,0.08) !important;
  border-color: var(--blue) !important;
}
body.dark .CstmBox:hover {
  box-shadow: 0 0 28px rgba(0,136,196,0.35), 0 0 10px rgba(103,58,183,0.25) !important;
}
.abouMission {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.abouMission:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(0,136,196,0.15) !important;
}

/* ── whiteBtn techy ── */
.whiteBtn {
  transition: all 0.3s ease !important;
}
.whiteBtn:hover {
  background: linear-gradient(135deg, var(--blue), var(--purple)) !important;
  border-color: transparent !important;
  box-shadow: 0 0 20px rgba(0,136,196,0.5) !important;
}
.btnCustom {
  transition: all 0.3s ease !important;
  background: linear-gradient(135deg, var(--blue), var(--purple)) !important;
}
.btnCustom:hover {
  box-shadow: 0 0 20px rgba(0,136,196,0.5) !important;
  transform: translateY(-2px);
}
.GetInTouchBtn {
  background: linear-gradient(135deg, var(--blue), var(--purple)) !important;
  color: #fff !important;
  border-radius: 40px !important;
  padding: 10px 22px !important;
  transition: box-shadow 0.3s ease !important;
}
.GetInTouchBtn:hover {
  box-shadow: 0 0 22px rgba(0,136,196,0.5) !important;
}

/* ── Dark mode: section bg overrides (handles inline style attributes) ── */
body.dark .mrginCustm { background-color: var(--th-bg) !important; }
body.dark .bgshaded { background-color: var(--th-bg) !important; }

/* ── Dark mode: service cards + form inputs glow ── */
body.dark .CstmBox {
  background: #0e1220 !important;
  border-color: rgba(0,136,196,0.22) !important;
}
body.dark .TestimoanialDivMain {
  background: #0e1220 !important;
  border-color: rgba(0,136,196,0.22) !important;
}
body.dark .form-wrapper input:focus,
body.dark .form-wrapper textarea:focus {
  outline: none;
  border-color: var(--blue) !important;
  box-shadow: 0 0 10px rgba(0,136,196,0.3) !important;
}
body.dark .abouMission {
  background: #0e1220 !important;
  border-color: rgba(0,136,196,0.22) !important;
}
body.dark .ud-process-card {
  background: #0e1220 !important;
  border-color: rgba(0,136,196,0.22) !important;
  color: var(--th-text) !important;
}
body.dark .processStep {
  background: #0e1220 !important;
  border-color: rgba(0,136,196,0.22) !important;
}
body.dark .processStep h3 { color: var(--th-text) !important; }
body.dark .processStep p { color: var(--th-text-muted) !important; }
body.dark .ud-step-title { color: var(--th-text) !important; }
body.dark .ud-step-desc { color: var(--th-text-muted) !important; }
body.dark .ud-step-list li { color: var(--th-text-muted) !important; }
body.dark .techmain { border-color: rgba(0,136,196,0.22) !important; background: #0a0e1a; }
body.dark .techicon { border-color: rgba(0,136,196,0.22) !important; background: #0a0e1a; }
body.dark .techicon p { background-color: rgba(0,82,255,0.08) !important; border-top-color: rgba(0,136,196,0.3) !important; color: var(--th-text-muted); }
body.dark .whyPoint { background: rgba(0,136,196,0.08) !important; border-color: rgba(0,136,196,0.25) !important; }
body.dark .whyPoint p { color: #a8d8f0 !important; }
body.dark .tab-container { border-color: rgba(0,136,196,0.22) !important; background: transparent; }
body.dark .tab { color: rgba(255,255,255,0.7) !important; }
body.dark .tab:hover, body.dark .tab.active { color: var(--blue) !important; }
body.dark .floatingText h2 { color: #fff; }
body.dark .CaseStudyMain { background: #0e1220 !important; }
body.dark .blogMain { background: #0e1220 !important; border-color: rgba(0,136,196,0.22) !important; }
body.dark .blogtext p { color: #e2e8f0 !important; }
body.dark .aboutheading h2 { color: rgba(255,255,255,0.85) !important; }
body.dark .contact-info-wrap, body.dark .contact-form-wrap { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(0,136,196,0.22); border-radius: 12px; }
body.dark input, body.dark textarea, body.dark select { background-color: rgba(255,255,255,0.07) !important; color: #e2e8f0 !important; border-color: rgba(0,136,196,0.22) !important; }

/* ── Dark: banner bg subtle glow line ── */
body.dark .bannerDivMain {
  position: relative;
}
body.dark .bannerDivMain::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,136,196,0.08) 0%, transparent 60%);
  pointer-events:none;
}

/* ── Theme Toggle button styles ── */
#theme-toggle {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: var(--th-nav-bg);
  color: var(--th-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 18px rgba(0,136,196,0.4);
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}
#theme-toggle:hover {
  box-shadow: 0 0 30px rgba(0,136,196,0.7), 0 0 14px rgba(103,58,183,0.5);
  transform: scale(1.1) rotate(15deg);
}

/* ── Nav theme toggle — fixed top-right, never affects nav layout ── */
li:has(#nav-theme-btn) {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

#nav-theme-btn {
  position: fixed;
  top: 62px;
  right: 22px;
  z-index: 9998;
  background: var(--th-nav-bg);
  border: 1.5px solid #0088c4;
  border-radius: 40px;
  padding: 7px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #0088c4;
  box-shadow: 0 2px 14px rgba(0,136,196,0.18);
  transition: background 0.25s, box-shadow 0.25s, transform 0.2s;
  white-space: nowrap;
}
#nav-theme-btn:hover {
  background: linear-gradient(135deg, rgba(0,136,196,.1), rgba(103,58,183,.1));
  box-shadow: 0 0 20px rgba(0,136,196,0.4), 0 0 8px rgba(103,58,183,0.25);
  transform: scale(1.05);
}
#nav-theme-btn i { font-size: 14px; }

/* always show nav btn; hide the old floating one */
#theme-toggle { display: none !important; }