:root {
    --colors-black: #000;
    --colors-white: #FFF;

    --colors-red-100: #FEE7E6;
    --colors-red-200: #FDB2AE;
    --colors-red-300: #FC7D76;
    --colors-red-400: #FA473E;
    --colors-red-500: #F91206;
    --colors-red-600: #C10E05;
    --colors-red-700: #890A03;
    --colors-red-800: #510602;
    --colors-red-900: #190201;

    --colors-orange-100: #FEEFE6;
    --colors-orange-200: #FDCCAE;
    --colors-orange-300: #FCA976;
    --colors-orange-400: #FA863E;
    --colors-orange-500: #F96306;
    --colors-orange-600: #C14D05;
    --colors-orange-700: #893603;
    --colors-orange-800: #512002;
    --colors-orange-900: #190A01;

    --colors-grey-100: #F2F2F2;
    --colors-grey-200: #D6D5D5;
    --colors-grey-300: #BAB8B8;
    --colors-grey-400: #9E9A9A;
    --colors-grey-500: #827D7D;
    --colors-grey-600: #656161;
    --colors-grey-700: #474545;
    --colors-grey-800: #2A2929;
    --colors-grey-900: #0D0D0D;

    --colors-bluishgrey-100: #EEEFF0;
    --colors-bluishgrey-200: #C8CCD0;
    --colors-bluishgrey-300: #A3A9B0;
    --colors-bluishgrey-400: #7D868F;
    --colors-bluishgrey-500: #57636F;
    --colors-bluishgrey-600: #444D56;
    --colors-bluishgrey-700: #30363D;
    --colors-bluishgrey-800: #1C2024;
    --colors-bluishgrey-900: #090A0B;

    --primary-100: var(--colors-red-100);
    --primary-200: var(--colors-red-200);
    --primary-300: var(--colors-red-300);
    --primary-400: var(--colors-red-400);
    --primary: var(--colors-red-500);
    --primary-600: var(--colors-red-600);
    --primary-700: var(--colors-red-700);
    --primary-800: var(--colors-red-800);
    --primary-900: var(--colors-red-900);

    --secondary-100: var(--colors-orange-100);
    --secondary-200: var(--colors-orange-200);
    --secondary-300: var(--colors-orange-300);
    --secondary-400: var(--colors-orange-400);
    --secondary: var(--colors-orange-500);
    --secondary-600: var(--colors-orange-600);
    --secondary-700: var(--colors-orange-700);
    --secondary-800: var(--colors-orange-800);
    --secondary-900: var(--colors-orange-900);

    --neutral-100: var(--colors-bluishgrey-100);
    --neutral-200: var(--colors-bluishgrey-200);
    --neutral-300: var(--colors-bluishgrey-300);
    --neutral-400: var(--colors-bluishgrey-400);
    --neutral: var(--colors-bluishgrey-500);
    --neutral-600: var(--colors-bluishgrey-600);
    --neutral-700: var(--colors-bluishgrey-700);
    --neutral-800: var(--colors-bluishgrey-800);
    --neutral-900: var(--colors-bluishgrey-900);

    --neutral-black: var(--colors-black);
    --neutral-white: var(--colors-white);

    --text-headings: var(--neutral-white);
    --text-paragraph: var(--neutral-100);
    --text-primary: var(--colors-red-100);
    --text-secondary: var(--secondary);
    --text-placeholder: var(--neutral-400);
    --text-input: var(--neutral-200);
    --text-button-primary: var(--primary-900);
    --text-button-primary-hover: var(--primary-800);
    --text-button-secondary: var(--secondary-100);
    --text-button-secondary-hover: var(--secondary-200);

    --background-body-first: var(--neutral-900);
    --background-body-second: var(--neutral-800);
    --background-box: var(--neutral-600);
    --background-input: var(--neutral-400);
    --background-button-primary: var(--primary-100);
    --background-button-primary-hover: var(--primary-400);
    --background-button-secondary: var(--secondary-400);
    --background-button-secondary-hover: var(--secondary-100);

    --font-name: Questrial;
    --font-weight-regular: 400;

    --padding-y: 80px;

    font-family: var(--font-name);
    font-weight: var(--font-weight-regular);

    background-color: var(--background-body-first);

    /* font-size: .8vw; */
    font-size: 16px;
}

html, body {
    overflow-x: hidden;
}

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

:has(> .navbar) {
    padding-top: 4.6875rem;
}

.navbar {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    
    background: var(--background-body-first);
    color: var(--text-paragraph);

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

        height: 4.4375rem;
        width: 100%;

        padding: .75rem 5%;

        .logo img {
            height: 100%;
        }

        .logo, .search {
            flex: 1 1 0;
        }

        .search {
            display: flex;
            align-items: center;
            justify-content: end;
            gap: 8px;

            .expandNav {
                display: none;
            }

            svg {
                -webkit-user-select: none;
                user-select: none;
                cursor: pointer;
            }
        }

        .items {
            flex: 0 0 0;

            white-space: nowrap;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
            
            > * {
                display: flex;
                align-items: center;

                padding: 0 0.9375rem;
                font-size: 1.25rem;

                -webkit-user-select: none;
                user-select: none;
                cursor: pointer;

                text-decoration: none;
                color: var(--text-headings);
            }

            .dropdown {
                display: flex;
                flex-direction: row;
                gap: .25rem;
            }
        }
    }

    .line {
        height: .25rem;
        width: 100%;
        background-color: var(--primary);
    }

    .products {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 2rem;
        padding: var(--padding-y) 5%;
        
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 450px;

        background: var(--background-body-first);

        transition: .3s opacity;

        &.hidden {
            pointer-events: none;
            opacity: 0;
        }

        .category {
            display: flex;
            flex-direction: column;

            a {
                color: var(--text-paragraph);
                font-size: 20px;
                text-decoration: none;
            }

            .title {
                font-size: 28px;
                color: var(--text-primary);
            }
        }
    }

    .searchmenu {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 40px 5%;
        
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        transition: .3s opacity;

        &.hidden {
            pointer-events: none;
            opacity: 0;
        }

        input {
            padding: 36px 48px;

            font-size: 40px;

            color: var(--text-paragraph);
            background: var(--background-body-first);

            border: none;
            outline: none;
        }

        .results:empty {
            display: none;
        }

        .results {
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding: 48px;

            background: var(--background-body-first);

            .result {
                display: flex;
                flex-direction: column;

                .parentcategory {
                    font-size: 24px;
                    color: var(--neutral-300);
                    text-decoration: none;
                }

                .category {
                    font-size: 40px;
                    color: var(--text-primary);
                    text-decoration: none;
                }
            }
        }
    }
    
    .colors {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        padding: var(--padding-y) 5%;
        
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        background: var(--background-body-first);

        transition: .3s opacity;

        &.hidden {
            pointer-events: none;
            opacity: 0;
        }

        a {
            color: var(--text-paragraph);
            font-size: 20px;
            text-decoration: none;
        }
    }

    .navbarfull {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        padding: var(--padding-y) 5%;
        
        position: fixed;
        inset: 0;

        background: color-mix(in srgb, var(--background-body-first) 70%, transparent);
        backdrop-filter: blur(16px);

        text-align: center;

        overflow-y: scroll;
        
        transition: .3s opacity;

        &.hidden {
            pointer-events: none;
            opacity: 0;
        }

        .dropdown {
            display: flex;
            flex-direction: row;
            gap: .25rem;
            align-items: center;
            justify-content: center;
        }

        > * {
            font-size: 30px;
            text-decoration: none;
            color: var(--text-headings);
            cursor: pointer;
        }

        .close {
            position: fixed;
            right: 16px;
            top: 16px;
            color: var(--text-headings);
            cursor: pointer;
        }
    }

    .productsfull {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: var(--padding-y) 5%;
        
        position: fixed;
        inset: 0;

        background: color-mix(in srgb, var(--background-body-first) 70%, transparent);
        backdrop-filter: blur(16px);

        transition: .3s opacity;

        overflow-y: scroll;

        &.hidden {
            pointer-events: none;
            opacity: 0;
        }

        .category {
            display: flex;
            flex-direction: column;
            text-align: center;

            a {
                color: var(--text-paragraph);
                font-size: 30px;
                text-decoration: none;
            }

            .title {
                font-size: 42px;
                color: var(--text-primary);
            }
        }

        .close {
            position: fixed;
            right: 16px;
            top: 16px;
            color: var(--text-headings);
            cursor: pointer;
        }
    }

    .colorsfull {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        padding: var(--padding-y) 5%;
        
        position: fixed;
        inset: 0;

        background: color-mix(in srgb, var(--background-body-first) 70%, transparent);
        backdrop-filter: blur(16px);

        text-align: center;

        overflow-y: scroll;
        
        transition: .3s opacity;

        &.hidden {
            pointer-events: none;
            opacity: 0;
        }

        > * {
            font-size: 30px;
            text-decoration: none;
            color: var(--text-headings);
            cursor: pointer;
        }

        .close {
            position: fixed;
            right: 16px;
            top: 16px;
            color: var(--text-headings);
            cursor: pointer;
        }
    }
}

.carousel {
    position: relative;
    width: 100%;
    height: 624px;

    background-color: var(--background-body-first);
    
    overflow: hidden;

    .text {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        inset: 0;

        color: var(--text-paragraph);
        font-size: 80px;

        text-align: center;
    }

    .overlay {
        position: absolute;
        inset: 0;

        background-color: #282828b3;
    }

    .images {
        display: flex;
        flex-direction: column;
        
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;

        animation: calc(var(--count, 1) * 10s) carousel linear infinite;

        .image {
            width: 100%;
            height: 624px;

            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}

.reviews {
    display: flex;
    flex-direction: column;
    gap: 26px;

    padding: var(--padding-y) 0;

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
        padding: 0 5%;

        text-align: center;

        h2 {
            font-size: 80px;
            font-weight: var(--font-weight-regular);
            color: var(--text-headings);
        }

        p {
            font-size: 24px;
            color: var(--text-paragraph);
        }

        .items {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 4px 14px;
            justify-content: center;

            color: var(--text-paragraph);

            img {
                object-fit: contain;
            }

            .rating {
                display: flex;
                flex-direction: row;
                gap: 7px;

                font-size: 30px;
                color: #F5C117;

                .stars {
                    display: flex;
                    flex-direction: row;
                }
            }

            .reviewcount, .link {
                font-size: 24px;
            }
            
            .link {
                color: var(--text-paragraph);
            }
        }
    }

    .reviewbox {
        padding: 48px 5%;
        width: 100%;

        background-color: var(--background-body-second);

        .reviewlist {
            display: flex;
            width: 100%;

            overflow: hidden;

            .reviewcontent {
                display: flex;
                flex-direction: row;
                gap: 24px;

                animation: calc(var(--count, 1) * 4s) reviewcontent linear infinite;

                .review {
                    display: flex;
                    flex-direction: column;
                    justify-content: start;
                    align-items: center;
                    gap: 13px;
                    padding: 32px 16px 0 16px;

                    width: 366px;
                    height: 404px;

                    background-color: var(--background-box);

                    .text {
                        color: var(--text-paragraph);
                        font-size: 20px;
                        text-align: center;
                    }

                    .stars {
                        display: flex;
                        flex-direction: row;
                    }

                    .line {
                        width: 218px;
                        height: 1px;

                        background: linear-gradient(to right, transparent, var(--primary), transparent);
                    }

                    .name {
                        font-size: 24px;
                        color: var(--text-headings);
                    }
                    
                    .date {
                        font-size: 20px;
                        color: rgb(173, 173, 173);
                    }
                }
            }
        }
    }
}

@keyframes reviewcontent {
    0% { transform: translateX(0px); }
    100% { transform: translateX(calc(var(--count, 1) * (-366px + -24px))); }
}

.star {
    position: relative;

    width: 22px;
    height: 22px;

    .fill {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: calc(100% * var(--fill, 1));
        overflow: hidden;
    }
}

.categories {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    padding: var(--padding-y) 5%;

    .items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 32px 16px;
        justify-content: center;

        .categoryitem {
            width: calc(50% - 8px);

            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;

            cursor: pointer;
            text-decoration: none;

            .image {
                width: 100%;
                aspect-ratio: 756/389;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;

                    transition: .3s scale;
                }
            }

            h3 {
                font-size: 32px;
                font-weight: var(--font-weight-regular);
                color: var(--text-headings);
            }
            
            p {
                font-size: 16px;
                color: var(--text-paragraph);
            }
            
            &:hover {
                .image img {
                    scale: 1.1;
                }

                h3, p {
                    color: var(--text-primary);
                }
            }
        }
    }
}

.numbers {
    padding: var(--padding-y) 5%;
    background-color: var(--background-body-second);

    .content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--padding-y) 0;

        .number {
            flex: 1;

            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            .big {
                font-size: 96px;
                -webkit-text-stroke: 2px var(--text-paragraph);
                text-stroke: 2px var(--text-paragraph);
                color: transparent;
            }

            p {
                font-size: 24px;
                color: var(--text-paragraph);
            }
        }
    }
}

.button.outline {
    padding: 16px 48px;
    border: 1px solid var(--background-button-primary);
    color: var(--background-button-primary);
    text-decoration: none;

    font-size: 20px;

    transition: .3s;
}

.button.outline:hover {
    border-color: transparent;
    background-color: var(--background-button-primary-hover);
    color: var(--text-button-primary-hover);
}

.badges {
    padding: var(--padding-y) 5%;
    background-color: var(--background-body-second);

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

        gap: 5%;

        .badge {
            flex: 1 0 0;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;

            height: 209px;

            font-size: 24px;
            color: var(--text-paragraph);
            text-align: center;

            border: 1px solid black;
            border-image: linear-gradient(to right, transparent, red, transparent) 1;
        }
    }
}

.howwework {
    display: flex;
    flex-direction: column;
    gap: 112px;
    padding: var(--padding-y) 5%;
    
    background-color: var(--background-body-first);

    color: var(--text-paragraph);

    h2 {
        font-weight: var(--font-weight-regular);
        font-size: 80px;
        color: var(--text-headings);
        text-align: center;
    }

    .items {
        display: flex;
        flex-direction: column;
        gap: 100px;

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

            height: 314px;

            img {
                flex: 5 0 0;
                height: 100%;

                object-fit: cover;
            }

            .space {
                flex: 1 0 0;
            }

            .box {
                flex: 6 0 0;
                
                padding: 48px;

                position: relative;
                height: 100%;

                background-color: var(--background-box);
                overflow: hidden;

                .number {
                    position: absolute;
                    right: 59px;
                    top: -75px;
                    
                    letter-spacing: -87px;
                    font-size: 474px;
                    color: var(--background-body-first);
                    
                    opacity: .1;

                    -webkit-user-select: none;
                    user-select: none;
                }

                h3 {
                    position: relative;
                    font-weight: var(--font-weight-regular);
                    font-size: 44px;
                    color: var(--text-primary);
                }
                
                p {
                    position: relative;
                    font-size: 28px;
                    color: var(--text-paragraph);
                }
            }
        }
    }
}

.references {
    padding: var(--padding-y) 0;
    background-color: var(--background-body-first);

    overflow: hidden;

    .items {
        display: inline-flex;
        flex-direction: row;
        gap: 89px;
        
        height: 76px;

        animation: calc(var(--count, 1) * 10s) references linear infinite;

        a {
            display: inline-block;
            
            height: 76px;

            text-decoration: none;

            img {
                display: inline-block;
                height: 100%;
            }
        }
    }
}

@keyframes references {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-51%); }
}

.contact {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: var(--padding-y) 5%;

    background-color: var(--background-body-second);

    > h2, > p {
        text-align: center;
    }

    h2 {
        font-weight: var(--font-weight-regular);
        font-size: 80px;
        color: var(--text-headings);
    }

    p {
        font-size: 28px;
        color: var(--text-paragraph);
    }

    .items {
        display: flex;
        flex-direction: row;
        gap: 16px;

        .box {
            list-style: none;
            flex: 1 1 50%;

            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 16px;

            position: relative;

            background-color: var(--background-box);

            .trflag {
                position: absolute;
                top: 16px;
                right: 14px;
            }

            li {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 8px;

                position: relative;

                svg {
                    min-width: 30px;
                }

                a {
                    color: var(--text-primary);
                    font-size: 24px;
                    text-decoration: none;
                }
            }

            form {
                display: flex;
                flex-direction: column;
                gap: 8px;
                height: 100%;

                overflow: hidden;

                * {
                    flex-grow: 1;
                }

                .inputs {
                    display: flex;
                    flex-direction: row;
                    gap: 8px;
                }

                input, button {
                    font-size: 20px;
                    width: 100%;
                    min-width: 0;
                    background-color: var(--background-input);
                    color: var(--text-input);
                    border: none;
                    outline: none;
                    padding: 16px;

                    &::placeholder {
                        color: currentColor;
                    }
                }

                button {
                    color: var(--text-button-primary);
                    background-color: var(--background-button-primary);
                    cursor: pointer;

                    transition: .3s;

                    &:hover {
                        color: var(--text-button-primary-hover);
                        background-color: var(--background-button-primary-hover);
                    }
                }
            }
        }
    }

    .copyright {
        font-size: 16px;
        color: var(--neutral);
        text-align: center;
    }
}

.header {
    display: flex;
    flex-direction: row;
    padding: 0 5%;
    margin-top: 32px;

    height: 250px;

    background-color: var(--background-box);

    > * {
        flex: 1 0 0;
    }

    .previous {
        display: flex;
        flex-direction: column;
        justify-content: center;

        a {
            display: flex;
            flex-direction: column;
            align-items: start;

            text-decoration: none;
        
            > span:nth-of-type(1) {
                font-size: 32px;
                color: var(--text-paragraph);
            }
        
            > span:nth-of-type(2) {
                display: flex;
                flex-direction: row;
                align-items: center;
        
                font-size: 24px;
                color: var(--text-primary);
            }
        }
    }

    .title {
        position: relative;
        flex-grow: 1.5;

        .previoustext {
            position: absolute;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);

            font-size: 24px;
            color: var(--text-primary);

            text-decoration: none;
        }
        
        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            width: 100%;

            font-size: 70px;

            color: var(--text-headings);
            text-align: center;
        }
    }
    
    .next {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;

        a {
            display: flex;
            flex-direction: column;
            align-items: end;

            text-decoration: none;
        
            > span:nth-of-type(1) {
                font-size: 32px;
                color: var(--text-paragraph);
            }
        
            > span:nth-of-type(2) {
                display: flex;
                flex-direction: row;
                align-items: center;
        
                font-size: 24px;
                color: var(--text-primary);
            }
        }
    }
}

.product {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: var(--padding-y) 5%;

    .info {
        padding: 64px 48px 32px 48px;
        position: relative;
        background-color: var(--background-box);
    
        .date {
            position: absolute;
            left: 16px;
            top: 12px;
    
            font-size: 24px;
            color: var(--text-placeholder);
        }
    
        .text {
            font-size: 32px;
            color: var(--text-paragraph);
        }
    }

    .image {
        width: 100%;
        
        img {
            width: 100%;
        }
    }
}

.aboutus {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: var(--padding-y) 5%;

    .paragraph {
        color: var(--text-paragraph);

        p {
            margin-top: 1em;
        }
    }
}

.whatsapp {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;

    position: fixed;
    right: 16px;
    bottom: 16px;

    font-size: 32px;
    color: #9DED92;

    background-color: #061e038f;

    text-decoration: none;
}

@media screen and (max-width: 1200px) {
    :root {
        --padding-y: 40px;
    }

    :has(> .navbar) {
        padding-top: 65px;
    }
    
    .navbar {
        .searchmenu {
            gap: 12px;

            input {
                padding: 18px 24px;
    
                font-size: 28px;
            }
    
            .results {
                display: flex;
                flex-direction: column;
                gap: 12px;
                padding: 18px 24px;
    
                background: var(--background-body-first);
    
                .result {
                    .parentcategory {
                        font-size: 18px;
                    }
    
                    .category {
                        font-size: 30px;
                    }
                }
            }
        }

        .content {
            height: 61px;
    
            .search .expandNav {
                display: block;
            }
    
            .items {
                display: none;
            }
        }
    }

    .carousel .text {
        font-size: 40px;
    }

    .reviews .content {
        h2 {
            font-size: 40px;
        }

        p {
            font-size: 28px;
        }
    }

    .categories .items .categoryitem {
        width: 100%;
    }

    .howwework {
        gap: 40px;
        
        h2 {
            font-size: 40px;
        }

        .items {
            gap: 20px;
    
            .row {
                display: flex;
                flex-direction: column;
                gap: 20px;
                height: auto;
                
                img {
                    flex: auto;
                    aspect-ratio: 626/315;
                }
    
                .space {
                    display: none;
                }
    
                .box {
                    flex: auto;
                    padding: 36px;
                    gap: 16px;
                }
            }

            .row:nth-child(odd) {
                flex-direction: column-reverse;
            }
        }
    }

    .contact {
        gap: 20px;

        h2 {
            font-size: 40px;
        }

        .items {
            flex-direction: column;
        }
    }

    .numbers .content .number {
        .big {
            font-size: 64px;
            -webkit-text-stroke: 1.2px var(--text-paragraph);
            text-stroke: 1.2px var(--text-paragraph);
            color: transparent;
        }

        p {
            font-size: 20px;
            color: var(--text-paragraph);
        }
    }

    .badges {
        .content {
            flex-wrap: wrap;

            .badge {
                flex: 1 1 45%;
    
                border: none;
            }
        }
    }

    .header {
        display: flex;
        flex-direction: row;
        padding: 0 5%;
        margin-top: 32px;
    
        height: 150px;
    
        background-color: var(--background-box);
    
        > * {
            flex: 1 0 0;
        }
    
        .previous {
            display: flex;
            flex-direction: column;
            justify-content: center;
    
            a {
                display: flex;
                flex-direction: column;
                align-items: start;
    
                text-decoration: none;
            
                > span:nth-of-type(1) {
                    font-size: 16px;
                    color: var(--text-paragraph);
                }
            
                > span:nth-of-type(2) {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
            
                    font-size: 12px;
                    color: var(--text-primary);
                }
            }
        }
    
        .title {
            position: relative;
            flex-grow: 1.5;
    
            .previoustext {
                position: absolute;
                top: 16px;
                left: 50%;
                transform: translateX(-50%);
    
                font-size: 16px;
                color: var(--text-primary);
    
                text-decoration: none;
            }
            
            .text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
    
                width: 100%;
    
                font-size: 28px;
    
                color: var(--text-headings);
                text-align: center;
            }
        }
        
        .next {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: end;
    
            a {
                display: flex;
                flex-direction: column;
                align-items: end;
    
                text-decoration: none;
            
                > span:nth-of-type(1) {
                    font-size: 16px;
                    color: var(--text-paragraph);
                    text-align: end;
                }
            
                > span:nth-of-type(2) {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
            
                    font-size: 12px;
                    color: var(--text-primary);
                }
            }
        }
    }

    .whatsapp {
        gap: 8px;
        padding: 6px 8px;
    
        right: 8px;
        bottom: 8px;
    
        font-size: 20px;
    }
}