/* ----------------------header---------------------- */
.header {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.mySwiper {
  width: 100%;
  height: 100vh;
  position: relative;
}

.mySwiper::before {
  content: "";
  position: absolute;
  left: 7rem;
  top: 15%;
  width: 1px;
  height: 70%;
  background: var(--bs-white);
  z-index: 10;
}

.mySwiper .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
}

.slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.slide-content {
  position: relative;
  z-index: 2;
  color: var(--bs-white);
  max-width: 106.7rem;
}

.slide-content p {
  font-size: var(--fs-24);
  font-weight: 400;
  color: var(--bs-white);
  line-height: 1.8;
}

.swiper-scrollbar {
  position: absolute;
  left: 10rem !important;
  bottom: 10rem !important;
  width: 45%;
  max-width: 50rem;
  height: 2px;
  background: var(--bs-gray-400);
  z-index: 10;
  border-radius: 2rem;
}

.swiper-scrollbar-drag {
  background: var(--bs-white);
  border-radius: 2rem;
  cursor: pointer;
}

.swiper-scrollbar::after,
.swiper-scrollbar::before {
  position: absolute;
  top: -3rem;
  color: var(--bs-white);
  font-size: var(--fs-20);
  justify-content: space-between;
  letter-spacing: 0.1rem;
}

.swiper-scrollbar::after {
  content: "01";
  right: 0;
}

.swiper-scrollbar::before {
  content: "05";
  left: 0;
}

.pagination-wrapper {
  position: absolute;
  right: 5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.mySwiper .swiper-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: relative;
}

.mySwiper .swiper-pagination::before,
.mySwiper .swiper-pagination::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  width: 1px;
  height: 18rem;
  background: var(--bs-white);
}

.mySwiper .swiper-pagination::before {
  top: -20rem;
}

.mySwiper .swiper-pagination::after {
  bottom: -20rem;
}

.mySwiper .swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  background: var(--bs-white);
  border-radius: 50%;
  transition: all 0.3s ease;
  margin: 0;
}

.mySwiper .swiper-pagination-bullet-active {
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
}

.mySwiper .swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  padding: 1rem;
  border: 1px solid var(--bs-white);
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border-radius: 50%;
}

.fixed-text h2 {
  color: var(--bs-white);
  font-size: var(--fs-88);
  font-weight: 700;
  line-height: 1.5;
}

.arrows-top {
  position: absolute;
  top: 15%;
  left: 8%;
  z-index: 9;
}

.arrows-bottom {
  position: absolute;
  bottom: 10%;
  right: 6%;
  z-index: 9;
}

.join {
  color: var(--bs-white);
  font-size: var(--fs-32);
  font-weight: 700;
  text-align: center;
  position: absolute;
  bottom: 18%;
  right: 15%;
  z-index: 9;
}

/* ----------------navbar---------------- */
.nav-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  padding: 2rem 8rem;
}

/* ------------------Noura Advantages Solutions----------------- */
.advantages-solutions {
  background: url("../images/advantages-solutions-bg.png") no-repeat
    center/cover;
}

.title {
  font-size: var(--fs-36);
  color: var(--bs-white);
  font-weight: 700;
}

.subtitle {
  font-size: var(--fs-24);
  color: var(--bs-white);
  font-weight: 400;
}

.solution-item {
  border-radius: 1.2rem;
  background-color: var(--bs-white);
  height: 100%;
  border: 2px solid var(--bs-white);
  transition: 0.4s;
}

.solution-item:hover {
  background: transparent;
}

.solution-item .icon-wrapper {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--bs-teal);
}

.solution-item:hover .icon-wrapper {
  background-color: var(--bs-white);
}

.solution {
  color: var(--bs-black);
  font-size: var(--fs-20);
  line-height: 1.6;
  font-weight: 400;
}

.solution-item:hover .solution,
.solution-item:hover .solution span,
.solution-item:hover .join2 a {
  color: var(--bs-white);
}

.solution span {
  color: var(--bs-teal);
  font-size: var(--fs-24);
  font-weight: 700;
}

.join2 a {
  font-size: var(--fs-20);
  color: var(--bs-teal);
  font-weight: 700;
}

/* -------------Noura's advantages in numbers----------------- */
.advantages-numbers .title,
.advantages-numbers .subtitle {
  color: var(--bs-green);
}

.advantages-numbers .container {
  border-top: 1px solid var(--bs-gray-600);
}

.number-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.number-item h3 {
  font-size: var(--fs-24);
  font-weight: 700;
  color: var(--bs-black);
}

.number-item .number1 {
  font-size: var(--fs-24);
  color: var(--bs-indigo);
  font-weight: 700;
}

.number-item .number2 {
  font-size: var(--fs-36);
  color: var(--bs-cyan);
  font-weight: 700;
}

.number-item .number3 {
  font-size: var(--fs-36);
  color: var(--bs-success);
  font-weight: 700;
}

.number-item .number4 {
  font-size: var(--fs-24);
  color: var(--bs-move);
  font-weight: 700;
}

.number-item .big {
  font-size: var(--fs-36);
}

.number-item p {
  font-size: var(--fs-16);
  color: var(--bs-gray-700);
  font-weight: 400;
  line-height: 1.6;
}

/* -------------------section divider-------------------- */
.line {
  flex-grow: 1;
  height: 1px;
  background-color: var(--bs-gray-600);
  position: relative;
}

.line::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--bs-gray-600);
  border-radius: 50%;
}

.line-right::after {
  right: auto;
  left: 0;
}

.section-divider .title {
  font-size: var(--fs-16);
  color: var(--bs-white);
  font-weight: 700;
  background-color: var(--bs-green);
  border-radius: 4.9rem;
}

/* ------------------swiper------------------- */
.brand-swiper {
  width: 60%;
  position: relative;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    var(--bs-black) 15%,
    var(--bs-black) 85%,
    transparent 100%
  );
}

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

.brand-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* ---------------------Packages--------------------- */
.packages .main {
  position: relative;
  margin: 50px;
  overflow: hidden;
}

.packages .main .inner {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.packages .main .inner .package-card {
  position: relative;
  flex: 1 1 0;
  transition: all 0.5s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 60rem;
  overflow: hidden;
}

.packages .main .inner .package-card:hover {
  flex: 2.2 1 0;
  padding: 3rem 2rem;
  align-items: flex-start;
}

@media (max-width: 991px) {
  .packages .main .inner {
    flex-wrap: wrap;
  }

  .packages .main .inner .package-card {
    flex: 0 0 calc(50% - 1rem);
    min-height: auto;
  }

  .packages .main .inner .package-card:hover {
    flex: 0 0 calc(50% - 1rem);
    align-items: center;
  }

  .join {
    bottom: calc(30% - 2vh);
    right: calc(9% - 2vw);
  }
}

@media (max-width: 576px) {
  .packages .main .inner {
    flex-wrap: wrap;
  }

  .packages .main .inner .package-card {
    flex: 0 0 100%;
  }

  .packages .main .inner .package-card:hover {
    flex: 0 0 100%;
    align-items: center;
  }

  .join {
    bottom: calc(20% - 2rem);
    right: calc(15% - 2rem);
  }
}

.discount-icon {
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  background-color: var(--bs-white);
  transition: all 0.5s ease;
}

.package-card h3 {
  color: var(--bs-white);
  font-size: var(--fs-24);
  font-weight: 700;
  transition: all 0.5s ease;
}

.package-card .price {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
}

.package-card:hover .price {
  opacity: 1;
  max-height: 10rem;
  margin-bottom: 2rem;
}

.package-card .price h4 {
  color: var(--bs-white);
  font-size: var(--fs-36);
  font-weight: 700;
}

.per-month {
  color: var(--bs-white);
  font-size: var(--fs-16);
  font-weight: 700;
}

.per-year {
  color: var(--bs-white);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 2.4;
}

.package-card ul {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--bs-white);
  padding: 0;
  flex-grow: 1;
  transition: all 0.5s ease;
  width: 100%;
}

.package-card:hover ul {
  opacity: 1;
  max-height: 100rem;
  padding: 3rem 0 2rem 0;
}

.package-card ul li {
  color: var(--bs-white);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 2.4;
}

.subscribe-now {
  font-size: var(--fs-16);
  color: var(--bs-teal);
  font-weight: 700;
  background-color: var(--bs-white);
  text-align: center;
  border-radius: 0.8rem;
  padding: 1.5rem 3rem;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  width: 100%;
}

.package-card:hover .subscribe-now {
  opacity: 1;
  max-height: 10rem;
}

.package-card::after {
  content: "";
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  width: 4rem;
  height: 4rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: all 0.5s ease;
}

.package-card:hover::after {
  opacity: 0;
}

.trial-package::after {
  background-image: url(../images/package-arrows1.png);
}

.single-package::after {
  background-image: url(../images/package-arrows2.png);
}

.inclusive-package::after {
  background-image: url(../images/package-arrows3.png);
}

.plus-package::after {
  background-image: url(../images/package-arrows4.png);
}

.trial-package {
  background: url(../images/trial-package-bg.webp) no-repeat center/cover;
}

.single-package {
  background: url(../images/single-package-bg.webp) no-repeat center/cover;
}

.inclusive-package {
  background: url(../images/inclusive-package-bg.webp) no-repeat center/cover;
}

.plus-package {
  background: url(../images/comprehensive-plus-package-bg.webp) no-repeat
    center/cover;
}

/* ----------------------Noura Benefits Card---------------------- */
.benefits-card {
  background: url(../images/noura-benefits-card.png) no-repeat center/cover;
  border-radius: 2.2rem;
  overflow: hidden;
}

.benefits-card .right h2 {
  color: var(--bs-white);
  font-weight: 700;
  font-size: var(--fs-40);
}

.benefits-card .right p {
  color: var(--bs-white);
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: 1.6;
}

.apple-wallet {
  background-color: var(--bs-black);
  border-radius: 1rem;
  border: 1px solid var(--bs-gray-600);
  width: fit-content;
}

.apple-wallet span {
  color: var(--bs-white);
  font-size: var(--fs-16);
  font-weight: 400;
}

.iphone-14-pro-mockup {
  animation: fade 5s ease-in-out infinite alternate;
}

@keyframes fade {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(40px);
  }
}

/* ------------------------noura app----------------------------- */
.noura-app .app-content .left {
  /* background: url("../images/Frame-noura-app.png") no-repeat center/cover; */
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 50%, 0% 0%);
  border-radius: 3.4rem;
  background-color: #32737e;
  position: relative;
  /* background: url("../images/footer-bg.png") no-repeat center/cover; */
}

.noura-app .app-content .left::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/footer-bg.png") no-repeat center/cover;
}

.noura-app .app-content .left .inner {
  max-width: 40.6rem;
  margin: 0 auto;
}

@media screen and (max-width: 480px) {
  .noura-app .app-content .left {
    clip-path: none;
  }

  .noura-app .app-content .left .inner {
    max-width: 30.6rem;
  }
}

.noura-app .app-content .left .logo p {
  font-size: var(--fs-24);
  color: var(--bs-white);
  font-weight: 700;
}

.noura-app .app-content .left h4 {
  font-size: var(--fs-20);
  color: var(--bs-white);
  font-weight: 700;
  line-height: 1.6;
}

.noura-app .app-content .left h5 {
  font-size: var(--fs-16);
  color: var(--bs-white);
  font-weight: 400;
  line-height: 1.6;
}

.pro-mockup {
  position: absolute;
  top: -20px;
  right: 30%;
  max-width: 50rem;
  animation: float 5s ease-in-out infinite;
}

.pro-mockup-copy {
  position: absolute;
  top: 40px;
  right: 5%;
  max-width: 50rem;
  animation: float 5s ease-in-out infinite;
  animation-delay: 2s;
}

.logo-mockup {
  position: relative;
  z-index: -1;
  animation: floatx 5s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes floatx {
  0% {
    transform: translateX(40px);
  }

  50% {
    transform: translateX(-50px);
  }

  100% {
    transform: translateX(40px);
  }
}

/* ------------------media queries------------------- */
@media (max-width: 991px) {
  .slide-content {
    padding: 0 5rem;
    max-width: 100%;
  }

  .swiper-scrollbar {
    left: 4rem !important;
    width: calc(100% - 20rem) !important;
    bottom: 6rem;
  }

  .pagination-wrapper {
    right: 2rem;
  }

  .nav-bar {
    padding: 1rem;
  }

  .mySwiper::before {
    left: 2rem;
  }

  .pro-mockup,
  .pro-mockup-copy {
    max-width: 20rem;
  }

  .pro-mockup {
    top: -10px;
    right: calc(50% - 5rem);
  }

  .pro-mockup-copy {
    top: 30px;
    right: calc(50% - 15rem);
  }

  .logo-mockup {
    max-width: 30rem;
  }

  @keyframes fade {
    0% {
      transform: translateY(50px);
    }

    100% {
      transform: translateY(80px);
    }
  }
}