/* ==========================================================================
   ROOT VARIABLES
   ========================================================================== */
:root {
  --uilightcolors--darkblue: #12151b;
  --uilightcolors--white: #f4f7fc;
  --uilightcolors--mainaccentblue: #2479ff;
  --uilightcolors--lightgrey: #e1e7f4;
  --uilightcolors--grey: #79869f;
  --uilightcolors--emerald: #00d88d;
  --uilightcolors--purple: #da46ff;
  --uilightcolors--warningred: #ff0e66;
}

/* ==========================================================================
   EFFECTS
   ========================================================================== */
.effect-icon-drop-shadow {
  box-shadow: 0 0 34px #c8c8c880;
}

.effect-cards-drop-shadow {
  box-shadow: 0 0 50px #00317f33;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.text-landing-pageh1 {
  color: var(--uilightcolors--darkblue);
  text-align: center;
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 70px;
  font-weight: 700;
  line-height: 95%;
}

.text-landing-pageh2 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: Proxima Nova, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 100%;
}

.text-landing-pageh3 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: Proxima Nova, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 100%;
}

.text-landing-pagep {
  margin-top: 0;
  margin-bottom: 12px;
  font-family: Proxima Nova, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  max-width: 650px;
}

/* ==========================================================================
   BODY / LAYOUT
   ========================================================================== */
.p_body {
  background-color: var(--uilightcolors--white);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

/* ==========================================================================
   COMMON ELEMENTS
   ========================================================================== */
.mask-group {
  z-index: -2;
  object-fit: cover;
  flex: 0 auto;
  justify-content: center;
  align-self: stretch;
  align-items: stretch;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: 0%;
}

/* Navigation styles */
.m_navbar {
  grid-column-gap: 24px;
  width: 100%;
  max-width: 1440px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 20px;
}

.m_navigation {
  display: flex;
  grid-column-gap: 24px;
}

.a_navlink {
  color: var(--uilightcolors--white);
  font-family: Proxima Nova, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
  padding: 5px 0;
}

.a_navlink:after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--uilightcolors--lightgrey);
  transition: width 0.3s ease;
}

.a_navlink:hover {
  color: var(--uilightcolors--lightgrey);
}

.a_navlink:hover:after {
  width: 100%;
}

.a_logo {
  grid-column-gap: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 250px;
  text-decoration: none;
  display: flex;
}

.metasafe-logo-icon {
  object-fit: cover;
}

.metasafe-logotype {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 201.046px;
  height: 20.56px;
  text-decoration: none;
  display: flex;
}

/* Button Styles */
.a_button {
  grid-column-gap: 12px;
  border: 1px undefined undefined;
  background-image: linear-gradient(-71.86deg, #0edbff, #0e6bff);
  border-radius: 16px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 16px 40px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 0 20px #ffffffb3;
  transition: all 0.3s ease;
  position: relative;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: inset 0 0 20px #ffffffb3, 0 0 0 0 rgba(14, 107, 255, 0.4);
  }
  70% {
    box-shadow: inset 0 0 20px #ffffffb3, 0 0 0 10px rgba(14, 107, 255, 0);
  }
  100% {
    box-shadow: inset 0 0 20px #ffffffb3, 0 0 0 0 rgba(14, 107, 255, 0);
  }
}

.a_button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: inset 0 0 25px #ffffffcc, 0 10px 20px rgba(14, 107, 255, 0.2);
  filter: brightness(1.05);
}

.a_button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 0 15px #ffffff80, 0 5px 10px rgba(14, 107, 255, 0.2);
  filter: brightness(0.98);
}

.button-label {
  color: var(--uilightcolors--white);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.a_button:hover .button-label {
  transform: scale(1.02);
}

.a_button--light {
  grid-column-gap: 12px;
  border: 1px undefined undefined;
  background-image: linear-gradient(270deg, #89b7ff, #f0f6ff);
  border-radius: 16px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  margin-left: 60px;
  padding: 20px 40px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 0 20px #ffffffb3;
  transition: all 0.3s ease;
  position: relative;
}

.a_button--light:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: inset 0 0 25px #ffffffcc, 0 10px 20px rgba(137, 183, 255, 0.2);
  filter: brightness(1.03);
}

.a_button--light:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 0 15px #ffffff80, 0 5px 10px rgba(137, 183, 255, 0.2);
  filter: brightness(0.98);
}

.button-label-2 {
  color: #12151b;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.a_button--light:hover .button-label-2 {
  transform: scale(1.02);
}

/* Social Icons */
.m_socials {
  grid-column-gap: 24px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.a_icon--social {
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  text-decoration: none;
  display: flex;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.a_icon--social:hover {
  transform: translateY(-3px) scale(1.1);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.a_icon--social:active {
  transform: translateY(1px) scale(0.95);
}

/* Images and Icons */
.iphone-16-plus-light {
  object-fit: cover;
}

.a_image--check--wrapper{
  position: absolute;
  bottom: -100px;
  left: 0;
  width: 100%;
  background: red;
}

.a_image--check--wrapper:after{
  margin: 0 auto;
  content: "";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0px -24px 60px 6px #22262D;
  border-radius: 10px;
  background: transparent;
}

.a_image--check {
  position: relative;
  width: 100%;
  max-width: 210px;
  animation: fadeInUpImage2 400ms ease-out forwards;
  animation-delay: 400ms;
  opacity: 0;
  transform: translateY(100%);
  will-change: opacity, transform;
}

.a_image--check--right{
  animation: fadeInUpImage2 400ms ease-out forwards;
  animation-delay: 800ms;
  opacity: 0;
  transform: translateY(100%);
  will-change: opacity, transform;
}
.a_image--working {
  max-width: 240px;
  position: absolute;
  z-index: 1;
  inset: auto 0 -22% 30%;
  animation: fadeInUpImage 400ms ease-out;
  will-change: opacity, transform;
}
@keyframes fadeInUpImage {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeInUpImage2 {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(60px);
  }
}


.a_icon--fraud {
  object-fit: contain;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  margin-left: 24px;
  text-decoration: none;
  display: flex;
  transition: transform 0.4s ease;
}

.shield-2 {
  mix-blend-mode: darken;
  object-fit: cover;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.o_herosection-copy {
  z-index: 0;
  grid-row-gap: 24px;
  object-fit: fill;
  background-image: linear-gradient(#22262d, #203d6a);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 1060px;
  max-height: 1080px;
  padding-top: 60px;
  padding-bottom: 60px;
  display: flex;
  position: relative;
}

.m_herocontent {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.a_heroheading {
  color: var(--uilightcolors--white);
  text-align: center;
  letter-spacing: -.01em;
  flex: none;
  align-self: stretch;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 70px;
  font-weight: 700;
  line-height: 95%;
  text-decoration: none;
  animation: fadeInUp 1s ease-out;
}

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

.a_herosubtitle {
  color: #2479ff;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.a_herobody {
  color: #f4f7fc;
  text-align: center;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
}

.a_herobody.text-landing-pagep {
  color: var(--uilightcolors--lightgrey);
  width: 100%;
  max-width: 800px;
}

.m_screenshots {
  grid-column-gap: 180px;
  grid-row-gap: 180px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  position: absolute;
  inset: 12px 0% -71%;
}

.m_screenshots-copy {
  grid-column-gap: 180px;
  grid-row-gap: 180px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  position: absolute;
  inset: auto auto 0%;
}

.m_imagessection {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  max-height: 360px;
  display: flex;
}

/* ==========================================================================
   WHY SECTION
   ========================================================================== */
.o_whysection {
  grid-row-gap: 44px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  padding: 140px 60px 60px;
  text-decoration: none;
  display: flex;
}

.a_heading--why {
  color: #12151b;
  text-align: center;
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 70px;
  font-weight: 700;
  line-height: 95%;
  text-decoration: none;
  max-width: 740px;
}

.a_heading--why.text-landing-pageh1 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.m_cardswrapper {
  grid-column-gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.m_card {
  z-index: -100;
  grid-row-gap: 20px;
  background-color: #2479ff;
  background-image: linear-gradient(202deg, #c9daf59c, #fff 29%, #fff);
  border: 1px solid #d2ddf3;
  border-radius: 28px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 510px;
  padding: 40px 20px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}

.m_card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 49, 127, 0.15);
  border-color: #a8bce0;
}

.m_card:hover .a_cardtitle {
  transform: scale(1.02);
}

.m_card:hover .a_icon--fraud {
  transform: translateY(-5px) rotate(5deg);
}

.m_card.effect-cards-drop-shadow {
  grid-row-gap: 32px;
  background-image: linear-gradient(202deg, #ffffff9c, #ecf2fc 29%, #fff);
}

.m_card.effect-cards-drop-shadow:where(.w-variant-f355b80f-c15c-11e3-12f9-28f0bee6554c) {
  height: 430px;
}

.subtract {
  z-index: -9;
  border-style: solid;
  border-width: undefinedpx;
  object-fit: cover;
  border-color: #e1e7f4;
  position: absolute;
  inset: auto 0% 0%;
}

.subtract:where(.w-variant-f355b80f-c15c-11e3-12f9-28f0bee6554c) {
  inset: 72px 0% 0%;
}

.a_cardtitle {
  color: var(--uilightcolors--mainaccentblue);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
}

.a_carddescription {
  color: var(--uilightcolors--grey);
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
}

/* ==========================================================================
   FEATURES SECTION
   ========================================================================== */
.o_features {
  grid-column-gap: 32px;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding: 100px 0 100px 60px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.m_allfeature {
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 665px;
  text-decoration: none;
  display: flex;
}

.a_heading--features {
  color: var(--uilightcolors--darkblue);
  letter-spacing: -.01em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 70px;
  font-weight: 700;
  line-height: 95%;
  text-decoration: none;
  text-align: left;
}

.m_featurewrapper {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.m_content {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.a_text--featuretitle {
  color: var(--uilightcolors--mainaccentblue);
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 100%;
  text-decoration: none;
}

.a_text--featuredescription {
  color: var(--uilightcolors--grey);
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
}

.m_left {
  object-fit: contain;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 50%;
  text-decoration: none;
  display: flex;
  inset: auto -10% auto auto;
}
.m_left-mobile{
  display: none;
}
/* ==========================================================================
   HOW IT WORKS SECTION
   ========================================================================== */
.o_howitworks {
  z-index: 0;
  grid-row-gap: 44px;
  background-color: var(--uilightcolors--mainaccentblue);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100%;
  max-height: 880px;
  padding-top: 0px;
  padding-bottom: 100px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
  margin-left: calc(-50vw + 50%);
  left: 0;
  right: 0;
}
.o_howitworks_container{
  display: flex;
  width: 100%;
  padding-top: 80px;
  justify-content: center;
}
.a_backgroundimage {
  z-index: -2;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1920px;
  height: 879px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: 0%;
}

.m_howcontent {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  width: 100%;
  max-width: 1440px;
  display: flex;
}

.m_workingheader {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
  text-decoration: none;
  display: flex;
}
.a_text--heading {
  color: #f4f7fc;
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 70px;
  font-weight: 700;
  line-height: 95%;
  text-decoration: none;
}

.a_text--subtitle {
  color: #f4f7fc;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 36px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.m_contentwrapper {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
  text-decoration: none;
  display: flex;
  position: static;
  overflow: visible;
}

.m_rightwrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  max-width: 1057px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;;
}
.tg-button-wrapper{
  display: flex;
  width: 100%;
  padding: 0 10px;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.next-button-design{
  display: flex;
  padding: 40px 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 50%;
  border: 1px solid #F4F7FC;
  cursor: pointer;
}
.next-button-design img {
  width: 20px;
  height: 16px;
}
/*.background {
  z-index: 2;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 338px;
  height: 100%;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: 0% 0% 0% auto;
}

/* Steps */
.m_stepsscrollbar {
  width: 100%;
  position: static;
  overflow: clip;
}
.m_stepsscrollbar .mySwiper {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  padding: 0 10px;
  margin-top: 10px;
}
.m_stepsscrollbar .mySwiper::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  top: 10px;
  right: -1px;
  bottom: 10px;
  box-shadow: 40px 1px 180px 170px #2479FF;
  border-radius: 10px;
  z-index: 999;
}

.m_steplist {
  box-sizing: content-box;
  justify-content: flex-start;
  align-items: center;
  width: 150%;
  padding-left: 32px;
  padding-right: 32px;
  text-decoration: none;
  display: flex;
  overflow: auto;
}

.m_stepnumber {
  grid-row-gap: 10px;
  aspect-ratio: 1;
  background-color: #e1e7f4;
  border: 2px solid #2479ff;
  border-radius: 9999px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  padding-top: 3px;
  text-decoration: none;
  display: flex;
}

.a_stepnumber.text-landing-pageh2 {
  color: var(--uilightcolors--mainaccentblue);
  font-weight: 700;
}

.m_stepcontent {
  grid-row-gap: 24px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.a_steptitle {
  color: #12151b;
  flex: none;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 36px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.a_stepdescription.text-landing-pagep {
  color: var(--uilightcolors--white);
  margin-bottom: 0;
}

/* ==========================================================================
   BUILDING TRUST SECTION
   ========================================================================== */
.o_buildingtrust {
  grid-row-gap: 44px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  padding: 180px 60px 60px;
  text-decoration: none;
  display: flex;
}

/* ==========================================================================
   GET STARTED SECTION
   ========================================================================== */
.o_getstarted {
  grid-row-gap: 26px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  align-content: center;
  padding-bottom: 100px;
  text-decoration: none;
  display: flex;
}

.a_text--getstarted.text-landing-pageh2 {
  color: var(--uilightcolors--mainaccentblue);
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
.o_faqsection {
  flex: 1;
  width: 100vw;
  display: flex;
  position: relative;
  background: url("../images/faqs-bg.png") no-repeat;
  background-size: 100%;
}

.m_wrapper {
  grid-column-gap: 40px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 100px;
  padding-left: 60px;
  padding-right: 60px;
  text-decoration: none;
  display: flex;
  margin-top: -80px;
}

.left {
  grid-row-gap: 35px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 358px;
  text-decoration: none;
  display: flex;
}

.right {
  grid-row-gap: 60px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.a_text--faqtitle {
  color: #12151b;
  letter-spacing: -.01em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 70px;
  font-weight: 700;
  line-height: 95%;
  text-decoration: none;
}

.a_text--faqtitle.text-landing-pageh1 {
  color: var(--uilightcolors--darkblue);
  text-align: left;
}

.a_text--faqsubtitle {
  color: var(--uilightcolors--grey);
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
}

/* FAQ Items */
.faqs {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.m_faq {
  grid-row-gap: 10px;
  background-color: var(--uilightcolors--white);
  border: 1px solid #D2DDF3!important;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 32px 24px;
  text-decoration: none;
  display: flex;
  cursor: pointer;
  transition: all 0.3s ease;
}
.right .m_faq:focus {
  outline: unset;
  outline-offset: unset;
}
.m_faq:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 49, 127, 0.08);
}

.m_faq.effect-icon-drop-shadow {
  justify-content: center;
  align-items: flex-start;
}

.m_faq.effect-icon-drop-shadow:where(.w-variant-cce90593-ef51-27cf-121b-43c82aa0d2de) {
  grid-row-gap: 0px;
  justify-content: center;
  align-items: flex-start;
}

.faq-top {
  grid-column-gap: 8px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: relative;
}

/* .faq-top:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  border-bottom: 2px solid var(--uilightcolors--mainaccentblue);
  border-right: 2px solid var(--uilightcolors--mainaccentblue);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s ease;
} */

.m_faq[data-wf--m_faq--variant="open"] .faq-top:after {
  transform: translateY(-50%) rotate(-135deg);
}

.a_faqtitle {
  color: #12151b;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
}

.a_faqtitle.text-landing-pageh2 {
  color: var(--uilightcolors--darkblue);
  font-size: 32px;
  font-weight: 600;
}

.faq-answer {
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-left: 28px;
  text-decoration: none;
  display: flex;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.m_faq[data-wf--m_faq--variant="open"] .faq-answer {
  max-height: 500px;
  opacity: 1;
  transition: max-height 0.5s ease-in, padding 0.3s ease, opacity 0.3s ease;
}

.a_faqanswer.text-landing-pagep {
  color: var(--uilightcolors--grey);
  margin-bottom: 0;
}

.a_faqanswer.text-landing-pagep:where(.w-variant-cce90593-ef51-27cf-121b-43c82aa0d2de) {
  display: none;
}

/* Contact Support */
.m_contactsupport {
  grid-row-gap: 12px;
  border: 1px dashed var(--uilightcolors--grey);
  opacity: 1;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 26px 30px;
  text-decoration: none;
  display: flex;
}
.m_contactsupport p{
  margin-bottom: unset;
}
.a-text--link {
  color: var(--uilightcolors--mainaccentblue);
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
}

/* Background Images */
.image2 {
  z-index: -2;
  position: absolute;
  inset: 0% auto 0% 0%;
  max-width: 50%;
  height: 100%;
}

.image {
  z-index: -2;
  position: absolute;
  inset: 0% 0% 0% auto;
  max-width: 50%;
  height: 100%;
}

/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */
.o_footer {
  background-image: linear-gradient(#22262d, #203d6a);
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 60px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.m_footercontent {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
  gap: 20px;
}

.m_footercontent_first{
  display: flex;
  width: 60%;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .m_footercontent_first{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-direction: column-reverse;
  }
  .m_footer-links{
    width: 100%;
  }
  .next-button-design{
    display: flex;
    padding: 12px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50%;
    border: 1px solid #F4F7FC;
    cursor: pointer;
  }
  .next-button-design img {
    width: 20px;
    height: 16px;
  }
  .m_workingheader {
    align-items: center;
  }
  .a_copyright{
    max-width: 150px;
  }
  }
.a_text--footer {
  color: #f4f7fc;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
}

/* Footer navigation styles */
.m_footer-links {
  display: flex;
  flex-direction: column;
  grid-row-gap: 20px;
}

.m_footer-nav {
  display: flex;
  grid-column-gap: 24px;
}

.a_footer-link {
  color: var(--uilightcolors--lightgrey);
  font-family: Proxima Nova, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.3s ease;
}

.a_footer-link:hover {
  color: var(--uilightcolors--white);
}

.m_footer-secondary {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
}

.a_copyright {
  color: var(--uilightcolors--grey);
  font-family: Proxima Nova, sans-serif;
  font-size: 14px;
  margin-bottom: unset;
}

.m_legal-links {
  display: flex;
  grid-column-gap: 16px;
}

.a_legal-link {
  color: var(--uilightcolors--grey);
  font-family: Proxima Nova, sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.a_legal-link:hover {
  color: var(--uilightcolors--lightgrey);
}

/* ==========================================================================
   MEDIA QUERIES - WIDE DESKTOP
   ========================================================================== */
@media screen and (min-width: 1920px) {
  .m_herocontent {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .a_image--check {
    max-width: 280px;
  }

  .a_image--working {
    max-width: 360px;
  }

  .o_herosection-copy {
    grid-row-gap: 40px;
    height: 1300px;
    max-height: 1400px;
    width: 100%;
    max-width: 100%;;
  }

  .m_screenshots {
    grid-column-gap: 290px;
    grid-row-gap: 290px;
    margin-left: 0;
    margin-right: 0;
    position: absolute;
    top: auto;
  }

  .o_faqsection {
    width: 100%;
  }

  .m_imagessection {
    max-width: 1900px;
    margin-bottom: 5%;
    padding-bottom: 60px;
  }

  .m_screenshots-copy {
    grid-column-gap: 290px;
    grid-row-gap: 290px;
    margin-left: 0;
    margin-right: 0;
    position: absolute;
    top: auto;
  }
  .o_whysection{
    padding: 60px;
  }
}

/* ==========================================================================
   MEDIA QUERIES - TABLET
   ========================================================================== */
@media screen and (max-width: 991px) {
  .a_herobody.text-landing-pagep {
    padding-left: 32px;
    padding-right: 32px;
  }

  .iphone-16-plus-light {
    object-fit: contain;
    width: 100%;
    max-width: 200px;
    max-height: 400px;
  }

  .o_whysection {
    flex-flow: wrap;
    padding-left: 24px;
    padding-right: 24px;
  }

  .m_cardswrapper {
    grid-row-gap: 24px;
    flex-flow: column;
  }

  .subtract:where(.w-variant-f355b80f-c15c-11e3-12f9-28f0bee6554c) {
    width: 100%;
  }

  .o_features {
    flex-flow: column-reverse;
    padding-left: 0;
  }
  .m_allfeature{
    max-width: unset;
    padding: 50px 24px 0;
  }
  .m_left {
    max-width: 100%;
    position: static;
    display: none;
  }
  .m_left-mobile {
    width: 100%;
    max-width: 100%;
    display: flex;
    position: static;
  }

  .o_howitworks {
    max-height: none;
  }

  .m_contentwrapper {
    flex-flow: column;
  }

  .background {
    padding-right: 0;
  }

  .a_button--light {
    z-index: 20;
    margin-left: unset;
    margin-right: unset;
    position: relative;
  }

  .button-label-2 {
    flex: none;
    align-self: auto;
  }

  .m_howcontent {
    flex-flow: column;
  }

  .m_stepsscrollbar {
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .o_getstarted {
    max-width: 800px;
  }

  .m_wrapper {
    grid-row-gap: 24px;
    flex-flow: column;
    padding-bottom: 60px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .left {
    max-width: 100%;
  }

  .right {
    grid-row-gap: 32px;
  }

  .o_footer {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .m_footercontent {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .m_rightwrapper {
    justify-content: center;
    align-items: flex-start;
  }
  .o_faqsection{
    background: var(--uilightcolors--white);
  }
}

/* ==========================================================================
   MEDIA QUERIES - MOBILE
   ========================================================================== */
@media screen and (max-width: 479px) {
  .text-landing-pageh1 {
    text-align: center;
    font-size: 32px;
  }

  .a_logo {
    justify-content: center;
    align-self: auto;
    align-items: center;
    max-width: 150px;
  }

  .metasafe-logo-icon {
    object-fit: contain;
    width: 90%;
    max-width: 80%;
  }

  .metasafe-logotype {
    object-fit: contain;
    width: auto;
    max-width: none;
    height: auto;
  }

  .a_heroheading.text-landing-pageh1 {
    font-size: 40px;
  }

  .a_herosubtitle.text-landing-pageh3 {
    color: var(--uilightcolors--mainaccentblue);
    padding-left: 24px;
    padding-right: 24px;
    font-size: 22px;
  }

  .a_herobody.text-landing-pagep {
    padding-left: 24px;
    padding-right: 24px;
    font-size: 18px;
    line-height: 120%;
  }

  .button-label {
    flex: none;
  }

  .iphone-16-plus-light {
    max-width: 160px;
    height: auto;
    max-height: none;
  }

  .a_image--check {
      width: 100%;
      max-width: 180px;;
  }

  .a_image--working {
    max-width: 210px;
    left: 22%;
  }

  .o_herosection-copy {
    grid-row-gap: 16px;
    padding:16px;
    height: 1000px;
    width: 100%;
    max-width: 100%;
  }

  .m_screenshots {
    grid-column-gap: 150px;
    grid-row-gap: 150px;
    width:100%;
    justify-content: center;
    align-items: self-end;
  }

  .o_whysection {
    padding: 120px 20px 40px;
  }

  .a_heading--why.text-landing-pageh1 {
    text-align: left;
    font-size: 40px;
  }

  .m_cardswrapper {
    flex: 1;
  }

  .m_card.effect-cards-drop-shadow {
    padding-top: 40px;
  }

  .subtract {
    object-fit: none;
    inset: 70px 0% 0%;
  }

  .subtract:where(.w-variant-f355b80f-c15c-11e3-12f9-28f0bee6554c) {
    object-fit: contain;
    top: 5px;
  }

  .a_icon--fraud {
    margin-left: 0;
  }

  .a_cardtitle.text-landing-pageh2:where(.w-variant-f355b80f-c15c-11e3-12f9-28f0bee6554c) {
    font-size: 32px;
  }

  .a_carddescription.text-landing-pagep:where(.w-variant-f355b80f-c15c-11e3-12f9-28f0bee6554c) {
    font-size: 18px;
  }
  .m_allfeature{
    padding-left: 16px;
  }
  .o_features {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    padding: 0 0 60px;
  }

  .a_heading--features.text-landing-pageh1 {
    text-align: left;
    font-size: 40px;
  }

  .a_text--featuretitle.text-landing-pageh2 {
    font-size: 32px;
  }

  .a_text--featuredescription.text-landing-pagep {
    font-size: 18px;
  }

  .m_left {
    display: none;
  }
  .m_left-mobile {
    width: 100%;
    max-width: 100%;
    display: flex;
    position: static;
  }
  .o_howitworks {
    padding-bottom: 20px;
    margin: unset;
  }

  .m_workingheader {
    padding-left: 20px;
    padding-right: 20px;
    align-items: center;
  }
  .o_howitworks_container{
    padding: 60px 0;
  }
  .a_text--heading {
    font-size: 40px;
  }

  .a_text--subtitle {
    font-size: 22px;
  }

  .m_contentwrapper {
    padding-left: 0;
    padding-right: 0;
  }

  .m_steplist {
    flex-flow: column;
    padding-left: 0;
    padding-right: 0;
  }

  .m_stepnumber {
    width: 40px;
    height: 40px;
  }

  .m_stepcontent {
    grid-row-gap: 8px;
  }

  .a_steptitle {
    font-size: 32px;
  }

  .background {
    display: none;
  }

  .a_stepdescription.text-landing-pagep {
    font-size: 18px;
  }

  .o_buildingtrust {
    padding: 60px 16px;
  }

  .o_getstarted {
    grid-row-gap: 16px;
    padding-bottom: 60px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .shield-2 {
    aspect-ratio: 1;
    object-fit: contain;
    width: 100%;
    max-width: 50%;
    height: auto;
    max-height: none;
  }

  .a_text--getstarted.text-landing-pageh2 {
    font-size: 22px;
  }

  .m_wrapper {
    padding: 40px 16px 60px;
  }

  .left {
    grid-row-gap: 24px;
  }

  .a_text--faqtitle.text-landing-pageh1 {
    font-size: 40px;
  }

  .a_text--faqsubtitle {
    font-size: 17px;
  }

  .a_text--faqsubtitle.text-landing-pagep {
    font-size: 18px;
  }

  .right {
    grid-row-gap: 30px;
  }

  .m_faq.effect-icon-drop-shadow {
    padding: 16px 12px;
  }

  .a_faqtitle.text-landing-pageh2 {
    font-size: 20px;
  }

  .faq-answer {
    padding-left: 0;
  }

  .m_contactsupport {
    padding: 12px;
  }

  .a-text--link {
    font-size: 18px;
  }

  .a_faqanswer.text-landing-pagep {
    font-size: 16px;
  }

  .o_footer {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .a_text--footer.text-landing-pageh2 {
    text-align: left;
    font-size: 22px;
    font-weight: 600;
  }

  .m_footercontent {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    text-align: left;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: 16px;
    padding-right: 16px;
  }

  .a_stepnumber.text-landing-pageh2 {
    font-size: 32px;
  }

  .m_rightwrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .m_step-copy {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    width: 320px;
    max-width: 330px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .m_screenshots-copy {
    grid-column-gap: 150px;
    grid-row-gap: 150px;
    justify-content: center;
    align-items: flex-start;
  }
  .m_stepsscrollbar .mySwiper::after {
    content: unset;
  }
}
.link-telegram{
  color: #f4f7fc;
}
.link-telegram:focus{
  color: #f4f7fc;
  outline: unset;
  outline-offset: unset;}

.swiper-wrapper{
  width: 110%;
  display: flex;
  padding-left: 20px;
  padding-right: 20px;
}
.swiper-backface-hidden .swiper-slide {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  padding: 24px;
  display: flex;
}

@media screen and (min-width: 1024px) {
  .swiper-backface-hidden .swiper-slide:hover {
    background: #e2ecfd;
    border-radius: 30px;
    cursor: pointer;
  }

  .swiper-backface-hidden .swiper-slide:hover .a_steptitle {
    color: var(--uilightcolors--mainaccentblue);
  }

  .swiper-backface-hidden .swiper-slide:hover .a_stepdescription.text-landing-pagep {
    color: #74809c;
  }

  .swiper-backface-hidden .swiper-slide:hover .a_stepdescription.text-landing-pagep .link-telegram {
    color: #0073ff;
  }
}