@import url('main.css');

:root {
  --color-default: #8cc63f;
  --color-primary: #232323;
  --color-secondary: #709e32;
}

body {
  color: white;
  background-color: var(--color-primary);
}

a:hover {
  color: var(--color-default);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-secondary) !important;
}

.sections-bg {
  background-color: var(--color-primary);
}

.section-header h2:after {
  background: whitesmoke;
}

.section-header p {
  color: whitesmoke;
}

.breadcrumbs nav {
  background-color: #0d0d0d;
}

.breadcrumbs nav ol a {
  color: gray;
}

.scroll-top i {
  color: #232323;
}

.scroll-top:hover {
  color: var(--color-primary);
}

#preloader {
  background: #232323;
}

#preloader:before {
  border-color: var(--color-secondary) transparent var(--color-secondary) transparent;
}

.header {
  background-color: #232323;
}

.services .service-item {
  background: var(--color-primary);
  border: 1px solid var(--color-secondary) !important;
}

.services .service-item .icon:before {
  background: gray;
}

.services .service-item:hover .icon:before {
  background: var(--color-default);
}

.testimonials .testimonial-item h3 {
  color: var(--color-primary);
}

.portfolio .portfolio-wrap .portfolio-info {
  background-color: var(--color-primary);
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: whitesmoke;
}

.hero {
  background: #232323;
}

@media (min-width: 1200px) {
  .hero .icon-boxes:before {
    background-color: var(--color-primary);
  }
}

@media (max-width: 1279px) {
  .navbar ul {
    background-color: var(--color-primary);
  }
}

.hero .icon-box {
  border: 1px solid var(--color-secondary) !important;
  background: transparent;
}

.footer {
  background-color: black;
}

.footer .footer-info .logo span {
  color: var(--color-secondary);
}

.progress-bar {
  background-color: var(--color-secondary);
}

.pricing {
  background-color: rgba(255, 255, 255, 0.1);
}

.pricing-item {
  background-color: transparent !important;
  color: whitesmoke !important;
}

.pricing .featured {
  z-index: 10;
  border: 3px solid var(--color-secondary);
}

.pricing .row * {
  color: whitesmoke;
}

.pricing .bi {
  color: whitesmoke !important;
}

.pricing .icon {
  background-color: #709e32;
}

.pricing-item ul li span a {
  color: var(--color-secondary) !important;
}

#hero a>i {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  background-color: var(--color-primary);
}

.card {
  background-color: #1e1e1e;
  /* Dark background for card */
  color: #e0e0e0;
  /* Light text color for readability */
  border-color: #444;
  /* Darker border color */
}

/* Card header */
.card-header {
  background-color: #2c2c2c;
  /* Slightly lighter dark background */
  color: #e0e0e0;
  /* Light text color */
}

/* Card body */
.card-body {
  background-color: #1e1e1e;
  /* Match card background */
  color: #e0e0e0;
  /* Light text color */
}

/* Card footer */
.card-footer {
  background-color: #2c2c2c;
  /* Slightly lighter dark background */
  color: #e0e0e0;
  /* Light text color */
}

/* Card links */
.card a {
  color: var(--color-secondary);
  /* Light blue or another color that contrasts well with the dark theme */
}

.card a:hover {
  color: var(--color-default);
  /* Slightly lighter color on hover for better visibility */
}

/* Card images */
.card-img-top:not(.product) {
  filter: brightness(0.7);
  /* Darken images to fit the dark theme */
}

/* Card border color */
.card {
  border: 1px solid #444;
  /* Dark border color for card */
}

/* Optional: Add a box shadow to make the card stand out more on dark backgrounds */
.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.pricing .buy-btn {
  color: var(--color-default);
  border: 1px solid var(--color-default);
}

.pricing .buy-btn:hover {
  background: var(--color-secondary);
  color: #fff;
}

a.btn-pill {
  border-color: #8cc63f !important;
}

input.form-control,
input.form-control:focus {
  background-color: #333; /* Dark background for input fields */
  color: #e0e0e0; /* Light text color for input fields */
  border: 1px solid #555; /* Darker border for input fields */
}

input.form-control:focus {
  background-color: #444; /* Slightly lighter dark background on focus */
  border-color: #8cc63f; /* Custom border color on focus (green) */
  box-shadow: 0 0 0 0.2rem rgba(140, 198, 63, 0.25); /* Custom green glow effect on focus */
  outline: none; /* Remove default focus outline */
}

input.form-control::placeholder {
  color: #aaa; /* Placeholder text color */
}
.form-label {
  color: #e0e0e0; /* Light text color for labels */
}