:root {
    --background-nacrisferi: #506580;
    --gia-nacrisferi: #9ca0ab;
    --gia-teqsti: #e0dfe6;
    --muqi-lurji: #111827;
    --gia-lurji: #2563eb;
    --plastic: rgba(80, 101, 128, 0.84);
}       

body {
  background-color: #091a2c;
}


/* main first section */
.main-about {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 6em 10em 0 10em;
    gap: 2em;
}

.main-about h2 {
    font-size: 3em;
    color: var(--gia-teqsti);
    font-weight: bold;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-about .flex img:nth-child(1) {
    width: 100%;
    max-width: 400px;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.024);
}
.main-about .flex img:nth-child(2) {
    width: 70%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.024);
}

.flex2 {
    align-items: center;
    justify-content: flex-start;
    gap: 3em;
}

.main-about .flex2 img:nth-child(2), .main-about .flex2 img:nth-child(3) {
    width: 100%;
    max-width: 400px;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.024);
}

.aboutus {
    display: flex;
    flex-direction: column;
    gap: 1em;
    color: var(--background-nacrisferi);
    width: 100%;
}

.aboutus p {
    font-weight: 600;
}

/* responsive */

@media(max-width: 1750px) {
    .main-about .flex img:nth-child(2), .main-about .flex img:nth-child(1), .main-about .flex img:nth-child(3) {
        height: 360px;
    }
}

@media(max-width: 1650px) {
    .flex {
        flex-direction: column-reverse;
        align-items: start;
        gap: 2em;
    }
    .flex2 {
        flex-direction: unset;
        flex-wrap: wrap;
    }
}

@media(max-width: 1600px) {
    .main-about .flex img:nth-child(2){
        width: 100%;
    }
}

@media(max-width: 1250px) {
    .main-about {
        padding: 6em 2em 0 2em;
    }
}

@media(max-width: 1000px) {
    .main-about .flex img:nth-child(2){
        display: none;
    }
    .main-about .flex2 img:nth-child(2){
        display: block;
    }
    .main-about .flex img:nth-child(1){
        height: auto;
    }
    .main-about h2 {
        font-size: 2em;
    }
}