* {
    margin: 0;
    padding: 0;
    font-family: 'Heebo', sans-serif;
}

html {
    width: 100%;
    height: 100vh;
    scroll-behavior: smooth;
}

body {
    height: 100%;
    width: 100%;
}

.app-wrapper {
    margin-top: 0.5vmax;
    border-radius: 0.1vmax;
    padding-top: 0.1vmax;
    justify-self: center;
    width: 72vmax;
    background-color:#f8f8f85e;
    box-shadow: 0px 0.1vmax 0.23vmax 0px #00000030;
}

.header-container {
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    padding: 0.7vmax 1vmax 2.3vmax 1vmax;
}

.logo {
    grid-column: 1;
    width: 20vmax;
}

.language-selector {
    grid-column: 3;
    display: grid;
    grid-gap: 0.35vmax;
    grid-template-columns: repeat(4, min-content);
    align-items: baseline;
}

.language-icon {
    width: 1.6vmax;
    cursor: pointer;
    user-select: none;
    box-shadow: 0px 0px 0.1vmax 0px;
    border-radius: 0.1vmax;
}

.language-icon:hover {
    border-style: solid;
    border-width: 0.05vmax;
}

.motto-wrapper {
    display: grid;
    align-items: center;
    position: relative;
    height: 23vmax;
    left: -5vmax;
    width: 82vmax;
    box-shadow: 0px 0px 0.23vmax 0px #00000070;
    border-radius: 0.15vmax;
    border-width: 0.1vmax;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: white;
    background-image: url(/background.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    z-index: 999;
}

.company-motto {
    display: grid;
    grid-template-rows: 2.9fr 1fr;
    text-align: center;
    height: 100%;
}

.page-nav {
    position: relative;
    left: -1vmax;
    width: 74vmax;
    height: 8vmax;
    background-color: #fafafa;
    border-radius: 0.15vmax;
    box-shadow: 0px 0.1vmax 0.1vmax 0px #0000001a;
}

.page-nav-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5vmax;
    padding-left: 10vmax;
    padding-right: 10vmax;
    height: 100%;
}

.page-buttons {
    display: grid;
    grid-gap: 0.4vmax;
    grid-template-rows: 1fr 0.7fr;
    text-align: center;
    align-items: baseline;
    height: 100%;
    background-color: #00000006;
    padding-left: 0.4vmax;
    padding-right: 0.4vmax;
    color: #939393;
    font-size: 1.05vmax;
}

.page-buttons:hover {
    cursor: pointer;
    user-select: none;
    background-color: #7bbee542;
}

.page-nav-image {
    width: 4.2vmax;
    justify-self: center;
    align-self: center;
}

.company-profile-wrapper {
    display: grid;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 3vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.recommendations-title {
    grid-column: 1;
    grid-row: 3;
}

.recommendations-list {
    grid-column: 1;
    grid-row: 4;
    overflow-y: auto;
    overflow-x: auto;
}

.recommendations-wrapper {
    display: grid;
    padding: 1vmax;
    justify-content: center;
    grid-gap: 1vmax;
    grid-template-columns: repeat(auto-fit, 7vmax);
}

.recommendations-title {
    font-size: 1.7vmax;
    text-align: center;
}

.recommendations-img {
    align-self: start;
    justify-self: center;
    width: 6vmax;
    cursor: pointer;
    user-select: none;
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000001c;
}

.recommendations-img:hover {
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000004a;
}

.company-documents-list {
    grid-column: 1;
    grid-row: 2;
    overflow-y: auto;
    overflow-x: auto;
}

.documents-wrapper {
    display: grid;
    padding: 1vmax;
    justify-content: center;
    grid-gap: 1vmax;
    grid-template-columns: repeat(auto-fit, 7vmax);
}

.documents-img {
    align-self: start;
    justify-self: center;
    width: 6vmax;
    cursor: pointer;
    user-select: none;
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000001c;
}

.documents-img:hover {
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000004a;
}


.successful-orders-wrapper {
    display: grid;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 3vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.company-values-wrapper {
    display: grid;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 3vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.company-documents-wrapper {
    display: grid;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 3vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.company-history-wrapper {
    display: grid;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 3vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.company-contacts-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 3vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.organizations-logo-wrapper {
    display: grid;
    grid-template-columns: min-content min-content min-content min-content;
    justify-content: center;
    margin-bottom: 2vmax;
}

.end-of-page-space {
    height: 30vmax;
}

#root {
    display: grid;
}

#language-choice-text {
    color: #00417b;
    font-weight: bold;
    grid-column: 1;
    font-size: 1.2vmax;
    padding-right: 0.3vmax;
}

#language-en {
    grid-column: 2;
}

#language-de {
    grid-column: 3;
}

#language-bg {
    grid-column: 4;
}

#motto-main-text {
    color: white;
    font-weight: bold;
    font-size: 2.7vmax;
    margin-bottom: 1vmax;
    padding-left: 8vmax;
    padding-right: 8vmax;
    text-shadow: 0.06vmax 0.2vmax 0.28vmax #0e0e0e87;
    align-self: end;
}

#company-profile-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#company-profile-text {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.1vmax;
    color: #061926d1;
    padding-right: 1.5vmax;
}

#successful-orders-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#successful-orders-text {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.1vmax;
    color: #061926d1;
    padding-right: 1.5vmax;
}

#company-values-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#company-values-text {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.1vmax;
    color: #061926d1;
    padding-right: 1.5vmax;
}

#company-documents-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#company-history-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#company-history-text {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.1vmax;
    color: #061926d1;
    padding-right: 1.5vmax;
}

#company-contacts-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#address-wrapper {
    font-size: 1.1vmax;
    grid-column: 1;
    grid-row: 2;
}

#address-company-name {
    font-size: 1.3vmax;
    color: #061926d1;
}

#address-company-address {
    font-size: 1.3vmax;
    color: #061926d1;
}

#company-contacts-text {
    grid-column: 1;
    grid-row: 3;
    font-size: 1.1vmax;
    color: #061926d1;
    padding-right: 1.5vmax;
}

#emails-wrapper {
    font-size: 1.3vmax;
    grid-column: 1;
}

#phone-numbers-wrapper {
    font-size: 1.3vmax;
    grid-column: 1;
}

#contacts-image-wrapper {
    justify-self: center;
    grid-column: 2;
    grid-row: 1/5;
}

#contacts-photo {
    width: 27vmax;
}

#ISO9001-logo {
    width: 13vmax;
    grid-row: 1;
}

#nsbs-logo {
    width: 13vmax;
}

#nsbs-logo-wrapper {
    grid-row: 1;
}

#nsbs-logo:hover {
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000004a;
}

#fiata-logo {
    width: 13vmax;
    grid-row: 1;
}

#bvl-logo:hover {
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000004a;
}

#bvl-logo {
    width: 13vmax;
}

#bvl-logo-wrapper {
    grid-row: 1;
}

#copyright {
    padding-top: 1vmax;
    text-align: center;
    font-size: 1vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

@media only screen and (max-width: 600px) {
    .app-wrapper {
      width: 100%;
    }

    .language-selector {
        grid-gap: .7vmax;
    }

    .language-icon {
        width: 3.4vmax;
    }

    .motto-wrapper {
        width: unset;
        left: unset;
    }

    .page-nav {
        height: unset;
        width: unset;
        left: unset;
        padding-top: 1vmax;
        padding-bottom: 1vmax;
    }

    .page-nav-wrapper {
        grid-template-columns: auto;
    }

    .page-buttons {
        text-align: left;
        align-items: center;
        grid-template-rows: auto;
        grid-template-columns: auto 0.9fr;
        font-size: 2.2vmax;
    }

    .page-nav-image {
        width: 6.2vmax;
        padding: 1vmax;
    }

    .company-profile-wrapper {
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .successful-orders-wrapper {
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .company-values-wrapper {
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .company-documents-wrapper {
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .company-history-wrapper {
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .company-contacts-wrapper {
        grid-gap: 2vmax;
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .recommendations-wrapper {
        height: unset;
        grid-template-columns: repeat(auto-fill, 12vmax);
    }

    .recommendations-title {
        font-size: 3vmax;
        grid-row: 3;
    }
    
    .recommendations-list {
        grid-row: 4;
        overflow-y: auto;
        overflow-x: auto;
    }

    .recommendations-img {
        width: 11vmax;
    }

    .recommendations-img:hover {
        width: 12vmax;
    }

    .documents-wrapper {
        height: unset;
        grid-template-columns: repeat(auto-fill, 12vmax);
    }

    .documents-title {
        font-size: 3vmax;
        grid-row: 3;
    }
    
    .documents-list {
        grid-row: 4;
        overflow-y: auto;
        overflow-x: auto;
    }

    .documents-img {
        width: 11vmax;
    }

    .documents-img:hover {
        width: 12vmax;
    }

    .company-documents-img {
        width: 11vmax;
    }

    .company-documents-img:hover {
        width: 12vmax;
    }

    #language-choice-text {
        font-size: 2.2vmax;
    }

    #motto-main-text {
        padding-left: 1vmax;
        padding-right: 1vmax;
        font-size: 2.9vmax;
    }

    #company-profile-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
    }

    #company-profile-text {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
    }

    #successful-orders-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
    }

    #successful-orders-text {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
    }

    #company-values-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
    }

    #company-values-text {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
    }

    #company-documents-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
    }

    #company-history-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
    }

    #company-history-text {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
    }

    #company-contacts-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
        grid-column: 1/3;
        grid-row: 1;
    }

    #address-wrapper {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
        grid-column: 1/3;
        grid-row: 3;
    }

    #address-company-name {
        font-size: 2.4vmax;
    }

    #address-company-address {
        font-size: 2.3vmax;
    }

    #company-contacts-text {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
        grid-column: 1/3;
        grid-row: 4;
    }

    #emails-wrapper {
        font-size: 2.5vmax;
        padding-left: 1.5vmax;
        grid-row: 5;
    }

    #phone-numbers-wrapper {
        font-size: 2.5vmax;
        padding-left: 1.5vmax;
        grid-row: 6;
    }

    #contacts-image-wrapper {
        grid-row: 2;
        grid-column: 1/3;
        justify-self: center;
    }

    #copyright {
        font-size: 1.7vmax;
    }
}

@media only screen and (max-width: 370px) {

    a {
        word-break: break-word;
    }

    .motto-wrapper {
        background-repeat: unset;
    }

    .header-container {
        grid-gap: 2vmax;
    }

    .page-nav-wrapper {
        padding-left: 0;
        padding-right: 0 !important;
    }

    .language-selector {
        grid-column: 1;
    }

    .recommendations-title {
        font-size: 7vw;
    }

    .company-contacts-wrapper {
        grid-template-columns: 1fr;
    }

    #language-choice-text {
        font-size: 5.2vw;
    }

    #contacts-photo {
        width: 59vw;
    }

    #emails-wrapper {
        font-size: 2.5vmax;
    }

    #ISO9001-logo {
        grid-row: 1;
    }

    #fiata-logo {
        grid-row: 1;
    }

}