* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}

.desktop .frame {
  width: 714px;
  height: 747px;
  /* background-color: #cbedfd40; */
}

.desktop .frame .group {
  position: relative;
  width: 692px;
  height: 694px;
  top: 32px;
  left: 16px;
}

.desktop .frame .overlap {
  position: absolute;
  width: 554px;
  height: 194px;
  top: 258px;
  left: 0;
}

.desktop .frame .arrow-down {
  top: 148px;
  left: 245px;
  position: absolute;
  width: 42px;
  height: 46px;
}

.desktop .frame .pathway-card-type {
  width: 554px;
  align-items: flex-start;
  gap: 10px;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  position: absolute;
}

.desktop .frame .rectangle {
  width: 542px;
  height: 149px;
  position: relative;
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid;
  border-color: #000000;
}

.desktop .frame .div {
  position: absolute;
  top: 39px;
  left: 124px;
  width: 404px;
  height: 71px;
}

.desktop .frame .text-wrapper {
  position: absolute;
  width: 399px;
  top: 0;
  left: 1px;
  font-family: "Public Sans", Helvetica;
  font-weight: 600;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 23px;
}

.desktop .frame .the-AACA {
  position: absolute;
  width: 400px;
  top: 33px;
  left: 0;
  font-family: "Public Sans", Helvetica;
  font-weight: 300;
  color: #000000;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 19px;
  margin-top: 1px;
}

.desktop .frame .element-hand-watch-time {
  position: absolute;
  width: 64px;
  height: 63px;
  top: 43px;
  left: 27px;
}

.desktop .frame .overlap-group {
  position: absolute;
  width: 691px;
  height: 646px;
  top: 0;
  left: 0;
}

.desktop .frame .long-arrow-down {
  position: absolute;
  width: 42px;
  height: 269px;
  top: 200px;
  left: 587px;
}

.desktop .frame .pathway-card-type-2 {
  width: 131px;
  align-items: center;
  gap: 26px;
  padding: 31px 2px;
  top: 0;
  left: 543px;
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid;
  border-color: #000000;
  display: flex;
  flex-direction: column;
  position: absolute;
}

.desktop .frame .element-draw-edit-pen {
  position: relative;
  width: 52.65px;
  height: 53.29px;
}

.desktop .frame .overseas {
  position: relative;
  width: 124px;
  font-family: "Public Sans", Helvetica;
  font-weight: 600;
  color: #000000;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: 16px;
}

.desktop .frame .pathway-card-type-3 {
  width: 691px;
  align-items: flex-start;
  gap: 10px;
  top: 454px;
  left: 0;
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 1;
}

.desktop .frame .rectangle-2 {
  width: 676px;
  height: 147px;
  position: relative;
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid;
  border-color: #000000;
}

.desktop .frame .group-2 {
  position: absolute;
  top: 26px;
  left: 125px;
  width: 495px;
  height: 95px;
}

.desktop .frame .p {
  position: absolute;
  width: 481px;
  top: 0;
  left: 0;
  font-family: "Public Sans", Helvetica;
  font-weight: 600;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 23px;
}

.desktop .frame .lorem-ipsum-dolor {
  position: absolute;
  width: 491px;
  top: 38px;
  left: 0;
  font-family: "Public Sans", Helvetica;
  font-weight: 300;
  color: #000000;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 19px;
  margin-top: 1px;
}

.desktop .frame .span {
  font-family: "Public Sans", Helvetica;
  font-weight: 300;
  color: #000000;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 19px;
}

.desktop .frame .img {
  position: absolute;
  width: 63px;
  height: 64px;
  top: 37px;
  left: 34px;
}

.desktop .frame .arrow-down-2 {
  top: 600px;
  left: 242px;
  position: absolute;
  width: 42px;
  height: 46px;
}

.desktop .frame .arrow-down-3 {
  position: absolute;
  width: 42px;
  height: 46px;
  top: 205px;
  left: 44px;
}

.desktop .frame .arrow-down-4 {
  top: 205px;
  left: 180px;
  position: absolute;
  width: 42px;
  height: 46px;
}

.desktop .frame .overlap-2 {
  position: absolute;
  width: 131px;
  height: 251px;
  top: 0;
  left: 272px;
}

.desktop .frame .pathway-card-type-4 {
  display: flex;
  flex-direction: column;
  width: 131px;
  height: 205px;
  align-items: center;
  gap: 26px;
  padding: 31px 2px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid;
  border-color: #000000;
}

.desktop .frame .pathway-card-type-4 .overseas {
    margin-top: 1px;
}

.desktop .frame .arrow-down-5 {
  top: 205px;
  left: 452px;
  position: absolute;
  width: 42px;
  height: 46px;
}

.desktop .frame .pathway-card-type-5 {
  width: 131px;
  height: 205px;
  align-items: center;
  gap: 27px;
  padding: 30px 2px;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  border: 1px solid;
  border-color: #000000;
}

.desktop .frame .group-3 {
  position: relative;
  width: 57px;
  height: 54.29px;
}

.desktop .frame .text-wrapper-2 {
  position: relative;
  width: 124px;
  font-family: "Public Sans", Helvetica;
  font-weight: 600;
  color: #000000;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: 16px;
}


.desktop .frame .pathway-card-type-6 {
  width: 131px;
  height: 205px;
  align-items: center;
  gap: 26px;
  padding: 31px 2px;
  top: 0;
  left: 136px;
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid;
  border-color: #000000;
  display: flex;
  flex-direction: column;
  position: absolute;
}

.desktop .frame .pathway-card-type-5:hover {
  background-color: #15397f;
  display: flex;
}

.desktop .frame .pathway-card-type-7 {
  display: flex;
  flex-direction: column;
  width: 131px;
  height: 205px;
  align-items: center;
  gap: 26px;
  padding: 31px 2px;
  position: absolute;
  top: 0;
  left: 408px;
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid;
  border-color: #000000;
}

.desktop .frame .downlaod-button {
  display: flex;
  flex-direction: column;
  width: 676px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 19px;
  position: absolute;
  top: 646px;
  left: 0;
  background-color: #df4361;
  border-radius: 25px;
  overflow: hidden;
}

.desktop .frame .downlaod-button:hover {
    background-color: #15397f;
}
/* .desktop .frame .downlaod-button:hover .text {
    color: #df4361;
} */

.desktop .frame .group-4 {
  position: relative;
  width: 83px;
  height: 24px;
}

.desktop .frame .text {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Public Sans", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.desktop .frame .pathway-card-type:hover .rectangle,
.desktop .frame .pathway-card-type-2:hover,
.desktop .frame .pathway-card-type-3:hover .rectangle-2,
.desktop .frame .pathway-card-type-4:hover,
.desktop .frame .pathway-card-type-5:hover,
.desktop .frame .pathway-card-type-6:hover,
.desktop .frame .pathway-card-type-7:hover {
  background-color: #15397f;
}

.desktop .frame .pathway-card-type:hover .text-wrapper,
.desktop .frame .pathway-card-type:hover .the-AACA,
.desktop .frame .pathway-card-type-2:hover .overseas,
.desktop .frame .pathway-card-type-3:hover .group-2 p,
.desktop .frame .pathway-card-type-3:hover .group-2 span,
.desktop .frame .pathway-card-type-4:hover .overseas,
.desktop .frame .pathway-card-type-5:hover .text-wrapper-2,
.desktop .frame .pathway-card-type-6:hover .overseas,
.desktop .frame .pathway-card-type-7:hover .overseas
 {
  color: #ffffff;
}

.desktop .frame .pathway-card-type:hover img,
.desktop .frame .pathway-card-type-2:hover img,
.desktop .frame .pathway-card-type-3:hover img,
.desktop .frame .pathway-card-type-4:hover img,
.desktop .frame .pathway-card-type-5:hover img,
.desktop .frame .pathway-card-type-6:hover img,
.desktop .frame .pathway-card-type-7:hover img
{
    filter: invert(1);
}

.long-arrow-down {
  transition: 0.5s;
}

.desktop .long-arrow-down:hover {
  margin-top: -18px;
}

.desktop .arrow-down {
  transition: 0.5s;
}

.desktop .arrow-down:hover {
  margin-top: -18px;
}


.desktop .arrow-down-2 {
  transition: 0.5s;
}

.desktop .arrow-down-2:hover {
  margin-top: -18px;
}

.desktop .arrow-down-3 {
  transition: 0.5s;
}

.desktop .arrow-down-3:hover {
  margin-top: -18px;
}

.desktop .arrow-down-4 {
  transition: 0.5s;
}

.desktop .arrow-down-4:hover {
  margin-top: -18px;
}


.desktop .arrow-down-5 {
  transition: 0.5s;
}

.desktop .arrow-down-5:hover {
  margin-top: -18px;
}

@media (max-width: 1150px) {
    html .desktop .frame {
        transform-origin: top left;
        transform: scale(0.95);
    }
}
@media (max-width: 1100px) {
    html .desktop .frame {
        transform-origin: top left;
        transform: scale(0.9);
    }
}
@media (max-width: 1050px) {
    html .desktop .frame {
        transform-origin: top left;
        transform: scale(0.85);
    }
}
@media (max-width: 1000px) {
    html .desktop .frame {
        transform-origin: top left;
        transform: scale(0.8);
    }
}
@media (max-width: 960px) {
    html .desktop .frame {
        transform-origin: top left;
        transform: scale(1);
    }
}
@media (max-width: 760px) {
    html .desktop .frame {
        transform-origin: top left;
        transform: scale(0.95);
    }
}
@media (max-width: 720px) {
    html .desktop .frame {
        transform-origin: top left;
        transform: scale(0.9);
    }
}
@media (max-width: 680px) {
    html .desktop .frame {
        transform-origin: top left;
        transform: scale(0.85);
    }
}
@media (max-width: 620px) {
    html .desktop .frame {
        transform-origin: top left;
        transform: scale(0.8);
    }
}