:root {
  --bg: #FAF4EC;
  --text: #161616;
  --theme-primary: #FD02A1;
  --transition: 0.3s ease-in-out;
  --font: "InterVar", sans-serif;
  --font-arabic: "NotoSansArabic", sans-serif;
}

/* ----------------------------------
   Global Reset / Defaults
---------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ----------------------------------
   HTML + Body
---------------------------------- */
html,
body {
 user-select: text;
 width: 100%;
 overflow-x: hidden;
 background: var(--bg);
 font-family: var(--font);
 scroll-behavior: smooth;
}

/* ----------------------------------
   Typography
---------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: var(--transition);
}


/* ----------------------------------
   Inputs / Buttons
---------------------------------- */
input,
textarea,
button {
  font-family: var(--font);
  outline: none;
  border: none;
}
button, a, .cursor, .image-trailer {
  user-select: none;
}
button {
  cursor: pointer;
  background: none;
  transition: var(--transition);
}

button:hover {
  opacity: 0.8;
}

input:focus,
textarea:focus,
button:focus {
  outline: 0;
  box-shadow: none !important;
}

.container {
  max-width: 95%;
  position: relative;
  margin: auto;
  padding: 0;
}

.cursor,
.cursor2 {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 999999;
}

.cursor {
  width: 0.52vw;   /* 10px */
  height: 0.52vw;  /* 10px */
  background: #00000011;
}

.cursor2 {
  width: 1.56vw;   /* 30px */
  height: 1.56vw;  /* 30px */
  border: 0.10vw solid #000; /* 2px */
  transition: 0.2s ease;
}

.cursor.grow {
  transform: translate(-50%, -50%) scale(5);
}

.cursor.grow-small {
  transform: translate(-50%, -50%) scale(2.5);
}

/* Home Page Styling */
.header {
  width: 95%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.67vw 0; /* 32px */
  position: fixed;
  opacity: 0;
  transform: translateY(-80px);
}

.header .logo {
  display: inline-block;
}
.header .logo img {
 height: 3.13vw; /* 60px */
}

.header .nav {
  display: flex;
  background: #fff;
  gap: 0.10vw; /* 2px */
  padding: 0.42vw; /* 8px */
  border-radius: 0.78vw; /* 15px */

}
.nav a {
  padding: .625em .75em;
  text-decoration: none;
  color: var(--text);
  font-size: 0.94vw; /* 18px */
  line-height: 1;
  font-weight: 500;
  border-radius: 0.42vw; /* 8px */
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
}

.nav a:hover {
  color: #fff;
}

.button-color-swoosh {
  --elastic-ease-out: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
  --smooth-ease: cubic-bezier(.32, .72, 0, 1);
  --color-ease: cubic-bezier(.215, .61, .355, 1);
  color: var(--text);
  letter-spacing: -.02em;
  -webkit-user-select: none;
  user-select: none;
  transform-style: preserve-3d;
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1em;
  text-decoration: none;
  display: grid;
}

.button-color-swoosh_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  background-color: #fff;
  grid-area: 1/1;
}

.button-color-swoosh_bg-inner {
  translate: 0% 280%;
  rotate: -12deg;
  background: #000000;
  transition: translate .6s var(--smooth-ease), rotate .5s var(--smooth-ease);
  transform-origin: 100% 0;
  grid-area: 1/1;
  width: 105%;
  display: block;
}

.button-color-swoosh_bg-inner.is-first {
  background-color: #FD02A1;
}

.button-color-swoosh_inner {
  position: relative;
  z-index: 1;
  grid-area: 1/1;
  display: grid;
  overflow: clip;
}

.button-color-swoosh_inner.is-footer {
  padding-top: .75em;
  padding-bottom: .75em;
}

.button-color-swoosh_text {
  transition: translate .75s var(--elastic-ease-out), rotate .5s var(--smooth-ease), opacity .2s ease-out;
  transform-origin: 0 0;
  grid-area: 1/1;
  display: block;
}

.button-color-swoosh_inner::after {
  content: attr(data-text);
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  translate: 0 2em;
  rotate: -30deg;
  transition: translate .75s var(--elastic-ease-out), rotate .5s var(--smooth-ease), opacity .2s ease-out;
}

@media (hover:hover) and (pointer:fine) {
  .button-color-swoosh:hover .button-color-swoosh_bg-inner {
    translate: 0% 0%;
    rotate: 0deg;
    transition-delay: calc(var(--index) * .06s);
  }

  .button-color-swoosh:hover .button-color-swoosh_text {
    opacity: 0;
    translate: 0 -2em;
    rotate: -60deg;
  }

  .button-color-swoosh:hover .button-color-swoosh_inner::after {
    opacity: 1;
    rotate: 0deg;
    translate: 0 0;
    transition-delay: .1s;
  }
}
.lang-switch {
  display: flex;
  gap: 0;
  border-radius: 0.63vw; /* 12px */
  padding: 0.21vw; /* 4px */
  background-color: var(--theme-primary);
}
.lang-switch a {
  padding: 0.78vw 0.68vw; /* 15px 13px */
  border: none;
  cursor: pointer;
  line-height: 1;
  font-size: 0.89vw; /* 17px */
  background: #ff00a0;
  color: #fff;
  font-weight: 600;
  transition: 0.3s;
  border-radius: 0.42vw; /* 8px */
}
.lang-switch a:hover {
  background-color: #0000005c;
}
.lang-switch a.active {
  background: #fff;
  color: var(--text);
}
.lang-switch a.arabic {
  font-family: var(--font-arabic);
  font-size: 0.89vw; /* 17px */
}
.header-show {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: 0.45s ease;
}
.header-hide {
  transform: translateY(-100%);
  opacity: 0;
  transition: 0.45s ease;
}

/* hamburger */
.menu-toggle {
  display: none;
  font-size: 26px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle i {
  transition: transform .3s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity .2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  line-height: 1;
}

.menu-toggle.active i {
  transform: rotate(90deg);
}
.mobile-lang{
  display: none;
}
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    font-size: 20px;
    background: #fff;
    border: 0;
    cursor: pointer;
    padding: 10px 8px;
    border-radius: 13px;
    z-index: 1100;
    align-items: center;
    display: flex;
    justify-content: center;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }

  .header .nav {
    position: absolute;
    right: 0;
    background: #faf4ed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    height: 0;
    width: 0;
    border-radius: 25px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.0) translate(0, 0);
    transition: right 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), width 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), height 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s, opacity .1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s, transform .5s cubic-bezier(0.68, -0.55, 0.27, 1.55), visibility .5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s, all 0.3s;
    z-index: 1000;
    box-shadow: 0 0 12px 0 #00000030;
  }

  .header .nav.active {
    opacity: 1;
    width: 92vw;
    height: 92vh;
    visibility: visible;
    transform: scale(1) translate(50%, 0%);
    transition: right 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), width 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), height 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s, opacity .1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s, transform .5s cubic-bezier(0.68, -0.55, 0.27, 1.55), visibility .5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s, all 0.3s;
    right: 50%;
    top: 50%;
  }
  .header .nav.active ~ .menu-toggle{
    transform: translate(-17px, 30px);
    background: var(--text);
    color: #fff;
  }
  .header .nav.hide {
    transition: right 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), width 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), height 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s, opacity .1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s, transform .5s cubic-bezier(0.68, -0.55, 0.27, 1.55), visibility .5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s, all 0.3s;
    height: 0;
    width: 0;
    opacity: 0;
    right: 0;
  }
  .header .nav a {
    font-size: 17px;
    padding: 15px 28px;
    border-radius: 11px;
    visibility: hidden;
  }
  .header .nav.hide a{
    display: none;
  }
  .header .nav.active a{
    visibility:visible;
  }
  .header .nav.hide .lang-switch{
    display: none;
  }
  .header .nav .lang-switch {
    margin-top: 35px;
    border-radius: 15px;
    padding: 4px;
  }

  .header > .lang-switch {
    display: none;
  }
  .header .logo img {
    height: 45px;
  }
  .main-video-sec {
    padding: 65px 0 0;
  }
  .mobile-lang{
    display: flex;
  }
}


.main-video-sec {
  opacity: 0;
  padding: 6.77vw 0 0; /* 130px */
}

.main-video-sec .video-sec-inner {
  display: flex;
  align-items: center;
  justify-content: start;
  overflow: hidden;
  border-radius: 2.08vw; /* 40px */
  padding: 2.08vw 4.43vw 2.08vw; /* 40px 85px 40px */
  position: relative;
}

.main-video-sec .video-sec-inner video {
  min-width: 100%;
  min-height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: -1;
}

.main-video-sec .main-content-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.main-video-sec .main-content-area .dialer-wrap {
  position: relative;
  margin-top: 4.95vw; /* 95px */
}

.main-video-sec .main-content-area .dialer-wrap div {
  position: relative;
  height: 70%;
  margin: 0;
}

.main-video-sec .main-content-area .dialer-wrap div span {
  display: block;
  white-space: nowrap;
  font-weight: 700;
  line-height: 4.17vw; /* 80px */
  font-size: 4.01vw; /* 77px */
  color: #fff;
  opacity: 1;
  will-change: transform, opacity;
  transition: 0.25s;
  width: 100%;
}

.main-video-sec .main-content-area .dialer-wrap div span:nth-child(1) {
  transform: scale3d(1, 0.7, 1.2) skewX(4deg);
  opacity: 0.55;
}

.main-video-sec .main-content-area .dialer-wrap div span:nth-child(2) {
  transform: scale3d(1, 0.9, 1) skewX(6deg);
  opacity: 0.55;
}

.main-video-sec .main-content-area .dialer-wrap div span:nth-child(4) {
  transform: scale3d(1, 0.9, 1) skewX(-3deg);
  opacity: 0.55;
}

.main-video-sec .main-content-area .dialer-wrap div span:nth-child(5) {
  transform: scale3d(1, 0.8, 1) skewX(-5deg);
  opacity: 0.55;
}

.main-video-sec .main-content-area .social-awrd-area {
  display: flex;
  align-items: end;
  justify-content: space-between;
  width: 100%;
  padding-top: 7.03vw; /* 135px */
}

.main-video-sec .main-content-area .social-awrd-area .awrd-area {
  transform: translateX(-100px);
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 2.08vw; /* 40px */
}

.social-area {
  transform: translateX(100px);
}
.social-area ul {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  list-style: none;
  gap: 1.15vw; /* 22px */
  margin: 0;
  padding: 0;
}

.social-area ul li a {
  display: inline-block;
  color: #fff;
  font-size: 1.30vw; /* 25px */
  line-height: 1;
}

.social-area ul li a:hover {
  color: var(--theme-primary);
}



/* ------------------------------
   What We Do Section 
-------------------------------*/
.what-we-do {
  padding: 4.17vw 0; /* 80px */
}

.wwd-inner {
  max-width: 80.99vw; /* 1555px */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 21.35vw; /* 410px */
  gap: 2.08vw; /* 40px */
  align-items: end;
  position: relative;
}

.wwd-left {
  padding-bottom: 3.44vw; /* 66px */
}

.wwd-tag {
  display: inline-block;
  background: rgba(0,0,0,0.06);
  color: rgb(22 22 22);
  padding: 0.52vw 0.94vw; /* 10px 18px */
  border-radius: 0.78vw; /* 15px */
  font-size: 1.25vw; /* 24px */
  font-weight: 500;
  margin-bottom: 1.15vw; /* 22px */
}

.wwd-title {
  font-size: 4.17vw; /* 80px */
  line-height: 4.17vw; /* 80px */
  margin: 0 0 4.17vw 0; /* 80px */
  font-weight: 600;
  max-width: 80%;
  color: var(--text);
}

.wwd-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wwd-list li {
  display: flex;
  align-items: center;
  gap: 1.04vw; /* 20px */
  padding: 0.99vw 0; /* 19px */
  border-bottom: 1px solid var(--text);
}

.wwd-list li .term {
  font-weight: 700;
  font-size: 1.67vw; /* 32px */
  min-width: 11.98vw; /* 230px */
  position: relative;
  padding-left: 2.40vw; /* 46px */
  color: var(--text);
}

.wwd-list li .term::before {
  content: '';
  position: absolute;
  left: 0.99vw; /* 19px */
  top: 50%;
  transform: translateY(-50%);
  width: 0.42vw; /* 8px */
  height: 0.42vw; /* 8px */
  background: rgba(0,0,0,0.9);
  border-radius: 50%;
}

.wwd-list li .desc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.16vw; /* 3px */
  color: #000000e6;
}

.wwd-list li .seg {
  white-space: nowrap;
  font-size: 1.25vw; /* 24px */
  font-weight: 400;
}

.wwd-list li .arrow {
  color: var(--theme-primary);
  font-weight: 700;
  padding: 0 0;
  font-size: 1.35vw; /* 26px */
}

.wwd-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: end;
  gap: 0.94vw; /* 18px */
  min-height: 15.10vw; /* 290px */
}

.wwd-illustration {
  width: 8.59vw; /* 165px */
  height: 8.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-1.png');
  position: absolute;
  top: 0;
  right: 30%;
  transform: translate(0, 4.17vw); /* 80px */
}

.btn-cta .btn-cta-area {
  display: inline-flex;
  align-items: center;
  gap: 0.73vw; /* 14px */
  padding: 0.31vw 0.31vw 0.31vw 0.94vw; /* 6 6 6 18 */
  border-radius: 0.78vw; /* 15px */
  background: #fff;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  font-size: 1.25vw; /* 24px */
  line-height: 1;
  transition: all 0.3s;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  border-radius: 0.78vw; /* 15px */
  min-height: 3.13vw; /* 60px */
}

.btn-cta:hover .btn-cta-area {
  transform: skewY(-4deg) rotate(-1deg) scale(1.02);
}

.btn-cta:hover .btn-cta-area .cta-arrow {
  background: #000;
  padding: 0.42vw 0.42vw; /* 8px */
  font-size: 1.04vw; /* 20px */
}

.btn-cta .btn-cta-area .cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-primary);
  color: #fff;
  padding: 0.68vw 0.52vw; /* 13px 10px */
  border-radius: 0.63vw; /* 12px */
  font-size: 1.04vw; /* 20px */
  transition: var(--transition);
}

/* MEDIA QUERIES — untouched */
@media (max-width: 980px) {
  .wwd-inner { grid-template-columns: 1fr 260px; gap: 28px; }
}


.stories {
  margin: 7.8125vw 0; /* 150px */
}

.stories h4 {
  font-size: 4.1667vw;   /* 80px */
  line-height: 4.1667vw; /* 80px */
  width: 80%;
  font-weight: 600;
  margin-bottom: 4.1667vw; /* 80px */
}
.stories .stories-illustration {
  width: 8.59vw; /* 165px */
  height: 8.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-2.png');
  position: absolute;
  top: -15%;
  right: 5%;
  transform: translate(0, 4.17vw); /* 80px */
}
.stories .stories-illustration-1 {
  width: 8.59vw; /* 165px */
  height: 8.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-1.png');
  position: absolute;
  bottom: -24%;
  left: 5%;
  transform: translate(0, 4.17vw); /* 80px */
}
.is-mwg_effect025 {
  display: flex;
  position: relative;
  width: 100%;
}

.stories-card {
  aspect-ratio: 4.8/6.2;
  width: 25vw;          /* 480px */
  border-radius: 2.2917vw; /* 44px */
  overflow: hidden;
  padding: 0;
  background: #eee;
  position: relative;
  cursor: pointer;
  transform-origin: center;
}

.stories-card .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stories-theme-blue { 
  background: #0095ff; 
  color: #fff;
}
.stories-theme-green { 
  background: #00c47a; 
  color: #fff;
}
.stories-theme-purple { 
  background: #5c4dff; 
  color: #fff;
}
.stories-theme-pink { 
  background: #ff4da6; 
  color: #fff;
}

.stories-card_content {
  width: 100%;
  height: 100%;
  padding: 1.8229vw 1.7188vw; /* 35px 33px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
}

.stories-card_body {
  width: 100%;
}

.stories-card_title {
  font-size: 4.5833vw; /* 88px */
  font-weight: 600;
  color: var(--text);
}

.stories-card_subtitle {
  font-size: 1.6667vw; /* 32px */
  font-weight: 600;
}

.stories-card_divider {
  width: 100%;
  height: 0.0521vw; /* 1px */
  background: #000;
  margin: 0.8854vw 0; /* 17px */
  color: var(--text);
}

.stories-card_paragraph {
  font-size: 1.0417vw; /* 20px */
  color: var(--text);
  font-weight: 400;
}
.mwg_effect031 {
  padding-bottom: 2.3438vw; /* 45px */
  grid-column-gap: 0em;
  grid-row-gap: 0em;
  flex-flow: column;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.work-section {
  width: 100%;
  padding-top: 7.8125vw; /* 150px */
  position: relative;
}

.work-section .section-subtitle {
  font-size: 4.1667vw;   /* 80px */
  line-height: 4.1667vw; /* 80px */
  margin-bottom: 5.2083vw; /* 100px */
  font-weight: 600;
  color: var(--text);
}
.work-illustration {
  width: 8.59vw; /* 165px */
  height: 8.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-3.png');
  position: absolute;
  top: 1%;
  right: 11%;
  transform: translate(0, 4.17vw) rotate(-25deg); /* 80px */
  z-index: 1;
}
.work-illustration-1 {
  width: 4.59vw; /* 165px */
  height: 4.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-4.png');
  position: absolute;
  bottom: 11%;
  left: 23%;
  transform: translate(0, 4.17vw) rotate(-25deg); /* 80px */
  z-index: 1;
}
.work-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}

.work-slide {
  position: relative;
  height: calc(100vh - 4em);
  padding-top: 4em;
}

.work-wrap {
  perspective: 250vw;
  width: 100%;
  height: 100%;
}

.work-content {
  padding: 2.8646vw 2.6042vw; /* 55px 50px */
  border-radius: 2.3438vw; /* 45px */
  background: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* THEMES */
.work-theme-green-l { 
  background: #33c791;
}
.work-theme-pink  { 
  background: #ffd4e6;
}
.work-theme-green { 
  background: #d9f8dd; 
}
.work-theme-blue  { 
  background: #dfeaff; 
}

.work-content_top {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  height: 100%;
  margin-right: auto;
  max-width: 50%;
}

.work-content_top .work-content_heading {
  font-size: 5.7292vw;   /* 110px */
  line-height: 5.5729vw; /* 107px */
  width: 50%;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.1458vw; /* -2.8px */
}

.work-content_top .paragraph-m {
  font-size: 1.0417vw; /* 20px */
  margin-bottom: 1.3542vw; /* 26px */
  line-height: 1;
  padding: 0.625vw 0.8333vw; /* 12px 16px */
  border-radius: 0.5729vw; /* 11px */
  color: var(--text);
  background-color: #fff;
  display: inline-block;
}

.work-content_bottom .paragraph-l {
  font-size: 1.25vw;    /* 24px */
  line-height: 1.6667vw; /* 32px */
  width: 70%;
  margin-top: 0.8333vw; /* 16px */
  margin-bottom: 1.3021vw; /* 25px */
}

.work-content_bottom .btn-cta .cta-arrow { 
  background-color: var(--text);
}

.work-content-right {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: space-between;
  height: 100%;
}

.work-content-right .work-content_heading {
  font-size: 5.7292vw;  /* 110px */
  line-height: 5.5208vw; /* 106px */
  font-weight: 700;
  color: #00000015;
}

.work-content-right .medium-image {
  width: 18.3333vw; /* 352px */
  aspect-ratio: 3/4;
  border-radius: 1.6667vw; /* 32px */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate3d(2, 1, 1, 8deg);
  border: 0.4167vw solid #ffffff; /* 8px */
}

.medium-image video {
  height: -webkit-fill-available;
}

/* mobile rotations */
@media (max-width: 479px) {
  .work-slide:nth-child(2) .work-content {
    transform: rotate(1deg);
  }
  .work-slide:nth-child(3) .work-content {
    transform: rotate(-1deg);
  }
}
.featured-sec{
  padding: 7.8125vw 0; /* 150px */
}

.featured-sec .featured-title{
  font-size: 4.1667vw;   /* 80px */
  line-height: 4.1667vw; /* 80px */
  text-align: center;
  font-weight: 600;
  letter-spacing: -0.0286vw; /* -0.55px */
  color: var(--text);
  margin-bottom: 3.3854vw; /* 65px */
}
.featured-illustration {
  width: 8.59vw; /* 165px */
  height: 8.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-1.png');
  position: absolute;
  top: -5%;
  left: 11%;
  transform: translate(0, 4.17vw); /* 80px */
  z-index: 1;
}
.featured-illustration-1 {
  width: 4.59vw; /* 165px */
  height: 4.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-5.png');
  position: absolute;
  bottom: 10%;
  right: 12%;
  transform: translate(0, 4.17vw) rotate(-6deg); /* 80px */
  z-index: 1;
}
.featured-sec .featured-sec-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 1.4583vw; /* 28px */
}

.featured-sec .featured-sec-inner .featured-card{
  padding: 1.7188vw 2.2917vw 1.1979vw; /* 33px 44px 23px */
  border-radius: 2.3438vw; /* 45px */
  flex: 4;
  width: 23%;
}

.featured-sec .featured-sec-inner .featured-card.dark{
  background: #201D1D;
}
.featured-sec .featured-sec-inner .featured-card.light{
  background: #fff;
}

.featured-sec .featured-sec-inner .featured-card .f-logo-img{
  width: 3.6458vw; /* 70px */
  aspect-ratio: 1/1;
  margin-bottom: 0.4167vw; /* 8px */
}

.featured-sec .featured-sec-inner .featured-card h5{
  font-size: 1.3021vw; /* 25px */
  line-height: 1;
  margin-bottom: 0.5208vw; /* 10px */
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.0116vw; /* -0.22222px */
}

.featured-sec .featured-sec-inner .featured-card p{
  font-size: 0.7813vw; /* 15px */
  line-height: 1.2;
  margin-bottom: 1.5625vw; /* 30px */
  width: 80%;
  font-weight: 400;
  letter-spacing: 0.0116vw; /* 0.222px */
}

.featured-sec .featured-sec-inner .featured-card.dark p{
  color: #ffffff90;
}
.featured-sec .featured-sec-inner .featured-card.light p{
  color: #1E1E1E;
}
.featured-sec .featured-sec-inner .featured-card.dark h5{
  color: #fff;
}
.featured-sec .featured-sec-inner .featured-card.light h5{
  color: #1E1E1E;
}

.featured-sec .featured-sec-inner .featured-card .banner-img{
  margin-block: 0 1.8229vw; /* 35px */
  width: -webkit-fill-available;
}

/* PRODUCT */

.product-illustration {
  width: 7.59vw; /* 165px */
  height: 7.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-3.png');
  position: absolute;
  top: -15%;
  left: 11%;
  transform: translate(0, 4.17vw); /* 80px */
  z-index: 1;
}
.product-illustration-1 {
  width: 4.59vw; /* 165px */
  height: 4.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-6.png');
  position: absolute;
  top: 25%;
  right: 21%;
  transform: translate(0, 4.17vw) rotate(25deg); /* 80px */
  z-index: 1;
}
.product-slider{
  background-color: #33C791;
  border-radius: 2.3438vw; /* 45px */
  padding: 3.125vw 4.1667vw; /* 60px 80px */
  max-height: 57.8125vw; /* 1110px */
  overflow: hidden;
  margin-top: 2.6042vw; /* 50px */
  margin-bottom: 4.6875vw; /* 90px */
}

.product-sec-area {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.product-sec-area h4{
  font-size: 4.1667vw; /* 80px */
  width: 60%;
  line-height: 5vw; /* 96px */
  color: var(--text);
  font-weight: 600;
}

.product-sec-area h4 span{
  color: #31FFB1;
  background-color: #00925B;
  padding: 0 0.8854vw; /* 17px */
  border-radius: 1.3021vw; /* 25px */
  line-height: 3.6458vw; /* 70px */
}

.product-sec-area .btn-cta span.cta-arrow{
  background-color: var(--text);
}

.product-container {
  position: relative;
  width: 100%;
  margin-top: 20.8333vw; /* 400px */
  height: max-content;
}

.product-wrapper {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: max-content;
}

.product-container-inner {
  min-width: 104.1667vw;  /* 2000px */
  min-height: 104.1667vw;
  max-width: 104.1667vw;
  max-height: 104.1667vw;
}

.product-image{
  border-radius: 2.3438vw; /* 45px */
  height: 36.4583vw; /* 700px */
  width: 24.4792vw; /* 470px */
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

.product-image img.fyp-main-img{
  height: 85%;
  object-fit: contain;
  border-radius: 1.3021vw; /* 25px */
}

.product-image img.fyp-side-img{
  position: absolute;
  right: 0;
  top: 2.6042vw; /* 50px */
  transition: all 0.3s;
  width: 7.1354vw; /* 137px */
  height: 9.375vw; /* 180px */
}

.product-container-inner svg{
  opacity: 0;
}

.product-container-inner .circle-img{
  position: absolute;
  width: 100%;
  left: 0;
  top: -1.5625vw; /* -30px */
}
.brand-sec .brand-swiper{
  width: 100%;
  padding-bottom: 1.3021vw; /* 25px */
}

.brand-sec hr{
  max-width: 95%;
  margin: auto;
}

.brand-sec .brand-swiper .swiper-wrapper{
  transition-timing-function: linear !important;
}

.brand-sec .brand-swiper img{
  width: 6.25vw; /* 120px */
  display: block;
  object-fit: contain;
}

.footer{
  padding-bottom: 2.0833vw; /* 40px */
}

.footer-illustration {
  width: 7.59vw; /* 165px */
  height: 7.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-2.png');
  position: absolute;
  top: -3%;
  left: 4%;
  transform: translate(0, 4.17vw) rotate(-24deg); /* 80px */
  z-index: 1;
}
.footer-illustration-1 {
  width: 7.59vw; /* 165px */
  height: 7.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-1.png');
  position: absolute;
  top: 19%;
  right: 5%;
  transform: translate(0, 4.17vw) rotate(0deg); /* 80px */
  z-index: 1;
}
.lets-get-area{
  padding-block: 7.8125vw 5.7292vw; /* 150px 110px */
}

.lets-get-area .lets-get-area-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6042vw; /* 50px */
}

.lets-get-area h4{
  font-size: 6.6667vw; /* 128px */
  letter-spacing: -0.3125vw; /* -6px */
  line-height: 6.3021vw; /* 121px */
  color: var(--text);
  text-align: center;
  font-weight: 600;
}

.image-trailer {
  position: fixed;
  pointer-events: none;
  z-index: 9999;       
}

.image-item {
  width: 10.4167vw; /* 200px */
  object-fit: cover;
  position: absolute;
  /*opacity: 0;*/
  pointer-events: none;
  border-radius: 0.1563vw; /* 3px */
  transform-origin: center;
}

.image-gallery {
  display: none;
}

.lets-get-area .btn-cta .btn-cta-area{
  border: 1px solid var(--text);
  background-color: transparent;
}

.lets-get-area .btn-cta .btn-cta-area .cta-arrow{
  background-color: var(--text);
}

.footer-area{
  position: relative;
  background-color: #EAE4D8;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  padding: 3.8021vw 1.3542vw 0.5208vw; /* 73px 26px 10px */
  border-radius: 1.0417vw 1.0417vw 0 0; /* 20px */
}
.footer-area .tr-tag{

  position: absolute;
  
  top: -16%;
  
  right: 4%;
  
  transform: rotate(-35deg);
}

.footer-area .footer-area-right{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  gap: 1.8229vw; /* 35px */
}

.footer-area .footer-area-right .log{
  width: 11.7188vw; /* 225px */
}

.footer-area .footer-area-right .para{
  font-size: 0.8333vw; /* 16px */
  color: var(--text);
  line-height: 1.25vw; /* 24px */
  font-weight: 500;
}

.footer-area .footer-area-right .rights-txt{
  font-size: 0.7292vw; /* 14px */
  line-height: 1.2;
  color: #16161660;
  display: inline-block;
  margin-top: 2.6042vw; /* 50px */
}

.footer-area .footer-area-left{
  display: flex;
  align-items: baseline;
  justify-content: end;
  gap: 4.4271vw; /* 85px */
}

.footer-area .footer-area-left .footer-area-links{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  gap: 1.6667vw; /* 32px */
}

.footer-area .footer-area-left .footer-area-links .nav{
  gap: 0.3646vw; /* 7px */
  width: 20.8333vw; /* 400px */
  justify-content: end;
}

.footer-area .footer-area-left .footer-area-links .social-area{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7813vw; /* 15px */
}

.footer-area .footer-area-left .footer-area-links .social-area .flow-txt{
  font-size: 1.0417vw; /* 20px */
  line-height: 1.4583vw; /* 28px */
  font-weight: 700;
  color: var(--text);
}

.footer-area .footer-area-left .footer-area-links .social-area ul {
  gap: 0.4167vw; /* 8px */
}

.footer-area .footer-area-left .footer-area-links .social-area ul li a{
  background-color: #fff;
  border-radius: 2.6042vw; /* 50px */
  width: 2.5vw; /* 48px */
  height: 2.5vw; /* 48px */
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.footer-area .footer-area-left .footer-area-links .social-area ul li a:hover{
  transform: scale(1.11);
  border-radius: 1.0417vw; /* 20px */
}

.footer-area .footer-area-left .footer-area-info{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 0.8333vw; /* 16px */
}

.footer-area .footer-area-left .footer-area-info ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-area .footer-area-left .footer-area-info ul p{
  font-size: 1.0417vw; /* 20px */
  line-height: 1.4583vw; /* 28px */
  font-weight: 700;
}

.footer-area .footer-area-left .footer-area-info ul li a{
  font-size: 0.8333vw; /* 16px */
  line-height: 1.25vw; /* 24px */
  font-weight: 500;
}

.footer-area .footer-area-left .footer-area-info ul li.privacy-txt{
  margin-top: 0.5208vw; /* 10px */
}

.footer-area .footer-area-left .footer-area-info ul li.privacy-txt a{
  color: #16161660;
}


/*vertical page*/
.main-video-sec .video-sec-inner.vertical-sec{
  background-image: url('../img/vertical-main-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 83.979vh;
}
.main-video-sec .video-sec-inner.vertical-sec .main-content-area{
  height: -webkit-fill-available;
}
.main-video-sec .video-sec-inner.vertical-sec .main-content-area .social-awrd-area{
  padding-top: 0;
}
.main-video-sec .video-sec-inner.vertical-sec .vertical-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 2.104vw 1vw;
  background-color: #16161659;
  backdrop-filter: blur(11px);
  border-radius: 1.642vw;
}
.main-video-sec .video-sec-inner.vertical-sec .vertical-txt h1{
  font-size: 4.167vw;
  color: #ffffff;
  line-height: 1;
  text-align: center;
}
.main-video-sec .video-sec-inner.vertical-sec .vertical-txt h1 span{
  color: var(--theme-primary);
}
.main-video-sec .video-sec-inner.vertical-sec .vertical-txt p{
  font-size: 1.563vw;
  text-align: center;
  color: #8b8b8b;
  font-weight: 300;
  line-height: 1.4;
}
.storytell-illustration {
  width: 7.59vw; /* 165px */
  height: 7.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-2.png');
  position: absolute;
  bottom: 47%;
  left: 11%;
  transform: translate(0, 4.17vw) rotate(25deg); /* 80px */
  z-index: 1;
}
.storytell-illustration-1 {
  width: 4.59vw; /* 165px */
  height: 4.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-7.png');
  position: absolute;
  bottom: 24%;
  right: 14%;
  transform: translate(0, 4.17vw) rotate(24deg); /* 80px */
  z-index: 1;
}
.storytell-sec{
  padding: 7.552vw 4.01vw 8.646vw;
}
.storytell-sec .storytell-inner .storytell-left .storytell-title{
  font-size: 4.167vw;
  line-height: 4.167vw;
  max-width: 61.354vw;
  margin-bottom: 1.51vw;
  letter-spacing: -0.167vw;
}
.storytell-sec .storytell-inner .storytell-left .storytell-para{
  font-size: 1.667vw;
  font-weight: 500;
  letter-spacing: -0.037vw;
  margin-bottom: 3.229vw;
}
.storytell-sec .storytell-inner .storytell-left .btn-cta span.cta-arrow{
  background-color: var(--text);
}
.storytell-sec .storytell-inner .storytell-right{
  display: flex;
  align-items: start;
  justify-content: flex-end;
  gap: 1.042vw;
  flex-wrap: wrap;
}
.storytell-sec .storytell-inner .storytell-right .storytell-card{
  width: 19.479vw;
  background-color: #1E1E1E;
  padding: 2.083vw 2.083vw 0 2.083vw;
  border-radius: 1.823vw;
}
.storytell-sec .storytell-inner .storytell-right .storytell-card:nth-child(2){
  transform: translateY(-4.792vw);
}
.storytell-sec .storytell-inner .storytell-right .storytell-card:nth-child(3){
  transform: translateY(-13.021vw);
}
.storytell-sec .storytell-inner .storytell-right .storytell-card h4{
  font-size: 1.823vw;
  line-height: 1;
  color: #fff;
  margin-bottom: 0.521vw;
  display: flex;
  align-items: center;
  gap: 0.417vw;
}
.storytell-sec .storytell-inner .storytell-right .storytell-card p{
  font-size: 0.938vw;
  line-height: 1.302vw;
  font-weight: 300;
  margin-bottom: 2.604vw;
  width: 83%;
  color: #ffffff66;
}
.storytell-sec .storytell-inner .storytell-right .storytell-card img{
  max-width: 14.635vw;
}
.v-product-illustration {
  width: 7.59vw; /* 165px */
  height: 7.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-1.png');
  position: absolute;
  top: 4%;
  left: 5%;
  transform: translate(0, 4.17vw) rotate(-28deg); /* 80px */
  z-index: 1;
}
.v-product-illustration-1 {
  width: 4.59vw; /* 165px */
  height: 4.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-4.png');
  position: absolute;
  top: 33%;
  right: 19%;
  transform: translate(0, 4.17vw) rotate(3deg); /* 80px */
  z-index: 1;
}
.vertical-prodect-sec {
  background-color: #F0BEFA;
  margin-bottom: 9.115vw;
}
.vertical-prodect-sec .product-sec-area{
  flex-direction: column;
  align-items: center;
}
.vertical-prodect-sec .product-sec-area h4{
  text-align: center;
  width: 90%;
  margin-bottom: 1.51vw;
}
.vertical-prodect-sec .product-sec-area p{
  font-size: 1.667vw;
  margin-bottom: 2.5vw;
}

.co_creating-illustration {
  width: 7.59vw; /* 165px */
  height: 7.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-3.png');
  position: absolute;
  top: -12%;
  right: 9%;
  transform: translate(0, 4.17vw); /* 80px */
  z-index: 1;
}
.co_creating-illustration-1 {
  width: 4.59vw; /* 165px */
  height: 4.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-5.png');
  position: absolute;
  bottom: 13%;
  left: 9%;
  transform: translate(0, 4.17vw) rotate(3deg); /* 80px */
  z-index: 1;
}
.co_creating-sec{
  background-color: #201D1D;
  border-radius: 2.344vw;
  padding: 5.208vw 3.646vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6.115vw;
}
.co_creating-sec .txt-area p{
  color: #FAF4EC;
  font-size: 1.667vw;
  line-height: 1.667vw;
  letter-spacing: -0.037vw;
  margin-bottom: 1.042vw;
}
.co_creating-sec .txt-area h4{
  color: #FAF4EC;
  font-size: 4.167vw;
  line-height: 4.167vw;
  width: 90%;
  margin-bottom: 4.688vw;
}
.co_creating-sec .btn-cta {
  background-color: transparent;
}
.co_creating-sec .btn-cta .btn-cta-area{
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
}
.co_creating-sec .btn-cta .btn-cta-area .cta-arrow{
  background-color: #fff;
  color: var(--text);
}
.co_creating-sec .swiper {
  width: 47.396vw;
  height: 32.917vw;
  margin-bottom: 2.396vw;
}

.co_creating-sec .swiper-3d .swiper-wrapper {
  display: flex;
  align-items: center;
}
.co_creating-sec .card-swiper-slide {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  border-radius: 1.667vw;
  color: #fff;
  background-color: #353535;
  width: 45.729vw;
  height: 28.542vw;
  opacity: 0.6;
}
.co_creating-sec .card-swiper-slide.swiper-slide-prev, 
.co_creating-sec .card-swiper-slide.swiper-slide-next {
  width: 41.458vw;
  height: 24.896vw;
}
.co_creating-sec .card-swiper-slide img{
  width: -webkit-fill-available;
  border-radius: 0.99vw;
  margin-bottom: 0.469vw;
}
.co_creating-sec .card-swiper-slide h5{
  font-size: 1.25vw;
  line-height: 1.563vw;
  color: #fff;
}
.co_creating-sec .card-swiper-slide p{
  font-size: 0.729vw;
  line-height: 0.938vw;
  font-weight: 300;
  letter-spacing: 0.047vw;
  color: #fff;
}
.co_creating-sec .card-swiper-slide.swiper-slide-active{
  width: 47.396vw;
  height: 32.917vw;
  padding: 0.729vw;
  opacity: 1;
}



.dna-sec{
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 11.979vw 0;
}

.dna-illustration {
  width: 7.59vw; /* 165px */
  height: 7.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-1.png');
  position: absolute;
  top: -35%;
  left: 55%;
  transform: translate(0, 4.17vw) rotate(-43deg); /* 80px */
  z-index: 1;
}
.dna-illustration-1 {
  width: 4.59vw; /* 165px */
  height: 4.85vw; /* 170px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/sticker-4.png');
  position: absolute;
  bottom: 13%;
  right: 9%;
  transform: translate(0, 4.17vw) rotate(3deg); /* 80px */
  z-index: 1;
}
.dna-sec .dna-cont-area{
  width: 46%; 
}
.dna-sec .dna-cont-area h1{
  font-size: 4.17vw;
  line-height: 4.17vw;
  margin: 0 0 1.667vw 0;
  font-weight: 600;
  color: var(--text);
}
.dna-sec .dna-cont-area .btn-cta .btn-cta-area{
  background: transparent;
  border: 1px solid var(--text);
}
.dna-sec .dna-cont-area .btn-cta .btn-cta-area .cta-arrow{
  background: var(--text);
}
.dna-sec .dna-card-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.563vw;
  flex: 1;
}
.dna-sec .dna-card-area .dna-card{
  background: #EAE4D8;
  padding: 1.667vw;
  border-radius: 1.042vw;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 1.302vw;
}
.dna-sec .dna-card-area .dna-card h2{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1.042vw;
  font-size: 3.333vw;
  line-height: 1;
}
.dna-sec .dna-card-area .dna-card h2 span{
  font-size: 0.938vw;
}
.dna-sec .dna-card-area .dna-card h2 span .arrow{
  color: var(--theme-primary);
}
.dna-sec .dna-card-area .dna-card p{
  font-size: 1.25vw;
  line-height: 1.615vw;
  font-weight: 500;
  letter-spacing: -0.037vw;
}
.dna-sec .dna-card-area .dna-card ul{
  margin-bottom: 0;
}
.dna-sec .dna-card-area .dna-card ul li{
  font-size: 0.938vw;
  line-height: 1.875vw;
  color: var(--text);
  font-weight: 500;
}