.structure-holder{
    height: 90%;
    width: 90%;
}

.full{
    height: calc(90vh - 1rem);
    width: 100%;
}

.structure-child{
    display: flex;
    height: 20%;
}

.color-grey{
    background-color: #3D3D3D;
}

.color-blue{
    background-color: #081649;
}

.color-brown{
    background-color: #3C2C04;
}

.align-left{
    text-align: left;
}

.align-right{
    text-align: right;
}

.structure-label{
    font-family: jockey;
    color: #c7e2ffc0;
    font-size: 2.7rem;
    width: 30%;
}

.structure-label span{
    width: 100%;
}

.structure-main{
    font-family: jockey;
    color: #F9B7B7;
    font-size: 2rem;
    display: block;
    text-align: center;
    width:30%;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 20px;
}

.structure-text{
    font-family: jockey;
    color: #FFFFFF;
    font-size: 1.5rem;
    text-align: center;
    width: 30%;
}

.arrow{
    height: 20%;
}

.vertical-flex{
    flex-direction: column !important;
}

.vertical-flex p{
    height: fit-content;
    font-family: jockey;
    color: #FFFFFF;
    /* font-size: 2.5rem; ??? different monitor issue?*/
    font-size: 1.8rem;
    text-align: center;
    width: 60%;
    margin-top: 0;
    margin-bottom: 0;
}

.fake-margin{
    height: 1.5%;
}
    
.vertical-flex img{
    
}

.debug{
    overflow:hidden;
}

.carousel {
    display: flex;
    overflow: hidden;
    flex: 1;
    object-fit: cover;
    margin: 20px auto;
    position: relative;
    width: 90%;
}

.carousel-item {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: absolute;
}

.carousel-item img {
    margin-left: auto;
    margin-right: auto;
    height: 80%;
    width: 80%;
    object-fit: contain;
    border-radius: 8px; /* Optional: Add border radius to the image */
}

.carousel-label {
    margin-top: 1.5%;
    text-align: center;
    font-size: 1.5rem; /* Adjust the font size of the label */
    color: #F9B7B7; /* Adjust the color of the label */
}