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

    :root {
        --primary:#FF6700;
        --secundary:#021628;
        --white: #FFF;
        --grey: #606C77;
        --black: #000;
        --text-sm:clamp(9px, 3.206vw, 25px);
        --text-md: clamp(11px, 4.236vw, 50px);
        --text-md2: clamp(13px, 4.765vw, 50px);
        --text-md3: clamp(14px, 5.559vw, 55px);
        --text-lg: clamp(18px, 7.412vw, 75px);
        --text-lg2:clamp(20px, 7.942vw, 85px);
        --text-xl:clamp(25px, 16.942vw, 200px);
    }

    .desk {
        display: none !important;
    }
    
    .mob {
        display: flex !important;
    }

    .header-container {
        justify-content: flex-end;
    }

    .header-container > a {
        width: 24.44%;
        display: flex;
        justify-content: center;
    }

    .header-container > a > svg {
        height: auto;
    }

    .menu-mob {
        position: fixed;
        z-index: 50;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        flex-direction: column;
        align-items: center;
    }

    .menu-mob > img {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

    .menu-mob-content {
        position: relative;
        z-index: 2;
        width: 89.58%;
        height: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

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

    .menu-mob-header > img {
        height: auto;
        width: 25%;
    }

    .menu-mob-header > button {
        border: none;
        cursor: pointer;
        background-color: transparent;
        height: auto;
        width: 10%;
    }

    .menu-mob-header > button svg {
        width: 100%;
        height: auto;
    }

    .menu-mob-content h3 {
        color: var(--secundary);
        text-align: center;
        font-family: "Poppins semibold";
        font-style: normal;
        font-weight: 600;
        line-height: 130%;
        width: 90%;
        font-size: var(--text-lg);
        margin: 12% 0;
    }

    .menu-mob-content > nav {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .menu-mob-content > nav a {
        color: var(--secundary);
        font-size: var(--text-md3);
        font-family: "Poppins semibold";
        font-style: normal;
        cursor: pointer;
        margin: 5% 0; 
    }

    .menu-mob-social-media {
        display: flex;
        flex-direction: row;
        width: 45%;
        gap: 10%;
        justify-content: space-between;
    }

    .menu-mob-social-media a {
        width: 100%;
        height: auto;
        cursor: pointer;
    }  
    
    .menu-mob-social-media img {
        width: 100%;
        height: auto;
    }

    .menu-btn {
        width: 8.471vw;
        background: none;
        border: none;
        cursor: pointer;
    }

    .menu-btn img {
        width: 100%;
        height: auto;
    }

    .menu-btn svg {
        width: 100%;
        height: auto;
    }

    .hero {
        background-image: url("../../public/img/hero-bg-mob.webp");
        background-size: cover;
        background-repeat: no-repeat;
        height: 100svh;
    }

    .bg-ellipse {
        top: -13%;
        width: 100%;
    }

    .hero-content {
        height: 100%;
        gap: 7%;
    }

    .hc-title {
        height: 33%;
        margin-top: 15%;
    }

    .hc-title > h1 {
        width: 82%;
        font-size: var(--text-lg);
    }

    .hc-title p {
        font-size: clamp(7px,3.3vw,40px);
        width: 67%;
    }

    .hc-title > h2 {
        color: var(--grey);
        text-align: center;
        font-family: "Poppins medium";
        font-size: var(--text-md);
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .hc-btns {
        width: 86.04%;
        height: 20%;
    }

    .hc-btn-google {
        width: 47.39%;
    }

    .hc-btn-google img {
        width: 12.98%;
    }

    .hc-btn-google h3 {
        font-size: var(--text-sm);
    }

    .hc-btn-apple {
        width: 47.39%;
    }

    .hc-btn-apple img {
        width: 12.98%;
    }

    .hc-btn-apple h3 {
        font-size: var(--text-sm);
    }

    /* #container3D {
        height: 100%;
        width: 100%;
        position: absolute;
        bottom: 0;
    }

    #container3D .phone-img1 {
        height: 46%;
        width: 69%;
        object-fit: fill;
    } */
    #container3D {
        height: 100svh;
        /* border: 3px solid red; */
    }

    .feed-event {
        background-image: url(../../public/img/bg-feed-event-mob.webp);
    }

    .fe-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 15% 0 90% 0;
    }

    .fe-title h2 {
        font-size: var(--text-xl);
    }

    .fe-title p {
        text-align: center;
        font-size: var(--text-md);
        width: 62%;
    }

    .sw-container {
        position: absolute;
        width: 100%;
        height: auto !important;
        overflow: hidden;
        bottom: 0;
    }

    .sw-wrapper1 {
        height: 100% !important;
        margin-left: 1.2vw;
        align-items: unset;
        height: 100% !important;
    }

    .swiper-slide.sw-slide1 {
        display: flex !important;
        height: 56svh !important;
        width: 42svh !important;
    }

    .swiper-slide1-main0 {
        transition: unset;
    }

    .swiper-slide1-main1,
    .swiper-slide1-main5 {
        margin-top: unset;
        transition: unset;
    }

    .swiper-slide1-main2,
    .swiper-slide1-main4 {
        margin-top: unset;
        transition: unset;
    }

    .swiper-slide1-main3 {
        margin-top: unset;
        transition: unset;
    }

    .phone-background {
        width: 75.71%;
        height: 60%;
    }

    .map-explore {
        overflow: hidden;
        height: auto;
        background-image: url(../../public/img/bg-map-explore-mob.webp);
    }
    
    .map-explore h2 {
        width: 87%;
        font-size: var(--text-lg2);
        margin-top: 15%;
        margin-bottom: 5%;
    }   

    .me-content {
        align-items: center;
    }

    .me-content > div {
        align-items: flex-end;
        height: auto;
        padding-bottom: 14%;
    }

    .me-img-map {
        position: relative;
        margin: 0;
        right: 0;
        left: unset;
        width: 75%;
        height: auto;
        bottom: 0%;
    }

    .review1 {
        top: unset;
        bottom: 43%;
        left: 50%;
        width: 32%;
    }

    .review2 {
        left: unset;
        bottom: unset;
        width: 35%;
        top: 14%;
        right: -25.2%;
    }

    .arrow1 {
        top: unset;
        left: 45%;
        bottom: 27%;
        height: 38%;
    }

    .me-text1 {
        top: 29%;
        bottom: unset;
        width: 46.57%;
        height: 27.21%;
        left: 45%;
        align-items: unset;
        height: auto;
    }

    .me-text1 h3 {
        font-size: var(--text-sm);
        text-align: unset;
    }

    .me-text1 p {
        font-size: var(--text-sm);
        text-align: unset;
        padding-top: 1%;
        white-space: nowrap;
    }

    .me-img-phone {
        width: 77.33%;
        height: auto;
    }
    
    .me-content > p {
        width: 80%;
        font-family: "Poppins medium";
        text-align: center;
        font-weight: 400;
        font-size: var(--text-md);
        margin: 7% 0;
        color: #606C77;
    }

    .testimonials {
        height: 100vh;
        background-image: url(../../public/img/bg-testimonials-mob.webp);
        overflow: hidden;
    }

    .tes-title-mob {
        display: block !important;
        width: 85% !important;
        font-size: var(--text-lg2);
        text-align: center;
        position: relative;
        color: var(--secundary);
        text-align: center;
        font-family: "Poppins medium";
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        z-index: 2;
    }

    .testimonials > p {
        width: 80%;
        font-size: var(--text-md);
        margin: 5% 0 10% 0;
    }

    .tes-content {
        height: 37.62%;
    }

    .tes-content > div {
        width: 100%;
        height: 100%;
        justify-content: unset;
    }

    .test-card {
        padding: 0;
        height: 100%;
        gap: 0;
    }

    .tes-card-profile {
        display: flex;
        flex-direction: column;
        margin-top: 5%;
        height: 38%;
        height: auto;
    }

    .tes-card-profile div {
        align-items: center;
        height: auto;
    }

    .tes-card-profile img {
        width: 15%;
    }

    .tes-card-profile div h3 {
        font-size: var(--text-md);
    }

    .tes-card-profile div h4 {
        font-size: var(--text-sm);
    }

    .test-card-cont {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .test-card {
        width: 78.094%;
    }

    .test-card > p {
        font-size: 2.3vw;
        margin: 2% 0 5% 0;
        text-align: center;
    }

    .tes-logos {
        height: 5%;
        width: 250%;
        margin: 3% 0;
        display: flex;
        align-items: center;
        gap: 1.5%;
    }

    .tes-logos > div {
        gap: 1.5%;
    }

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

    .how-it-function {
        background-image: url(../../public/img/bg-how-it-function-mob.webp);
        justify-content: center;
        padding: 0;
        min-height: unset;
        height: auto;
        padding: 5% 0;
    }

    .hif-content {
        display: flex;
        flex-direction: column;
        width: 86%;
        gap: 120px;
        margin: 10% 0;
    }

    .hif-faq {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

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

    .question {
        width: 100%;
        padding: 1% 0;
    }

    .question:hover {
        box-shadow: unset;
    }

    .q-title span {
        font-size: var(--text-lg2);
    }

    .q-title h2 {
        font-size: var(--text-lg2);
    }

    .faq-text1 {
        margin: 0;
    }

    .faq-text1 h3 {
        width: 100%;
        font-size: var(--text-md);
        margin: 5% 0;
    }

    .answer {
        flex-direction: column;
        height: auto;
    }

    .hif-faq-img {
        width: 100%;
        height: auto;
        margin: 0;
    }

    .ans-img {
        background: unset;
        width: 82.46%;
        height: auto;
    }

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

    .ans-scrollbar {
        width: 9.85%;
    }

    .line-scroll,
    .line-scroll2,
    .line-scroll3,
    .line-scroll4 {
        height: 90%;
        width: 10px;
    }

    .faq-text2 {
        margin: 5% 0;
        gap: 5%;
    }

    .faq-text2 svg {
        width: 13.85%;
        height: auto;
    }

    .faq-text2 p {
        width: 81%;
        font-size: var(--text-md);
    }

    .faq-text3 {
        margin: 0;
        gap: 5%;
    }

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

    .faq-text3 p {
        width: 81%;
        font-size: var(--text-md);
    }

    .active {
        max-height: 1500px;
        overflow: hidden;
    }

    .cta-final {
        height: 100vh;
        background-image: url('../../public/img/bg-cta-mob.webp');
        padding: 15% 0;
        overflow: hidden;
        gap: unset;
        justify-content: flex-end;
    }

    .cta-title > h2 {
        font-size: var(--text-lg2);
        width: 100%;
    }

    .cta-title > p {
        margin-top: 5%;
        width: 78%;
        font-size: var(--text-md);
    }

    .sw-container2 {
        width: 500.85%;
        height: 800px;
        margin-left: -158%;
    }

    .sw-wrapper2 {
        justify-content: center;
        align-items: center;
    }

    .sw-slide2 img { 
        border-radius: 20px;
    }

    .cta-btns {
        width: 86.04%;
        height: 90px;
    }

    .cta-btn-google h3 {
        font-size: var(--text-sm);
    }

    .cta-btn-apple h3 {
        font-size: var(--text-sm);
    }
    
    .faq {
        height: auto;
        min-height: 100vh;
        overflow: hidden;
        justify-content: center;
        padding-bottom: 25%;
        gap: 100px;
        background-image: url('../../public/img/bg-faq-mob.webp');
    }

    .faq-title h2 {
        font-size: var(--text-lg2);
        width: 100%;
    }

    .faq-title > p {
        width: 80%;
        font-size: var(--text-md);
    }

    .faq-content {
        align-items: unset;
        overflow-x: auto;
        height: auto;
    }

    .faq-content > div {
        width: 250%;
        justify-content: unset;
        gap: 2%;
        padding: 0 12%;
    }

    .faq-card {
        padding: 5% 5% 10% 5%;
    }

    .faq-card h3 {
        font-size: var(--text-md);
    }

    .faq-card p {
        font-size: var(--text-sm);
    }

    .active-faq {
        height: unset;
        padding: 0;
    }

    .faq-cards-show {
        display: none !important;
    }

    .active-faq-mob {
        display: flex !important;
    }

    .faq-btn {
        width: 37.59%;
        font-size: var(--text-md);
        height: 90px;
    }

    /* footer */

    footer {
        height: auto;
    }

    .footer-container {
        width: 100%;
        padding: 10% 0 5% 0;
        gap: 60px;
    }

    .foo-content {
        flex-direction: column;
        align-items: center;
        margin: 0;
        gap: 60px;
        width: 86.67%;
    }

    .foo-nav {
        justify-content: unset;
        gap: 25px;
    }

    .foo-nav a {
        text-align: center;
        font-size: var(--text-md3);
    }

    .foo-get-app {
        margin: 0;
        gap: 25px;
        width: 100%;
    }

    .foo-get-app > div {
        width: 100%;
    }

    .foo-get-app h3 {
        text-align: center;
        font-size: var(--text-md3);
    }

    .foo-logo {
        align-items: center;
        width: 90%;
        gap: 25px;
    }

    .foo-logo img {
        width: 80%;
    }

    .foo-logo p {
        width: 100%;
        text-align: center;
        font-size: clamp(8px,3vw,40px);
        width: 80%;
    }

    .foo-btn-google,
    .foo-btn-apple {
        height: 80px;
    }

    .foo-btn-google h4,
    .foo-btn-apple h4 {
        font-size: var(--text-sm);
    }

    .foo-social-media {
        flex-direction: row;
        width: 45%;
        gap: 10%;
        margin-top: 10%;
    }

    .foo-bottom {
        padding-top: 50px;
        flex-direction: column;
        gap: 15px;
    }
    
    /* footer */
}

@media  screen and (max-width: 768px) {
    .hero-content {
        gap: 5%;
    }

    .hc-title {
        height: 27%;
        margin-top: 22%;
    }

    .test-card { 
        gap: 0;
    }

    .hif-content {
        gap: 90px;
    }

    .question > img {
        height: auto;
        width: 14%;
    }

    .cta-final {
        padding: 15% 0 10% 0;
    }

    .sw-container2 {
        height: 600px;
    }

    .cta-btns {
        height: 65px;
    }

    .faq {
        gap: 50px;
    }

    .faq-content {
        padding-bottom: 5%;
    }

    .faq-btn {
        height: 60px;
    }

    /* footer */

    .foo-content {
        gap: 40px;
    }

    .foo-nav {
        gap: 20px;
    }

    .foo-logo {
        gap: 20px;
    }

    .foo-get-app {
        gap: 20px;
    }

    .foo-btn-google, 
    .foo-btn-apple {
        height: 60px;
    }

    .foo-bottom {
        padding-top: 13px;
        gap: 10px;
    }

    /* footer */
}

@media  screen and (max-width: 480px) {
    .testimonials {
        min-height: 700px;
    }

    .bg-ellipse {
        top: 3%;
    }

    .hero-content {
        gap: 10%;
    }

    .feed-event {
        height: 100vh;
        justify-content: unset;
    }

    .fe-title {
        margin: 30% 0 0 0;
    }

    .review2 {
        bottom: 60%;
    }

    .arrow1 {
        top: unset;
        bottom: 21%;
    }

    .tes-content {
        margin: 10% 0 0 0;
    }

    .tes-card-profile {
        margin: 0;
    }

    .test-card {
        display: flex;
        justify-content: center;
        gap: 6%;
    }

    
    .tes-card-profile img {
        width: 20%;
    }

    .test-card > p {
        font-size: 3vw;
    }

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

    .hif-content {
        gap: 70px;
    }

    .sw-container2 {
        height: 500px;
    }

    .cta-btns {
        height: 50px;
    }

    .faq {
        gap: 60px;
    }

    .faq-title > p {
        margin-top: 8%;
    }

    .faq-card {
        padding: 10% 5% 19% 5%;
    }

    .faq-btn {
        height: 50px;
    }

    /* footer */

    .footer-container {
        gap: 20px;
    }
    
    .foo-content {
        gap: 30px;
    }

    .foo-nav {
        gap: 15px;
    }

    .foo-logo {
        gap: 15px;
    }

    .foo-get-app {
        gap: 15px;
    }

    .foo-btn-google, 
    .foo-btn-apple {
        height: 50px;
    }

    .foo-bottom {
        padding-top: 10px;
        gap: 5px;
    }

    /* footer */
}