@import "./main.css";

.div-curcubeu {
    padding: 25px 0;
    width: 100%;
    height: 40vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #f7911d;
    background-image: url("/assets/UPDATE/produse_participante/curcubeu-pp.png");
}

.general-info {
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    text-align: center;
    font-family: MyriadPro-SemiBold, sans-serif;
}

.general-info a {
    padding: 10px 25px;
    border: 4px solid white;
    background-color: #00b8e8;
    border-radius: 25px;
    font-size: 1.2em;
    text-decoration: none;
    color: #fff;
}

.boxes-container {
    /* show 2 items on each row with flex */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
}
.general-info p {
    color: black;
    font-size: 1.25rem;
    font-family: MyriadPro-SemiBold;
}

.box {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
    font-family: MyriadPro-SemiBold, sans-serif;
    padding: 15px 0;
}

.box-right {
    flex-direction: row-reverse;
}

.box img {
    width: 25%;
}

.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;
    background-color: white;
    color: #222222;
}
.box-list ul li::before {
    /* Unicode for a bullet */
    content: "\2022";
    color: black;
    display: inline-block;
    width: 1.25em;
}

.box-1 {
    background-color: #f5be34;
}
.box-1 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #f5be34;
}
.box-2 {
    background-color: #94c447;
}
.box-2 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #94c447;
}
.box-3 {
    background-color: #3e5798;
}
.box-3 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #3e5798;
}
.box-4 {
    background-color: #963793;
}
.box-4 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #963793;
}
.box-5 {
    background-color: #00b8e8;
}
.box-5 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #00b8e8;
}
.box-6 {
    background-color: #df332c;
}
.box-6 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #df332c;
}
.box-7 {
    background-color: #f5be34;
}
.box-7 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #f5be34;
}
.box-8 {
    background-color: #94c447;
}
.box-8 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #94c447;
}
.box-9 {
    background-color: #3e5798;
}
.box-9 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #3e5798;
}
.box-10 {
    background-color: #963793;
}
.box-10 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #963793;
}
.box-11 {
    background-color: #00b8e8;
}
.box-11 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #00b8e8;
}
.box-12 {
    background-color: #df332c;
}
.box-12 .box-list ul li::before {
    /* Styles for Indentation*/
    color: #df332c;
}

@media only screen and (min-width: 1200px) {
    .desktop-menu a:nth-child(1) {
        color: white;
    }
    .desktop-menu a:nth-child(3) {
        color: black;
    }

    .boxes-container {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap to the next row */
        justify-content: space-between; /* Distribute items with space between them */
    }
    /* .box {
        flex: 0 0 calc(50%);
        padding: 10px;
        box-sizing: border-box; 
        justify-content: space-between; 
    } */
    .box img {
        width: 35%;
    }
    .box p {
        color: #fffeff;
    }
    .box-info-container {
        width: 50%;
        padding: 10px 15px;
    }
    .box-list {
        margin: 0;
    }
    .box-list ul {
        line-height: 1.5em;
    }

    .box-left {
        padding-left: 0;
    }
    .box-right {
        padding-right: 0;
    }
    .second-title {
        position: relative;
    }
}
@media only screen and (min-width: 1500px) {
    .box-list ul {
        font-size: 1.35em;
    }
    .box p {
        font-size: 1.2em;
    }
}

/* //UPDATE */
.second-title {
    margin-top: 30%;
}
.boxes__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vw;
    background-position: center;
}
.box a {
    padding: 10px 25px;
    border: 4px solid white;
    background-color: #00b8e8;
    border-radius: 25px;
    font-size: 1.2em;
    text-decoration: none;
    color: #fff;
    width: 50%;
    font-family: MyriadPro-SemiBold;
}
.box__1 {
    background-image: url(/assets/UPDATE/produse_participante/coloriaj.png);
}
.box__2 {
    background-image: url(/assets/UPDATE/produse_participante/instrumente_scris.png);
}
.box__3 {
    background-image: url(/assets/UPDATE/produse_participante/marking.png);
}

@media (min-width: 800px) and (max-width: 1000px) {
    .box a {
        font-size: 1.75rem;
    }
}

@media (min-width: 1000px) {
    .box a {
        font-size: 1rem;
        width: 40%;
        white-space: nowrap;
    }
    .second-title {
        z-index: 999;
        margin-top: 9%;
        position: relative;
    }
    .boxes__container {
        flex-direction: row;
    }
    .box {
        height: 500px;
        background-size: cover;
    }
    .general-info {
        height: 100px;
    }
}

@media (min-width: 1200px) {
    .second-title {
        margin-top: 6%;
    }
    .box {
        background-size: cover;
        background-position: center;
        height: 500px;
    }
    .box a {
        font-size: 1.5rem;
        width: 60%;
    }
}