body {
       font-family: 'Poppins', sans-serif;
      background-color: #0d0d0d;
      color: #f1f1f1;
    }
    .navbar {
      background-color: #0d0d0d;
    }
    .hero {
      min-height: 90vh;
      display: flex;
      align-items: center;
      background: #0d0d0d
    }
    .btn-primary {
      background-color: #6c5ce7;
      border: none;
    }
    .card {
      background-color: #141414;
      border: none;
    }
    .card i {
      font-size: 40px;
      color: #6c5ce7;
    }

    .boxborder {
        margin: 10px 10px;
        border: #fff solid 4px;
        border-radius: 3px;
    }

   /* button  arrow */
.aa {
  color: #969696;
  text-decoration: none;
}
.image-hover-container {
    border: 0.2px solid #242424;
    border-radius: 5%;
    margin-top: 2px;
    margin-bottom: 2px;
}
.image-hover-container .default-img {
    display: block;

}

.image-hover-container .hover-img {
    display: none;
}

/* Hover states */
.image-hover-container:hover .default-img {
    display: none;
}

.image-hover-container:hover .hover-img {
    display: block;
}


.qty-wrapper{
    margin:20px 0;
    display:flex;
    align-items:center;
    gap:15px;
}

.qty-wrapper label{
    color:#fff;
    font-size:18px;
    font-weight:600;
}

.qty-input{
    width:80px;
    padding:10px;
    background:#000;
    border:1px solid #fff;
    color:#fff;
    font-size:18px;
    text-align:center;
}

.mouse_scroll {
	display:block;
	margin: 0 auto;
	width: 24px;
	height: 100px;
	margin-top: 45px;
    position: absolute;
    bottom: 0;
    left:50%;
     transform: translate(-50%, -50%);
}

.collbtn {
  display: inline-block;
  width: 100%;
  margin: 10px 10px;
  color: #6c7579;
  border-bottom: #242424 0.2px solid;
  text-decoration: none;
}

.collbtn:hover {
  color: #fff;
}

.modal-content
  {
    background-color: #000 !important;
     border: #242424 0.2px solid;
  }

.modal-header {
  border-bottom: #000 1px none !important;
}

.modal-footer {
  border-top: #000 1px none !important;
}
.m_scroll_arrows
{
  display: block;
  width: 5px;
  height: 5px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
   
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  margin: 0 0 3px 4px;
  
  width: 16px;
  height: 16px;
}


.unu
{
  margin-top: 1px;
}

.unu, .doi, .trei
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
  
}

.unu
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}

.doi
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .2s;
  animation-direction: alternate;
  
  margin-top: -6px;
}

.trei
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .3s;
  animation-direction: alternate;
  
  
  margin-top: -6px;
}

.mouse {
  height: 42px;
  width: 24px;
  border-radius: 14px;
  transform: none;
  border: 2px solid white;
  top: 170px;
}

.wheel {
  height: 5px;
  width: 2px;
  display: block;
  margin: 5px auto;
  background: white;
  position: relative;
  
  height: 4px;
  width: 4px;
  border: 2px solid #fff;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}

.wheel {
  -webkit-animation: mouse-wheel 0.6s linear infinite;
  -moz-animation: mouse-wheel 0.6s linear infinite;
  animation: mouse-wheel 0.6s linear infinite;
}

@-webkit-keyframes mouse-wheel{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-moz-keyframes mouse-wheel {
  0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}
@-o-keyframes mouse-wheel {

   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}
@keyframes mouse-wheel {

   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}

.svgback
{
  background-image: url('../../img/m-logo-icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* or cover */
}

.btn-black {
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 0%;
}

.btn-black:hover {
  background-color: #fff;
  color: #000;
  border-color: #fff;
}

.btn-black:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.4);
}
    footer {
      background-color: #000;
    }


    @keyframes fade-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card2 {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% entry 40%; /* animate only as it enters */
}