@import "./main.css";

.creioane__container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 7rem;
}

.first__items,
.second__items,
.third__items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.box-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.box p {
    font-size: 0.9em;
    font-style: italic;
    color: white;
}

.box-list {
    margin: 0 5px;
}

.box-list ul {
    text-align: left;
    list-style-position: inside;
    padding: 10px 15px;
    border-radius: 10px;
    color: #222222;
}
.box-list ul li::before {
    /* Unicode for a bullet */
    content: "\2022";
    color: #f5be34;
    display: inline-block;
    width: 1.25em;
}
.box-info-container p {
    font-size: 1.25rem;
    font-family: MyriadPro-SemiBold;
}
.box-list li {
    font-family: MyriadPro-Regular;
}
.creioane__container {
    background-image: url("/assets/UPDATE/coloriaj/background.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.first-items {
    width: 70%;
}
.first__items {
    flex-direction: row;
    justify-content: flex-start;
}
.second-items {
    width: 70%;
}
.second__items {
    flex-direction: row;
    justify-content: flex-start;
}
.third-items {
    width: 70%;
}
.third__items {
    flex-direction: row;
    justify-content: flex-start;
}
@media (min-width: 600px) and (max-width: 1950px) {
    .div-curcubeu {
        height: 35vh;
    }
    .first__items {
        margin-top: 5%;
    }
    .box-info-container p {
        font-size: 1.5rem;
    }
    .box-list li {
        font-size: 1.25rem;
    }
    .first-items {
        width: 40%;
    }
    .first__items {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1em;
    }
    .second-items {
        width: 40%;
    }
    .second__items {
        flex-direction: row;
        justify-content: flex-end;
        gap: 1em;
    }
    .third-items {
        width: 40%;
    }
    .third__items {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1em;
    }
    .first__items,
    .second__items,
    .third__items {
        width: 100%;
    }
    .second__items {
        justify-content: space-between;
    }
}

@media (min-width: 1000px) {
    .desktop-menu a:nth-child(3) {
        color: black !important;
    }
    .desktop-menu a:nth-child(1) {
        color: white !important;
    }
}

@media (min-width: 1200px) {
    .box-info-container p {
        font-size: 1.75rem;
    }
}

@media (min-width: 1600px) {
    .box-info-container p {
        font-size: 2.25rem;
    }
    .box-list li {
        font-size: 1.75rem;
    }
}