body {
    max-height: 500vh;
    height: auto;
}

.beginning {
    background-image: url("../images/main_page_background.png");
    background-size: cover;
    width: 100%;
    height: fit-content;
    padding-block: 5%;
}

.text_container {
    width: 100%;
    height: 65%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.big_text {
    text-align: center;
    height: fit-content;
    padding-bottom: 2%;
}

.big_text h1 {
    text-transform: uppercase;
    font-size: 4vw;
    font-family: SFProDisplay-Bold, sans-serif;
    color: #FFFFFF;
    margin-bottom: 0;
    margin-top: 0;
}

.big_text h2 {
    font-size: 3.5vw;
    font-family: SFProDisplay-Bold, sans-serif;
    color: #FFFFFF;
    margin-bottom: 0;
    margin-top: 0;
}

.beginning_halves {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 35%;
}

.half_text {
    width: 50%;
    height: 100%;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.half_text p {
    font-family: SFProDisplay-Bold, sans-serif;
    font-size: 1.75vw;
    color: #FFFFFF;
    text-align: center;
    width: 100%;
    height: min-content;
    margin: 0;
}

.center_single_element {
    width: 50%;
    text-align: center;
    align-items: center;
}

.button_red {
    background-color: #991616;
    border-radius: 54px;
    width: 35.6%;
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.about_us {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.about_container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.about_rectangles_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
    height: 100%;
}

.about_rectangle {
    border: 1px dashed #FFB900;
    width: 80%;
    margin-block: 10%;
}

.about_rectangle p {
    color: #FFFFFF;
    font-family: SFProDisplay-Bold, sans-serif;
    font-size: 1.5vw;
    text-align: center;
    text-transform: uppercase;
}

.transparent_header {
    width: 100%;
    margin-block: 2%;
    text-align: center;
    display: flex;
    align-items: center;
}

.transparent_header h1 {
    width: 100%;
    font-family: SFProDisplay-Bold, sans-serif;
    text-transform: uppercase;
    font-size: 8vw;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 185, 0, 1);
    margin: 0;
}

.transparent_header h2 {
    width: 100%;
    font-family: SFProDisplay-Bold, sans-serif;
    text-transform: uppercase;
    font-size: 7vw;
    color: rgba(255, 185, 0, 1);
    margin: 0;
}

.about_us_image {
    margin: 0;
    width: 100%;
    object-fit: contain;
    text-align: center;
}

.about_us_image img {
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
}

.our_advantages {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.advantage {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.advantage h1 {
    font-size: 14vw;
    -webkit-text-stroke: 1px rgba(255, 185, 0, 1);
    font-family: SFProDisplay-Bold, sans-serif;
    color: transparent;
    margin: 0;
    padding: 1%;
}

.advantage_text_container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.advantage_text_container h2 {
    font-family: SFProDisplay-Bold, sans-serif;
    font-size: 4vw;
    color: #FFFFFF;
    text-transform: uppercase;
    margin: 0;
}

.advantage_text_container h3 {
    font-family: SFProDisplay-Bold, sans-serif;
    font-size: 2vw;
    color: #FFFFFF;
    margin: 0;
    word-break: normal;
    width: inherit;
}

.our_projects {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.projects {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 1%;
    align-items: center;
    justify-content: center;
}

.single_project {
    display: flex;
    flex-direction: column;
    width: 20%;
    object-fit: contain;
    margin-inline: 5%;
}

.single_project p {
    font-family: SFProDisplay-Medium, sans-serif;
    color: #FFFFFF;
    text-align: center;
}

.single_project img {
    border: 4px solid rgba(255, 237, 0, 0.4);
}

.our_clients {
    display: flex;
    flex-direction: column;
    padding: 3%;
}

.our_clients u {
    font-family: SFProDisplay-Bold, sans-serif;
    font-size: 3vw;
    color: #FFFFFF;
    text-transform: uppercase;
    text-decoration-color: rgba(255, 185, 0, 1);
}

.clients {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-block: 4%;
}

.clients img {
    width: 13%;
    margin-inline: 3%;
    margin-block: 1%;
}

@media (max-width: 650px) {
    body {
        min-height: 100vh;
        max-height: 250vh;
        height: auto;
    }

    .beginning {
        height: 8%;
    }

    .beginning_halves {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .button_red {
        width: 71%;
        height: 100%;
        padding: 3%;
        margin-block: 5%;
    }

    .projects {
        flex-direction: column;
    }

    .single_project {
        width: 50%;
        padding-block: 2%;
    }

    .single_project p {
        font-size: 3vw;
    }
}