:root {
  --gray-100: rgba(242, 244, 247, 1);
  --basewhite: rgba(255, 255, 255, 1);
  --gray-25: rgba(252, 252, 253, 1);
  --primary-300: rgba(38, 69, 245, 1);
  --gray-900: rgba(16, 24, 40, 1);
  --text-sm-semibold-font-family: "Inter-SemiBold", Helvetica;
  --text-sm-semibold-font-weight: 600;
  --text-sm-semibold-font-size: 14px;
  --text-sm-semibold-letter-spacing: 0px;
  --text-sm-semibold-line-height: 20px;
  --text-sm-semibold-font-style: normal;
  --text-sm-regular-font-family: "Inter-Regular", Helvetica;
  --text-sm-regular-font-weight: 400;
  --text-sm-regular-font-size: 14px;
  --text-sm-regular-letter-spacing: 0px;
  --text-sm-regular-line-height: 20px;
  --text-sm-regular-font-style: normal;
  --text-md-regular-font-family: "Inter-Regular", Helvetica;
  --text-md-regular-font-weight: 400;
  --text-md-regular-font-size: 16px;
  --text-md-regular-letter-spacing: 0px;
  --text-md-regular-line-height: 24px;
  --text-md-regular-font-style: normal;
  --text-lg-bold-font-family: "Inter-Bold", Helvetica;
  --text-lg-bold-font-weight: 700;
  --text-lg-bold-font-size: 18px;
  --text-lg-bold-letter-spacing: 0px;
  --text-lg-bold-line-height: 28px;
  --text-lg-bold-font-style: normal;
  --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
}

.home-media_mix {
  /* background-color: #f2f3f6; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  background-color: var(--gray-100);
}

.home-media_mix .frame {
  position: absolute;
  width: 1920px;
  height: 60px;
  top: 0;
  left: 0;
  background-color: var(--primary-300);
}

.home-media_mix .div-wrapper {
  position: absolute;
  width: 166px;
  height: 60px;
  top: 0;
  left: 0;
}

.home-media_mix .text-wrapper {
  position: absolute;
  top: 6px;
  left: 18px;
  font-family: "Kadwa", Helvetica;
  font-weight: 400;
  color: var(--basewhite);
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
}

.home-media_mix .frame-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 10px;
  position: absolute;
  top: 16px;
  left: 1756px;
  background-color: #0720b180;
  border-radius: 100px;
}

.home-media_mix .div {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.home-media_mix .text {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--text-sm-semibold-font-family);
  font-weight: var(--text-sm-semibold-font-weight);
  color: var(--gray-25);
  font-size: var(--text-sm-semibold-font-size);
  letter-spacing: var(--text-sm-semibold-letter-spacing);
  line-height: var(--text-sm-semibold-line-height);
  white-space: nowrap;
  font-style: var(--text-sm-semibold-font-style);
}

.home-media_mix .icon-chevron-down {
  position: relative;
  width: 20px;
  height: 20px;
}

.home-media_mix .frame-2 {
  top: 124px;
  position: absolute;
  left: 35%;
}

.home-media_mix .overlap-group {
  position: absolute;
  width: 486px;
  height: 132px;
  top: 0;
  left: 0;
}

.home-media_mix .frame-3 {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: absolute;
  top: 0;
  left: 0;
}

.home-media_mix .text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Kadwa", Helvetica;
  font-weight: 400;
  color: var(--gray-900);
  font-size: 42px;
  letter-spacing: 0;
  line-height: normal;
}

.home-media_mix .group {
  position: relative;
  width: 93px;
  height: 20px;
  margin-right: -2px;
}

.home-media_mix .text-wrapper-3 {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--text-sm-regular-font-family);
  font-weight: var(--text-sm-regular-font-weight);
  color: #000000;
  font-size: var(--text-sm-regular-font-size);
  letter-spacing: var(--text-sm-regular-letter-spacing);
  line-height: var(--text-sm-regular-line-height);
  white-space: nowrap;
  font-style: var(--text-sm-regular-font-style);
}

.home-media_mix .ISPD-logotype-blue {
  position: absolute;
  width: 65px;
  height: 20px;
  top: 0;
  left: 26px;
  background-image: url('../images/ispd-logo.png');
  background-size: cover;
  background-position: 50% 50%;
}

.home-media_mix .p {
  position: absolute;
  width: 486px;
  top: 83px;
  left: 0;
  font-family: var(--text-md-regular-font-family);
  font-weight: var(--text-md-regular-font-weight);
  color: #000000;
  font-size: var(--text-md-regular-font-size);
  letter-spacing: var(--text-md-regular-letter-spacing);
  line-height: var(--text-md-regular-line-height);
  font-style: var(--text-md-regular-font-style);
}

.home-media_mix .frame-4 {
  display: flex;
  flex-direction: column;
  width: 486px;
  align-items: flex-start;
  gap: 12px;
  position: absolute;
  top: 162px;
  left: 0;
}

.home-media_mix .button-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  padding: 12px 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.home-media_mix .frame-5 {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  position: relative;
  flex: 0 0 auto;
}

.home-media_mix .img {
  position: relative;
  width: 24px;
  height: 24px;
}

.home-media_mix .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--text-lg-bold-font-family);
  font-weight: var(--text-lg-bold-font-weight);
  color: var(--gray-900);
  font-size: var(--text-lg-bold-font-size);
  letter-spacing: var(--text-lg-bold-letter-spacing);
  line-height: var(--text-lg-bold-line-height);
  white-space: nowrap;
  font-style: var(--text-lg-bold-font-style);
}