.element-homepage {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.element-homepage .div {
  background-color: var(--white);
  overflow: hidden;
  width: 1440px;
  height: 8614px;
  position: relative;
}

.element-homepage .footers {
  position: absolute;
  width: 1440px;
  height: 828px;
  top: 7789px;
  left: 0;
}

.element-homepage .overlap-group {
  position: relative;
  height: 828px;
}

.element-homepage .pattern {
  position: absolute;
  width: 1440px;
  height: 781px;
  top: 0;
  left: 0;
}

.element-homepage .footer {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  position: absolute;
  top: 368px;
  left: 0;
}

.element-homepage .border {
  position: relative;
  width: 1110px;
  height: 1px;
  margin-top: -1px;
  object-fit: cover;
}

.element-homepage .footer-2 {
  position: relative;
  width: 1440.03px;
  height: 460px;
  margin-left: -0.02px;
  margin-right: -0.02px;
}

.element-homepage .bg {
  position: absolute;
  width: 1440px;
  height: 459px;
  top: -3850px;
  left: 9273px;
}

.element-homepage .row {
  display: flex;
  width: 1110px;
  align-items: flex-start;
  justify-content: space-between;
  position: absolute;
  top: 56px;
  left: 165px;
}

.element-homepage .col {
  display: flex;
  flex-direction: column;
  width: 302px;
  align-items: flex-start;
  gap: 32px;
  position: relative;
}

.element-homepage .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--heading-title-font-family);
  font-weight: var(--heading-title-font-weight);
  color: var(--primary);
  font-size: var(--heading-title-font-size);
  letter-spacing: var(--heading-title-letter-spacing);
  line-height: var(--heading-title-line-height);
  white-space: nowrap;
  font-style: var(--heading-title-font-style);
}

.element-homepage .div-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .list {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Font Awesome 5 Free-Solid", Helvetica;
  font-weight: 400;
  color: var(--light);
  font-size: 14px;
  letter-spacing: 0;
  line-height: Truepx;
  white-space: nowrap;
}

.element-homepage .jl-dhoho-gg-masjid {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--light);
  font-size: var(--body-normal-font-size);
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  font-style: var(--body-normal-font-style);
}

.element-homepage .div-3 {
  display: inline-flex;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--light);
  font-size: var(--body-normal-font-size);
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  white-space: nowrap;
  font-style: var(--body-normal-font-style);
}

.element-homepage .col-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .menu {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-4 {
  position: relative;
  width: fit-content;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--light);
  font-size: var(--body-normal-font-size);
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  white-space: nowrap;
  font-style: var(--body-normal-font-style);
}

.element-homepage .col-3 {
  display: flex;
  flex-direction: column;
  width: 367px;
  align-items: flex-start;
  gap: 32px;
  position: relative;
}

.element-homepage .p {
  position: relative;
  align-self: stretch;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--light);
  font-size: var(--body-normal-font-size);
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  font-style: var(--body-normal-font-style);
}

.element-homepage .form {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .field {
  padding: 12px 16px;
  position: relative;
  align-self: stretch;
  flex-grow: 1;
  background-color: var(--light);
  border-radius: 8px;
  border: none;
  margin-top: -1px;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--text-secondary);
  font-size: var(--body-normal-font-size);
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  white-space: nowrap;
  font-style: var(--body-normal-font-style);
}

.element-homepage .button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--primary);
  border-radius: 8px;
}

.element-homepage .text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--link-normal-font-family);
  font-weight: var(--link-normal-font-weight);
  color: var(--light);
  font-size: var(--link-normal-font-size);
  letter-spacing: var(--link-normal-letter-spacing);
  line-height: var(--link-normal-line-height);
  white-space: nowrap;
  font-style: var(--link-normal-font-style);
}

.element-homepage .copy {
  display: flex;
  width: 1440px;
  height: 70px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  position: absolute;
  top: 390px;
  left: 0;
  background-color: var(--dark);
}

.element-homepage .copyright-qibla {
  position: relative;
  width: fit-content;
  font-family: var(--link-normal-font-family);
  font-weight: var(--link-normal-font-weight);
  color: var(--light);
  font-size: var(--link-normal-font-size);
  text-align: center;
  letter-spacing: var(--link-normal-letter-spacing);
  line-height: var(--link-normal-line-height);
  white-space: nowrap;
  font-style: var(--link-normal-font-style);
}

.element-homepage .row-2 {
  display: flex;
  width: 1110px;
  align-items: flex-start;
  justify-content: space-between;
  position: absolute;
  top: 85px;
  left: 165px;
}

.element-homepage .col-4 {
  display: flex;
  flex-direction: column;
  width: 293px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.element-homepage .brand {
  position: relative;
  width: 198px;
  height: 60px;
}

.element-homepage .col-5 {
  display: flex;
  flex-direction: column;
  width: 366px;
  align-items: flex-start;
  gap: 32px;
  position: relative;
}

.element-homepage .row-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-6 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--heading-title-font-family);
  font-weight: var(--heading-title-font-weight);
  color: var(--primary);
  font-size: var(--heading-title-font-size);
  letter-spacing: var(--heading-title-letter-spacing);
  line-height: var(--heading-title-line-height);
  font-style: var(--heading-title-font-style);
}

.element-homepage .payment {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-7 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Font Awesome 5 Brands-Regular", Helvetica;
  color: var(--light);
  font-size: 32px;
  letter-spacing: 0;
  white-space: nowrap;
  font-weight: 400;
  line-height: Truepx;
}

.element-homepage .social-links {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .icon {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  background-color: var(--primary);
  border-radius: 999px;
  border: 1px solid;
  border-color: var(--primary);
}

.element-homepage .text-wrapper-8 {
  position: relative;
  width: fit-content;
  margin-top: -15px;
  margin-bottom: -13px;
  font-family: "Font Awesome 6 Brands-Regular", Helvetica;
  color: var(--white);
  font-size: 16px;
  letter-spacing: 0.16px;
  white-space: nowrap;
  font-weight: 400;
  line-height: Truepx;
}

.element-homepage .div-wrapper {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  border-radius: 999px;
  border: 1px solid;
  border-color: var(--primary);
}

.element-homepage .text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1.5px;
  margin-left: -1px;
  margin-right: -1px;
  font-family: "Font Awesome 6 Brands-Regular", Helvetica;
  font-weight: 400;
  color: var(--primary);
  font-size: 16px;
  letter-spacing: 0.16px;
  line-height: Truepx;
  white-space: nowrap;
}

.element-homepage .text-wrapper-10 {
  position: relative;
  width: fit-content;
  margin-top: -1.5px;
  font-family: "Font Awesome 6 Brands-Regular", Helvetica;
  color: var(--primary);
  font-size: 16px;
  letter-spacing: 0.16px;
  white-space: nowrap;
  font-weight: 400;
  line-height: Truepx;
}

.element-homepage .separator {
  position: absolute;
  width: 1440px;
  height: 53px;
  top: 0;
  left: 0;
}

.element-homepage .section-ads {
  position: absolute;
  width: 1240px;
  height: 393px;
  top: 7316px;
  left: 100px;
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--border);
  background-image: url(./img/background.png);
  background-size: 100% 100%;
}

.element-homepage .overlap {
  position: relative;
  width: 1004px;
  height: 461px;
  top: -68px;
  left: 68px;
}

.element-homepage .content {
  display: flex;
  flex-direction: column;
  width: 706px;
  align-items: flex-start;
  gap: 32px;
  position: absolute;
  top: 125px;
  left: 0;
}

.element-homepage .div-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .subtitle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .ornament {
  position: relative;
  width: 20.27px;
  height: 20.27px;
}

.element-homepage .div-5 {
  top: 1px;
  left: 7px;
  background-color: var(--light);
  position: absolute;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

.element-homepage .div-6 {
  top: 7px;
  left: 13px;
  background-color: var(--light);
  position: absolute;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

.element-homepage .div-7 {
  top: 13px;
  left: 7px;
  background-color: var(--light);
  position: absolute;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

.element-homepage .div-8 {
  top: 7px;
  left: 1px;
  background-color: var(--light);
  position: absolute;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

.element-homepage .selamat-datang {
  position: relative;
  width: fit-content;
  font-family: "Gothic A1-Black", Helvetica;
  font-weight: 900;
  color: var(--light);
  font-size: 14px;
  letter-spacing: 2.8px;
  line-height: Truepx;
}

.element-homepage .services-for-hajj {
  color: var(--light);
  font-size: var(--heading-4-font-size);
  letter-spacing: var(--heading-4-letter-spacing);
  position: relative;
  align-self: stretch;
  font-family: var(--heading-4-font-family);
  font-weight: var(--heading-4-font-weight);
  line-height: var(--heading-4-line-height);
  font-style: var(--heading-4-font-style);
}

.element-homepage .text-wrapper-11 {
  position: relative;
  width: 445px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--light);
  font-size: 18px;
  letter-spacing: 0;
  line-height: Truepx;
}

.element-homepage .button-2 {
  display: inline-flex;
  padding: 12px 16px;
  background-color: var(--light);
  border: 1px solid;
  border-color: var(--border);
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 8px;
}

.element-homepage .book-now {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--link-normal-font-family);
  font-weight: var(--link-normal-font-weight);
  color: var(--dark);
  font-size: var(--link-normal-font-size);
  letter-spacing: var(--link-normal-letter-spacing);
  line-height: var(--link-normal-line-height);
  white-space: nowrap;
  font-style: var(--link-normal-font-style);
}

.element-homepage .text-wrapper-12 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Font Awesome 6 Free-Solid", Helvetica;
  color: var(--dark);
  font-size: 15px;
  letter-spacing: 1px;
  white-space: nowrap;
  font-weight: 400;
  line-height: Truepx;
}

.element-homepage .image {
  position: absolute;
  width: 346px;
  height: 461px;
  top: 0;
  left: 658px;
  object-fit: cover;
}

.element-homepage .section-blog {
  position: absolute;
  width: 1440px;
  height: 520px;
  top: 6716px;
  left: 0;
}

.element-homepage .container {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  gap: 40px;
  padding: 0px 100px;
  position: relative;
}

.element-homepage .heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 0px 100px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .heading-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .shape {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 1px;
  left: 7px;
  background-color: var(--primary);
  transform: rotate(45deg);
}

.element-homepage .shape-2 {
  top: 7px;
  left: 13px;
  background-color: var(--primary);
  position: absolute;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

.element-homepage .shape-3 {
  top: 13px;
  left: 7px;
  background-color: var(--primary);
  position: absolute;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

.element-homepage .shape-4 {
  top: 7px;
  left: 1px;
  background-color: var(--primary);
  position: absolute;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

.element-homepage .selamat-datang-2 {
  position: relative;
  width: fit-content;
  font-family: "Gothic A1-Black", Helvetica;
  font-weight: 900;
  color: var(--primary);
  font-size: 14px;
  letter-spacing: 2.8px;
  line-height: Truepx;
}

.element-homepage .services-for-hajj-2 {
  position: relative;
  align-self: stretch;
  font-family: "Scheherazade-Regular", Helvetica;
  font-weight: 400;
  color: var(--dark);
  font-size: 64px;
  text-align: center;
  letter-spacing: -1px;
  line-height: Truepx;
}

.element-homepage .our-dedicated {
  position: relative;
  width: fit-content;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--text);
  font-size: var(--body-normal-font-size);
  text-align: center;
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  white-space: nowrap;
  font-style: var(--body-normal-font-style);
}

.element-homepage .div-9 {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .card-blog {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.element-homepage .image-2 {
  position: relative;
  width: 393px;
  height: 212px;
  background-color: var(--gray-4);
  border-radius: 12px;
}

.element-homepage .div-10 {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-13 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--heading-6-font-family);
  font-weight: var(--heading-6-font-weight);
  color: var(--dark);
  font-size: var(--heading-6-font-size);
  letter-spacing: var(--heading-6-letter-spacing);
  line-height: var(--heading-6-line-height);
  font-style: var(--heading-6-font-style);
}

.element-homepage .text-wrapper-14 {
  position: relative;
  align-self: stretch;
  font-family: var(--link-small-font-family);
  font-weight: var(--link-small-font-weight);
  color: var(--text);
  font-size: var(--link-small-font-size);
  letter-spacing: var(--link-small-letter-spacing);
  line-height: var(--link-small-line-height);
  font-style: var(--link-small-font-style);
}

.element-homepage .text-wrapper-15 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--text);
  font-size: var(--body-normal-font-size);
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  font-style: var(--body-normal-font-style);
}

.element-homepage .section-gallery {
  position: absolute;
  width: 1440px;
  height: 940px;
  top: 5696px;
  left: 0;
}

.element-homepage .container-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
}

.element-homepage .heading-section-wrapper {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 0px 100px;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .services-for-hajj-3 {
  position: relative;
  align-self: stretch;
  font-family: var(--heading-2-font-family);
  font-weight: var(--heading-2-font-weight);
  color: var(--dark);
  font-size: var(--heading-2-font-size);
  text-align: center;
  letter-spacing: var(--heading-2-letter-spacing);
  line-height: var(--heading-2-line-height);
  font-style: var(--heading-2-font-style);
}

.element-homepage .grid {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .div-11 {
  display: inline-flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .image-3 {
  position: relative;
  width: 498px;
  height: 680px;
  background-color: var(--gray-4);
  border-radius: 12px;
}

.element-homepage .image-4 {
  position: relative;
  width: 392px;
  height: 432px;
  background-color: var(--gray-4);
  border-radius: 12px;
}

.element-homepage .video {
  position: relative;
  width: 392px;
  height: 216px;
}

.element-homepage .image-5 {
  position: relative;
  width: 286px;
  height: 200px;
  background-color: var(--gray-4);
  border-radius: 12px;
}

.element-homepage .image-6 {
  position: relative;
  width: 286px;
  height: 216px;
  background-color: var(--gray-4);
  border-radius: 12px;
}

.element-homepage .book-now-wrapper {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  padding: 12px 16px;
  background-color: var(--light);
  border: 1px solid;
  border-color: var(--border);
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 8px;
}

.element-homepage .section-testimonial {
  position: absolute;
  width: 1340px;
  height: 817px;
  top: 4799px;
  left: 100px;
}

.element-homepage .container-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
}

.element-homepage .heading-2 {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .content-2 {
  width: 620px;
  padding: 32px;
  position: relative;
  background-color: var(--light);
  border-radius: 12px 0px 0px 12px;
  box-shadow: 16px 16px 32px #bfbfbf26;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
}

.element-homepage .services-for-hajj-4 {
  color: var(--dark);
  font-size: var(--heading-3-font-size);
  letter-spacing: var(--heading-3-letter-spacing);
  position: relative;
  align-self: stretch;
  font-family: var(--heading-3-font-family);
  font-weight: var(--heading-3-font-weight);
  line-height: var(--heading-3-line-height);
  font-style: var(--heading-3-font-style);
}

.element-homepage .col-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-16 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--text);
  font-size: var(--body-normal-font-size);
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  font-style: var(--body-normal-font-style);
}

.element-homepage .button-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--primary);
  border-radius: 8px;
}

.element-homepage .text-wrapper-17 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Font Awesome 5 Free-Solid", Helvetica;
  color: var(--light);
  font-size: 15px;
  letter-spacing: 1px;
  white-space: nowrap;
  font-weight: 400;
  line-height: Truepx;
}

.element-homepage .image-banner {
  position: relative;
  align-self: stretch;
  width: 720px;
}

.element-homepage .img {
  position: absolute;
  width: 720px;
  height: 453px;
  top: 0;
  left: 0;
  object-fit: cover;
}

.element-homepage .card-wrapper {
  width: 1237px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .card-testimonial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--light);
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--border);
  box-shadow: 8px 8px 16px #c0c0c026, -8px -8px 16px #c0c0c00d;
}

.element-homepage .heading-3 {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .image-7 {
  position: relative;
  width: 85px;
  height: 85px;
  object-fit: cover;
}

.element-homepage .col-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.element-homepage .title-2 {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-18 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--link-large-font-family);
  font-weight: var(--link-large-font-weight);
  color: var(--primary);
  font-size: var(--link-large-font-size);
  letter-spacing: var(--link-large-letter-spacing);
  line-height: var(--link-large-line-height);
  font-style: var(--link-large-font-style);
}

.element-homepage .business-owner {
  position: relative;
  align-self: stretch;
  font-family: "Gothic A1-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
  letter-spacing: 2.4px;
  line-height: Truepx;
}

.element-homepage .text-wrapper-19 {
  position: relative;
  align-self: stretch;
  font-family: "Font Awesome 5 Free-Solid", Helvetica;
  color: var(--yellow);
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 400;
  line-height: Truepx;
}

.element-homepage .description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-20 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--heading-5-font-family);
  font-weight: var(--heading-5-font-weight);
  color: var(--dark);
  font-size: var(--heading-5-font-size);
  letter-spacing: var(--heading-5-letter-spacing);
  line-height: var(--heading-5-line-height);
  font-style: var(--heading-5-font-style);
}

.element-homepage .div-wrapper-2 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--overlayprimary-5);
  border-radius: 8px;
}

.element-homepage .every-aspect-of-our {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--text);
  font-size: var(--body-normal-font-size);
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  font-style: var(--body-normal-font-style);
}

.element-homepage .section-best-package {
  position: absolute;
  width: 1440px;
  height: 1126px;
  top: 3593px;
  left: 0;
}

.element-homepage .overlap-2 {
  position: relative;
  height: 1126px;
}

.element-homepage .background {
  position: absolute;
  width: 1440px;
  height: 1126px;
  top: 0;
  left: 0;
  background-image: url(./img/background-image.png);
  background-size: cover;
  background-position: 50% 50%;
}

.element-homepage .separator-2 {
  top: 1076px;
  position: absolute;
  width: 1440px;
  height: 50px;
  left: 0;
}

.element-homepage .container-4 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  gap: 40px;
  padding: 0px 100px;
  position: absolute;
  top: 75px;
  left: 0;
}

.element-homepage .card-package {
  display: flex;
  flex-direction: column;
  width: 393.33px;
  align-items: flex-start;
  position: relative;
  background-color: var(--light);
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--border);
}

.element-homepage .cover-image {
  position: relative;
  width: 393px;
  height: 267px;
}

.element-homepage .overlap-3 {
  position: relative;
  width: 398px;
  height: 267px;
  left: -5px;
}

.element-homepage .overlay-wrapper {
  position: absolute;
  width: 393px;
  height: 267px;
  top: 0;
  left: 5px;
  background-image: url(./img/image-11.png);
  background-size: cover;
  background-position: 50% 50%;
}

.element-homepage .overlay {
  height: 267px;
  border-radius: 8px 8px 0px 0px;
  background: linear-gradient(180deg, rgba(190.81, 139.05, 72.51, 0) 0%, rgba(221.41, 166.2, 95.21, 0) 47.4%, rgba(191.93, 138.99, 70.93, 0.61) 100%);
}

.element-homepage .col-8 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 17px;
  left: 0;
}

.element-homepage .label-discount {
  position: relative;
  width: 97px;
  height: 32px;
}

.element-homepage .overlap-group-2 {
  position: relative;
  width: 93px;
  height: 32px;
  background-image: url(./img/vector-9.svg);
  background-size: 100% 100%;
}

.element-homepage .text-wrapper-21 {
  position: absolute;
  height: 24px;
  top: 4px;
  left: 16px;
  font-family: "Font Awesome 5 Free-Solid", Helvetica;
  color: var(--light);
  font-size: 10px;
  letter-spacing: 0;
  white-space: nowrap;
  font-weight: 400;
  line-height: Truepx;
}

.element-homepage .text-wrapper-22 {
  position: absolute;
  height: 24px;
  top: 6px;
  left: 37px;
  font-family: "Gothic A1-Black", Helvetica;
  font-weight: 900;
  color: var(--light);
  font-size: 10px;
  letter-spacing: 0;
  line-height: Truepx;
  white-space: nowrap;
}

.element-homepage .overlap-4 {
  position: relative;
  width: 93px;
  height: 32px;
  background-image: url(./img/vector.svg);
  background-size: 100% 100%;
}

.element-homepage .text-wrapper-23 {
  position: absolute;
  height: 24px;
  top: 4px;
  left: 16px;
  font-family: "Font Awesome 5 Free-Solid", Helvetica;
  color: var(--dark);
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
  font-weight: 400;
  line-height: Truepx;
}

.element-homepage .element-days {
  position: absolute;
  height: 24px;
  top: 6px;
  left: 36px;
  font-family: "Gothic A1-Black", Helvetica;
  font-weight: 900;
  color: var(--dark);
  font-size: 10px;
  letter-spacing: 0;
  line-height: Truepx;
  white-space: nowrap;
}

.element-homepage .overlap-wrapper {
  position: relative;
  width: 141px;
  height: 32px;
  margin-right: -4px;
}

.element-homepage .overlap-5 {
  position: relative;
  width: 137px;
  height: 32px;
  background-image: url(./img/vector-2.svg);
  background-size: 100% 100%;
}

.element-homepage .detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .price {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .row-4 {
  display: flex;
  width: 91px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.element-homepage .text-wrapper-24 {
  position: relative;
  width: 86px;
  margin-top: -1px;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--text);
  font-size: var(--body-normal-font-size);
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  font-style: var(--body-normal-font-style);
}

.element-homepage .row-5 {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-25 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--link-large-font-family);
  font-weight: var(--link-large-font-weight);
  color: var(--primary);
  font-size: var(--link-large-font-size);
  letter-spacing: var(--link-large-letter-spacing);
  line-height: var(--link-large-line-height);
  white-space: nowrap;
  font-style: var(--link-large-font-style);
}

.element-homepage .border-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.element-homepage .icon-pack-wrapper {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--border);
}

.element-homepage .icon-pack {
  position: absolute;
  width: 28px;
  height: 28px;
  top: 6px;
  left: 6px;
}

.element-homepage .text-wrapper-26 {
  position: relative;
  align-self: stretch;
  font-family: var(--link-normal-font-family);
  font-weight: var(--link-normal-font-weight);
  color: var(--primary);
  font-size: var(--link-normal-font-size);
  letter-spacing: var(--link-normal-letter-spacing);
  line-height: var(--link-normal-line-height);
  font-style: var(--link-normal-font-style);
}

.element-homepage .div-12 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-27 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: var(--body-small-font-family);
  font-weight: var(--body-small-font-weight);
  color: var(--text);
  font-size: var(--body-small-font-size);
  letter-spacing: var(--body-small-letter-spacing);
  line-height: var(--body-small-line-height);
  font-style: var(--body-small-font-style);
}

.element-homepage .accommodation {
  position: relative;
  width: 178.67px;
  margin-top: -1px;
  font-family: var(--body-small-font-family);
  font-weight: var(--body-small-font-weight);
  color: var(--text);
  font-size: var(--body-small-font-size);
  letter-spacing: var(--body-small-letter-spacing);
  line-height: var(--body-small-line-height);
  font-style: var(--body-small-font-style);
}

.element-homepage .button-4 {
  display: flex;
  padding: 12px 16px;
  align-self: stretch;
  width: 100%;
  background-color: var(--primary);
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 8px;
}

.element-homepage .text-wrapper-28 {
  position: relative;
  width: fit-content;
  font-family: "Font Awesome 5 Free-Solid", Helvetica;
  color: var(--light);
  font-size: 12px;
  letter-spacing: 1px;
  white-space: nowrap;
  font-weight: 400;
  line-height: Truepx;
}

.element-homepage .image-8 {
  position: absolute;
  width: 393px;
  height: 267px;
  top: 0;
  left: 5px;
  background-image: url(./img/image-13.png);
  background-size: cover;
  background-position: 50% 50%;
}

.element-homepage .overlap-group-3 {
  position: relative;
  width: 93px;
  height: 32px;
  background-image: url(./img/vector-6.svg);
  background-size: 100% 100%;
}

.element-homepage .overlap-6 {
  position: relative;
  width: 93px;
  height: 32px;
  background-image: url(./img/vector-3.svg);
  background-size: 100% 100%;
}

.element-homepage .overlap-7 {
  position: relative;
  width: 137px;
  height: 32px;
  background-image: url(./img/vector-8.svg);
  background-size: 100% 100%;
}

.element-homepage .image-9 {
  position: absolute;
  width: 393px;
  height: 267px;
  top: 0;
  left: 5px;
  background-image: url(./img/image-5.png);
  background-size: cover;
  background-position: 50% 50%;
}

.element-homepage .overlap-group-4 {
  position: relative;
  width: 93px;
  height: 32px;
  background-image: url(./img/vector-5.svg);
  background-size: 100% 100%;
}

.element-homepage .overlap-8 {
  position: relative;
  width: 93px;
  height: 32px;
  background-image: url(./img/vector-7.svg);
  background-size: 100% 100%;
}

.element-homepage .overlap-9 {
  position: relative;
  width: 137px;
  height: 32px;
  background-image: url(./img/vector-4.svg);
  background-size: 100% 100%;
}

.element-homepage .section-ads-2 {
  position: absolute;
  width: 1440px;
  height: 599px;
  top: 2994px;
  left: 0;
  background-image: url(./img/background-2.png);
  background-size: 100% 100%;
}

.element-homepage .caption {
  width: 500px;
  align-items: flex-start;
  gap: 32px;
  top: 85px;
  left: 100px;
  display: flex;
  flex-direction: column;
  position: absolute;
}

.element-homepage .services-for-hajj-5 {
  color: var(--dark);
  font-size: var(--heading-2-font-size);
  letter-spacing: var(--heading-2-letter-spacing);
  position: relative;
  align-self: stretch;
  font-family: var(--heading-2-font-family);
  font-weight: var(--heading-2-font-weight);
  line-height: var(--heading-2-line-height);
  font-style: var(--heading-2-font-style);
}

.element-homepage .separator-3 {
  top: 0;
  position: absolute;
  width: 1440px;
  height: 50px;
  left: 0;
}

.element-homepage .section-featured {
  position: absolute;
  width: 1440px;
  height: 500px;
  top: 2414px;
  left: 0;
}

.element-homepage .card-wrapper-2 {
  align-self: stretch;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .card-features {
  position: relative;
  width: 392px;
  height: 328px;
  border-radius: 12px;
  overflow: hidden;
  background-image: url(./img/image-3.png);
  background-size: cover;
  background-position: 50% 50%;
}

.element-homepage .caption-wrapper {
  height: 328px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 88.78%);
}

.element-homepage .col-wrapper {
  display: flex;
  flex-direction: column;
  width: 350px;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 24px;
  position: relative;
  top: 123px;
  left: 21px;
}

.element-homepage .col-9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .ISLAMIC-TOURS {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--heading-4-font-family);
  font-weight: var(--heading-4-font-weight);
  color: var(--light);
  font-size: var(--heading-4-font-size);
  text-align: center;
  letter-spacing: var(--heading-4-letter-spacing);
  line-height: var(--heading-4-line-height);
  font-style: var(--heading-4-font-style);
}

.element-homepage .text-wrapper-29 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--border);
  font-size: var(--body-normal-font-size);
  text-align: center;
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  font-style: var(--body-normal-font-style);
}

.element-homepage .overlap-group-wrapper {
  position: relative;
  width: 392px;
  height: 328px;
  border-radius: 12px;
  overflow: hidden;
  background-image: url(./img/image-9.png);
  background-size: cover;
  background-position: 50% 50%;
}

.element-homepage .overlap-10 {
  height: 328px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 88.78%);
}

.element-homepage .card-features-2 {
  position: relative;
  width: 392px;
  height: 328px;
  border-radius: 12px;
  overflow: hidden;
  background-image: url(./img/image.png);
  background-size: cover;
  background-position: 50% 50%;
}

.element-homepage .section-service {
  position: absolute;
  width: 1240px;
  height: 652px;
  top: 1682px;
  left: 100px;
}

.element-homepage .overlap-11 {
  position: relative;
  height: 652px;
}

.element-homepage .overlap-12 {
  position: absolute;
  width: 1240px;
  height: 652px;
  top: 0;
  left: 0;
}

.element-homepage .image-10 {
  position: absolute;
  width: 629px;
  height: 484px;
  top: 0;
  left: 611px;
  object-fit: cover;
}

.element-homepage .container-5 {
  display: flex;
  width: 1204px;
  align-items: flex-start;
  gap: 32px;
  position: absolute;
  top: 396px;
  left: 0;
}

.element-homepage .card-service {
  display: flex;
  flex-direction: column;
  width: 277px;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  position: relative;
  background-color: var(--light);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--border);
}

.element-homepage .title-3 {
  align-items: center;
  justify-content: space-between;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-30 {
  position: relative;
  width: fit-content;
  font-family: var(--heading-title-font-family);
  font-weight: var(--heading-title-font-weight);
  color: var(--dark);
  font-size: var(--heading-title-font-size);
  letter-spacing: var(--heading-title-letter-spacing);
  line-height: var(--heading-title-line-height);
  white-space: nowrap;
  font-style: var(--heading-title-font-style);
}

.element-homepage .card-service-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--light);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--border);
}

.element-homepage .content-3 {
  width: 574px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
}

.element-homepage .services-for-hajj-6 {
  color: var(--dark);
  font-size: var(--heading-4-font-size);
  letter-spacing: var(--heading-4-letter-spacing);
  position: relative;
  align-self: stretch;
  font-family: var(--heading-4-font-family);
  font-weight: var(--heading-4-font-weight);
  line-height: var(--heading-4-line-height);
  font-style: var(--heading-4-font-style);
}

.element-homepage .button-5 {
  display: inline-flex;
  padding: 16px 32px;
  background-color: var(--primary);
  box-shadow: 0px 12px 24px #13131326;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 8px;
}

.element-homepage .section-about {
  position: absolute;
  width: 1240px;
  height: 560px;
  top: 1042px;
  left: 118px;
}

.element-homepage .container-6 {
  display: flex;
  width: 1240px;
  align-items: flex-start;
  position: relative;
  border-radius: 12px;
}

.element-homepage .hero-image {
  position: relative;
  width: 620px;
  height: 560px;
  border-radius: 12px;
  background-image: url(./img/image-7.png);
  background-size: cover;
  background-position: 50% 50%;
}

.element-homepage .content-4 {
  padding: 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--light);
  border-radius: 0px 12px 12px 0px;
  box-shadow: 16px 16px 32px #bfbfbf26;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
}

.element-homepage .overlap-13 {
  position: absolute;
  width: 1440px;
  height: 962px;
  top: 0;
  left: 0;
}

.element-homepage .header-homepage {
  position: absolute;
  width: 1440px;
  height: 962px;
  top: 0;
  left: 0;
  background-color: var(--white);
}

.element-homepage .overlap-14 {
  position: relative;
  height: 962px;
  background-image: url(./img/background-3.png);
  background-size: 100% 100%;
}

.element-homepage .container-7 {
  position: absolute;
  width: 1440px;
  height: 49px;
  top: 846px;
  left: 0;
}

.element-homepage .caption-2 {
  width: 695px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  top: 130px;
  left: 373px;
  display: flex;
  flex-direction: column;
  position: absolute;
}

.element-homepage .title-4 {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .selamat-datang-3 {
  white-space: nowrap;
  position: relative;
  width: fit-content;
  font-family: var(--heading-subtitle-font-family);
  font-weight: var(--heading-subtitle-font-weight);
  color: var(--light);
  font-size: var(--heading-subtitle-font-size);
  letter-spacing: var(--heading-subtitle-letter-spacing);
  line-height: var(--heading-subtitle-line-height);
  font-style: var(--heading-subtitle-font-style);
}

.element-homepage .rasakan-pengalaman {
  position: relative;
  align-self: stretch;
  font-family: var(--heading-1-font-family);
  font-weight: var(--heading-1-font-weight);
  color: var(--light);
  font-size: var(--heading-1-font-size);
  text-align: center;
  letter-spacing: var(--heading-1-letter-spacing);
  line-height: var(--heading-1-line-height);
  font-style: var(--heading-1-font-style);
}

.element-homepage .text-wrapper-31 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--light);
  font-size: var(--body-normal-font-size);
  text-align: center;
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  font-style: var(--body-normal-font-style);
}

.element-homepage .row-6 {
  display: flex;
  width: 1240px;
  align-items: center;
  gap: 40px;
  position: absolute;
  top: 583px;
  left: 100px;
}

.element-homepage .card-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--border);
  backdrop-filter: blur(16px) brightness(100%);
  -webkit-backdrop-filter: blur(16px) brightness(100%);
  background: linear-gradient(180deg, rgba(42.91, 42.91, 42.91, 0.5) 0%, rgba(17.41, 17.41, 17.41, 0.5) 100%);
}

.element-homepage .text-wrapper-32 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: var(--heading-4-font-family);
  font-weight: var(--heading-4-font-weight);
  color: var(--primary);
  font-size: var(--heading-4-font-size);
  letter-spacing: var(--heading-4-letter-spacing);
  line-height: var(--heading-4-line-height);
  font-style: var(--heading-4-font-style);
}

.element-homepage .description-2 {
  flex-direction: column;
  align-items: center;
  display: flex;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-33 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--link-normal-font-family);
  font-weight: var(--link-normal-font-weight);
  color: var(--light);
  font-size: var(--link-normal-font-size);
  letter-spacing: var(--link-normal-letter-spacing);
  line-height: var(--link-normal-line-height);
  font-style: var(--link-normal-font-style);
}

.element-homepage .text-wrapper-34 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-normal-font-family);
  font-weight: var(--body-normal-font-weight);
  color: var(--border);
  font-size: var(--body-normal-font-size);
  letter-spacing: var(--body-normal-letter-spacing);
  line-height: var(--body-normal-line-height);
  font-style: var(--body-normal-font-style);
}

.element-homepage .title-5 {
  align-items: center;
  gap: 12px;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-35 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--heading-4-font-family);
  font-weight: var(--heading-4-font-weight);
  color: var(--primary);
  font-size: var(--heading-4-font-size);
  letter-spacing: var(--heading-4-letter-spacing);
  line-height: var(--heading-4-line-height);
  white-space: nowrap;
  font-style: var(--heading-4-font-style);
}

.element-homepage .navbar {
  display: flex;
  width: 1440px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 100px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--primary);
  backdrop-filter: blur(16px) brightness(100%);
  -webkit-backdrop-filter: blur(16px) brightness(100%);
}

.element-homepage .brand-2 {
  position: relative;
  width: 202px;
  height: 52px;
  margin-top: -3px;
  margin-bottom: -3px;
}

.element-homepage .sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-36 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Font Awesome 5 Free-Solid", Helvetica;
  color: var(--light);
  font-size: 16px;
  letter-spacing: 0;
  white-space: nowrap;
  font-weight: 400;
  line-height: Truepx;
}

.element-homepage .button-6 {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  padding: 8px 16px;
  background-color: var(--light);
  border: 1px solid;
  border-color: var(--border);
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 8px;
}

.element-homepage .dropdown-menu {
  display: flex;
  flex-direction: column;
  width: 200px;
  align-items: flex-start;
  position: absolute;
  top: 74px;
  left: 475px;
  background-color: var(--light-100);
  border-radius: 0px 8px 8px 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--border);
  box-shadow: 0px 20px 40px #b1b1b126;
}

.element-homepage .link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--primary);
}

.element-homepage .text-wrapper-37 {
  width: fit-content;
  color: var(--light-100);
  white-space: nowrap;
  position: relative;
  margin-top: -0.5px;
  font-family: var(--link-normal-font-family);
  font-weight: var(--link-normal-font-weight);
  font-size: var(--link-normal-font-size);
  letter-spacing: var(--link-normal-letter-spacing);
  line-height: var(--link-normal-line-height);
  font-style: var(--link-normal-font-style);
}

.element-homepage .link-2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element-homepage .text-wrapper-38 {
  position: relative;
  width: fit-content;
  margin-top: -0.5px;
  font-family: var(--link-normal-font-family);
  font-weight: var(--link-normal-font-weight);
  color: #5e5e5e;
  font-size: var(--link-normal-font-size);
  letter-spacing: var(--link-normal-letter-spacing);
  line-height: var(--link-normal-line-height);
  white-space: nowrap;
  font-style: var(--link-normal-font-style);
}

.element-homepage .text-wrapper-39 {
  width: 84px;
  color: #5e5e5e;
  position: relative;
  margin-top: -0.5px;
  font-family: var(--link-normal-font-family);
  font-weight: var(--link-normal-font-weight);
  font-size: var(--link-normal-font-size);
  letter-spacing: var(--link-normal-letter-spacing);
  line-height: var(--link-normal-line-height);
  font-style: var(--link-normal-font-style);
}