* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    font-family: "Poppins", sans-serif;
}

body {
    background-color: #000;
    color: #fff;
    font-size: 16px;
    background-image: radial-gradient(#7f3d9e, #6d00d9);
}

header {
    position: fixed;
    width: 90vw;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 600px;
    gap: 10%;
    z-index: 2;

    & img {
        width: 250px;
    }

    & nav {
        & ul {
            display: grid;
            grid-template-columns: repeat(3, 200px);

            & li {
                & a {
                    text-decoration: none;
                    color: #fff;

                    &:hover {
                        color: #000;
                        text-transform: uppercase;
                    }
                }
            }
        }
    }

    & .hidden {
        display: none;
    }
}

section {
    background-image: radial-gradient(#7f3d9e, #6d00d9);
    height: 100vh;


    & .title {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 10rem;
    }

    & .modal-option {
        display: flex;
        margin-top: -38px;

        & button {
            width: 62px;
            height: 40px;
            position: relative;
            left: 180px;
            border-radius: 20px;
            border: 2px solid #fff;
            cursor: pointer;
            transition: transform 0.3s ease-in-out;
            background-color: transparent;

            & i {
                font-size: 20px;
                color: #fff;
            }

            &:hover {
                transform: translateY(-10px);
                border: 2px solid #000;

                & i {
                    color: #000;
                }
            }
        }
    }

    & .card-cars {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 20px;

        & .card {
            width: 100%;
            background-color: #fff;
            border: 2px solid #000;
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: end;
            flex-direction: column;
            cursor: pointer;
            position: relative;

            & img {
                width: 100%;
                height: 258px;
                object-fit: contain;
            }

            & h2 {
                background: #7f3d9e;
                border-radius: 20px;
                width: 100%;
                color: #fff;
                margin: 0;
                text-align: center;
            }
        }

        & :hover {

            & h2 {
                color: #000;
            }
        }
    }
}

.modal-container {
    & .modal {
        display: none;
    }

    & .modal.active {
        display: block;
        position: fixed;
        background: #b1b1b1;
        width: 20%;
        height: 65%;
        top: 158px;
        z-index: 4;
        border-radius: 5px;
        transition: all 0.3s ease;

        & .closed-modal {
            position: absolute;
            top: 5px;
            left: 94%;
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            cursor: pointer;
            background: #fff;
            transition: all 0.3s ease;
            border-radius: 5px;

            & i {
                font-size: 20px;
            }
        }

        & .color-option {
            position: relative;
            top: 25px;

            & label {
                position: relative;
                left: 25px;
                color: #000;
                font-size: 1.2rem;
            }

            & .color-select {
                position: absolute;
                top: 0px;
                left: 50%;

                & .btn-color {
                    width: 200px;
                    height: 28px;
                    border-radius: 25px;
                    position: relative;
                    left: -60%;

                    & i {
                        color: #b1b1b1;
                        position: relative;
                        top: 1px;
                        left: 20px;
                        cursor: pointer;
                    }

                    & :hover {
                        color: #000;
                    }
                }
            }

            & .button-colors {
                position: absolute;
                display: grid;
                grid-template-columns: repeat(2, 0.8fr);

                & .color-black {
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 10px 5px;
                    display: flex;
                    justify-content: center;

                    & i {
                        margin: 5px;
                    }

                    & span {
                        font-size: 1rem;
                    }
                }

                & :hover {
                    border: 3px solid #7f3d9e;
                    background: #fff;

                    & i {
                        border: none;
                        color: #000;
                    }

                    & span {
                        border: none;
                        color: #000;
                    }
                }

                & :focus {
                    border: 3px solid #7f3d9e;
                    background: #fff;

                    & i {
                        border: none;
                        color: #000;
                    }

                    & span {
                        font-weight: bold;
                        border: none;
                        color: #000;
                    }
                }

                & .color-white {
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 10px 5px;
                    display: flex;
                    justify-content: center;

                    & i {
                        margin: 5px;
                    }

                    & span {
                        font-size: 1rem;
                    }
                }

                & .color-gray {
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 5px;
                    display: flex;
                    justify-content: center;

                    & i {
                        margin: 5px;
                        color: gray;
                    }

                    & span {
                        font-size: 1rem;
                    }
                }

                & .color-paint {
                    width: 240px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 5px;
                    display: flex;
                    justify-content: center;

                    & i {
                        margin: 5px;
                    }

                    & span {
                        font-size: 1rem;
                    }
                }
            }
        }

        & .mark-option {
            position: relative;
            top: 140px;

            & label {
                position: relative;
                left: 25px;
                color: #000;
                font-size: 1.2rem;
            }

            & .mark-select {
                position: absolute;
                top: 3px;
                left: 50%;

                & .btn-mark {
                    position: relative;
                    left: -60%;
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;

                    & span {
                        font-size: 1rem;
                        color: #000;
                    }

                    & i {
                        position: relative;
                        color: #b1b1b1;
                        left: 14px;
                        cursor: pointer;
                    }

                    & :hover {
                        color: #000;
                    }
                }
            }

            & .button-mark {
                position: absolute;
                display: grid;
                grid-template-columns: repeat(2, 0.8fr);

                & .mark-bmw {
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 10px 5px;
                    display: flex;
                    justify-content: center;

                    & img {
                        width: 20px;
                        height: 20px;
                        margin: 2px 5px;
                    }

                    & span {
                        font-size: 1rem;
                    }
                }

                & :hover {
                    border: 3px solid #7f3d9e;

                    & img {
                        border: none;
                        color: #000;
                    }

                    & span {
                        border: none;
                        color: #000;
                    }
                }

                & :focus {
                    border: 3px solid #7f3d9e;
                    background: #fff;

                    & span {
                        font-weight: bold;
                        border: none;
                        color: #000;
                    }
                }

                & .mark-audi {
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 10px 5px;
                    display: flex;
                    justify-content: center;
                    position: relative;
                    left: -90px;

                    & img {
                        width: 20px;
                        height: 20px;
                        margin: 2px 5px;
                    }

                    & span {
                        font-size: 1rem;
                    }
                }

                & .mark-yamaha {
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    position: relative;
                    margin: 5px;
                    display: flex;
                    justify-content: center;

                    & img {
                        width: 20px;
                        height: 20px;
                        margin: 2px 5px;
                    }

                    & span {
                        font-size: 1rem;
                    }
                }

                & .mark-lamborghini {
                    position: relative;
                    left: -90px;
                    width: 240px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 5px;
                    display: flex;
                    justify-content: center;

                    & img {
                        width: 20px;
                        height: 20px;
                        margin: 2px 5px;
                    }

                    & span {
                        font-size: 1rem;
                    }
                }

                & .mark-other {
                    width: 240px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 5px;
                    display: flex;
                    justify-content: center;
                    background: #eee;
                    color: #000;
                    border: 2px solid #000;

                    & .selectedMarks {
                        border: none;
                        color: #000;

                        & span {
                            border: none;
                            color: #000;
                            font-size: 1rem;
                        }
                    }

                    & #optionsMarks {
                        position: absolute;
                        top: 93%;
                        border: 1px solid #ccc;
                        background: #fff;
                        color: #000;
                        display: none;
                        height: 340%;
                        z-index: 10;
                        overflow-y: auto;

                        & .option {
                            padding: 10px;
                            cursor: pointer;

                            & img {
                                width: 20px;
                                height: 20px;
                                margin: 2px 5px;
                            }

                            &:hover {
                                background-color: #eee;
                            }
                        }
                    }
                }

                & :hover {
                    border: 3px solid #7f3d9e;
                    background: #fff;
                }

                & :focus {
                    border: 3px solid #7f3d9e;
                    background: #fff;

                    & span {
                        font-weight: bold;
                        border: none;
                        color: #000;
                    }
                }
            }
        }

        & .year-option {
            position: relative;
            top: 300px;

            & label {
                position: relative;
                left: 25px;
                color: #000;
                font-size: 1.2rem;
            }

            & .year-select {
                position: absolute;
                top: 3px;
                left: 50%;

                & .btn-year {
                    width: 200px;
                    height: 28px;
                    border-radius: 25px;
                    position: relative;
                    left: -60%;

                    & i {
                        color: #b1b1b1;
                        position: relative;
                        top: 1px;
                        left: 20px;
                        cursor: pointer;
                    }

                    & :hover {
                        color: #000;
                    }
                }
            }

            & .button-year {
                display: grid;
                grid-template-columns: repeat(2, 0.8fr);
                position: absolute;

                & .year-2025 {
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 10px 5px;
                    display: flex;
                    justify-content: center;

                    & span {
                        font-size: 1rem;
                    }
                }

                & :hover {
                    border: 3px solid #7f3d9e;
                    background: #fff;

                    & span {
                        border: none;
                        color: #000;
                    }
                }

                & .year-2024 {
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 10px 5px;
                    display: flex;
                    justify-content: center;

                    & span {
                        font-size: 1rem;
                    }
                }

                & .year-2023 {
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 5px;
                    display: flex;
                    justify-content: center;

                    & span {
                        font-size: 1rem;
                    }
                }

                & .year-other {
                    width: 240px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 5px;
                    display: flex;
                    justify-content: center;
                    background: #ffffffad;
                    border: 2px solid #000;

                    & .selected {
                        border: none;
                        color: #000;

                        & i {
                            margin: 5px;
                            color: #000;
                        }

                        & span {
                            color: #000;
                            font-size: 1rem;
                        }
                    }

                    & .options {
                        position: absolute;
                        top: 93%;
                        border: 1px solid #ccc;
                        background: #fff;
                        color: #000;
                        display: none;
                        height: 340%;
                        z-index: 10;
                        overflow-y: auto;

                        & .option {
                            padding: 10px;
                            cursor: pointer;

                            &:hover {
                                background-color: #eee;
                            }
                        }
                    }
                }

                & :hover {
                    border: 3px solid #7f3d9e;
                    background: #fff;

                    & i {
                        border: none;
                        color: #000;
                    }

                    & span {
                        border: none;
                        color: #000;
                    }
                }

                & :focus {
                    border: 3px solid #7f3d9e;
                    background: #fff;

                    & span {
                        font-weight: bold;
                        border: none;
                        color: #000;
                    }
                }
            }
        }

        & .type-option {
            position: relative;
            top: 420px;

            & label {
                position: relative;
                left: 25px;
                color: #000;
                font-size: 1.2rem;
            }

            & .type-select {
                position: absolute;
                top: 3px;
                left: 50%;

                & .btn-type {
                    width: 200px;
                    height: 28px;
                    border-radius: 25px;
                    position: relative;
                    left: -60%;

                    & i {
                        color: #b1b1b1;
                        position: relative;
                        top: 1px;
                        left: 20px;
                        cursor: pointer;
                    }

                    & :hover {
                        color: #000;
                    }

                }
            }

            & .button-type {
                display: grid;
                grid-template-columns: repeat(2, 0.8fr);
                position: absolute;

                & .type-car {
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 10px 5px;
                    display: flex;
                    justify-content: center;

                    & i {
                        margin-top: 2.5px;
                        font-size: 20px;
                        margin-right: 5px;
                    }
                }

                & :hover {
                    border: 3px solid #7f3d9e;
                    background: #fff;

                    & i {
                        border: none;
                        color: #000;
                    }

                    & span {
                        border: none;
                        color: #000;
                    }
                }

                & :focus {
                    border: 3px solid #7f3d9e;
                    background: #fff;

                    & span {
                        font-weight: bold;
                        border: none;
                        color: #000;
                    }
                }

                & .type-motorcycle {
                    width: 150px;
                    height: 28px;
                    border-radius: 25px;
                    cursor: pointer;
                    margin: 10px 5px;
                    display: flex;
                    justify-content: center;

                    & i {
                        margin-top: 2.5px;
                        font-size: 20px;
                        margin-right: 5px;
                    }
                }
            }
        }

        & .demarcate-option {
            position: relative;
            top: 540px;
            left: 4.5%;

            & button {
                width: 90%;
                height: 40px;
                position: relative;
                border-radius: 25px;
            }

            & :hover {
                border: 3px solid #7f3d9e;
                background: #fff;
                font-size: 1rem;
            }
        }
    }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1;
}

.modal.active+.overlay {
    display: block;
}

/* MEDIA QUERIE */
@media (max-width: 420px) {
    body {
        position: fixed;
        width: 420px;
        height: 910px;

        & header {
            position: absolute;

            & img {
                width: 34vw;
            }

            & nav {

                & ul {
                    & li {
                        display: none;
                    }
                }
            }

            & .hidden {
                width: 45vw;
                display: flex;
                cursor: pointer;
                justify-content: end;
                position: relative;
                left: 180px;
                top: -32px;

                & i {
                    font-size: 20px;
                }
            }

            & .open-menu {
                & ul {
                    align-items: center;
                    display: flex;
                    flex-direction: column;
                    position: absolute;
                    left: -2px;
                    width: 100%;
                    top: 30px;
                    color: #fff;
                    box-shadow: 0px 4px 10px #000;

                    & li {
                        display: block;

                        & a {
                            & :hover {
                                color: #000;
                                text-transform: uppercase;
                            }
                        }
                    }
                }
            }
        }

        & section {
            & .container {
                & .title {
                    position: relative;
                    top: -50px;
                    font-size: 1rem;
                }

                & .modal-option {
                    position: relative;
                    left: -30%;
                    padding-top: 10px;
                    top: -50px;

                    & button {
                        width: 4rem;
                        height: 2rem;
                    }
                }

                & .card-cars {
                    display: grid;
                    grid-template-columns: repeat(1, 1fr);
                    margin-top: -35px;
                    gap: 10px;
                    max-height: 650px;
                    overflow-y: auto;

                    & .card {
                        & .h2 {
                            font-size: 1rem;
                        }
                    }
                }
            }
        }

        & .modal-container {
            & .modal.active {
                position: absolute;
                top: 8%;
                left: 10%;
                width: 335px;
                height: 725px;
                border-radius: 10px;

                & .closed-modal {
                    position: relative;
                    left: 92%;
                }

                & .color-option {
                    position: relative;
                    top: 25px;

                    & label {
                        font-size: 1rem;
                    }

                    & .color-select {
                        position: absolute;
                        top: 0px;
                        left: 50%;

                        & .btn-color {
                            width: 200px;
                            height: 28px;
                            border-radius: 25px;
                            position: relative;
                            left: -50%;

                            & i {
                                color: #b1b1b1;
                                position: relative;
                                top: 1px;
                                left: 20px;
                                cursor: pointer;
                            }
                        }
                    }

                    & .button-colors {
                        & .color-black {
                            position: relative;
                            left: 10%;
                            width: 120px;
                            height: 28px;

                            & i {
                                margin: 5px;
                            }

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }

                        & .color-white {
                            position: relative;
                            left: 5%;
                            width: 120px;
                            height: 28px;

                            & i {
                                margin: 5px;
                            }

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }

                        & .color-gray {
                            position: relative;
                            left: 10%;
                            width: 120px;
                            height: 28px;

                            & i {
                                margin: 5px;
                            }

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }

                        & .color-paint {
                            position: relative;
                            left: 5%;
                            width: 165px;
                            height: 28px;

                            & i {
                                margin: 5px;
                            }

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }
                    }
                }

                & .mark-option {
                    position: relative;
                    top: 140px;

                    & label {
                        font-size: 1rem;
                    }

                    & .mark-select {
                        position: absolute;
                        top: -2px;
                        left: 50%;

                        & .btn-mark {
                            position: relative;
                            left: -50%;
                            width: 150px;
                            height: 28px;
                            border-radius: 25px;

                            & span {
                                font-size: 0.8rem;
                                color: #000;
                            }

                            & i {
                                position: relative;
                                left: 14px;
                                cursor: pointer;
                            }
                        }
                    }

                    & .button-mark {
                        & .mark-bmw {
                            position: relative;
                            left: 6%;
                            width: 120px;
                            height: 28px;

                            & img {
                                width: 15px;
                                height: 15px;
                                margin: 3px 5px;
                            }

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }

                        & .mark-audi {
                            position: relative;
                            left: -72%;
                            width: 120px;
                            height: 28px;

                            & img {
                                width: 15px;
                                height: 15px;
                                margin: 3px 5px;
                            }

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }

                        & .mark-yamaha {
                            position: relative;
                            left: 6%;
                            width: 120px;
                            height: 28px;

                            & img {
                                width: 15px;
                                height: 15px;
                                margin: 3px 5px;
                            }

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }

                        & .mark-lamborghini {
                            position: relative;
                            left: -72%;
                            width: 140px;
                            height: 28px;

                            & img {
                                width: 15px;
                                height: 15px;
                                margin: 3px 5px;
                            }

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }

                        & .mark-other {
                            position: relative;
                            width: 245px;
                            left: 5%;

                            & .selectedMarks {
                                border: none;
                                color: #000;
                                font-size: 0.8rem;

                                & span {
                                    position: relative;
                                    top: 8%;
                                    border: none;
                                    color: #000;
                                    font-size: 0.8rem;
                                }
                            }
                        }
                    }
                }

                & .year-option {
                    position: relative;
                    top: 300px;

                    & label {
                        font-size: 1rem;
                    }

                    & .year-select {
                        position: absolute;
                        top: 0px;
                        left: 50%;

                        & .btn-year {
                            width: 200px;
                            height: 28px;
                            border-radius: 25px;
                            position: relative;
                            left: -50%;

                            & span {
                                font-size: 0.8rem;
                                color: #000;
                            }
                        }
                    }

                    & .button-year {
                        & .year-2025 {
                            position: relative;
                            left: 5%;
                            width: 120px;

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }

                        & .year-2024 {
                            position: relative;
                            left: 3%;
                            width: 120px;

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }

                        & .year-2023 {
                            position: relative;
                            left: 5%;
                            width: 120px;

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }

                        & .year-other {
                            position: relative;
                            left: 5%;
                            width: 165px;

                            & .selected {
                                border: none;
                                color: #000;
                                font-size: 0.8rem;

                                & i {
                                    margin: 5px;
                                    color: #000;
                                }

                                & span {
                                    position: relative;
                                    top: 8%;
                                    border: none;
                                    color: #000;
                                    font-size: 0.8rem;
                                }
                            }
                        }
                    }
                }

                & .type-option {
                    position: relative;
                    top: 420px;

                    & label {
                        font-size: 1rem;
                    }

                    & .type-select {
                        position: absolute;
                        top: 0px;
                        left: 35%;

                        & .btn-type {
                            width: 120px;
                            position: relative;
                            left: -40%;

                            & span {
                                font-size: 0.8rem;
                                color: #000;
                            }
                        }
                    }

                    & .button-type {
                        & .type-car {
                            position: relative;
                            left: 5%;
                            width: 120px;
                            height: 28px;

                            & i {
                                margin-top: 2.5px;
                                font-size: 20px;
                                margin-right: 5px;
                            }

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }

                        & .type-motorcycle {
                            position: relative;
                            left: 5%;
                            width: 120px;
                            height: 28px;

                            & i {
                                margin-top: 2.5px;
                                font-size: 20px;
                                margin-right: 5px;
                            }

                            & span {
                                position: relative;
                                font-size: 0.8rem;
                                top: 9%;
                            }
                        }
                    }
                }
            }
        }
    }
}