/* Site theme — dark + green. Loaded after main.css, so these win.
   Change the look here, in one place. */

/* 1. Fonts */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --heading-font: "Montserrat", sans-serif;
  --nav-font: "Roboto", sans-serif;
}

/* 2. Main colors (the template reads these everywhere) */
:root {
  --background-color: #0b0b0b;   /* page background: near black */
  --default-color: #b8b8b8;      /* body text: soft gray */
  --heading-color: #ffffff;      /* headings: white */
  --accent-color: #3f8b74;       /* brand green: buttons, links, icons */
  --surface-color: #1f2023;      /* cards and boxes */
  --contrast-color: #ffffff;     /* text on green */
}

/* 3. Menu colors */
:root {
  --nav-color: #e6e6e6;
  --nav-hover-color: #3f8b74;
  --nav-mobile-background-color: #111214;
  --nav-dropdown-background-color: #1a1b1e;
  --nav-dropdown-color: #cfcfcf;
  --nav-dropdown-hover-color: #3f8b74;
}

/* Section presets: keep every section dark */
.light-background {
  --background-color: #111214;
  --surface-color: #1f2023;
}
.dark-background {
  --background-color: #0b0b0b;
  --default-color: #b8b8b8;
  --heading-color: #ffffff;
  --surface-color: #1f2023;
  --contrast-color: #ffffff;
}

/* Header: black bar with a thin line under it */
.header {
  --background-color: rgba(11, 11, 11, 0.96);
  border-bottom: 1px solid #262626;
}
.scrolled .header { box-shadow: none; }

/* Headings: heavy Montserrat */
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; }

/* Section titles: big faded word behind, no underline */
.section-title { padding-bottom: 70px; }
.section-title h2 {
  font-size: 44px;
  font-weight: 800;
  padding: 30px 0 0;
  margin-bottom: 24px;
}
.section-title h2::after { display: none; }
.section-title h2::before {
  content: attr(data-title);
  width: auto;
  height: auto;
  background: none;
  top: 0;
  bottom: auto;
  font-size: 76px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  pointer-events: none;
}
.section-title p { color: #d6d6d6; font-size: 18px; }

/* Hero: centered, very big title */
.hero { min-height: 90vh; padding-top: 160px; text-align: center; }
.hero h1 { font-size: 72px; line-height: 1.12; font-weight: 800; }
.hero p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  max-width: 720px;
  margin: 28px auto 44px;
}
.hero-img img { border-radius: 24px; margin-top: 50px; }
.hero .animated { animation: none; }

/* Buttons: green pill + outline pill */
.hero .btn-get-started {
  font-family: var(--default-font);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 44px;
  box-shadow: 0 10px 34px rgba(63, 139, 116, 0.35);
}
.hero .btn-watch-video {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50px;
  padding: 12px 36px;
  margin-left: 0;
}
.hero .btn-watch-video i { font-size: 22px; color: #ffffff; }
.hero .btn-watch-video:hover { border-color: var(--accent-color); }

/* Rounded images and cards */
.about img, .why-us img, .skills img, .portfolio img, .team img { border-radius: 20px; }
.services .service-item, .pricing .pricing-item, .team .team-member,
.testimonials .testimonial-item, .faq-2 .faq-item, .work-process .steps-item {
  border-radius: 20px;
  border: 0;
}

@media (max-width: 768px) {
  .hero h1 { font-size: 40px; }
  .section-title h2 { font-size: 32px; }
  .section-title h2::before { font-size: 48px; }
}