/* ==========================================================
   VIJAY ENTERPRISES
   OUR CLIENTS & ASSOCIATIONS
   COMPLETE RESPONSIVE STYLESHEET

   Website:
   https://vijayenterprises1986.in/

   Layout:
   - Desktop: 4 columns x 2 rows
   - Tablet: 2 columns x 4 rows
   - Mobile: 2 columns x 4 rows

   Design:
   - Light neutral background
   - White client cards
   - Subtle border and shadow
   - Equal card height
   - Centered logos
   - Responsive brand typography
   - Smooth hover effects
   - No horizontal overflow
   - Accessibility support

   Compatible with:
   sections/clients.html
========================================================== */


/* ==========================================================
   01. SECTION VARIABLES
========================================================== */

.ve-clients {
  --clients-navy: #112b48;
  --clients-blue: #203f83;
  --clients-muted: #64748b;
  --clients-border: #e0e6ef;
  --clients-background: #f7f9fc;
  --clients-card: #ffffff;
  --clients-focus: #c99852;

  position: relative;

  width: 100%;
  min-width: 0;

  padding: 78px 0 76px;

  color: var(--clients-navy);
  background: var(--clients-background);

  font-family: "Inter", sans-serif;

  scroll-margin-top: 90px;
}

.ve-clients,
.ve-clients *,
.ve-clients *::before,
.ve-clients *::after {
  box-sizing: border-box;
}


/* ==========================================================
   02. MAIN CONTAINER
========================================================== */

.ve-clients .ve-clients-container {
  width: 100%;
  max-width: 1450px;

  margin-inline: auto;
  padding-inline: 30px;
}


/* ==========================================================
   03. SECTION HEADER
========================================================== */

.ve-clients-header {
  width: 100%;
  max-width: 800px;

  margin: 0 auto 44px;

  text-align: center;
}


/* ==========================================================
   04. EYEBROW
========================================================== */

.ve-clients-eyebrow {
  display: block;

  margin-bottom: 12px;

  color: var(--clients-blue);

  font-size: 10px;
  font-weight: 750;

  line-height: 1.5;
  letter-spacing: 1.6px;

  text-transform: uppercase;
}


/* ==========================================================
   05. MAIN HEADING
========================================================== */

.ve-clients-header h2 {
  margin: 0 0 15px;

  color: var(--clients-navy);

  font-family:
    "Plus Jakarta Sans", sans-serif;

  font-size: clamp(38px, 4vw, 58px);
  font-weight: 800;

  line-height: 1.15;
  letter-spacing: -2px;

  text-wrap: balance;
}

.ve-clients-header h2 span {
  color: var(--clients-blue);
}


/* ==========================================================
   06. HEADER DESCRIPTION
========================================================== */

.ve-clients-header p {
  max-width: 660px;

  margin: 0 auto;

  color: var(--clients-muted);

  font-size: 16px;
  font-weight: 400;

  line-height: 1.8;

  text-wrap: pretty;
}


/* ==========================================================
   07. CLIENT GRID

   All eight clients share one grid.

   Desktop:
   4 + 4
========================================================== */

.ve-clients-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  align-items: stretch;

  gap: 22px;

  width: 100%;
  min-width: 0;
}


/* ==========================================================
   08. CLIENT CARD
========================================================== */

.ve-client-item {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 210px;

  margin: 0;
  padding: 24px;

  background: var(--clients-card);

  border: 1px solid var(--clients-border);
  border-radius: 13px;

  box-shadow:
    0 4px 18px rgba(17, 43, 72, 0.025);

  text-align: center;

  overflow: hidden;

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}


/* ==========================================================
   09. LOGO WRAPPER
========================================================== */

.ve-client-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 150px;

  margin: 0;
  padding: 10px;

  overflow: hidden;
}


/* ==========================================================
   10. LOGO IMAGE

   Preserve image proportions.
   No scaling or cropping.
========================================================== */

.ve-client-logo {
  display: block;

  width: 100%;
  max-width: 230px;

  height: 135px;
  max-height: 100%;

  margin: 0;
  padding: 0;

  object-fit: contain;
  object-position: center;

  transform: none;

  filter: none;

  transition: opacity 200ms ease;
}


/* ==========================================================
   11. TEXT-BASED CLIENT CARDS

   Used for:
   - Nival Developers Pvt. Ltd.
   - MI Designz
========================================================== */

.ve-client-text-item {
  flex-direction: column;
}

.ve-client-text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;

  text-align: center;
}


/* ==========================================================
   12. TEXT CLIENT TITLE
========================================================== */

.ve-client-text-content h3 {
  max-width: 100%;

  margin: 0;

  color: #405970;

  font-family:
    "Plus Jakarta Sans", sans-serif;

  font-size: clamp(23px, 2.5vw, 35px);
  font-weight: 750;

  line-height: 1.3;
  letter-spacing: -1px;

  text-align: center;

  overflow-wrap: break-word;
}


/* ==========================================================
   13. TEXT CLIENT SUBTITLE
========================================================== */

.ve-client-text-content span {
  display: block;

  max-width: 100%;

  margin-top: 2px;

  color: #61748a;

  font-family: "Inter", sans-serif;

  font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 500;

  line-height: 1.5;

  text-align: center;

  overflow-wrap: break-word;
}


/* ==========================================================
   14. HOVER EFFECTS
========================================================== */

@media (hover: hover) and (pointer: fine) {

  .ve-client-item:hover {
    border-color: #ccd7e6;

    box-shadow:
      0 9px 26px rgba(17, 43, 72, 0.07);

    transform: translateY(-3px);
  }

  .ve-client-item:hover .ve-client-logo {
    opacity: 0.93;
  }

}


/* ==========================================================
   15. BOTTOM TAGLINE
========================================================== */

.ve-clients-bottom {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 25px;

  width: 100%;

  margin-top: 47px;

  text-align: center;
}

.ve-clients-bottom-line {
  display: block;

  flex: 0 0 48px;

  width: 48px;
  height: 1px;

  background: #cbd5e1;
}

.ve-clients-bottom p {
  margin: 0;

  color: var(--clients-muted);

  font-size: 13px;
  font-weight: 500;

  line-height: 1.6;
}


/* ==========================================================
   16. LARGE DESKTOP
   1600PX AND ABOVE
========================================================== */

@media (min-width: 1600px) {

  .ve-clients {
    padding: 90px 0 85px;
  }

  .ve-clients .ve-clients-container {
    max-width: 1500px;
  }

  .ve-clients-grid {
    gap: 24px;
  }

  .ve-client-item {
    min-height: 230px;
    padding: 28px;
  }

  .ve-client-logo-wrap {
    height: 165px;
  }

  .ve-client-logo {
    max-width: 250px;
    height: 145px;
  }

  .ve-client-text-content h3 {
    font-size: 35px;
  }

  .ve-client-text-content span {
    font-size: 19px;
  }

}


/* ==========================================================
   17. LAPTOP
   BELOW 1200PX
========================================================== */

@media (max-width: 1199.98px) {

  .ve-clients {
    padding: 69px 0 72px;
  }

  .ve-clients .ve-clients-container {
    padding-inline: 22px;
  }

  .ve-clients-grid {
    gap: 16px;
  }

  .ve-client-item {
    min-height: 180px;
    padding: 18px;
  }

  .ve-client-logo-wrap {
    height: 125px;
    padding: 6px;
  }

  .ve-client-logo {
    max-width: 190px;
    height: 115px;
  }

  .ve-client-text-content h3 {
    font-size: clamp(20px, 2.6vw, 29px);
  }

  .ve-client-text-content span {
    font-size: 14px;
  }

}


/* ==========================================================
   18. TABLET
   768PX TO 991PX

   Two cards per row.
========================================================== */

@media (max-width: 991.98px) {

  .ve-clients {
    padding: 60px 0 66px;
  }

  .ve-clients-header {
    margin-bottom: 34px;
  }

  .ve-clients-header h2 {
    font-size: 43px;
  }

  .ve-clients-header p {
    font-size: 15px;
  }

  .ve-clients-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 15px;
  }

  .ve-client-item {
    min-height: 185px;
    padding: 18px;
  }

  .ve-client-logo-wrap {
    height: 125px;
  }

  .ve-client-logo {
    max-width: 210px;
    height: 115px;
  }

  .ve-client-text-content h3 {
    font-size: 27px;
  }

  .ve-client-text-content span {
    font-size: 16px;
  }

}


/* ==========================================================
   19. MOBILE
   BELOW 768PX

   TWO CARDS PER ROW

   Layout:
   2 + 2 + 2 + 2
========================================================== */

@media (max-width: 767.98px) {

  .ve-clients {
    padding: 50px 0 58px;

    scroll-margin-top: 72px;
  }

  .ve-clients .ve-clients-container {
    padding-inline: 15px;
  }

  /* HEADER */

  .ve-clients-header {
    margin-bottom: 28px;
  }

  .ve-clients-eyebrow {
    margin-bottom: 10px;

    font-size: 10px;
    letter-spacing: 1.25px;
  }

  .ve-clients-header h2 {
    margin-bottom: 13px;

    font-size: clamp(32px, 7vw, 40px);

    line-height: 1.2;
    letter-spacing: -1.2px;
  }

  .ve-clients-header p {
    max-width: 420px;

    font-size: 13.5px;
    line-height: 1.75;
  }

  /* TWO COLUMN GRID */

  .ve-clients-grid {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    align-items: stretch;

    gap: 12px;

    width: 100%;
    min-width: 0;
  }

  /* EQUAL HEIGHT CARDS */

  .ve-client-item {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: 150px;

    padding: 14px 10px;

    background: #ffffff;

    border: 1px solid var(--clients-border);
    border-radius: 10px;

    box-shadow:
      0 3px 12px rgba(17, 43, 72, 0.03);
  }

  /* LOGO WRAPPER */

  .ve-client-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 105px;

    margin: 0;
    padding: 5px;

    overflow: hidden;
  }

  /* RESPONSIVE LOGOS */

  .ve-client-logo {
    display: block;

    width: 100%;
    max-width: 145px;

    height: 90px;
    max-height: 100%;

    object-fit: contain;
    object-position: center;

    transform: none;
  }

  /* TEXT CLIENT CARDS */

  .ve-client-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;

    text-align: center;
  }

  .ve-client-text-content h3 {
    margin: 0;

    font-size: clamp(17px, 4vw, 23px);
    font-weight: 750;

    line-height: 1.3;
    letter-spacing: -0.6px;

    overflow-wrap: anywhere;
  }

  .ve-client-text-content span {
    margin-top: 3px;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.4;
  }

  /* BOTTOM TAGLINE */

  .ve-clients-bottom {
    gap: 12px;

    margin-top: 31px;
  }

  .ve-clients-bottom-line {
    flex-basis: 24px;
    width: 24px;
  }

  .ve-clients-bottom p {
    font-size: 11px;
  }

}


/* ==========================================================
   20. SMALL MOBILE
   BELOW 421PX

   Still two cards per row.
========================================================== */

@media (max-width: 420px) {

  .ve-clients .ve-clients-container {
    padding-inline: 12px;
  }

  .ve-clients-header h2 {
    font-size: 32px;
  }

  .ve-clients-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  .ve-client-item {
    min-height: 130px;

    padding: 11px 8px;

    border-radius: 9px;
  }

  .ve-client-logo-wrap {
    height: 90px;
    padding: 3px;
  }

  .ve-client-logo {
    max-width: 130px;
    height: 75px;
  }

  .ve-client-text-content h3 {
    font-size: 17px;
    letter-spacing: -0.5px;
  }

  .ve-client-text-content span {
    font-size: 10px;
  }

  .ve-clients-bottom {
    gap: 10px;
  }

  .ve-clients-bottom p {
    font-size: 10.5px;
  }

}


/* ==========================================================
   21. EXTRA SMALL MOBILE
   BELOW 361PX

   Preserve two-column layout on 320px devices.
========================================================== */

@media (max-width: 360px) {

  .ve-clients .ve-clients-container {
    padding-inline: 10px;
  }

  .ve-clients-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 8px;
  }

  .ve-client-item {
    min-height: 115px;

    padding: 9px 5px;
  }

  .ve-client-logo-wrap {
    height: 78px;
    padding: 2px;
  }

  .ve-client-logo {
    max-width: 110px;
    height: 65px;
  }

  .ve-client-text-content h3 {
    font-size: 15px;
    line-height: 1.3;
  }

  .ve-client-text-content span {
    font-size: 9px;
    line-height: 1.35;
  }

  .ve-clients-bottom p {
    font-size: 10px;
  }

  .ve-clients-bottom-line {
    flex-basis: 15px;
    width: 15px;
  }

}


/* ==========================================================
   22. VERY SMALL MOBILE
   BELOW 321PX
========================================================== */

@media (max-width: 320px) {

  .ve-clients .ve-clients-container {
    padding-inline: 9px;
  }

  .ve-clients-grid {
    gap: 7px;
  }

  .ve-client-item {
    min-height: 112px;
    padding: 8px 4px;
  }

  .ve-client-logo-wrap {
    height: 75px;
  }

  .ve-client-logo {
    max-width: 104px;
    height: 61px;
  }

  .ve-client-text-content h3 {
    font-size: 14px;
  }

  .ve-client-text-content span {
    font-size: 8.5px;
  }

}


/* ==========================================================
   23. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .ve-client-item,
  .ve-client-logo {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

}


/* ==========================================================
   24. PRINT STYLES
========================================================== */

@media print {

  .ve-clients {
    padding: 30px 0;

    background: #ffffff;
  }

  .ve-clients-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 10px;
  }

  .ve-client-item {
    min-height: 150px;
    padding: 12px;

    box-shadow: none !important;

    transform: none !important;

    break-inside: avoid;
  }

  .ve-client-logo {
    opacity: 1 !important;
    transform: none !important;
  }

  .ve-clients-bottom {
    margin-top: 20px;
  }

}


/* ==========================================================
   END OF CLIENTS.CSS
========================================================== */