/* ── Design tokens (match Texlink palette) ───────────────────────── */
    :root {
      --navy:   #373838;
      --primary:#51B56D;
      --accent: #f4a91e;
      --light:  #f4fbf6;
      --mid:    #e2f3e7;
      --white:  #ffffff;
      --text:   #374151;
      --muted:  #6b7280;
      --radius: 14px;
      --shadow: 0 8px 32px rgba(13,27,46,.10);
    }

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

    body {  color: var(--text); overflow-x: hidden; }

    .navigation .nav-link{
    color:#000 !important;
}
    /* ── Utility ─────────────────────────────────────────────────────── */
    .section-label {
      display: inline-block;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--primary);
      background: rgba(81,181,109,.1);
      padding: .3rem .9rem;
      border-radius: 50px;
      margin-bottom: 1rem;
    }
   

    /* ── FADE-IN ─────────────────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }
    .reveal-d1 { transition-delay: .1s; }
    .reveal-d2 { transition-delay: .2s; }
    .reveal-d3 { transition-delay: .3s; }
    .reveal-d4 { transition-delay: .4s; }

    /* ── HERO ────────────────────────────────────────────────────────── */
    .socks-hero {
      background: var(--navy);
      position: relative;
      padding: 7rem 0 5rem;
      overflow: hidden;
    }
    .socks-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: url("https://images.unsplash.com/photo-1586350977771-b3b0abd50c82?w=1600&auto=format&fit=crop&q=60") center/cover no-repeat;
      opacity: .12;
    }
     .denim-hero {
      background: var(--navy);
      position: relative;
      padding: 7rem 0 5rem;
      overflow: hidden;
    }
    .denim-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoqofgLR3aSvs0EUlqES8X4115FAIWAiTkQw&s") center/cover no-repeat !important;
      opacity: .12;
    }
       .apparel-hero {
      background: var(--navy);
      position: relative;
      padding: 7rem 0 5rem;
      overflow: hidden;
    }
    .apparel-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: url("https://img.freepik.com/premium-photo/person-examines-colorful-apparel-display-modern-clothing-store-showcasing-vibrant-fashion-choices-shopping-experience_1282299-2332.jpg") center/cover no-repeat !important;
      opacity: .12;
    }
      .activewear-hero {
      background: var(--navy);
      position: relative;
      padding: 7rem 0 5rem;
      overflow: hidden;
    }
    .activewear-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: url("https://i0.wp.com/textilelearner.net/wp-content/uploads/2023/03/activewear-clothing.jpg?fit=600%2C400&ssl=1") center/cover no-repeat !important;
      opacity: .12;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: .5rem;
      background: rgba(30, 244, 126,.15);
      border: 1px solid rgba(30, 244, 126, 0.35);
      color: var(--primary);
      font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
      padding: .4rem 1rem; border-radius: 50px;
      margin-bottom: 1.4rem;
    }
    .socks-hero h1 {
     
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      color: #fff; line-height: 1.12;
      margin-bottom: 1.25rem;
    }
    .socks-hero h1 em { color: var(--primary); font-style: italic; }
    .socks-hero p.lead {
      color: rgba(255,255,255,.72);
      font-size: 1.08rem; max-width: 560px; line-height: 1.75;
    }
    .hero-stats {
      display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
      margin-top: 2.5rem;
    }
    .hero-stat-num {
      
      font-size: 2.2rem; color: var(--primary); line-height: 1;
    }
    .hero-stat-lbl { font-size: .8rem; color: rgba(255,255,255,.55); margin-top: .2rem; }
    .hero-img-wrap {
      position: relative; display: flex; align-items: center; justify-content: flex-end;
    }
    .hero-img-wrap img {
      width: 100%; max-width: 530px;
      border-radius: 18px;
      box-shadow: 0 30px 80px rgba(0,0,0,.45);
      object-fit: cover; aspect-ratio: 4/3;
    }
    .hero-img-wrap .floating-card {
      position: absolute; bottom: -24px; left: -20px;
      background: #fff; border-radius: 12px;
      padding: .9rem 1.3rem;
      box-shadow: 0 12px 36px rgba(13,27,46,.2);
      display: flex; align-items: center; gap: .85rem;
    }
    .hero-img-wrap .floating-card .icon {
      width: 42px; height: 42px; border-radius: 10px;
      background: rgba(81,181,109,.1);
      display: flex; align-items: center; justify-content: center;
      color: var(--primary); font-size: 1.1rem;
    }
    .hero-img-wrap .floating-card strong { display: block; font-size: .95rem; color: var(--navy); }
    .hero-img-wrap .floating-card span { font-size: .78rem; color: var(--muted); }

    /* ── INTRO STRIP ─────────────────────────────────────────────────── */
    .intro-strip {
      background: var(--light);
      border-bottom: 1px solid var(--mid);
      padding: 3.5rem 0;
    }
    .intro-strip .step {
      display: flex; align-items: flex-start; gap: 1rem;
    }
    .intro-strip .step-icon {
      width: 52px; height: 52px; flex-shrink: 0;
      border-radius: 12px;
      background: var(--primary);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.25rem;
    }
    .intro-strip .step h6 { font-size: .95rem; font-weight: 700; margin-bottom: .2rem; color: var(--navy); }
    .intro-strip .step p  { font-size: .83rem; color: var(--muted); margin: 0; line-height: 1.6; }
    .step-connector { width: 2px; background: var(--mid); flex: none; display: none; }

    /* ── SECTION COMMON ──────────────────────────────────────────────── */
    section { padding: 5.5rem 0; }
    .section-head { margin-bottom: 3.5rem; }
    .section-head h2 {
     
      font-size: clamp(1.9rem, 3.5vw, 2.75rem);
      color: var(--navy); line-height: 1.2;
    }
    .section-head p { color: var(--muted); max-width: 560px; line-height: 1.75; }

    /* ── MACHINE CARDS ───────────────────────────────────────────────── */
    .machines-section { background: var(--white); }

    .machine-card {
      background: var(--white);
      border: 1px solid var(--mid);
      border-radius: var(--radius);
      overflow: hidden;
      transition: box-shadow .3s ease, transform .3s ease;
      height: 100%;
      display: flex; flex-direction: column;
    }
    .machine-card:hover {
      box-shadow: var(--shadow);
      transform: translateY(-5px);
    }
    .machine-card-img {
      position: relative;
      aspect-ratio: 16/10;
      overflow: hidden;
      background: var(--mid);
    }
    .machine-card-img img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .5s ease;
    }
    .machine-card:hover .machine-card-img img { transform: scale(1.06); }
    .machine-card-img .principal-tag {
      position: absolute; top: 14px; left: 14px;
      background: rgba(13,27,46,.85);
      color: #fff;
      font-size: .72rem; font-weight: 600; letter-spacing: .08em;
      padding: .3rem .75rem; border-radius: 50px;
      backdrop-filter: blur(6px);
    }
    .machine-card-img .cat-badge {
      position: absolute; top: 14px; right: 14px;
      background: var(--accent);
      color: var(--navy);
      font-size: .7rem; font-weight: 700;
      padding: .28rem .7rem; border-radius: 50px;
    }
    .machine-card-body {
      padding: 1.5rem 1.5rem 1.2rem;
      flex: 1; display: flex; flex-direction: column;
    }
    .machine-card-body h4 {
      font-size: 1.1rem; font-weight: 700;
      color: var(--navy); margin-bottom: .5rem;
    }
    .machine-card-body p.desc {
      font-size: .87rem; color: var(--muted);
      line-height: 1.7; flex: 1;
    }
    .machine-specs {
      display: flex; flex-wrap: wrap; gap: .5rem;
      margin: 1rem 0;
    }
    .spec-pill {
      display: inline-flex; align-items: center; gap: .35rem;
      font-size: .73rem; color: var(--primary);
      background: rgba(81,181,109,.08);
      border: 1px solid rgba(81,181,109,.2);
      padding: .22rem .65rem; border-radius: 50px;
      font-weight: 500;
    }
    .btn-quote {
      display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
      background: var(--primary);
      color: #fff !important;
      font-size: .85rem; font-weight: 600;
      padding: .65rem 1.35rem;
      border-radius: 8px;
      border: none; cursor: pointer;
      text-decoration: none;
      transition: background .2s ease, transform .15s ease;
      width: 100%;
      margin-top: .25rem;
    }
    .btn-quote:hover { background: #3a9456; transform: translateY(-1px); }
    .btn-quote i { font-size: .8rem; }

    /* ── PROCESS SECTION ─────────────────────────────────────────────── */
    .process-section { background: var(--light); }
    .process-timeline {
      position: relative;
      padding-left: 0;
    }
    .process-step {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 0 1.5rem;
      margin-bottom: 2.4rem;
    }
    .process-step:last-child { margin-bottom: 0; }
    .step-num-col { display: flex; flex-direction: column; align-items: center; }
    .step-circle {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--primary);
      color: #fff; font-weight: 700; font-size: 1.05rem;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      position: relative; z-index: 1;
    }
    .step-line {
      flex: 1; width: 2px;
      background: linear-gradient(to bottom, var(--primary), var(--mid));
      margin: .3rem 0;
    }
    .process-step:last-child .step-line { display: none; }
    .step-content { padding-top: .6rem; }
    .step-content h5 { font-weight: 700; font-size: 1.02rem; color: var(--navy); margin-bottom: .35rem; }
    .step-content p { font-size: .87rem; color: var(--muted); line-height: 1.7; margin: 0; }
    .step-machine-ref {
      display: inline-block;
      font-size: .72rem; font-weight: 600; color: var(--primary);
      background: rgba(81,181,109,.08);
      padding: .2rem .6rem; border-radius: 50px;
      margin-top: .5rem;
    }

    /* ── WHY TEXLINK ─────────────────────────────────────────────────── */
    .why-section { background: var(--navy); overflow: hidden; position: relative; }
    .why-section::before {
      content: '';
      position: absolute; top: -80px; right: -120px;
      width: 420px; height: 420px; border-radius: 50%;
      background: rgba(81,181,109,.12);
    }
    .why-section::after {
      content: '';
      position: absolute; bottom: -60px; left: -80px;
      width: 280px; height: 280px; border-radius: 50%;
      background: rgba(244,169,30,.08);
    }
    .why-section .section-label { background: rgba(81,181,109, 0.15); color: var(--primary); }
    .why-section h2 { color: #fff; }
    .why-section p { color: rgba(255,255,255,.65); }
    .why-card {
      background: rgba(127, 248, 116, 0.06);
      border: 1px solid rgba(127, 248, 116, 0.1);
      border-radius: var(--radius);
      padding: 1.8rem;
      transition: background .25s;
    }
    .why-card:hover { background: rgba(255,255,255,.1); }
    .why-icon {
      width: 50px; height: 50px; border-radius: 12px;
      background: rgba(81,181,109,.25);
      color: #90d4a3;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; margin-bottom: 1rem;
    }
    .why-card h6 { font-weight: 700; color: #000000; font-size: 1rem; margin-bottom: .4rem; }
    .why-card p { font-size: .85rem; color: rgba(255,255,255,.55); margin: 0; line-height: 1.7; }

    /* ── CTA STRIP ───────────────────────────────────────────────────── */
    .cta-strip {
      background: linear-gradient(135deg, #51B56D 0%, #3a9456 100%);
      padding: 4rem 0;
    }
    .cta-strip h2 {
     
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      color: #fff; margin-bottom: .75rem;
    }
    .cta-strip p { color: rgba(255,255,255,.75); font-size: 1rem; margin: 0; }
    .btn-cta-white {
      display: inline-flex; align-items: center; gap: .55rem;
      background: #fff; color: var(--primary) !important;
      font-size: .9rem; font-weight: 700;
      padding: .85rem 2rem; border-radius: 9px;
      text-decoration: none;
      transition: transform .2s, box-shadow .2s;
      box-shadow: 0 4px 20px rgba(0,0,0,.15);
    }
    .btn-cta-white:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.2); }

    /* ── RESPONSIVE ──────────────────────────────────────────────────── */
    @media (max-width: 991px) {
      .socks-hero { padding: 5rem 0 4rem; }
      .hero-img-wrap { margin-top: 3rem; justify-content: center; }
      .hero-img-wrap img { max-width: 100%; }
      .hero-img-wrap .floating-card { left: 10px; }
    }
    @media (max-width: 576px) {
      .hero-stats { gap: 1rem 2rem; }
      .hero-stat-num { font-size: 1.75rem; }
    }









/* ============================getqoute=============================== */

 /* ── PAGE WRAPPER ── */
    .quote-page {
      min-height: calc(100vh - 80px);
      display: flex;
      align-items: center;
      padding: 4rem 0 5rem;
    }

    /* ── CARD ── */
    .quote-card {
      background: var(--white);
      border-radius: 20px;
      box-shadow: var(--shadow);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1.6fr;
    }

    /* ── LEFT PANEL ── */
    .quote-left {
      background: var(--navy);
      padding: 3rem 2.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    .quote-left::before {
      content: '';
      position: absolute;
      width: 280px; height: 280px;
      border-radius: 50%;
      background: rgba(81,181,109,.12);
      top: -80px; right: -80px;
    }
    .quote-left::after {
      content: '';
      position: absolute;
      width: 180px; height: 180px;
      border-radius: 50%;
      background: rgba(81,181,109,.08);
      bottom: -50px; left: -40px;
    }
    .quote-left-content { position: relative; z-index: 1; }

    .quote-left .logo-wrap { margin-bottom: 2.5rem; }
    .quote-left .logo-wrap img { height: 40px; filter: brightness(0) invert(1); }

    .quote-left h2 {
      font-size: 1.7rem; font-weight: 700;
      color: #fff; line-height: 1.3;
      margin-bottom: .75rem;
    }
    .quote-left p {
      font-size: .88rem;
      color: rgba(255,255,255,.6);
      line-height: 1.75;
      margin-bottom: 2rem;
    }

    .machine-pill {
      display: inline-flex; align-items: center; gap: .55rem;
      background: rgba(81,181,109,.18);
      border: 1px solid rgba(81,181,109,.35);
      color: #7ee89a;
      font-size: .8rem; font-weight: 600;
      padding: .5rem 1rem; border-radius: 50px;
      margin-bottom: 2.5rem;
      max-width: 100%;
      word-break: break-word;
    }
    .machine-pill i { flex-shrink: 0; }

    .contact-info { position: relative; z-index: 1; }
    .contact-info-item {
      display: flex; align-items: flex-start; gap: .85rem;
      margin-bottom: 1.2rem;
    }
    .contact-info-item:last-child { margin-bottom: 0; }
    .ci-icon {
      width: 36px; height: 36px; flex-shrink: 0;
      border-radius: 9px;
      background: rgba(81,181,109,.15);
      color: #7ee89a;
      display: flex; align-items: center; justify-content: center;
      font-size: .85rem;
    }
    .ci-label { font-size: .72rem; color: rgba(255,255,255,.4); margin-bottom: .1rem; }
    .ci-value { font-size: .85rem; color: rgba(255,255,255,.85); font-weight: 500; }

    /* ── RIGHT PANEL (FORM) ── */
    .quote-right { padding: 3rem 2.8rem; }

    .quote-right h3 {
      font-size: 1.25rem; font-weight: 700;
      color: var(--navy); margin-bottom: .35rem;
    }
    .quote-right .subtitle {
      font-size: .85rem; color: var(--muted);
      margin-bottom: 2rem;
    }

    /* Form elements */
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-group { margin-bottom: 1.1rem; }
    .form-group label {
      display: block;
      font-size: .78rem; font-weight: 600;
      color: var(--navy);
      margin-bottom: .4rem;
      letter-spacing: .02em;
    }
    .form-group label .req { color: var(--primary); margin-left: 2px; }

    .form-control {
      width: 100%;
      padding: .72rem 1rem;
      border: 1.5px solid var(--mid);
      border-radius: 9px;
     
      font-size: .88rem;
      color: var(--text);
      background: var(--white);
      transition: border-color .2s, box-shadow .2s;
      outline: none;
    }
    .form-control:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(81,181,109,.15);
    }
    .form-control::placeholder { color: #b0bac5; }
    textarea.form-control { resize: vertical; min-height: 100px; }

    /* Machine field – read-only styled */
    .machine-field-wrap { position: relative; }
    .machine-field-wrap .form-control {
      background: var(--light);
      color: var(--primary-dark);
      font-weight: 600;
      padding-right: 2.5rem;
      cursor: default;
    }
    .machine-field-wrap i {
      position: absolute; right: .95rem; top: 50%;
      transform: translateY(-50%);
      color: var(--primary);
      font-size: .85rem;
      pointer-events: none;
    }

    /* Submit button */
    .btn-submit {
      width: 100%;
      padding: .88rem;
      background: var(--primary);
      color: #fff;
      border: none; border-radius: 10px;
     
      font-size: .95rem; font-weight: 700;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: .6rem;
      transition: background .2s, transform .15s, box-shadow .2s;
      box-shadow: 0 4px 16px rgba(81,181,109,.3);
      margin-top: .5rem;
    }
    .btn-submit:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(81,181,109,.35); }
    .btn-submit:active { transform: none; }
    .btn-submit .spinner {
      display: none;
      width: 18px; height: 18px;
      border: 2px solid rgba(255,255,255,.4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .btn-submit.loading .btn-text { display: none; }
    .btn-submit.loading .spinner { display: block; }

    /* Toast notifications */
    .toast-wrap {
      position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999;
      display: flex; flex-direction: column; gap: .6rem;
    }
    .toast {
      display: flex; align-items: center; gap: .75rem;
      padding: .85rem 1.25rem;
      border-radius: 12px;
      font-size: .88rem; font-weight: 500;
      box-shadow: 0 8px 28px rgba(0,0,0,.15);
      min-width: 280px; max-width: 360px;
      animation: slideIn .35s ease;
    }
    .toast.success { background: #fff; border-left: 4px solid var(--primary); color: var(--navy); }
    .toast.error   { background: #fff; border-left: 4px solid #ef4444; color: var(--navy); }
    .toast i { font-size: 1.1rem; }
    .toast.success i { color: var(--primary); }
    .toast.error i   { color: #ef4444; }
    @keyframes slideIn { from { opacity:0; transform: translateX(30px); } to { opacity:1; transform: none; } }

    /* Success state overlay */
    .success-overlay {
      display: none;
      text-align: center;
      padding: 2rem 1rem;
    }
    .success-overlay .check-circle {
      width: 72px; height: 72px; border-radius: 50%;
      background: rgba(81,181,109,.12);
      color: var(--primary);
      font-size: 1.9rem;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.25rem;
    }
    .success-overlay h4 { font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
    .success-overlay p  { font-size: .88rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.5rem; }
    .btn-back {
      display: inline-flex; align-items: center; gap: .5rem;
      background: var(--light);
      color: var(--navy);
      font-size: .85rem; font-weight: 600;
      padding: .65rem 1.4rem; border-radius: 9px;
      text-decoration: none;
      border: 1.5px solid var(--mid);
      transition: background .2s;
    }
    .btn-back:hover { background: var(--mid); }

    /* Divider */
    .form-divider {
      display: flex; align-items: center; gap: .75rem;
      margin: 1.25rem 0 1rem;
      color: var(--muted); font-size: .78rem;
    }
    .form-divider::before, .form-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--mid);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .quote-card { grid-template-columns: 1fr; }
      .quote-left { padding: 2.5rem 2rem; }
      .machine-pill { margin-bottom: 1.5rem; }
      .contact-info { display: none; }
    }
    @media (max-width: 600px) {
      .form-row { grid-template-columns: 1fr; }
      .quote-right { padding: 2rem 1.5rem; }
      .quote-page { padding: 2rem 0 3rem; }
    }



    .c6-machine-section {
  padding: 80px 0;
}

.c6-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.c6-flip-card {
  perspective: 1000px;
}

.c6-flip-inner {
  position: relative;
  width: 100%;
  height: 260px;
  transition: transform 0.7s ease;
  transform-style: preserve-3d;
}

.c6-flip-card:hover .c6-flip-inner {
  transform: rotateY(180deg);
}

.c6-flip-front,
.c6-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
}

/* FRONT IMAGE */
.c6-flip-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.5s ease;
}

/* BLUR EFFECT */
.c6-flip-card:hover .c6-flip-front img {
  filter: blur(6px);
}

/* BACK SIDE */
.c6-flip-back {
  background: url(../images/logo.png) no-repeat center top  #00642b4f;
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}

.c6-flip-back h4 {
  margin-bottom: 10px;
    color: #fff;
}

.c6-flip-back p {
  font-size: 14px;
  margin-bottom: 15px;
  opacity: 0.9;
    color: #fff !important;
}

/* BUTTON */
.c6-btn-card {
  padding: 8px 18px;
  background: #fff;
  color: #00642c;
  border-radius: 25px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

.c6-btn-card:hover {
  background: #004d22;
  color: #fff;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .c6-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .c6-card-grid {
    grid-template-columns: 1fr;
  }
}