.home {
  overflow: hidden;
  position: relative;

  .navbar {
    padding: 20px 0;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(30px);

    .navbar-nav {
      gap: 40px;
      margin-right: 40px;

      @media screen and (max-width: 991px) {
        gap: 15px;
        margin-right: 0px;
        margin-top: 20px;
        align-items: center;
        flex-direction: column;

        .btn__primary {
          width: fit-content !important;
        }
      }

      .nav-link {
        color: #000;
        text-align: right;
        font-family: Cairo;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding: 10px 0;

        &.active {
          position: relative;

          &::after {
            content: "";
            display: block;
            width: 100%;
            height: 2px;
            background-color: #000;
            transition: all 0.3s ease;
            position: absolute;
            bottom: 0;
          }
        }
      }
    }

    .navbar-toggler {
      &:focus {
        box-shadow: none;
      }
    }
  }

  .home__inner {
    padding-top: 60px;
    padding-bottom: 100px;
    position: relative;

    @media screen and (max-width: 768px) {
      padding-bottom: 50px;
    }

    .home__inner__text {
      height: 100%;
      display: flex;
      justify-content: center;
      flex-flow: column;
      gap: 24px;
      position: relative;
      transform: translateX(150%);

      .home__inner__text__group {
        display: flex;
        flex-flow: column;
        gap: 16px;

        .home__inner__text__title {
          color: #000;
          text-align: right;
          font-family: Cairo;
          font-size: 42px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          width: 80%;

          @media screen and (max-width: 768px) {
            font-size: 30px;
          }
        }

        .home__inner__text__subtitle {
          color: #000;
          text-align: right;
          font-family: Cairo;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;

          @media screen and (max-width: 768px) {
            font-size: 18px;
          }
        }
      }

      .home__inner__text__btns {
        display: flex;
        flex-flow: row wrap;
        gap: 15px;
        align-items: center;
        margin-bottom: 100px;

        @media screen and (max-width: 768px) {
          img {
            width: 100px;
          }
        }
      }

      .home__inner__text__more {
        color: #000;
        font-family: Cairo;
        font-size: 14px;
        font-weight: 400;
        display: flex;
        align-items: center;
        /* Align text and line */
        gap: 5px;
        animation: moveText 2s infinite ease-in-out;
        transform-origin: center;
        /* Ensure rotation happens around the center */
        width: fit-content;
        min-width: 150px;
        margin-right: -50px;
      }

      .home__inner__text__more__line {
        transform: scale(1);
        width: 70px;
        /* Initial width */
        height: 2px;
        background-color: #000;
        animation: pulseWidth 2s infinite ease-in-out;
      }

      &.active {
        transform: translateX(0);
        transition: transform 2.5s ease-in-out;
      }
    }

    .home__inner__img {
      @media screen and (max-width: 768px) {
        margin: auto;
        display: flex;
        justify-content: center;

        img {
          width: 400px;
        }
      }
    }
  }
}

.home__inner__text__btns {
  display: flex;
  flex-flow: row wrap;
  gap: 15px;
  align-items: center;
  margin-bottom: 100px;

  @media screen and (max-width: 768px) {
    img {
      width: 100px;
    }
  }
}

.home__inner__img__back {
  position: absolute;
  right: -20%;
  top: -40%;
  border-radius: 50%;
  width: 1090px;
  height: 1090px;
  flex-shrink: 0;
  border-radius: 1090px;
  background: linear-gradient(
    120deg,
    rgba(17, 100, 224, 0.12) 15.41%,
    rgba(116, 193, 105, 0.12) 125.35%
  );
  filter: blur(200px);
  z-index: -1;
}

.aboutUs {
  padding: 125px 0;
  position: relative;
  overflow: hidden;

  @media screen and (max-width: 991px) {
    padding: 50px 0;
  }

  .aboutUs__right {
    display: flex;
    flex-flow: column nowrap;
    gap: 33px;

    .aboutUs__right__top {
      display: flex;
      flex-flow: column nowrap;
      gap: 16px;

      .aboutUs__right__top__title {
        color: #000;
        font-family: Cairo;
        font-size: 32px;
        font-weight: 700;

        @media screen and (max-width: 768px) {
          font-size: 25px;
        }
      }

      .aboutUs__right__top__description {
        color: #000;
        font-family: Cairo;
        font-size: 24px;
        font-weight: 400;

        @media screen and (max-width: 768px) {
          font-size: 20px;
        }
      }
    }

    .aboutUs__right__bottom {
      display: flex;
      flex-flow: column nowrap;
      gap: 16px;

      .aboutUs__right__bottom__title {
        color: #000;
        font-family: Cairo;
        font-size: 32px;
        font-weight: 700;

        @media screen and (max-width: 768px) {
          font-size: 25px;
        }
      }

      .aboutUs__right__bottom__list {
        padding: 0;
        margin: 0;
        display: flex;
        flex-flow: column nowrap;
        gap: 16px;

        li {
          list-style: none;
          padding-right: 34px;
          position: relative;
          color: #000;
          font-family: Cairo;
          font-size: 16px;
          font-weight: 400;

          &::after {
            content: "";
            background-image: url("../assets/images/tick-circle.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            width: 24px;
            height: 24px;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }

  /* .aboutUs__left {
    position: absolute;
    left: 150px;
    top: -100px;
    top: 100px;
    width: 650px;
    height: 867px;
    z-index: -1;
    img {
      width: 100%;
      height: 600px;
      object-fit: cover;
    }

    @media screen and (max-width: 1200px) {
      position: relative;
      left: unset;
      top: unset;
      width: 650px;
      height: unset;
      margin-top: 50px;
    }
    @media screen and (max-width: 768px) {
      margin-right: -130px;
      margin-top: 30px;
      img {
        height: 500px;
        object-fit: cover;
      }
    }
    @media screen and (max-width: 768px) {
      margin-right: -100px;
      width: 500px;
    }
  } */

  .aboutUs__left__content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: UpDown 7s infinite ease-in-out;

    @media screen and (max-width: 768px) {
      margin-top: 30px;
    }

    &::after {
      content: "";
      background-image: url("../assets/images/shadow-about.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      width: 600px;
      height: 600px;
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
    }

    .aboutUs__left__content__img {
      width: fit-content;
      position: relative;
      z-index: 1;

      .aboutUs__left__content__img__right {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(50%, -20%);
        z-index: 0;
        animation: ImgR_GoDown 7s infinite ease-in-out;
      }

      .aboutUs__left__content__img__left {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        z-index: 0;
        animation: ImgL_GoUp 7s infinite ease-in-out;
      }

      .aboutUs__left__content__img__bottom {
        position: absolute;
        bottom: 40px;
        right: 0;
        transform: translate(-10%, 50%);
        z-index: 0;
        animation: ImgB_GoLeft 7s infinite ease-in-out;
      }
    }

    @media screen and (max-width: 768px) {
      .aboutUs__left__content__img {
        width: 300px;
        height: 500px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        .aboutUs__left__content__img__bottom,
        .aboutUs__left__content__img__right,
        .aboutUs__left__content__img__left {
          width: 200px;
          height: 400px;
        }
      }
    }
  }
}

.our__designers {
  .our__designers__top {
    display: flex;
    flex-flow: column nowrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 42px;

    .our__designers__title {
      color: #000;
      text-align: center;
      font-family: Cairo;
      font-size: 32px;
      font-weight: 700;

      @media screen and (max-width: 768px) {
        font-size: 25px;
      }
    }

    .our__designers__description {
      color: #000;
      text-align: center;
      font-family: Cairo;
      font-size: 20px;
      font-weight: 400;
      width: 90%;
      margin: auto;

      @media screen and (max-width: 768px) {
        font-size: 16px;
      }
    }
  }

  .our__designers__items {
    overflow: hidden;
    justify-content: center;
    min-height: 440px !important;
    display: flex;
    width: 70%;
    max-width: 1096px;
    margin-inline: auto;
    /* background-color: red; */
    &.slider-1 .slick-track {
      display: flex !important;
      /* Ensures proper alignment */
      gap: 32px;
      /* Alternative to margin (modern CSS) */
    }

    .slick-arrow {
      z-index: 10;
      top: 90%;

      &.slick-prev {
        right: 50%;
      }

      &.slick-next {
        left: calc(100% - 49%);
      }
    }

    .owl-item {
      /* width: 250px !important; */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .our__designers__items__item {
      position: relative;
      min-width: 223px;
      width: 250px;
      min-height: 315px;
      border-radius: 4px 4px 0px 0px;

      .our__designers__items__item__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        border-radius: 4px 4px 0px 0px;
        overflow: hidden;

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }

      .our__designers__items__item__info {
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        padding: 4px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        width: calc(100% - 16px);
        margin: auto;
        position: absolute;
        bottom: 28px;
        right: 8px;

        .our__designers__items__item__info__right {
          display: flex;
          gap: 6px;
          align-items: center;

          .our__designers__items__item__info__right__img {
            border-radius: 50%;
            width: 31px;
            height: 31px;
            flex-shrink: 0;

            img {
              object-fit: cover;
              width: 100%;
              height: 100%;
            }
          }

          .our__designers__items__item__info__right__name {
            color: #000;
            font-family: Cairo;
            font-size: 16px;
            font-weight: 700;
            line-height: 100%;
            /* 16px */
          }
        }

        .our__designers__items__item__info__left {
          .our__designers__items__item__info__left__rating {
            display: flex;
            gap: 4px;
            align-items: center;
            border-radius: 4px;
            border: 0.36px solid rgba(0, 0, 0, 0.2);
            background: #fff;
            padding: 2.881px;

            .our__designers__items__item__info__left__rating__number {
              color: #000;
              font-family: Cairo;
              font-size: 14px;
              font-weight: 500;
              line-height: 11px;
              /* 78.571% */
            }

            .our__designers__items__item__info__left__rating__icon {
              border-radius: 1.441px;
              background: var(--Extended-Yellow-Yellow-500, #f59e0b);
            }
          }
        }
      }

      .our__designers__items__item__info__action {
        display: flex;
        padding: 6px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        background: var(--base-color, #ede0d4);
        color: #050505;
        text-align: center;
        font-family: Cairo;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        /* 24px */
        width: fit-content;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
}

.slick-prev i,
.slick-next i {
  display: inline-block;
  font-size: 20px;
  /* Adjust icon size */
}

.slick-prev,
.slick-next {
  font-size: 24px;
  background-color: black !important;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: white !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.5s ease-in-out;

  &:hover {
    color: white;
    background-color: black;
  }

  &::before {
    content: "" !important;
    display: none;
  }
}

/* Style for disabled arrows */
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  background-color: #f9fafb !important;
  color: black !important;
  transition: background-color 0.5s ease-in-out;

  &:hover {
    background-color: #f9fafb;
    color: black;
  }
}

#owl-next,
#owl-prev {
  position: absolute;
  top: 100%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  svg {
    /* fill: #000 !important; */

    path {
      /* fill: #000 !important; */
    }
  }
}

#owl-next {
  right: calc(50% - 60px);
  background-color: #000;
}

#owl-prev {
  left: calc(50% - 60px);
  background: var(--Background-background-body, #f9fafb);
}

.owl-nav {
  position: absolute;
  top: 85%;

  button {
    position: absolute;
    background-color: #000 !important;
    color: white !important;
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    &.disabled {
      background-color: #f9fafb !important;
      color: #000 !important;
    }
    &.owl-prev {
      right: calc(50% + 12px);
    }
    &.owl-next {
      left: calc(50% + 12px);
    }
  }
}
.application {
  padding: 160px 0;

  @media screen and (max-width: 1200px) {
    padding: 100px 0;
  }

  @media screen and (max-width: 991px) {
    padding: 60px 0;
  }

  .application__inner {
    border-radius: 32px;
    background: #000;
    padding: 32px 100px 32px 0px;
    overflow: hidden;

    @media screen and (max-width: 991px) {
      padding: 32px;
    }
  }

  .application__right {
    display: flex;
    flex-flow: column nowrap;
    gap: 20px;
    position: relative;
    z-index: 10;

    @media screen and (max-width: 991px) {
      align-items: center;
      text-align: center;

      &::after {
        content: "";
        width: 300px;
        height: 300px;
        flex-shrink: 0;
        border-radius: 320.5px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.16) 0%,
          rgba(255, 255, 255, 0) 100%
        );
        position: absolute;
        top: 0;
        left: -140px;
        z-index: 1;
      }

      &::before {
        content: "";
        width: 300px;
        height: 300px;
        flex-shrink: 0;
        border-radius: 320.5px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.16) 0%,
          rgba(255, 255, 255, 0) 100%
        );
        position: absolute;
        bottom: 0;
        right: -140px;
        z-index: 1;
      }
    }

    .application__title {
      color: #fff;
      font-family: Cairo;
      font-size: 30px;
      font-weight: 600;

      @media screen and (max-width: 768px) {
        font-size: 25px;
      }
    }

    .application__subtitle {
      color: #fff;
      font-family: Cairo;
      font-size: 20px;
      font-weight: 400;
      width: 80%;

      @media screen and (max-width: 768px) {
        width: 100%;
        font-size: 16px;
      }
    }

    .application__btns {
      display: flex;
      gap: 10px;

      a {
        border: 1px solid #fff;
        display: block;
        width: fit-content;
        border-radius: 6px;
        overflow: hidden;

        @media screen and (max-width: 768px) {
          width: 120px;

          img {
            width: 100%;
          }
        }

        @media screen and (max-width: 500px) {
          width: 100px;

          img {
            width: 100%;
          }
        }
      }
    }
  }

  .application__left {
    position: relative;
    height: 100%;

    img {
      position: absolute;
      bottom: -40px;
      width: 445px;
      left: 0;
      object-fit: cover;
      z-index: 0;

      @media screen and (max-width: 991px) {
        display: none;
      }
    }
  }
}

.contactUs {
  padding: 0px 0 160px;

  @media screen and (max-width: 1200px) {
    padding-bottom: 100px;
  }

  @media screen and (max-width: 991px) {
    padding-bottom: 80px;
  }

  @media screen and (max-width: 768px) {
    padding: 50px 0;
  }

  .contactUs__top {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 16px;
    margin-bottom: 40px;

    .contactUs__title {
      color: #000;
      text-align: center;
      font-family: Cairo;
      font-size: 32px;
      font-weight: 700;

      @media screen and (max-width: 768px) {
        font-size: 25px;
      }
    }

    .contactUs__subtitle {
      color: #000;
      text-align: center;
      font-family: Cairo;
      font-size: 20px;
      font-weight: 400;
      width: 90%;

      @media screen and (max-width: 768px) {
        font-size: 16px;
      }
    }
  }

  .contactUs__items {
    display: flex;
    flex-flow: row wrap;
    gap: 24px;
    justify-content: center;
    align-items: center;

    .contactUs__items__item {
      display: flex;
      flex-flow: row nowrap;
      gap: 10px;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      background: #f1f1f1;
      display: flex;
      padding: 16px;
      flex: 1 0 0;
      flex-shrink: 1;

      &:first-of-type {
        min-width: max-content;
      }

      .contactUs__items__item__link {
        color: #000;
        font-family: Cairo;
        font-size: 17px;
        font-weight: 400;
        text-decoration: none;
      }

      .contactUs__items__item__img__social {
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }
  }
}

.footer {
  padding: 32px 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.25);
  background: rgba(244, 244, 244, 0.5);
  backdrop-filter: blur(30px);

  .footer__top {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 32px 0;
    border-bottom: 0.5px solid #d0d0d0;

    .footer__top__links {
      display: flex;
      gap: 24px;
      align-items: center;
      justify-content: center;
      flex-flow: row wrap;
      width: 90%;
      margin: auto;

      @media screen and (max-width: 768px) {
        gap: 10px;
        justify-content: center;
      }

      a {
        color: #000;
        text-align: right;
        font-family: Cairo;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-decoration: none;

        @media screen and (max-width: 768px) {
          font-size: 12px;
        }
      }
    }

    @media screen and (max-width: 1200px) {
      flex-flow: column nowrap;
      gap: 30px;
      align-items: center;
    }

    .app__btns {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 10px;

      a {
        text-decoration: none;
        width: 120px;
        height: 46px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 5px;
        }
      }

      @media screen and (max-width: 500px) {
        a {
          text-decoration: none;
          width: 100px;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    @media screen and (max-width: 768px) {
      .app__btns {
        display: flex;
        flex-flow: column nowrap;
        gap: 10px;
        align-items: center;
      }
    }
  }

  .footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;

    @media screen and (max-width: 768px) {
      flex-flow: column nowrap;
      gap: 20px;
      align-items: center;
    }

    .footer__bottom__copyright {
      color: #161616;
      text-align: right;
      font-family: Cairo;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
    }

    .footer__bottom__payments {
      display: flex;
      gap: 12px;
      align-items: center;
    }
  }
}