*,
*:before,
*:after {
  /* margin: 0; */
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;

  font-size: 62.5%;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  background-color: #000;
  color: #fff;
}

img {
  vertical-align: middle;
}

a {
  text-decoration: none;
}

@media only screen and (max-width: 800px) {
  html {
    font-size: 57%;
  }
}

@media only screen and (max-width: 1000px) {
  body {
    padding: 0;
  }
}

/* photoselection css  */
.landingpage {
  margin: 0 auto;
  padding: 0 80px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #1f1d2b;
}

.landingpage::before {
  content: "";
  position: absolute;
  width: 123px;
  height: 123px;
  left: 60%;
  top: 138px;
  filter: blur(90px);
  background-color: #fb37ff;
}

.landingpage::after {
  content: "";
  position: absolute;
  width: 123px;
  height: 123px;
  left: 80%;
  top: 550px;
  background-color: #18b2de;
  filter: blur(80px);
}

.landingpage .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  width: 100%;
}

.landingpage .box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 80px;
}

.landingpage .auction {
  margin-top: 100px;
}

.landingpage .discover {
  display: flex;
  flex-direction: column;
}

.landingpage .footer {
  margin: 50px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landingpage .footer2 {
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
  border-top: 1px solid #f2f2f2;
}

.navbar .hamburgerlogowrap {
  display: flex;
  align-items: center;
}

.navbar .hamburger {
  display: none;
  color: #d7d7d7;
  background-color: #1f1d2b;
  border: none;
  margin-right: 10px;
}

.navbar .createbtn {
  cursor: pointer;
  background-color: transparent;
  border: none;
  width: 126px;
  height: 45px;
  color: #bcbcbc;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
}

.navbar .createbtn.selectedbtn {
  border: 1px solid #d7d7d7;
  border-radius: 10px;
}

.navbar .navlogo {
  height: 100%;
  background: linear-gradient(93.51deg, #9b51e0 2.84%, #3081ed 99.18%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
}

.navbar .navlink {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #bcbcbc;
}

.navbar .navlink.selectedlink:hover {
  background: linear-gradient(93.51deg, #9b51e0 2.84%, #3081ed 99.18%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 1.5px solid #9b51e0;
  text-decoration: none;
}

.navbar .navlink.default {
  background: linear-gradient(93.51deg, #9b51e0 2.84%, #3081ed 99.18%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 1.5px solid #9b51e0;
  text-decoration: none;
}

.navbar .navlink:not(:last-child) {
  margin-right: 32px;
}


.footer-main {
  max-width: 40%;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  line-height: 40px;
  color: #ffffff;
}

.footer-navigate {
  display: flex;
}

.footer-navigate .nav {
  margin-left: 60px;
}

.footer-navigate .nav h5 {
  margin: 0;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #ffffff;
}

.footer-navigate .nav p {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.03em;
  color: #d7d7d7;
}

.footer2 p {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 36px;
  color: #828282;
}

/* --------------------------------- */


/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

.mySlides img {
  width: 100%;
  height: 500px;
  object-fit: contain;
  overflow: hidden;
}

.marker-accept {
  position: absolute;
  left: 95%;
  top: 13px;
  z-index: 2;
  width: 64px;
  height: 64px;
  object-fit: cover;
  overflow: hidden;
  background-image: url("../assets/svg/accept.svg");
}

.marker-reject {
  position: absolute;
  left: 95%;
  top: 13px;
  z-index: 2;
  width: 48px;
  height: 48px;
  object-fit: cover;
  overflow: hidden;
  background-image: url("../assets/svg/reject.svg");
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 22px 12px;
  position: absolute;
  top: 0;
}

#gallery {
  padding: 10px;
}

/* Container for image text */
.caption-container {
  text-align: center;
  padding: 2px 16px;
  color: white;
  margin-top: 15px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
  height: 145px;
  overflow: hidden;
}

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

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.3;
}

.active,
.demo:hover {
  opacity: 1;
}

/* Reset Button For Photo Selection */
.Btn-reset {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: rgb(27, 27, 27);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
}

.svgIcon {
  fill: white;
}

.icon2 {
  width: 18px;
  height: 5px;
  border-bottom: 2px solid white;
  border-left: 2px solid white;
  border-right: 2px solid white;
}

.tooltip {
  position: absolute;
  right: 60px;
  opacity: 0;
  background-color: rgb(12, 12, 12);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: .2s;
  pointer-events: none;
  letter-spacing: 0.5px;
}

.tooltip::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background-color: rgb(12, 12, 12);
  background-size: 1000%;
  background-position: center;
  transform: rotate(45deg);
  left: -5%;
  transition-duration: .3s;
}

.Btn-reset:hover .tooltip {
  opacity: 1;
  transition-duration: .3s;
}

.Btn-reset:hover {
  background-color: rgb(150, 94, 255);
  transition-duration: .3s;
}

.Btn-reset:hover .icon2 {
  border-bottom: 2px solid rgb(235, 235, 235);
  border-left: 2px solid rgb(235, 235, 235);
  border-right: 2px solid rgb(235, 235, 235);
}

.Btn-reset:hover .svgIcon {
  fill: rgb(255, 255, 255);
  animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}


/**
* ----------------------------------------
* After PhotoSelection Displayed Css
* ----------------------------------------
*/

.alert>.start-icon {
  margin-right: 0;
  min-width: 20px;
  text-align: center;
}

.alert>.start-icon {
  margin-right: 5px;
}

.greencross {
  font-size: 18px;
  color: #25ff0b;
  text-shadow: none;
}

.alert-simple.alert-success {
  border: 1px solid rgba(36, 241, 6, 0.46);
  background-color: rgba(7, 149, 66, 0.12156862745098039);
  box-shadow: 0px 0px 2px #259c08;
  color: #0ad406;
  text-shadow: 2px 1px #00040a;
  transition: 0.5s;
  cursor: pointer;
}

.alert-success:hover {
  background-color: rgba(7, 149, 66, 0.35);
  transition: 0.5s;
}

.alert-simple.alert-info {
  border: 1px solid rgba(6, 44, 241, 0.46);
  background-color: rgba(7, 73, 149, 0.12156862745098039);
  box-shadow: 0px 0px 2px #0396ff;
  color: #0396ff;
  text-shadow: 2px 1px #00040a;
  transition: 0.5s;
  cursor: pointer;
}

.alert-info:hover {
  background-color: rgba(7, 73, 149, 0.35);
  transition: 0.5s;
}

.blue-cross {
  font-size: 18px;
  color: #0bd2ff;
  text-shadow: none;
}

.alert-simple.alert-warning {
  border: 1px solid rgba(241, 142, 6, 0.81);
  background-color: rgba(220, 128, 1, 0.16);
  box-shadow: 0px 0px 2px #ffb103;
  color: #ffb103;
  text-shadow: 2px 1px #00040a;
  transition: 0.5s;
  cursor: pointer;
}

.alert-warning:hover {
  background-color: rgba(220, 128, 1, 0.33);
  transition: 0.5s;
}

.warning {
  font-size: 18px;
  color: #ffb40b;
  text-shadow: none;
}

.alert-simple.alert-danger {
  border: 1px solid rgba(241, 6, 6, 0.81);
  background-color: rgba(220, 17, 1, 0.16);
  box-shadow: 0px 0px 2px #ff0303;
  color: #ff0303;
  text-shadow: 2px 1px #00040a;
  transition: 0.5s;
  cursor: pointer;
}

.alert-danger:hover {
  background-color: rgba(220, 17, 1, 0.33);
  transition: 0.5s;
}

.danger {
  font-size: 18px;
  color: #ff0303;
  text-shadow: none;
}

.alert-simple.alert-primary {
  border: 1px solid rgba(6, 241, 226, 0.81);
  background-color: rgba(1, 204, 220, 0.16);
  box-shadow: 0px 0px 2px #03fff5;
  color: #03d0ff;
  text-shadow: 2px 1px #00040a;
  transition: 0.5s;
  cursor: pointer;
}

.alert-primary:hover {
  background-color: rgba(1, 204, 220, 0.33);
  transition: 0.5s;
}

.alertprimary {
  font-size: 18px;
  color: #03d0ff;
  text-shadow: none;
}

.square_box {
  position: absolute;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top-left-radius: 45px;
  opacity: 0.302;
}

.square_box.box_three {
  background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
  background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
  background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
  opacity: 0.059;
  left: -80px;
  top: -60px;
  width: 500px;
  height: 500px;
  border-radius: 45px;
}

.square_box.box_four {
  background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
  background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
  background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
  opacity: 0.059;
  left: 150px;
  top: -25px;
  width: 550px;
  height: 550px;
  border-radius: 45px;
}

.alert:before {
  content: '';
  position: absolute;
  width: 0;
  height: calc(100% - 44px);
  border-left: 1px solid;
  border-right: 2px solid;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  height: 20px;
}

.fa-times {
  -webkit-animation: blink-1 2s infinite both;
  animation: blink-1 2s infinite both;
}


/**
* ----------------------------------------
* animation blink-1
* ----------------------------------------
*/
@-webkit-keyframes blink-1 {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes blink-1 {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

/* Button */
.gallary-btn {
  position: relative;
  padding: 0;
  width: 135px;
  height: 65px;
  background: transparent;
  font-size: 17px;
  border: 1px solid #ffffff1c;
  border-radius: 8px;
  box-shadow: inset 0 0 10px #ffffff1c;
}

.gallary-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 135px;
  height: 65px;
  background: radial-gradient(circle at 100% -50%, #ffffff69 45%, #d4d4d44f 60%, #ffffff36 2%);
  /* background-size: 200%; */
  background-repeat: no-repeat;
  filter: opacity(.3) blur(.3em);
}

.gallary-btn::after {
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
  height: 100%;
  width: 100%;
  background-color: #fbfd7b;
  filter: blur(2em);
  opacity: 0;
  pointer-events: none;
}

.gallary-btn p {
  display: inline-block;
  width: 135px;
  line-height: 65px;
  font-size: 17px;
  font-weight: 900;
  color: #d6d6d6;
  filter: blur(.02em);
  z-index: 5;
}

.gallary-btn .svg-1 {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(0, -50%) rotate(45deg);
  width: 2.5rem;
  height: auto;
  filter: blur(.1rem) opacity(.5);
  z-index: -5;
}

.fil0 {
  fill: #935E28
}

.gallary-btn:hover {
  filter: blur(.05em);
  animation: lightBox 1s ease-in-out forwards;
}

.gallary-btn:hover::after {
  animation: light 1s ease-in-out forwards;
}

.gallary-btn:hover p {
  animation: lightText 1s ease-in-out forwards;
}

@keyframes lightBox {
  0% {
    border: 1px solid #fbfd7b;
    box-shadow: 0 0 5px 0px #fbfd7b8a, inset 0 0 10px #fbfd7b8a;
  }

  20% {
    border: 1px solid #ffffff1c;
    box-shadow: none;
  }

  30% {
    border: 1px solid #fbfd7b;
    box-shadow: 0 0 10px 0px #fbfd7b8a, inset 0 0 15px #fbfd7b8a;
  }

  38% {
    border: 1px solid #ffffff1c;
    box-shadow: none;
  }

  45% {
    border: 1px solid #fbfd7b;
    box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 20px #fbfd7b8a;
  }

  50% {
    border: 1px solid #ffffff1c;
    box-shadow: none;
  }

  53% {
    border: 1px solid #fbfd7b;
    box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;
  }

  65% {
    border: 1px solid #ffffff1c;
    box-shadow: none;
  }

  100% {
    border: 1px solid #fbfd7b;
    box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;
  }
}

@keyframes light {
  0% {
    opacity: .7;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: .7;
  }

  38% {
    opacity: 0;
  }

  45% {
    opacity: .7;
  }

  50% {
    opacity: 0;
  }

  53% {
    opacity: .7;
  }

  65% {
    opacity: 0;
  }

  100% {
    opacity: .7;
  }
}

@keyframes lightText {
  0% {
    color: #fbfd7b;
    text-shadow: 0 0 5px #fbfd7b8a;
  }

  20% {
    color: #ffffff;
    text-shadow: none;
  }

  30% {
    color: #fbfd7b;
    text-shadow: 0 0 10px #fbfd7b8a;
  }

  38% {
    color: #ffffff;
    text-shadow: none;
  }

  45% {
    color: #fbfd7b;
    text-shadow: 0 0 15px #fbfd7b8a;
  }

  50% {
    color: #ffffff;
    text-shadow: none;
  }

  53% {
    color: #fbfd7b;
    text-shadow: 0 0 15px #fbfd7b8a;
  }

  65% {
    color: #ffffff;
    text-shadow: none;
  }

  100% {
    color: #fbfd7b;
    text-shadow: 0 0 15px #fbfd7b8a;
  }
}