#homepage-banner > .eg-container > .eg-wrapper {
  position: relative;
  z-index: 3;
}

#homepage-banner > .eg-container > .eg-wrapper > figure {
  margin-top: -8rem;
}

#homepage-banner > .eg-container > .eg-wrapper > .description {
  position: absolute;
  top: 16rem;
  left: 6rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1rem;
  width: 45%;
}

#homepage-banner .description > small {
  color: var(--elsel-blue-2);
  font-size: var(--font-18);
  letter-spacing: 5.4px;
  font-weight: 400;
}

#homepage-banner .description > h1 {
  color: var(--elsel-blue-2);
  font-family: "DM Serif Display", serif;
  font-size: var(--font-60);
  font-weight: 400;
  text-transform: uppercase;
}

#homepage-banner .description > p {
  color: var(--elsel-blue-2);
  font-size: var(--font-18);
  line-height: var(--line-26);
  font-weight: 400;
}

#homepage-about-us {
  background: url("/public/assets/images/homepage-about-us-background-1.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding: var(--content-spacing);
}

#homepage-about-us > .eg-container > .eg-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
}

#homepage-about-us > .eg-container > .eg-wrapper > a {
  display: flex;
  overflow: hidden;
  position: relative;
  margin-top: -12rem;
  width: 100%;
  height: fit-content;
  z-index: 3;
}

#homepage-about-us > .eg-container > .eg-wrapper > a > .content {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

#homepage-about-us > .eg-container > .eg-wrapper > .description {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 1.5rem;
  width: 75%;
}

#homepage-about-us .description > h2 {
  color: var(--elsel-white);
  font-family: "DM Serif Display";
  font-size: var(--font-40);
  font-weight: 400;
}

#homepage-about-us .description > p {
  color: var(--elsel-white);
  font-size: var(--font-18);
  line-height: var(--line-26);
  font-weight: 300;
}

#homepage-series {
  position: relative;
  margin: 6rem 0;
}

#homepage-series > .eg-container > .eg-wrapper > .heading {
  display: grid;
  grid-template-columns: var(--col-6);
  gap: 2rem;
}

#homepage-series .heading > .left {
  position: relative;
  padding: 4rem 0 4rem 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 0.5rem;
}

#homepage-series .heading > .left > small {
  color: var(--elsel-white);
  font-size: var(--font-16);
  font-weight: 400;
  letter-spacing: 13.32px;
}

#homepage-series .heading > .left > h2 {
  color: var(--elsel-white);
  font-family: "DM Serif Display";
  font-size: var(--font-50);
  font-weight: 400;
}

#homepage-series::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0px 130px 0px 0px;
  background: var(--elsel-blue);
  width: 50%;
  height: 500px;
  z-index: -1;
}

#homepage-series .heading > .right {
  padding: 4rem 0;
  display: flex;
  align-items: center;
  justify-content: start;
}

#homepage-series .heading > .right > p {
  color: var(--elsel-grey-2);
  font-size: var(--font-18);
  line-height: var(--line-26);
  font-weight: 300;
  width: 75%;
}

#homepage-series .swiper-scrollbar {
  position: unset;
  margin: 4rem auto 2rem auto;
  width: 75%;
  height: 1px;
  background: #bdbdbd;
}

#homepage-series .swiper-scrollbar > .swiper-scrollbar-drag {
  height: 7px;
  border-radius: 11px;
  background: var(--elsel-blue);
  top: 50%;
  translate: 0 -50%;
}

#homepage-products {
  padding-top: 4rem;
  overflow: hidden;
  position: relative;
}

#homepage-products::after {
  content: "";
  background-image: url("/public/assets/images/background.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  bottom: -5%;
  width: 100%;
  height: 400px;
}

#homepage-products > .swiper-products {
  padding-bottom: 4rem;
}

#homepage-products .swiper-slide {
  cursor: pointer;
  height: auto;
}

#homepage-products .swiper-button-prev {
  left: calc(50% - 84px * 3);
  right: unset;
}

#homepage-products .swiper-button-next {
  right: calc(50% - 84px * 3);
  left: unset;
}

#homepage-products .swiper-button-prev,
#homepage-products .swiper-button-next {
  top: 50%;
  margin: 0;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--elsel-white);
  background: var(--elsel-white);
  padding: 0.5rem;
  z-index: 10;
  transition: 0.2s;
}

#homepage-products .swiper-button-prev::after,
#homepage-products .swiper-button-next::after {
  content: "";
  font-size: unset;
  width: 34px;
  height: 34px;
}

#homepage-products .swiper-button-next::after {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M29.3737 16.6469L20.1813 7.45451C19.9861 7.25935 19.6694 7.25935 19.4742 7.45451C19.279 7.64967 19.279 7.96646 19.4742 8.16162L28.313 17.0005L19.4742 25.8393C19.279 26.0345 19.279 26.3513 19.4742 26.5464C19.6693 26.7416 19.9861 26.7416 20.1813 26.5464L29.3737 17.354C29.5689 17.1588 29.5689 16.8421 29.3737 16.6469Z' fill='%23009DDD'/%3E%3Cpath d='M29.3737 16.6469C29.2832 16.5564 29.158 16.5005 29.0201 16.4998L4.97848 16.4998C4.70271 16.4998 4.47856 16.724 4.47856 16.9998C4.47856 17.2755 4.70271 17.4997 4.97848 17.4997L29.0201 17.4997C29.2958 17.4997 29.5201 17.2755 29.5201 16.9997C29.5201 16.8625 29.4642 16.7374 29.3737 16.6469Z' fill='%23009DDD'/%3E%3C/svg%3E");
}

#homepage-products .swiper-button-prev::after {
  rotate: 180deg;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M29.3737 16.6469L20.1813 7.45451C19.9861 7.25935 19.6694 7.25935 19.4742 7.45451C19.279 7.64967 19.279 7.96646 19.4742 8.16162L28.313 17.0005L19.4742 25.8393C19.279 26.0345 19.279 26.3513 19.4742 26.5464C19.6693 26.7416 19.9861 26.7416 20.1813 26.5464L29.3737 17.354C29.5689 17.1588 29.5689 16.8421 29.3737 16.6469Z' fill='%23009DDD'/%3E%3Cpath d='M29.3737 16.6469C29.2832 16.5564 29.158 16.5005 29.0201 16.4998L4.97848 16.4998C4.70271 16.4998 4.47856 16.724 4.47856 16.9998C4.47856 17.2755 4.70271 17.4997 4.97848 17.4997L29.0201 17.4997C29.2958 17.4997 29.5201 17.2755 29.5201 16.9997C29.5201 16.8625 29.4642 16.7374 29.3737 16.6469Z' fill='%23009DDD'/%3E%3C/svg%3E");
}

#homepage-products .swiper-button-prev:hover,
#homepage-products .swiper-button-next:hover {
  border-color: var(--elsel-blue-3);
  background: var(--elsel-blue-3);
}

#homepage-products .swiper-button-prev:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M29.3737 16.6469L20.1813 7.45451C19.9861 7.25935 19.6694 7.25935 19.4742 7.45451C19.279 7.64967 19.279 7.96646 19.4742 8.16162L28.313 17.0005L19.4742 25.8393C19.279 26.0345 19.279 26.3513 19.4742 26.5464C19.6693 26.7416 19.9861 26.7416 20.1813 26.5464L29.3737 17.354C29.5689 17.1588 29.5689 16.8421 29.3737 16.6469Z' fill='%23ffffff'/%3E%3Cpath d='M29.3737 16.6469C29.2832 16.5564 29.158 16.5005 29.0201 16.4998L4.97848 16.4998C4.70271 16.4998 4.47856 16.724 4.47856 16.9998C4.47856 17.2755 4.70271 17.4997 4.97848 17.4997L29.0201 17.4997C29.2958 17.4997 29.5201 17.2755 29.5201 16.9997C29.5201 16.8625 29.4642 16.7374 29.3737 16.6469Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

#homepage-products .swiper-button-next:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M29.3737 16.6469L20.1813 7.45451C19.9861 7.25935 19.6694 7.25935 19.4742 7.45451C19.279 7.64967 19.279 7.96646 19.4742 8.16162L28.313 17.0005L19.4742 25.8393C19.279 26.0345 19.279 26.3513 19.4742 26.5464C19.6693 26.7416 19.9861 26.7416 20.1813 26.5464L29.3737 17.354C29.5689 17.1588 29.5689 16.8421 29.3737 16.6469Z' fill='%23ffffff'/%3E%3Cpath d='M29.3737 16.6469C29.2832 16.5564 29.158 16.5005 29.0201 16.4998L4.97848 16.4998C4.70271 16.4998 4.47856 16.724 4.47856 16.9998C4.47856 17.2755 4.70271 17.4997 4.97848 17.4997L29.0201 17.4997C29.2958 17.4997 29.5201 17.2755 29.5201 16.9997C29.5201 16.8625 29.4642 16.7374 29.3737 16.6469Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

#homepage-international {
  position: relative;
  padding: var(--content-spacing);
  height: 760px;
  background-image: url("/public/assets/images/international-bg.png");
  background-repeat: no-repeat;
  background-position: right;
}

#homepage-international > .eg-container {
  height: 100%;
}

#homepage-international > .eg-container > .eg-wrapper {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 100%;
}

#homepage-international > .eg-container > .eg-wrapper > .description {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 40%;
  gap: 1rem;
}

#homepage-international .description > h2 {
  color: var(--elsel-blue-2);
  font-family: "DM Serif Display";
  font-size: var(--font-50);
  font-weight: 400;
}

#homepage-international .description > p {
  color: var(--elsel-grey-2);
  font-size: var(--font-18);
  font-weight: 300;
  line-height: var(--line-26);
}

#homepage-sustainability {
  padding: var(--content-spacing);
}

#homepage-sustainability > .eg-container > .eg-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

#homepage-sustainability > .eg-container > .eg-wrapper > .content {
  display: flex;
  gap: 2rem;
}

#homepage-sustainability .content:nth-child(even) {
  flex-direction: row-reverse;
}

#homepage-sustainability .content > .left,
#homepage-sustainability .content > .right {
  width: 50%;
}

#homepage-sustainability .content > .left > img {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  aspect-ratio: 207/112;
  object-fit: cover;
  object-position: center;
}

#homepage-sustainability .content > .right {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 1rem;
}

#homepage-sustainability .content > .right > h2 {
  color: var(--elsel-blue-2);
  font-family: "DM Serif Display";
  font-size: var(--font-50);
  font-weight: 400;
}

#homepage-sustainability .content > .right > p {
  color: var(--elsel-grey-2);
  font-size: var(--font-18);
  font-weight: 300;
  line-height: var(--line-26);
}

#homepage-referances {
  padding: var(--content-spacing);
}

#homepage-referances > .eg-container > .eg-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

#homepage-referances > .eg-container > .eg-wrapper > .content {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 100%;
  gap: 1rem;
}

#homepage-referances > .eg-container > .eg-wrapper > .heading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#homepage-referances .heading > h2 {
  color: var(--elsel-blue-2);
  font-family: "DM Serif Display";
  font-size: var(--font-50);
  font-weight: 400;
}

#homepage-referances .heading > p {
  color: var(--elsel-grey-2);
  font-size: var(--font-18);
  font-weight: 300;
  line-height: var(--line-26);
  width: 65%;
}

#homepage-referances .content > .box {
  display: flex;
  align-items: center;
  justify-content: center;
}

#homepage-referances .content > .box > img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  object-position: center;
  aspect-ratio: 1/1;
}

@media (max-width: 1600px) {
  #homepage-banner > .eg-container > .eg-wrapper > .description {
    top: 12rem;
  }
  #homepage-about-us > .eg-container > .eg-wrapper > a {
    margin-top: -8rem;
  }
  #homepage-about-us > .eg-container > .eg-wrapper {
    grid-template-columns: 1.25fr 2fr;
  }
  #homepage-series .navigation-btn {
    min-width: 60px;
    min-height: 60px;
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 1400px) {
  #homepage-dealers {
    padding: var(--content-spacing);
  }
  #homepage-about-us > .eg-container > .eg-wrapper > a {
    margin-top: 0;
  }

  #homepage-series::after {
    height: 400px;
  }
  #homepage-products .swiper-button-prev,
  #homepage-products .swiper-button-next {
    top: 50%;
    width: 70px;
    height: 70px;
  }
  #homepage-products .swiper-button-prev {
    left: calc(50% - 70px * 3);
  }
  #homepage-products .swiper-button-next {
    right: calc(50% - 70px * 3);
  }
  #homepage-series .navigation-btn {
    min-width: 50px;
    min-height: 50px;
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 1200px) {
  #homepage-banner > .eg-container > .eg-wrapper > figure {
    margin-top: -4rem;
  }
  #homepage-banner > .eg-container > .eg-wrapper > .description {
    top: 10rem;
    left: 4rem;
  }
  #homepage-about-us > .eg-container > .eg-wrapper {
    grid-template-columns: 1.5fr 2fr;
    gap: 1.5rem;
  }
  #homepage-products::after {
    bottom: 0;
  }
  #homepage-products .swiper-button-prev,
  #homepage-products .swiper-button-next {
    top: 55%;
  }
  #homepage-series .navigation-btn {
    min-width: 60px;
    min-height: 60px;
    width: 60px;
    height: 60px;
  }
  #homepage-international {
    height: 600px;
    background-size: contain;
  }
  #homepage-referances > .eg-container > .eg-wrapper > .content {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 992px) {
  #homepage-banner > .eg-container > .eg-wrapper > figure {
    margin-top: -2rem;
  }
  #homepage-banner > .eg-container > .eg-wrapper > .description {
    top: 8rem;
    width: 75%;
  }
  #homepage-series::after {
    height: 350px;
  }
  #homepage-about-us > .eg-container > .eg-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  #homepage-about-us > .eg-container > .eg-wrapper > .description {
    width: 100%;
  }
  #homepage-series {
    margin: 4rem 0;
  }
  #homepage-products {
    padding: 2rem 0 4rem 0;
  }
  #homepage-products .swiper-button-prev,
  #homepage-products .swiper-button-next {
    top: 50%;
    width: 60px;
    height: 60px;
  }
  #homepage-products .swiper-button-prev {
    left: calc(50% - 60px * 3);
  }
  #homepage-products .swiper-button-next {
    right: calc(50% - 60px * 3);
  }
  #homepage-series .navigation-btn {
    min-width: 70px;
    min-height: 70px;
    width: 70px;
    height: 70px;
  }
  #homepage-sustainability > .eg-container > .eg-wrapper > .content {
    flex-direction: column;
  }
  #homepage-sustainability .content > .left,
  #homepage-sustainability .content > .right {
    width: 100%;
  }
  #homepage-referances > .eg-container > .eg-wrapper > .content {
    grid-template-columns: var(--col-3);
  }
}

@media (max-width: 768px) {
  #homepage-banner > .eg-container {
    padding: 0;
  }
  #homepage-banner > .eg-container > .eg-wrapper > figure {
    margin-top: 0;
  }
  #homepage-banner > .eg-container > .eg-wrapper > figure > img {
    min-height: 500px;
    object-fit: cover;
    object-position: center;
  }
  #homepage-banner > .eg-container > .eg-wrapper > .description {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 1rem;
    top: unset;
    bottom: 4rem;
  }
  #homepage-banner .description > p {
    display: none;
  }
  #homepage-about-us {
    background-position: bottom;
  }
  #homepage-about-us > .eg-container > .eg-wrapper {
    grid-template-columns: var(--col-12);
  }
  #homepage-about-us > .eg-container > .eg-wrapper > a > img {
    filter: none;
  }
  #homepage-series::after {
    width: 100%;
    height: 375px;
  }
  #homepage-series .swiper {
    padding: 0 1rem;
  }
  #homepage-series > .eg-container > .eg-wrapper > .heading {
    grid-template-columns: var(--col-12);
  }
  #homepage-series .heading > .left {
    padding: 4rem 0 2rem 0;
  }
  #homepage-series .heading > .right {
    display: none;
  }
  #homepage-series .navigation-btn {
    min-width: 55px;
    min-height: 55px;
    width: 55px;
    height: 55px;
  }
  #homepage-products .swiper-button-prev,
  #homepage-products .swiper-button-next {
    top: 55%;
  }
  #homepage-products::after {
    height: 325px;
  }
  #homepage-products .swiper-button-prev {
    left: calc(50% - 60px * 4);
  }
  #homepage-products .swiper-button-next {
    right: calc(50% - 60px * 4);
  }
  #homepage-international {
    height: 450px;
  }
  #homepage-international > .eg-container > .eg-wrapper > .description {
    width: 75%;
  }
}

@media (max-width: 576px) {
  #homepage-dealers {
    padding: 2rem 0 4rem 0;
  }
  #homepage-dealers > .eg-container > .eg-wrapper {
    flex-direction: column;
  }
  #homepage-dealers > .eg-container > .eg-wrapper > .content {
    align-items: center;
  }
  #homepage-about-us > .eg-container > .eg-wrapper > a {
    margin-top: 0;
  }
  #homepage-series::after {
    border-radius: 0px 65px 0px 0px;
    height: 325px;
  }
  #homepage-series .heading > .left {
    padding: 2rem 0 2rem 0;
  }
  #homepage-series .navigation-btn {
    min-width: 70px;
    min-height: 70px;
    width: 70px;
    height: 70px;
  }
  #homepage-products .swiper {
    padding: 0 1rem;
  }
  #homepage-products .swiper-button-prev {
    left: calc(50% - 40px * 4);
  }
  #homepage-products .swiper-button-next {
    right: calc(50% - 40px * 4);
  }
  #homepage-products .swiper-button-next::after {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M29.3737 16.6469L20.1813 7.45451C19.9861 7.25935 19.6694 7.25935 19.4742 7.45451C19.279 7.64967 19.279 7.96646 19.4742 8.16162L28.313 17.0005L19.4742 25.8393C19.279 26.0345 19.279 26.3513 19.4742 26.5464C19.6693 26.7416 19.9861 26.7416 20.1813 26.5464L29.3737 17.354C29.5689 17.1588 29.5689 16.8421 29.3737 16.6469Z' fill='%23009DDD'/%3E%3Cpath d='M29.3737 16.6469C29.2832 16.5564 29.158 16.5005 29.0201 16.4998L4.97848 16.4998C4.70271 16.4998 4.47856 16.724 4.47856 16.9998C4.47856 17.2755 4.70271 17.4997 4.97848 17.4997L29.0201 17.4997C29.2958 17.4997 29.5201 17.2755 29.5201 16.9997C29.5201 16.8625 29.4642 16.7374 29.3737 16.6469Z' fill='%23009DDD'/%3E%3C/svg%3E");
  }
  #homepage-products .swiper-button-prev::after {
    rotate: 180deg;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M29.3737 16.6469L20.1813 7.45451C19.9861 7.25935 19.6694 7.25935 19.4742 7.45451C19.279 7.64967 19.279 7.96646 19.4742 8.16162L28.313 17.0005L19.4742 25.8393C19.279 26.0345 19.279 26.3513 19.4742 26.5464C19.6693 26.7416 19.9861 26.7416 20.1813 26.5464L29.3737 17.354C29.5689 17.1588 29.5689 16.8421 29.3737 16.6469Z' fill='%23009DDD'/%3E%3Cpath d='M29.3737 16.6469C29.2832 16.5564 29.158 16.5005 29.0201 16.4998L4.97848 16.4998C4.70271 16.4998 4.47856 16.724 4.47856 16.9998C4.47856 17.2755 4.70271 17.4997 4.97848 17.4997L29.0201 17.4997C29.2958 17.4997 29.5201 17.2755 29.5201 16.9997C29.5201 16.8625 29.4642 16.7374 29.3737 16.6469Z' fill='%23009DDD'/%3E%3C/svg%3E");
  }
  #homepage-products .swiper-button-prev::after,
  #homepage-products .swiper-button-next::after {
    width: 20px;
    height: 20px;
    background-size: 20px;
  }
  #homepage-international {
    height: unset;
    background-position: center;
  }
  #homepage-international > .eg-container > .eg-wrapper > .description {
    width: 100%;
  }
  #homepage-sustainability .content > .left > img {
    border-radius: 20px;
  }
  #homepage-referances > .eg-container > .eg-wrapper {
    gap: 2rem;
  }
  #homepage-referances .heading > p {
    width: 100%;
  }
  #homepage-referances > .eg-container > .eg-wrapper > .content {
    grid-template-columns: var(--col-6);
  }
}

@media (max-width: 450px) {
  #homepage-products .swiper-button-prev,
  #homepage-products .swiper-button-next {
    width: 40px;
    height: 40px;
  }
  #homepage-products::after {
    height: 300px;
  }
  #homepage-series .navigation-btn {
    min-width: 60px;
    min-height: 60px;
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 390px) {
  #homepage-series .navigation-btn {
    min-width: 50px;
    min-height: 50px;
    width: 50px;
    height: 50px;
  }
}