/* ===== Fonts ===== */
@font-face {
  font-family: "Candara";
  src: url("/fonts/Candara.ttf") format("truetype");
}
@font-face {
  font-family: "Candara";
  src: url("/fonts/Candara_Bold.ttf") format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: "Bisque";
  src: url("/fonts/Bisque-Regular.otf") format("opentype");
}

/* ===== Variables ===== */
:root {
  --cream: #fdf8f0;
  --cream2: #faf3e7;
  --blush: #f5e6d8;
  --blush2: #edd5bf;
  --sage: #d4e4d0;
  --sage2: #b8d4b2;
  --sage-dark: #6a9c64;
  --sage-text: #3e6b38;
  --caramel: #c8894a;
  --caramel-light: #e8b87a;
  --caramel-pale: #f5ddb8;
  --sky: #d8eaf5;
  --sky2: #b8d8ee;
  --lavender: #e8e0f0;
  --pinks: #e9afd7;
  --text-dark: #2d2416;
  --text-mid: #5c4a32;
  --text-soft: #8c7460;
  --text-muted: #b0998a;

  --white: #ffffff;
  --border: rgba(200, 137, 74, 0.18);
  --border-sage: rgba(106, 156, 100, 0.22);
}

body {
  font-family: "Candara", sans-serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ===== NAV ===== */
/* .asnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(253, 248, 240, 0.8); /* cream glass */
/* backdrop-filter: blur(20px);

  border-bottom: 1px solid var(--border);
  padding: 0px 0;

  font-family: "Candara", sans-serif;
} */

/* Logo */
/* .nav-brand img {
  height: 50px;
} */

/* Links */
.navbar .nav-link {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: var(--text-soft);

  transition: all 0.3s ease;
}

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

.navbar .nav-link.active {
  color: var(--caramel);
}

/* Button */
.nav-pill {
  background: var(--caramel);
  color: var(--white);

  padding: 8px 12px;
  border-radius: 50px;

  font-size: 14px;
  letter-spacing: 0.1em;
  text-decoration: none;

  transition: all 0.3s ease;
}

.nav-pill:hover {
  background: var(--caramel-light);
  color: var(--text-dark);
}

/* ===== Dropdown (Hover Smooth) ===== */
/* ===== DROPDOWN FIX ===== */

.nav-item.dropdown {
  position: relative;
  /* padding-bottom: 12px; invisible hover area */
}

.nav-item.dropdown .dropdown-menu {
  display: block;

  opacity: 0;
  visibility: hidden;

  position: absolute;
  top: 100%;
  left: 0;

  transform: translateY(8px);
  transition: all 0.3s ease;

  min-width: 230px;

  border: none;
  border-radius: 16px;

  background: var(--white);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  pointer-events: none;

  padding: 10px 0;

  margin-top: 0;
}

/* SHOW */
.nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);

  pointer-events: auto;
}

/* ITEM */
.dropdown-item {
  padding: 12px 22px;

  font-size: 15px;
  font-weight: 600;

  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: var(--cream2);
  color: var(--caramel);

  padding-left: 28px;
}
.rain-bg {
  position: relative;
  overflow: hidden;
}

.rain-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      100deg,
      transparent,
      transparent 3px,
      rgba(200, 137, 74, 0.04) 3px,
      rgba(200, 137, 74, 0.04) 4px
    ),
    repeating-linear-gradient(
      170deg,
      transparent,
      transparent 8px,
      rgba(106, 156, 100, 0.03) 8px,
      rgba(106, 156, 100, 0.03) 9px
    );
  pointer-events: none;
  z-index: 0;
}

.rain-bg > * {
  position: relative;
  z-index: 1;
}

/* .dropdown-menu {
  background: var(--white);
  border: 1px solid #ffff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.dropdown-item:hover {
  background: var(--cream2);
  color: var(--caramel);
} */

/* HeroSectionStart */
.hero-banner-l {
  width: 100%;
  height: 118dvh;
  overflow: hidden;
}

.hero-banner-l img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.hero-banner-p {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.hero-banner-p img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* aboutsectiostart */
.about-brand-sec {
  background: var(--cream2);
}

/* .brand-visual {
  background: linear-gradient(135deg, var(--sage) 0%, var(--blush) 100%);
  border-radius: 20px;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
} */
/* .brand-visual {
  background: url("image/about.jpeg") center/cover no-repeat;
  border-radius: 20px;
 
  position: relative;
  overflow: hidden;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
} */

.brand-visual {
  width: 85%;
  height: auto;

  border-radius: 24px;
  overflow: hidden;

  position: relative;
  box-shadow: 0 0 8px 10px rgba(222, 240, 157, 0.448);
}

/* IMPORTANT */

.brand-visual .carousel-inner,
.brand-visual .carousel-item {
  width: 100%;
}

/* IMAGE */

.brand-visual .carousel-item img {
  width: 100%;
  /* height:400px;

    object-fit:cover;
    object-position:center; */

  display: block;

  transition: all 0.9s ease-in-out;
}

/* CORRECT */

.brand-visual .carousel-item img:hover {
  transform: scale(1.03);
}
/* MOBILE */

@media (max-width: 768px) {
  .brand-visual,
  .brand-visual .carousel-inner,
  .brand-visual .carousel-item,
  .brand-visual .carousel-item img {
    height: 320px;
  }
}
.sec-tag {
  font-size: clamp(38px, 0vw, 20px);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 2px;

  color: var(--caramel);
  position: relative;
  /* padding-left: 30px; */
}

/* line before text */
/* .sec-tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 10px;
  transform: translateY(-50%);

  width: 20px;
  height: 2px;

  background: linear-gradient(
    90deg,
    var(--caramel),
    var(--sage-dark)
  );
} */
.brand-text h2 {
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.brand-text {
  font-family: "Candara", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-dark);
  margin-bottom: 1.25rem;
}

.highlight-bar {
  background: linear-gradient(90deg, var(--caramel-pale), var(--sage));
  border-left: 3px solid var(--caramel);
  padding: 1rem 1.25rem;
  border-radius: 0 12px 12px 0;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 1.5rem 0;
}

/* aboutsectionend */

/* Strategic Collaboration  start */
.collab-sec {
  font-family: "Candara", sans-serif;
  background: linear-gradient(135deg, var(--blush) 0%, var(--pinks) 60%);
}
.lefttext {
  position: relative;
  z-index: 5;
}

.rightimg {
  position: relative;
  z-index: 0;
}

.sc-img-wrap {
  position: relative;
  z-index: 1;
  height: 100%;
  margin-left: -40px;
  /* background: url("image/3.png") center/cover no-repeat; */
  background: url("/lifestyle/image/3.png") center/cover no-repeat;

  background-position: 30% 50%;
  border-radius: 20px;
  min-height: 520px;
}

.sc-img-wrap-new {
  position: relative;
  z-index: 1;
  height: 100%;
  margin-right: -40px;
  /* background: url("image/3.png") center/cover no-repeat; */

  background: url("/lifestyle/image/why2.webp") center/cover
    no-repeat;

  background-position: 30% 50%;
  border-radius: 20px;
  min-height: 520px;
}
.sc-section .row {
  position: relative;
}

/* SINCE badge */
.since-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--green-brand);
  color: #fff;
  padding: 16px 28px;
  border-radius: 0 12px 0 12px;
  z-index: 4;
  line-height: 1.3;
}

.since-badge .lbl {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.9;
  text-align: center;
}

.since-badge .yr {
  display: block;
  font-size: 15px;
  font-weight: 300;
  opacity: 0.7;
  text-align: center;
  margin-top: 2px;
}

/* ── RIGHT CARD ── */
.sc-card {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-radius: 12px;
  padding: 35px 25px 25px 25px;

  margin-left: 0;
  box-shadow: 0 1px 8px 10px rgba(222, 240, 157, 0.448);
}

/* Eyebrow */
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-brand);
  margin-bottom: 10px;
}

/* Heading */
.sc-heading {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 14px;
}

/* Intro paragraph */
.sc-intro {
  font-size: 21px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.3;
  border-left: 3px solid var(--green-brand);
  padding-left: 2px;
  margin-bottom: 24px;
}

/* Section sublabel */
.sub-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.sub-label::before,
.sub-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #333;
  opacity: 0.4;
}

/* Role cards */
.role-card {
  background: var(--green-light);
  border-radius: 8px;
  border: 0.5px solid #c8deca;
  padding: 12px 12px 12px 16px;
  position: relative;
  height: 100%;
}

.role-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 4px;
}

.role-card.green::before {
  background: var(--green-brand);
}
.role-card.amber::before {
  background: var(--amber);
}

.role-who {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 5px;
}

.role-text {
  font-size: 17px;
  font-weight: 700;
  text-align: justify;
  color: var(--text-dark);
  line-height: 1.25;
}

/* Pillar items */
.pillar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.pillar-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--green-light);
  border: 1px solid #c4ddc7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.pillar-icon i {
  font-size: 32px;
  color: var(--green-brand);
  filter: drop-shadow(0px 4px 6px rgba(200, 137, 74, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pillar-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
}

/* Divider line */
.sc-divider {
  border: none;
  border-top: 1px solid #e0dbd2;
  margin: 20px 0;
}

/* ── FOOTER ── */
footer {
  background: var(--cream2);
  border-top: 1px solid var(--border);
  padding: 3rem 0 1.5rem 0;
  font-size: 13px;
  color: var(--text-soft);
}

.footer-brand {
  font-family: "Candara", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-dark);
}

.footer-brand span {
  color: var(--caramel);
}

footer a {
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s;
}

footer a:hover {
  color: var(--caramel);
}

/* esosystem
 */

/* === Manufacturing Ecosystem Section === */
.me-section {
  font-family: "Candara", sans-serif;
  padding: 50px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    /* #fde8e8 0%, */ /* #fef3e2 14%,
    #fffde7 28%,
    #e8f5e9 42%,*/ #e3f2fd
      57%,
    #ede7f6 71%,
    #fce4ec 85% /* #fde8e8ea 100% */
  );
}
.me-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      100deg,
      transparent,
      transparent 3px,
      rgba(200, 137, 74, 0.04) 3px,
      rgba(200, 137, 74, 0.04) 4px
    ),
    repeating-linear-gradient(
      170deg,
      transparent,
      transparent 8px,
      rgba(106, 156, 100, 0.03) 8px,
      rgba(106, 156, 100, 0.03) 9px
    );
  pointer-events: none;
}
.me-inner {
  position: relative;
  z-index: 1;
  padding: 5px;
  max-width: 780px;
  margin: 0 auto;
}
.me-eyebrow {
  font-size: 29px;
  font-weight: 800;
  letter-spacing: 0.12em;

  color: var(--sage-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
/* .me-eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--caramel), var(--sage-dark));
} */
.me-heading {
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 32px;
  background: linear-gradient(
    90deg,
    #c8894adc,
    #e05c7bc9,
    #6a9c64cc,
    #4a8fc8c2,
    #9c59b6c7
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* .me-card {
  /* background: rgba(255, 255, 255, 0.72); */
/* backdrop-filter: blur(18px); */
/* -webkit-backdrop-filter: blur(18px); */
/* border-radius: 20px;
  padding: 23px 20px; */
/* border: 1px solid rgba(255, 255, 255, 0.9); */
/* box-shadow: 0 8px 40px rgba(180, 255, 220, 0.68); */
/* } */
.me-intro-bar {
  /* border-left: 3px solid var(--caramel);
  padding-left: 18px; */
  font-size: 21px;
  text-align: justify;
  color: var(--text-mid);
  line-height: 1.4;
  margin-bottom: 30px;
}
.me-known-lbl {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sage-text);
  margin-bottom: 14px;
}
.me-traits {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.me-trait {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.me-trait:nth-child(1) {
  background: rgba(255, 220, 220, 0.45);
  border-color: rgba(255, 100, 100, 0.15);
}
.me-trait:nth-child(2) {
  background: rgba(255, 243, 200, 0.45);
  border-color: rgba(255, 180, 0, 0.15);
}
.me-trait:nth-child(3) {
  background: rgba(220, 255, 220, 0.45);
  border-color: rgba(80, 180, 80, 0.15);
}
.me-trait:nth-child(4) {
  background: rgba(210, 235, 255, 0.45);
  border-color: rgba(80, 150, 255, 0.15);
}
.me-trait:nth-child(5) {
  background: rgba(235, 220, 255, 0.45);
  border-color: rgba(150, 80, 255, 0.15);
}
.me-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.me-trait:nth-child(1) .me-dot {
  background: linear-gradient(135deg, #ff7eb4be, #ff4756d3);
}
.me-trait:nth-child(2) .me-dot {
  background: linear-gradient(135deg, #ffd42ac4, #ff9e43c0);
}
.me-trait:nth-child(3) .me-dot {
  background: linear-gradient(135deg, #7bed9fc7, #2ed574d3);
}
.me-trait:nth-child(4) .me-dot {
  background: linear-gradient(135deg, #70a2ffc4, #1e8fffbd);
}
.me-trait:nth-child(5) .me-dot {
  background: linear-gradient(135deg, #cd84f1d8, #9c59b681);
}
.me-trait-txt {
  font-size: 16px;
  color: var(--text-dark);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.me-eyebrow {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.me-eyebrow.vis {
  opacity: 1;
  transform: translateY(0);
}
.me-heading {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s 0.15s ease,
    transform 0.5s 0.15s ease;
}
.me-heading.vis {
  opacity: 1;
  transform: translateY(0);
}
.me-card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s 0.25s ease,
    transform 0.5s 0.25s ease;
}
.me-card.vis {
  opacity: 1;
  transform: translateY(0);
}
.me-trait {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
.me-trait.vis {
  opacity: 1;
  transform: translateX(0);
}
.me-dot {
  transform: scale(0);
  transition: transform 0.3s ease;
}
.me-trait.vis .me-dot {
  transform: scale(1);
}

.wc-section {
  background: var(--cream);
  font-family: "Candara", sans-serif;
}
.wc-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding-top: 70px;
}
.wc-left {
  position: relative;
  min-height: 300px;
}
.img-box {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-a {
  width: 62%;
  height: 230px;
  top: 0;
  left: 0;
}
.img-b {
  width: 54%;
  height: 300px;
  top: 30px;
  right: 0;
  z-index: 2;
}
.img-c {
  width: 55%;
  height: 190px;
  bottom: 0;
  z-index: 0;
  left: 10%;
}
.exp-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, var(--sage-dark), var(--sage-text));
  color: #fff;
  border-radius: 14px;
  padding: 16px 40px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(106, 156, 100, 0.35);
  z-index: 5;
}
.exp-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.exp-plus {
  font-size: 22px;
  font-weight: 800;
}
.exp-lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 4px;
}
.wc-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.wc-tag::before {
  content: "";
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--caramel), var(--sage-dark));
  border-radius: 2px;
}
.wc-h {
  font-size: clamp(35px, 4vw, 49px);
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.2;
  margin-bottom: 12px;
}
/* .wc-h span {
} */
.wc-p {
  font-size: 20px;
  color: #333;
  line-height: 1.4;
  margin-bottom: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
}
.wc-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.wc-benefit {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.wc-ico {
  width: 49px;
  height: 49px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  border: 1.5px solid;
  background: var(--sage);
  border-color: var(--border-sage);
  color: var(--sage-dark);
}
.wc-btxt h4 {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  margin-bottom: 1.5px;
}
.wc-btxt p {
  font-size: 15px;
  color: #444;
  line-height: 1.4;
}
.wc-founder {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}
.wc-favatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--caramel), var(--sage-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
}
.wc-fname {
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1a2e;
}
.wc-frole {
  font-size: 11px;
  color: #aaa;
}
.wc-btn {
  margin-left: auto;
  background: linear-gradient(135deg, var(--sage-dark), var(--sage-text));
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 22px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.wc-btn:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 6px 22px rgba(106, 156, 100, 0.4);
}
/* animations */
.img-box {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.img-box.in {
  opacity: 1;
  transform: scale(1);
}
.exp-badge {
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.5s 0.5s,
    transform 0.5s 0.5s;
}
.exp-badge.in {
  opacity: 1;
  transform: scale(1);
}
.wc-right > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.wc-right > *.in {
  opacity: 1;
  transform: translateY(0);
}
.wc-benefit {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.4s,
    transform 0.4s;
}
.wc-benefit.in {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 768px) {
  .wc-inner {
    grid-template-columns: 1fr;
  }
  .wc-left {
    min-height: 320px;
  }
}
/* ── RESPONSIVE ── */
@media (max-width: 991.98px) {
  .sc-card {
    margin-right: 0;
    margin-top: 12px;
    padding: 32px 24px;
  }

  .sc-img-wrap {
    margin-left: 0;
    margin-top: 20px;
    min-height: 300px;
  }

  .sc-img-inner {
    min-height: 300px;
  }
}

@media (max-width: 575.98px) {
  .sc-section {
    padding: 48px 0 60px;
  }

  .pillar-item .pillar-icon {
    width: 44px;
    height: 44px;
  }

  .pillar-icon i {
    font-size: 19px;
  }

  .pillar-name {
    font-size: 10px;
  }
}
@media (max-width: 576px) {
  .me-traits {
    grid-template-columns: 1fr; /* mobile पर single column */
  }
}

/* fade-in on load */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.7s ease forwards;
}

.fade-up:nth-child(1) {
  animation-delay: 0.1s;
}
.fade-up:nth-child(2) {
  animation-delay: 0.25s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .asvishaa {
  font-family: "Bisque", serif;
  font-size: 19px;
  font-weight: 900;
  color: #000;
  letter-spacing: 2px;
  text-shadow: 0 0 0.5px #000;
} */
/* Strategic Collaboration  end*/
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .hero-about h1 {
    font-size: 52px;
  }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 991.98px) {
  .sc-card {
    margin-right: 0;
    margin-top: 12px;
    padding: 32px 24px;
  }
  .sc-img-wrap {
    margin-left: 0;
    margin-top: 20px;
    min-height: 300px;
  }
  .wc-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .wc-left {
    min-height: 360px;
  }
}

@media (max-width: 768px) {
  /* image collage */
  .wc-left {
    min-height: 300px;
  }
  .img-a {
    width: 58%;
    height: 180px;
    top: 0;
    left: 0;
  }
  .img-b {
    width: 48%;
    height: 200px;
    top: 20px;
    right: 0;
  }
  .img-c {
    width: 50%;
    height: 140px;
    bottom: 0;
    left: 8%;
  }
  .exp-badge {
    padding: 12px 18px;
    right: 0;
    bottom: 0;
  }
  .exp-num {
    font-size: 22px;
  }
  .exp-lbl {
    font-size: 8px;
  }

  /* why choose right */
  .wc-p {
    font-size: 14px;
  }
  .wc-btxt h4 {
    font-size: 14px;
  }
  .wc-btxt p {
    font-size: 12px;
  }
  .wc-btn {
    padding: 8px 14px;
    font-size: 11px;
  }
  .wc-fname {
    font-size: 12px;
  }

  /* manufacturing ecosystem */
  .me-intro-bar {
    font-size: 15px;
  }
  .me-known-lbl {
    font-size: 13px;
  }
  .me-trait-txt {
    font-size: 13px;
  }
  .me-card {
    padding: 12px 10px;
  }

  /* collab section */
  .sc-card {
    padding: 28px 20px;
  }
  .sc-intro {
    font-size: 15px;
  }
  .role-text {
    font-size: 13px;
  }

  /* about section */
  .brand-text {
    font-size: 17px;
  }
}

.logo {
  height: 60px;
}
@media (max-width: 576px) {
  /* hero */
  .logo {
    height: 30px;
  }
  .hero-banner-l {
    height: 58dvh;
  }
  .hero-banner-l img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
  }

  .hero-banner-p {
    height: 55dvh;
  }
  .hero-banner-p img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
  }

  /* collage — stack layout */
  .wc-left {
    min-height: 260px;
  }
  .img-a {
    width: 60%;
    height: 160px;
  }
  .img-b {
    width: 46%;
    height: 170px;
    top: 15px;
  }
  .img-c {
    display: none;
  } /* mobile pe 2 image enough */
  .exp-badge {
    padding: 10px 14px;
    border-radius: 10px;
  }
  .exp-num {
    font-size: 18px;
  }

  /* traits */
  .me-traits {
    grid-template-columns: 1fr;
  }
  .me-card {
    padding: 12px 10px;
  }
  .me-intro-bar {
    font-size: 13px;
  }

  /* wc section */
  .wc-h {
    font-size: 22px;
  }
  .wc-p {
    font-size: 13px;
  }
  .wc-founder {
    flex-wrap: wrap;
    gap: 10px;
  }
  .wc-btn {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
  .wc-ico {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  /* pillar */
  .pillar-item .pillar-icon {
    width: 40px;
    height: 40px;
  }
  .pillar-icon i {
    font-size: 19px;
  }
  .pillar-name {
    font-size: 10px;
  }

  /* sc section */
  .sub-label {
    font-size: 11px;
  }
  .role-who {
    font-size: 11px;
  }
  .role-text {
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .img-a {
    width: 65%;
    height: 145px;
  }
  .img-b {
    width: 50%;
    height: 155px;
  }
  .me-trait-txt {
    font-size: 12px;
  }
  .wc-btxt h4 {
    font-size: 13px;
  }
}

/* scroller herder */
/* ===== NAVBAR DEFAULT ===== */

/* ===== TRANSPARENT NAVBAR ===== */

/* ===== TRANSPARENT NAVBAR ===== */

.asnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 999;

  background: transparent;

  padding: 2px 0 0 0;

  border-bottom: none;
  backdrop-filter: blur(10px);
  transition:
    background 0.4s ease,
    padding 0.4s ease,
    backdrop-filter 0.4s ease,
    box-shadow 0.4s ease;
}

/* BIG LOGO */

.logo {
  height: 90px;

  transition: all 0.4s ease;
}

.footer-link a {
  font-size: 17px;
  color: #333;
}

/* HERO LINKS */

.asnav .nav-link {
  color: #000;

  transition: all 0.3s ease;
}

/* ===== AFTER SCROLL ===== */

.asnav.scrolled {
  background: rgba(253, 248, 240, 0.92);

  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  padding: 2px 0;
}

/* SMALL LOGO AFTER SCROLL */

.asnav.scrolled .logo {
  height: 58px;
}

/* TEXT COLOR AFTER SCROLL */

.asnav.scrolled .nav-link {
  color: var(--text-soft);
}

.asnav.scrolled .nav-link:hover {
  color: var(--caramel);
}

@media (max-width: 768px) {
  .asnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 999;

    background: transparent;

    padding: 1px 0 0 0;

    border-bottom: none;
    backdrop-filter: blur(10px);
    transition:
      background 0.4s ease,
      padding 0.4s ease,
      backdrop-filter 0.4s ease,
      box-shadow 0.4s ease;
  }
  .logo {
    height: 50px;

    transition: all 0.4s ease;
  }
  .asnav.scrolled {
    background: rgba(253, 248, 240, 0.92);

    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    padding: 2px 0;
  }
  .asnav.scrolled .logo {
    height: 45px;
  }
}

/* animation */
.fade-upnew {
  opacity: 0;
  transform: translateY(70px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

.fade-left {
  opacity: 0;
  transform: translateX(-70px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

.fade-right {
  opacity: 0;
  transform: translateX(70px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

.zoom-in {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

/* ACTIVE */

.show-animation {
  opacity: 1;
  transform: translate(0) scale(1);
}
/* animation */

/* INITIAL */

.pillar-animate {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s ease;
}

/* ACTIVE */

.pillar-animate.show-pillar {
  opacity: 1;
  transform: translateY(0);
}

/* ICON DESIGN */

.pillar-icon {
  width: 70px;
  height: 70px;

  border-radius: 50%;

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

  position: relative;
  overflow: hidden;

  transition: all 0.5s ease;
}

/* COLORFUL ICONS */

.icon-1 {
  background: linear-gradient(135deg, #fff1f1, #ffd7d7);
}

.icon-1 i {
  color: #ff4d6d;
}

.icon-2 {
  background: linear-gradient(135deg, #fff7d6, #ffe27a);
}

.icon-2 i {
  color: #e09f00;
}

.icon-3 {
  background: linear-gradient(135deg, #dff7ff, #b5e8ff);
}

.icon-3 i {
  color: #0096c7;
}

.icon-4 {
  background: linear-gradient(135deg, #efe2ff, #d3b8ff);
}

.icon-4 i {
  color: #7b2cbf;
}

/* ABOUT SECTION FIX */

.about-brand-sec .row {
  align-items: center;
}

/* IMAGE SIDE */

.brand-visual {
  width: 90%;
  max-width: 500px;
  margin: auto;

  border-radius: 28px;

  overflow: hidden;

  position: relative;

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);

  background: #fff;
}

/* FIX HEIGHT */

.brand-visual .carousel-inner,
.brand-visual .carousel-item {
  height: 100%;
}

/* IMAGE */

.brand-visual .carousel-item img {
  width: 100%;
  height: 100%;

  display: block;

  transition: transform 0.8s ease;
}

/* HOVER */

.brand-visual:hover img {
  transform: scale(1.03);
}

/* TEXT SIDE */

.about-brand-sec .col-lg-6:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* HEADING */

.sec-tag {
  font-size: 40px;

  line-height: 1.1;

  margin-bottom: 15px;

  font-weight: 700;
}

/* TEXT */

.brand-text {
  font-size: 24px;

  line-height: 1.3;

  color: #2d2416;
}

/* MOBILE */

@media (max-width: 768px) {
  .brand-visual .carousel-item img {
    min-height: 320px;
  }

  .sec-tag {
    font-size: 40px;
    margin-top: 10px;
  }

  .brand-text {
    font-size: 18px;
    line-height: 1.5;
  }
}

/* ICON ANIMATION */

.pillar-icon i {
  font-size: 22px;

  transition: all 0.5s ease;
}

.pillar-animate.show-pillar .pillar-icon {
  animation: iconPop 0.8s ease;
}

.pillar-animate:hover .pillar-icon {
  transform: translateY(-8px) scale(1.08);
}

.pillar-animate:hover .pillar-icon i {
  transform: rotate(8deg);
}

/* KEYFRAME */

@keyframes iconPop {
  0% {
    transform: scale(0.4) rotate(-20deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.15) rotate(8deg);
  }

  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}