@font-face {
  font-family: "Poppins medium";
  src: url("../../public/fonts/Poppins-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Poppins mediumbold";
  src: url("../../public/fonts/Poppins-Medium.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Poppins semibold";
  src: url("../../public/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Poppins bold";
  src: url("../../public/fonts/Poppins-Bold.ttf") format("truetype");
  font-display: swap;
}

html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none !important;
  color: unset;
}

p {
  margin: 0;
}

ul {
  list-style: none !important;
}

h1,
h2,
h3,
h4 {
  margin: 0;
}

button {
  padding: 0;
  background-color: unset;
}

::-webkit-scrollbar {
  display: none;
}

:root {
  --primary: #ff6700;
  --secundary: #021628;
  --white: #fff;
  --grey: #606c77;
  --black: #000;
  --text-sx: clamp(11px, 0.833vw, 25px);
  --text-sm: clamp(14px, 1.09vw, 30px);
  --text-md: clamp(12px, 1.25vw, 34px);
  --text-lg: clamp(30px, 4.17vw, 120px);
  --text-lg2: clamp(40px, 5.21vw, 140px);
}

.mob {
  display: none !important;
}

/* header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 11.67%;
  z-index: 30;
  display: flex;
  justify-content: center;
}

.header-container {
  width: 89.58%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.nav1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 16.87%;
  height: 30%;
}

.nav1 > a {
  color: var(--secundary);
  font-family: "Poppins medium";
  font-size: var(--text-sx);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.32px;
  transition: scale 0.3s ease;
}

.nav1 > a:hover {
  scale: 1.1;
  transition: scale 0.3s ease;
}

.header-container > a {
  width: 8.63%;
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.header-container > a > img {
  width: 100%;
  height: 100%;
}

.nav2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 23%;
  height: 30%;
  gap: 12%;
}

.nav2 > a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 47%;
  gap: 5%;
  cursor: pointer;
}

.nav2 > a > p {
  color: var(--secundary);
  font-family: "Poppins medium";
  font-size: var(--text-sx);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.32px;
}

.nav2 > .selected {
  width: 47%;
  height: 100%;
  background-color: var(--primary);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: scale 0.3s ease;
}

.nav2 > .selected:hover {
  scale: 1.1;
  transition: scale 0.3s ease;
}

.nav2 > .selected p {
  color: var(--white);
}

.nav2 button {
  width: 10%;
  height: auto;
  cursor: pointer;
  border: none;
  background: transparent;
}

.nav2 button svg {
  width: 100%;
  height: auto;
}
/* header end */

.menu-mob {
  display: none;
}

/* home */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #ffffff !important;
  overflow: visible;
}

.bg-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #fff;
}
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.hero-background img {
  width: 100%;
  height: 100%;
}

.bg2-hero {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 75%;
  height: auto;
  object-fit: cover;
  z-index: 2;
  opacity: 0.6;
  mix-blend-mode: hue;
}

.bg-ellipse {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 72.19%;
  height: auto;
  object-fit: cover;
  z-index: 10;
}

.bg-ellipse-desk {
  width: 72%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
}

.background-blur {
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 25%;
    height: 40%;
    border-radius: 786px;
    background: #FF9F5C;
    filter: blur(50px);
    z-index: 15;
}

.hero-content {
  position: relative;
  z-index: 15;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.hc-title {
  position: absolute;
  width: 100%;
  height: 36.2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 11%;
  padding-top: 4%;
}

.hc-title > h1 {
  width: 45%;
  color: var(--secundary);
  text-align: center;
  font-family: "Poppins medium";
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}

.hc-title > h1 span {
  color: var(--secundary);
  text-align: center;
  font-family: "Poppins semibold";
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
}

.hc-title p {
  color: #717171;
  text-align: center;
  font-family: "Poppins medium";
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.hc-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 18.44%;
  height: 12.28%;
}

.hc-btn-google {
  height: 100%;
  width: 50.28%;
  border-radius: 100px;
  background-color: var(--secundary);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: none;
  gap: 5.9%;
  transition: scale 0.3s ease;
}

.hc-btn-google:hover {
  scale: 1.05;
  transition: scale 0.3s ease;
}

.hc-btn-google img {
  width: 13.48%;
  height: auto;
}

.hc-btn-google h3 {
  color: var(--white);
  font-family: "Poppins semibold";
  font-size: clamp(11px, 0.833vw, 25px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.hc-btn-apple {
  height: 100%;
  width: 46.33%;
  border-radius: 100px;
  background-color: var(--secundary);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: none;
  gap: 7.32%;
  transition: scale 0.3s ease;
}

.hc-btn-apple:hover {
  scale: 1.05;
  transition: scale 0.3s ease;
}

.hc-btn-apple img {
  width: 14.63%;
  height: auto;
}

.hc-btn-apple h3 {
  color: var(--white);
  font-family: "Poppins semibold";
  font-size: clamp(11px, 0.833vw, 25px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.hero-content > h2 {
  position: absolute;
  bottom: -10%;
  color: var(--secundary);
  text-align: center;
  font-family: "Poppins medium";
  font-size: clamp(50px, 20vw, 600px);
  font-style: normal;
  font-weight: 400;
}

.pin-spacer {
  pointer-events: none;
}

#container3D {
  height: 100%;
  width: 100%;
  position: relative;
  pointer-events: none;
  z-index: 100;
}

#container3D canvas {
  position: absolute;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
}

.feed-event {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.feed-event > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
}

.fe-title {
  position: relative;
  width: 70%;
  height: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fe-title h2 {
  color: var(--secundary);
  text-align: center;
  font-family: "Poppins medium";
  font-size: clamp(40px, 14.58vw, 400px);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

#title-explore {
  opacity: 1;
}

.fe-title p {
  color: #717171;
  font-family: "Poppins medium";
  font-size: var(--text-sx);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.fe-navbar {
  position: relative;
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  z-index: 2;
  margin-top: 4%;
  margin-bottom: -4%;
}

.fe-nav-content {
  width: 32%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.fe-nav-content button {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  color: var(--grey);
  font-family: "Poppins semibold";
  font-size: var(--text-sx);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  cursor: pointer;
  border-radius: 100px;
}

.fe-nav-content .selected {
  color: var(--white);
  background-color: var(--secundary);
}

.phone-background {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 58.33%;
  width: 20%;
  background-color: var(--white);
  z-index: 2;
}

.phone-background img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.sw-container {
  width: 100%;
  overflow: hidden;
}

.sw-wrapper1 {
  width: fit-content;
  height: 50vh !important;
  /*margin-left: 5.7vw;*/
  display: flex;
}

.swiper-slide.sw-slide1 {
  display: flex;
  justify-content: center;
 /* transition: all 3s ease; */
  width: 32vh !important;
  height: 100% !important;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}

.sw-slide1 {
  width: 20vw !important;
  opacity: 0.6;
  transition: all 3s ease;
}

.swiper-slide-active {
  opacity: 1;
}

.sw-slide1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10% 10% 0 0;
  /*
  transition: transform 2s ease-in-out;
  transform: scale(0.9);
  transform-origin: center bottom;
  */
}

/*
.sw-slide1.swiper-slide-active img {
  transform: scale(1);
}*/

.swiper-slide1-main0 {
  transition: all 3s ease;
}

.swiper-slide1-main1,
.swiper-slide1-main5 {
  margin-top: 5vh;
  transition: all 3s ease;
}

.swiper-slide1-main2,
.swiper-slide1-main4 {
  margin-top: 10vh;
  transition: all 3s ease;
}

.swiper-slide1-main3 {
  margin-top: 13vh;
  transition: all 3s ease;
}

.map-explore {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.map-explore > img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: fill;
  z-index: 1;
}

.map-explore h2 {
  position: relative;
  width: 45%;
  color: var(--secundary);
  text-align: center;
  font-family: "Poppins medium";
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  z-index: 2;
}

.map-explore h2 span {
  font-weight: 600;
  font-family: "Poppins semibold";
}

.map-explore > p {
  color: #717171;
  font-family: "Poppins medium";
  font-size: var(--text-sx);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  position: relative;
  z-index: 2;
  margin-top: 1%;
}

.me-content {
  position: relative;
  width: 100%;
  height: 64%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  mix-blend-mode: darken;
  z-index: 2;
}

.me-content > div {
  position: relative;
  height: 79.78%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.review1 {
  display: none;
  top: 36%;
  left: 27%;
  position: absolute;
  width: 12%;
  height: auto;
  z-index: 6;
  scale: 0.6;
}

.review2 {
  display: none;
  top: 4%;
  left: 36.5%;
  position: absolute;
  width: 12%;
  height: auto;
  z-index: 6;
  scale: 0.6;
}

.review3 {
  display: none;
  top: 13%;
  right: 35.5%;
  position: absolute;
  width: 12%;
  height: auto;
  z-index: 6;
  scale: 0.6;
}

.review4 {
  display: none;
  top: 50%;
  right: 26.8%;
  position: absolute;
  width: 12%;
  height: auto;
  z-index: 6;
  scale: 0.6;
}

.me-text1 {
  position: absolute;
  top: 32%;
  left: 15%;
  height: 15.21%;
  display: flex;
  width: 10.57%;
  flex-direction: column;
  align-items: flex-end;
}

.me-text1 h3 {
  color: var(--secundary);
  text-align: right;
  font-family: "Poppins bold";
  font-size: clamp(10px, 0.73vw, 23px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.me-text1 p {
  width: 83%;
  color: var(--grey);
  text-align: right;
  font-family: "Poppins medium";
  font-size: clamp(10px, 0.73vw, 23px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.arrow1 {
  position: absolute;
  left: 25%;
  top: 50%;
  height: 29.06%;
  width: auto;
}

.me-text2 {
  position: absolute;
  top: 23%;
  right: 16.4%;
  height: 18.29%;
  display: flex;
  width: 10.57%;
  flex-direction: column;
}

.me-text2 h3 {
  color: var(--secundary);
  font-family: "Poppins semibold";
  font-size: clamp(10px, 0.73vw, 23px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.me-text2 p {
  width: 94%;
  color: var(--grey);
  font-family: "Poppins medium";
  font-size: clamp(10px, 0.73vw, 23px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.arrow2 {
  position: absolute;
  top: 46%;
  right: 26.5%;
  height: 29.06%;
  width: auto;
}

.me-img-map {
  position: absolute;
  width: 53.55%;
  height: 95.4%;
  z-index: 5;
  bottom: 10%;
  left: 0;
  right: 0;
  margin: auto;
  --effort: 6;
  --quality: 100%;
}

.me-img-phone {
  position: absolute;
  width: 53.55%;
  height: 26.6%;
  bottom: 0;
}

.testimonials {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("../../public/img/backgrounds-web/bg-3.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.testimonials > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
}

.testimonials > h2 {
  position: relative;
  width: 56%;
  color: var(--secundary);
  text-align: center;
  font-family: "Poppins medium";
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  z-index: 2;
}

.testimonials > h2 span {
  font-weight: 600;
  font-family: "Poppins semibold";
}

.testimonials > p {
  position: relative;
  margin: 2% 0 4% 0;
  color: var(--grey);
  text-align: center;
  font-family: "Poppins medium";
  font-size: var(--text-md);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  z-index: 2;
}

.tes-content {
  position: relative;
  width: 100%;
  height: 35%;
  z-index: 2;
}

.tes-content > div {
  width: 135%;
  height: 90%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.test-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4%;
  width: 100%;
  height: 100%;
  padding-bottom: 5%;
  background-color: var(--white);
  border-radius: 24px;
  box-shadow: 0px 2px 21px 0px rgba(96, 108, 119, 0.15);
}

.swiper-slide-test1,
.swiper-slide-test3 {
  opacity: 0.6;
}

.swiper-slide-test2,
.swiper-slide-test4 {
  opacity: 1;
}

.tes-card-profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4.82%;
  width: 88.61%;
  height: 33.33%;
}

.tes-card-profile img {
  width: 11.57%;
  height: auto;
  border-radius: 50%;
}

.tes-card-profile div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 70%;
  height: 62.37%;
}

.tes-card-profile div h3 {
  color: var(--secundary);
  font-family: "Poppins semibold";
  font-size: clamp(11px, 1.09vw, 32px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.tes-card-profile div h4 {
  color: var(--grey);
  font-family: "Poppins medium";
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.test-card > p {
  width: 88.61%;
  color: var(--secundary);
  font-family: "Poppins medium";
  font-size: var(--text-sx);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.tes-logos {
  position: relative;
  margin: 1.5% 0;
  width: 100%;
  height: 6%;
  overflow: hidden;
  z-index: 2;
}

.tes-logos > div {
  width: max-content;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 2.6%;
  align-items: center;
  will-change: transform;
  animation: track-logo 40s linear infinite;
}

@keyframes track-logo {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-40%);
  }
}

.tes-logos > div img {
  height: 100%;
  width: auto;
}

.how-it-function {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 7% 0;
}

.how-it-function > img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.hif-content {
  position: relative;
  width: 75%;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.hif-faq {
  width: 100%;
  cursor: pointer;
}

.question {
  width: 87.15%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1% 6.39%;
  border-radius: 200px;
}

.question:hover {
  border-radius: 200px;
  box-shadow: 0px 0px 20px 0px rgba(96, 108, 119, 0.5);
  backdrop-filter: blur(2px);
  transition: 0.3s ease-out;
}

.q-title {
  display: flex;
  flex-direction: row;
  gap: 10%;
}

.q-title span {
  color: var(--secundary);
  font-family: "Poppins medium";
  font-size: var(--text-lg2);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.q-title h2 {
  color: var(--secundary);
  font-family: "Poppins semibold";
  font-size: var(--text-lg2);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.question > img {
  width: auto;
  height: 100%;
  filter: drop-shadow(0px 2px 12px rgba(96, 108, 119, 0.3));
}

.faq-close {
  display: none;
}

.answer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 43.61%;
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
}

.hif-faq-text {
  width: 47.92%;
}

.faq-text1 {
  width: 100%;
  height: 48%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: -8%;
  margin-left: 16.85%;
  gap: 18%;
}

.line1 {
  width: 2px;
  height: 100%;
}

.faq-text1 h3 {
  width: 68%;
  color: var(--grey);
  font-family: "Poppins mediumbold";
  font-size: var(--text-md);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.faq-text2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 11.5%;
  gap: 14.7%;
}

.faq-text2 img {
  width: 12.75%;
  height: auto;
}

.faq-text2 p {
  width: 63%;
  color: var(--secundary);
  font-family: "Poppins mediumbold";
  font-size: var(--text-md);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.line2 {
  width: 2px;
  height: 8%;
  margin-left: 16.85%;
}

.faq-text3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 11.5%;
  gap: 14.7%;
}

.faq-text3 img {
  width: 12.75%;
  height: auto;
}

.faq-text3 p {
  width: 60%;
  color: var(--secundary);
  font-family: "Poppins mediumbold";
  font-size: var(--text-md);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.hif-faq-img {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 36.11%;
  margin-top: -7%;
  margin-right: 2.5%;
}

.ans-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 83.27%;
  height: 100%;
  border-radius: 16px;
  background: radial-gradient(
    145.74% 64.79% at 50.12% 55.74%,
    rgba(75, 97, 129, 0.4) 0%,
    #fff 100%
  );
  box-shadow: 0px 15px 10px rgba(255, 103, 0, 0.3);
}

.ans-img img {
  width: 54.27%;
  height: 92.53%;
}

.ans-scrollbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 6%;
  gap: 10px;
}

.ans-scrollbar img {
  width: 100%;
  height: auto;
}

.line-scroll {
  background-color: rgba(255, 103, 0, 0.3);
  width: 8px;
  height: 40%;
  border-radius: 12px;
}

.line-scroll > div {
  width: 100%;
  height: 25%;
  background-color: var(--primary);
  border-radius: 12px;
}

.line-scroll2 {
  background-color: rgba(255, 103, 0, 0.3);
  width: 8px;
  height: 40%;
  border-radius: 12px;
}

.line-scroll2 > div {
  width: 100%;
  height: 50%;
  background-color: var(--primary);
  border-radius: 12px;
}

.line-scroll3 {
  background-color: rgba(255, 103, 0, 0.3);
  width: 8px;
  height: 40%;
  border-radius: 12px;
}

.line-scroll3 > div {
  width: 100%;
  height: 75%;
  background-color: var(--primary);
  border-radius: 12px;
}

.line-scroll4 {
  background-color: rgba(255, 103, 0, 0.3);
  width: 8px;
  height: 40%;
  border-radius: 12px;
}

.line-scroll4 > div {
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  border-radius: 12px;
}

.active {
  max-height: 1000px;
  transition: max-height 2s ease-out;
  overflow: unset;
}

.cta-final {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5%;
}

.cta-final > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
}

.cta-title {
  position: relative;
  margin-top: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  z-index: 2;
}

.cta-title > h2 {
  width: 45%;
  color: var(--secundary);
  text-align: center;
  font-family: "Poppins medium";
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}

.cta-title > h2 span {
  font-weight: 600;
  font-family: "Poppins semibold";
}

.cta-title > p {
  margin-top: 1%;
  color: #717171;
  text-align: center;
  font-family: "Poppins medium";
  font-size: var(--text-md);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.sw-container2 {
  position: relative;
  width: 100%;
  height: 41.57%;
  overflow: hidden;
  z-index: 2;
}

.sw-wrapper2 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.sw-slide2 {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 3s ease;
  width: 13.1% !important;
  height: 100%;
}

.sw-slide2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.swiper-slide2-main1,
.swiper-slide2-main5 {
  transition: all 3s ease;
  width: 13.1% !important;
  height: 89.09% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-slide2-main2,
.swiper-slide2-main4 {
  transition: all 3s ease;
  width: 13.1% !important;
  height: 79.96% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-slide2-main3 {
  transition: all 3s ease;
  width: 13.1% !important;
  height: 74.83% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-btns {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 18.44%;
  height: 4.44%;
  z-index: 2;
}

.cta-btn-google {
  height: 100%;
  width: 50.28%;
  border-radius: 100px;
  background-color: var(--secundary);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: none;
  gap: 5.9%;
  transition: scale 0.3s ease;
}

.cta-btn-google:hover {
  scale: 1.05;
  transition: scale 0.3s ease;
}

.cta-btn-google img {
  width: 13.48%;
  height: auto;
}

.cta-btn-google h3 {
  color: var(--white);
  font-family: "Poppins semibold";
  font-size: clamp(11px, 0.833vw, 25px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.cta-btn-apple {
  height: 100%;
  width: 46.33%;
  border-radius: 100px;
  background-color: var(--secundary);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: none;
  gap: 7.32%;
  transition: scale 0.3s ease;
}

.cta-btn-apple:hover {
  scale: 1.05;
  transition: scale 0.3s ease;
}

.cta-btn-apple img {
  width: 14.63%;
  height: auto;
}

.cta-btn-apple h3 {
  color: var(--white);
  font-family: "Poppins semibold";
  font-size: clamp(11px, 0.833vw, 25px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.faq {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  gap: 50px;
}

.faq > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
}

.faq-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10%;
  z-index: 2;
}

.faq-title h2 {
  color: var(--secundary);
  text-align: center;
  font-family: "Poppins medium";
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}

.faq-title > h2 span {
  font-weight: 600;
  font-family: "Poppins semibold";
}

.faq-title > p {
  margin-top: 4%;
  width: 60%;
  color: #717171;
  text-align: center;
  font-family: "Poppins medium";
  font-size: var(--text-md);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.faq-content {
  position: relative;
  width: 100%;
  height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
  z-index: 3;
}

.faq-content > div {
  width: 66.67%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.faq-cards {
  width: 49.22%;
}

.faq-card {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding: 5%;
  width: 90%;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0px 2px 12px 0px rgba(96, 108, 119, 0.3);
}

.faq-card h3 {
  color: var(--black);
  font-family: "Poppins semibold";
  font-size: var(--text-md);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.faq-card p {
  color: var(--grey);
  font-family: "Poppins medium";
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.bg-gradient {
  position: absolute;
  width: 120%;
  height: 44.54%;
  bottom: -7%;
  left: 0;
  right: 0;
  margin: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 65.73%);
  filter: blur(40px);
  z-index: 5;
}

.faq-btn {
  width: 7.4%;
  height: 55px;
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background: var(--secundary);
  color: var(--white);
  font-family: "Poppins semibold";
  font-size: var(--text-sx);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  cursor: pointer;
  border: none;
  z-index: 5;
  transition: scale 0.3s ease;
}

.faq-btn:hover {
  scale: 1.05;
  transition: scale 0.3s ease;
}

.active-faq {
  height: max-content;
  padding-bottom: 10%;
}

.desactive-gradient {
  z-index: 3;
  bottom: -14%;
}

/* footer */

footer {
  width: 100%;
  height: 47.59vh;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.footer-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--secundary);
  border-radius: 38px 38px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.ellipse1 {
  bottom: 3%;
  left: 12%;
  width: 5vw;
  height: 5vw;
  position: absolute;
  background-color: #FFF;
  opacity: 0.3;
  filter: blur(40px);
  z-index: 1;
  border-radius: 50%;
}

.ellipse2 {
  top: 12%;
  left: 40%;
  width: 5vw;
  height: 5vw;
  position: absolute;
  background-color: #FFF;
  opacity: 0.3;
  filter: blur(40px);
  z-index: 1;
  border-radius: 50%;
}

.ellipse3 {
  bottom: 26%;
  right: 39%;
  width: 5vw;
  height: 5vw;
  position: absolute;
  background-color: #FFF;
  opacity: 0.3;
  filter: blur(40px);
  z-index: 1;
  border-radius: 50%;
}

.ellipse4 {
  top: 7%;
  right: 14%;
  width: 5vw;
  height: 5vw;
  position: absolute;
  background-color: #FFF;
  opacity: 0.3;
  filter: blur(40px);
  z-index: 1;
  border-radius: 50%;
}

.foo-content {
  position: relative;
  z-index: 2;
  width: 75%;
  height: 37.11%;
  display: flex;
  flex-direction: row;
  margin-top: 6%;
}

.foo-logo {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.foo-logo img {
  width: 47%;
  height: auto;
}

.foo-logo p {
  width: 47%;
  color: #B8B8B8;
  font-family: "Poppins medium";
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  margin-top: 2%;
}

.foo-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.foo-nav a {
  color: var(--white);
  font-family: "Poppins medium";
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 400;
  line-height: 128.57%;
  cursor: pointer;
}

.foo-get-app {
  width: 52%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: row !important;
  justify-content: flex-end;
}

.foo-get-app > div {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.foo-get-app h3 {
  color: var(--white);
  font-family: "Poppins medium";
  font-size: clamp(12px,1.67vw,40px);
  font-style: normal;
  font-weight: 400;
  line-height: 128.57%;
  text-align: center;
}

.footer-btn{
  width: 100%;
  height: 27.78%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.foo-btn-google {
  height: 100%;
  width: 48%;
  border-radius: 100px;
  border: 1px solid #FF6700;  
  background-color: var(--secundary);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5.9%;
}

.foo-btn-google img {
  width: 13.48%;
  height: auto;
}

.foo-btn-google h4 {
  color: var(--white);
  font-family: "Poppins medium";
  font-size: var(--text-sx);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.foo-btn-apple {
  height: 100%;
  width: 48%;
  border-radius: 100px;
  background-color: var(--secundary);
  border: 1px solid #FF6700;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7.32%;
}

.foo-btn-apple img {
  width: 14.63%;
  height: auto;
}

.foo-btn-apple h4 {
  color: var(--white);
  font-family: "Poppins medium";
  font-size: var(--text-sx);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.foo-social-media {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 75%;
}

.foo-social-media a {
  width: 18%;
  height: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.foo-social-media img {
  width: 100%;
  height: auto;
}

.foo-cont-bottom {
  position: relative;
  z-index: 2;
  width: 75%;
  height: 20.825%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--grey);
}

.foo-bottom {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1%;
}

.foo-bottom h3 {
  color: var(--white);
  font-family: "Poppins mediumbold";
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 600;
  line-height: 171.429%;
}

.foo-bottom img {
  width: 0.5%;
  height: auto;
}

.foo-bottom h4 {
  color: #B8B8B8;
  font-family: "Poppins medium";
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 400;
  line-height: 171.429%;
}

@media (orientation: landscape) {
  .smooth-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  
  .smooth-content {
    position: relative;
    width: 100%;
    min-height: 100vh;
  }
}

@media (orientation: portrait) {
  .smooth-wrapper {
    overflow: hidden;
  }
  .hero-background {
    overflow: hidden;
    width: 100%;
    height: 100vh;
  }
  .hero-background img {
    position: absolute;
    top: 0;
    width: 250%;
    height: 100%;
    max-height: 100%;
  }
}

@media screen and (max-width: 2560px) and (max-height: 1600px) {
  .tes-logos > div img {
    height: 80%;
    width: auto;
  }

  .tes-logos {
    height: 3%;
  }

  .hif-content {
    gap: 80px;
  }
}

@media screen and (max-width: 2560px) and (max-height: 1440px) {
  /*
  .swiper-slide-main1,
  .swiper-slide-main3 {
    transition: all 1s ease;
    width: 19% !important;
    height: 95% !important;
    display: flex;
    align-items: flex-end;
  }

  .swiper-slide-main2 {
    width: 18.5% !important;
  }*/

  .tes-logos {
    height: 1.5%;
    height: 6%;
  }

  .hif-content {
    gap: 50px;
  }
}


@media screen and (max-width: 1920px) and (max-height: 1080px) {
  /*
  .sw-wrapper1 {
    left: 7.75%;
    padding: 0;
  }

  .swiper-slide-main1,
  .swiper-slide-main3 {
    width: 19% !important;
  }

  .swiper-slide-main2 {
    width: 18.5% !important;
  }*/

  .hif-content {
    gap: 30px;
  }
}