/*
 * Globals
 */


/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {
  margin: 0px;
  /*text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);*/
  box-shadow: inset 0 0 5rem rgba(0, 255, 255, .5);
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  background: rgba(199, 244, 100, 0.3) !important;
  padding: 30px;
  top: auto;
  margin-bottom: 13em;
  border-radius: 20px;
  z-index: 10;
}

.carousel-indicators {
  bottom: 10em; 
  z-index: 99;
}

.carousel-indicators [data-bs-target] {
  background: #FFFFFF;
}

.carousel-indicators .active {
  background-color: #C7F464;
}

/* Declare heights because of positioning of img element */
/*.carousel-item {
  height: 32rem;
}*/

button.carousel-control-prev, button.carousel-control-next {
  display: none;
  top: 40%;
  margin-left: 20px;
  margin-right: 20px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: none; /*1px solid #C7F464;*/
  background: rgba(199, 244, 100, 0.3); 
  color: #C7F464;
  box-shadow: 0 0 10px #C7F464;
}

button.carousel-control-prev span, button.carousel-control-next span {
  font-size: 18px !important;
  padding: 5px;
  margin-top: 5px;
}

.carousel:hover button.carousel-control-prev, .carousel:hover button.carousel-control-next {
  display: block !important;
  animation: fadein .7s ease-in forwards;
  z-index: 99;
}


.carousel-inner .carousel-item, .carousel-inner .carousel-item img{
  height: 100vh !important;
  width: 100% !important;
}

.carousel-inner .carousel-item::before, .carousel-inner .carousel-item img::before{
  content: "";
  background: #000000;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  /*height: 100vh !important;*/
  width: 100% !important;
  opacity: 0.5;
  z-index: 9;
}


.btn-signup{
  background: #000000;
  background-image: linear-gradient(to top, #000000, #C7F464);
  color: #C7F464;
  border: .5px solid #C7F464 !important;
  padding: 14px 45px;
  text-transform: uppercase;
}

.btn-signup-outline{
  background: none !important;
  border: 1px solid #C7F464 !important;
  color: #C7F464;
  padding: 14px 45px;
  text-transform: uppercase;
}


.btn-top{
  background: #000000;
  background-image: linear-gradient(to top, #000000, #C7F464);
  color: #C7F464;
  border: .5px solid #C7F464 !important;
  text-transform: uppercase;
}

.btn-top-outline{
  background: none !important;
  border: 1px solid #C7F464 !important;
  color: #C7F464;
  text-transform: uppercase;
}

.btn-top-outline:hover, .btn-top:hover{
  color: #FFFFFF !important;
}


a.text-primary {
  text-decoration: none !important;
}


.text-primary {
  color: #C7F464 !important;
}

.text-primary-3 {
  color: #f15f2a !important;
}

.border-primary {
  border: 4px solid #C7F464 !important;
}

.border-primary-3 {
  border: 1px solid #f15f2a !important;
}

input[name="transpin1"]::placeholder, input[name="transpin2"]::placeholder, input[name="transpin3"]::placeholder, input[name="transpin4"]::placeholder, input[name="transpin5"]::placeholder, input[name="transpin6"]::placeholder {
  color: #cccccc;  
}

input[name="transpin1"], input[name="transpin2"], input[name="transpin3"], input[name="transpin4"], input[name="transpin5"], input[name="transpin6"] {
 width: 60px !important; 
 height: 54px !important;
 font-size: 35px !important;
}

input[name="otp1"], input[name="otp2"], input[name="otp3"], input[name="otp4"], input[name="otp5"], input[name="otp6"] {
 font-size: 28px !important;
 width: 45px !important; 
 height: 45px !important; 
}

  /* RESPONSIVE CSS
  -------------------------------------------------- */

/* Bump up size of carousel content */
@media (max-width: 767px) {
  .carousel-item > .container {
    min-width: 100% !important;
  }

  .carousel-caption {
    left: 0px;
    margin-bottom: 10em;
    min-width: 100% !important;
    border-radius: 0px;
  }


  .carousel-inner .carousel-item img{
    height: 100vh !important;
    width: 100% !important;
  }

  button.carousel-control-prev, button.carousel-control-next {
    margin-left: 10px;
    margin-right: 10px;
    width: 45px;
    height: 45px;
  }

  .carousel-indicators {
    bottom: 8em; 
  }

  .carousel-caption h1 {
    font-size: 1.4rem;
  }

  .carousel-caption p {
    font-size: .9rem;
  }


  .btn-signup{
    padding: 10px 30px;
  }

  .btn-signup-outline{
    padding: 10px 30px;
  }

  input[name="transpin1"], input[name="transpin2"], input[name="transpin3"], input[name="transpin4"], input[name="transpin5"], input[name="transpin6"] {
     width: 54px !important; 
     height: 54px !important;
    font-size: 36px !important;
  }
}

@media (min-width: 768px) {
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
}

@keyframes fadein{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0.5;
  }
  100%{
    opacity: 1;
  }
}


.preloader{
  display:-ms-flexbox;
  display:flex;
  background-color:#f4f6f9;
  height:100vh;
  width:100%;
  transition:height .2s linear;
  position: fixed;
  left:0;top:0;
  z-index:9999
}
.dark-mode .preloader{
  background-color:#454d55!important;
  color:#fff
}

.divider {
  margin: 30px auto;
  color: white !important;
  text-align: center;
  background: transparent;
  font-style: italic;
  font-size: 18px;
}

.divider:before {
  content: "";
  position: absolute;
  left: 30px;
  margin-top: 12px;
  border-bottom: 2px solid white !important;
  width: 38%;
  z-index: 99;
}


.divider:after {
  content: "";
  position: absolute;
  right: 30px;
  margin-top: 12px;
  border-bottom: 2px solid white !important;
  width: 38%;
  z-index: 99;
}