#containerForBigImage {
    max-width: 1250px;
    width: 100%;
    height: 100vh;
    background: var(--background);
    position: fixed;
    left: -500%;
    top: 0;
    z-index: -1050;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

#containerForBigImage.active {
    transform: translate(-50%);
    opacity: 1;
    left: 50%;
    z-index: 10;
}


#containerForBigImage .drawingContent {
    width: 100%;
    display: grid;
    place-items: center;
}


#containerForBigImage .drawingContent img {
    height: 70vh;
    padding: 0 0 10px 0;
}

#containerForBigImage .definitioncontainer #difinition {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 0 40px;
}

#containerForBigImage .definitioncontainer #difinition span#title {
    font-family: var(--FontFamilyFutraPt);
    /* background-color: red;  */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 
#containerForBigImage .definitioncontainer #difinition span#title span {
    display: block;
} */












.drawingssContainer {
    background-color: var(--background);
    gap: 30px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
}

.drawingssContainer.centerDrawing {
    display: flex;
    justify-content: space-evenly;
}

.drawingssContainer>.drawingContainer {
    max-width: calc(33% - 20px);
    text-align: center;
}

.drawingssContainer>.drawingContainer>.ImageContainer img {
    width: 100%;
}

img {
    user-select: none;
}

.title {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.title.oneL {
    display: block;
}

span.englishTitle {
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: var(--FontFamilyFuturaPt);
}

span.arabicTitle {
    font-family: var(--arabicFont);
}

#advanceTitle {
    text-transform: none;
    font-size: 15px;

}

.containerforBigImages {
    width: 100%;
    display: grid;
    margin: 60px 0;
    place-items: center;
}

.containerforBigImages .img_sdzc {
    display: grid;
    place-items: center;
}

.containerforBigImages .img_sdzc img {
    max-width: 70%;
}

@media all and (max-width: 700px) {
    .drawingssContainer>.drawingContainer {
        max-width: calc(50% - 15px);
    }

    .containerforBigImages .img_sdzc img {
        max-width: 100%;

    }
}

.down {
    display: flex;
    align-items: end;
    justify-content: end;
}

@media all and (max-width: 501px) {
    #containerForBigImage .drawingContent img {
        width: 80%;
        height: auto;
        padding: 0 0 10px 0;
    }
}