.page-essential {
  --es-navy: #03152f;
  --es-blue: #062653;
  --es-red: #cf101c;
  --es-yellow: #ffd20a;
  overflow-x: hidden;
  background: #f7f3ed;
  color: #17213a
}

.page-essential .container {
  width: calc(100% - 48px);
  max-width: 1440px
}

.page-essential h1,
.page-essential h2,
.page-essential h3 {
  font-family: var(--gem-font-heading);
  font-weight: 900
}

.page-essential .shared-site-header .nav-link.active {
  color: var(--gem-yellow) !important
}

.page-essential.es-content-ready [data-aos] {
  opacity: 1 !important;
  transform: none !important
}

.es-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 74% 38%, rgba(27, 67, 100, .68), transparent 35%), linear-gradient(115deg, #020e22, #041a39 63%, #061d3d)
}

.es-hero:before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .17;
  background-image: radial-gradient(circle at 80% 25%, transparent 0 44px, #d11 45px 46px, transparent 47px), linear-gradient(35deg, transparent 48%, rgba(255, 255, 255, .12) 49% 50%, transparent 51%);
  background-size: 210px 210px, 170px 170px
}

.es-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 47% 53%;
  align-items: center;
  min-height: 500px;
  padding-bottom: 42px
}

.es-hero__copy nav {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase
}

.es-hero__copy nav a,
.es-hero__copy nav span {
  color: #fff
}

.es-hero__copy nav i {
  font-size: 7px
}

.es-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(60px, 6vw, 94px);
  font-weight: 900;
  font-style: italic;
  line-height: .86;
  letter-spacing: -.055em;
  text-transform: uppercase;
  text-shadow: 0 5px 0 rgba(0, 0, 0, .2)
}

.es-hero h1 span {
  display: block;
  margin-top: 10px;
  color: var(--es-red);
  font-size: .66em;
  letter-spacing: -.045em
}

.es-hero__copy>p {
  max-width: 590px;
  margin: 20px 0 24px;
  color: #fff;
  font-size: 18px;
  line-height: 1.45
}

.es-hero__copy>p strong {
  color: var(--es-yellow)
}

.es-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 650px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 17px
}

.es-benefits article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border-right: 1px solid rgba(255, 255, 255, .2)
}

.es-benefits article:first-child {
  padding-left: 0
}

.es-benefits article:last-child {
  border: 0
}

.es-benefits i {
  color: var(--es-yellow);
  font-size: 31px
}

.es-benefits b,
.es-benefits small {
  display: block;
  color: #fff
}

.es-benefits b {
  font-size: 10px;
  text-transform: uppercase
}

.es-benefits small {
  font-size: 8px
}

.es-hero__art {
  position: relative;
  align-self: end;
  min-width: 0
}

.es-hero__art>img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 25px rgba(0, 0, 0, .45))
}

.es-date {
  position: absolute;
  right: 3%;
  bottom: 30px;
  min-width: 330px;
  padding: 12px 28px;
  text-align: center;
  color: #111;
  background: var(--es-yellow);
  clip-path: polygon(3% 0, 97% 5%, 100% 45%, 96% 100%, 3% 96%, 0 55%);
  transform: rotate(-1deg);
  text-transform: uppercase
}

.es-date span,
.es-date strong {
  display: block
}

.es-date span {
  font-size: 17px;
  font-weight: 900
}

.es-date strong {
  font-size: 18px
}

.es-hero__cut {
  position: absolute;
  z-index: 3;
  right: -3%;
  bottom: -28px;
  left: -3%;
  height: 58px;
  background: #fff;
  clip-path: polygon(0 35%, 56% 72%, 100% 0, 100% 100%, 0 100%)
}

.es-hero__cut:before {
  position: absolute;
  right: 0;
  bottom: 26px;
  left: 0;
  height: 8px;
  content: "";
  background: var(--es-red);
  transform: rotate(-2deg)
}

.es-section {
  position: relative;
  padding: 28px 0 22px;
  background-color: #f7f3ed;
  background-image: radial-gradient(rgba(91, 57, 25, .09) .7px, transparent .7px);
  background-size: 9px 9px
}

.es-heading {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  margin-bottom: 18px
}

.es-heading>span {
  display: grid;
  height: 54px;
  place-items: center;
  color: #fff;
  background: var(--es-red);
  font-size: 33px;
  font-weight: 900;
  font-style: italic;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%)
}

.es-heading h2 {
  position: relative;
  margin: 0 0 0 16px;
  color: #102342;
  font-size: 28px;
  font-style: italic;
  text-transform: uppercase
}

.es-heading h2:after {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 178px;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--es-red), var(--es-navy))
}

.es-heading>a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  border-radius: 5px;
  color: #fff;
  background: var(--es-navy);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase
}

/* .es-banner-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr .9fr;
  gap: 12px
} */

/* =====================================================
   SLIDES GRID SIZE
   YAHAN 3 SLIDES KI WIDTH CONTROL HOTI HAI
===================================================== */

.es-banner-grid{
  display:grid;

  /* Sab 3 columns equal width */
  grid-template-columns:repeat(3, 1fr);

  gap:12px;
}

.es-crop {
  position: relative;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 6px 15px rgba(7, 21, 48, .13);
  aspect-ratio: 16/9;
  cursor: zoom-in;
  transition: transform .28s, box-shadow .28s
}

.es-crop>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.es-crop figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 12px;
  color: #fff;
  background: linear-gradient(transparent, rgba(3, 21, 47, .94));
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase
}

.es-crop:hover {
  z-index: 2;
  transform: translateY(-4px);
  box-shadow: 0 14px 24px rgba(7, 21, 48, .22)
}

.es-banner-grid .es-crop:nth-child(1) {
  --crop-position: 4.75% 29.9%
}

.es-banner-grid .es-crop:nth-child(2) {
  --crop-position: 53.44% 29.9%
}

.es-banner-grid .es-crop:nth-child(3) {
  --crop-position: 94.91% 29.62%
}

.es-banner-grid .es-crop:nth-child(4) {
  --crop-position: 4.7% 40.73%
}

.es-banner-grid .es-crop:nth-child(5) {
  --crop-position: 46.31% 40.77%
}

.es-banner-grid .es-crop:nth-child(6) {
  --crop-position: 94.36% 40.73%
}

.es-banner--team,
.es-banner--kijang,
.es-banner--mrt {
  align-self: stretch
}

.es-banner--team {
  grid-column: 1
}

.es-banner--kijang {
  grid-column: 2
}

.es-banner--mrt {
  grid-column: 3
}

.es-banner-grid .es-crop {
  width: 100%
}

.es-banner--awas,
.es-banner--start,
.es-banner--port {
  aspect-ratio: 2.25/1
}

.es-banner--team,
.es-banner--kijang,
.es-banner--mrt {
  aspect-ratio: 1.7/1
}

.es-load {
  display: flex;
  min-width: 220px;
  height: 39px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 14px auto 0;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: var(--es-navy);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase
}

.es-load:hover {
  background: var(--es-red)
}

.es-extra {
  display: none;
  opacity: 0;
  transform: translateY(15px)
}

.es-extra.is-visible {
  display: flex;
  animation: esReveal .42s var(--reveal-delay, 0ms) both
}

@keyframes esReveal {
  to {
    opacity: 1;
    transform: none
  }
}

.es-extra-card {
  min-height: 145px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 6px solid var(--es-yellow);
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, #151515, #7b120e);
  text-align: center;
  text-transform: uppercase
}

.es-extra-card i {
  color: var(--es-yellow);
  font-size: 32px
}

.es-extra-card b {
  font-size: 20px
}

.es-extra-card span {
  font-size: 10px
}

.es-clipboards {
  color: #fff;
  background-color: #052754;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px), linear-gradient(30deg, transparent 47%, rgba(35, 123, 181, .13) 48% 50%, transparent 51%);
  background-size: 11px 11px, 180px 180px
}

.es-heading--dark h2 {
  color: #fff
}

.es-heading--dark h2:after {
  background: linear-gradient(90deg, var(--es-red), #fff)
}

.es-heading--dark>a {
  border: 1px solid #fff
}

.es-clipboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 52px;
  padding: 0 42px
}

.es-clipboard-grid .es-crop {
  aspect-ratio: 4/5;
  box-shadow: none;
  border: 9px solid #8a562a;
  border-radius: 8px
}

.es-clipboard-grid .es-crop:hover {
  filter: drop-shadow(0 13px 11px rgba(0, 0, 0, .35))
}

.es-load--outline {
  border: 1px solid #fff;
  background: transparent
}

.es-clipboard-extra {
  min-height: 245px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 12px solid #74441e;
  border-radius: 8px;
  color: #241207;
  background: #eab25a;
  box-shadow: inset 0 0 30px rgba(83, 38, 8, .35);
  text-align: center;
  text-transform: uppercase
}

.es-clipboard-extra i {
  font-size: 55px
}

.es-clipboard-extra b {
  font-size: 21px
}

.es-clipboard-extra span {
  font-size: 11px
}

.es-accessory-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 8px
}

.es-accessory-grid .es-crop {
  width: 100%;
  aspect-ratio: 4/5;
  border: 1px solid #d9d4cd;
  background-color: #fff
}

.es-accessory-grid .es-crop>img {
  object-fit: cover
}

.es-product-extra {
  min-height: 190px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #d9d4cd;
  border-radius: 5px;
  color: var(--es-navy);
  background: #fff;
  text-align: center
}

.es-product-extra i {
  color: var(--es-red);
  font-size: 52px
}

.es-product-extra b {
  margin-top: 8px;
  font-size: 12px;
  text-transform: uppercase
}

.es-feature-strip {
  padding: 12px 0;
  color: #fff;
  background: var(--es-navy)
}

.es-feature-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.35fr;
  align-items: center
}

.es-feature-strip article {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 17px;
  border-right: 1px solid rgba(255, 255, 255, .18)
}

.es-feature-strip article:first-child {
  padding-left: 0
}

.es-feature-strip article>i {
  color: var(--es-yellow);
  font-size: 29px
}

.es-feature-strip b,
.es-feature-strip small {
  display: block;
  color: #fff
}

.es-feature-strip b {
  font-size: 9px;
  text-transform: uppercase
}

.es-feature-strip small {
  font-size: 8px
}

.es-feature-strip__grid>a {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 62px;
  padding: 7px 18px;
  color: #fff;
  background: var(--es-red);
  text-decoration: none;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%)
}

.es-feature-strip__grid>a>i {
  font-size: 30px
}

.es-feature-strip__grid>a span {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase
}

.es-feature-strip__grid>a small {
  display: block
}

.es-feature-strip__grid>a strong {
  font-size: 19px
}

.page-essential .shared-site-footer {
  margin-top: 0
}

.es-hero__art {
  cursor: zoom-in
}

.es-viewer[hidden] {
  display: none
}

.es-viewer {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 8, 22, .94);
  backdrop-filter: blur(5px)
}

.es-viewer__dialog {
  position: relative;
  display: flex;
  width: min(1180px, 100%);
  max-height: calc(100vh - 48px);
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.es-viewer__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 65px rgba(0, 0, 0, .48)
}

.es-viewer__dialog>p {
  width: 100%;
  margin: 0;
  padding: 12px 18px;
  color: #fff;
  background: var(--es-navy);
  font-size: 14px;
  font-weight: 700;
  text-align: center
}

.es-viewer__close {
  position: absolute;
  z-index: 2;
  top: -16px;
  right: -16px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  color: #fff;
  background: var(--es-red);
  font-size: 19px
}

.es-viewer-open {
  overflow: hidden
}

.page-essential :focus-visible {
  outline: 3px solid var(--es-yellow);
  outline-offset: 3px
}

@media(max-width:1199.98px) {
  .es-hero {
    min-height: 500px
  }

  .es-hero h1 {
    font-size: 64px
  }

  .es-date {
    right: 0;
    min-width: 280px
  }

  .es-benefits article {
    padding-inline: 8px
  }

  .es-heading h2 {
    font-size: 25px
  }

  .es-clipboard-grid {
    gap: 25px;
    padding-inline: 20px
  }

  .es-feature-strip__grid {
    grid-template-columns: repeat(2, 1fr) 1.25fr
  }

  .es-feature-strip__grid>a {
    grid-column: 3;
    grid-row: 1/3
  }

  .es-feature-strip article:nth-child(2) {
    border-right: 0
  }
}

@media(max-width:991.98px) {
  .page-essential .container {
    width: calc(100% - 36px)
  }

  .es-hero__grid {
    grid-template-columns: 1fr;
    min-height: 850px;
    padding-top: 55px
  }

  .es-hero__copy {
    z-index: 2
  }

  .es-hero__art {
    width: min(720px, 95%);
    margin: -20px auto 0
  }

  .es-banner-grid {
    grid-template-columns: 1fr 1fr
  }

  .es-banner--awas,
  .es-banner--team {
    grid-column: 1
  }

  .es-banner--start,
  .es-banner--port,
  .es-banner--kijang,
  .es-banner--mrt {
    grid-column: 2
  }

  .es-clipboard-grid {
    grid-template-columns: 1fr 1fr;
    padding-inline: 55px
  }

  .es-accessory-grid {
    grid-template-columns: repeat(4, 1fr)
  }

  .es-feature-strip__grid {
    grid-template-columns: 1fr 1fr
  }

  .es-feature-strip__grid>a {
    grid-column: 1/-1;
    grid-row: auto;
    margin-top: 8px
  }

  .page-essential .shared-site-footer>.container>.row {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:767.98px) {
  .es-heading {
    grid-template-columns: 60px 1fr
  }

  .es-heading>a {
    grid-column: 1/-1;
    justify-self: end;
    margin-top: 13px
  }

  .es-heading>span {
    height: 48px;
    font-size: 28px
  }

  .es-heading h2 {
    font-size: 23px
  }

  .es-hero__grid {
    min-height: 780px
  }

  .es-hero h1 {
    font-size: 54px
  }

  .es-hero__copy>p {
    font-size: 15px
  }

  .es-benefits {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .es-benefits article,
  .es-benefits article:first-child {
    padding: 0;
    border: 0
  }

  .es-date {
    bottom: 6px
  }

  .es-clipboard-grid {
    padding-inline: 30px
  }

  .es-accessory-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:575.98px) {
  .page-essential .container {
    width: calc(100% - 24px)
  }

  .es-hero__grid {
    min-height: 720px;
    padding-top: 35px
  }

  .es-hero__copy {
    min-width: 0
  }

  .es-hero h1 {
    font-size: 42px;
    line-height: .93
  }

  .es-hero__copy>p {
    max-width: 100%;
    padding-right: 8px;
    font-size: 13px;
    overflow-wrap: anywhere
  }

  .es-hero__art {
    width: 112%;
    margin: 5px -6% 0
  }

  .es-date {
    right: 8%;
    bottom: 0;
    min-width: 240px;
    padding: 9px 18px
  }

  .es-date span,
  .es-date strong {
    font-size: 13px
  }

  .es-heading>a {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    justify-self: start;
    margin-left: 0
  }

  .es-banner-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .es-banner--awas,
  .es-banner--start,
  .es-banner--port,
  .es-banner--team,
  .es-banner--kijang,
  .es-banner--mrt {
    grid-column: 1
  }

  .es-clipboard-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-inline: 0
  }

  .es-accessory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .es-product-extra {
    min-height: 165px
  }

  .es-feature-strip__grid {
    grid-template-columns: 1fr
  }

  .es-feature-strip article {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15)
  }

  .es-feature-strip__grid>a {
    grid-template-columns: 35px 1fr;
    clip-path: none
  }

  .es-feature-strip__grid>a strong {
    grid-column: 2
  }

  .page-essential .shared-site-footer>.container>.row {
    grid-template-columns: 1fr
  }
}

@media(max-width:390px) {
  .es-hero h1 {
    font-size: 37px
  }

  .es-hero__grid {
    min-height: 680px
  }

  .es-clipboard-grid {
    grid-template-columns: 1fr
  }

  .es-heading h2 {
    font-size: 20px
  }
}

@media(prefers-reduced-motion:reduce) {
  .page-essential * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important
  }

  .page-essential [data-aos] {
    opacity: 1 !important;
    transform: none !important
  }
}

/* Final presentation and responsive refinements. */
.es-hero__copy {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  padding: 58px 0 64px
}

.es-benefits {
  margin-top: auto
}

.es-benefits article {
  cursor: default
}

.es-date {
  padding-inline: 34px;
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  transform: none
}

.es-heading {
  grid-template-columns: 72px 1fr
}

.es-crop,
.es-hero__art {
  cursor: pointer
}

.es-crop figcaption {
  padding: 36px 12px 11px;
  background: linear-gradient(to bottom, transparent 0, rgba(3, 21, 47, .3) 30%, rgba(3, 21, 47, .98) 100%);
  pointer-events: none
}

.es-feature-strip {
  background-color: #061b3d;
  background-image: radial-gradient(circle at 15% 20%, rgba(31, 100, 164, .4), transparent 28%), linear-gradient(110deg, #020b1b 0, #072856 58%, #03142f 100%)
}

.es-feature-strip__grid>a {
  background: linear-gradient(110deg, #e00d22, #b90818)
}

.es-viewer {
  background: radial-gradient(circle at center, rgba(12, 40, 75, .72), rgba(0, 7, 18, .97) 72%);
  backdrop-filter: blur(7px)
}

.es-viewer__close {
  top: -13px;
  right: -13px;
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 17px;
  line-height: 1
}

.es-viewer__close i {
  display: block;
  line-height: 1
}

@media(max-width:991.98px) {
  .es-hero__grid {
    min-height: 780px;
    padding-top: 35px
  }

  .es-hero__copy {
    align-self: auto;
    padding: 0
  }

  .es-benefits {
    margin-top: 22px
  }

  .es-hero__art {
    margin-top: -10px
  }
}

@media(max-width:767.98px) {
  .es-hero__grid {
    min-height: 690px;
    padding-top: 26px
  }

  .es-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-top: 13px
  }

  .es-benefits article,
  .es-benefits article:first-child {
    gap: 7px;
    padding: 0 8px;
    border-right: 1px solid rgba(255, 255, 255, .2)
  }

  .es-benefits article:first-child {
    padding-left: 0
  }

  .es-benefits article:last-child {
    border-right: 0
  }

  .es-benefits i {
    font-size: 24px
  }

  .es-benefits b {
    font-size: 8px
  }

  .es-benefits small {
    font-size: 7px
  }

  .es-accessory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .es-viewer__close {
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    font-size: 15px
  }
}

@media(max-width:575.98px) {
  .es-hero__grid {
    min-height: 610px;
    padding-top: 22px;
    padding-bottom: 40px
  }

  .es-hero__copy>p {
    margin: 16px 0 18px;
    padding-right: 0
  }

  .es-benefits {
    margin-top: 0
  }

  .es-benefits article,
  .es-benefits article:first-child {
    align-items: flex-start;
    gap: 5px;
    padding: 0 5px
  }

  .es-benefits article:first-child {
    padding-left: 0
  }

  .es-benefits i {
    font-size: 21px
  }

  .es-benefits b {
    font-size: 7px;
    line-height: 1.15
  }

  .es-benefits small {
    margin-top: 3px;
    font-size: 6px;
    line-height: 1.2
  }

  .es-hero__art {
    width: 108%;
    margin: 2px -4% 0
  }

  .es-date {
    right: 5%;
    bottom: 0;
    min-width: 220px;
    padding: 8px 22px
  }

  .es-date span,
  .es-date strong {
    font-size: 12px
  }

  .es-banner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
  }

  .es-banner--awas,
  .es-banner--start,
  .es-banner--port,
  .es-banner--team,
  .es-banner--kijang,
  .es-banner--mrt {
    grid-column: auto;
    aspect-ratio: 4/3
  }

  .es-crop figcaption {
    padding: 28px 8px 8px;
    font-size: 9px
  }

  .es-clipboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-inline: 0
  }

  .es-accessory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
  }

  .es-feature-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0
  }

  .es-feature-strip article {
    min-width: 0;
    padding: 8px 6px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15)
  }

  .es-feature-strip article:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, .15)
  }

  .es-feature-strip article>i {
    font-size: 23px
  }

  .es-feature-strip b {
    font-size: 7px
  }

  .es-feature-strip small {
    font-size: 6px
  }

  .es-feature-strip__grid>a {
    grid-column: 1/-1;
    grid-template-columns: 35px 1fr auto;
    margin-top: 8px;
    clip-path: none
  }

  .es-feature-strip__grid>a strong {
    grid-column: auto;
    font-size: 16px
  }

  .es-viewer {
    padding: 12px
  }

  .es-viewer__dialog {
    max-height: calc(100vh - 24px)
  }

  .es-viewer__image {
    max-height: calc(100vh - 90px)
  }

  .es-viewer__close {
    top: 7px;
    right: 7px
  }
}

@media(max-width:390px) {
  .es-hero__grid {
    min-height: 575px
  }

  .es-clipboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .es-benefits i {
    font-size: 19px
  }

  .es-benefits b {
    font-size: 6.5px
  }

  .es-benefits small {
    font-size: 5.5px
  }
}

/* =========================================================
   EVENT BANNER SECTION ONLY
   Slides section ko affect NAHI karega
========================================================= */

#event-banner-gallery #event-banner-grid {
    display: grid !important;

    /* EXACTLY 2 BANNERS PER ROW */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;
}


/* =========================================================
   EVENT BANNER CARD SIZE
   Original image ratio maintain hoga
========================================================= */

#event-banner-gallery #event-banner-grid > figure {
    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    max-width: none !important;

    /* Fixed 16:9 hata diya - image zoom/crop nahi hogi */
    aspect-ratio: auto !important;
    height: auto !important;

    margin: 0 !important;

    background: #fff;
}


/* =========================================================
   EVENT BANNER IMAGE
   FULL IMAGE VIEW - NO ZOOM / NO CROP
========================================================= */

#event-banner-gallery #event-banner-grid > figure > img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    /* IMPORTANT:
       cover ki jagah contain
       poora banner show hoga
    */
    object-fit: contain !important;
    object-position: center center !important;
}


/* =========================================================
   LOAD MORE BANNERS
========================================================= */

#event-banner-gallery #event-banner-grid > .es-extra {
    display: none !important;
}

#event-banner-gallery #event-banner-grid > .es-extra.is-visible {
    display: block !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    #event-banner-gallery #event-banner-grid {
        grid-template-columns: 1fr !important;
    }

}/* =========================================================
   EVENT BANNER SECTION ONLY
   Slides section ko affect NAHI karega
========================================================= */

#event-banner-gallery #event-banner-grid {
    display: grid !important;

    /* EXACTLY 2 BANNERS PER ROW */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;
}


/* =========================================================
   EVENT BANNER CARD SIZE
   Original image ratio maintain hoga
========================================================= */

#event-banner-gallery #event-banner-grid > figure {
    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    max-width: none !important;

    /* Fixed 16:9 hata diya - image zoom/crop nahi hogi */
    aspect-ratio: auto !important;
    height: auto !important;

    margin: 0 !important;

    background: #fff;
}


/* =========================================================
   EVENT BANNER IMAGE
   FULL IMAGE VIEW - NO ZOOM / NO CROP
========================================================= */

#event-banner-gallery #event-banner-grid > figure > img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    /* IMPORTANT:
       cover ki jagah contain
       poora banner show hoga
    */
    object-fit: contain !important;
    object-position: center center !important;
}


/* =========================================================
   LOAD MORE BANNERS
========================================================= */

#event-banner-gallery #event-banner-grid > .es-extra {
    display: none !important;
}

#event-banner-gallery #event-banner-grid > .es-extra.is-visible {
    display: block !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    #event-banner-gallery #event-banner-grid {
        grid-template-columns: 1fr !important;
    }

}

/* =========================================================
   SECTION 06
   AWAS SLIDER + EVENT STICKERS
   ONLY SECTION 06
========================================================= */

#event-showcase-06{
    position:relative;
    overflow:hidden;
}


/* =========================================================
   MAIN LAYOUT

   LEFT  = AWAS
   RIGHT = STICKERS
========================================================= */

#event-showcase-06 .es-event-showcase__layout{

    display:grid !important;

    grid-template-columns:
        245px
        minmax(0,1fr) !important;

    align-items:start !important;

    gap:15px !important;

    width:100%;
}


/* =========================================================
   LEFT SIDE
   AWAS SLIDER
========================================================= */

#event-showcase-06 .es-awas-slider{

    width:245px !important;
    max-width:245px !important;

    min-width:0 !important;

    padding:9px !important;

    border:1px solid #e2ded8;

    border-radius:7px;

    background:#fff !important;

    box-shadow:
        0 5px 15px
        rgba(7,21,48,.10);

    overflow:hidden !important;
}


/* =========================================================
   AWAS VIEWPORT
========================================================= */

#event-showcase-06 .es-awas-slider__viewport{

    position:relative !important;

    width:100% !important;

    /*
       AWAS card ki total image height
       yahan change kar sakte hain
    */
    height:245px !important;

    overflow:hidden !important;

    border-radius:5px;
}


/* =========================================================
   AWAS TRACK
========================================================= */

#event-showcase-06 .es-awas-slider__track{

    position:relative !important;

    width:100% !important;
    height:100% !important;

    min-height:0 !important;
}


/* =========================================================
   AWAS SLIDE
========================================================= */

#event-showcase-06 .es-awas-slide{

    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;

    margin:0 !important;

    /*
       Existing .es-crop ka 16:9 cancel
    */
    aspect-ratio:auto !important;

    border:0 !important;
    border-radius:5px !important;

    background:#fff !important;

    box-shadow:none !important;

    opacity:0 !important;

    visibility:hidden !important;

    transform:none !important;

    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


/* ACTIVE AWAS */

#event-showcase-06 .es-awas-slide.is-active{

    opacity:1 !important;

    visibility:visible !important;

    pointer-events:auto;
}


/* =========================================================
   AWAS IMAGE
========================================================= */

#event-showcase-06 .es-awas-slide > img{

    display:block !important;

    width:100% !important;
    height:100% !important;

    /*
       Full AWAS image
       crop/zoom nahi hoga
    */
    object-fit:contain !important;

    object-position:center !important;

    background:#fff !important;
}


/* =========================================================
   AWAS TITLE / FIGCAPTION

   Existing JS alt text se automatically
   figcaption create karega.
========================================================= */

#event-showcase-06 .es-awas-slide > figcaption{

    position:absolute !important;

    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    z-index:3;

    padding:
        22px 10px
        8px !important;

    color:#fff !important;

    background:
        linear-gradient(
            transparent,
            rgba(3,21,47,.96)
        ) !important;

    font-size:9px !important;

    font-weight:800 !important;

    line-height:1.25 !important;

    text-align:left;

    text-transform:uppercase;
}


/* =========================================================
   AWAS CONTROLS
========================================================= */

#event-showcase-06 .es-awas-controls{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:8px !important;

    min-height:34px;

    padding-top:7px;
}


/* =========================================================
   AWAS ARROW BUTTON
========================================================= */

#event-showcase-06 .es-awas-arrow{

    display:grid;

    width:28px;
    height:28px;

    place-items:center;

    flex:0 0 28px;

    padding:0;

    border:0;

    border-radius:50%;

    color:#fff;

    background:
        var(--es-navy);

    font-size:12px;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


#event-showcase-06 .es-awas-arrow:hover{

    background:
        var(--es-red);

    transform:
        translateY(-1px);
}


/* =========================================================
   AWAS DOTS
========================================================= */

#event-showcase-06 .es-awas-dots{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:4px;

    max-width:130px;
}


#event-showcase-06 .es-awas-dots button{

    width:6px;
    height:6px;

    flex:0 0 6px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#c9c9c9;

    cursor:pointer;

    transition:.2s ease;
}


#event-showcase-06 .es-awas-dots button.is-active{

    width:17px;

    flex-basis:17px;

    border-radius:20px;

    background:
        var(--es-red);
}


/* =========================================================
   RIGHT SIDE
   STICKER GRID

   EXACTLY 3 PER ROW
========================================================= */

#event-showcase-06 .es-event-sticker-grid{

    display:grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

    align-items:start !important;

    gap:12px !important;

    width:100% !important;

    min-width:0 !important;
}


/* =========================================================
   STICKER CARD
========================================================= */

#event-showcase-06 .es-event-sticker-card{

    position:relative !important;

    width:100% !important;

    min-width:0 !important;

    margin:0 !important;

    /*
       Sticker card ratio
    */
    aspect-ratio:4 / 3 !important;

    overflow:hidden !important;

    border:1px solid #e0dcd6;

    border-radius:6px !important;

    background:#fff !important;

    box-shadow:
        0 5px 14px
        rgba(7,21,48,.10) !important;
}


/* =========================================================
   STICKER IMAGE
========================================================= */

#event-showcase-06 .es-event-sticker-card > img{

    display:block !important;

    width:100% !important;
    height:100% !important;

    /*
       Full sticker image visible
    */
    object-fit:contain !important;

    object-position:center !important;

    background:#fff !important;
}


/* =========================================================
   STICKER TITLE
========================================================= */

#event-showcase-06 .es-event-sticker-card > figcaption{

    position:absolute !important;

    right:0 !important;

    bottom:0 !important;

    left:0 !important;

    z-index:3;

    padding:
        24px 10px
        8px !important;

    color:#fff !important;

    background:
        linear-gradient(
            transparent,
            rgba(3,21,47,.96)
        ) !important;

    font-size:9px !important;

    font-weight:800 !important;

    line-height:1.3 !important;

    text-align:left;

    text-transform:uppercase;
}


/* =========================================================
   HOVER
========================================================= */

#event-showcase-06 .es-event-sticker-card:hover{

    z-index:2;

    transform:
        translateY(-3px) !important;

    box-shadow:
        0 12px 22px
        rgba(7,21,48,.18) !important;
}


/* =========================================================
   LOAD MORE ITEMS
========================================================= */

#event-showcase-06 .es-event-06-extra{

    display:none !important;

    opacity:0;

    transform:
        translateY(15px);
}


/* Visible after clicking Load More */

#event-showcase-06 .es-event-06-extra.is-visible{

    display:block !important;

    animation:
        esReveal
        .42s
        var(--reveal-delay,0ms)
        both;
}


/* =========================================================
   LOAD MORE BUTTON
========================================================= */

#event-showcase-06 > .container > .es-load{

    margin-top:14px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1199.98px){

    #event-showcase-06 .es-event-showcase__layout{

        grid-template-columns:
            220px
            minmax(0,1fr) !important;

    }


    #event-showcase-06 .es-awas-slider{

        width:220px !important;

        max-width:220px !important;

    }


    #event-showcase-06 .es-awas-slider__viewport{

        height:225px !important;

    }

}


/* =========================================================
   TABLET SMALL
========================================================= */

@media(max-width:991.98px){

    #event-showcase-06 .es-event-showcase__layout{

        grid-template-columns:
            200px
            minmax(0,1fr) !important;

        gap:12px !important;

    }


    #event-showcase-06 .es-awas-slider{

        width:200px !important;

        max-width:200px !important;

    }


    #event-showcase-06 .es-awas-slider__viewport{

        height:210px !important;

    }


    #event-showcase-06 .es-event-sticker-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px){

    #event-showcase-06 .es-event-showcase__layout{

        grid-template-columns:
            1fr !important;

    }


    #event-showcase-06 .es-awas-slider{

        width:100% !important;

        max-width:100% !important;

    }


    #event-showcase-06 .es-awas-slider__viewport{

        height:260px !important;

    }


    #event-showcase-06 .es-event-sticker-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:575.98px){

    #event-showcase-06 .es-awas-slider__viewport{

        height:220px !important;

    }


    #event-showcase-06 .es-event-sticker-grid{

        grid-template-columns:
            1fr !important;

    }

}

/* =========================================================
   SECTION 06 BACKGROUND
   RED BASE + YELLOW DOTS + DIAGONAL PATTERN
========================================================= */
/* =========================================================
   SECTION 06 - EVENT STICKERS
   RED BACKGROUND + YELLOW DOTS
========================================================= */

#event-showcase-06 {

    position: relative;

    isolation: isolate;

    overflow: hidden;


    /* =====================================================
       RED BACKGROUND + YELLOW DOTS
    ===================================================== */

    background-color: #b5121b !important;

    background-image:

        /* YELLOW DOTS */
        radial-gradient(
            circle,
            rgba(255, 221, 0, 0.55) 1.2px,
            transparent 1.5px
        ),

        /* SOFT DIAGONAL PATTERN */
        repeating-linear-gradient(
            32deg,
            transparent 0px,
            transparent 80px,
            rgba(255, 255, 255, 0.035) 81px,
            rgba(255, 255, 255, 0.035) 84px,
            transparent 85px,
            transparent 160px
        ) !important;


    /* DOT SPACING */

    background-size:
        11px 11px,
        100% 100% !important;

    background-position:
        0 0,
        center !important;
}



/* =========================================================
   DARK RED DECORATIVE DIAGONAL SHAPES
========================================================= */

#event-showcase-06::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background:

        linear-gradient(
            32deg,

            transparent 0%,
            transparent 18%,

            rgba(90, 0, 8, 0.15) 18.5%,
            rgba(90, 0, 8, 0.15) 22%,

            transparent 22.5%,
            transparent 48%,

            rgba(90, 0, 8, 0.12) 48.5%,
            rgba(90, 0, 8, 0.12) 53%,

            transparent 53.5%
        );

    pointer-events: none;
}



/* =========================================================
   CONTENT ALWAYS ABOVE BACKGROUND
========================================================= */

#event-showcase-06 > .container {

    position: relative;

    z-index: 2;
}



/* =========================================================
   SECTION 06 HEADING
   EVENT STICKERS = WHITE
========================================================= */

#event-showcase-06 .es-heading h2 {

    color: #ffffff !important;
}



/* =========================================================
   HEADING UNDERLINE = WHITE
========================================================= */

#event-showcase-06 .es-heading h2::after {

    background: #ffffff !important;
}



/* =========================================================
   06 NUMBER BOX
   YELLOW BACKGROUND + DARK BLUE TEXT
========================================================= */

#event-showcase-06 .es-heading > span {

    background: #ffd400 !important;

    color: #071d3d !important;

    border-color: #ffd400 !important;
}



/* =========================================================
   LOAD MORE STICKERS BUTTON
   NORMAL STATE
========================================================= */

#event-showcase-06 .es-load {

    background: #061f43 !important;

    color: #ffffff !important;

    border: 2px solid #061f43 !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}



/* =========================================================
   LOAD MORE STICKERS BUTTON
   HOVER = WEBSITE YELLOW
========================================================= */

#event-showcase-06 .es-load:hover {

    background: #ffd400 !important;

    color: #071d3d !important;

    border-color: #ffd400 !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}



/* =========================================================
   LOAD MORE BUTTON ICON
========================================================= */

#event-showcase-06 .es-load i {

    color: inherit !important;

    transition: color 0.25s ease;
}



/* =========================================================
   LOAD MORE BUTTON KEYBOARD FOCUS
========================================================= */

#event-showcase-06 .es-load:focus-visible {

    outline: 3px solid rgba(255, 212, 0, 0.45);

    outline-offset: 3px;
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    #event-showcase-06 {

        background-size:
            11px 11px,
            100% 100% !important;
    }

}