:root {
    /* Neutral */
    --lightGray: 205, 205, 205;
    --ghostWhite: 245, 247, 255; /* F5F7FF */

    /* Red */
    --americanRed: 220, 53, 69; /* B02A37 */
    --palePink: 248, 215, 218; /* F8D7DA */
    --royalOrange: 250, 151, 70;  /* FA9746 */

    /* Green */
    --salem: 25, 135, 84; /* 198754 */
    --gainsboro: 209, 231, 221; /* D1E7DD */
    
    /* Blue */
    --pigmentBlue: 35, 58, 158; /* 233A9E */
    --pigmentBlueLight: 125, 158, 255; /*  */
    --ultramarineBlue: 52, 89, 248; /* 3459F8 */
    --ultramarineBlueDark: 42, 79, 238;
    --lavenderWeb: 230, 235, 254; /* E6EBFE */
    --lavenderWebLight: 245, 250, 255;
    --lavenderWebDark: 220, 225, 244;
    --cornflowerBlue: 122, 147, 255; /* 7A93FF */
    --aliceBlue: 242, 245, 255; /* F3F6FF */
    --azureishWhite: 221, 224, 240; /* DDE0F0 */

    --divPlatform-height: 100px;
    --divPlatform-marginTop: 8px;
    --divPlatform-marginBottom: 8px;
}

@font-face {
    font-family: Gilroy;
    src: url('./fonts/Gilroy-Medium.ttf');
}

body {
    background-color: white;
}
body, h1, h2, h3, h4, h5, h6, p, section {
    font-family: "Gilroy", Arial, sans-serif;
}

h1 {
    color: rgb(var(--ultramarineBlue)) !important;
    font-weight: bold;
}
h2 {
    color: rgb(var(--ultramarineBlue)) !important;
}
h3 {
    color: rgb(var(--royalOrange)) !important;
}
/* h4 {

} */

a {
    text-decoration: none;
}
b {
    color: rgb(var(--ultramarineBlue));
}

#origin {
    margin-top: 64px;
}
section {
    min-height: 100px;
    padding-top: 128px;
    padding-bottom: 128px;
}
section .w3-content {
    background-color: #fffc;
    border-radius: 8px;
    padding-top: 36px;
    padding-bottom: 36px;
    padding-left: 4px;
    padding-right: 4px;
    backdrop-filter: blur(5px);
}
.section-users {
    margin-top: 128px;
    margin-bottom: 128px; 
}
.section-users h3{
    margin-bottom: 32px; 
}
footer {
    min-height: 100px;
    padding-top: 28px;
    padding-bottom: 28px;
    padding-left: 8px;
    padding-right: 8px;
}
.contact-button {
    background-color: rgb(var(--royalOrange)) !important;
    color: white;
}
.contact-button:hover {
    background-color: rgb(var(--royalOrange)) !important;
    color: white !important;
    font-weight: bold !important;
}

.logo-div h1 {
    display:inline;
    font-size: 24px;
    font-weight: bold;
}
.logo-div img {
    height: 32px;
}

.text-main-color {
    color: rgb(var(--ultramarineBlue)) !important;
}
.background-main-color {
    background-color: rgb(var(--ultramarineBlue)) !important;
}
.border-main-color {
    border-color: rgb(var(--ultramarineBlue)) !important;
}
.text-second-color {
    color: rgb(var(--royalOrange)) !important;
}
.background-second-color {
    background-color: rgb(var(--royalOrange)) !important;
}
.text-green-color {
    color: rgb(var(--salem)) !important;
}
.background-gold {
    background-color: #FFCC00;
}
.background-silver {
    background-color: #A5A5A5;
}
.background-bronze {
    background-color: #CD7F32;
}
.border-gold {
    border-color: #FFCC00 !important;
}
.border-silver {
    border-color: #A5A5A5 !important;
}
.border-bronze {
    border-color: #CD7F32 !important;
}
.text-light-blue {
    color: rgb(var(--pigmentBlueLight)) !important;
}
.background-light-blue {
    background-color: rgb(var(--pigmentBlueLight)) !important;
}
.text-pale-pink {
    color: rgb(var(--palePink)) !important;
}
.background-pale-pink {
    background-color: rgb(var(--palePink)) !important;
}

.offer-price {
    background-color: white;
    height: 150px;
}
.offer-summary {
    background-color: white;
    height: 120px;
    font-size: 18px;
    font-weight: bold;
}
.offer-description {
    background-color: white;
    height: 160px;
}

.div-platform {
    height: var(--divPlatform-height);
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    /* border: 1px solid rgb(var(--ultramarineBlue)); */
    /* border: 1px solid gray; */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}
.div-platform-col3 {
    margin-top: var(--divPlatform-marginTop);
    margin-bottom: var(--divPlatform-marginBottom);
    color: rgb(var(--pigmentBlueLight));
}
#col2-row1 {
    margin-top: calc( var(--divPlatform-height)*1 + var(--divPlatform-marginTop)*1 + var(--divPlatform-marginBottom)*1 );
}
#col2-row2 {
    margin-top: calc( var(--divPlatform-height)*2 + var(--divPlatform-marginTop)*2 + var(--divPlatform-marginBottom)*1 );
}
#col2-row3 {
    margin-top: calc( var(--divPlatform-height)*3 + var(--divPlatform-marginTop)*3 + var(--divPlatform-marginBottom)*1 );
}
#col1-row1 {
    margin-top: calc( (var(--divPlatform-height) + var(--divPlatform-marginTop) + var(--divPlatform-marginBottom)) * 11 / 2.0 );
}
.line-platform {
    /* border-color: rgb(var(--ultramarineBlue));
    background-color: rgb(var(--ultramarineBlue)); */
    border-color: lightgray;
    background-color: lightgray;
    position: absolute;
}

.advantages {
    padding-top: 50px;
    padding-bottom: 50px;
}

.usecase-schema {
    height: 300px;
}
#schema-supplychain {
    margin-top: 50px;
}

@media only screen and (min-width: 320px) and (max-width: 750px) {
    .usecase-schema {
        height: auto;
    }
    #schema-supplychain {
        margin-top: 0px;
    }
}