#page-cover {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

#page-cover svg {
  max-height: 85vh;
}

#page-cover #page-title {
  position: absolute;
  width: 100%;
  top: 20%;
  left: 0;
  text-align: center;
}

#page-cover #page-title h1 {
  font-family: "Rheem Sans Light";
  font-style: normal;
  font-size: 50px;
  line-height: 50px;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff !important;
}

#page-cover #page-title .orders {
  color: var(--primary-red) !important;
  font-family: "Rheem Sans Light";
  font-size: 25px;
  line-height: 1;
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: 0px;
}

#page-cover #page-title p {
  font-family: "Rheem Sans Light";
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: #ffffff;
  padding-top: 30px;
}

.icon-sect img.icon {
  width: 118px;
  height: 118px;
}

.icon-sect {
  padding-top: 80px;
  margin-top: 50px;
  background-size: auto 80%;
  background-position: right 50px;
}

.icon-sect.split {
  background-image: url(../img/air-conditioner/split-bg-icon.svg);
  background-repeat: no-repeat;
}

.icon-sect.vrf {
  background-image: url(../img/air-conditioner/vrf-bg-icon.png);
  background-repeat: no-repeat;
}

.icon-sect.packaged {
  background-image: url(../img/air-conditioner/packaged-bg-icon.png);
  background-repeat: no-repeat;
}

.icon-sect.bg-left {
  background-position: left 50px;
}

.icon-sect h4 {
  font-family: "Rheem Sans Light";
  font-style: normal;
  font-weight: 300;
  font-size: 60px;
  line-height: 74px;
  /* or 123% */
  text-align: center;
  margin-top: 10px;
  color: #000000;
}

.icon-sect p {
  font-family: "Rheem Sans Light";
  font-size: 18px;
  line-height: 28px;
  /* or 156% */
  text-align: center;
  margin-top: 10px;
  color: #4a4a4a;
}

.main-ellipse {
  flex: 1 1 300px; /* Adjust the minimum size if needed */
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px solid #cd1222;
  position: relative;
  max-width: 600px; /* Maximum width, adjust as needed */
  max-height: 600px; /* Maximum height, adjust as needed */
  box-sizing: border-box;
}

.main-ellipse .inside-ellipse {
  height: 300px;
  width: 300px;
  border-radius: 100%;
  left: 50%;
  margin-left: -150px;
  top: 50%;
  margin-top: -150px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.main-ellipse .inside-ellipse.red {
  background-color: #cd1222;
}

.main-ellipse .inside-ellipse.grey {
  background-color: #f5f5f5;
}

.main-ellipse .inside-ellipse img {
  max-width: 70%;
  max-height: 80%;
}

.main-ellipse .inside-ellipse:hover {
  background-color: #cd1222;
}

.main-ellipse .inside-ellipse .hover-text {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: rgba(205, 18, 34, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.main-ellipse .inside-ellipse .hover-text p {
  font-family: "Rheem Sans Light";
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
  padding: 26px;
}

.main-ellipse .inside-ellipse:hover .hover-text {
  display: flex;
}

.main-ellipse h6.pname {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  font-family: "Rheem Sans Light";
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000000;
  margin-top: 12%;
  z-index: 9;
}

.swiper {
  width: 120%;
  left: -10% !important;
  height: 613px;
  position: relative;
}

.swiper-slide {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
}

#ellipse-slider .swiper {
  padding-bottom: 100px;
  padding-top: 100px;
}

#ellipse-slider .app-slider-left {
  position: absolute;
  left: 50%;
  margin-left: -18.3%;
  top: 50%;
  margin-top: -18px;
  width: 3vw;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ellipse-slider .app-slider-right {
  position: absolute;
  right: 50%;
  margin-right: -18.3%;
  top: 50%;
  margin-top: -18px;
  width: 3vw;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ellipse-slider .app-slider-right img,
#ellipse-slider .app-slider-left img {
  max-width: 100%;
}