@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 */
.layout1 {
  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;
}

.layout1 > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

/* Logo styling */
.logo {
  position: absolute;
  top: calc(45px * var(--artboard-width) / var(--legacy-artboard-size));
  left: 50%;
  transform: translateX(-50%);
  width: calc(300px * var(--artboard-width) / var(--legacy-artboard-size));
  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;
}

.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); }

.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); }

.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;
}