/* screen - branding */

.branding {
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  height: 1451px;
  overflow: hidden;
  width: 1280px;
}

.branding .overlap-group {
  height: 1842px;
  margin-top: -109.6px;
  position: relative;
  width: 1472px;
}

.branding .rectangle-17 {
  background-color: var(--shark);
  cursor: pointer;
  height: 1453px;
  left: 0;
  position: absolute;
  top: 108px;
  width: 1280px;
}

.branding .destello-mint {
  display: flex;
  height: 869px;
  left: 194px;
  position: absolute;
  top: 687px;
  transform: rotate(17.00deg);
  width: 891px;
}

.branding .group-16 {
  flex: 1;
  margin-bottom: -111.3px;
  margin-left: -107.6px;
  margin-right: -107.6px;
  margin-top: -111.3px;
  object-fit: cover;
  transform: rotate(-17.00deg);
  width: 1106.24px;
}

.branding .title {
  color: var(--padua);
  font-family: var(--font-family-joyride-outline);
  font-size: var(--font-size-xxxxl);
  font-weight: 400;
  left: 60px;
  letter-spacing: 0;
  line-height: 30px;
  position: absolute;
  top: 220px;
  white-space: nowrap;
}

.branding .magic-match-media {
  color: var(--padua);
  font-family: var(--font-family-joyride-regular);
  font-size: var(--font-size-xxxl);
  font-weight: 400;
  left: 61px;
  letter-spacing: 0;
  line-height: 22px;
  position: absolute;
  top: 301px;
  white-space: nowrap;
}

.branding .rectangle-19 {
  border: 1px solid;
  border-color: var(--padua);
  height: 106px;
  left: 461px;
  position: absolute;
  top: 556px;
  width: 399px;
}

.branding .mask-group-3 {
  display: flex;
  height: 323px;
  left: 62px;
  overflow: hidden;
  position: absolute;
  top: 556px;
  width: 399px;
}

.branding .magic-logo {
  background-color: #0e295e;
  background-image: url(../img/group-42@1x.png);
  background-position: 50% 50%;
  background-size: cover;
  flex: 1;
  margin-bottom: -39.0px;
  margin-right: 0.5px;
  margin-top: -39.0px;
  width: 398.64px;
}

.branding .group-44 {
  height: 106px;
  left: 461px;
  position: absolute;
  top: 556px;
  width: 399px;
}

.branding .rectangle-54 {
  background-color: #00edf9;
  height: 106px;
  left: 0;
  position: absolute;
  top: 0;
  width: 130px;
}

.branding .rectangle-55 {
  background-color: #0e295e;
  height: 106px;
  left: 130px;
  position: absolute;
  top: 0;
  width: 139px;
}

.branding .rectangle-56 {
  background-color: #5b6cff;
  height: 106px;
  left: 269px;
  position: absolute;
  top: 0;
  width: 130px;
}

.branding .rectangle-59 {
  border: 1px solid;
  border-color: var(--padua);
  height: 475px;
  left: 62px;
  position: absolute;
  top: 556px;
  width: 1160px;
}

.branding .destello-mint-1 {
  display: flex;
  height: 495px;
  left: 890px;
  position: absolute;
  top: 77px;
  transform: rotate(-22.00deg);
  width: 507px;
}

.branding .group-16-1 {
  flex: 1;
  margin-bottom: -77.0px;
  margin-left: -74.2px;
  margin-right: -74.2px;
  margin-top: -77.0px;
  object-fit: cover;
  transform: rotate(22.00deg);
  width: 655.76px;
}

.branding .me-complace-presenta {
  left: 60px;
  letter-spacing: 0;
  line-height: 12px;
  position: absolute;
  top: 375px;
  width: 861px;
}

.branding .magic-match-media-en {
  left: 61px;
  letter-spacing: 0;
  line-height: 12px;
  position: absolute;
  top: 473px;
  width: 1104px;
}

.branding .rectangle-57 {
  background-color: #c5c5c5;
  height: 369px;
  left: 461px;
  position: absolute;
  top: 662px;
  width: 580px;
}

.branding .group-4 {
  height: 370px;
  left: 461px;
  object-fit: cover;
  position: absolute;
  top: 662px;
  width: 580px;
}

.branding .mask-group-6 {
  height: 153px;
  left: 62px;
  object-fit: cover;
  position: absolute;
  top: 879px;
  width: 399px;
}

.branding .image-1 {
  height: 482px;
  left: 62px;
  object-fit: cover;
  position: absolute;
  top: 1072px;
  width: 713px;
}

.branding .gimbal {
  height: 1114px;
  left: 166px;
  object-fit: cover;
  position: absolute;
  top: 728px;
  width: 1114px;
}

.branding .iphone-14-pro-mockup-v2-top-view {
  height: 775px;
  left: 704px;
  object-fit: cover;
  position: absolute;
  top: 897px;
  width: 724px;
}

.branding .mask-group-5 {
  height: 370px;
  left: 1041px;
  object-fit: cover;
  position: absolute;
  top: 662px;
  width: 181px;
}

.branding .rectangle-58 {
  background-color: #345caa;
  border: 1px solid;
  border-color: #707070;
  height: 106px;
  left: 860px;
  position: absolute;
  top: 556px;
  width: 362px;
}

.branding .mask-group-7 {
  height: 106px;
  left: 860px;
  object-fit: cover;
  position: absolute;
  top: 556px;
  width: 362px;
}