@charset "UTF-8";

@font-face {
    font-family: 'Lato-Regular';
    font-display: swap;
    src: url(./fonts/Lato-Regular.woff);
}

@font-face {
    font-family: 'Lato-Bold';
    font-display: swap;
    src: url(./fonts/Lato-Bold.woff);
}

@font-face {
    font-family: 'Lato-Light';
    font-display: swap;
    src: url(./fonts/Lato-Light.woff);
}

@font-face {
    font-family: 'Lato-Medium';
    font-display: swap;
    src: url(./fonts/Lato-Medium.woff);
}

@font-face {
    font-family: 'Lato-SemiBold';
    font-display: swap;
    src: url(./fonts/Lato-SemiBold.woff);
}

:root {
    --color0: #212827;
    --color1: #4a5c50;
    --color2: #6e7969;
    --color3: #c69348;
    --color4: #e7e0d5;
    --color5: #f2f3ed;
    --color6: #fff;
    --color7: #ebe6cd;
    --color8: #ededed;
    --color9: #555;
    --color10: #f7f7f7;
    --color11: #6e7969;
    --color12: #f9f9f9;
    --color12: #dcdcdc;

    --default-font: 'Arial, Verdana, Helvetica, sans-serif';
    --font1: 'Lato-Regular';
    --font2: 'Lato-Bold';
    --font3: 'Lato-Light';
    --font4: 'Lato-Medium';
    --font5: 'Lato-SemiBold';
}

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

a {
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth
}

li {
    list-style: none;
    cursor: pointer;
}

body {
    width: 100%;
    max-width: 192rem;
    margin: auto;
    background-color: var(--color6);
}

.in-view {
    color: var(--color3) !important;
}

input[type="number"]:focus,
input[type="email"]:focus {
    outline: none;
}

.plans {
    display: block;
    width: 100%;
    max-width: 38rem;
    padding: 1.1rem;
    border: none;
    border-radius: 10rem;
    background: var(--color5);
    display: flex;
    justify-content: center;
    align-items: center;
    font: 500 2.1rem/2.1rem var(--font4);
    letter-spacing: -0.02em;
    color: var(--color1);
    transition: 300ms;
}

header {
    width: 100%;
    max-width: 192rem;
    margin: auto;
    position: fixed;
    top: 0;
    z-index: 10;
    background-color: var(--color5);
}

header .menu-top-mobile {
    display: none;
}

header .container-one-desktop {
    width: 100%;
    max-width: 156rem;
    margin: auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .container-one-desktop .container-one-desktop-logo {
    width: 100%;
    max-width: 29rem;
    height: auto;
}

header .container-one-desktop nav {
    width: 100%;
    max-width: 85.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
}

header .container-one-desktop nav ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .container-one-desktop nav ul li {
    font: 400 2.2rem/5.7rem var(--font1);
    letter-spacing: -0.02em;
    color: var(--color1);
    transition: 100ms;
}

header .container-one-desktop nav ul li:hover {
    color: var(--color3);
}

header .container-one-desktop nav .nav-btn {
    width: 100%;
    border-radius: 10rem;
    font: 400 1.9rem/1.9rem var(--font1);
    letter-spacing: -0.02em;
    color: var(--color6);
    transition: 300ms;
}

header .container-one-desktop nav .representation {
    max-width: 23.2rem;
    margin: 0 -2rem 0 1.2rem;
    padding: 0.8rem 1.8rem;
    background-color: var(--color0);
}

header .container-one-desktop nav .representation:hover {
    background-color: var(--color3);
}

header .container-one-desktop nav .login {
    max-width: 11.5rem;
    padding: 0.8rem 3.6rem;
    background-color: var(--color3);
}

header .container-one-desktop nav .login:hover {
    background-color: var(--color2);
}

.header {
    background: url('./assets/bg-section-one.png') center center no-repeat;
    background-size: cover;
    width: 100%;
    max-width: 192rem;
    margin: 11.5rem auto 0;
    height: 60.3rem;
}

.header .container-three {
    width: 100%;
    max-width: 134rem;
    margin: auto;
    padding: 0 1rem;
}

.header .container-three h1 {
    font: 300 5.4rem/5.7rem var(--font3);
    letter-spacing: -0.02em;
    color: var(--color7);
    width: 100%;
    max-width: 78.2rem;
    padding: 13.1rem 0 0 0;
}

.header .container-three .plans {
    margin: 3.8rem 0 0 0;
}

.header .container-three .plans::after {
    content: url('./assets/right-arrow.png');
    margin-left: 0.8rem;
}

.header .container-three .plans:hover {
    cursor: pointer;
    color: var(--color5);
    background-color: var(--color3);
}

.header .container-three .plans:hover:after {
    content: url('./assets/right-arrow-light.png');
    margin-left: 0.8rem;
}

.header .bg-mobile {
    display: none;
}

@media (max-width: 1440px) {
    header .container-one-desktop .container-one-desktop-logo {
        max-width: 20rem;
    }

    .header {
        margin: 7.613rem auto 0;
    }
}

@media (max-width: 1366px) {
    header #menuDesktop {
        display: none;
    }

    header .menu-top-mobile {
        display: block;
        width: 100%;
        max-width: 136.5rem;
        margin: auto;
        padding: 1rem 1rem;
    }

    header .menu-top-mobile .container-one-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    header .menu-top-mobile .container-one-mobile-logo {
        width: 100%;
        max-width: 16rem;
    }

    header .menu-top-mobile .container-one-mobile .toggle {
        position: relative;
        width: 3.2rem;
        height: 3.5rem;
        right: 0;
        float: right;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100000;
        cursor: pointer;
    }

    header .menu-top-mobile .container-one-mobile .toggle::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 0.42rem;
        border-radius: 5rem;
        background-color: var(--color1);
        transform: translateY(-1rem);
        box-shadow: 0 1rem 0 var(--color1);
        transition: 300ms;
    }

    header .menu-top-mobile .container-one-mobile .toggle.active::before {
        transform: translateY(0) rotate(45deg);
        box-shadow: 0 0 0 #4a5c50;
    }

    header .menu-top-mobile .container-one-mobile .toggle::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 0.42rem;
        border-radius: 5rem;
        background-color: var(--color1);
        transform: translateY(1rem);
        transition: 300ms;
    }

    header .menu-top-mobile .container-one-mobile .toggle.active::after {
        transform: translateY(0) rotate(-45deg);
    }

    header .menu-top-mobile .menu-top-mobile-active {
        display: none;
    }

    header .menu-top-mobile .menu-top-mobile-active .line {
        display: inline-block;
        width: 100%;
        height: 0.1rem;
        background-color: var(--color1);
        margin: 1.6rem auto 1.4rem;
    }

    header .menu-top-mobile .menu-top-mobile-active nav {
        display: flex;
        margin: auto;
        padding: 0 2rem;
    }

    header .menu-top-mobile .menu-top-mobile-active ul {
        width: 100%;
        padding-top: 1rem;
    }

    header .menu-top-mobile .menu-top-mobile-active ul.left li {
        font: 400 2rem/2rem var(--font1);
        color: var(--color1);
        transition: 100ms;
        margin: 0 auto 2rem;
    }

    header .menu-top-mobile .menu-top-mobile-active ul.left li:hover {
        color: var(--color3);
    }

    header .menu-top-mobile-active nav .nav-btn {
        display: block;
        width: 100%;
        margin-left: auto;
        border-radius: 10rem;
        font: 400 1.9rem/1.9rem var(--font1);
        letter-spacing: -0.02em;
        color: var(--color6);
        transition: 300ms;
    }

    header .menu-top-mobile-active nav .representation {
        max-width: 23.2rem;
        padding: 0.8rem 1.8rem;
        background-color: var(--color0);
        margin-bottom: 1.8rem;
    }

    header .menu-top-mobile-active nav .representation:hover {
        background-color: var(--color3);
    }

    header .menu-top-mobile-active nav .login {
        max-width: 11.5rem;
        padding: 0.8rem 3.6rem;
        background-color: var(--color3);
    }

    header .menu-top-mobile-active nav .login:hover {
        background-color: var(--color2);
    }

    .header {
        margin: 7.93rem auto 0;
    }

    .header .container-three h1 {
        font-size: 5rem;
        line-height: 6rem;
        max-width: 69rem;
    }
}

@media (max-width: 1023px) {
    .header {
        background: url('./assets/bg-section-one-mobile.png') center right no-repeat;
        background-size: cover;
        width: 100%;
        max-width: 102.3rem;
        height: 62.446rem;
    }

    .header .container-three {
        max-width: 95rem;
    }

    .header .container-three h1 {
        font-size: 4.5rem;
        line-height: 5.5rem;
        max-width: 48rem;
        padding: 9rem 0 0 0;
    }
}

@media (max-width: 900px) {
    .header {
        height: 55rem;
    }

    .header .container-three {
        max-width: 78rem;
    }

    .header .container-three h1 {
        font-size: 3.8rem;
        line-height: 4.8rem;
        max-width: 41rem;
    }

    .header .container-three .plans {
        max-width: 32rem;
    }
}

@media (max-width: 767px) {
    .header {
        height: 46rem;
        background-position: center;
    }

    .header .container-three {
        max-width: 70rem;
    }

    .header .container-three h1 {
        font-size: 3.4rem;
        line-height: 4.4rem;
        max-width: 36rem;
        padding: 7rem 0 0 0;
    }
}

@media (max-width: 539px) {
    .plans {
        font: 500 1.5rem / 1.5rem var(--font4);
    }

    header .menu-top-mobile .menu-top-mobile-active ul.left li {
        font-size: 1.6rem;
        line-height: 1.6rem;
    }

    header .menu-top-mobile .menu-top-mobile-active ul.left li:hover {
        color: var(--color3);
    }

    header .menu-top-mobile .menu-top-mobile-active nav {
        padding: 0 1rem;
    }

    header .menu-top-mobile-active nav .nav-btn {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    header .menu-top-mobile-active nav .representation {
        max-width: 20.1rem;
        margin-bottom: 1rem;
    }

    header .menu-top-mobile-active nav .login {
        max-width: 9rem;
        padding: 0.8rem 2.6rem;
    }

    .header {
        height: 33rem;
    }

    .header .container-three {
        max-width: 50rem;
    }

    .header .container-three h1 {
        font-size: 2.4rem;
        line-height: 3.4rem;
        max-width: 26rem;
        padding: 5rem 0 0 0;
    }

    .header .container-three .plans {
        max-width: 21rem;
        margin: 3rem 0 0 0;
    }
}

@media (max-width: 425px) {
    .header {
        height: 33rem;
    }

    .header .container-three {
        max-width: 40rem;
    }

    .header .container-three h1 {
        font-size: 2.2rem;
        line-height: 3.2rem;
        max-width: 25rem;
        padding: 5rem 0 0 0;
    }
}

@media (max-width: 374px) {
    header .menu-top-mobile .menu-top-mobile-active ul.left li {
        font-size: 1.4rem;
        line-height: 1.4rem;
    }

    header .menu-top-mobile-active nav .nav-btn {
        font-size: 1.4rem;
        line-height: 1.4rem;
    }

    header .menu-top-mobile-active nav .representation {
        padding: 0.8rem 1.5rem;
    }
}