/* Dark Mode Styles */
html, body.dark-mode {
  min-height: 100%;
  height: auto;
}

body.dark-mode {
  background: url("../images/banner/blackbackground.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: scroll;
  background-repeat: repeat-y;
  min-height: 100%;
  color: #e0e0e0;
}

/* Mobile optimized dark mode background - cover entire page */
@media (max-width: 991px) {
  html, body.dark-mode {
    min-height: 100%;
    height: auto;
  }
  body.dark-mode {
    background-size: 100% auto;
  }
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #ffffff;
}

body.dark-mode .navbar-brand,
body.dark-mode .navbar-nav .nav-link {
  color: #e0e0e0 !important;
}


body.dark-mode .banner-content .subtitle {
  background: #635CDB;
  color: #fff;
}

body.dark-mode .banner-content p {
  color: #ccc;
}

body.dark-mode .section-title {
  color: #fff;
}

body.dark-mode .glass-card {
  background: rgba(25, 37, 37, 0.9);
  color: #ccc;
}

body.dark-mode .glass-card h2 {
  color: #fff;
}

body.dark-mode .glass-card p {
  color: #aaa;
}

body.dark-mode .card {
    background: #191919aa;
    background: linear-gradient(
        180deg,
        #292929aa 0%,
        #191919cc 50%
    );
    box-shadow: inset 0 2px 2px 0 #e7c4a088,
    inset 0 -2px 2px 0 #0003;

    color: #ccc;
    text-shadow: 1px 1px 3px #333a;
    h2 {
        color: #fff;
    }
    p {
        color: #aaa;
    }
    .button {
        background: #fff2;
        box-shadow:
        0 0 0 1px #fff3,
        inset 120px 0 100px -100px #000c,
        0 0 0 0 #fff1;

        &:hover {
            box-shadow:
            0 0 0 1px #fff3,
            inset 200px 0px 100px -100px #000a,
            -4px 0 8px 2px #fff2;
        }
    }
}

body.dark-mode .service-box {
  background: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

body.dark-mode .pricing-block {
  background: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

body.dark-mode .testimonial-content p {
  color: #ddd;
}

body.dark-mode .blog-block {
  background: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

body.dark-mode #footer {
  background: rgba(18, 18, 18, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .footer-widget h4 {
  color: #fff;
}

body.dark-mode .footer-widget p,
body.dark-mode .footer-widget a {
  color: #ccc;
}

body.dark-mode .btn-white {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .btn-hero {
  background: #635CDB;
  color: #fff;
}

body.dark-mode .btn-black {
  background-color: #333;
  color: #fff;
}

body.dark-mode .form-control {
  background-color: #1e1e1e;
  border: 1px solid #333;
  color: #e0e0e0;
}

body.dark-mode .form-control::placeholder {
  color: #888;
}

/* Dark mode background for hero section - transparent to show body background */
body.dark-mode .banner-1 {
  background: transparent;
}

body.dark-mode #why-webapp {
  background: linear-gradient(
    180deg,
    #292929aa 0%,
    #191919cc 50%
  );
  color: #ccc;
}

body.dark-mode #why-webapp h4,
body.dark-mode #why-webapp h5,
body.dark-mode #why-webapp p {
  color: #ccc;
}