.font-manrope {
  font-family: "Manrope", sans-serif;
}

/* ---- Minimal preflight (replaces Tailwind CDN base reset) ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

p {
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

/* ---- Layout container ---- */
.container {
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

/* @media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
} */

/* @media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
} */

/* ---- Container queries ---- */
.\@container {
  container-type: inline-size;
}

/* ---- Position ---- */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.inset-0 {
  inset: 0;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.bottom-\[8\.75cqw\] {
  bottom: 8.75cqw;
}

.z-10 {
  z-index: 10;
}

/* ---- Display / flex ---- */
.flex {
  display: flex;
}

.hidden {
  display: none;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

/* ---- Sizing ---- */
.h-screen {
  height: 100vh;
}

.w-full {
  width: 100%;
}

.size-full {
  width: 100%;
  height: 100%;
}

.max-w-100 {
  max-width: 25rem;
}

.max-w-\[27\.9rem\] {
  max-width: 27.9rem;
}

.max-w-183\.75 {
  max-width: 45.9375rem;
}

.max-w-250 {
  max-width: 62.5rem;
}

.size-\[17\.5cqw\] {
  width: 17.5cqw;
  height: 17.5cqw;
}

.size-\[8\.5cqw\] {
  width: 8.5cqw;
  height: 8.5cqw;
}

.size-\[6cqw\] {
  width: 6cqw;
  height: 6cqw;
}

.w-\[96\.25cqw\] {
  width: 96.25cqw;
}

.h-\[35\.5cqw\] {
  height: 30.5cqw;
}

.w-\[1\.75cqw\] {
  width: 1.75cqw;
}

.h-\[3cqw\] {
  height: 3cqw;
}

/* ---- Aspect ratio ---- */
.aspect-400\/460 {
  aspect-ratio: 400 / 460;
}

.aspect-400\/358 {
  aspect-ratio: 400 / 358;
}

/* ---- Spacing (padding / margin) ---- */
.p-4 {
  padding: 1rem;
}

.py-25 {
  padding-top: 6.25rem !important;
  padding-bottom: 6.25rem !important;
}

.p-\[8\.75cqw\] {
  padding: 8.75cqw;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-\[8\.75cqw\] {
  padding-left: 8.75cqw;
  padding-right: 8.75cqw;
}

.mt-0 {
  margin-top: 0;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mt-\[0\.5cqw\] {
  margin-top: 0.5cqw;
}

/* ---- space-y-* ---- */
.space-y-30 > * + * {
  margin-top: 7.5rem;
}

.space-y-15 > * + * {
  margin-top: 3.75rem;
}

.space-y-\[6cqw\] > * + * {
  margin-top: 6cqw;
}

/* ---- Gap ---- */
.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-\[1cqw\] {
  gap: 1cqw;
}

/* ---- Overflow / object ---- */
.overflow-hidden {
  overflow: hidden;
}

.object-cover {
  object-fit: cover;
}

/* ---- Transform ---- */
.-translate-y-1\/2 {
  transform: translateY(-50%);
}

/* ---- Border radius ---- */
.rounded-\[5cqw\] {
  border-radius: 5cqw;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-l-\[3cqw\] {
  border-top-left-radius: 3cqw;
  border-bottom-left-radius: 3cqw;
}

/* ---- Backgrounds ---- */
.bg-black\/10 {
  background-color: rgba(0, 0, 0, 0.1);
}

.bg-white {
  background-color: #fff;
}

.bg-\[\#7D1FA2\] {
  background-color: #7d1fa2;
}

.bg-\[\#7D1FA2\]\/6 {
  background-color: rgba(125, 31, 162, 0.06);
}

.bg-linear-to-br {
  background-image: linear-gradient(
    to bottom right,
    var(--tw-gradient-from, transparent),
    var(--tw-gradient-to, transparent)
  );
}

.from-\[\#FFA400\] {
  --tw-gradient-from: #ffa400;
}

.to-\[\#FF6B00\] {
  --tw-gradient-to: #ff6b00;
}

/* ---- Text color ---- */
.text-white {
  color: #fff;
}

.text-\[\#FFA400\] {
  color: #ffa400;
}

.text-\[\#F9F9F9\] {
  color: #f9f9f9;
}

.text-\[\#D61F8C\] {
  color: #d61f8c;
}

.text-\[\#9D1D96\] {
  color: #9d1d96;
}

/* ---- Font size / line height ---- */
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-\[40px\] {
  font-size: 40px;
}

.text-\[30px\] {
  font-size: 30px;
}

.text-\[25px\] {
  font-size: 25px;
}

.text-\[6cqw\]\/\[8cqw\] {
  font-size: 6cqw;
  line-height: 8cqw;
}

.text-\[4\.5cqw\]\/\[7cqw\] {
  font-size: 4.5cqw;
  line-height: 7cqw;
}

.text-\[4cqw\]\/\[6cqw\] {
  font-size: 4cqw;
  line-height: 6cqw;
}

/* ---- Font weight ---- */
.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

/* ---- Text transform / align / wrap / tracking ---- */
.uppercase {
  text-transform: uppercase;
}

.text-center {
  text-align: center;
}

.text-wrap {
  text-wrap: wrap;
}

.tracking-\[2\%\] {
  letter-spacing: 0.02em;
}

/* ---- Opacity ---- */
.o-0 {
  opacity: 0;
}

/* ---- Text shadow (lg + black/20) ---- */
.text-shadow-lg {
  text-shadow:
    0 1px 2px var(--tw-text-shadow-color, rgba(0, 0, 0, 0.1)),
    0 3px 2px var(--tw-text-shadow-color, rgba(0, 0, 0, 0.1)),
    0 4px 8px var(--tw-text-shadow-color, rgba(0, 0, 0, 0.1));
}

.text-shadow-black\/20 {
  --tw-text-shadow-color: rgba(0, 0, 0, 0.2);
}

/* ---- Box shadow (lg + black/20) ---- */
.shadow-lg {
  box-shadow:
    0 10px 15px -3px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)),
    0 4px 6px -4px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
}

.shadow-black\/20 {
  --tw-shadow-color: rgba(0, 0, 0, 0.2);
}

/* ---- Cursor ---- */
.cursor-pointer {
  cursor: pointer;
}

.mb-3 {
  margin-bottom: 20px;
}

.line-height-3rem {
  line-height: 5rem;
}

.esg-sub-nav {
  margin-top: 114px;
}

.for-mob {
  display: none;
}

@media (max-width: 767px) {
  .for-mob {
    display: block;
  }
  .for-desk {
    display: none;
  }
  .line-height-3rem {
    line-height: 4rem;
  }

  .banner-section .h-screen {
    display: none;
  }

  /* .banner-section .esg-sub-nav {
    margin-bottom: 50px !important;
  } */

  .banner-section {
    background-image: url("../images/csr-2026/csr-banner.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* ---- Responsive (lg: 1024px) ---- */
@media (min-width: 1024px) {
  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:max-w-sm {
    max-width: 24rem;
  }

  .lg\:max-w-130\.25 {
    max-width: 32.5625rem;
  }
}