.hero {
  position: relative;
  width: 1440px;
  height: 823px;
  background-color: #fff2fb;
}

.hero .frame {
  display: flex;
  flex-direction: column;
  width: 621px;
  height: 469px;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 16px;
  left: 134px;
}

.hero .img {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 181.2px;
}

.hero .div {
  display: flex;
  flex-direction: column;
  width: 526px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.hero .frame-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.hero .group-wrapper {
  display: flex;
  flex-direction: column;
  width: 442px;
  align-items: flex-start;
  gap: 14.63px;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}

.hero .group {
  position: relative;
  width: 444px;
  height: 54px;
  margin-right: -2.00px;
}

.hero .overlap-group {
  position: relative;
  width: 439px;
  height: 54px;
  left: 1px;
  background-image: url(./img/bgg.png);
  background-size: 100% 100%;
}

.hero .text-wrapper {
  position: absolute;
  top: 13px;
  left: 62px;
  text-shadow: 0px 1px 0px #000000;
  -webkit-text-stroke: 1px #000000;
  font-family: "Cera Pro-Black", Helvetica;
  font-weight: 900;
  color: #ffffff;
  font-size: 22px;
  letter-spacing: 0;
  text-align: center;
  line-height: normal;
}

.hero .frame-3 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.hero .overlap-group-wrapper {
  position: relative;
  width: 103px;
  height: 124px;
}

.hero .overlap-group-2 {
  position: relative;
  width: 107px;
  height: 128px;
  top: -2px;
  left: -2px;
  border-radius: 8px 8px 8px 8px;
  border: 2px solid;
  border-color: #000000;
  box-shadow: inset 0px -4px 0px #00000040, inset 0px 4px 0px #ffffff40;
  background: linear-gradient(180deg, rgba(93, 202, 229, 1) 100%),
    linear-gradient(
      180deg,
      rgba(255, 131, 177, 1) 0%,
      rgba(252, 56, 128, 1) 100%
    ),
    linear-gradient(0deg, rgba(70, 138, 235, 1) 0%, rgba(70, 138, 235, 1) 100%);
}

.hero .text-wrapper-2 {
  position: absolute;
  width: 71px;
  top: 2px;
  left: 14px;
  -webkit-text-stroke: 2px #000000;
  font-family: "Cera Pro-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 64px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.hero .text-wrapper-3 {
  position: absolute;
  width: 71px;
  top: 93px;
  left: 15px;
  -webkit-text-stroke: 1px #000000;
  font-family: "Cera Pro-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  letter-spacing: 1.28px;
  line-height: normal;
}

.hero .frame-4 {
  display: inline-flex;
  flex-direction: column;
  height: 80px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.hero .ellipse {
  position: relative;
  width: 6px;
  height: 6px;
  background-color: #3c3c3b;
  border-radius: 3px;
}

.hero .text-wrapper-4 {
  position: absolute;
  width: 79px;
  top: 93px;
  left: 11px;
  -webkit-text-stroke: 1px #000000;
  font-family: "Cera Pro-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 1.28px;
  text-align: center;
  line-height: normal;
}

.hero .p {
  position: relative;
  width: fit-content;
  font-family: "Cera Pro-Medium", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 20px;
  letter-spacing: 0;
  text-align: center;
  line-height: normal;
}

.hero .overlap {
  position: absolute;
  width: 547px;
  height: 417px;
  top: 33px;
  left: 772px;
}

.hero .bubble-phone {
  position: absolute;
  width: 547px;
  height: 392px;
  top: 0;
  left: 0;
  object-fit: cover;
}

.hero .view {
  display: inline-flex;
  align-items: center;
  gap: 2.82px;
  padding: 2.82px 5.64px;
  position: absolute;
  top: 354px;
  left: 333px;
  background-color: #fdd501;
  border-radius: 70.45px;
  transform: rotate(-12.00deg);
}

.hero .ellipse-2 {
  position: relative;
  width: 5.64px;
  height: 5.64px;
  background-color: #fff2fb;
  border-radius: 2.82px;
}

.hero .div-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5.64px;
  padding: 5.64px;
  position: relative;
  flex: 0 0 auto;
}

.hero .text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -0.70px;
  font-family: "Cera Pro-Medium", Helvetica;
  font-weight: 500;
  color: #f50f64;
  font-size: 20px;
  letter-spacing: 0;
  text-align: center;
  line-height: normal;
}

.hero .frame-5 {
  display: inline-flex;
  align-items: center;
  gap: 48.58px;
  position: absolute;
  top: 464px;
  left: 822px;
}

.hero .img-2 {
  position: relative;
  width: 197.92px;
  height: 197.92px;
  object-fit: cover;
}

.hero .frame-6 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0px 0px 0px 8px;
  position: absolute;
  top: 521px;
  left: 289px;
  border-radius: 16px;
  border: 2px solid;
  border-color: #000000;
  background: linear-gradient(
    180deg,
    rgba(255, 131, 177, 1) 0%,
    rgba(252, 56, 128, 1) 100%
  );
}

.hero .group-2 {
  position: relative;
  width: 109.45px;
  height: 109.45px;
}

.hero .frame-7 {
  display: inline-flex;
  flex-direction: column;
  height: 124.55px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 8px 16px 0px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 0px 16px 16px 0px;
  overflow: hidden;
}

.hero .vector {
  position: relative;
  width: 68.45px;
  height: 27.91px;
}

.hero .magnum-club {
  position: relative;
  width: fit-content;
  font-family: "Cera Pro-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: -0.50px;
  line-height: normal;
}

.hero .frame-8 {
  position: absolute;
  width: 900px;
  height: 60px;
  top: 740px;
  left: 270px;
}

.vector-2 {
	background-image: url(./img/kzzz.png);
}

.header { width: 1440px; height: 77px; background-color: #ffffff; } .header .overlap { height: 77px; background-color: #ffffff; box-shadow: 0px -7px 28px #00000026; } .header .frame { display: flex; width: 1180px; align-items: flex-end; justify-content: space-between; position: relative; top: 16px; left: 130px; } .header .div { display: inline-flex; align-items: flex-start; justify-content: center; gap: 9px; position: relative; flex: 0 0 auto; } .header .magnum-logo-burger { position: relative; width: 280px; height: 40px; } .header .vector { position: absolute; width: 221px; height: 40px; top: 0; left: 59px; } .header .img { position: absolute; width: 30px; height: 16px; top: 9px; left: 0; } .header .text-wrapper { position: absolute; top: -5px; left: 289px; font-family: "Cera Pro-Black", Helvetica; font-weight: 900; color: #f50f64; font-size: 45.8px; text-align: center; letter-spacing: 0; line-height: 38px; white-space: nowrap; } .header .overlap-wrapper { position: relative; width: 48px; height: 48px; background-image: url(./img/union.svg); background-size: 100% 100%; } .header .overlap-group { position: relative; width: 50px; height: 48px; } .header .vector-2 { position: absolute; width: 48px; height: 48px; top: 0; left: 0; } .header .ph-gear-six-fill { position: absolute; width: 16px; height: 16px; top: 18px; left: 16px; box-shadow: 0px 4px 0px #000000; } .header .group { position: absolute; width: 45px; height: 30px; top: 11px; left: 5px; } .header .overlap-group-2 { position: relative; width: 39px; height: 30px; } .header .text-wrapper-2 { top: 2px; left: 2px; color: #000000; position: absolute; font-family: "Intro -Regular", Helvetica; font-weight: 400; font-size: 28px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; } .header .text-wrapper-3 { top: 1px; left: 1px; color: #566572; position: absolute; font-family: "Intro -Regular", Helvetica; font-weight: 400; font-size: 28px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; } .header .text-wrapper-4 { top: 0; left: 0; color: #ffffff; position: absolute; font-family: "Intro -Regular", Helvetica; font-weight: 400; font-size: 28px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; }