@font-face {
    font-family: nText;
    src: url("../fonts/TextRegular.otf");
}
    @font-face {
    font-family: nText Medium;
    src: url("../fonts/TextMedium.otf");
}
    @font-face {
    font-family: nText Bold;
    src: url("../fonts/TextBold.otf");
}
@font-face {
    font-family: Display;
    src: url("../fonts/DisplayRegular.otf");
}
@font-face {
    font-family: Display Medium;
    src: url("../fonts/DisplayMedium.otf");
}
@font-face {
    font-family: Display Bold;
    src: url("../fonts/DisplayBold.otf");
}
.n-desk{
    display: none;
}
.n-mob{
    display: block;
}
.desktop{
    display: none;
}
.mobile{
    display: block;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
html, body {
    overflow-x: hidden;
    color: #282C2F;
    text-wrap: balance;
}
a{
    text-decoration: none;
    color: inherit;
}
.navbar-mobile {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #282C2F;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    z-index: 99;
    height: 108px;
    font-family: nText Medium ;
    line-height: 150%;
    letter-spacing: 0.14px;
    font-size: 14px;

}

.logo {
    width: 90px;
}

.menu-toggle {
    width: 30px;
    height: 11px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    height: 1px;
    width: 100%;
    background: white;
    transition: all 0.3s ease-in-out;
}


.menu-toggle.active span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    transform: translateY(-5px) rotate(-45deg);
}


.nav-links-mobile {
    position: fixed;
    top:-900px;
    width: 100vw;
    height: 100vh;
    right: 0px;
    background: #282C2F;
    list-style: none;
    transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
    z-index: 1;
    padding: 20px;
    opacity: 0;

}

.nav-links-mobile.open {
    top: 108px;
    opacity: 1;

}

.nav-links-mobile li {
    padding: 35px;
    text-align: center;
}

.nav-links-mobile li a {
    color: white;
    text-decoration: none;
    display: block;
}

.hero-content {
    width: 100%;
    padding: 50px 20px;
    text-align: center;
    background-color: #F0E6E0;
}
.hero-image{
    display: none;
}
.hero-image-mobile{
    width: 100vw;
    height: auto;
    min-height: 300px;
}

.content {
    width: 100%;
    max-width: 100%;

}


.trusted {
    font-size: 13px;
    padding-left: 0;
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'nText Medium';
    line-height: 140%;
    letter-spacing: 0.13px
}

.trusted::before {
    content: "★ ★ ★ ★ ★";
    position: static;
    display: block;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 100px;
    color: #B89C84; 
}


.hero-row {
    flex-direction: column;
    align-items: center;

}

.col-5, .col-7 {
    width: 100%;
    text-align: center;
    align-items: center;
}


.action-text::after {
    font-size: 16px;
}

h1{
    margin-top: 55px;
    font-size: 48px;
    line-height: 98%;
    font-family: Display;
    margin-bottom: 20px;
}

.hero-text{
    font-family: nText;
    margin-top: 50px;
    line-height: 150%;
    letter-spacing:0.16px;
    font-size: 16px;
    line-height: 24px;
    margin-top: 55px;
}

.hero-button
{
    background-color: #B89C84;
    padding: 28px 24px;
    width: 100%;
    border-radius: 5px;
    color: #282C2F;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: 0.9px;
    font-family: nText Medium;
    margin-top: 50px;

}


.action-text 
{
    font-family: nText Medium;
    text-align: left; /* Restaurar alineación a la izquierda */
    font-size: 15px;
    line-height: 120%;
    letter-spacing: 0.9px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-right: 30px;
    margin-top: 50px;
}

.action-text::after {
    content: "→";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    transition: transform 0.3s ease;
}


.why-desk{
        display: none;
    }
.why-mob{
    display: block;
}
#why_us{
    background-color: white;
    color: #282C2F;
    padding-top: 80px;
    padding-bottom: 80px;
    height: 1650px;
}
.section-div{
    text-align: center;
    max-width: 850px;
    margin: auto;
    margin-bottom: 50px;
}
.top-title{
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.14px;
    color: #B89C84;
    font-family: nText Medium;
}

.section-title{
    font-size: 40px;
    font-family: Display;
    margin-top: 30px;
    line-height: 98%;
    letter-spacing: 0.4px;
    text-align: center;
}
.section-info{
    font-size: 18px;
    margin-top: 30px;
    font-family: nText;
    line-height: 150%;
    letter-spacing: -0.18px;
    text-align: center;
}


.why-us-container-mb {
    position: relative;
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
}


.why-us-buttons-mb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex: 1;
    width: 100%;
    margin-top: 30px;
}

.why-us-btn {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0.9px;
    cursor: pointer;
    transition: 0.65s;
    border-radius: 5px;
    padding: 18px 22px;
    width: 100%;
    text-align: center;
    font-family: 'nText Medium';
}

.why-us-btn.active {
    background-color: #282C2F;
    color: #FFFBF9;
}

.why-us-btn:not(.active) {
    background-color: #282C2F1A;
    color: #282C2F;
}

.why-us-box-mb {
    margin-top: 180px;
    position: absolute;
    padding: 60px 20px;
    padding-top: 0px;
    border-radius:5px;
    text-align: center;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.sand{
    background-color: #F0E6E0;
}
.lightblue{
    background-color: #ECF0F2;
}

.why-us-box-mb.active {
    opacity: 1;
    filter: blur(0);
}


.why-us-box-mb h3 {
    font-size: 32px;
    margin-bottom: 20px;
    line-height: 31px;
    font-family: 'Display Bold';
}


.why-atribute-mb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 65px;
}


.why-atribute-mb img {
    width: 50px;
    height: 50px;
}


.atribute-title-mb {
    font-size: 24px;
    display: block;
    font-family: 'Display Bold';
    line-height: 24px;
    margin-top: 30px;
}


.atribute-description-mb {
    font-size: 18px;
    margin-top: 25px;
    font-family: nText;
    line-height: 150%;
    letter-spacing: -0.18px;
    color: #282C2F;
}

.usual-mob{
    display: block;
}
.usual-desk{
    display: none;
}
#how_it_works{
    padding-top: 80px;
    background-color: #282C2F;
    color: #FFFBF9;
    height: 1700px;

}
.hiw-title .section-title
{
    padding: 0px 40px;
}
.hiw-title .section-info
{
    padding: 0px 20px;
}
.usual-holder{
    width: 100%;
    border-top: 1px solid #9C918B;
}

.usual-holder h3{
    font-size: 36px;
    padding-top: 50px;
    height: 126.5px;
}
.underlying-logo{
    padding-top: 25px;
    width: 200px;

}

.suspects-container {
    border-top: 1px solid #9C918B;
    width: 100%;
    padding: 0px 20px;
    text-align: center;
    display: flex;
    gap: 60px;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 1150px;
}


.toggle-container {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.switch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 35px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #33383D;
    border-radius: 34px;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 28px;
    width: 28px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}

input:checked + .slider {
    background-color: #B89C84;
}

input:checked + .slider:before {
    transform: translateX(35px);
}


.toggle-text {
    margin-top: 20px;
    font-size: 20px;
    font-family: nText;
    line-height: 20px;

}


.suspects-sectitle {
    font-size: 32px;
    text-transform: uppercase;
    margin-top: 30px;
    font-family: nText Bold;
}

.suspect-logo {
    width: 151px;
}

.suspect-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;  
    width: 100vw;
    position: static;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out, filter 0.6s ease-in-out;
    padding: 0px 20px;
}

.suspect-item.absolute{
    position: absolute;
}
.suspect-title {
    text-transform: uppercase;
    font-family: nText Bold;
    font-size: 30px;
    line-height: 32px;
    padding: 0;
}


.suspect-desc {
    font-family: nText;
    font-size: 30px;
    line-height: 32px;
    padding: 0px;
}
.test-desk{
    display: none;
}
.test-mob{
    display: block;
}
#testimonials{
    padding-top: 80px;
    background-color: #F0E6E0;
    color: #282C2F;
    padding-bottom:90px;
    position: relative;
}

.testi-banner{

    width: 100%;
    background-image: url('../images/TestiPattern.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    padding-top: calc(100vw * 0.384);
}


.testimonial-section-title{
    margin-bottom: 80px;
    color: #282C2F;
    font-size: 40px;
    font-family: Display Medium;
    line-height: 98%;
    text-align: center;
    padding: 0px 30px
}
.testimonial-subtitle{
    text-align: center;
    color: #282C2F;
    font-size: 18px;
    line-height: 150%;
    font-family: nText;
    margin-bottom: 70px;
    margin-top: 80px;
    padding: 0px 30px;
}

.testi-mb-container
{
    width: 90%;
    margin: auto;
    position: relative;
    overflow: hidden;
    display: flex;
}

.testi-slider{
    display: flex; 
    width: 8000px;
}

.testi-mb-review
{
    cursor: pointer;
    padding: 20px;
    border: 1px solid black;
    padding-bottom: 92px;
    width: 90vw;
    position: relative;
}


.testimonial-logo{
    margin-bottom: 40px;
    width: 107px;
}
.testi-mb-desc-holder
{
    max-height: 0px;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    overflow: hidden;

}
.testimonial-title{
    font-size: 20px;
    line-height: 150%;
    letter-spacing: -0.2px;
    font-family: nText Medium;
    text-transform: uppercase;
    display: block;
    margin-bottom: 28px;
}
.testimonial-description{
    font-size: 16px;
    font-family: nText;
    line-height: 150%;
    letter-spacing: -0.16px;
}

.icon {
    transition: transform 0.3s ease;
}

.icon.open
{
    transform: rotate(180deg);
}

.open .icon {
    transform: rotate(180deg);
}

.testi-icon{
    float: right;
    margin-top: 15px;
    margin-right: 15px;
}

.testimonial-name-container{
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Align all items to the left */
    align-items: center; /* Vertically center all items */
    gap: 10px;
}
.testimonial-name{
    font-family: Display Bold;
    font-size: 16px;
    line-height: 98%;
    margin-bottom: 3px;
}
.testimonial-position{
    font-family: nText;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.04px;
    text-align: left;
}
.col-fixed{
    width: 50px;
}
.col-auto {
    flex: 1; 
}

.buttons-mobile {
    margin-top: 50px;
    width: 100%;
    display: flex;
    gap: 16px; 
    justify-content: center;
    align-items: center; 

}
.button-container {
    position: relative; 
    display: inline-block;
}

.buttons img {
    cursor: pointer;
    display: block;
    transition: filter 0.3s ease-in-out;
    position: relative;
    z-index: 1;
}

.button-on::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px; /* Ajusta el tamaño del área oscurecida */
    height: 46px;
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: background 0.1s ease-in-out;
}


    .dots-mobile {
        position: absolute;
        display: flex;
        gap: 8px; 
        transform: translateX(-50%);
        left: 50%;
        bottom: 50px;
    }

    .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ddd; 
        transition: background-color 0.3s ease;
    }
        .selected {
        background-color: #222; 
    }

#process{
    background-color: #FFFBF9;
    padding-top: 100px;
}

.vertical-line {
    position: relative;
    height:1250px; /* Altura de la línea */
    width: 7px;
    margin: 0px 20px;
    float: left;
    margin-top: 0px;
    background-color: #BAC2C5;
}

.vertical-line::before {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--before-height, 50%);
    top: 0;
    background-color: #26465F; /* Bottom color */
}

.circle {
    position: absolute;
    left: 50%;
    width: 30px;
    height: 30px;
    background-color: #26465F;
    border: 8px solid #FFFBF9;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}


.circle:nth-child(1) { top: 2%; }
.circle:nth-child(2) { top: 31.15%; }
.circle:nth-child(3) { top: 56%; }
.circle:nth-child(4) { top: 80.8%; }

.process-container
{
    display: flex;
    justify-content: left;
    gap: 10px;
    flex-direction: column;

}

.process-mb-cont{
    display: flex;
    flex-direction: row;
}

.process-button
{
    background-color: #A2B4C0;
    padding: 30px 40px;
    border-radius: 5px;
    width: 100%;
    color: #0E100F;
    font-size: 15px;
    font-family: nText Medium;
    text-align: center;
    cursor: pointer;
    line-height: 120%;
    letter-spacing: 0.9px;
    margin-top: 30px;
    margin-bottom: 30px;
}


.process-item-container
{
    display: flex;
    flex-direction: column; /* Ensure content stacks vertically */
    gap: 10px;
    margin-bottom:100px;
}
.process-title-container{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Align all items to the left */
    align-items: center; /* Vertically center all items */
    gap: 10px;

}

.process-item-title{
    font-family: Display Bold;
    font-size: 24px;
    line-height: 98%;
    margin-top: 15px;

}
.process-item-subtitle{
    font-family: nText;
    font-size: 15px;
    line-height: 21px;
    text-align: left;
    color: #8D999E;
}

.process-item-description {
    margin-top: 15px;
    font-family: nText;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: -0.01em;
    text-align: left;
}

#faq{
    background-color: #ECF0F2;
    padding-top: 80px;
    padding-bottom: 80px;

}

.accordion {
    width: 90%;
    margin: auto;
    color: #282C2F;
}

.accordion-item {
    border-bottom: 1px solid #93B8D4;
}

.accordion-header {
    margin: 20px 0px;
    font-size: 22px;
    line-height: 150%;
    letter-spacing: -0.01em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: background 0.3s ease;
    font-family: nText Bold;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    text-align: left;
    font-family: nText;

}

    .open .accordion-content{
        max-height: 600px;
    }

 .end-image-mobile{
    width: 100vw;
    height: auto;
    position: relative;
    overflow: hidden;

}

.end-holder{
    position: absolute;
    background-color: #FFFBF9;
    padding: 20px;
    border-radius: 5px;
    z-index: 2;
    width: 59%;
    height: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 4999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-flow: column;
    }

.end-holder h2{
    text-align: center;
    font-size: 18px;
    line-height: 120%;
    font-family: Display Bold;
    margin-bottom: 15px;
    letter-spacing: 1.92px;
}

.end-holder p{
    text-align: center;
    font-size:14px;
    line-height: 150%;
    font-family: nText;
    margin-bottom: 15px;
    letter-spacing: -0.14px;
}
.end-btn-mb
{
    font-size: 12px;
    line-height: 120%;
    letter-spacing: 0.9px
}

.footer {
    background-color: #f4ece6; 
    border-top: 1px solid black;
}


.footer-top {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid black;
    align-items: stretch;
    text-align: center;
    flex-direction: column;
    flex: 1;
}


.footer-section {
    text-align: center;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 30px;
}


.footer-section:not(:first-child) {
    border-top: 1px solid black;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
}

.footer-section.logo {
    flex: 0.5; 
}

.footer-section.address, 
.footer-section.contact {
    flex: 1.25; 
}


.contact a {
    display: block;
    color: black;
    text-decoration: none;
    margin-bottom: 5px;
}

.social-icons {
    margin-top: 10px;
    display: flex; /* Asegura que los íconos se alineen en fila */
    gap: 10px; /* Espaciado entre los íconos */
}

.social-icons img {
    margin-right: 0; /* Elimina el margen derecho innecesario */
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    background-color: #e3d8ce;
    height: 80px;
}

.footer-bottom-container {
    max-width: 1350px; 
    width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
}


.footer-links a {
    margin-left: 20px;
    text-decoration: none;
    color: black;

}

.footer-title{
    font-family: nText Bold;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
}
.footer-info{
    font-family: nText;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
}

.footer-image{
    width: 100vw;
    height: 81px;
    background-image: url('../images/FooterImage.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}

.footer-logo{
    max-width: 120px;
    margin: 30px;
}
@media(min-width: 400px){

    #how_it_works{
        height: 1700px;

    }

    #why_us{
        height: 1550px;
    }

    .end-holder h2{

        margin-bottom: 25px;
    }

    .end-holder p{

        margin-bottom: 25px;
    }

}

@media (min-width: 450px) {
    .vertical-line {
        height: 1135px;
    }
    #how_it_works{
        height: 1600px;

    }

}
@media(min-width: 500px)
{
    #why_us{
        height: 1450px;
    }
    #how_it_works{
        height: 1550px;

    }

}
@media (min-width: 550px) {
    .hero-image-mobile {display: none;}
    #how_it_works{
        height: 1500px;

    }
    .end-holder h2{

        font-size: 32px;
        margin-bottom: 35px;
        letter-spacing: 1.92px;
    }

    .end-holder p{

        font-size:18px;
        margin-bottom: 35px;
        letter-spacing: -0.18px;
    }
    .end-btn-mb
    {
        line-height: 120%;
        letter-spacing: 0.9px;
        font-size: 15PX;
    }

}

@media (min-width: 600px) {
    #how_it_works{
        height: 1400px;

    }

}

@media (min-width: 767px) {

    .mobile{
        display: none;
    }

    .desktop{
        display: block;
    }
    .hero-button:hover
    {
        background-color: #C6B09D;
    }
    .action-text:hover::after {
        transform: translate(10px, -50%) scaleX(1.2);
        color: #876B46;
    }

    .action-text:hover {
        color: #876B46;
    }
    .button-on:hover::after {
        background: rgba(0, 0, 0, 0.3); /* Oscurece solo el interior del botón */
    }
    .process-button:hover
    {
        background-color: #C7D1D9;
    }
    .social-icons img:hover {
        opacity: 1;
    }
    #faq{
        background-color: #ECF0F2;
        padding-top: 80px;

    }

    .accordion {
        max-width: 838px;
        width: 75%;
        margin: auto;
        color: #282C2F;
    }

    .accordion-item {
        border-bottom: 1px solid #93B8D4;
    }

    .accordion-header {
        margin: 25px 0px;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        transition: background 0.3s ease;
        font-family: nText Bold;
        line-height: 150%;
        letter-spacing: -0.01em;
    }

    .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        text-align: left;
        font-family: nText;

    }

    .end-image{
        width: 100vw;
        height: auto;
        position: relative;
        overflow: hidden;
    }

    #footer_anim{
        position: relative;
        width: 100vw;
    }

    .end-holder{
        position: absolute;
        background-color: #FFFBF9;
        padding: 20px 110px;
        border-radius: 5px;
        z-index: 2;
        width: 79%;
        height: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 4999px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        flex-flow: column;
    }

    .end-holder h2{
        font-size: 16px;
        margin-bottom: 0px;
        letter-spacing: 0.96px;

    }

    .end-holder p{
        font-size: 12px;
        letter-spacing: -0.12px;
        margin-bottom: 0px;
    }
    .end-btn{
        margin-top: 0px;
        font-size: 12px;
        padding: 20px;
        letter-spacing: 0.72px;
    }

    #process{
        padding: 50px;
    }

    .process-item-title{

        margin-top: 0px;
        font-size: 18px;

    }

    .process-item-subtitle{
        font-size: 12px;
    }

    .process-item-description {
        font-size: 14px;
    }

    .vertical-line {
        position: relative;
        height: 700px; 
        width: 2px;
        background-color: #bfc5c8;  
        margin: 50px 50px;
        float: left;
        margin-left: 0px;
        margin-top: 0px;
    }

    .vertical-line::before {
        display: none;
    }
    .circle {
        position: absolute;
        left: 50%;
        width: 15px;
        height: 15px;
        background-color: #bfc5c8;
        border: 4px solid #FFFBF9;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }


    .circle:nth-child(1) { top: 4%; }
    .circle:nth-child(2) { top: 33.5%; }
    .circle:nth-child(3) { top: 60%; }
    .circle:nth-child(4) { top: 85.5%; }

    .process-container
    {
        display: flex;
        justify-content: flex-start; /* Align all items to the left */
        gap: 10px;
        flex-direction: row;
    }

    .process-action-container{
        align-items: left;
        text-align: left;
        display: block;
    }

    .process-button
    {
        background-color: #A2B4C0;
        padding: 30px 40px;
        border-radius: 5px;
        width: 200px;
        color: #0E100F;
        font-size: 15px;
        text-align: center;
        cursor: pointer;
        margin-top: 45px;
    }
    .process-button:hover
    {
        background-color: #C7D1D9;
    }

    .process-item-container
    {
        display: flex;
        flex-direction: column; 
        gap: 10px;
        margin-bottom: 80px;
    }
    .process-title-container{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: flex-start; 
        align-items: center; 
        gap: 10px;

    }

    .footer {
        background-color: #f4ece6; 
        border-top: 1px solid black;
    }

    /* Sección superior del footer */
    .footer-top {
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid black;
        align-items: stretch;
        text-align: center;
        flex-direction: row;
    }


    .footer-section {
        flex: 1;
        text-align: center;
        display: flex; 
        flex-direction: row; 
        justify-content: center;
        align-items: center; 
        padding: 30px;
    }


    .footer-section:not(:first-child) {
        border-left: 1px solid black;
        display: flex; 
        flex-direction: column;
        justify-content: center; 
        align-items: center; 
    }

    .footer-section.logo {
        flex: 0.5; 
    }

    .footer-section.address, 
    .footer-section.contact {
        flex: 1.25; /* Ocupan más espacio */
    }


    .logo {
        width: 110px;
    }


    .contact a {
        display: block;
        color: black;
        text-decoration: none;
        margin-bottom: 5px;
    }

    .social-icons {
        margin-top: 10px;
        display: flex; /* Asegura que los íconos se alineen en fila */
        gap: 10px; /* Espaciado entre los íconos */
    }

    .social-icons img {
        margin-right: 0; /* Elimina el margen derecho innecesario */
        opacity: 0.7;
        transition: opacity 0.3s ease-in-out;
    }
    .social-icons img:hover {
        opacity: 1;
    }

    .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        background-color: #e3d8ce;
        height: 80px;
    }

    .footer-bottom-container {
        max-width: 1350px; 
        width: 100%; 
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .footer-links a {
        margin-left: 20px;
        text-decoration: none;
        color: black;

    }

    .footer-title{
        font-size: 14px;
        line-height: 18px;

    }
    .footer-info{

        font-size: 14px;
        line-height: 21px;
    }

    .footer-image{
        width: 100vw;
        height: 81px;
        background-image: url('../images/FooterImage.png');
        background-size: cover; 
        background-position: center; 
        background-repeat: no-repeat; 
    }
}

@media (min-width: 850px) {

    .testi-banner{
        display: none;
    }

    .navbar {
        width: 100vw; 
        background-color: #282C2F; 
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30px 60px; 
    }

    .container{
        max-width: 1440px;
        padding: 0px;
    }

    .nav-links {
        display: flex;
        gap: 40px; /* Espaciado entre elementos */
        align-items: center;
    }

    .nav-links a {
        color: white;
        text-decoration: none;
        font-size: 15px;
        text-transform: uppercase;
        font-family: nText Medium;
        line-height: 150%;
        letter-spacing: 0.01em;
    }
    .trusted::before{
        margin-top: 0px;
    }

    .test-desk{
        display: block;
    }
    .test-mob{
        display: none;
    }

    #testimonials{
        padding-top: 80px;
        background-color: #F0E6E0;
        color: #282C2F;
        position: relative;
        padding-bottom: 180px;

    }
    .t-header{
        margin-left: 110px;
    }
    .testimonial-section-title{
        color: #282C2F;
        font-size: 52px;
        font-family: Display Medium;
        line-height: 90%;
        margin-bottom: 110px;
        text-align: left;
        padding: 0px;
    }
    .testimonial-subtitle{
        margin-right: 30px;
        color: #282C2F;
        font-size: 20px;
        line-height: 30px;
        font-family: nText;
        margin-bottom: 70px;
        text-align: left;
        padding: 0px;
    }

    .slider-container {
        width: 100%;
        height: 660px;
        overflow: hidden;
    }
    .myslider{
        height: 660px;
        display: flex; 
        width: 8000px;
    }
    .slider-item {
        width: 565px;
        height: 660px;
        border-top: 1px solid black;
        border-right: 1px solid black;
        border-bottom: 1px solid black; 
        position: relative;
    }

    .slider-starter{
        border-top: 1px solid black;
        border-right: 1px solid black; 
        border-bottom: 1px solid black; 
        height: 660px;
        width: 100px;
        position: relative;
    }
    .bottom-starter{
        width: 100px;
        height: 100px;
        background-color: #B89C84;
        position: absolute;
        bottom: 0px;
        border-top: 1px solid black;
        border-right: 1px solid black;
    }
    .bottom-item{
        width: 565px;
        height: 80px;
        position: absolute;
        bottom: 0px;
        border: 1px solid black;
        display: none;
    }
    .bottom-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        height: 80px;
        background-color: #222; 
    }
    .grid-item {
        color: #F0E6E0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gi-black{
        background-color: #0E100F;
    }
    .gi-gray
    {
        background-color: #282C2F;
    }
    .grid-item {
        border-right: 1px solid #333;
        border-bottom: 1px solid #333;
        font-family: Now;
        font-size: 12px;
        line-height: 18px;
        color: #F0E6E0;
    }

    .grid-item:nth-child(2n) {
        border-right: none;
    }

    .grid-item:nth-last-child(1),
    .grid-item:nth-last-child(2) {
        border-bottom: none;
    }
    .testimonial-logo{
        margin-bottom: 40px;
        width: 107px;
    }
    .testimonial-title{
        font-size: 22px;
        line-height: 150%;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        display: block;
        margin-bottom: 40px;
    }
    .testimonial-description{
        position: absolute;
        top: 240px;
        font-size: 18px;
        font-family: nText;
        line-height: 150%;
        letter-spacing: -0.01em;
        padding-right: 40px;
    }

    .testimonial-name-container{
        position: absolute;
        bottom: 40px;
        left: 40px;
        width: 100%;
        display: flex;
        justify-content: flex-start; /* Align all items to the left */
        align-items: center; /* Vertically center all items */
        gap: 10px;
    }
    .testimonial-name{
        font-family: Display Bold;
        font-size: 20px;
        line-height: 98%;
        margin-bottom: 3px;

    }
    .testimonial-position{
        font-family: nText;
        font-size: 16px;
        line-height: 150%;
        letter-spacing: -0.01em;
        text-align: left;
    }
    .col-fixed{
        width: 50px; 
    }
    .col-auto {
        flex: 1; 
    }


    .dots {
        position: absolute;
        display: flex;
        gap: 8px; 
        left: 220px;
        bottom: 70px;
    }

    .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ddd; 
        transition: background-color 0.3s ease;
    }

    .selected {
        background-color: #222; 
    }

    .buttons {
        position: absolute;
        display: flex;
        gap: 16px;
        right: 220px;
        bottom: 55px;
    }
    .button-container {
        position: relative; 
        display: inline-block;
    }

    .buttons img {
        cursor: pointer;
        display: block;
        transition: filter 0.3s ease-in-out;
        position: relative;
        z-index: 1;
        width: 46px;
    }

    .button-on::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 46px; 
        height: 46px;
        background: rgba(0, 0, 0, 0);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        transition: background 0.1s ease-in-out;
    }

    .button-on:hover::after {
        background: rgba(0, 0, 0, 0.3); 
    }

    .slider-ender{
        border-top: 1px solid black;
        border-right: 1px solid black; 
        border-bottom: 1px solid black; 
        height: 660px;
        width: 1700px;
        position: relative;
    }
    .bottom-ender{
        width: 1700px;
        height: 100px;
        background-color: #B89C84;
        position: absolute;
        bottom: 0px;
        border-top: 1px solid black;;
    }


        #process{
            padding: 70px;
        }
}
@media(min-width: 950px){
    .n-mob{
        display: none;
    }
    .n-desk{
        display: block;
    }
    #how_it_works{
        height: auto;
    }
    .usual-col{
        height: 600px;
    }
    .usual-mob{
        display: none;
    }
    .usual-desk{
        display: block;
    }
    .usual-container-left{
        position: absolute;
        right: 30px;
        text-align: right;
    }
    .usual-container-right{
        position: absolute;
        left: 30px;
        text-align: left;
    }
    .underlying-logo
    {
        margin-left: 80px;
        width: 151px;
    }

    .usual-container-left h3{
        margin-right: 82px;
        font-size: 28px;
        height: 101px;

    }
    .underlying-div{
        margin-top: 50px;
        height: 100px;
    }
    .underlying-title-right{
        font-size: 20px;
        line-height: 100%;
        text-align: right;
        display: block;
        font-family: Display Bold;
    }
    .underlying-description-right{
        font-size: 20px;
        line-height: 100%;
        text-align: right;
        font-family: Display;
    }

    .underlying-title{
        font-size: 20px;
        line-height: 100%;
        text-align: left;
        display: block;
        font-family: Display Bold;
    }
    .underlying-description{
        font-size: 20px;
        line-height: 100%;
        text-align: left;
        font-family: Display;
    }
    .underlying-image{
        width: 100vw;
        height: 144px;
        background-image: url('../images/UsualBanner.png');
        background-size: cover; 
        background-position: center; 
        background-repeat: no-repeat; 
    }

    #faq{


    }

    .process-item-title{

        font-size: 24px;

    }
    .process-item-subtitle{
        font-size: 15px;
    }

    .process-item-description {
        font-size: 18px;
    }
    .dots{
        bottom: 90px;
    }
    .buttons {
        bottom: 80px;
    }

    .end-holder{
        gap: 30px;
    }

    .end-holder h2{
        font-size: 26px;
        letter-spacing: 1.56px;

    }

    .end-holder p{
        font-size:15px;
        letter-spacing: -0.15px;

    }
    .end-btn{
        font-size: 12px;
        letter-spacing: 0.9px;
        width: 350px !important;
    }

}

@media (min-width: 1000px){

    .navbar{
        position: fixed;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        z-index: 999999999;
    }
    .shownav{
        opacity: 1;
    }
    .hero
    {
        height: 747px;
        width: 100vw;
        display: flex;
        flex-direction: row;
        color: #282C2F;
    }
    .hero-content{
        flex-grow: 1;
        background-color: #F0E6E0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        padding: 0px;
    }

    .content{
        width: 80%;
        max-width: 630px;
        text-align: left;
    }
    .hero-image{
        width: 549px;
        height: 100%;
        background-color: black;
        padding-top: 0px;
        display: block;
    }

    .trusted{
        display: inline-block;
        position: relative;
        text-decoration: none;
        font-size: 12px;
        line-height: 21px;
        padding-left: 110px;
        margin-bottom: 50px;
        white-space: nowrap;
        letter-spacing: 0.12px;
    }
    .trusted::before {
        content: "★ ★ ★ ★ ★"; 
        position: absolute !important;
        display: inline-block !important;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        text-align: left;
        margin: 0;
    }
    h1{
        font-size: 45px;
        margin-top: 0px;
    }
    .hero-text{

        font-size: 14px;
        letter-spacing: -0.14px;
        margin-top: 50px;

    }

    #process{
        padding: 80px;
    }

    #testimonials{
        padding-bottom: 200px;

    }

}
@media(min-width:  1122px)
{
    .usual-col{
        height: 650px;
    }
    .trusted{
        font-size: 15px;
        letter-spacing: 0.15px;
    }
    h1{
        font-size: 50px;
        margin-bottom: 0px;
    }
    .hero-text{
        font-size: 18px;
        letter-spacing: -0.18px;
    }
    .hero-row {
        display: flex;
        align-items: center;
        margin-top: 50px; 
        width: 100%;
        flex-direction: row;
    }

    .col-5{
        flex: 0;
        text-align: center; 
    }
    .col-7{
        flex: 1;
        text-align: center;
    }

    .hero-button 
    {
        width: 236px;
        margin-top: 0px;
    }
    .hero-button:hover
    {
        background-color: #C6B09D;
    }

    .action-text{
        margin-top: 5px;
    }

    .why-desk{
        display: block;
    }
    .why-mob{
        display: none;
    }

    #why_us{
        background-color: white;
        color: #282C2F;
        padding-top: 80px;
        padding-bottom: 80px;
        height: auto;
    }

    .top-title{
        font-size: 15px;
        line-height: 140%;
        letter-spacing: 0.15px;
    }
    .section-title{
        font-size: 52px;
        letter-spacing: 0.52px;
    }
    .section-info{
        font-size: 18px;
        line-height: 27px;
        letter-spacing: -0.01em;
        letter-spacing: -0.18px;
    }
    .why-us-container
    {
        gap: 50px;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px 30px;

    }

    .why-us-box{
        padding: 60px 65px;
        border-radius: 5px;
        color:#282C2F;
        max-width: 600px;
    }
    .why-us-box h3{
        font-size: 30px;
        margin-bottom: 35px;
        line-height: 70px;
        letter-spacing: ;
        font-family: 'Display Bold';
    }

    .atribute-title{
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 10px;
        font-family: 'Display Bold';
        text-align: left;
        display: block;
    }
    .atribute-description{
        font-size: 14px;
        line-height: 24px;
        text-align: left;
        font-family: nText;
        letter-spacing: -0.14px;

    }
    .why-atribute{
        margin-top: 70px;
        text-align: left;
    }

    .usual-container-left h3{
        padding-top: 40px;
        margin-right: 82px;
        font-size: 36px;
    }
    .underlying-div{
        margin-top: 70px;
        height: 100px;
    }


    .end-holder h2{
        font-size: 36px;
        letter-spacing: 1.44px;

    }

        

    
}
@media (min-width: 1300px){
    h1{
        font-size: 60px;
    }

    .hero-text{
        font-size: 20px;
        letter-spacing: -0.2px;
    }
    

    .why-us-box h3{
        font-size: 36px;
    }

    .atribute-title{
        font-size: 24px;
        line-height: 24px;
        margin-bottom: 10px;
        font-family: 'Display Bold';
        text-align: left;
        display: block;
    }
    .atribute-description{
        font-size: 16px;
        letter-spacing: -0.16px;
    }

    .usual-container-left h3{
        padding-top: 40px;
        margin-right: 95px;
        font-size: 36px;
    }

    .underlying-title-right{
        font-size: 24px;

    }
    .underlying-description-right{
        font-size: 24px;
    }

    .underlying-title{
        font-size: 24px;
    }
    .underlying-description{
        font-size: 24px;
    }
    .end-holder{
        gap: 40px;
    }
    .end-holder p{
        width: 800px;

    }
}