/* =====================================================================
   04-mobile-responsive.css — Elegant Commodities · phones & tablets
   ---------------------------------------------------------------------
   Loaded from index.html with  media="(max-width: 1024px)"  so the
   browser ignores this whole file on desktop. Above 1024px the site is
   exactly the existing desktop design.

   Inside this file:
     (whole file)                 ≤1024px  tablets + phones
     @media (min-width: 768px)    768–1024 tablets
     @media (max-width: 767px)    phones
     @media (max-width: 374px)    small phones (360px)

   Sections
     0  Tokens & base          6  Vision / Mission
     1  Header & menu          7  Markets / globe
     2  Hero                   8  Leadership
     3  About                  9  Contact (last block of the page)
     4  Our History timeline  10  Enquire Now overlay
     5  (History reveal)      11  Motion & performance
===================================================================== */


/* =====================================================================
   0. TOKENS & BASE
===================================================================== */
:root {
  --m-nav: 80px;                                   /* header height */
  --m-gutter: clamp(20px, 4vw, 40px);              /* page side padding */
  --m-media: min(48vw, 440px);                     /* hero picture band */
  --m-cream: #F2F2EB;
  --m-ivory: #faf6f0;
  --m-navy: #16233a;
  --m-gold: #C9A84C;
  --m-gold-deep: #7a5f1f;
  --m-ease: cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 767px) {
  :root {
    --m-nav: 68px;
    --m-gutter: 20px;
    --m-media: clamp(260px, 78vw, 340px);   /* taller photo band so the office is clearly visible */
  }
}

/* clip (not hidden): stops sideways scrolling without breaking position:sticky */
html, body { overflow-x: clip; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, svg, canvas { max-width: 100%; }

/* sections land below the fixed header when reached by anchor links */
section[id] { scroll-margin-top: var(--m-nav); }

/* visible keyboard focus everywhere on touch layouts */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--m-gold);
  outline-offset: 2px;
}


/* =====================================================================
   1. HEADER & DROP-DOWN MENU
===================================================================== */
.nav { height: var(--m-nav) !important; padding: 0 var(--m-gutter) !important; }
.nav__links { display: none !important; }
.nav__hamburger {
  display: flex !important;
  width: 44px !important; height: 44px !important;       /* comfortable tap target */
  align-items: center !important; justify-content: center !important;
  padding: 0 !important;
}
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }

@media (max-width: 767px) {
  .nav__logo { gap: 10px !important; min-width: 0; }
  .nav__logo-box { width: 38px !important; height: 38px !important; }
  .nav__logo-glyph { font-size: 1.2rem !important; }
  .nav__logo-name { font-size: .92rem !important; letter-spacing: .08em !important; }
  .nav__logo-tagline { font-size: .5rem !important; letter-spacing: .1em !important; white-space: nowrap; }
  .nav__cta { display: none !important; }              /* Enquire Now moves into the menu */
}
@media (max-width: 374px) {
  .nav__logo-name { font-size: .84rem !important; letter-spacing: .06em !important; }
  .nav__logo-tagline { display: none !important; }
}

/* Menu: a sheet that drops down under the header (not a full-screen takeover) */
.nav__overlay {
  inset: var(--m-nav) 0 auto 0 !important;
  max-height: calc(100dvh - var(--m-nav));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start !important;
  padding: 8px var(--m-gutter) 28px;
  border-top: 1px solid rgba(184, 144, 42, .22);
  /* the original rule's grid-line image replaced its navy gradient, leaving the menu see-through */
  background-color: #0b1833 !important;
  background-image:
    linear-gradient(rgba(184, 144, 42, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 144, 42, .04) 1px, transparent 1px),
    linear-gradient(160deg, #07101f 0%, #0c1e4a 55%, #101f5a 100%) !important;
  background-size: 60px 60px, 60px 60px, 100% 100% !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
  transition: opacity .32s var(--m-ease), clip-path .36s var(--m-ease) !important;
}
.nav__overlay-close { display: none !important; }       /* the header ✕ (hamburger) closes it */
/* page dimming behind the open menu (body.menu-open is set by the existing menu script);
   tapping it closes the menu (js/07-mobile-responsive.js) */
body.menu-open::after {
  content: '';
  position: fixed; inset: var(--m-nav) 0 0 0;
  z-index: 998;                                          /* below the menu (999) and header (1000) */
  background: rgba(5, 10, 22, .55);
  animation: mDimIn .3s ease both;
}
@keyframes mDimIn { from { opacity: 0; } to { opacity: 1; } }
.nav__overlay-links { max-width: 560px; padding: 0 !important; }
.nav__overlay-item { text-align: left !important; }
.nav__overlay-link {
  font-size: clamp(1.45rem, 5.6vw, 1.9rem) !important;
  padding: 14px 4px !important;
  display: flex !important; align-items: center; justify-content: space-between;
}
.nav__overlay-link::after {                              /* small gold chevron */
  content: ''; width: 8px; height: 8px; flex: none;
  border-top: 1px solid var(--m-gold); border-right: 1px solid var(--m-gold);
  transform: rotate(45deg); opacity: .7;
}
.nav__overlay.open .nav__overlay-link { animation-duration: .32s !important; }
.nav__overlay.open .nav__overlay-item:nth-child(1) .nav__overlay-link { animation-delay: .04s !important; }
.nav__overlay.open .nav__overlay-item:nth-child(2) .nav__overlay-link { animation-delay: .08s !important; }
.nav__overlay.open .nav__overlay-item:nth-child(3) .nav__overlay-link { animation-delay: .12s !important; }
.nav__overlay.open .nav__overlay-item:nth-child(4) .nav__overlay-link { animation-delay: .16s !important; }
.nav__overlay.open .nav__overlay-item:nth-child(5) .nav__overlay-link { animation-delay: .20s !important; }
.nav__overlay.open .nav__overlay-item:nth-child(6) .nav__overlay-link { animation-delay: .24s !important; }
.nav__overlay.open .nav__overlay-item:nth-child(7) .nav__overlay-link { animation-delay: .28s !important; }
.nav__overlay-cta-wrap { margin-top: 22px !important; width: 100%; max-width: 560px; }
.nav__overlay.open .nav__overlay-cta-wrap { animation-duration: .32s !important; animation-delay: .3s !important; }
.nav__overlay-cta {
  width: 100% !important; padding: 16px 24px !important;
  font-size: .72rem !important; letter-spacing: .24em !important;
}


/* =====================================================================
   2. HERO — picture band on top, navy information panel below
   (slide 1 shows the skyline photo, slide 2 the trade map; swipe/arrows
    switch between them exactly as on desktop)
===================================================================== */
.hero-slideshow {
  height: auto !important;
  margin-top: var(--m-nav) !important;
  background: var(--panel-gradient);
}
.hs-backgrounds {
  inset: 0 0 auto 0 !important;
  height: var(--m-media) !important;
}
.hs-bg img { object-position: 60% 55%; filter: none !important; }   /* text sits below the photo on phones: no dimming needed */

.hero {
  position: relative !important;
  inset: auto !important;
  flex-direction: column !important;
}
.hero__right {                                           /* the picture band */
  order: -1;
  flex: none !important;
  width: 100% !important;
  height: var(--m-media) !important;
  min-height: 0 !important;                              /* an older rule forced 300px */
  background: var(--m-ivory);                            /* map slide sits on ivory, as on desktop */
}
@media (max-width: 767px) {
  /* trade map at phone size: city names only (full details are in the Markets section) */
  #ec-map g > text:nth-of-type(n+2) { display: none; }
}
.hero__left {
  width: 100% !important;
  padding: 30px var(--m-gutter) 34px !important;
  background: var(--panel-gradient) !important;          /* solid panel: text never sits on the photo */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 0 !important;
  border-top: 1px solid rgba(184, 144, 42, .45);
  justify-content: flex-start !important;
}

/* slide controls sit on the picture band */
.hs-btn {
  top: calc(var(--m-media) - 52px) !important;
  bottom: auto !important;
  transform: none !important;
  width: 40px !important; height: 40px !important;
  backdrop-filter: none !important;
  background: rgba(12, 22, 40, .45) !important;
}
.hero-slideshow:not(.slide-image) .hs-btn {              /* map slide: ivory buttons on ivory map */
  background: rgba(250, 246, 240, .9) !important;
  color: var(--m-gold-deep) !important;
}
.hs-btn--prev { left: var(--m-gutter) !important; }
.hs-btn--next { right: var(--m-gutter) !important; }
.hs-dots {
  top: calc(var(--m-media) - 33px) !important;
  bottom: auto !important;
  left: 50% !important;
}
.hs-counter {
  top: 14px !important; bottom: auto !important;
  right: var(--m-gutter) !important;
  color: rgba(255, 255, 255, .8) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.hero-slideshow:not(.slide-image) .hs-counter { color: var(--m-gold-deep) !important; text-shadow: none; }
.hero__scroll { display: none !important; }

/* typography */
.hero__eyebrow { gap: 12px !important; }
.hero__eyebrow-text { font-size: .66rem !important; letter-spacing: .14em !important; line-height: 1.5; }
.hero__headline-label { font-size: .7rem !important; letter-spacing: .16em !important; }
.hero__headline-name,
.hero__headline-accent { font-size: clamp(2.5rem, 7.4vw, 3.6rem) !important; line-height: 1.02 !important; }
.hero__desc { font-size: 1rem !important; line-height: 1.7 !important; max-width: 60ch; text-align: left !important; }

/* stats: four across on tablets, 2 × 2 on phones */
.hero__stats { grid-template-columns: repeat(4, 1fr) !important; margin-top: 22px !important; }
.hero__stat { padding: 16px 18px !important; }
.hero__stat-value { font-size: clamp(1.7rem, 4vw, 2.2rem) !important; }
.hero__stat-label { font-size: .6rem !important; letter-spacing: .12em !important; }

@media (max-width: 767px) {
  .hero__left { padding: 26px var(--m-gutter) 30px !important; }
  .hero__headline-name,
  .hero__headline-accent { font-size: clamp(2.35rem, 11.2vw, 3rem) !important; }
  .hero__desc { font-size: .95rem !important; }
  .hero__stats { grid-template-columns: 1fr 1fr !important; }
  .hero__stat { padding: 13px 15px !important; }
  .hero__stat-value { font-size: 1.85rem !important; }
}


/* =====================================================================
   3. ABOUT — header, framed picture, introduction, four services
===================================================================== */
.about-section { padding: 64px var(--m-gutter) 48px !important; }
.about-blob { display: none !important; }                /* large blurred blobs are costly on phones */
.about-section {                                         /* fixed backgrounds are unsupported on iOS and janky on Android */
  background-attachment: scroll !important;
  background-size: cover !important;
  background-position: center top !important;
}
.about-header { margin-bottom: 28px !important; }
.about-title { font-size: clamp(2.2rem, 6vw, 3rem) !important; }
.about-scroll-zone { height: auto !important; margin-bottom: 0 !important; }
.about-grid {
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

/* the picture leads the section and stays the visual anchor */
.about-center { order: -1; margin: 0 0 30px !important; display: flex !important; justify-content: center; }
.about-section .about-img-outer { width: min(72%, 360px) !important; max-width: none !important; margin: 0 auto !important; }
.about-section .about-img-wrap { aspect-ratio: 3 / 5; height: auto !important; overflow: hidden !important; }   /* taller frame: the whole tower incl. spire */
.about-section .about-img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: 50% 10% !important;
  aspect-ratio: auto !important;
}
.about-center-dot { display: none !important; }

/* introduction flows normally (desktop fades it on scroll) */
.about-intro-para {
  position: static !important; opacity: 1 !important; transform: none !important;
  pointer-events: auto !important; background: transparent !important;
  padding: 0 0 8px !important;
}
.about-section .about-intro-para p { font-size: 1rem !important; line-height: 1.8 !important; text-align: left !important; }

/* services: each a calm block with a gold rule, generous spacing */
.svc-reveal, .svc-from-left, .svc-from-right { opacity: 1 !important; transform: none !important; }
.svc-dot-reveal, .service-dot { display: none !important; }
.about-section .service-item,
.about-section .service-row-one,
.about-section .service-row-two {
  min-height: 0 !important;
  padding: 20px 20px 22px !important;
  margin: 0 !important;
  border-left: 2px solid rgba(201, 168, 76, .55) !important;
  position: relative;
}
.about-section .service-item + .service-item { margin-top: 14px !important; }
.about-col + .about-col { margin-top: 14px; }
.about-section .service-item:hover { transform: none !important; }
.about-section .service-header { min-height: 0 !important; margin-bottom: 10px !important; gap: 14px; }
.about-section .service-title { font-size: 1.4rem !important; }
.about-section .service-desc {
  font-size: .97rem !important; line-height: 1.75 !important;
  text-align: left !important; padding-left: 0 !important; margin-left: 0 !important;
}
.about-col-right .service-item { text-align: left !important; }
.about-col-right .service-header { flex-direction: row !important; justify-content: flex-start !important; }

/* tablets: services in two columns under the introduction */
@media (min-width: 768px) {
  .about-section .about-img-outer { width: min(40%, 320px) !important; }
  .about-section .about-img-wrap { aspect-ratio: 3 / 5; }
}
@media (max-width: 767px) {
  /* phones: photo, paragraph 1, paragraph 2, then the four services */
  .about-section .about-col { display: contents !important; }
  .about-section .about-center { order: 0; }
  .about-section .about-intro-para { order: 1; }
  .about-section .about-col-left  .service-row-one { order: 2; }   /* Our Journey */
  .about-section .about-col-right .service-row-one { order: 3; }   /* Procurement */
  .about-section .about-col-left  .service-row-two { order: 4; }   /* Market Access */
  .about-section .about-col-right .service-row-two { order: 5; }   /* Settlement */
  .about-section .about-intro-para + .about-intro-para,
  .about-section .about-col-right .about-intro-para { margin-bottom: 18px !important; }
  .about-section .service-item { margin-top: 14px !important; }
  .about-section { padding: 56px var(--m-gutter) 40px !important; }
  .about-section .about-img-outer { width: min(68%, 290px) !important; }
}


/* =====================================================================
   6. VISION / MISSION
   Tablets keep the "books on a shelf" with vertical spine titles.
   Phones stack the books; tap a title to open it.
===================================================================== */
.vision-section { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
.vision-container {
  grid-template-columns: 1fr !important;
  gap: 36px !important;
  padding: 72px var(--m-gutter) 64px !important;
}
.vision-blob { display: none !important; }
.vision-title { font-size: clamp(2.4rem, 6.5vw, 3.4rem) !important; }
.vision-subtitle { max-width: 62ch !important; text-align: left !important; }
.vision-panel { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vision-panel__body { text-align: left !important; }

@media (min-width: 768px) {
  .vision-track { height: 460px !important; flex-direction: row !important; gap: 10px !important; }
  .vision-panel:not(.is-active) { flex: .62 !important; }
  .vision-panel.is-active { flex: 4 !important; }
  .vision-panel__idle-label {
    font-size: .9rem !important; font-weight: 500 !important; letter-spacing: .2em !important;
  }
  .vision-panel__content { padding: 34px 30px !important; }
}

@media (max-width: 767px) {
  .vision-container { padding: 60px var(--m-gutter) 52px !important; gap: 28px !important; }
  .vision-track { flex-direction: column !important; height: auto !important; gap: 8px !important; }
  .vision-panel { flex: none !important; border-radius: 2px !important; transition: height .4s var(--m-ease) !important; }
  .vision-panel:not(.is-active) { height: 58px !important; }
  .vision-panel.is-active { height: auto !important; min-height: 420px; }
  .vision-panel.is-active .vision-panel__content { position: relative !important; inset: auto !important; }
  .vision-panel__idle-label {
    writing-mode: horizontal-tb !important; transform: none !important;
    font-size: .8rem !important; font-weight: 500 !important; letter-spacing: .22em !important;
  }
  .vision-panel__content { padding: 30px 22px 26px !important; }
  .vision-panel__heading { font-size: 1.65rem !important; line-height: 1.15 !important; }
  .vision-panel__body { font-size: .95rem !important; line-height: 1.7 !important; max-width: none !important; }
  .vision-panel__num { font-size: 3.4rem !important; }
}


/* =====================================================================
   7. MARKETS / GLOBAL PRESENCE
   No long scroll-driven section: heading · globe · tap-to-select cards.
   Tablets: globe and cards side by side.
===================================================================== */
.business-section { height: auto !important; }
.business-sticky { position: relative !important; height: auto !important; overflow: visible !important; }
.biz-progress { display: none !important; }

.business-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
  padding: 72px var(--m-gutter) 64px !important;
}
.business-left { display: contents !important; }          /* lets heading / globe / cards be ordered */

.biz-heading { order: 1; max-width: none !important; text-align: center; margin: 0 0 6px !important; }
.biz-heading__meta { justify-content: center !important; margin-bottom: .55rem !important; }
.biz-heading__title { font-size: clamp(2.4rem, 7vw, 3.3rem) !important; margin-bottom: .3rem !important; }
.biz-heading__sub { font-size: .97rem !important; }

.business-globe-wrap {
  order: 2;
  flex: none !important;
  width: 100% !important; height: auto !important;
  margin: 10px 0 18px !important; padding: 0 !important;
  display: flex !important; justify-content: center !important; align-items: center !important;
}
.business-globe-wrap::before { display: none !important; }
#ec-globe {
  width: min(86vw, 460px) !important; height: auto !important;
  aspect-ratio: 1 / 1; margin: 0 !important; overflow: visible !important;
}
.ec-city-label__name { font-size: .7rem !important; padding: 5px 10px 4px 12px !important; }
.ec-city-label__role { font-size: .56rem !important; padding: 0 10px 5px !important; }

.biz-meta  { order: 3; width: 100%; max-width: 640px !important; margin: 0 auto .7rem !important; }
.biz-cards { order: 4; width: 100%; max-width: 640px !important; margin: 0 auto !important; }
.biz-card {
  padding: .95rem 1.1rem .95rem 1.4rem !important;
  min-height: 56px;                                        /* comfortable tap target */
  -webkit-tap-highlight-color: transparent;
}
.biz-card__header { gap: .8rem !important; }
.biz-card__city { font-size: 1.6rem !important; }
.biz-card__body-inner { padding-left: 0 !important; padding-right: 0 !important; padding-top: .55rem !important; }
.biz-card__desc { text-align: left !important; font-size: .97rem !important; line-height: 1.68 !important; }
.biz-card__stat { margin-top: .6rem !important; }
.biz-card.is-active .biz-card__body { max-height: 340px !important; }

@media (min-width: 768px) {
  .business-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head head" "globe meta" "globe cards";
    grid-template-rows: auto auto 1fr;
    column-gap: 40px;
  }
  .biz-heading { grid-area: head; margin-bottom: 18px !important; }
  .business-globe-wrap { grid-area: globe; margin: 0 !important; align-self: start; }
  #ec-globe { width: 100% !important; max-width: 460px; }
  .biz-meta { grid-area: meta; max-width: none !important; margin: 12px 0 .7rem !important; }
  .biz-cards { grid-area: cards; max-width: none !important; margin: 0 !important; }
}
@media (max-width: 767px) {
  .business-layout { padding: 60px var(--m-gutter) 52px !important; }
}




/* =====================================================================
   9. CONTACT — the last block of the page (the site has no separate footer)
===================================================================== */
.contact-section { height: auto !important; min-height: 0 !important; }
.contact-inner {
  grid-template-columns: 1fr !important;
  padding: 72px var(--m-gutter) 56px !important;
  gap: 40px !important;
}
.contact-info { padding-right: 0 !important; }
.contact-headline { font-size: clamp(2.3rem, 6.5vw, 3.2rem) !important; }
.contact-sub { text-align: left !important; max-width: 62ch; }
.contact-detail { align-items: flex-start !important; }
.contact-detail__body { flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; }
.contact-detail__value { font-size: 1rem !important; word-break: break-word; line-height: 1.5; }
a.contact-detail__value { padding: 4px 0; }                 /* easier to tap */
.contact-map-col { transform: none !important; justify-content: center !important; }
.contact-map-ring { width: min(500px, 100%) !important; aspect-ratio: 488 / 443 !important; }   /* same shape as the map picture */
.contact-map { height: 100% !important; }
.contact-map a { display: block; height: 100%; }
.contact-map__img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block; }

@media (max-width: 767px) {
  .contact-inner { padding: 60px var(--m-gutter) 44px !important; gap: 32px !important; }
  .contact-map-ring { width: 100% !important; }
}


/* =====================================================================
   10. ENQUIRE NOW OVERLAY
===================================================================== */
#enquirePage.open { grid-template-columns: 1fr !important; }
#enquirePage { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.enq-left { padding: 92px var(--m-gutter) 32px !important; }
.enq-right { padding: 8px var(--m-gutter) 48px !important; }
.enq-left h2 { font-size: clamp(2.3rem, 7vw, 3.2rem) !important; }
.enq-left > p { max-width: 62ch !important; }
.enq-card { padding: 30px clamp(18px, 4vw, 40px) !important; max-width: 640px !important; }
.enq-card h3 { font-size: clamp(1.8rem, 5vw, 2.2rem) !important; }
.enq-field input, .enq-field select, .enq-field textarea { font-size: 16px !important; }  /* prevents iOS zoom */
.enq-field textarea { min-height: 120px !important; }
.enq-send { padding: 18px !important; }
#enquirePage.open::before {                                  /* solid bar so text never scrolls under the close button */
  content: '';
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(64px + env(safe-area-inset-top));
  z-index: 2;
  background: #0a1628;
  border-bottom: 1px solid rgba(184, 144, 42, .35);
}
.enq-close {                                                 /* always reachable */
  z-index: 3 !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: var(--m-gutter) !important;
  padding: 10px 16px !important;
  min-height: 44px;
}


/* =====================================================================
   11. MOTION & PERFORMANCE
===================================================================== */
/* lighter effects on touch screens */
.hs-btn, .nav.solid { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.hero__scroll-line { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .m-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav__overlay, .nav__overlay-link, .nav__overlay-cta-wrap { transition: none !important; animation: none !important; }
  .nav__overlay.open .nav__overlay-link, .nav__overlay.open .nav__overlay-cta-wrap { opacity: 1 !important; transform: none !important; }
  body.menu-open::after { animation: none; }
  .vision-panel, .biz-card__body, .hs-bg { transition: none !important; }
  .hero__left *, .hero__right { animation: none !important; }
}

/* =====================================================================
   ENTRANCE ANIMATIONS (phones & tablets) — added by js/07-mobile-responsive.js
===================================================================== */
.m-anim {
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s ease var(--m-delay, 0ms), transform .7s cubic-bezier(.22, 1, .36, 1) var(--m-delay, 0ms);
  will-change: opacity, transform;
}
.m-anim.m-in { opacity: 1; transform: none; }
.history__photo.m-anim, .about-center.m-anim { transform: scale(.97); }
.history__photo.m-anim.m-in, .about-center.m-anim.m-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .m-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}