@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html,
body {
    scroll-behavior: smooth;
    background: #041600;
    color: #fff;
    user-select: none;
}

.bg-welcome {
    background: rgba(0, 0, 0, 0) radial-gradient(circle, #6c9f5f -70%, #041600) repeat scroll 0 0;
}

ul,
li,
ol {
    list-style: none;
}

:root {
    --e-global-color-accent: #61CE70;
    --e-global-color-dec3a41: #15770A;
    --e-global-color-ecaab8b: #209303;
    --e-global-color-de1bf9d: #EDBF06;
    --e-global-color-02cf3c6: #21A200;
    --e-global-color-6415fc3: #161B16;
    --e-global-color-1cbe281: #1D271B;
    --e-global-color-a6699a2: #0B2C03;
}

.container {
    max-width: 1200px;
    padding: 10px 20px;
    margin: 0 auto;
}

.btn {
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
}

.btn:hover {
    opacity: .7;
}

.btn-mobile {
    display: none;
}

.btn-bet,
.btn-go-modality {
    background: #209303;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    margin: 10px 0;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    display: flex;
    width: max-content;
    text-decoration: none;
}

.btn-go-modality {
    margin-left: auto;
}


.content-modalities {
    display: flex;
    justify-content: first baseline;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-modalities {
    background: #209303;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    display: flex;
    width: max-content;
    text-decoration: none;
}

.btn-back {
    border: 2px solid #fff;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    display: flex;
    width: max-content;
    text-decoration: none;
}

img[alt="Img Animal Description Groups"] {
    max-width: 750px;
    width: 100%;
}

.mobile {
    display: none;
}

h1 {
    font-size: 2rem;
}

.header-welcome {
    position: relative;
}

.header-welcome {
    background: #041600;
    padding: 10px;
    height: 45px;
    text-align: center;
}

.header-welcome>a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
}

@keyframes blink-animation {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.nav-main {
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px;
    margin: auto;
}

.nav-main ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.nav-main ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
}

.container-welcome {
    margin: 30px auto;
}

.text-landing {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
}

.text-welcome p {
    opacity: .7;
}

/* .text-welcome {
    visibility: hidden;
} */

.lear-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    margin: 10px;
}

.lear-more:hover p {
    opacity: 1;
}

.lear-more p {
    opacity: .4;
}

.scroll-downs {
    display: flex;
    margin: auto;
    width: 23px;
    height: 55px;
}

.mousey {
    width: 3px;
    padding: 5px 8px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 25px;
    opacity: 0.75;
    box-sizing: content-box;
}

.scroller {
    width: 3px;
    height: 10px;
    border-radius: 25%;
    background-color: #fff;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15, .41, .69, .94);
    animation-iteration-count: infinite;
}

@keyframes scroll {
    0% {
        opacity: 0;
    }

    10% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}

.content-benefits {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 35px;
    margin: 40px 0;
}

.card {
    max-width: 300px;
    background: #21682a;
    border-radius: 5px;
    margin-top: 40px;
    padding: 45px 20px 20px;
    flex-grow: unset;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    transition: .25s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: relative;
    text-align: center;
    background: radial-gradient(#093710d9 20%, #21682a 80%), url(../imgs/bg-card.jpg);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid #edbf06;
}

.card h2 {
    color: #EDBF06;
}

.card p {
    font-weight: 500;
}

.card:hover {
    transform: scale(1.06);
    opacity: 1;
}

.icon-card {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translate(-50%, 0px);
    height: 80px;
    width: 80px;
    background: #21682a;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border: 2px solid #edbf06;
}

.bg-lotopix-forbet {
    background-image: url("../imgs/bg-article.jpg");

    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.bg-lotopix-forbet::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    /* backdrop-filter: blur(5px); */
    background: rgba(4, 22, 0, 0.5);
}

.bg-lotopix-forbet::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0) radial-gradient(circle, transparent -90%, #041600) repeat scroll 0 0;
    top: 0;
}

.content-info {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap-reverse;
    padding: 80px 0;
}

.content-info .text-info {
    flex: 1 380px;
    max-width: 550px;
}

.text-info h1 {
    color: #209303;
}

.about-game {
    background-image: url("../imgs/bg-article-second.jpg");


    background-attachment: fixed;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.about-game::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    /* backdrop-filter: blur(5px); */
    background: rgba(4, 22, 0, 0.8);
}

.about-game::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    /* backdrop-filter: blur(5px); */
    background: rgba(0, 0, 0, 0) radial-gradient(circle, transparent -90%, #041600) repeat scroll 0 0;
    top: 0;
}

.container-about {
    display: flex;
    gap: 10px;
    padding: 50px 20px;
    position: relative;
    z-index: 1;
}

.sustain-about {
    min-width: 500px;
    position: relative;
}

.about-title {
    width: 500px;
    z-index: 999;
    transition: 1s ease;
}

.about-title.fixed {
    position: fixed;
    top: 0px;
    padding-top: 50px;
}

.about-title.bottom {
    position: absolute;
    bottom: 0;
    transition: 1s ease;
    padding-bottom: 50px;
}

.about-title p {
    font-size: 14px;
    opacity: .6;
}

.about-list {
    margin-top: 50px;
}

.about-list ul li {
    margin: 0 20px 20px;
}

.about-list ul li h1 {
    font-size: 1.5rem;
    color: #209303;
}

.about-list ul li p {
    font-size: 14px;
    padding: 10px 0;
    border-bottom: 1px solid;
    opacity: .7;
}

.method-payments {
    position: relative;
    background: rgba(0, 0, 0, 0) radial-gradient(circle, #15770a -70%, #041600) repeat scroll 0 0;
}

/* .method-payments::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 4px;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgb(237 191 6 / 40%);
    filter: blur(10px);
}

.method-payments::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 4px;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgb(237 191 6 / 40%);
    filter: blur(10px);
    z-index: 2;
} */

.container-method-payments {
    padding: 50px 20px;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.container-method-payments h1 {
    color: #fff;
    border-bottom: 2px solid #EDBF06;
    width: inherit;
}

.results-quotation {
    background-image: url("../imgs/bg-article-tirth.png");


    background-attachment: fixed;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.results-quotation::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    /* backdrop-filter: blur(5px); */
    background: rgba(4, 22, 0, 0.8);
}

.results-quotation::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    /* backdrop-filter: blur(5px); */
    background: rgba(0, 0, 0, 0) radial-gradient(circle, transparent -90%, #041600) repeat scroll 0 0;
    top: 0;
}

.container-info-game {
    position: relative;
    z-index: 1;
    padding: 50px 20px;
}

.container-modalities,
.container-quotation {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.container-modalities .text {
    text-align: end;
}

.container-modalities div,
.container-quotation div {
    flex: 1;
}

.footer {
    border-top: 2px solid;
}

.container-footer {
    padding: 50px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: start;
    align-items: stretch;
    position: relative;
}

.content-footer h1 {
    font-size: 1rem;
}

.content-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content-footer h2,
.content-footer p,
.content-footer a {
    font-weight: 400;
    opacity: .6;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
}

.back-top {
    padding: 10px;
    border-radius: 100px;
    border: 2px solid #EDBF06;
    color: #EDBF06;
    position: absolute;
    right: 10px;
    background: transparent;
    cursor: pointer;
}

.back-top:hover {
    transform: scale(1.05);
}

/* MODALITIES */
#descriptionText {
    display: flex;
    flex-direction: column;
}

#descriptionText img {
    margin: 10px auto;
}

.lot-lp {
    color: #61ce70;
    text-shadow: 0 0 5px #6c9f5f69;
}


@media (max-width: 890px) {
    .container-about {
        flex-direction: column;
    }

    .about-title.fixed {
        position: relative !important;
    }

    .about-title.absolut {
        position: relative !important;
    }

    .about-title {
        gap: 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .about-title h1 {
        border-bottom: 2px solid;
        width: max-content;
        margin: auto;
    }

    .sustain-about {
        min-width: 0;
    }

    .container-modalities {
        flex-direction: column;
        gap: 20px;
    }

    .container-quotation {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .container-modalities .view-lotopix,
    .container-quotation .view-lotopix {
        width: 100%;
    }

    .container-modalities .text,
    .container-quotation .text {
        text-align: center;
    }

    .btn-go-modality {
        margin: 10px auto 0;
    }

    @media (max-width: 700px) {
        h1 {
            font-size: 1.5rem;
        }

        .hello p:first-child {
            font-size: 1em;
        }

        h2 {
            font-size: 1rem;
        }

        p {
            font-size: 14px;
        }

        .nav-main ul,
        .change-lang {
            display: none;
        }

        .btn-mobile {
            display: block;
            position: relative;
            background: #61ce70;
            padding: 10px 20px;
            color: #fff;
            border-radius: 100px;
            font-weight: 800;
        }

        .mobile {
            /* display: flex; */
            position: absolute;
            z-index: 3;
            background: #61ce70;
            right: 110%;
            top: 0%;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 15px;
            border-radius: 5px;
            white-space: nowrap;
            gap: 15px;
        }

        .mobile.open {
            display: flex !important;
        }

        .mobile ul {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .mobile ul,
        .mobile .change-lang {
            display: flex !important;
        }
    }



}