@import url('artboard.css');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
}

.artboard {
    width: var(--artboard-width);
    height: var(--artboard-height);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--brand-bg, #96d2ff);
}

/* Layout container */
.layout5 {
    width: var(--artboard-width);
    height: var(--artboard-height);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--brand-bg, #96d2ff);
    position: relative;
    overflow: hidden;
}

.text-element {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
  }
  .text-element p,
  .text-element h1,
  .text-element h2 {
    margin: 0;
    padding: 0;
    line-height: 1;
  }
  

.bg-color-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.logo {
    position: absolute;
    top: calc(45px * var(--artboard-width) / var(--legacy-artboard-size));
    left: 20%;
    transform: translateX(-50%);
    width: 25%;
    height: auto;
    z-index: 2;
    object-fit: contain;
    object-position: center;
}

.company-name,
.description,
.headline {
    position: absolute;
    text-align: center;
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.1;
    white-space: pre;
    z-index: 1;
    color: rgb(255, 255, 255);
    font-weight: 600;
    box-sizing: border-box;
}

.bg-base { background-color: var(--brand-bg, #96d2ff); }
.shape1 { fill: var(--brand-shape1, #008cff); background-color: var(--brand-shape1, #008cff); }
.shape2 { fill: var(--brand-shape2, #00c4cc); background-color: var(--brand-shape2, #00c4cc); }
.shape3 { fill: var(--brand-shape3, #ffffff); background-color: var(--brand-shape3, #ffffff); }
.shape4 { fill: var(--brand-shape4, #f9e076); background-color: var(--brand-shape4, #f9e076); }
.shape5 { fill: var(--brand-shape5, #1f1b1d); background-color: var(--brand-shape5, #1f1b1d); }

.company-name {
    top: calc(120px * var(--artboard-width) / var(--legacy-artboard-size));
    font-size: calc(24px * var(--artboard-width) / var(--legacy-artboard-size));
    font-weight: 600;
}

.description {
    top: calc(180px * var(--artboard-width) / var(--legacy-artboard-size));
    font-size: calc(28px * var(--artboard-width) / var(--legacy-artboard-size));
    font-weight: 400;
}

.headline {
    top: calc(220px * var(--artboard-width) / var(--legacy-artboard-size));
    font-size: calc(16px * var(--artboard-width) / var(--legacy-artboard-size));
    font-weight: 400;
}

.product {
    width: calc(250px * var(--artboard-width) / var(--legacy-artboard-size));
    height: auto;
    position: absolute;
    bottom: calc(20px * var(--artboard-width) / var(--legacy-artboard-size));
    right: calc(20px * var(--artboard-width) / var(--legacy-artboard-size));
    z-index: 2;
    object-fit: contain;
    object-position: center;
}

.shapeSvg {
    shape-rendering: geometricPrecision;
    z-index: 0;
}

svg image {
    opacity: 0.3;
}

.mainPath { fill: var(--brand-shape1, #008cff); }

.abstract {
    width: calc(1200px * var(--artboard-width) / var(--legacy-artboard-size));
    height: auto;
    position: absolute;
    top: calc(360px * var(--artboard-width) / var(--legacy-artboard-size));
    z-index: 0;
}