@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

:root {
    --color-bg1: #0D0E31;
    --color-bg2: #0D0E31;
    --color1: 47, 35, 133;
    --color2: 40, 29, 114;
    --color3: 47, 35, 133;
    --color4: 40, 29, 114;
    --color5: 47, 35, 133;
    --circle-size: 90%;
    --blending: hard-light;
    --color-primary: #FFF158;
    --color-green: #55F05B;
    --color-yellow: #FFC75A;
    --color-red: #FF5A5A;
    --color-primary-alpha: hsla(230, 78%, 62%, 0.3);
    --color-green-alpha: hsla(122, 78%, 62%, 0.3);
    --color-yellow-alpha: hsla(39, 78%, 62%, 0.3);
    --color-red-alpha: hsla(0, 78%, 62%, 0.3);
}

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


body,
html {
    height: 100%;
    width: 100%;
}

body {
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    background-color: #000000;
    overflow-y: auto;
    color: #FFF;

    .background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: url('../img/background.jpg') no-repeat center center fixed;
        background-size: cover;
        background-attachment: fixed;
        opacity: 0.7;

        @media screen and (max-width: 1024px) {
            background-attachment: scroll;
            opacity: 0.6;
        }
    }

    @media screen and (max-width: 1024px) {
        font-size: 14px;
        height: auto;
        padding: 60px 0;
    }
}

h1,
h2,
h3 {
    font-family: "Roboto Slab", serif;
    font-weight: 400;
    font-style: normal;
}

h1 {
    font-size: 2rem;
}

main {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wrap {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;

    &.wrap-XL {
        max-width: 1400px;
    }

    &.wrap-L {
        max-width: 1200px;
    }

    &.wrap-M {
        max-width: 800px;
    }

    &.wrap-S {
        max-width: 400px;
    }
}

.mt8 {
    margin-top: 8px;
}

.mt16 {
    margin-top: 16px;
}

.mt24 {
    margin-top: 24px;
}

.mt32 {
    margin-top: 32px;
}

.mt40 {
    margin-top: 40px;
}

.mt60 {
    margin-top: 60px;
}

.mb8 {
    margin-bottom: 8px;
}

.mb16 {
    margin-bottom: 16px;
}

.mb24 {
    margin-bottom: 24px;
}

.mb32 {
    margin-bottom: 32px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb60 {
    margin-bottom: 60px;
}


.mr8 {
    margin-right: 8px;
}

.mr16 {
    margin-right: 16px;
}

.mr24 {
    margin-right: 24px;
}

.mr32 {
    margin-right: 32px;
}

.mr40 {
    margin-right: 40px;
}


.ml8 {
    margin-left: 8px;
}

.ml16 {
    margin-left: 16px;
}

.ml24 {
    margin-left: 24px;
}

.ml32 {
    margin-left: 32px;
}

.ml40 {
    margin-left: 40px;
}


.flex {
    display: flex;
}

.alignCenter {
    align-items: center;
}

.justifyCenter {
    justify-content: center;
}

.flexRow {
    flex-direction: row;
}

.flexCol {
    flex-direction: column;
}

.flexColRev {
    flex-direction: column-reverse;
}

.flexRowRev {
    flex-direction: row-reverse;
}

.flexWrap {
    flex-wrap: wrap;
}

.flexWrapRev {
    flex-wrap: wrap-reverse;
}

.flexWrapRev {
    flex-wrap: wrap-reverse;
}

.gap8 {
    gap: 8px;
}

.gap16 {
    gap: 16px;
}

.gap24 {
    gap: 24px;
}

.gap32 {
    gap: 32px;
}

.gap40 {
    gap: 40px;
}

.gap60 {
    gap: 60px;
}


a {
    cursor: pointer;
    text-decoration: none;
}



button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    background-color: var(--color-primary);
    color: #1E2522;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    min-width: 200px;
    outline: none;
    border: none;
}

main {
    .logo {
        max-width: 300px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 32px;
    }

    h1 {
        margin-bottom: 16px;
        text-align: center;
    }

    .content {
        margin-bottom: 32px;
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        @media screen and (max-width: 1024px) {
            max-width: 80%;
        }
    }
}


h3 {
    margin-bottom: 24px;
    font-size: 1.5rem;
    text-align: center;
}

.social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    @media screen and (max-width: 1024px) {
        flex-direction: column;
    }
    li {
        a {
            display: inline-block;
            vertical-align: middle;
            img {
                width: 40px;
                height: 40px;
                display: inline-block;
                vertical-align: middle;
                margin-right: 8px;
            }
        }

    }
}

.trustpilot-widget {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        background-color: #fff;
        color: #000;
        padding: 24px;
        border-radius: 8px;
        font-weight: 600;
        @media screen and (max-width: 1024px) {
            flex-direction: column;
            .gap8 {
                gap: 8px;
            }
        }
    }
    img {
        height: 50px;
        display: inline-block;
    }
}




/* =====
    SCROLLBAR
  ===== */

/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: hsl(231, 33%, 20%);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: hsl(231, 33%, 20%);
}

*::-webkit-scrollbar-thumb {
    background-color: hsl(231, 33%, 40%);
}



/* =====
    END SCROLLBAR
  ===== */