body {
  margin: 0;
}

.landing-page {
  background: #F2F2F2;
}

.welcome-to, .search, .hero-description {
  animation: fadeInRightFarFast 2s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
  opacity: 0;
}

html.rtl .welcome-to, html.rtl .search, html.rtl .hero-description {
  animation: fadeInLeftFarFast 2s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
  opacity: 0;
}

.explore {
  animation: fadeInRightFarSlow 2s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
  opacity: 0;
}

html.dark .explore,
html.dark .explore *,
html.green-weakness .explore,
html.green-weakness .explore * {
  color: white;
  background: transparent;
}

html.red-weakness .explore,
html.red-weakness .explore * {
  color: #E1E100;
  background: transparent;
}


html.rtl .explore {
  animation: fadeInLeftFarSlow 2s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInRightFarSlow {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInLeftFarSlow {
  0% {
    opacity: 0;
    transform: translateX(-200px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/* for all the child in .dubai class add fade in animation from top sequentially for each letter */
.dubai .d {
  animation: fadeInTop 1s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.dubai .u {
  animation: fadeInTop 1s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.dubai .b {
  animation: fadeInTop 1s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-delay: 0.7s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.dubai .a {
  animation: fadeInTop 1s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.dubai .i {
  animation: fadeInTop 1s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-delay: 0.9s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.dubai .ae {
  display: flex;
  align-items: end;
  animation: fadeInTop 1s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  gap: 8.63px;
}

/*.hero-description {*/
/*  animation: fadeInRight 2s;*/
/*  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);*/
/*  animation-delay: 1s;*/
/*  animation-fill-mode: forwards;*/
/*  opacity: 0;*/
/*}*/

.hero-description p {
  margin-top: 36px;
  margin-bottom: 22px;
}

html.dark .landing-page .hero .hero-description,
html.dark .landing-page .hero .hero-description *,
html.green-weakness .landing-page .hero-video .hero-description,
html.green-weakness .landing-page .hero-video .hero-description * {
  color: white;
  background: transparent;
}


html.red-weakness .landing-page .hero-video .hero-description,
html.red-weakness .landing-page .hero-video .hero-description * {
  color: #E1E100;
  background: transparent;
}


.landing-page .hero-video .hero-description {
  color: white;
  z-index: 1;
  position: relative;
}

.landing-page .video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.landing-page .video-container .hero-video {
  min-width: 100%;
  min-height: 100%;

  width: auto;
  height: auto;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

html.dark .landing-page .video-container .hero-video,
html.green-weakness .landing-page .video-container .hero-video,
html.red-weakness .landing-page .video-container .hero-video {
  filter: grayscale(1);
}

.video__action {
    background-repeat: no-repeat;
    position: relative;
    bottom: 1.5rem;
    width: 3rem;
    height: 3rem;
    margin: 100px auto 0;
    z-index: 8;
    cursor: pointer;
}

.video__action--pause {
  background-image: var(--pause-url);
}

.video__action--play {
  background-image: var(--play-url);
}

.cards-container .card-1 {
  animation: fadeInCard1 1s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  /*animation-delay: 0.7s;*/
  animation-fill-mode: forwards;
  opacity: 0;
}

.cards-container .card-2 {
  animation: fadeInCard2 1s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  /*animation-delay: 0.9s;*/
  animation-fill-mode: forwards;
  opacity: 0;
}

.cards-container .card-3 {
  animation: fadeInCard3 1s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  /*animation-delay: 1.1s;*/
  animation-fill-mode: forwards;
  opacity: 0;
}

.cards-container .card-4 {
  animation: fadeInCard4 1s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  /*animation-delay: 1.3s;*/
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInCard1 {
  0% {
    opacity: 0;
    transform: translateY(120px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInCard2 {
  0% {
    opacity: 0;
    transform: translateY(385px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInCard3 {
  0% {
    opacity: 0;
    transform: translateY(650px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInCard4 {
  0% {
    opacity: 0;
    transform: translateY(431px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRightFarFast {
  0% {
    opacity: 0;
    transform: translateX(300px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInLeftFarFast {
  0% {
    opacity: 0;
    transform: translateX(-300px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.card {
  display: flex;
  align-items: end;
  position: relative;
  animation: translateToBottom 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
}

html.red-weakness .landing-page .cards-container .card:hover .bg-img-cont {
  position: absolute;
  left: 0;
  height: 280px;
  width: 240px;
  border: 1px solid yellow;
}


html.dark .card {
  mix-blend-mode: luminosity;
}

html.red-weakness .card {
  background: black;
  border-radius: 0;
}

html.red-weakness .card .card-content-container {
  border-radius: 0;
  height: 238px;
}

html.green-weakness .card {
  background: white;
}

.card .card-content-container {
  overflow-y: hidden;
  height: 240px;
  width: 100%;
  position: relative;
}

.card .card-content {
  padding: 20px;
  z-index: 1;
  width: 100%;
  position: absolute;
  top: 100px;
  animation: translateToBottom 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
  box-sizing: border-box;
}

html.green-weakness .card .card-content,
html.green-weakness .card .card-content *,
html.red-weakness .card .card-content,
html.red-weakness .card .card-content *,
html.dark .card .card-content,
html.dark .card .card-content * {
  background: transparent !important;
}

html.red-weakness .card .card-content * {
  color: #E1E100;
}

.card .card-content img {
  animation: opacityShow 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
}

.card .card-content .hover-content {
  opacity: 0;
}

.card .card-content .hover-content .description {
  margin-top: 12px;
}

.card .card-content .hover-content a {
  margin-top: 20px;
  margin-bottom: 4px;
}

.card .bg {
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 280px;
  max-width: 240px;
  width: 100%;
  background: black;
  z-index: 0;
  animation: opacityHide 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
}

html.red-weakness .card .bg {
  bottom: 0;
}

html.dark .card .bg,
html.dark .card .bg *,
html.red-weakness .card .bg,
html.red-weakness .card .bg * {
  background: black;
}

html.red-weakness .card .bg {
  height: 278px;
}

html.dark .landing-page .cards-container .card .bg,
html.dark .landing-page .cards-container .card .bg * {
  background: black;
}

.card:hover .bg {
  animation: opacityShow 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
}

.landing-page .card:hover .card-content {
  right: 0;
  left: 0;
  height: 240px;
  display: flex;
  flex-flow: column;
  justify-content: end;
}

html.green-weakness .cards-container .card .card-content .heading,
html.green-weakness .cards-container .card .card-content .heading *,
html.green-weakness .cards-container .card .card-content .sub-heading,
html.green-weakness .cards-container .card .card-content .sub-heading * {
  color: #3F5891;
}


.card:hover .card-content .hover-content {
  opacity: 1;
}

.card:hover .card-content {
  animation: translateToTop 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
}

.card:hover .card-content .img {
  max-width: 35px;
  animation: opacityHide 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
}

.card:hover .card-content .heading * {
  animation: scaleDownText 0.25s linear, colorChange 0.25s;
  animation-delay: 0s, 0s;
  animation-fill-mode: forwards, forwards;
}

html.red-weakness .card:hover .card-content .heading * {
  animation: scaleDownText 0.25s linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

.card:hover .card-content .sub-heading * {
  animation: colorChange 0.25s;
  animation-fill-mode: forwards;
}

.card .card-content .sub-heading {
  margin-top: -10px;
}

.card:hover .card-content .description * {
  animation: colorChange 0.25s;
  animation-fill-mode: forwards;
}

.card:hover .card-content .read-more * {
  animation: colorChange 0.25s;
  animation-fill-mode: forwards;
}

html.red-weakness .card:hover .card-content .sub-heading *,
html.red-weakness .card:hover .card-content .description *,
html.red-weakness .card:hover .card-content .read-more * {
  animation: unset;
}


@keyframes colorChange {
  0% {
    color: black;
  }
  100% {
    color: white;
  }
}

@keyframes scaleDownText {
  0% {
    font-size: 24px;
  }
  100% {
    font-size: 16px;
  }
}

@keyframes opacityHide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    /*display: none;*/
  }
}

@keyframes opacityShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    /*display: none;*/
  }
}

@keyframes translateToTop {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px);
  }
}

@keyframes translateToBottom {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}

.landing-page .featured-service-content {
  margin-top: 12.854rem;
}

.landing-page .featured-services-container {
  margin-top: 7.5rem;
  gap: 43px;
  justify-content: center;
  /*display: none;*/
  /*flex-flow: wrap;*/
}

.landing-page .mobile-featured-services-container {
  display: none;
}

.landing-page .mobile-featured-services-container .mobile-service-card {
  padding: 30px 12px;
  min-height: 151px;
}

html.green-weakness .landing-page .mobile-featured-services-container .mobile-service-card {
  background: #3F5891;
}

html.dark .landing-page .mobile-featured-services-container .mobile-service-card,
html.red-weakness .landing-page .mobile-featured-services-container .mobile-service-card {
  background: black;
}

.featured-services-container .service-card-img {
  width: 314px;
  height: 424px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) -13.04%, rgba(0, 0, 0, 0.9) 100%), var(--bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 13px 26px rgba(0, 0, 0, 0.08);
}

.featured-services-container .service-card {
  transform: translateY(0);
  animation: translateToBottomFeatureService 300ms !important;
  transition-timing-function: cubic-bezier(0, 0, 2.58, 1);
  animation-fill-mode: forwards !important;
}


html.red-weakness .featured-services-container .service-card-img,
html.dark .featured-services-container .service-card-img {
  mix-blend-mode: luminosity;
}

html.green-weakness .featured-services-container .service-card-img {
  filter: grayscale(1);
}

html.red-weakness .featured-services-container .service-card *,
html.dark .featured-services-container .service-card * {
  background-color: transparent;
}


.featured-services-container .service-card:hover {
  animation: translateToTopFeatureService 300ms !important;
  transition-timing-function: cubic-bezier(0, 0, 2.58, 1);
  animation-fill-mode: forwards !important;
}

.featured-services-container .service-card a.text {
  color: white;
}

.featured__indicator-wrapper {
  display: none;
  margin-top: 16px;
  gap: 6px;
  justify-content: center;
}

.featured__indicator {
  width: 14px;
  height: 14px;
  background: #D9D9D9;
  border: 1px solid transparent;
  border-radius: 50%;
}

.featured__indicator--active {
  background: black;
}

html.dark .featured__indicator,
html.green-weakness .featured__indicator {
  border-color: white;
}

html.red-weakness .featured__indicator {
  border-color: #E1E100;
}

html.dark .featured__indicator--active,
html.green-weakness .featured__indicator--active {
  background: white;
}

html.red-weakness .featured__indicator--active {
  background: #E1E100;
}

.landing-page .landing-common-read-more {
  display: flex;
  justify-content: center;
}

.landing-page .landing-common-read-more.featured-services {
  margin-top: 45px;
}

.landing-page .landing-common-read-more.innovating {
  margin-top: 28px;
}

.landing-page .landing-common-read-more.performance {
  margin-top: 21px;
}

.landing-page .landing-common-read-more.discover-dubai {
  margin-top: 50px;
}


.landing-page .landing-common-read-more a.text {
  color: #4466EC;
  display: flex;
  gap: 10px;
}

.landing-page .landing-common-read-more a.text d-icon {
  transform: translateY(2px);
}

.landing-page .eye-dubai {
  display: flex;
  overflow: hidden;
  height: 800px;
  position: relative;
  direction: ltr;
}

html.red-weakness .landing-page .eye-dubai,
html.dark .landing-page .eye-dubai {
  mix-blend-mode: luminosity;
}

html.green-weakness .landing-page .eye-dubai *,
html.red-weakness .landing-page .eye-dubai *,
html.dark .landing-page .eye-dubai * {
  background-color: transparent;
}

.landing-page .eye-dubai .tree-45 {
  transform: translateX(-400px) translateY(0);
  height: 827px;
  width: 827px;
  z-index: 1;
  scale: 1;
  transition: transform 3s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

.landing-page .eye-dubai .tree-45.slide {
  transform: translateX(-400px) translateY(-100px);
}

.landing-page .eye-dubai .cloud1 {
  position: absolute;
  width: 823px;
  height: 450px;
  margin-top: 100px;
  z-index: 3;
  scale: 1;
  transition: scale 3s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

.landing-page .eye-dubai .desktop-museum {
  width: 852px;
  height: 553px;
  margin-top: 350px;
  /* add white horizontal linear gradiant on image */
  background: linear-gradient(0deg, #F2F2F2 21.52%, rgba(242, 242, 242, 0) 41.05%), var(--bg-image);
  /*background: var(--bg-image), linear-gradient(180deg, rgba(242, 242, 242, 0) 0%, #f2f2f2 31.25%, #f2f2f2 79.12%);*/
  background-size: cover;
  position: absolute;
  transform: scale(1);
  transition: transform 3s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.landing-page .eye-dubai .mobile-museum {
  display: none;
}

html.red-weakness .landing-page .eye-dubai .desktop-museum,
html.dark .landing-page .eye-dubai .desktop-museum {
  background: linear-gradient(0deg, #000000 21.52%, rgba(0, 0, 0, 0) 41.05%), var(--bg-image), var(--bg-image);
}

html.green-weakness .landing-page .eye-dubai .desktop-museum {
  background: linear-gradient(179.16deg, rgba(63, 88, 145, 0) 52.69%, #3F5891 73.82%), var(--bg-image);
}

.landing-page .eye-dubai .cloud2 {
  position: absolute;
  margin-top: 200px;
  right: 0;
  z-index: 3;
  scale: 1;
  transition: scale 3s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}


.landing-page .eye-dubai .tree {
  right: 0;
  scale: 1;
  z-index: 1;
  width: 827px;
  height: 827px;
  margin-top: 250px;
  position: absolute;
  transform: translateX(515px) translateY(0);
  transition: transform 3s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

.landing-page .eye-dubai .tree.slide {
  transform: translateX(515px) translateY(-100px);
}

.landing-page .future-innovation {
  z-index: 1;
  position: relative;
}

.landing-page .future-innovation .future-innovation-description {
  margin-top: 43px;
}

.landing-page .dubai-events {
  margin-top: 14.375rem;
}

.landing-page .events-card-container {
  display: flex;
  margin-top: 55px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 2s;
  transition-timing-function: cubic-bezier(0, 0, 2.58, 1);
  z-index: 1;
  position: relative;
}

html.dark .landing-page .events-card-container {
  mix-blend-mode: luminosity;
}

html.red-weakness .landing-page .events-card-container {
  mix-blend-mode: unset;
}

html.red-weakness .landing-page .events-card-container .event-card .event-card-img {
  mix-blend-mode: luminosity;
}

html.green-weakness .landing-page .events-card-container .event-card .event-card-img {
  filter: grayscale(1);
}

.landing-page .events-card-container.opened {
  max-height: 353px;
}

.landing-page .events-card-container .event-card {
  width: 100%;
  height: 353px;
  position: relative;
  box-sizing: border-box;
}

.landing-page .events-card-container .event-card .event-card-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(179.87deg, rgba(0, 0, 0, 0.7) 0.11%, rgba(0, 0, 0, 0.7) 0.12%, rgba(0, 0, 0, 0) 0.13%, rgba(0, 0, 0, 0.7) 80.66%, rgba(0, 0, 0, 0.7) 99.89%), var(--bg-image);
  background-size: cover;
}

.landing-page .events-card-container .event-card .event-card-content {
  position: absolute;
  left: 28px;
  bottom: 40px;
  color: white;
}

html.rtl .landing-page .events-card-container .event-card .event-card-content {
  right: 28px;
  left: unset;
}

html.green-weakness .landing-page .events-card-container .event-card .event-card-content,
html.green-weakness .landing-page .events-card-container .event-card .event-card-content *,
html.red-weakness .landing-page .events-card-container .event-card .event-card-content,
html.red-weakness .landing-page .events-card-container .event-card .event-card-content *,
html.dark .landing-page .events-card-container .event-card .event-card-content,
html.dark .landing-page .events-card-container .event-card .event-card-content * {
  background: transparent;
}

.landing-page .event-read-more {
  opacity: 0;
  transition: opacity 1.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

.landing-page .event-read-more.final {
  opacity: 1;
}

.landing-page .motif {
  margin: 155px auto 30px;
  width: 88px;
  height: 88px;
  display: block;
  transform: translateY(-450px) scale(3) rotate(0deg);
  z-index: 0;
  opacity: 0.1;
  position: relative;
  transition: all 2s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

html.red-weakness .landing-page .motif {
  filter: unset;
  mix-blend-mode: unset;
}

html.green-weakness .landing-page .motif,
html.red-weakness .landing-page .motif,
html.dark .landing-page .motif {
  background-color: transparent;
}

.landing-page:has(.events-card-container.opened) .motif {
  opacity: 1;
  transform: translateY(-255px) scale(3) rotate(180deg);
}

.landing-page:has(.events-card-container.opened) .motif.final {
  opacity: 1;
  transform: scale(1) translateY(0) rotate(0deg);
}


.landing-page .dubai-attractions-head {
  text-align: center;
}

.landing-page .dubai-attractions-container {
  margin-top: 26px;
  overflow: hidden;
  position: relative;
}

html.green-weakness .dubai-attractions-container {
  filter: grayscale(1);
}

html.red-weakness .dubai-attractions-container,
html.dark .dubai-attractions-container {
  mix-blend-mode: luminosity;
}

.landing-page .dubai-attractions-container .attraction-row {
  display: flex;
  aspect-ratio: 1;
  height: 419px;
  transition: height 1200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

@media (min-width: 1800px) {
  .landing-page .dubai-attractions-container .attraction-row.show {
    height: 250px !important;
  }
}

.landing-page .dubai-attractions-container .attraction-row.show {
  height: 230px;
}

.landing-page .dubai-attractions-container .attraction-row:nth-child(1) {
  justify-content: flex-end;
  float: right;
}

html.rtl .landing-page .dubai-attractions-container .attraction-row:nth-child(1) {
  float: left;
}

.landing-page .dubai-attractions-description-container {
  margin-top: 81px;
  padding-bottom: 150px;
}

.landing-page .dubai-attractions-container .attraction-card {
  margin-left: -2px;
}

html.rtl .landing-page .dubai-attractions-container .attraction-card {
  margin-right: -2px;
  margin-left: unset;
}

.landing-page .attractions__gradient {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #fff 0, #00000000 91.35%);
  width: 25%;
}

html.red-weakness .landing-page .attractions__gradient,
html.dark .landing-page .attractions__gradient {
  background: linear-gradient(90deg, #000000 0, #00000000 91.35%);
}

.landing-page .attractions__gradient.attractions__gradient--left {
  left: 0;
}

.landing-page .attractions__gradient.attractions__gradient--right {
  right: 0;
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.landing-page .dubai-attractions-description {
}

.landing-page .dubai-attractions-actions {
  display: flex;
  justify-content: center;
  gap: 50px;
}

.landing-page .mobile-service-card {
  background: white;
  position: relative;
}

html.dark .landing-page .mobile-service-card,
html.green-weakness .landing-page .mobile-service-card {
  border: 1px solid white;
}

html.red-weakness .landing-page .mobile-service-card {
  border: 1px solid #E1E100;
}

.landing-page .mobile-service-card .mobile-service-card-img-cont {
  display: flex;
  height: 45px;
  align-items: center;
}

.landing-page .mobile-service-card a.text {
  position: absolute;
  bottom: 0;
}

html.dark .landing-page .mobile-service-card a.text,
html.green-weakness .landing-page .mobile-service-card a.text,
html.red-weakness .landing-page .mobile-service-card a.text {
  background: transparent;
}

.landing-page .service-card-wrapper {
  position: relative;
}

.landing-page .service-card-wrapper .service-card-content {
  position: absolute;
  z-index: 1;
  bottom: 0;
  background: transparent;
  left: 24px;
}

.service-card-content d-label p.text-caption {
  margin-top: 4px;
}

html.rtl .landing-page .service-card-wrapper .service-card-content {
  right: 24px;
  left: unset;
}

.landing-page .service-card-wrapper .service-card-content * {
  background: transparent;
  color: white;
}

html.red-weakness .service-card-wrapper .service-card-content * {
  background: transparent;
  color: #E1E100;
}

.landing-page .service-card-wrapper.bill-payment {
  animation: fadeinBillPaymentBottom 1600ms;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
  opacity: 0;
}

.landing-page .service-card-wrapper.flight-information {
  animation: fadeinFlightInformationBottom 1600ms;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
  opacity: 0;
}

.landing-page .service-card-wrapper.traffic-fine {
  animation: fadeinTrafficFineBottom 1600ms;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
  opacity: 0;
}

.landing-page .service-card-wrapper.salik {
  animation: fadeinSalikBottom 1600ms;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
  opacity: 0;
}

.landing-page .footer-container {
  background-size: cover;
}

.landing-page .footer-container * {
  background: transparent;
}

@keyframes fadeinSalikBottom {
  0% {
    opacity: 0;
    transform: translateY(176px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeinTrafficFineBottom {
  0% {
    opacity: 0;
    transform: translateY(376px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeinFlightInformationBottom {
  0% {
    opacity: 0;
    transform: translateY(576px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeinBillPaymentBottom {
  0% {
    opacity: 0;
    transform: translateY(776px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInFeaturedBottom {
  0% {
    opacity: 0;
    transform: translateY(300px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes translateToTopFeatureService {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-50px);
    opacity: 1;
  }
}

@keyframes translateToBottomFeatureService {
  0% {
    transform: translateY(-50px);
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.landing-page .hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 50px;
}


.landing-page .hero .hero-image {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  animation: scaleInScaleOut 25s infinite linear, translateFromTop 2s;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-delay: 2.2s, 0s;
}

html.red-weakness .landing-page .hero .hero-image,
html.dark .landing-page .hero .hero-image {
  mix-blend-mode: luminosity;
}

html.green-weakness .landing-page .hero .hero-image {
  filter: grayscale(1);
}

.landing-page .hero .image-shadow {
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  position: absolute;
}

html.red-weakness .landing-page .hero .image-shadow,
html.dark .landing-page .hero .image-shadow {
  filter: invert(1);
  background: transparent;
}

html.green-weakness .landing-page .hero .image-shadow {
  background: transparent;
  filter: invert(74%) sepia(80%) saturate(416%) hue-rotate(185deg) brightness(93%) contrast(82%);
}

@keyframes translateFromTop {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes scaleInScaleOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.landing-page .hero .hero-backdrop {
  position: absolute;
  inset: 0;
  background: #00000066;
  z-index: 1;
  bottom: 50px;
}

.landing-page .hero .welcome-to {
  padding-top: 90px;
}

html.green-weakness .landing-page .hero .welcome-to,
html.green-weakness .landing-page .hero .welcome-to *,
html.red-weakness .landing-page .hero .welcome-to,
html.red-weakness .landing-page .hero .welcome-to *,
html.dark .landing-page .hero .welcome-to,
html.dark .landing-page .hero .welcome-to * {
  color: #1B1B1F;
  background: transparent;
}

.landing-page .hero-video .welcome-to {
  color: white;
  padding-top: 140px;
  position: relative;
  z-index: 1;
}

html.red-weakness .landing-page .hero-video .welcome-to,
html.red-weakness .landing-page .hero-video .welcome-to * {
  color: #E1E100;
}

html.dark .landing-page .hero-video .welcome-to,
html.dark .landing-page .hero-video .welcome-to *,
html.green-weakness .landing-page .hero-video .welcome-to,
html.green-weakness .landing-page .hero-video .welcome-to * {
  color: white;
}

.landing-page .hero .text.explore {
  position: relative;
  z-index: 2;
}

.landing-page .hero-video .text.explore {
  color: white;
}

.landing-page .hero .dubai {
  display: flex;
  direction: ltr;
  justify-content: center;
  gap: 8.63px;
  position: relative;
  z-index: 1;
  height: 55px;
  align-items: baseline;
}

html.dark .landing-page .dubai,
html.green-weakness .landing-page .dubai,
html.red-weakness .landing-page .dubai {
  background: transparent;
}

.landing-page .dubai-mobile {
  direction: ltr;
}

html.dark .landing-page .hero .dubai *,
html.green-weakness .landing-page .hero .dubai * {
  background: transparent;
  color: white;
}

html.red-weakness .landing-page .hero .dubai * {
  color: #E1E100;
  background: transparent;
}


.landing-page .hero .dubai .letter {
  transition: 0.5s transform;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

.landing-page .hero .dubai .letter.transition {
  /*transform: translateY(-60px);*/
}

.landing-page .hero .section.header.z-index-3 {
  z-index: 3;
}

.landing-page .hero .dubai .d {
  width: 56.3px;
  height: 74px;
  left: 0.7265625px;
  top: 0.85546875px;
}

.landing-page .hero .dubai .u {
  width: 49.1px;
  height: 54.6px;
  left: 46.54296875px;
  top: 0.85546875px;
  transition-delay: 100ms;
}

.landing-page .hero .dubai .b {
  width: 56.3px;
  height: 74px;
  left: 92.4375px;
  top: 0.85546875px;
  transition-delay: 200ms;
}

.landing-page .hero .dubai .a {
  width: 49.3px;
  height: 55.2px;
  left: 136.06640625px;
  top: 0.85546875px;
  transition-delay: 300ms;
}

.landing-page .hero .dubai .i {
  width: 16px;
  height: 73px;
  left: 183.302734375px;
  top: 0.85546875px;
  transition-delay: 400ms;
}

.landing-page .hero .search {
  display: flex;
  padding: 15px 18px;
  /*background: rgba(255, 255, 255, 0.9);*/
  background: white;
  max-width: 672px;
  position: relative;
  z-index: 2;
  margin: 45px auto auto;
}

.portlet {
  margin-bottom: 0;
}

.landing-page .hero .search d-icon {
  flex: 0.1;
}

.landing-page .hero .search .caret {
  transform: translate(-25px, 5px);
}

.landing-page .hero .search .search-input {
  flex: 1.4;
  border: none;
  outline: none;
}

.landing-page .hero .search .search-input::placeholder {
  font-size: 16px;
}

.landing-page .hero .search .search-select {
  flex: 0.5;
  border: none;
  outline: none;
  appearance: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.landing-page .hero .explore {
  display: flex;
  gap: 5px;
  justify-content: center;
  width: fit-content;
  margin: 24px auto;
}

.landing-page .cards-container {
  display: flex;
  gap: 12px;
  margin-top: 35px;
  justify-content: center;
}

.landing-page .cards-container--mobile { 
  display: none;
}

.landing-page .cards-container .card {
  position: relative;
  background: white;
  width: 240px;
  min-width: 240px;
  height: 240px;
  z-index: 2;
}

html.green-weakness .landing-page .cards-container .card,
html.green-weakness .landing-page .cards-container .card *,
html.dark .landing-page .cards-container .card,
html.dark .landing-page .cards-container .card * {
  background: white;
  color: #1B1B1F;
}

html.green-weakness .landing-page .cards-container .card:hover,
html.green-weakness .landing-page .cards-container .card:hover * {
  background: #3F5891;
  color: white;
}

html.red-weakness .landing-page .cards-container .card {
  border: 1px solid #E1E100;
}

html.red-weakness .landing-page .cards-container .card:hover {
  border: none;
}

html.red-weakness .landing-page .cards-container .card:hover .bg-container {
  height: 280px;
  max-width: 240px;
  border: 1px solid #E1E100;
}

html.red-weakness .landing-page .cards-container .card,
html.red-weakness .landing-page .cards-container .card * {
  background: black;
  color: #E1E100;
}

html.dark .landing-page .cards-container .card:hover,
html.dark .landing-page .cards-container .card:hover * {
  background: black;
  color: #1B1B1F;
}

html.red-weakness .landing-page .cards-container .card:hover,
html.red-weakness .landing-page .cards-container .card:hover * {
  /*border: none;*/
  background: black;
  color: #E1E100;
}

.landing-page .cards-container .card .content {
  top: 40%;
  padding: 32px;
  position: inherit;
}

.landing-page .cards-container .card .card-content-container .read-more {
  display: flex;
  gap: 5px;
  align-items: baseline;
}

.landing-page .mobile-card .read-more {
  display: flex;
  gap: 5px;
  align-items: baseline;
}

.landing-page .mobile-card .read-more d-icon {
  transform: translateY(10px);
}

.landing-page .cards-container .card .card-content-container .read-more d-icon {
  transform: translateY(10px);
}

.landing-page .hero .explore .right {
  transform: translateY(5px);
}

.landing-page .mobile-cards-container.cards-container {
  display: none;
}

.mobile-hero {
  display: none;
}

@media (max-width: 1320px) {
  .landing-page {
    padding: 0 18.5px;
  }

  .landing-page .section.first {
    margin-top: 0;
    padding-top: 0;
  }

  .landing-page .hero-video .welcome-to {
    margin-top: 200px;
  }

  /* .landing-page .cards-container {
    margin-top: 175px;
  } */

  .landing-page .hero {
    margin-left: -18.5px;
    margin-right: -18.5px;
  }

  .landing-page .hero .center-align {
    text-align: center;
  }

  .mobile-hero__welcome {
    margin-top: 17.5px !important;
  }

  .mobile-hero__welcome .mobile-search {
    margin: 16px 0;
  }

  .mobile-hero .d {
    width: 31px;
    height: 33px;
  }

  .mobile-hero .u {
    width: 29px;
    height: 34px;
  }

  .mobile-hero .b {
    width: 23px;
    height: 33px;
  }

  .mobile-hero .a {
    width: 30px;
    height: 34px;
  }

  .mobile-hero .i {
    width: 8px;
    height: 33px;
  }

  .mobile-card-img.bg {
    min-width: 336px;
    min-height: 477.88px;
    max-width: 336px;
    max-height: 477.88px;
    background: linear-gradient(180.1deg, rgba(0, 0, 0, 0) 0.09%, #1C1C1C 89.91%), var(--bg-image);
    /*background: linear-gradient(var(--linear-gradient)), var(--bg-url)*/
    background-size: cover;
    /*background: linear-gradient(180.1deg, rgba(0, 0, 0, 0) 0.09%, #1C1C1C 89.91%);*/
  }

  .landing-page .mobile-cards-container.cards-container {
    /*display: flex;*/
    display: none;
    gap: 12px;
    margin-top: 4.5rem;
    justify-content: center;
    color: white;
    flex-flow: wrap;
  }

  html.red-weakness .landing-page .mobile-cards-container.cards-container .card-content-container * {
    color: #E1E100;
  }

  .landing-page .cards-container .mobile-card {
    position: relative;
  }

  html.dark .landing-page .cards-container .mobile-card-img,
  html.green-weakness .landing-page .cards-container .mobile-card-img,
  html.red-weakness .landing-page .cards-container .mobile-card-img {
    filter: grayscale(1);
  }

  .landing-page .cards-container .mobile-card .card-content {
    position: absolute;
    left: 12px;
    bottom: 8px;
  }

  html.rtl .landing-page .cards-container .mobile-card .card-content {
    left: unset;
    right: 12px;
  }

  html.green-weakness .landing-page .cards-container .mobile-card .card-content,
  html.green-weakness .landing-page .cards-container .mobile-card .card-content *,
  html.red-weakness .landing-page .cards-container .mobile-card .card-content,
  html.red-weakness .landing-page .cards-container .mobile-card .card-content *,
  html.dark .landing-page .cards-container .mobile-card .card-content,
  html.dark .landing-page .cards-container .mobile-card .card-content * {
    background: transparent;
  }

  html.red-weakness .landing-page .cards-container .mobile-card .card-content * {
    color: #E1E100;
  }

  html.green-weakness .landing-page .mobile-featured-services-container .mobile-service-card .mobile-service-card-img-cont img,
  html.red-weakness .landing-page .mobile-featured-services-container .mobile-service-card .mobile-service-card-img-cont img,
  html.dark .landing-page .mobile-featured-services-container .mobile-service-card .mobile-service-card-img-cont img {
    mix-blend-mode: luminosity;
  }

  .mobile-card .read-more * {
    color: white;
  }

  .landing-page .featured-service-content {
    margin-top: 5rem;
  }
}

@media (max-width: 1025px) {
  /*.landing-page .featured-services-container {*/
  /*  display: flex;*/
  /*  justify-content: start;*/
  /*}*/

  .landing-page .cards-container {
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
  }

  html.green-weakness .landing-page .motif {
    filter: unset;
  }

  .landing-page .dubai-attractions-head {
    margin-top: -10rem;
  }

  .landing-page .dubai-attractions-container {
    margin-top: 50px;
  }

  .featured-services-container .service-card:hover {
    animation: unset !important;
  }

  .landing-page .eye-dubai {
    height: auto;
  }

  .landing-page .events-card-container {
    max-height: 0;
    overflow-x: auto;
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
  }

  .landing-page .events-card-container::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }

  .landing-page .events-card-container .event-card {
    min-width: 240px;
    max-width: 240px;
    min-height: 240px;
    max-height: 240px;
  }

  .landing-page .events-card-container .event-card .performance-image {
    width: 11.67px;
    height: 9.33px;
    display: flex;
    align-items: center;
  }

  .landing-page .event-read-more {
    opacity: 0;
  }

}

.mobile-innovation-label {
  display: none;
}

@media (max-width: 768px) {
  .card:hover .bg {
    animation: unset;
  }

  .landing-page .hero .explore {
    margin: 45px auto;
  }

  .landing-page .hero-video .hero-description {
    padding: 0 20px;
  }

  .landing-page .featured-services-container {
    margin-top: 24px;
  }

  .landing-page .card:hover .card-content {
    position: absolute;
    height: unset;
    display: block;
    animation: unset;
    bottom: unset;
  }
  
  .landing-page .hero .search {
    display: none;
  }
  
  .landing-page .card .card-content {
    padding: 0 20px;
    position: absolute;
    display: block;
    animation: unset;
    top: unset;
    bottom: unset;
    z-index: 3;
  }

  .card .card-content .hover-content a {
    margin: unset;
  }

  .card:hover .card-content .img,
  .card:hover .card-content .description *,
  .card:hover .card-content .sub-heading *,
  .card:hover .card-content .read-more *,
  .card:hover .card-content .heading * {
    animation: unset;
  }

  .landing-page .card .card-content .hover-content {
    opacity: 1;
  }

  .landing-page .cards-container .card .bg {
    animation: unset;
  }

  .card .card-content-container {
    display: flex;
    align-items: center;
  }

  .landing-page .featured-services-container {
    gap: 8px;
  }

  .landing-page .dubai-filter-wrapper {
    background-image: none !important;
  }

  .landing-page .eye-dubai .desktop-museum {
    display: none;
  }

  .landing-page .eye-dubai .mobile-museum {
    width: 290px;
    height: 186px;
    margin-top: 65px;
    background-size: cover !important;
    display: block;
    position: absolute;
    transform: scale(1);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background: var(--bg-image);
    transition: transform 3s;
    transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }

  .landing-page + div .d-mt-10 {
    margin-top: 0;
    padding-top: 0;
  }

  .landing-page .motif {
    margin: auto;
    transform: translateY(-235px) scale(3) rotate(0);
  }

  .landing-page:has(.events-card-container.opened) .motif {
    transform: translateY(-100px) scale(3) rotate(180deg)
  }

  .landing-page .dubai-attractions-container .attraction-row {
    height: 116px;
  }

  .landing-page .dubai-attractions-container .attraction-row.show {
    height: 95px;
  }

}

@media (max-width: 640px) {
  
  .landing-page .mobile-featured-services-container {
    /*display: flex;*/
    display: none;
    flex-flow: column;
    gap: 8px;
    filter: drop-shadow(0px 24px 128px rgba(48, 48, 52, 0.14));
  }

  .featured-service-content div p {
    font-family: Roboto;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.75rem;
    letter-spacing: 0em;
    text-align: center;
  }

  .landing-page .eye-dubai .cloud2 {
    left: -100px !important;
  }

  .dubai-events div p {
    font-size: 1rem;
  }

  .dubai-events d-label:first-child p,
  .featured-service-content d-label:first-child p {
    margin-bottom: 1rem !important;
  }

  .landing-page .landing-common-read-more a.text d-label p,
  .landing-page .landing-common-read-more a.text {
    color: black;
  }

  html.green-weakness .landing-page .landing-common-read-more a.text,
  html.green-weakness .landing-page .landing-common-read-more a.text d-label p,
  html.dark .landing-page .landing-common-read-more a.text,
  html.dark .landing-page .landing-common-read-more a.text d-label p {
    color: white;
  }

  html.red-weakness .landing-page .landing-common-read-more a.text,
  html.red-weakness .landing-page .landing-common-read-more a.text d-label p {
    color: #E1E100;
  }

  .landing-page .eye-dubai {
    height: 245px;
    margin: 0 -20px;
  }

  .mobile-innovation-label {
    display: block;
  }

  .desktop-innovation-label {
    display: none;
  }

  .landing-page .eye-dubai .tree-45 {
    width: 202px;
    height: 195px;
    transform: translateX(-90px);
  }

  .landing-page .eye-dubai .tree-45.slide {
    transform: translateX(-161px) translateY(-15px)
  }

  .landing-page .eye-dubai .cloud1 {
    width: 178px;
    height: 118px;
  }

  .landing-page:has(.events-card-container.opened) .motif.final {
    margin-top: 0;
  }

  .landing-page .eye-dubai .tree {
    width: 250px;
    height: 200px;
    margin-top: 75px;
    transform: translateX(135px);
  }

  .landing-page .eye-dubai .tree.slide {
    transform: translateX(199px) translateY(-15px);
  }

  .landing-page .dubai-events {
    margin-top: 5rem;
  }

  .landing-page .events-card-container {
    margin-top: 16px;
  }

  .landing-page .dubai-attractions-description-container {
    margin-top: 40px;
    margin-bottom: 0;
    padding-bottom: 80px;
  }

  .landing-page .dubai-attractions-container .attraction-row.show {
    height: 75px;
  }
}

.landing-page .hero .search .search-input {
  background: white;
}

.landing-page .hero .search .portlet .input-group-inset-item-after {
  height: 24px;
}

.landing-page .dubai-filter-wrapper {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 3.53%, #FFFFFF 100%);
}

html.dark .landing-page .dubai-filter-wrapper,
html.red-weakness .landing-page .dubai-filter-wrapper,
html.green-weakness .landing-page .dubai-filter-wrapper {
  background-image: unset;
}

@media (max-width: 1390px) {
  .landing-page .featured-services-container {
    display: flex;
    justify-content: start;
    overflow-x: auto;
  }
}

@media screen and (max-width: 768px) {

  .landing-page .hero {
    height: 100vh;
    padding-bottom: 0;
  }

  .landing-page .hero .dubai {
    gap: 4px;
  }

  .section.mobile-home {
    padding-top: 100px;
  }

  .mobile-hero__welcome .text-caption {
    line-height: 14px;
    margin-bottom: 0.2rem;
  }

  .mobile-hero__welcome .text-body-14 {
    margin-top: 1rem !important;
  }

  .landing-page .cards-container .card {
    width: 335px;
    margin-bottom: 0;
    background-color: #FFFFFFCC;
  }

  .mobile-hero__welcome d-icon {
    margin-top: 0.9rem !important;
  }

  .mobile-hero__welcome .mobile-search {
    margin-top: 1.2rem !important;
    margin-bottom: 1.2rem !important;
  }

  .landing-page .mobile-cards-container.cards-container {
    gap: unset;
    margin-top: 88px !important;
  }

  .mobile-cards-container .mobile-card {
    width: 100%;
    margin-bottom: 12px;
  }

  .mobile-cards-container .mobile-card .mobile-card-img {
    max-width: unset !important;
  }

  .card-content-container .card-content .heading .text-body-1 {
    font-size: 1rem;
    line-height: 1rem;
    margin-bottom: 10px !important;
  }

  .card-content-container .card-content .sub-heading .text-body-3 {
    font-size: 0.8rem;
    line-height: 0.8rem;
    margin-bottom: 10px !important;
  }

  .card-content-container .card-content .hover-content .text-caption {
    font-size: 0.85rem;
    line-height: 1.485rem;
  }

  .card-content-container .card-content .hover-content .read-more .text-caption {
    font-size: 0.75rem;
    line-height: 1.485rem;
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .featured-service-content d-label:first-child p {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .landing-page .mobile-featured-services-container .mobile-service-card {
    min-height: 211px;
  }

  .landing-common-read-more {
    margin-top: 24px !important;
  }

  .mobile-innovation-label {
    margin-top: 80px !important;
  }

  .dubai-events d-label:first-child p, .featured-service-content d-label:first-child p {
    text-align: center;
  }

  .event-card-content .text-h5 {
    font-size: 1.125rem !important;
  }

  .landing-page .dubai-attractions-head {
    margin-top: 2rem;
  }

  .future-innovation-description .text-body-2 {
    text-align: center;
  }

  .service-card-content .text-body-14 {
    margin-bottom: 8px;
  }

  .landing-page .eye-dubai .tree {
    width: 350px;
    height: 300px;
    margin-top: 84px;
    transform: translateX(199px);
  }

  .landing-page .eye-dubai .tree-45 {
    width: 302px;
    height: 295px;
    transform: translate(-161px, 4px);
  }

  .landing-page .eye-dubai .cloud1 {
    width: 178px;
    height: 118px;
    top: -47px;
    left: -20px;
  }

  .landing-page .eye-dubai .cloud2 {
    left: 25px;
    top: -249px;
    transform: scale(0.25);
  }

  .landing-page .eye-dubai {
    overflow: hidden;
  }

  .featured-services-container .service-card-img {
    width: 240px;
    height: 240px;
  }

  .featured-services-container .service-card,
  .featured-services-container .service-card:hover {
    animation: unset !important;
  }

  .landing-page .hero-video .welcome-to {
    padding-top: 0;
    margin-top: 215px;
  }

  .landing-page .cards-container {
    display: none;
    margin-top: 150px;
    padding: 0 20px;
    transform: translateY(52px);
    z-index: 2;
    position: relative;
  }

  .landing-page .cards-container--mobile {
    display: flex;
    transform: translateY(0px);
    margin-top: -150px;
    flex-wrap: wrap;
    justify-content: center;

  }

  .landing-page .hero .hero-backdrop {
    bottom: 0;
  }

  .landing-page .hero .image-shadow {
    bottom: -1px;
  }

}

@media (max-width: 420px) {
  .featured__indicator-wrapper {
    display: flex;
  }

  .landing-page .dubai-attractions-container .attraction-row.show {
    height: 50px;
  }
}

@media (max-width: 400px) {
  .landing-page .eye-dubai .cloud2 {
    left: -250px !important;
  }
}

.header-navigation.video-landing div[slot="search"] .input-group-item .search-bar-keywords-input::placeholder,
html.dark .header-navigation.video-landing div[slot="search"] .input-group-item .search-bar-keywords-input::placeholder,
html.green-weakness .header-navigation.video-landing div[slot="search"] .input-group-item .search-bar-keywords-input::placeholder,
html.dark .header-navigation.video-landing div[slot="search"] .input-group-item .search-bar-keywords-input.black-placeholder::placeholder,
html.green-weakness .header-navigation.video-landing div[slot="search"] .input-group-item .search-bar-keywords-input::placeholder {
  color: white;
}

.header-navigation.video-landing div[slot="search"] .input-group-item .search-bar-keywords-input.black-placeholder::placeholder {
  color: #1A1A1A;
}