@import "./style.css";

.sec1 {
    height: calc(100% - 50px);
}
.sec1 .content.centered {
    justify-content: space-between;
    align-items: center;
    text-align: center;
}
.sec1 .text-wrapper.flex.col {
    height: 60%;
    justify-content: center;
    align-items: center;
}
.sec1 .title {
    margin-top: 0 !important;
}
.buttons-wrap.flex.row {
    flex-flow: row;
}
#logo-elements-wrapper {
    height: 33%
}
.logo-wrapper {
    display: none;
}
#elements {
    height: 100%;
    justify-content: space-around;
    align-items: center;
}
.element {
    width: 100%;
    height: 25%;
    text-align: center;
}

#sec2 {
    height: 250%;
}
#sec2 .content.centered {
    height: 33%;
    flex-flow: column-reverse;
    justify-content: space-evenly;
}
#sec2 img {
    width: 100%;
    height: auto;
}
#sec2 .text-wrapper {
    text-align: center;
}
#sec2 .content-wrapper .col {
    width: 100%;
    height: 30%;
}
#sec2 .subtitle {
    padding-bottom: 5%;
    border-bottom: 1px solid lightgrey;
}

@media screen and (max-width: 375px) {
    .section.centered.sec1 {
        height: calc(100% - 50px) !important;
    }
    #sec2 {
        height: 250% !important;
    }
}

@media screen and (min-width: 568px) and (max-width: 853px) and (max-height: 393px) {
    .sec1 {
        height: 150% !important;
    }
    #sec2 {
        height: 150%;
    }
}

@media screen and (min-width: 1100px) {
    .sec1 {
        height: calc(100% - 75px) !important;
    }
    .sec1 .content.centered {
        justify-content: space-between;
        align-items: center;
    }
    .sec1 .title {
        text-align: left !important;
    }
    #logo-elements-wrapper {
        width: 50%;
        height: 100%;
        justify-content: space-between;
        align-items: center;
    }
    #elements {
        width: 150px;
        height: 90%;
    }
    .element {
        width: 150px;
        height: 150px !important;
        justify-content: center;
        align-items: center;
        padding: 25px;
        flex-grow: 0;
        border-radius: 50%;
        box-shadow: 2px 2px 20px lightgrey;
    }
    .element.margin {
        margin-left: 150px;
    }
    .logo-wrapper {
        width: 50%;
        display: inline;
    }
    .logo {
        width: 100%;
    }
    .text-wrapper {
        width: 45%;
        height: fit-content !important;
        display: block;
        text-align: left !important;
    }
    #sec2 {
        height: 150%;
    }
    #sec2 .content.centered {
        height: 33%;
    }
    #sec2 h2.title {
        color: blue;
    }
    .row.rev {
        flex-flow: row-reverse !important;
        align-content: flex-end;
    }
    .row.rev .text-wrapper .title, .row.rev .text-wrapper .textbox {
        width: 100% !important;
        right: 0px;
        margin-right: 0 !important;
        padding: 0;
        text-align: right !important;
    }
    #sec2 .flex.row {
        flex-flow: row !important;
        justify-content: space-between !important;
    }
    #sec2 .flex.row.rev{
        flex-flow: row-reverse !important;
    }
    #sec2 .image-wrapper {
        width:  fit-content;
    }
    #sec2 .image-wrapper {
        width: 300px;
    }
    #img1 {
        position: relative;
        float: right;
        width: 400px;
        height: auto;
        aspect-ratio: 7/5;
    }
    #img2 {
        width: 70%;
    }
    #img3 {
        float: right;
        width: 50%;
    }

    #sec3 {
        height: 60%;
    }
    #sec3 .content.centered {
        height: 80%;
        border: 1px solid lightgrey;
        border-radius: 10px;
        justify-content: space-evenly;
    }
}