/*#region LottoMatik page */
#lottomatik-page {
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    box-sizing: border-box;
}

#lottomatik-page {
    height: 100%;
    width: 100%;
    background-color: #F2F8FC;
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
    color: #333333;
}

    #lottomatik-page .wrapper {
        width: 100%;
    }

    #lottomatik-page .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 60px 20px;
        width: 100%;
        margin-bottom: 30px;
    }

    #lottomatik-page .intro {
        margin-bottom: 40px;
        text-align: center;
    }

    #lottomatik-page .logo {
        width: 100%;
        max-width: 262px;
        height: auto;
    }

    #lottomatik-page .title {
        font-size: 30px;
        font-weight: 700;
    }

    #lottomatik-page .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #lottomatik-page .carousel-container {
        flex: 1;
        width: 100%;
        max-width: 500px;
        position: relative;
        margin: 40px auto;
        user-select: none;
        -webkit-user-select: none;
    }

    #lottomatik-page .carousel-slide {
        display: none;
        user-select: none;
        -webkit-user-select: none;
    }

        #lottomatik-page .carousel-slide img {
            width: 100%;
            height: auto;
            user-select: none;
            -webkit-user-select: none;
        }

    #lottomatik-page .prev, #lottomatik-page .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        user-select: none;
        -webkit-user-select: none;
    }

    #lottomatik-page .prev {
        left: -40px;
        background: url('data:image/webp;base64,UklGRl4BAABXRUJQVlA4WAoAAAAQAAAAdwAAdwAAQUxQSIEAAAABYFTbVpUbgQhEIAIRaCARjEATbWCEF8EIRHgR/A/PcqYRochtI6Uws3zEJ+i7hdmsIDFs2+YB6m3LVHes45+eo0OtTnV9GJoT8Y/o8iQgGjVr2bbNRYRt22ZYrEjM2Mp4/wR80YXk2NSw+7M6VsmxqtsvowJWSVB5FJHFLOvDhAIAVlA4ILYAAAAQCwCdASp4AHgAAAAAJaQAVxL+AH6AfjD3+sdM5Ttox8k36fvX732Fcgq/nUH6uJibQaDifRhPVxMTaIUzHeO6GJD/7vHyJNGEr2MPFELxuL9RXaDiTRhK9VbJOzJ401YAAP7/327UAZ5wTGUeP2ia7ovDh5uPCUKlKBMxtYKNe9ABLEURPG4KxJJ4xIA1eksHK//KaBuu0gafiSfk023f/5QJhlSYRsAAAAAi3KzcGjo3AAAAAA==') center center / contain no-repeat;
    }

    #lottomatik-page .next {
        right: -40px;
        background: url('data:image/webp;base64,UklGRl4BAABXRUJQVlA4WAoAAAAQAAAAdwAAdwAAQUxQSIEAAAABYFTbVpUbgQhEIAIRaCARjEATbWCEF8EIRHgR/A/PcqYRochtI6Uws3zEJ+i7hdmsIDFs2+YB6m3LVHes45+eo0OtTnV9GJoT8Y/o8iQgGjVr2bbNRYRt22ZYrEjM2Mp4/wR80YXk2NSw+7M6VsmxqtsvowJWSVB5FJHFLOvDhAIAVlA4ILYAAAAQCwCdASp4AHgAAAAAJaQAVxL+AH6AfjD3+sdM5Ttox8k36fvX732Fcgq/nUH6uJibQaDifRhPVxMTaIUzHeO6GJD/7vHyJNGEr2MPFELxuL9RXaDiTRhK9VbJOzJ401YAAP7/327UAZ5wTGUeP2ia7ovDh5uPCUKlKBMxtYKNe9ABLEURPG4KxJJ4xIA1eksHK//KaBuu0gafiSfk023f/5QJhlSYRsAAAAAi3KzcGjo3AAAAAA==') center center / contain no-repeat;
        transform: rotate(180deg);
    }

        #lottomatik-page .prev:hover, #lottomatik-page .next:hover {
            background: url('data:image/webp;base64,UklGRggEAABXRUJQVlA4WAoAAAAQAAAAdwAAdwAAQUxQSIEAAAABYFTbVpUbgQhEIAIRaCARjEATbWCEF8EIRHgR/A/PcqYRochtI6Uws3zEJ+i7hdmsIDFs2+YB6m3LVHes45+eo0OtTnV9GJoT8Y/o8iQgGjVr2bbNRYRt22ZYrEjM2Mp4/wR80YXk2NSw+7M6VsmxqtsvowJWSVB5FJHFLOvDhAIAVlA4IGADAABQFwCdASp4AHgAAAAAJTdwYAAjwP4B+QGqFcA/AD8jecM0C7M/qx/Zcvg4A/gH4AfvD9/+cA/QD+Afgb++X0a/gH8A/AD9/+4B/Gv4B/APzj4wD9AP4B9f/MAfrF6AH8b/gHwAfoB+gHwB/xj+Gfyz6//95+AH8A6wD+AfwD7//qX6AfyX8AP0A/P3v8SONNomJArtRs6rw69k6YxJiwoBWLjTZbNzhGf7NhDFsTHlno04fQBXWvgsIGG0Wot+stennAAA/v327UKv9CRzRoe3CpzTCDlr2xlXhKR7VtfSB8lqn/5EZUYK2OXWWf3MQZTLN+/loexv8iVD+qZD8iO/CPgq0V0Vv6/6U1uH57/Vp+OBTt94l3NWCG4Ftd1AZx1l3ADzPN07/39nD5vs+SpOQkvvaIRM0An8jMi3nD9CRzRoe3CpzTCDlr2xlXhKR7VtfSB8lqn/uwEpM1scuss/uYgymWXUcUg1Hb1M4bqQ5islnhRO/Pl75l1maaDEGXq3dQTwka89NyOPdXeVlUPnIZJSdVCx/d3bCL28me8MEWLp3s/Q2z6F/Rs0sL3+rT8cCnb1wA+6mxO7+IJ9Ck2uqn2vPlOfj4+GrkN//7GP1Xo8tQWWfyF0cIU2L2FeFE9F215CiR/3Kj6ktR1f+hlWzpbIVO9G//8ju0KWOPlJUvAPPhmdrlXBi2/QgBo3/mjM9Uobf+FuqgomgRx/Q2z6F/Rs0sL3+rT8cCnb1wA+6mxO7+IJ9Ck2uqn2vPlOfgGf9htRUTDJ0CrbKnoaELMnlFK7kCV3ew24rRmAdWgL7l+zqduy/uKQ/fprdc/6UNCs7cLMULnwNAXAaQjb7RavpZeYmg9lFskCY9dUhcBr7fHo4BFZV4wERjm+BTNawPJgCGwGimJGVk0ynbg5jDmZrdns1AaKYbFxYPyw0jnQ7fA1dJ8ZO7BhlXNpxriB0D9v39U6fjZUSsg5ufwRRXyPyHUrkljgRurJBBSp/KDO+R+P/GwmfCUpba937rh65HSqyfRwgHkNre3XccQbgALvjiHxzyIa3XIBopjEme0IXHo/KRTUItFriYHxWEDBga3E58oIoPgauk6iXX3WSZ3SZUqjsxuJoi5Dwa2EIb5H5C2vO0acyUEH3DGgGCoAAAA=') center center / contain no-repeat;
        }

    #lottomatik-page .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

#lottomatik-page .button {
    display: block;
    background-color: #0750E1;
    padding: 20px 25px;
    border: none;
    max-width: 266px;
    font-weight: bold;
    color: white;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
}

    #lottomatik-page .button:hover {
        background-color: #053699;
    }

@media only screen and (max-width: 768px) {
    #lottomatik-page {
        font-size: 20px;
    }

        #lottomatik-page .container {
            text-align: center;
        }

        #lottomatik-page .prev {
            left: 0;
        }

        #lottomatik-page .next {
            right: 0;
        }

        #lottomatik-page .button {
            font-size: 18px;
            max-width: unset;
        }
}
/*#endregion*/

/*#region LottoMatik FAQ */
#lottomatik-q1 {
    margin: 0px;
    padding: 0px 0px 0px 10px;
    font-size: 16px;
    box-sizing: border-box;
}

#lottomatik-q1 {
    height: 100%;
    width: 100%;
    /*background-color: #F2F8FC;*/
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
    color: #333333;
}

#lottomatik-q1 img {
    width: 100%;
    height: auto;
}

#lottomatik-q1 a {
    text-decoration: none;
    color: #333333;
    font-size: inherit;
}

    #lottomatik-q1 h1 {
        padding: 0;
        margin: 0 0 40px;
        font-size: 34px;
        font-weight: 700;
        text-align: center;
    }

    #lottomatik-q1 .wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #lottomatik-q1 .container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 1020px;
        padding: 20px;
    }

    #lottomatik-q1 .row {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 60px 0 40px;
    }

        #lottomatik-q1 .row:first-child {
            margin-top: 0px;
        }

    #lottomatik-q1 .intro-title {
        display: flex;
        flex-direction: column;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 30px;
    }

    #lottomatik-q1 .logo {
        width: 100%;
        max-width: 262px;
        height: auto;
    }

    #lottomatik-q1 .intro-subtitle {
        width: 100%;
        max-width: 300px;
        height: auto;
    }

    #lottomatik-q1 .intro-body {
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 20px;
    }

    #lottomatik-q1 .intro-image {
        flex: 1 0 450px;
        height: auto;
    }

    #lottomatik-q1 .how-wrapper {
        display: flex;
        gap: 100px;
    }

    #lottomatik-q1 .how-card {
        display: flex;
        position: relative;
        width: 100%;
        max-width: 340px;
        background: transparent;
        padding: 50px 0px;
        border-radius: 16px;
        line-height: 22.5px;
    }

        #lottomatik-q1 .how-card::before {
            content: url('data:image/webp;base64,UklGRvgBAABXRUJQVlA4WAoAAAAQAAAAEQAAHgAAQUxQSH8AAAABf2CQbaQfwYbwJu/P9RIRkdPLIW7BUW3bavPCUxSAU1IQK5GQOIi0eGgFoIA/LX9GBRH9V9i2bcN0776RdiDGHcWiL15FL4wCwQnjWVD9HFV/uXpgPAimP774ctWbVxvGh6JQDGtvQYH6k9XP7S0LcE+ME8Eb7yA4o0SUliAAAFZQOCBSAQAAcAoAnQEqEgAfAAAAACWxrlUYWTHgb2b8AOQM1i7Afq5/XMu94A/jX5HewD+AfkB1AH8W/Iz3AOgB+gH+3/wHv/9IB+gHAAeSr/Vf5X8B/6k/sP7kH8sCaGTliPwA/v+C8XPvQF5Wcf/6cPfquVhY9uZmdnhG7sdzPp68kiTLaMWr5eHbqF1n86SGb9n40/HtzMz//jTT9Z0d+1mel5xqgXrSGCNRyHzp8yxAmOWa4es6O/azR//2xb///9GdHqHAXKdzLL8qPxd7HlBSGpWdiSnS09HQQ0WwrBX//ncSlnf/aScalDGO6DX448lS7y/k+ednfXhs5ajiqCwxUVx6fA+ZYvA7PYvjBf/7zfW2+FlGb3GiSwoNqKbsVBzz3FkQLOzumlbcO93HI2k23sm01i///QoYG88zyKNNUFCvKuOuTWsfQdWCo5Hcrpr90uAAAAA=');
            position: absolute;
            top: 50%;
            right: -60px;
            transform: translateY(-50%);
            display: block;
            height: 28px;
            width: 16px;
        }

        #lottomatik-q1 .how-card:last-child::before {
            content: '';
            display: none;
        }

    #lottomatik-q1 .how-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 2;
    }

    #lottomatik-q1 .how-icon {
        width: 100%;
        max-width: 40px;
    }

    #lottomatik-q1 .how-title {
        font-size: 14px;
        font-weight: 700;
        color: #0750E1;
    }

    #lottomatik-q1 .how-steps {
        position: absolute;
        top: 85px;
        right: 0px;
        display: block;
        font-size: 200px;
        color: #DAEBFF;
        text-align: right;
        font-weight: 700;
        opacity: 0.7;
        z-index: 1;
    }

    #lottomatik-q1 .why-wrapper {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
        width: 781px;
    }

    #lottomatik-q1 .why-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 247px;
        height: 203px;
        background-color: #E3EDFA;
        padding: 40px 26px 0;
        text-align: center;
        line-height: 20px;
        border-radius: 12px;
    }

    #lottomatik-q1 .why-title {
        font-size: 18px;
        font-weight: 700;
        color: #0750E1;
        margin-bottom: 20px;
    }

    #lottomatik-q1 .why-content {
        font-size: 14px;
    }

    #lottomatik-q1 .contact {
        width: 100%;
    }

    #lottomatik-q1 .contact-subtitle {
        text-align: center;
        margin-bottom: 40px;
    }

    #lottomatik-q1 .contact-wrapper {
        display: flex;
        gap: 56px;
        width: 100%;
        padding: 43px 26px 40px;
        border-radius: 12px;
        border: 1px solid #00000033;
    }

    #lottomatik-q1 .contact-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-basis: 50%;
        position: relative;
        font-size: 14px;
    }

    #lottomatik-q1 .contact-icon {
        width: 33px;
        height: auto;
        margin-bottom: 23px;
    }

    #lottomatik-q1 .contact-title {
        font-weight: 700;
        color: #0750E1;
        margin-bottom: 20px;
    }

    #lottomatik-q1 .contact-bg {
        position: absolute;
        right: 0;
    }

    #lottomatik-q1 .button {
        display: block;
        background-color: #0750E1;
        padding: 20px 25px;
        border: none;
        max-width: 250px;
        font-weight: bold;
        color: white;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        transition: all 0.3s ease-in-out;
        border-radius: 8px;
    }

        #lottomatik-q1 .button:hover {
            background-color: #053699;
        }

@media only screen and (max-width: 768px) {
    #lottomatik-q1 .row {
        flex-direction: column;
        text-align: center;
    }

    #lottomatik-q1 .intro {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #lottomatik-q1 .intro-title {
        align-items: center;
    }

    #lottomatik-q1 .intro-image {
        flex: 0;
    }

    #lottomatik-q1 .how-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: left;
        gap: 68px;
    }

    #lottomatik-q1 .how-card {
        max-width: 260px;
    }

        #lottomatik-q1 .how-card::before {
            bottom: -34%;
            right: 50%;
            top: unset;
            transform: rotate(90deg) translate(-50%, -50%);
        }

    #lottomatik-q1 .why-wrapper {
        width: 100%;
    }

    #lottomatik-q1 .why-card {
        width: 100%;
    }

    #lottomatik-q1 .contact-wrapper {
        flex-direction: column;
        align-items: center;
    }

    #lottomatik-q1 .contact-card {
        align-items: center;
    }
}
/*#endregion*/