@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 */
.layout2,
.layout-2 {
  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;
}




/* 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: 20%;
  transform: translateX(-50%);
  width: 25%;
  height: auto;
  z-index: 2;
  object-fit: contain;
  object-position: center;
}


/* Text styles */
.company-name,
.description,
.headline {
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 1;
  color: rgb(255, 255, 255);
  font-weight: 600;
}

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

/* SVG settings */
.shapeSvg {
  shape-rendering: geometricPrecision;
  z-index: 0;
}

svg image {
  opacity: 0.3;
}

/* Brand-driven colors */
.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); }

/* Product image - Positioned at bottom right */
.main-path-02b {
  fill: var(--brand-shape1, #008cff);
  
}

.rectangular {
  position: absolute;
  top: 43.5%;
  left: 69.5%;
  width: calc(270px * var(--artboard-width) / var(--legacy-artboard-size));
  height: calc(458px * var(--artboard-width) / var(--legacy-artboard-size));
  background-color: var(--brand-shape3, #ffffff);
  transform: translate(-50%, -50%);
  z-index: 10;
  border-radius: calc(200px * var(--artboard-width) / var(--legacy-artboard-size));
}

/* Bearing Abstract image - Positioned 40% from top */
.abstract {
  width: calc(1200px * var(--artboard-width) / var(--legacy-artboard-size));
  height: auto;
  position: absolute;
  /* Position it absolutely within the parent container */
  top: calc(390px * var(--artboard-width) / var(--legacy-artboard-size));
  /* 40% from the top of the layout */
  z-index: 0;
}