/* ================================================================
   INNOVATIVE GLOBAL CLOTHING TRADING CO LLC
   style.css — Complete Stylesheet v4.0
   Author  : Senior Web Developer (15+ yrs Garments Industry)
   ================================================================

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────
   01. CSS Design Tokens (Variables)
   02. Reset & Base
   03. Typography Helpers
   04. Layout Utilities
   05. Buttons
   06. Scroll Animations
   07. Navigation Bar
   08. Mobile Drawer
   09. Hero Section
   10. Ticker Strip
   11. About Section
   12. Services Section
   13. Products Section
   14. Global Presence Section
   15. Sustainability Section
   16. Why Choose Us Section
   17. Contact Section
   18. Footer
   19. Back-To-Top Button
   20. Responsive — Tablet  ≤ 1024px
   21. Responsive — Mobile  ≤ 768px
   22. Responsive — XSmall  ≤ 480px
   ================================================================ */


/* ================================================================
   01. CSS DESIGN TOKENS
   ================================================================ */
:root {
  /* ── Brand Palette ──────────────────────────────────── */
  --navy:        #0b1d3a;
  --navy-mid:    #122248;
  --navy-light:  #1a3060;
  --gold:        #b8963e;
  --gold-mid:    #d4ac5a;
  --gold-light:  #f0cc80;
  --gold-pale:   #fdf3dc;

  /* ── Neutrals ───────────────────────────────────────── */
  --white:       #ffffff;
  --offwhite:    #f7f8fa;
  --gray-100:    #eef0f5;
  --gray-200:    #dde0ea;
  --gray-300:    #c8cdd8;
  --gray-500:    #7a8499;
  --gray-700:    #3d4455;
  --text:        #1a2035;
  --text-muted:  #556070;

  /* ── Typography ─────────────────────────────────────── */
  --font-head:   'Cormorant Garamond', Georgia, serif;
  --font-body:   'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Spacing ────────────────────────────────────────── */
  --gap:         110px;    /* section padding */
  --wrap:        1200px;   /* max container   */

  /* ── Border Radius ──────────────────────────────────── */
  --r:           10px;
  --rl:          18px;

  /* ── Transitions ────────────────────────────────────── */
  --tf:  .20s ease;
  --tm:  .38s ease;
  --ts:  .60s ease;

  /* ── Shadows ────────────────────────────────────────── */
  --sh-sm: 0  2px 14px rgba(11,29,58,.07);
  --sh-md: 0  8px 36px rgba(11,29,58,.12);
  --sh-lg: 0 20px 60px rgba(11,29,58,.18);
  --sh-xl: 0 32px 80px rgba(11,29,58,.22);
}


/* ================================================================
   02. RESET & BASE
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a           { text-decoration: none; color: inherit; }
ul, ol      { list-style: none; }
button      { cursor: pointer; border: none; background: none; font-family: var(--font-body); }
input,
textarea    { font-family: var(--font-body); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}


/* ================================================================
   03. TYPOGRAPHY HELPERS
   ================================================================ */

/* Pill / Badge label */
.badge {
  display: inline-block;
  font-size: .70rem;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 5px 16px;
  border: 1px solid rgba(184,150,62,.35);
  border-radius: 30px;
  margin-bottom: 14px;
  font-family: var(--font-body);
}

/* Light badge — for dark-bg sections */
.badge.lt {
  color: var(--gold-light);
  border-color: rgba(240,204,128,.30);
}

/* Section title */
.sec-title {
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 3vw, 2.85rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--navy);
  margin-bottom: 18px;
}

.sec-title.lt { color: var(--white); }

/* Section subtitle */
.sec-sub {
  font-size: .97rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.78;
}

/* Centered section header block */
.sec-head {
  text-align: center;
  margin-bottom: 64px;
}


/* ================================================================
   04. LAYOUT UTILITIES
   ================================================================ */
.container {
  width: 92%;
  max-width: var(--wrap);
  margin: 0 auto;
}

.section {
  padding: var(--gap) 0;
}


/* ================================================================
   05. BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 34px;
  font-size: .90rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: var(--r);
  transition: all var(--tm);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
}

/* Gold / Primary */
.btn-gold {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-mid);
  border-color: var(--gold-mid);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(184,150,62,.40);
  color: var(--white);
}
.btn-gold:active { transform: translateY(0); }

/* Outline / Ghost */
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.50);
}
.btn-outline:hover {
  background: rgba(255,255,255,.10);
  border-color: var(--white);
}

/* Submit / Full-width */
.btn-submit {
  width: 100%;
  justify-content: center;
  padding: 16px;
  font-size: .95rem;
}

/* Button icon */
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Margin top helper for CTA in About */
.mt-btn { margin-top: 32px; }


/* ================================================================
   06. SCROLL ANIMATIONS
   ================================================================ */

/* Hero elements use CSS animation (fire on load) */
.anim-up {
  opacity: 0;
  animation: heroUp .80s ease both;
  animation-delay: var(--d, 0s);
}
@keyframes heroUp {
  from { opacity:0; transform: translateY(40px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Non-hero sections use JS IntersectionObserver */
.reveal-up,
.anim-left,
.anim-right {
  opacity: 0;
  transition: opacity .78s ease, transform .78s ease;
  transition-delay: var(--d, 0s);
}
.reveal-up  { transform: translateY(48px); }
.anim-left  { transform: translateX(-50px); }
.anim-right { transform: translateX(50px); }

/* Add class .vis via JS to trigger */
.reveal-up.vis,
.anim-left.vis,
.anim-right.vis {
  opacity: 1;
  transform: translate(0, 0);
}

/* Service / Why / Product individual cards keep their own delay */
.svc-card,
.prod-card,
.why-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--d, 0s);
}
.svc-card.vis,
.prod-card.vis,
.why-card.vis {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   07. NAVIGATION BAR
   ================================================================ */
#navbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  padding: 22px 0;
  transition: all var(--tm);
}

/* Scrolled — solid navy background */
#navbar.scrolled {
  background: var(--navy);
  padding: 14px 0;
  box-shadow: 0 4px 30px rgba(11,29,58,.30);
}

.nav-inner {
  width: 92%;
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Logo ───────────────────────────────────────────── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logo-diamond {
  width: 38px; height: 38px;
  background: var(--gold);
  transform: rotate(45deg);
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-diamond span {
  display: block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.60);
  border-radius: 2px;
}
.logo-diamond.sm {
  width: 30px; height: 30px;
}
.logo-diamond.sm span {
  width: 11px; height: 11px;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.logo-main {
  font-family: var(--font-head);
  font-size: 1.20rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .01em;
}
.logo-sub {
  font-size: .63rem;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--gold-mid);
  text-transform: uppercase;
  font-family: var(--font-body);
}

/* ── Desktop Nav Links ──────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links a {
  font-size: .85rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  letter-spacing: .03em;
  transition: color var(--tf);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1.5px;
  background: var(--gold);
  transition: width var(--tm);
}
.nav-links a:hover         { color: var(--white); }
.nav-links a:hover::after  { width: 100%; }

/* Active link highlight (set by JS) */
.nav-links a.active-lnk        { color: var(--white); }
.nav-links a.active-lnk::after { width: 100%; }

/* CTA button inside nav */
.nav-links a.nav-cta {
  background: var(--gold);
  color: var(--white);
  padding: 9px 22px;
  border-radius: var(--r);
  font-weight: 600;
}
.nav-links a.nav-cta::after { display: none; }
.nav-links a.nav-cta:hover  { background: var(--gold-mid); color: var(--white); }

/* ── Hamburger ──────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--tm);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ================================================================
   08. MOBILE DRAWER
   ================================================================ */
.mob-drawer {
  position: fixed;
  top: 0; right: -320px;
  width: 300px; height: 100vh;
  background: var(--navy);
  z-index: 999;
  padding: 0;
  transition: right var(--tm);
  box-shadow: -8px 0 40px rgba(0,0,0,.30);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mob-drawer.open { right: 0; }

/* Drawer header row */
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.drawer-close {
  font-size: 1.4rem;
  color: rgba(255,255,255,.60);
  transition: color var(--tf);
  line-height: 1;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.drawer-close:hover {
  color: var(--white);
  background: rgba(255,255,255,.08);
}

.drawer-links {
  padding: 12px 0;
  flex: 1;
}
.drawer-links li { border-bottom: 1px solid rgba(255,255,255,.06); }
.drawer-links .dl {
  display: block;
  padding: 14px 26px;
  font-size: .96rem;
  font-weight: 500;
  color: rgba(255,255,255,.78);
  transition: color var(--tf), padding-left var(--tf), background var(--tf);
}
.drawer-links .dl:hover {
  color: var(--gold-mid);
  padding-left: 32px;
  background: rgba(255,255,255,.03);
}
.drawer-links .drawer-cta {
  margin: 14px 26px;
  display: inline-block;
  background: var(--gold);
  color: var(--white);
  padding: 11px 24px;
  border-radius: var(--r);
  font-weight: 600;
  text-align: center;
  transition: background var(--tf);
}
.drawer-links .drawer-cta:hover { background: var(--gold-mid); padding-left: 24px; }

.drawer-info {
  padding: 20px 26px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.drawer-info p {
  font-size: .82rem;
  color: rgba(255,255,255,.42);
  margin-bottom: 6px;
  line-height: 1.5;
}

/* Backdrop */
.mob-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.50);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tm);
}
.mob-backdrop.show { opacity: 1; pointer-events: all; }


/* ================================================================
   09. HERO SECTION
   ================================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--navy);
  overflow: hidden;
}

/* Background photo */
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=1800&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center top;
  opacity: .18;
  filter: saturate(.40);
}

/* Gradient overlay */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    rgba(11,29,58,.97) 42%,
    rgba(26,48,96,.65) 70%,
    rgba(11,29,58,.30) 100%
  );
}

/* Subtle grid texture */
.hero-texture {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 48px, rgba(255,255,255,.018) 48px, rgba(255,255,255,.018) 49px),
    repeating-linear-gradient(90deg,  transparent, transparent 48px, rgba(255,255,255,.018) 48px, rgba(255,255,255,.018) 49px);
}

/* Diagonal decorative lines */
.hero-diag {
  position: absolute;
  right: -6%; top: -10%;
  width: 50%; height: 120%;
  transform: skewX(-10deg);
  pointer-events: none;
  overflow: hidden;
}
.hero-diag span {
  position: absolute;
  top: 0; height: 100%; width: 1px;
  background: rgba(184,150,62,.12);
}
.hero-diag span:nth-child(1) { left: 0%; background: rgba(184,150,62,.15); }
.hero-diag span:nth-child(2) { left: 30%; }
.hero-diag span:nth-child(3) { left: 65%; background: rgba(184,150,62,.07); }

/* Ambient glow */
.hero-glow {
  position: absolute;
  right: 8%; top: 50%;
  transform: translateY(-50%);
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,150,62,.13) 0%, transparent 70%);
  pointer-events: none;
}

/* Hero content */
.hero-body {
  position: relative;
  z-index: 2;
  padding-top: 90px;
}

/* Eyebrow / location line */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin-bottom: 28px;
}
.hero-eyebrow em {
  display: block;
  width: 32px; height: 1px;
  background: var(--gold);
  font-style: normal;
  flex-shrink: 0;
}

/* Main headline */
.hero-h1 {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--white);
}
.hero-h1 span { color: var(--gold-mid); }

/* Gold rule */
.hero-rule {
  display: block;
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  margin: 26px 0 28px;
  border-radius: 3px;
}

/* Tagline */
.hero-tagline {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: rgba(255,255,255,.60);
  font-weight: 300;
  letter-spacing: .06em;
  max-width: 480px;
  margin-bottom: 48px;
}

/* CTA buttons row */
.hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Stats row */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 72px;
  flex-wrap: wrap;
}

.hs {
  padding: 0 40px 0 0;
}
.hs strong {
  display: block;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--gold-mid);
  line-height: 1;
}
.hs span {
  display: block;
  font-size: .74rem;
  color: rgba(255,255,255,.48);
  letter-spacing: .08em;
  margin-top: 4px;
  text-transform: uppercase;
}

/* Vertical divider between stats */
.hs-div {
  width: 1px;
  height: 40px;
  background: rgba(184,150,62,.28);
  margin-right: 40px;
  flex-shrink: 0;
}

/* Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-hint span {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
}
.sc-mouse {
  width: 26px; height: 42px;
  border: 1.5px solid rgba(255,255,255,.24);
  border-radius: 13px;
  position: relative;
}
.sc-dot {
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 8px;
  background: var(--gold);
  border-radius: 3px;
  animation: scDot 1.9s ease-in-out infinite;
}
@keyframes scDot {
  0%,100% { transform: translateX(-50%) translateY(0);    opacity: 1; }
  80%      { transform: translateX(-50%) translateY(15px); opacity: 0; }
}


/* ================================================================
   10. TICKER STRIP
   ================================================================ */
.ticker {
  background: var(--gold);
  padding: 14px 0;
  overflow: hidden;
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 32s linear infinite;
}

.ti {
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  flex-shrink: 0;
}
.ti::after {
  content: '◆';
  font-size: .42rem;
  opacity: .55;
  margin-left: 28px;
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ================================================================
   11. ABOUT SECTION
   ================================================================ */
.about-sec { background: var(--white); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Image composition */
.about-imgs {
  position: relative;
  height: 520px;
}

.ai {
  position: absolute;
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.ai img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .70s ease;
}
.ai:hover img { transform: scale(1.04); }

/* Primary image */
.ai-1 {
  width: 68%; height: 78%;
  top: 0; left: 0;
}
/* Secondary image */
.ai-2 {
  width: 52%; height: 52%;
  bottom: 0; right: 0;
  border: 4px solid var(--white);
  z-index: 2;
}

/* Floating stat badge */
.about-badge {
  position: absolute;
  top: 46px; right: -18px;
  background: var(--white);
  border-radius: var(--rl);
  padding: 20px 24px;
  box-shadow: var(--sh-xl);
  text-align: center;
  z-index: 4;
  border-top: 3px solid var(--gold);
  min-width: 160px;
}
.about-badge strong {
  display: block;
  font-family: var(--font-head);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.about-badge span {
  display: block;
  font-size: .70rem;
  color: var(--gray-500);
  letter-spacing: .04em;
  margin-top: 5px;
  line-height: 1.45;
}

/* Text column */
.about-txt p {
  font-size: .96rem;
  color: var(--text-muted);
  margin-bottom: 15px;
  line-height: 1.78;
}

.about-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .93rem;
  color: var(--text);
  font-weight: 500;
}
.check-ic {
  width: 22px; height: 22px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .64rem;
  color: var(--white);
  font-weight: 700;
  margin-top: 1px;
}


/* ================================================================
   12. SERVICES SECTION
   ================================================================ */
.services-sec { background: var(--offwhite); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.svc-card {
  background: var(--white);
  border-radius: var(--rl);
  padding: 38px 30px;
  border: 1px solid var(--gray-100);
  position: relative;
  overflow: hidden;
  transition: transform var(--tm), box-shadow var(--tm), border-color var(--tm);
}

/* Gold bottom-bar reveal on hover */
.svc-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tm);
}
.svc-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-md);
  border-color: transparent;
}
.svc-card:hover::after { transform: scaleX(1); }

.svc-ico {
  width: 58px; height: 58px;
  border-radius: 14px;
  background: rgba(184,150,62,.10);
  border: 1px solid rgba(184,150,62,.22);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  transition: all var(--tm);
}
.svc-ico svg {
  width: 26px; height: 26px;
  stroke: var(--gold);
  transition: stroke var(--tm);
}
.svc-card:hover .svc-ico            { background: var(--gold); border-color: var(--gold); }
.svc-card:hover .svc-ico svg        { stroke: var(--white); }

.svc-card h3 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  color: var(--navy);
  margin-bottom: 10px;
}
.svc-card p {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.72;
}


/* ================================================================
   13. PRODUCTS SECTION
   ================================================================ */
.products-sec { background: var(--white); }

.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.prod-card {
  border-radius: var(--rl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 4;
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--tm);
}
.prod-card:hover { box-shadow: var(--sh-lg); }

/* Product image div */
.prod-img {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .70s ease;
}
.prod-card:hover .prod-img { transform: scale(1.08); }

/* Gradient overlay */
.prod-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,29,58,.90) 0%, rgba(11,29,58,.08) 50%, transparent 100%);
}

/* Category tag */
.prod-tag {
  position: absolute;
  top: 18px; left: 18px;
  background: var(--gold);
  color: var(--white);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  z-index: 2;
}

/* Label block */
.prod-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 26px 22px 22px;
  z-index: 2;
}
.prod-label h3 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 5px;
}
.prod-label small {
  font-size: .76rem;
  color: rgba(255,255,255,.65);
  letter-spacing: .04em;
}

/* ── Product Images (Unsplash URLs) ──────────────────── */
/* Mens Wear */
.p-mens {
  background-image: url('https://images.unsplash.com/photo-1602810318383-e386cc2a3ccf?w=600&q=85&auto=format&fit=crop');
}
/* Ladies Wear */
.p-ladies {
  background-image: url('https://images.unsplash.com/photo-1509631179647-0177331693ae?w=600&q=85&auto=format&fit=crop');
}
/* Kids Wear */
.p-kids {
  background-image: url('https://images.unsplash.com/photo-1514090458221-65bb69cf63e6?w=600&q=85&auto=format&fit=crop');
}
/* Denim & Non-Denim */
.p-denim {
  background-image: url('https://images.unsplash.com/photo-1542272604-787c3835535d?w=600&q=85&auto=format&fit=crop');
}
/* ──────────────────────────────────────────────────────
   SWEATERS — Updated to a clear, professional knit/sweater
   knitwear-specific image showing folded sweaters in a store
   ────────────────────────────────────────────────────── */
.p-sweater {
  background-image: url('https://images.unsplash.com/photo-1556905055-8f358a7a47b2?w=600&q=85&auto=format&fit=crop&crop=center');
  background-position: center 30%;
}
/* Swimwear & Activewear */
.p-active {
  background-image: url('https://images.unsplash.com/photo-1539794830467-1f1755804d13?w=600&q=85&auto=format&fit=crop');
}


/* ================================================================
   14. GLOBAL PRESENCE SECTION
   ================================================================ */
.presence-sec { background: var(--offwhite); }

.presence-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 72px;
  align-items: center;
}

.presence-txt > p {
  font-size: .96rem;
  color: var(--text-muted);
  line-height: 1.78;
  margin-bottom: 32px;
}

/* Country card grid */
.countries-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.country-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border-radius: var(--r);
  padding: 15px 18px;
  border: 1px solid var(--gray-200);
  transition: all var(--tm);
}
.country-card:hover {
  border-color: var(--gold);
  box-shadow: var(--sh-sm);
  transform: translateY(-2px);
}
.cflag { font-size: 1.8rem; line-height: 1; }
.cinfo h4    { font-size: .90rem; font-weight: 600; color: var(--navy); }
.cinfo small { font-size: .74rem; color: var(--gray-500); }

/* Map panel */
.presence-map {
  position: relative;
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
}
.presence-map img {
  width: 100%; height: 450px;
  object-fit: cover;
  display: block;
}
.map-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(11,29,58,.52) 0%, transparent 55%);
}
.map-pins { position: absolute; inset: 0; }

/* Animated location pin */
.pin {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--gold);
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 4px rgba(184,150,62,.32);
  animation: pinPulse 2.5s ease-in-out infinite;
  cursor: default;
}
/* Tooltip label */
.pin::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  font-size: .62rem;
  font-family: var(--font-body);
  font-weight: 500;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--tf);
}
.pin:hover::after { opacity: 1; }

@keyframes pinPulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(184,150,62,.50); }
  50%      { box-shadow: 0 0 0 8px rgba(184,150,62,.00); }
}


/* ================================================================
   15. SUSTAINABILITY SECTION
   ================================================================ */
.sustain-sec {
  position: relative;
  overflow: hidden;
  padding: var(--gap) 0;
}

/* Background fabric photo */
.sustain-photo {
  position: absolute; inset: 0;
  background-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1800&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: .12;
  filter: saturate(.28);
}

/* Dark navy overlay */
.sustain-color {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0b1d3a 0%, #122248 50%, #0a1628 100%);
  opacity: .96;
}

.sustain-inner { position: relative; z-index: 1; }

.sustain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.sustain-txt > p {
  color: rgba(255,255,255,.60);
  font-size: .96rem;
  line-height: 1.78;
  margin-bottom: 36px;
}

/* Sustainability item list */
.sustain-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.si {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.si-ico {
  width: 50px; height: 50px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(184,150,62,.12);
  border: 1px solid rgba(184,150,62,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.si-body h4 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--white);
  margin-bottom: 5px;
}
.si-body p {
  font-size: .87rem;
  color: rgba(255,255,255,.52);
  line-height: 1.65;
}

/* Visual / Stat ring */
.sustain-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
}
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(184,150,62,.18);
}
.r1 { width: 360px; height: 360px; animation: spinRing 26s linear infinite; }
.r2 { width: 260px; height: 260px; animation: spinRing 18s linear infinite reverse; border-color: rgba(184,150,62,.12); }
.r3 { width: 160px; height: 160px; border-color: rgba(184,150,62,.09); }

@keyframes spinRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.stat-orb {
  position: relative;
  z-index: 2;
  text-align: center;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(184,150,62,.25);
  border-radius: var(--rl);
  padding: 44px 50px;
  max-width: 260px;
}
.stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--gold-mid);
  line-height: 1;
}
.stat-num sup { font-size: 2rem; vertical-align: super; }
.stat-orb p {
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  line-height: 1.62;
  margin-top: 12px;
  max-width: 180px;
  margin-left: auto;
  margin-right: auto;
}


/* ================================================================
   16. WHY CHOOSE US SECTION
   ================================================================ */
.why-sec { background: var(--white); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.why-card {
  padding: 38px 28px;
  border-radius: var(--rl);
  background: var(--offwhite);
  border: 1px solid var(--gray-100);
  position: relative;
  overflow: hidden;
  transition: transform var(--tm), box-shadow var(--tm), border-color var(--tm);
}

/* Navy fill on hover via pseudo-element */
.why-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--rl);
  background: var(--navy);
  opacity: 0;
  transition: opacity var(--tm);
  z-index: 0;
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: transparent; }
.why-card:hover::before { opacity: 1; }

/* Sit above pseudo-element */
.why-card > * { position: relative; z-index: 1; }

/* Number */
.wn {
  display: block;
  font-family: var(--font-head);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--gray-300);
  line-height: 1;
  margin-bottom: 18px;
  transition: color var(--tm);
}
.why-card:hover .wn { color: var(--gold-mid); }

.why-card h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 10px;
  transition: color var(--tm);
}
.why-card p {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.70;
  transition: color var(--tm);
}
.why-card:hover h3,
.why-card:hover p { color: rgba(255,255,255,.82); }


/* ================================================================
   17. CONTACT SECTION
   ================================================================ */
.contact-sec { background: var(--offwhite); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}

/* ── Info Panel ──────────────────────────────────────── */
.cinfo {
  background: var(--navy);
  border-radius: var(--rl);
  padding: 46px 38px;
  color: var(--white);
  position: sticky;
  top: 88px;
}
.cinfo h3 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  line-height: 1.35;
}

.ci-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.ci-ico {
  width: 42px; height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(184,150,62,.15);
  border: 1px solid rgba(184,150,62,.30);
  display: flex; align-items: center; justify-content: center;
}
.ci-ico svg { width: 18px; height: 18px; stroke: var(--gold-mid); }

.ci-row strong {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin-bottom: 5px;
}
.ci-row p {
  font-size: .88rem;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
}
.ci-row a {
  color: rgba(255,255,255,.65);
  transition: color var(--tf);
}
.ci-row a:hover { color: var(--gold-mid); }

.ci-hours {
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 4px;
  margin-bottom: 24px;
}
.ci-hours strong {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin-bottom: 6px;
}
.ci-hours p {
  font-size: .86rem;
  color: rgba(255,255,255,.52);
}

/* Social buttons inside info panel */
.ci-socials { display: flex; gap: 10px; }
.soc-btn {
  width: 38px; height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.48);
  transition: all var(--tf);
}
.soc-btn svg { width: 15px; height: 15px; }
.soc-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(184,150,62,.08); }

/* ── Contact Form ────────────────────────────────────── */
.cform {
  background: var(--white);
  border-radius: var(--rl);
  padding: 46px 42px;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--gray-100);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.fg { margin-bottom: 20px; }

.fg label {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.req { color: var(--gold); }

.fg input,
.fg textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--r);
  font-size: .93rem;
  color: var(--text);
  background: var(--offwhite);
  transition: border-color var(--tf), box-shadow var(--tf), background var(--tf);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.fg input::placeholder,
.fg textarea::placeholder { color: var(--gray-300); }

.fg input:focus,
.fg textarea:focus {
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(11,29,58,.07);
}

.fg textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.65;
}

.form-notice {
  margin-top: 14px;
  font-size: .87rem;
  font-weight: 500;
  text-align: center;
  min-height: 24px;
  border-radius: var(--r);
  transition: all var(--tf);
}
.form-notice.success {
  color: #1a9e70;
  background: rgba(26,158,112,.07);
  padding: 10px 16px;
}
.form-notice.error {
  color: #d93025;
  background: rgba(217,48,37,.07);
  padding: 10px 16px;
}


/* ================================================================
   18. FOOTER
   ================================================================ */
.site-footer {
  background: #060e1c;
  color: rgba(255,255,255,.55);
  padding: 64px 0 0;
}

.ft-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.ft-brand .ft-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ft-brand > p {
  font-size: .86rem;
  line-height: 1.78;
  color: rgba(255,255,255,.44);
  max-width: 290px;
}

/* Footer social icons */
.ft-socials {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.ft-socials a {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.40);
  transition: all var(--tf);
}
.ft-socials a svg { width: 14px; height: 14px; }
.ft-socials a:hover { border-color: var(--gold); color: var(--gold); }

/* Columns */
.ft-col h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 18px;
}
.ft-col ul li { margin-bottom: 10px; }
.ft-col ul li a,
.ft-col ul li span {
  font-size: .84rem;
  color: rgba(255,255,255,.42);
  transition: color var(--tf), padding-left var(--tf);
  display: inline-block;
  line-height: 1.55;
}
.ft-col ul li a:hover { color: var(--gold-mid); padding-left: 5px; }

/* Bottom bar */
.ft-bottom {
  padding: 22px 0;
  text-align: center;
}
.ft-bottom p {
  font-size: .79rem;
  color: rgba(255,255,255,.25);
}
.ft-addr {
  margin-top: 5px;
  font-size: .72rem !important;
  color: rgba(255,255,255,.15) !important;
}


/* ================================================================
   19. BACK-TO-TOP BUTTON
   ================================================================ */
.btt {
  position: fixed;
  bottom: 30px; right: 30px;
  z-index: 900;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  border: 1.5px solid rgba(184,150,62,.38);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-md);
  opacity: 0;
  transform: translateY(24px);
  transition: all var(--tm);
  pointer-events: none;
}
.btt svg { width: 20px; height: 20px; }
.btt.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.btt:hover {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}


/* ================================================================
   20. RESPONSIVE — TABLET  ≤ 1024px
   ================================================================ */
@media (max-width: 1024px) {
  :root { --gap: 80px; }

  /* About */
  .about-grid    { grid-template-columns: 1fr; gap: 52px; }
  .about-imgs    { height: 380px; order: -1; }
  .ai-1          { width: 70%; height: 82%; }
  .ai-2          { width: 50%; height: 50%; }
  .about-badge   { right: 0; top: 14px; }

  /* Services */
  .svc-grid      { grid-template-columns: repeat(2, 1fr); }

  /* Products */
  .prod-grid     { grid-template-columns: repeat(2, 1fr); }

  /* Presence */
  .presence-grid { grid-template-columns: 1fr; gap: 48px; }
  .presence-map img { height: 360px; }
  .countries-grid { grid-template-columns: repeat(3, 1fr); }

  /* Sustainability */
  .sustain-grid  { grid-template-columns: 1fr; gap: 52px; }
  .sustain-visual { height: 320px; }
  .r1 { width: 290px; height: 290px; }
  .r2 { width: 210px; height: 210px; }
  .r3 { width: 140px; height: 140px; }

  /* Why */
  .why-grid      { grid-template-columns: repeat(2, 1fr); }

  /* Contact */
  .contact-grid  { grid-template-columns: 1fr; gap: 36px; }
  .cinfo         { position: static; }

  /* Footer */
  .ft-grid       { grid-template-columns: 1fr 1fr; gap: 36px; }
  .ft-brand      { grid-column: 1 / -1; }
}


/* ================================================================
   21. RESPONSIVE — MOBILE  ≤ 768px
   ================================================================ */
@media (max-width: 768px) {
  :root { --gap: 64px; }

  /* Nav */
  .nav-links  { display: none; }
  .hamburger  { display: flex; }

  /* Hero */
  .hero-h1    { font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero-tagline { font-size: .96rem; }
  .hero-stats { gap: 0; flex-wrap: wrap; row-gap: 16px; }
  .hs         { padding: 0 28px 0 0; }
  .hs strong  { font-size: 2rem; }
  .hs-div     { margin-right: 28px; height: 34px; }

  /* About images */
  .about-imgs  { height: 300px; }
  .about-badge { display: none; }

  /* Products */
  .prod-card   { aspect-ratio: 4/3; }

  /* Countries */
  .countries-grid { grid-template-columns: 1fr 1fr; }

  /* Why */
  .why-grid    { grid-template-columns: 1fr; }

  /* Form */
  .form-row    { grid-template-columns: 1fr; }
  .cform       { padding: 30px 24px; }
  .cinfo       { padding: 32px 26px; }

  /* Footer */
  .ft-grid     { grid-template-columns: 1fr; gap: 30px; }

  /* Back to top */
  .btt         { bottom: 20px; right: 20px; }
}


/* ================================================================
   22. RESPONSIVE — XSMALL  ≤ 480px
   ================================================================ */
@media (max-width: 480px) {
  :root { --gap: 54px; }

  /* Services & Products single column */
  .svc-grid       { grid-template-columns: 1fr; }
  .prod-grid      { grid-template-columns: 1fr; }
  .countries-grid { grid-template-columns: 1fr; }

  /* Hero CTA stack */
  .hero-btns      { flex-direction: column; align-items: flex-start; }
  .hero-btns .btn { width: 100%; justify-content: center; }

  /* Hero stats — hide dividers, wrap */
  .hero-stats  { flex-wrap: wrap; gap: 16px; }
  .hs-div      { display: none; }
  .hs          { padding: 0; }

  /* Sustainability */
  .sustain-visual  { height: 280px; }
  .r1 { width: 240px; height: 240px; }
  .r2 { width: 170px; height: 170px; }
  .r3 { width: 110px; height: 110px; }
  .stat-orb   { padding: 30px 36px; max-width: 220px; }
  .stat-num   { font-size: 3.8rem; }

  /* Map shorter */
  .presence-map img { height: 280px; }
}