@import url('../fonts/font-style.css');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gilroy';
    color: #000;

}

html {
    scroll-behavior: smooth;
}

ul,
li,
ol {
    list-style: none;
}

img {
    max-width: 100%;
}

button,
a {
    cursor: pointer;
}

input:focus,
input:focus-visible,
input:focus-within,
button:focus,
button:focus-visible,
button:focus-within,
textarea:focus,
textarea:focus-visible,
textarea:focus-within {
    outline: unset;
    box-shadow: unset;
}

* {
    padding: 0;
    margin: 0;
}

.container {
    margin: auto;
    padding: 0 20px;
}
.toggle-btn.active{
    /* right: 265px; */
    right: 20px;
    top: 20px;
}
.toggle-btn.active span {
  /* background: #fff; */
}
.toggle-btn.active span:nth-child(2){
   visibility: hidden;
}
.toggle-btn.active span:nth-child(1){
    transform: translateY(12px) rotate(45deg);
}
.toggle-btn.active span:nth-child(3){
        transform: translateY(-11px) rotate(-45deg);
}
.line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/*  STYLING START */
/*  STYLING FINISHED */

/* @layer utilities {
    @keyframes spin-slow {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .rotate-slow-clock-wise  {
      animation: spin-slow 40s linear infinite;
    }
  }

  @layer utilities {
    @keyframes spin-slow {
      from {
        transform: rotate(360deg);
      }
      to {
        transform: rotate(0deg);
      }
    }
    .rotate-slow-anti-clock-wise {
      animation: spin-slow 40s linear infinite;
    }
  } */


  @layer utilities {
    @keyframes spin-clockwise {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    @keyframes spin-counterclockwise {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(-360deg);
      }
    }
    
    .rotate-slow-clock-wise {
      animation: spin-clockwise 40s linear infinite;
    }
    
    .rotate-slow-anti-clock-wise {
      animation: spin-counterclockwise 40s linear infinite;
    }
  }

  


  /*.kit-img-btn-box button {
    border: 3px solid transparent 
  }
  .kit-img-btn-box button.active {
    border: 3px solid #ffffffa6 
  }*/
  .shop-button img {
    
    transition: all ease-out .2s;
    position: absolute;
    right:10px;
    transform: translateX(-60px);

}
.shop-button:hover img {
  transform: translateX(0);
}
.shop-button .text-and-img {
    margin-left: 8px;
    overflow: hidden;
    position: relative;
}
span.text-and-img {
    display: inline-flex;
    align-items: center;
    width: 60px;
  transition: all ease-out .2s;
}
span.text-and-img span {
    color: #fff;
    transition: all ease-out .2s;
}
.shop-button:hover span.text-and-img span {
  transform: translateX(60px);
}

.work-btn .shop-button .text-and-img {
  width: 70px;
}
.work-btn .shop-button:hover span.text-and-img span {
  transform: translateX(70px);
}

.moving-text-right-to-left{
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.inner-moving-text {
  
  margin-right: 5px;
}

.inner-moving-text:hover{animation: text-marquee-left 22s linear infinite;}

.stock-div {
  width: 170px;
}
@keyframes text-marquee-left {

  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-100%);
  }
  
}

.hover_arrow{position:relative;}
.hover_arrow .hover_visible_arrow{position:absolute; opacity:0; transition:all ease 0.2s; width:40px; right:68px;}
.hover_arrow:hover .hover_visible_arrow{right:28px; opacity:1;}
.hover_arrow:hover{padding-right:80px;}