* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: OfRegular;
  color: #fff;
}

body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: linear-gradient(45deg, #130e0c, #16100d);
}

html{
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

::selection{
  color: #16100d;
  background-color: #fff;
}

@font-face {
  font-family: EpBlack;
  src: url(Assets/fonts/Epilogue-Black.ttf);
}

@font-face {
  font-family: EpBold;
  src: url(Assets/fonts/Epilogue-Bold.ttf);
}

@font-face {
  font-family: EpSemiBold;
  src: url(Assets/fonts/Epilogue-SemiBold.ttf);
}

@font-face {
  font-family: EpMedium;
  src: url(Assets/fonts/Epilogue-Medium.ttf);
}

@font-face {
  font-family: EpRegular;
  src: url(Assets/fonts/Epilogue-Regular.ttf);
}

@font-face {
  font-family: EpLight;
  src: url(Assets/fonts/Epilogue-Light.ttf);
}

@font-face {
  font-family: OfBlack;
  src: url(Assets/fonts/Outfit-Black.otf);
}

@font-face {
  font-family: OfBold;
  src: url(Assets/fonts/Outfit-Black.otf);
}

@font-face {
  font-family: OfSemiBold;
  src: url(Assets/fonts/Outfit-SemiBold.otf);
}

@font-face {
  font-family: OfMedium;
  src: url(Assets/fonts/Outfit-Medium.otf);
}

@font-face {
  font-family: OfRegular;
  src: url(Assets/fonts/Outfit-Regular.otf);
}

@font-face {
  font-family: OfLight;
  src: url(Assets/fonts/Outfit-Light.otf);
}

@font-face {
  font-family: MonospaceTypewriter;
  src: url(Assets/fonts/MonospaceTypewriter.ttf);
}
@font-face {
  font-family: de;
  src: url(Assets/fonts/DESIGNER.otf);
}
@font-face {
  font-family: be;
  src: url(Assets/fonts/BadgerValley-Regular.ttf);
}

@font-face {
  font-family: clashXLight;
  src: url(Assets/fonts/ClashDisplay-Extralight.otf);
}

@font-face {
  font-family: clashLight;
  src: url(Assets/fonts/ClashDisplay-Light.otf);
}

@font-face {
  font-family: clashMedium;
  src: url(Assets/fonts/ClashDisplay-Medium.otf);
}

@font-face {
  font-family: clashRegular;
  src: url(Assets/fonts/ClashDisplay-Regular.otf);
}

@font-face {
  font-family: clashSemiBold;
  src: url(Assets/fonts/ClashDisplay-Semibold.otf);
}

@font-face {
  font-family: clashBold;
  src: url(Assets/fonts/ClashDisplay-Bold.otf);
}

@font-face {
    font-family: SL;
    src: url(Assets/fonts/SundayLemon.ttf);
}

@font-face {
    font-family: SP;
    src: url(Assets/fonts/SuperPlants.ttf);
}

@font-face {
    font-family: G;
    src: url(Assets/fonts/Gambarino-Regular.otf);
}

@font-face {
    font-family: MB;
    src: url(Assets/fonts/Melodrama-Bold.otf);
}

@font-face {
    font-family: MR;
    src: url(Assets/fonts/Melodrama-Regular.otf);
}

@font-face {
    font-family: MS;
    src: url(Assets/fonts/Melodrama-Semibold.otf);
}

/* Loader Loader Loader Loader Loader Loader Loader */
/* Loader Loader Loader Loader Loader Loader Loader */
/* Loader Loader Loader Loader Loader Loader Loader */
/* Loader Loader Loader Loader Loader Loader Loader */
/* Loader Loader Loader Loader Loader Loader Loader */

#loader{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: #000;
  animation: anim2 1s cubic-bezier(0.19, 1, 0.22, 1) 6s both;
}

#loader>img{
  position: absolute;
  width: 8%;
}

#loader>#one{
  top: 30%;
  left: 32%;
  z-index: 1;
  width: 12%;
  animation: float 1.5s infinite alternate;
  filter: drop-shadow(0 0 1rem #ffffff39);
  opacity: 0.3;
}

#loader>#two{
  top: 58%;
  left: 48%;
  z-index: 1;
  animation: float 1.5s infinite alternate;
  filter: drop-shadow(0 0 1rem #ffffff39);
  animation-delay: .25s;
  opacity: 0.3;
}
#loader>#three{
  top: 40%;
  left: 60%;
  z-index: 1;
  animation: float 1.5s infinite alternate;
  filter: drop-shadow(0 0 1rem #ffffff39);
  animation-delay: .5s;
  opacity: 0.3;
}

@keyframes float{
  0%{
    transform: translate(0, 0);
    scale: 1;
    opacity: 0.3;
  }
  100%{
    transform: translate(0, 10px);
    scale: 1.1;
    opacity: .5;
  }
}

#wrapperload{
  width: 500px;
  height: 100px;
  overflow: hidden;
  background-color: #000;
}

#wrapperload .elem{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  /* background-color: #efefef; */
  color: #000;
}
#wrapperload .elem h3{
  color: #fff;
  font-weight: 300;
  font-family: 'OfLight';
  z-index: 5;
}

#wrapperload .elem img{
  width: 20%;
  z-index: 5;
}

#wrapperload .elem:nth-child(1){
  animation: anim 2s cubic-bezier(0.19, 1, 0.22, 1) 1s both;
}

#wrapperload .elem:nth-child(2){
  animation: anim 2s cubic-bezier(0.19, 1, 0.22, 1) 3s both;
}

#wrapperload .elem:nth-child(3){
  animation: anim 2s cubic-bezier(0.19, 1, 0.22, 1) 5s both;
}


@keyframes anim{
  to{
      margin-top: -100px;
      opacity: 0;
  }
}

@keyframes anim2{
  to{
      transform: translateY(-100%);
      opacity: 0;
  }
}


@keyframes animate {

  0%,
  10% {
      background-position: -1000px;
  }

  20%,
  90% {
      background-position: top left;
  }

  50% {
      background-position: top right;
  }

  100% {
      background-position: 1000px;
  }
}





/* Main Main Main Main Main Main Main Main Main Main Main Main Main Main
   Main Main Main Main Main Main Main Main Main Main Main Main Main Main
   Main Main Main Main Main Main Main Main Main Main Main Main Main Main
   Main Main Main Main Main Main Main Main Main Main Main Main Main Main
   Main Main Main Main Main Main Main Main Main Main Main Main Main Main
*/

.main {
  width: 100vw;
  min-height: 100vh;
  position: fixed;
  background: linear-gradient(45deg, #130e0c, #16100d);
  z-index: -1;
  overflow-y: auto;
  overflow-x: hidden;
}

.navigation {
  width: 100%;
  height: 15vh;
  /* background-color: saddlebrown; */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
}

nav {
  z-index: 99;
  /* position: absolute; */
  width: 100%;
  height: 10vh;
  /* top: 2.5vh;
  left: 2%; */
  border-radius: 50px;
  /* background-color: #ee4343c6; */
  background-color: #00000057;

  backdrop-filter: blur(8px);
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* padding: 0 1vw; */
  padding: 1rem 0.5rem;

  /* padding: 56vh 5vw; */

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .logo > img {
    cursor: pointer;
    width: 60px;
  }

  .logo > a {
    text-decoration: none;
    margin-left: 3vw;
    color: #7b7b7b;
    transition: color 0.5s;
    font-family: OfLight;
  }

  .logo > .active {
    color: #c7c7c7;
  }

  .logo > :first-child {
    margin-right: 5vw;
    margin-left: 1vw;
  }

  .logo > a:hover {
    color: #c7c7c7;
  }

  .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .buttons > .search {
    width: 2.8vw;
    height: 2.8vw;
    padding: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background-color: transparent;
    outline: none;
    border: 1.5px solid #fff;
    cursor: pointer;
    transition: background-color 0.5s;
  }

  .buttons > .search > i {
    color: #c7c7c7;
    font-size: 1.2vw;
    z-index: 999;
    transition: color 0.5s;
  }

  .buttons > .shop,
  .buttons > .login {
    padding: 0.8vw 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background-color: transparent;
    outline: none;
    border: 1.5px solid #fff;
    font-size: 1vw;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.5s, color 0.5s;
  }

  .buttons > .search:hover,
  .buttons > .shop:hover,
  .buttons > .login:hover {
    background-color: #fff;
    color: #000;
  }

  .buttons > .search:hover i {
    color: #000;
  }
}

/* Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero
   Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero
   Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero
   Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero
   Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero
*/

.hero {
  width: 100vw;
  height: 100vh;
  /* background-color: rgb(73, 39, 45); */
  font-size: 1vw;
  color: wheat;
  position: relative;
  z-index: 99;
  /* padding: 56vh 5vw; */
  padding: 0rem 2rem;
  display: flex;
  align-items: start;
  justify-content: start;

  .container {
    /* position: absolute; */
    /* top: 55%;
    left: 50%; */
    /* transform: translate(-50%, -50%); */
    width: 100%;
    height: 95vh;
    /* background-color: red; */
    border-radius: 30px;
    overflow: hidden;
    opacity: 0.8;
    z-index: 9;

    .swiper {
      width: 100%;
      height: 100%;
      /* background-color: saddlebrown; */
    }

    .swiper-slide {
      width: 100%;
      height: 100%;
      background-position: bottom;
      background-size: cover;
      position: relative !important;
    }

    .swiper-slide video {
      /* display: block; */
      width: 100%;
      object-position: cover;
      object-fit: contain;
    }
    /* #img2{
      background-color: #000000;
      z-index: 45545454;
    } */
    .black-box {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.352) !important;
      z-index: 566646446 !important;
      position: absolute !important;
    }
  }
  .main-content {
    position: absolute;
    left: 6%;
    top: 40%;
    z-index: 10;
  }
  h3 {
    margin-bottom: 4vh;
  }

  h3 > i {
    font-size: 1vw;
    font-family: clashRegular;
    font-weight: 100;
    color: #d5d1cf;
    letter-spacing: 0.5px;
  }

  h1 {
    font-size: 4vw;
    font-family: clashBold;
    font-weight: 100;
    line-height: 1;
    color: #fff;
    margin-bottom: 6vh;
    letter-spacing: 1px;
  }

  .buttons {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .buttons > .order,
  .buttons > .collection {
    padding: 1.2vw 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background-color: transparent;
    outline: none;
    border: 2px solid #fff;
    font-size: 1vw;
    font-weight: 300;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.5s, color 0.5s;
    font-style: italic;
    font-family: clashLight;
  }

  .buttons > .order:hover,
  .buttons > .collection:hover {
    background-color: #fff;
    color: #000;
    font-weight: 900;
  }
}

/* section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2
   section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2
   section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2
   section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2
   section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2 section2
*/

.section2 {
  width: 100%;
  height: 35vh;
  /* background-color: red; */
  display: flex;
  gap: 1%;
  position: relative;
  padding: 0 2%;
  display: flex;
  align-items: center;
  justify-content: center;

  .left {
    width: 65%;
    height: 100%;
    background-color: #1d1d1d;
    border-radius: 30px;
    display: flex;
    /* align-items: center; */
    /* flex-direction: column; */
    justify-content: space-between;
    /* position: relative; */
    /* padding-left: 25%; */
    .c {
      width: 100%;
      /* background-color: saddlebrown; */
      height: 100%;
      display: flex;
      align-items: start;
      justify-content: center;
      flex-direction: column;
    }
    .box {
      width: 50%;
      height: 100%;
      /* background-color: rgba(255, 0, 0, 0.474); */
      display: flex;
      justify-content: center;
      align-items: center;

      .circle {
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background-color: #926a54;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 90px;
        }
      }

      .halfCircle {
        width: 85px;
        height: 170px;
        /* background-color: #926a54; */
        border-radius: 0 150px 150px 0;
        background-image: url(Assets/imgs/ringHalf.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: -80px;
      }

      .overlayArrow {
        /* position: absolute;
        left: 20%;
        top: 50%;
        transform: translate(-50%, -50%); */
        position: absolute;
        left: 18%;
        z-index: 6564;

        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(10px);
        background: rgba(0, 0, 0, 0.4);
        cursor: pointer;
        transition: background 0.5s;

        i {
          font-size: 1.2vw;
        }
      }

      .overlayArrow:hover {
        background: rgba(0, 0, 0, 0.6);
      }
    }

    i {
      font-size: 1.2vw;
      font-weight: 100;
      font-family: clashMedium;
    }

    h1 {
      margin-top: 3vh;
      font-size: 3.5vw;
      font-weight: 100;
      /* font-family: OfSemiBold; */
      font-family: clashSemiBold;
      letter-spacing: 2px;
      font-weight: 900;
      line-height: 0.9;
    }
  }

  .right {
    width: 35%;
    height: 100%;
    background-color: #926a54;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-left: 4%;

    i {
      font-size: 1.2vw;
      font-weight: 100;
      /* font-family: EpRegular; */
      font-family: clashMedium;
    }

    h1 {
      margin-top: 8vh;
      font-size: 4vw;
      font-weight: 100;
      /* font-family: OfSemiBold; */
      font-family: clashMedium;
      letter-spacing: 2px;
      font-weight: 600;
      line-height: 0.9;
    }

    .profiles {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 10%;
      bottom: 15%;

      .box {
        position: relative;
        width: 70px;
        height: 70px;
        background-color: pink;
        border-radius: 50%;
        overflow: hidden;
        margin-right: -15px;
        border: 2px solid #fff;

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



/* Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3
   Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3
   Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3
   Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3
   Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3 Section3
*/

.section3 {
  width: 100%;
  height: 100%;
  margin-top: 5vh;

  .up {
    width: 100%;
    padding: 0 0 10vh 0;
    margin: 5vh 0 15vh 0;
    

    .top {
      width: 100%;
      border-radius: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px;
      padding: 0px 3vw;
    }
    .top-right {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .top > .top-right > button {
      padding: 1.6vw 3vw;
      font-size: 1.6vw;
      font-family: clashRegular;
      border-radius: 50px;
      background-color: transparent;
      border: 2px solid white;
      cursor: pointer;
      transition: background-color 0.5s, color 0.5s;
    }
    .top-right button:hover {
      background-color: #fff;
      color: #000;
    }
    .top > h1 {
      font-size: 9vw;
      font-family: clashSemiBold;
      text-transform: capitalize;
    }
    .top > .top-right > .img {
      width: 80px;
      height: 80px;
      border: 2px solid #fff;
      border-radius: 50px;
      background-color: transparent;
      background-image: url(Assets/imgs/rightArrowWhite.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 40px;
      font-size: 5vw;
      transition: background-color 0.5s, background-image 0.5s;
      cursor: pointer;
    }

    .top > .top-right > .img:hover {
      background-image: url(Assets/imgs/rightArrow.png);
      background-color: #fff;
    }

    .bottom {
      width: 100%;
      border-radius: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 100px;
      padding: 0px 3vw;
    }
    .left-p {
      width: 30%;
    }
    .left-p p {
      font-size: 1.6vw;
      font-weight: 100;
      font-family: clashLight;
      line-height: 1.5;
      font-style: italic;
      letter-spacing: 0.5px;
      opacity: 0.7;
      text-transform: capitalize;
    }
    .right-h1 h1 {
      font-size: 9vw;
      font-family: clashSemiBold;
    }
  }

  .diamond {
    width: 100%;
    margin: 0 0 25vw 0;
    position: relative;
    pointer-events: none;
  }

  hr {
    position: absolute;
    width: 79vw;
    background-color: #0f0e0e;
    height: 1px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }

  .diamond-img {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .diamond-img .img {
    position: relative;
    background-color: #130e0c;
    pointer-events: auto;
    cursor: pointer;
    z-index: 99;
    border-radius: 50%;

    h2 {
      position: absolute;
      left: 50%;
      font-size: 2vw;
      font-family: clashMedium;
      letter-spacing: 1px;
      color: #4c4846;
      top: 140%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      transition: color 0.5s;
    }

    img {
      width:10vw;
      border: 2px solid #a7a6a599;
      border-radius: 50%;
      padding: 2vw;
      background-color: #130e0c;
      opacity: 0.5;
      cursor: pointer;
      pointer-events: none;
      z-index: 999;
    }

    img:hover {
      transform: scale(1.4);
    }

    .center {
      opacity: 1;
      margin: 0 2vw;
      background-color: transparent;
      filter: drop-shadow(0 0 2rem #a7a6a56b) brightness(1.1);
      scale: 1.4;
      color: #fff;
      /* box-shadow: 0px 0px 25px #ffffff2f; */
    }

    .text {
      color: #fff;
    }
  }

  .img:hover h2 {
    color: #ffffffaa;
  }

  .circleLeft {
    height: .75vw;
    width: .75vw;
    background-color: #fff;
    /* border-radius: 50%; */
    transform: rotate(45deg) translate(-50%, -50%);
    position: absolute;
    top: 0.2vw;
    left: 10%;
  }
  .circleRight {
    height: .75vw;
    width: .75vw;
    background-color: #fff;
    /* border-radius: 50%; */
    transform: rotate(45deg) translate(-50%, -50%);
    position: absolute;
    top: 0.2vw;
    right: 10%;
  }
}

/* Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4
   Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4
   Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4
   Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4
   Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4 Section4
*/

.section4 {
  width: 100%;
  height: 130vh;
  background-color: #1d1d1d;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;

  .top {
    width: 100%;
    height: 25%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    h1 {
      font-family: clashSemiBold;
      font-size: 12vw;
      letter-spacing: 5px;
      color: transparent;
      background: linear-gradient(to right, #3b3b3b, #fff);
      background-clip: text;
    }
    h2 {
      font-family: clashSemiBold;
      font-size: 12vw;
      letter-spacing: 5px;
      color: transparent;
      background: linear-gradient(to left, #3b3b3b, #fff);
      background-clip: text;
    }

    span {
      position: absolute;
      width: 70px;
      height: 70px;
      border-radius: 50%;
    }

    #span1 {
      background-color: #926a54;
      left: 63.5%;
      top: 60%;
      transform: translate(-50%, -50%);
      z-index: 1;
      border: 2px solid #1d1d1d;
      background-image: url(Assets/imgs/section4design.png);
      background-repeat: no-repeat;
      background-size: 40px;
      background-position: center;
    }
    #span2 {
      background-color: #fff;
      left: 66%;
      top: 60%;
      transform: translate(-50%, -50%);
    }
  }

  .bottom {
    width: 100%;
    height: 55%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: end;
    overflow: hidden;

    .swiper {
      width: 32%;
      height: 90%;
      position: absolute;
      left: 50%;
      top: 65%;
      transform: translate(-50%, -50%);
    }

    .swiper-wrapper {
      position: relative;
      width: 32vw;
      height: 60vh;
      z-index: 1;
      display: flex;
      transition-property: transform;
      transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
      box-sizing: content-box;
  }
    .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      font-size: 22px;
      font-weight: bold;
      color: #fff;
      cursor: default;
    }

    .swiper-slide:nth-child(1n) {
      background-image: url("Assets/imgs/card1.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
    }

    .swiper-slide:nth-child(2n) {
      background-image: url("Assets/imgs/card2.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
    }

    .swiper-slide:nth-child(3n) {
      background-image: url("Assets/imgs/card3.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
    }

    .swiper-slide:nth-child(4n) {
      background-image: url("Assets/imgs/card4.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
    }

    .swiper-slide:nth-child(5n) {
      background-image: url("Assets/imgs/card5.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
    }

    .swiper-slide:nth-child(6n) {
      background-image: url("Assets/imgs/card6.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
    }

    .swiper-slide:nth-child(7n) {
      background-image: url("Assets/imgs/card7.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
    }

    .swiper-slide:nth-child(8n) {
      background-image: url("Assets/imgs/card8.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
    }

    .swiper-slide:nth-child(9n) {
      background-image: url("Assets/imgs/card9.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
    }

    .swiper-slide:nth-child(10n) {
      background-image: url("Assets/imgs/card10.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
    }

    .swiper-button-prev {
      width: 7vw;
      height: 4vw;
      border-radius: 50px;
      top: 50%;
      left: -85%;
      background-color: #000000;
      background-image: url("Assets/imgs/rightArrowWhite.png") !important;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 30px;
      transform: rotate(180deg);
      transition: background-color 0.5s, background-image 0.5s;
    }
    .swiper-button-prev:hover,
    .swiper-button-next:hover {
      background-color: #fff;
      background-image: url("Assets/imgs/rightArrow.png") !important;
    }
    .swiper-button-next {
      width: 7vw;
    height: 4vw;
      border-radius: 50px;
      top: 50%;
      position: absolute;
      right: -77%;
      background-color: #000000;
      background-size: 4vw;
      background-image: url("Assets/imgs/rightArrowWhite.png") !important;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 30px;
      transition: background-color 0.5s, background-image 0.5s;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
      content: "";
    }
  }

  .down {
    width: 100%;
    height: 20%;
    background-color: #000;

    .swiper {
      width: 30%;
      height: 90%;
      left: 15%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: visible;
    }

    .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      font-size: 22px;
      font-weight: bold;
      color: #fff;

      .text {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: default;
        opacity: 0.4;
        scale: 0.7;
        transition: opacity 1s, scale 1s;

        h1 {
          font-size: 3.5vw;
          font-family: clashRegular;
          font-weight: 900;
          letter-spacing: 2.5px;
        }
        i {
          font-size: 1.6vw;
          font-family: clashLight;
          font-weight: 400;
          letter-spacing: 2.5px;
          opacity: 0;
          transition: opacity 1s;
        }
      }
    }
    .swiper-slide-active > .text {
      opacity: 1;
      scale: 1;
    }
    .swiper-slide-active > .text > i {
      opacity: 1;
    }
  }
}
/* section5 section5 section5 section5 section5 section5 section5 section5 section5 section5 
section5 section5 section5 section5 section5 section5 section5 section5 section5 section5 
section5 section5 section5 section5 section5 section5 section5 section5 section5 section5  */

.section5 {
  width: 100%;
  height: 15vw;
  padding: 0 2%;
  margin-top: 10vh;

  .top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  .l p {
    font-size: 1vw;
    width: 20vw;
    text-align: start;
  }
  .r h1 {
    font-size: 12vw;
    font-family: clashSemiBold;
  }
}
/* section6 section6 section6 section6 section6 section6 section6 section6 section6 section6 
section6 section6 section6 section6 section6 section6 section6 section6 section6 section6 
section6 section6 section6 section6 section6 section6 section6 section6 section6 section6  */

.section6 {
  width: 100%;
  height: 100%;
  padding-bottom: 1.3vw;
  padding-top: 5vh;
  border-bottom: 1px solid #fff;

  .swiper {
    width: 100%;
    padding-top: 2.6vw;
    height: 47vw;
    /* background-color: red; */
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 17rem;
    height: 27rem;
    border-radius: 30px;
    background-color: transparent;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
    position: relative;
    opacity: 0.7;
    transition: 1s;
  }

  .swiper-slide h1 {
    position: absolute;
    left: 5%;
    top: 5%;
    border: 0.7px solid rgb(146, 146, 146);
    padding: 0.3rem 1rem;
    font-size: .8rem;
    font-family: clashLight;
    font-weight: 300;
    letter-spacing: 1px;
    border-radius: 30px;
    background-color: #6c6c6c4c;
    backdrop-filter: blur(40px);
  }
  .bot {
    background-color: rgba(3, 3, 3, 0.186);
    width: 100%;
    height: 20%;
    position: absolute;
    bottom: 0%;
    border-radius: 0px 0px 30px 30px;
    backdrop-filter: blur(4px);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bot p {
    font-size: 1.4rem;
    font-family: OfMedium;
    text-shadow: 1px 1px 10px #aaaaaa;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    transform: rotateX(15deg), rotateY(35deg);
    box-shadow: rgba(255, 255, 255, 0.4) 0px 2px 4px,
      rgba(255, 255, 255, 0.3) 0px 7px 13px -3px,
      rgba(255, 255, 255, 0.2) 0px -3px 0px inset;
    box-shadow: rgb(0, 0, 0) 0px -50px 36px -28px inset;
    background-position: start;
    background-size: cover;
  }
  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-left {
    background-image: none;
    background: #a9a9a900;
    opacity: 0.5;
  }

  .wh1 {
    cursor: pointer;
  }
  .swiper-slide .wh1:hover {
    background-image: url("Assets/imgs/nwh1.jpg");
  }
  .swiper-pagination-bullet {
    background: white;
    opacity: 0.7;
    color: white;
  }
  .swiper-pagination-bullet-active {
    opacity: 1;
    background: orangered;
  }
  .swiper-slide-active {
    transition-duration: 0ms;
    transform: translate3d(0px, 60px, 110px) rotateX(0deg) rotateY(0deg)
      scale(1) !important;
    z-index: 1;
    opacity: 1;
    height: 26rem;
  }

  .swiper-slide-next {
    transition-duration: 100ms;
    transform: translate3d(20px, -15px, 10px) rotateX(0deg) rotateY(-30deg) scale(0.9) !important;
    z-index: -1;
    height: 30rem;
    margin-right: 10px;
  }
  .swiper-slide-prev {
    transition-duration: 100ms;
    transform: translate3d(-20px, -15px, 10px) rotateX(0deg) rotateY(30deg)
      scale(0.9) !important;
    z-index: -1;
    height: 30rem;
    margin-left: 10px;
  }
  .swiper-slide .swiper-slide-visible .swiper-slide-fully-visible {
    transition-duration: 0ms;
    transform: translate3d(40px, -40px, -40px) rotateX(0deg) rotateY(341deg)
      scale(0.8) !important;
    z-index: -3 !important;
  }
  .swiper-button-next {
    position: absolute;
    left: 51%;
    top: 85%;
    background-color: #000000;
    background-image: url("Assets/imgs/rightArrowWhite.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    border: 1px solid #000;
    transition: background-color 0.5s, background-image 0.5s;
    width: 80px;
    height: 50px;
    border-radius: 50px;
  }
  .swiper-button-next:after,
  .swiper-rtl .swiper-button-prev:after {
    content: "next";
    opacity: 0;
  }
  .swiper-button-prev {
    position: absolute;
    left: 45%;
    top: 85%;
    width: 80px;
    height: 50px;
    border-radius: 50px;
    background-color: #c4c4c400;
    background-image: url("Assets/imgs/rightArrowWhite.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid white;
    background-size: 30px;
    transform: rotate(180deg);
    transition: background-color 0.5s, background-image 0.5s;
  }
  .swiper-button-prev::after,
  .swiper-rtl .swiper-button-next::after {
    content: "prev";
    opacity: 0;
  }
}
/* section7 section7 section7 section7 section7 section7 section7 section7 section7 section7 
section7 section7 section7 section7 section7 section7 section7 section7 section7 section7 
section7 section7 section7 section7 section7 section7 section7 section7 section7 section7  */

.section7 {
  width: 100%;
  height: 40vw;
  padding: 0 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 2vw;
    h1 {
      font-size: 10.5vw;
      font-family: clashMedium;
    }
    p {
      font-size: 1.7vw;
      font-family: clashMedium;
      opacity: .7;
      letter-spacing: 1px;
    }
  }
  .bot {
    width: 100%;
    /* height: 25vh; */
    display: flex;
    align-items: center;
    justify-content: end;
    h1 {
      font-size: 10vw;
      font-family: clashMedium;
    }
  }
}

/* section8 section8 section8 section8 section8 section8 section8 section8 section8 section8 
section8 section8 section8 section8 section8 section8 section8 section8 section8 section8 
section8 section8 section8 section8 section8 section8 section8 section8 section8 section8  */

.section8 {
  width: 100%;
  height: 100vh;
  .nc {
    width: 100%;
    height: 100%;
  }
  .swiper {
    width: 100%;
    height: 100%;
    /* background-color: lightblue; */
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: #fff; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 789px !important; */
    border-radius: 50px !important;
    /* width: 60%; */
    position: relative;
  }
  .box {
    width: 50%;
    height: 100vh;
    background-color: #0000007e;
    backdrop-filter: blur(20px) !important;
    color: white;
    position: absolute;
    right: 0;
    border-radius: 30px;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    padding: 5rem 2rem;

    p {
      text-align: start;
      margin-bottom: 10px;
    }
    .up {
      opacity: 0.7;
    }
    h1 {
      text-align: start;
      margin-bottom: 10px;
      font-family: clashMedium;
      font-size: 2.5rem;
    }
    h4 {
      text-align: start;
      margin-bottom: 10px;
      font-size: 1.3rem;
      opacity: 0.8;
      font-family: clashRegular;
      margin-top: 15px;
     
    }
    .upp {
      opacity: 0.8;
      font-family: clashRegular;
      width: 80%;
      margin-top: 15px;
      max-height: 31vh;
      overflow: hidden;
    }
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px !important;
  }

  .swiper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .swiper-button-next {
    position: absolute;
    left: 52%;
    top: 85%;
    background-color: #422f2f;
    background-image: url("Assets/imgs/rightArrowWhite.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    transition: background-color 0.5s, background-image 0.5s;
    width: 9vw;
    height: 8vh;
    border-radius: 50px;
    z-index: 6565;
  }
  .swiper-button-next:after,
  .swiper-rtl .swiper-button-prev:after {
    content: "next";
    opacity: 0;
  }
  .swiper-button-prev {
    position: absolute;
    left: 41%;
  top: 85%;
  width: 5vw;
  height: 8vh;
    border-radius: 50px;
    background-color: #b0b0b000;
    background-image: url("Assets/imgs/rightArrowWhite.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid white;
    background-size: 3vw;
    transform: rotate(180deg);
    transition: background-color 0.5s, background-image 0.5s;
  }
  .swiper-button-prev::after,
  .swiper-rtl .swiper-button-next::after {
    content: "prev";
    opacity: 0;
  }
}










/* section9 section9 section9 section9 section9 section9 section9 section9 section9 section9 
section9 section9 section9 section9 section9 section9 section9 section9 section9 section9 
section9 section9 section9 section9 section9 section9 section9 section9 section9 section9  */

.section9 {
  width: 100%;
  height: 40vh;
  padding: 0 2%;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: space-between;
  .top {
    width: 40%;
    height: 40vh;
    i {
      font-size: 5rem;
      opacity: 0.7;
      font-weight: 100;
      transition: all ease 1s;
    }
    i:hover {
      opacity: 1;
    }
    p {
      font-size: 1.7rem;
      width: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: clashLight;
    }
  }
  .bottom {
    /* background-color: darkblue; */
    width: 60%;
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .links {
      display: flex;
      align-items: center;
      justify-content: start;
      gap: 1.5rem;
      width: 100%;
      height: 50%;
      /* background-color: darkcyan; */
      flex-wrap: wrap;
      a {
        text-decoration: none;
        color: white;
        border: 2px solid gray;
        padding: 1rem 1.5rem;
        border-radius: 30px;
        font-size: 1rem;
        font-weight: 500;
        font-family: clashLight;
        transition: all ease 1s;
        letter-spacing: 1px;
      }
      .ourd {
        background-color: white;
        color: black;
        font-weight: 600;
        border: 2px solid black;
      }
      a:hover {
        background-color: rgb(255, 255, 255);
        color: rgb(0, 0, 0);
        border: 2px solid rgb(0, 0, 0);
      }
    }
  }
}

/* section10 section10 section10 section10 section10 section10 section10 section10 section10 
section10 section10 section10 section10 section10 section10 section10 section10 section10 
section10 section10 section10 section10 section10 section10 section10 section10 section10  */

.section10 {
  width: 100%;
  height: 62vh;
  padding: 0 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: sandybrown; */
  h3 {
    font-size: 3rem;
    width: 60%;
    height: 100%;
    text-align: center;
    font-family: clashXLight;
  }
  .ri-vip-diamond-fill {
    color: orangered;
    font-size: 4rem;
  }
  .ri-service-line {
    color: red;
    font-size: 4rem;
  }
}
.s10img{
  height: 20%;
}

/* section11 section11 section11 section11 section11 section11 section11 section11 section11 
section11 section11 section11 section11 section11 section11 section11 section11 section11 
section11 section11 section11 section11 section11 section11 section11 section11 section11  */

.section11 {
  width: 100%;
  margin-top: 5rem;
  height: 30vh;
  /* padding: 0 2%; */
  .brand {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 2rem;
    border-bottom: 2px solid rgb(255, 255, 255);
    border-top: 2px solid rgb(255, 255, 255);

    /* padding: 2rem; */
  }
  .brand img {
    height: 50px;
  }
  i {
    font-size: 7rem;
    font-weight: 50;
  }
}


/* section12 section12 section12 section12 section12 section12 section12 section12 
section12 section12 section12 section12 section12 section12 section12 section12 
section12 section12 section12 section12 section12 section12 section12 section12  */

.section12 {
  width: 100%;
  /* margin-top: 5rem; */
  height: 70vh;
  padding: 0 2%;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* background-color: saddlebrown; */
  .topp {
    width: 100%;
    height: 30vh;
    /* background-color: rgb(255, 135, 88); */
    h1 {
      font-size: 4.6rem;
      font-family: clashMedium;
      letter-spacing: 2px;
    }
  }
  .mid {
    width: 100%;
    height: 30vh;
    /* background-color: sandybrown; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    .l {
      width: 50%;
      height: 100%;
      /* background-color: indianred; */
      display: flex;
      align-items: center;
      justify-content: start;
      .input-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 2vw;
        width: 500px;
        height: 70px;
        /* padding: 0rem 0.2rem; */
        background-color: rgb(73, 73, 73);
        border-radius: 50px;
        .email {
          width: 80%;
          background-color: transparent;
          border: none;
          outline: none;
          letter-spacing: 1px;
        }
        .email::placeholder {
          padding: 1.1rem;
          letter-spacing: 2px;
          color: white;
          opacity: 0.7;
          font-family: clashLight;
        }
        .ass {
          width: 100%;
          height: 100%;
          border-radius: 50px;
        }
        button{
          width: 64px;
          height: 64px;
          border: none;
          background-color: transparent;
          border-radius: 50px;
          margin-right: 4px;
          cursor: pointer;
        }
      }
    }
    .r {
      width: 50%;
      height: 100%;
      /* background-color: rgb(161, 93, 93); */
      text-align: start;
      align-items: center;
      display: flex;

      p {
        width: 70%;
        font-size: 2rem;
        font-family: clashLight;
      }
    }
  }
  .bot {
    width: 100%;
    height: 10vh;
    /* background-color: seagreen; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      p {
        font-size: 1.3rem;
      }
    }
    .right {
      /* padding: 3rem; */
      a {
        text-decoration: none;
        border: 2px solid gray;
        padding: 1rem 1.9rem;
        border-radius: 40px;
      }
      a:hover {
        background-color: white;
        color: rgb(0, 0, 0);
        transition: 0.5s;
      }
    }
  }
}