/* ============================================================================
   GMG INTERNATIONAL — BRAND TOKENS  (edit this file to re-skin the whole site)
   ----------------------------------------------------------------------------
   This is the ONE place to change the brand. Every page loads this file AFTER
   styles.css, so the values below override the compiled stylesheet everywhere
   at once — colours, fonts, spacing and layout width. No build step needed;
   just edit a value and refresh the browser.

   The values below match the site exactly as delivered. Change a value on the
   right to re-skin globally (e.g. set --gmg-red to a new hex and every red
   button, link, badge and accent updates site-wide).
   ========================================================================== */

:root {
  /* ---- BRAND COLOURS ---------------------------------------------------- */
  --gmg-red:      #cc0000;   /* primary brand red  — buttons, accents, links  */
  --gmg-darkred:  #990000;   /* red hover / pressed state                     */
  --gmg-blue:     #002868;   /* brand blue — headings accent (light mode)     */
  --gmg-dark:     #0a0b10;   /* near-black — dark sections & dark-mode bg     */

  /* ---- TYPOGRAPHY ------------------------------------------------------- */
  --gmg-font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;  /* body text */
  --gmg-font-heading: "Manrope", "Inter", sans-serif;                 /* headings  */

  /* ---- SPACING & LAYOUT ------------------------------------------------- */
  --gmg-spacing:       0.25rem;  /* base spacing unit — scales ALL padding,   */
                                 /* margin and gap. e.g. 0.28rem = roomier    */
  --gmg-container-max: 80rem;    /* max content width (the max-w-7xl wrapper) */
  --gmg-radius-scale:  1;        /* reserved: multiply corner rounding        */

  /* ---- WIRING (do not edit — maps brand tokens onto the stylesheet) ----- */
  --color-gmg-red:     var(--gmg-red);
  --color-gmg-darkred: var(--gmg-darkred);
  --color-gmg-blue:    var(--gmg-blue);
  --color-gmg-dark:    var(--gmg-dark);
  --font-sans:         var(--gmg-font-body);
  --font-heading:      var(--gmg-font-heading);
  --spacing:           var(--gmg-spacing);
  --container-7xl:     var(--gmg-container-max);
}

/* ---- Product card thumbnails (used by productCardHTML in main.js) -------- */
.gmg-thumb {
  padding: 1.5rem;            /* matches the card's p-6 so image aligns with title */
  height: auto;
  align-self: flex-start;     /* sits at the top; empty space below is fine */
}
.gmg-thumb > img {
  position: static;           /* let the image define the height */
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;        /* the IMAGE is 4:3, so a 4:3 photo fills it exactly */
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid rgb(226 232 240);   /* light edge so the image doesn't blend into the card */
}
:root.dark .gmg-thumb > img {
  border-color: rgb(255 255 255 / 0.12);
}
@media (min-width: 768px) {
  .gmg-thumb { padding: 2rem; }              /* matches md:p-8 */
}

/* ---- About Us banner: team photo pinned right, never cropped ------------- */
.gmg-about-banner-img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 32% top;
  opacity: 0.75;
  /* fade the photo out towards the left so it melts into the dark background */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 16%, #000 38%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 16%, #000 38%);
}
.gmg-about-banner-veil {
  background: linear-gradient(to right,
    var(--gmg-dark) 0%,
    color-mix(in srgb, var(--gmg-dark) 75%, transparent) 45%,
    color-mix(in srgb, var(--gmg-dark) 20%, transparent) 100%);
}
@media (min-width: 768px) {
  .gmg-about-banner-img { opacity: 0.85; }
}
:root.dark .gmg-about-banner-img { opacity: 0.6; }

/* ---- Full-bleed page banner photo (home + services heroes) -------------- */
.gmg-page-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
}
:root.dark .gmg-page-banner-img { opacity: 0.55; }

/* ---- Header: keep the desktop nav on one line ---------------------------
   The compiled stylesheet has no .whitespace-nowrap utility, so nav labels
   are held on one line here instead. The desktop row needs ~860px, which
   does not fit the padded container until 1024px — so the desktop cluster
   and the hamburger swap at lg (1024px) rather than md (768px).          */
#site-header .whitespace-nowrap { white-space: nowrap; }

/* ---- Header phone number + IndiaMART seal -------------------------------
   Each item has its own breakpoint so the row can never overflow:
     < 1024px  hamburger + red phone icon button
     >= 1024px phone number (the prominent call to action)
     >= 1280px seal + phone + "Get in Touch"                              */
.gmg-hdr-phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  color: var(--gmg-red);
  transition: color .25s ease;
}
.gmg-hdr-phone:hover { color: var(--gmg-darkred); }
.gmg-hdr-phone-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.gmg-hdr-phone-num {
  font-family: var(--gmg-font-heading);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}
.gmg-hdr-seal { display: none; }
.gmg-hdr-phone-mobile {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--gmg-red);
  flex-shrink: 0;
}
.gmg-hdr-phone-mobile:hover { background: var(--gmg-darkred); }
@media (min-width: 1024px) {
  .gmg-hdr-phone { display: flex; }
}
@media (min-width: 1280px) {
  .gmg-hdr-seal { display: block; }
}

/* ---- Top utility bar (phone numbers + email) ---------------------------- */
.gmg-topbar {
  background: var(--gmg-blue);
  color: rgba(255,255,255,0.92);
}
.gmg-topbar-inner {
  max-width: var(--gmg-container-max);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.gmg-topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  color: inherit;
  transition: color .25s ease;
}
.gmg-topbar-link:hover { color: #fff; }
.gmg-topbar-icon { width: 0.95rem; height: 0.95rem; flex-shrink: 0; color: #fff; }
.gmg-topbar-sep {
  width: 1px;
  height: 0.9rem;
  background: rgba(255,255,255,0.28);
}
@media (min-width: 640px) {
  .gmg-topbar-inner { justify-content: flex-end; padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
  .gmg-topbar-inner { padding-inline: 2rem; }
}
@media (max-width: 480px) {
  .gmg-topbar-alt, .gmg-topbar-sep { display: none; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  #site-header .hidden.md\:flex { display: none !important; }
  #site-header .md\:hidden,
  #mobile-drawer.md\:hidden { display: block !important; }
  #site-header .md\:hidden.flex { display: flex !important; }
  #mobile-drawer.md\:hidden.hidden { display: none !important; }
}

/* ---- Global Partnerships carousel (homepage) ----------------------------- */
.gmg-pc { outline: none; }
.gmg-pc-viewport { overflow: hidden; max-width: 80%; }
.gmg-pc-track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.gmg-pc-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) {
  .gmg-pc-slide { gap: 1.25rem; }
}
.gmg-pc-card {
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.gmg-pc-card:hover {
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-3px);
}
.gmg-pc-logo { max-height: 100%; max-width: 100%; object-fit: contain; }
.gmg-pc-name {
  font-family: var(--gmg-font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: rgb(226 232 240);
  text-align: center;
}
.gmg-pc-role {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gmg-red);
  text-align: center;
}
.gmg-pc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.gmg-pc-arrow {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(148 163 184);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all .3s ease;
}
.gmg-pc-arrow:hover { background: var(--gmg-red); color: #fff; border-color: var(--gmg-red); }
.gmg-pc-flip { transform: rotate(180deg); }
.gmg-pc-dots { display: flex; gap: 0.5rem; }
.gmg-pc-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all .3s ease;
}
.gmg-pc-dot.is-active { background: var(--gmg-red); width: 1.75rem; }

/* ---- About Us: "Why Choose GMG International?" advantage grid ----------- */
.gmg-adv-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 72rem;
  margin: 0 auto;
}
.gmg-adv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 1.75rem;
  border-radius: 1.25rem;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.09);
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.gmg-adv-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gmg-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}
.gmg-adv-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
  background: linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03));
}
.gmg-adv-card:hover::before { transform: scaleY(1); }
.gmg-adv-num {
  font-family: var(--gmg-font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--gmg-red);
}
.gmg-adv-rule {
  display: block;
  width: 2.25rem;
  height: 2px;
  background: var(--gmg-red);
  opacity: 0.9;
}
.gmg-adv-rule-lg { width: 4rem; height: 3px; }
.gmg-adv-text {
  font-family: var(--gmg-font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  text-wrap: pretty;
}
.gmg-adv-hero {
  background: linear-gradient(150deg, rgba(204,0,0,0.22), rgba(0,40,104,0.28));
  border-color: rgba(255,255,255,0.16);
  justify-content: center;
}
.gmg-adv-hero-stat { display: flex; flex-direction: column; gap: 0.35rem; }
.gmg-adv-figure {
  font-family: var(--gmg-font-heading);
  font-size: clamp(3rem, 6vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.gmg-adv-hero-label {
  font-family: var(--gmg-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}
.gmg-adv-hero-copy {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  font-weight: 400;
}
@media (min-width: 1024px) {
  .gmg-adv-hero { grid-column: span 2; }
}
@media (min-width: 768px) {
  .gmg-thumb { width: 28%; }   /* 30% narrower than 40% */
}