/* Modern Dark Theme */
:root {
  --dark-bg: #1a1a1a;
  --dark-surface: #2d2d2d;
  --dark-text: #ffffff;
  --dark-text-secondary: #b3b3b3;
  --dark-accent: #507298;
  --dark-accent-hover: #6b8db8;
  --dark-border: #404040;
}

body {
  background-color: var(--dark-bg);
  color: var(--dark-text);
}

/* Header & Navigation */
.header {
  background-color: var(--dark-surface) !important;
  border-bottom: 1px solid var(--dark-border);
}

.navbar-default {
  background-color: var(--dark-surface) !important;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
  color: var(--dark-text) !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--dark-accent) !important;
  border: none !important;
  background: none !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: var(--dark-accent) !important;
  border: none !important;
  background: none !important;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  /* background: rgba(30,30,30,0.92) !important; */
  border: none !important;
}

.navbar-nav > li > a {
  color: #fff !important;
  background: none !important;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
  border: none !important;
}

/* Content Sections */
.about, .services, .gallery, .team, .blog, .contact {
  background-color: var(--dark-bg);
}

.w3l-heading h2, .w3l-heading h3 {
  color: var(--dark-text) !important;
}

.w3-about-left h5 {
  color: var(--dark-text) !important;
}

.w3-about-left p {
  color: var(--dark-text-secondary) !important;
}

/* Cards and Grids */
.w3-about-grids, .services-grids, .team-row {
  background-color: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

/* Buttons */
.w3l-button a {
  color: var(--dark-text) !important;
  border: 1px solid var(--dark-accent) !important;
  background-color: var(--dark-accent) !important;
  transition: all 0.3s ease;
}

.w3l-button a:hover {
  background-color: var(--dark-accent-hover) !important;
  border-color: var(--dark-accent-hover) !important;
}

/* Social Icons */
.agileinfo-social-grids ul li a i {
  color: var(--dark-text) !important;
}

.agileinfo-social-grids ul li a i:hover {
  color: var(--dark-accent) !important;
}

/* Form Elements */
.contact input[type="text"],
.contact textarea {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border: 1px solid var(--dark-border) !important;
}

.contact input[type="submit"] {
  background-color: var(--dark-accent) !important;
  color: var(--dark-text) !important;
  border: none !important;
}

.contact input[type="submit"]:hover {
  background-color: var(--dark-accent-hover) !important;
}

/* Footer */
footer {
  background-color: var(--dark-surface) !important;
  border-top: 1px solid var(--dark-border);
}

.copyright p {
  color: var(--dark-text-secondary) !important;
}

.copyright p a {
  color: var(--dark-accent) !important;
}

/* Modal */
.modal-content {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

.modal-header {
  border-bottom: 1px solid var(--dark-border) !important;
}

.modal-footer {
  border-top: 1px solid var(--dark-border) !important;
}

.modal-body p {
  color: var(--dark-text) !important;
}

.modal-header h4 {
  color: var(--dark-text) !important;
}

/* Scroll to Top Button */
/* Dark mode */
#toTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  background-color: #e0e0e0 !important;
  color: #222 !important;
  border-radius: 50%;
  z-index: 9999;
  text-align: center;
  line-height: 40px;
  box-shadow: 0 2px 8px #0002;
  transition: all 0.3s ease;
}

#toTop i.fa {
  color: #222 !important;
  font-size: 0.9em !important;
  margin: 0 auto;
  display: block;
  line-height: 40px;
}

#toTop:hover {
  background-color: #bdbdbd !important;
}

/* Theme Toggle Button */
button[onclick="toggleDarkTheme()"] {
  background-color: var(--dark-surface);
  color: var(--dark-text);
  border: 1.5px solid var(--dark-accent);
  border-radius: 20px;
  padding: 2px 18px;
  font-size: 1.1em;
  font-weight: 600;
  box-shadow: 0 2px 8px #0004;
  cursor: pointer;
  transition: all 0.3s ease;
}

button[onclick="toggleDarkTheme()"]:hover {
  background-color: var(--dark-accent);
  color: #fff;
}

/* Лого и текст */
.logo-title, .agileits-logo div, .agileits-logo span, .agileits-logo p {
  color: #222 !important;
}

/* Текстовые блоки */
body, .about, .services, .gallery, .team, .blog, .contact, .w3-about-left p, .w3l-heading h2, .w3l-heading h3, .address p, .address h4, .blog-caption h4 a, .blog-caption p, .blog-caption p a {
  color: var(--dark-text) !important;
}

button.close, .close {
  color: #fff !important;
  text-shadow: 0 1px 0 #000 !important;
  opacity: 100;
}