/* ===========================================================
   Digiflash Concept Corp — Brand styles (built on Bootstrap 5)
   Bootstrap supplies the grid, buttons, forms, and nav behavior.
   This file only adds Digiflash's colors, type, and section
   flourishes on top of it.
   =========================================================== */

:root {
  --black: #1a1a1a;
  --green: #7ab648;
  --gray-bg: #f4f4f4;
  --gray-text: #666666;
  --error: #d64545;

  /* ADDED: tune these to resize/reposition every .container on the page */
  --container-max-width: 1700px;
  --container-padding-x: 24px;

  /* ADDED: tune these to resize the paragraph text inside .product blocks */
  --product-text-size: clamp(1rem, 0.35vw + 0.9rem, 1.3rem);
  --product-text-max-width: 1800px;
}

html {
  overflow-x: hidden;
}

body {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  color: var(--black);
}

a {
  color: inherit;
}

/* ADDED: overrides Bootstrap's .container so it's adjustable from here —
   change --container-max-width / --container-padding-x above to resize it,
   or edit max-width / padding directly below for a one-off change. */
.container {
  max-width: var(--container-max-width);
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

.outer-gap {
  --bs-gutter-x: 5rem; /* 96px between outer columns */
}

/* ---------- Header ---------- */
.brand-logo {
  height: clamp(40px, 3.75vw + 28px, 100px);
  width: auto;
}

.brand-logo-secondary {
  height: 34px;
}

.brand-divider {
  display: inline-block;
  width: 1px;
  height: clamp(40px, 3.75vw + 28px, 100px);
  background: #000000;
  margin: 0 clamp(8px, 1vw, 14px);
}

.navbar.sticky-top {
  z-index: 1030;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
}

.navbar-nav {
  /* Was gap-lg-4/gap-4 Bootstrap utilities (also !important, and
     fixed at 1.5rem regardless of screen width); fluid gap here
     tightens up on medium desktop widths so links don't wrap or
     crowd the logo, and stays roomy on large screens. */
  gap: clamp(0.75rem, 1.75vw, 1.5rem);
}

.navbar .nav-link {
  /* fs-3 previously forced this to a fixed 1.75rem with !important
     on every screen size — including mobile, since the old mobile
     override below had no !important to beat it. Fluid + no
     competing utility class means this now actually scales. */
  font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.15rem);
  color: var(--black);
  white-space: nowrap;
}

.navbar .nav-link:hover {
  color: var(--green);
}

@media (min-width: 992px) {
  .navbar-collapse {
    flex-wrap: nowrap;
  }
}

/* ---------- Hero ---------- */

.hero-title-main {
  font-size: clamp(3rem, 10vw, 10rem);
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 0;
  line-height: 1;
}

.hero-title-sub {
  font-size: clamp(1.75rem, 4vw, 4rem);
  color: var(--black);
}

.hero-title-sub .forward {
  color: var(--green);
  font-weight: 700;
}

.btn-dark:hover {
  background-color: var(--green) !important;
  border-color: var(--green) !important;
}

.btn-rounded {
  border-radius: 20px;
}

/* Background image */
section.text-center {
  position: relative;
  overflow: hidden;
  height: 70vh;
}
.what-we-do .d-flex {
  position: relative;
  overflow: visible;
}
.black-wave1 {
  inset: 0;
  position: absolute;
  top: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  object-fit: cover;
}

.black-wave1 img {
  opacity: 1;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

section .container {
  position: relative;
  z-index: 2;
}

.what-we-do .d-flex {
  position: relative;
  overflow: visible;
}

.black-wave2 {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.black-wave2 img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* fills the box without stretching/distorting */
  display: block;
}

.hero-title,
section .container {
  position: relative;
  z-index: 2;
}
/* ---------- Privacy bar ---------- */
.privacy-bar {
  background: var(--black);
  color: #fff;
  font-size: clamp(0.8rem, 0.3vw + 0.72rem, 0.95rem);
}

.privacy-bar .policy-link {
  color: var(--green);
}

/* ---------- What We Do ---------- */
.what-we-do .eyebrow {
  font-size: clamp(1.1rem, 0.9vw + 0.9rem, 1.75rem);
  color: #b7b7b7;
}

.what-we-do h2 {
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.1;
}

.highlight {
  color: #8bc53f;
  font-weight: 400;
}

.products-row {
  text-align: left;
}

.product h3 {
  font-weight: bold;
}
/* .tag {
  line-height: 0;
} */
.product .tag {
  color: var(--green);
  margin-bottom: 2rem;
}

.product p {
  font-size: var(--product-text-size);
  max-width: var(--product-text-max-width);
  font-weight: 500;
}

/* ---------- Featured strip ---------- */
.featured-strip {
  background: var(--gray-bg);
}

.featured-strip .label {
  font-size: 11px;
  color: var(--gray-text);
}

.featured-logo-col {
  min-width: 0; /* let flex/grid children shrink below content size */
}

.featured-logo {
  height: 100px;
  width: auto;
  max-width: 100%; /* never overflow the column */
  object-fit: contain;
}

.featured-logo1-col {
  min-width: 0; /* let flex/grid children shrink below content size */
}

/* ---------- Why Us ---------- */
.why-us h2 {
  font-weight: 800;
}

.why-us .green {
  color: var(--green);
}

.why-us .subtitle {
  color: var(--gray-text);
  margin-bottom: 24px;
}

.why-list li {
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 25px;
}

.why-list li::before {
  content: "";
  width: 40px;
  height: 40px;
  flex-shrink: 0;

  background-image: url("img/list.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.why-us .statement {
  font-size: clamp(1.75rem, 1.4vw + 1.2rem, 3rem);
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
}

/* ---------- Lets Talk ---------- */
.lets-talk {
  background: var(--black);
  color: #fff;
}

/* ---------- Partners ---------- */
.partners p {
  max-width: 1700px;
}

/* These rows previously relied on plain Bootstrap flex .col columns
   while the logos inside had fixed pixel widths — a column can't
   shrink below its content's fixed width, so on narrower desktop
   screens (or at 125-175% browser zoom, which is effectively the
   same as a narrower screen) the row ran out of space and either
   overflowed horizontally or squeezed the logos. A self-wrapping
   grid fixes this at any width without needing extra breakpoints. */
.partners .row.align-items-center {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  align-items: center;
  justify-items: center;
  gap: 1.75rem 1.5rem;
  margin: 0;
}

.partners .row.align-items-center > .col {
  flex: none;
  width: auto;
  max-width: 100%;
  padding: 0;
}

.partner-logo,
.partner-logo1,
.partner-logo2,
.partner-logo3 {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.partner-logo {
  max-width: 140px;
}
.partner-logo1 {
  max-width: 180px;
}
.partner-logo2 {
  max-width: 220px;
}
.partner-logo3 {
  max-width: 250px;
}

/* ---------- Testimonial ---------- */
.testimonial {
  background-color: #111111;
  color: #ffffff;
  padding: clamp(40px, 6vw, 100px); /* more space around the content */
}
.testimonial .container {
  padding: clamp(50px, 10vw, 150px) 0;
}

.testimonial blockquote {
  font-size: clamp(1.2rem, 1vw + 0.9rem, 1.7rem);
  line-height: 1.2;
}

.testimonial .trust-heading {
  font-size: clamp(2.25rem, 3vw + 1rem, 5rem);
  line-height: 1;
}

.testimonial .trust-heading .green {
  color: var(--green);
}

/* ---------- Inquiry / Let's Talk form ---------- */
.inquiry {
  background: var(--black);
  color: #fff;
}

.inquiry-inner {
  max-width: 700px;
}

.inquiry .eyebrow {
  color: var(--green);
  font-size: clamp(0.7rem, 0.15vw + 0.66rem, 0.8125rem);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.inquiry h2 {
  font-size: clamp(1.5rem, 1vw + 1.25rem, 2rem);
}

.inquiry .lead {
  color: #bbb;
  font-size: clamp(0.8rem, 0.2vw + 0.75rem, 0.9rem);
}

.inquiry .form-label {
  color: #ddd;
  font-size: clamp(0.7rem, 0.15vw + 0.66rem, 0.8125rem);
}

.inquiry .form-control,
.inquiry .form-select {
  background: #242424;
  color: #fff;
  border: 1px solid #444;
}

.inquiry .form-control::placeholder {
  color: #888;
}

.inquiry .form-control:focus,
.inquiry .form-select:focus {
  background: #242424;
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 0.2rem rgba(122, 182, 72, 0.25);
}

.inquiry .form-control.is-invalid,
.inquiry .form-select.is-invalid {
  border-color: var(--error);
}

.inquiry .invalid-feedback {
  color: var(--error);
}

.btn-brand {
  background: var(--green);
  color: #111;
  font-weight: 700;
  letter-spacing: 1px;
  border: none;
}

.btn-brand:hover,
.btn-brand:focus {
  background: #8bc53f;
  color: #111;
}

.btn-brand:disabled {
  opacity: 0.5;
}

.form-status {
  text-align: center;
  font-size: 14px;
  padding: 12px;
  border-radius: 4px;
  display: none;
}

.form-status.success {
  display: block;
  background: rgba(122, 182, 72, 0.15);
  color: var(--green);
  border: 1px solid var(--green);
}

.form-status.failure {
  display: block;
  background: rgba(214, 69, 69, 0.15);
  color: var(--error);
  border: 1px solid var(--error);
}

/* ---------- Footer ---------- */
footer {
  background: #e6e7e9;
}

.footer-cols h4,
footer h4 {
  font-size: clamp(0.8rem, 0.2vw + 0.75rem, 0.875rem);
  margin-bottom: 14px;
}

footer ul {
  font-size: clamp(0.8rem, 0.2vw + 0.75rem, 0.875rem);
  color: var(--gray-text);
}

footer ul li {
  margin-bottom: 8px;
}

.footer-bottom {
  border-top: 1px solid #ddd;
  font-size: clamp(0.7rem, 0.15vw + 0.66rem, 0.75rem);
  color: var(--gray-text);
}

.footer-bottom .brand {
  font-weight: 700;
  color: var(--black);
}

.mt-6 {
  margin-top: clamp(3rem, 1vw + 2.7rem, 6rem) !important;
}
.mt-7 {
  margin-top: clamp(3rem, 1.3vw + 2.9rem, 7rem) !important;
}
.mt-8 {
  margin-top: clamp(3rem, 1.6vw + 3.1rem, 8rem) !important;
}
.mt-9 {
  margin-top: clamp(3rem, 1.9vw + 3.3rem, 9rem) !important;
}
.mt-10 {
  margin-top: clamp(3rem, 2.2vw + 3.5rem, 10rem) !important;
}
/* Bootstrap's fs-1..fs-6 utilities are used all over this site
   (product headings/tags, Why Us subtitle & list, Partners heading
   and intro paragraph, privacy bar, lets-talk, footer) but ship
   fixed and !important, so every one of those texts was rendering
   at one unchanging size regardless of screen width or zoom — and
   several custom rules elsewhere in this file meant to resize them
   for mobile were silently being ignored because of that !important.
   Fluid versions here fix both problems at once, site-wide. */
.fs-1 {
  font-size: clamp(1.6rem, 1.1vw + 1.2rem, 2.5rem) !important;
}
.fs-2 {
  font-size: clamp(1.3rem, 0.85vw + 1rem, 2rem) !important;
}
.fs-3 {
  font-size: clamp(1.15rem, 0.7vw + 0.9rem, 1.75rem) !important;
}
.fs-4 {
  font-size: clamp(1rem, 0.6vw + 0.8rem, 1.5rem) !important;
}
.fs-5 {
  font-size: clamp(0.9rem, 0.4vw + 0.75rem, 1.25rem) !important;
}
.fs-6 {
  font-size: clamp(0.8rem, 0.25vw + 0.7rem, 1rem) !important;
}

/* Fluid instead of fixed: these scale smoothly with the viewport
   (vw), so they automatically adapt to any desktop resolution AND
   to browser zoom (zoom shrinks the effective viewport width, which
   is exactly what vw responds to) instead of only having one giant
   fixed size for every screen 992px and up. */
.fs-7 {
  font-size: clamp(2.75rem, 1.5vw + 2.5rem, 7rem) !important;
}
.fs-8 {
  font-size: clamp(2.75rem, 1.8vw + 2.5rem, 8rem) !important;
}
.fs-9 {
  font-size: clamp(2.75rem, 2.1vw + 2.5rem, 9rem) !important;
}
.fs-10 {
  font-size: clamp(2.75rem, 2.4vw + 2.5rem, 10rem) !important;
}

.py-6 {
  padding-top: clamp(3rem, 1vw + 2.7rem, 6rem) !important;
  padding-bottom: clamp(3rem, 1vw + 2.7rem, 6rem) !important;
}
.py-7 {
  padding-top: clamp(3rem, 1.3vw + 2.9rem, 7rem) !important;
  padding-bottom: clamp(3rem, 1.3vw + 2.9rem, 7rem) !important;
}

.menu-links li {
  margin-bottom: 0px; /* less space between items */
}

/* ===========================================================
   MOBILE / RESPONSIVE OVERRIDES
   Bootstrap handles the grid breakpoints already — these rules
   just rein in the custom sizing (fs-7..10, big headings, fixed
   paddings, etc.) that was tuned for desktop.
   =========================================================== */

/* ---------- Tablet & below (<992px) ---------- */
@media (max-width: 991.98px) {
  :root {
    --container-padding-x: 16px;
  }

  /* Collapsed nav menu styling */
  .navbar-collapse {
    margin-top: 14px;
    text-align: center;
  }
  .navbar-nav .nav-link {
    padding: 10px 0;
  }

  .why-us .statement {
    font-size: 2.25rem;
    text-align: left;
  }
}

/* ---------- Mobile (<768px) ---------- */
@media (max-width: 767.98px) {
  /* Oversized utility classes used for big display headings */
  .fs-7,
  .fs-8,
  .fs-9,
  .fs-10 {
    font-size: 2.75rem !important;
  }

  .mt-6,
  .mt-7,
  .mt-8,
  .mt-9,
  .mt-10 {
    margin-top: 3rem !important;
  }

  .py-6,
  .py-7 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Hero */
  section.text-center {
    height: auto;
    padding: 70px 0 40px;
  }
  .hero-title-main,
  .hero-title-sub {
    text-align: center;
  }
  .cta-group .btn {
    width: 100%;
    max-width: 320px;
  }

  /* What We Do */
  .what-we-do .hero-title {
    text-align: center;
  }
  .product .tag {
    margin-bottom: 1rem;
  }
  .product p {
    font-size: 1.05rem;
  }

  /* Why Us */
  .why-us .statement {
    font-size: 1.6rem;
    line-height: 1.35;
    text-align: left;
  }
  .why-list li {
    gap: 14px;
  }

  /* Featured strip: groups stack (col-12 col-md), tighten the gap
     between them and shrink logos so they never crowd/overflow */
  .outer-gap {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1rem;
  }
  .featured-logo {
    height: 36px;
  }

  /* Partners: the grid (see .partners .row.align-items-center above)
     already wraps automatically at every width, so on phones we just
     tighten the minimum tile size and gap so more logos fit per row. */
  .partners .row.align-items-center {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 1.25rem 1rem;
  }

  /* Testimonial */
  .testimonial {
    padding: 40px 20px;
  }
  .testimonial .container {
    padding: 40px 0;
  }
  .testimonial blockquote {
    font-size: 1.2rem;
  }
  .testimonial .trust-heading {
    font-size: 2.25rem;
    text-align: left !important;
    margin-top: 24px;
  }

  /* Footer */
  footer ul.menu-links li {
    margin-bottom: 6px;
  }
}

/* ---------- Small phones (<576px) ---------- */
@media (max-width: 575.98px) {
  :root {
    --container-padding-x: 14px;
  }

  .fs-7,
  .fs-8,
  .fs-9,
  .fs-10 {
    font-size: 2.1rem !important;
  }

  .partners .row.align-items-center {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  }

  footer .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}