/* Globals */

*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

.section {
    padding: 1.5rem 0 !important;
}

/* Vars */
:root {
    --color-primary-main: #4D77FE;
    --color-primary-secondary: #3960ED;
    --color-primary-dark: #2D33CC;
    --color-primary-xdark: #2E2EFF;
    --color-primary-xlight: #EDF5FF;
    --color-primary-light: #DAEDFF;
    --color-black-color: #202020;
}

/* Utils */

.button--primary {
    /* background: linear-gradient(to bottom, var(--color-primary-main), var(--color-primary-dark)); */
    background-color: var(--color-primary-xdark);
    border: none;
    padding: 1rem 2.5rem;
    border-radius: .85rem;
    color: white;
    font-weight: 700;
    transition: all ease .2s;
    cursor: pointer;

    &:hover {
        opacity: 0.7;
    }
}

.button--secondary {
    background-color: white;
    border: none;
    border: 1px solid var(--color-primary-light);
    padding: 1rem 2.5rem;
    border-radius: .85rem;
    color: var(--color-primary-xdark);
    font-weight: 700;
    transition: all ease .2s;
    cursor: pointer;

    & a {
        text-decoration: none;
        color: var(--color-primary-xdark);
    }

    &:hover {
        opacity: 0.7;
        border: 1px solid var(--color-primary-dark);
    }
}

.element--hide {
    display: none !important;
}

.container-section {
    max-width: 1366px !important;
    margin: 0 auto;
}

.main-title {
    color: var(--color-black-color);
    font-size: 2.5rem;

    &>.main-title--primary-main {
        color: var(--color-primary-xdark);
    }

    &>.main-title--secondary-main {
        color: var(--color-primary-xdark)
    }
}

.title-main--primary--dark {
    color: var(--color-primary-xdark);
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0;
}

.title-secondary {
    color: var(--color-black-color);
    font-size: 1.5rem;

    &>.main-title--primary-main {
        color: var(--color-primary-dark);
    }

    &>.main-title--secondary-main {
        color: var(--color-primary-dark)
    }
}

.title-tertiary {
    color: var(--color-black-color);
    font-size: 1rem !important;
    font-weight: 700;

    &>.main-title--primary-main {
        color: var(--color-primary-dark);
    }

    &>.main-title--secondary-main {
        color: var(--color-primary-dark)
    }
}

.subtitle-main--medium {
    color: var(--color-black-color);
    font-weight: 400;
}

.background-primary {
    width: 100%;
    background-color: var(--color-primary-xlight);
    background-image: url('../icons/background-lines.svg');
}

.stop-list-icon {
    border: 2px solid var(--color-primary-light);
    border-radius: 50%;
    padding: .5rem;
    display: flex;
    place-content: center;
    margin: 0 .5rem 0 0;
    background-color: white;
}

.list-icon-primary-light {
    border: 2px solid var(--color-primary-light);
    border-radius: 50%;
    padding: .65rem;
    display: flex;
    place-content: center;
    margin: 0 .5rem 0 0;
    background-color: var(--color-primary-xlight);
    width: 1.15rem;
    height: 1.15rem;
}

.list-icon-white {
    border: 2px solid var(--color-primary-light);
    border-radius: 50%;
    padding: .65rem;
    display: flex;
    place-content: center;
    margin: 0 .5rem 0 0;
    background-color: white;
    width: 1.15rem;
    height: 1.15rem;
}

.section-title-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: .75rem;

    & p,
    h3 {
        margin: 0;
    }

    & button {
        margin: 1.5rem 0 0 0;
    }
}

.section-title-description-box {
    display: flex;
    align-items: center;
}

.hidden {
    display: none;
}

/* Header */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 100%;
    padding: .5rem 1rem 0 1rem;
}

.nav-menu {
    position: absolute;
    left: -30rem;
    top: 5rem;
    transition: all ease .3s;
    background-color: white;
    padding: 2rem 0 2rem 0;
    z-index: 100;
}

.mobile--visible {
    left: 0rem;
    top: 5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    & li {
        padding: 0 0 .75rem 0
    }
}

.logo-icon {
    object-fit: contain;
    width: 11rem;
}

.nav-links {
    list-style: none !important;
    padding: 0;
}

.nav-links li a {
    text-decoration: none;
    color: inherit;
    transition: all ease .3s;

    &:hover {
        color: var(--color-primary-main);
        font-weight: 700;
    }
}

.nav-link--active {
    font-weight: 700;
    color: var(--color-primary-dark) !important;
}

.navMobileIcon {
    border: none;
    background: none;
}

.header-buttons-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.header-badge-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0;
}

.header-badge {
    border: 1px solid var(--color-primary-light);
    border-radius: 1rem;
    padding: .25rem 1rem;
}

.hero-img {
    max-width: 100%;
}

.trusted-section {
    text-align: center;
}

.trusted-brands-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.desgin-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    & h3 {
        margin: 0;
    }
}

.trusted-brands-box {
    background-color: white;
    width: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    border-radius: .5rem;
    border: 2px solid var(--color-primary-light);
    padding: 1rem;
    text-align: center;
    gap: .5rem;

    & p {
        margin: 0;
    }
}

.desing-brand-cards-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0 0 0;
    gap: 1rem;
}

.stop-list {
    display: flex;
    align-items: center;
}

.stop-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &>div h3 {
        text-align: center;
    }

    &>div .stop-button {
        margin: 2rem auto 0 auto;
        width: 100%;
    }
}

.smart-section-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    & button {
        margin: 2rem auto 0 auto;
    }
}

.smart-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    &>h3 {
        margin: 0 !important;
        max-width: 35rem;
    }

    &>img {
        margin: 3rem 0 0 0;
    }
}

.smart-section-container-cards {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 3rem auto 0 auto;
}

.smart-section-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 1rem;

    & .smart-section-card-icon {
        background-color: white;
        width: 2rem;
        height: 2rem;
        border: 2px solid var(--color-primary-light);
        border-radius: 50%;
        display: flex;
        place-content: center;
    }
}

.getStarted-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    & h3 {
        margin: 0;
    }

    & button {
        margin: 3rem 0 0 0;
    }
}

.getStarted-section-cards-container {
    margin: 3rem 0 0 0;
}

.getStarted-section-card {
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.steps-badge {
    border: 1px solid var(--color-primary-light);
    border-radius: 1rem;
    background-color: var(--color-primary-xlight);
    color: var(--color-primary-xdark);
    width: fit-content;
    padding: .5rem .75rem;
}

.review-slider-box {
    background-color: white;
    width: 100%;
    max-width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    margin: 1rem 0 0 0;
    text-align: center;
    border-radius: .5rem;
    border: 1px solid var(--color-primary-light);
    gap: 1rem;
    transition: transform 0.6s ease, opacity 0.6s ease;
    transform-style: preserve-3d;
}

.review-slider-box-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* .fade-out {
    transform: rotateY(90deg);
    opacity: 0;
}

.fade-in {
    transform: rotateY(0deg);
    opacity: 1;
} */

.review-card-user {
    display: flex;
    align-items: center;
    gap: 1rem;

    & p {
        margin: 0;
    }
}

.review-avatar {
    max-width: 100%;
    border-radius: 50%;
    width: 5rem;
    height: 4rem;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.user-icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--color-primary-xlight);
    display: flex;
    justify-content: center;
    align-items: center;
}

.review-star-box {
    display: flex;
}

.review-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 2rem 0 0 0;
}

.review-navigation-dots-container {
    display: flex;
    gap: .75rem;
}

.review-navigation-dot--active {
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    background-color: var(--color-primary-xdark);
}

.review-navigation-dot--inactive {
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    background-color: var(--color-primary-light);
}

.beta-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    &>h3 {
        margin: 0 !important;
    }

    &>p {
        max-width: 38rem;
    }
}

.beta-section-card {
    border: 1px solid var(--color-primary-light);
    border-radius: .5rem;
    background-color: var(--color-primary-xlight);
    padding: 0 1rem 1rem 1rem;
    width: 80%;
    max-width: 25rem;
    margin: 3rem 0 0 0;

    & button {
        margin: 8rem 0 0 0;
        width: 100%;
    }
}

.beta-section-card-list {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    text-align: start;
    margin: 2rem 0 0 0;
}

.frequently-asked-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.frequenly-cards-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    width: 100%;
}

.frequenly-card-box {
    background-color: white;
    align-items: center;
    padding: 0 1rem;
    border: 1px solid var(--color-primary-light);
    border-radius: .5rem;
    margin: 0 auto;
    transition: all ease 2s;
}

.frequenly-card-content {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    width: 100% !important;
}

.frequenly-card--expanded {
    background-color: var(--color-primary-main);
    /* background: linear-gradient(to bottom, var(--color-primary-main), var(--color-primary-dark)); */

    & * {
        color: white
    }

}

.ready-to-win-section {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.footer-main-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-social {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    &>img {
        width: 7rem;
        height: 3rem;
    }

    &>.social-box {
        display: flex;
        justify-content: start;
        gap: 0;
    }
}

.footer-list {
    list-style-type: none;
    padding: 0;

    & li,
    a {
        text-decoration: none;
        color: var(--color-black-color);
        margin: 1rem 0 0 0;

        &:hover {
            color: var(--color-primary-dark);
            font-weight: bold;
        }
    }
}

.footer-suscription {
    & input {
        height: 2.75rem;
        border-radius: .5rem;
        border: 1px solid var(--color-primary-light);
        padding: 0 0 0 1rem;
        margin: 0 1rem 0 0;
    }

    & span {
        color: var(--color-primary-main);
        text-decoration: underline;
    }

    & p,
    span {
        font-size: .75rem;
    }
}

.footer-secondary-section {
    display: flex;
    flex-direction: column;

    & p {
        padding: 0;
        margin: .5rem 0 0;
    }

    &>p {
        color: gray;
    }

    & div {
        display: flex;
        justify-content: space-between;

        & p {
            color: var(--color-primary-xdark);
            text-decoration: underline;
        }
    }
}

/* 
@media (width <= 1250px) {
...
}
*/

/* tablet */
@media (width >=834px) {
    .navMobileIcon {
        display: none;
    }

    .nav-menu {
        position: static;
        display: flex;
        align-items: center;
        padding: 0;
    }

    .nav-links {
        display: flex;
        gap: 1rem;
        margin: 0 3rem 0 0;
    }

    .main-title {
        font-size: 3rem;
    }

    .title-secondary {
        font-size: 2.25rem;
    }

    .title-tertiary {
        font-size: 1.2rem;
    }

    .header-buttons-section {
        flex-direction: row;
        justify-content: center;
        margin: 2rem 0 0 0;
    }

    .header-badge-section {
        flex-direction: row;
        margin: 4rem 0 0 0
    }

    .hero-section {
        display: flex;
        align-items: center;
        gap: 1rem;

        &>div {
            max-width: 50%;
        }
    }

    .trusted-brands-section {
        flex-direction: row;
    }

    .trusted-section {
        display: flex;
        text-align: start;
        justify-content: space-between;

        &>h3 {
            max-width: 25rem;
        }
    }

    .stop-section {
        flex-direction: row-reverse;
        align-items: center;

        &>div h3 {
            text-align: start;
            margin: 1rem 0 !important;
            max-width: 30rem;
        }

        &>div .stop-button {
            margin: 1.2rem auto 0 auto;
            width: auto;
        }

        &>div {
            width: 50%;
            max-width: 50%;
        }

        .first-section {
            padding: 0 0 0 2rem;
        }

    }

    .smart-section-container-cards {
        display: grid;
        max-width: fit-content;
        place-items: center;
        grid-template-columns: 1fr 1fr 1fr;

        & div {
            max-width: 23rem;
        }
    }

    .getStarted-section-cards-container {
        display: grid;
        max-width: fit-content;
        place-items: center;
        gap: 2rem;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 4rem 0 0 0;

        & div {
            max-width: 30rem;
        }
    }

    .review-slider-box {
        padding: 3rem 3rem;
    }

    .frequently-asked-section {
        display: flex;
        flex-direction: row;
        justify-content: space-between;


        & h3 {
            max-width: 20rem;
        }

        & div {
            width: 65%;
        }
    }

    .frequenly-cards-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
        align-items: start;
        & div {
            width: 44%;
        }
    }

    .frequenly-card {
        width: 90% !important;
    }

    .footer-main-content {
        flex-direction: row;
    }

    .footer-secondary-section {
        flex-direction: row;
        justify-content: space-between;

        & div {
            gap: 1.5rem;
        }
    }

    .desing-brand-cards-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;

        & .trusted-brands-box {
            width: 31%;
            display: flex;
            flex-direction: row;
            justify-content: start;
            text-align: start;
        }
    }

    .smart-section-card {
        text-align: start;
        align-items: center;
    }

    .footer-list {
        display: flex;
        gap: 1rem;
    }
}