* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background-color: white;
}

::-webkit-scrollbar-thumb {
  background: #0d0fc6;
  border-radius: 10px;
  border: 4px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #0d0fc6;
  width: 15px !important;
}
.navbar-brand img{
  width: 200px;
}
.stripe{
  width: 30px;
}
.side-img{
  width: 100%;
}

/* SIDEBAR */
#sidebar {
  position: fixed;
  top: 0;
  padding: 0 !important;
  left: 0;
  width: 0;
  height: 100%;
  background: #fff;
  z-index: 2000 !important;
  transition: 0.3s ease;
  overflow-x: hidden;
  scrollbar-width: none;
  color: white;
}
#sidebar.show {
  width: 300px;
  visibility: visible;
}
#sidebar.hide {
  width: 0px;
  visibility: hidden;
}
#sidebar .brand {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-left: 20px;
}
#sidebar .brand span {
  font-size: 22px;
  color: white;
}
#sidebar .brand .bx {
  min-width: 60px;
  display: flex;
  justify-content: center;
}
.side-menu {
  margin-top: 3vh !important;
}
.bottom-side-menu {
  margin-top: 7vh !important;
}
.side-menu a {
  color: black;
  text-decoration: none;
  font-size: 13px;
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
}
.side-menu i {
  font-size: 15px !important;
}
.side-nav-button {
  display: grid !important;
  margin-top: 20px !important;
}
.side {
  margin-top: 10px;
}
.active {
  background: linear-gradient(
    257.87deg,
    #ff4000 0.07%,
    #be2f31 43.5%,
    #0400be 128.48%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: bold;
}
.side-menu a:hover {
  background: linear-gradient(
    257.87deg,
    #ff4000 0.07%,
    #be2f31 43.5%,
    #0400be 128.48%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
/* SIDEBAR */

.stripe {
  cursor: pointer;
  margin-right: 20px;
}
.navbar {
  border-bottom: 1px solid #d2d2d2;
  background: #fff;
}
.input {
  width: 300px !important;
  border-radius: 20px 0 0 20px !important;
  padding-left: 30px !important;
}
.input:focus {
  box-shadow: none !important;
}
.input-group-text {
  border-radius: 0 20px 20px 0 !important;
  background: linear-gradient(
    257.87deg,
    #ff4000 0.07%,
    #be2f31 43.5%,
    #0400be 128.48%
  ) !important;
  cursor: pointer;
}
.input-group-text i {
  padding: 0 7px;
}
.btn-login {
  background: linear-gradient(
    257.87deg,
    #ff4000 0.07%,
    #be2f31 43.5%,
    #0400be 128.48%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.btn-register {
  background: linear-gradient(
    257.87deg,
    #ff4000 0.07%,
    #be2f31 43.5%,
    #0400be 128.48%
  );
  color: white !important;
  border: none !important;
  font-size: 14px !important;
}
.btn-soon {
  background: white !important;
  color: #0400be !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 70px !important;
  margin-top: 10px;
}
.soon{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 50%;
}
.soon div{
  width: 100% !important;
}
.buttons {
  display: flex;
  gap: 50px;
  align-items: center;
}
.facebook {
  background: #0d0fc6;
  color: white;
  padding: 7px 40px !important;
  border-radius: 5px;
  width: 88%;
}
.view-all {
  background: linear-gradient(
    257.87deg,
    #ff4000 0.07%,
    #be2f31 43.5%,
    #0400be 128.48%
  );
  color: white !important;
  border: none !important;
  font-size: 14px !important;
  text-align: center;
  padding: 7px 0px !important;
  border-radius: 5px;
  width: 10%;
  cursor: pointer;
}
.row-div {
  display: flex;
  justify-content: space-between;
}
.stock p {
  font-size: 18px;
  /* font-weight: bold; */
  font-weight: 500;
  color: gray;
}
.stock span {
  color: black;
}
.log-container {
  background: white;
  padding: 20px 30px !important;
  /* width: 32% !important; */
  border-radius: 7px !important;
  border: 1px solid transparent;
  border-image: linear-gradient(
    257.87deg,
    #ff4000 0.07%,
    #be2f31 43.5%,
    #0400be 128.48%
  );
  border-image-slice: 1;
}

.catalog-item__link{
  text-decoration: none;
  font-weight: 500;
  color:  #0400be;
}

.log {
  display: flex;
  /* justify-content: space-evenly; */
  margin-top: 40px !important;
}
.stock-button {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.btn-button {
  background: linear-gradient(
    257.87deg,
    #ff4000 0.07%,
    #be2f31 43.5%,
    #0400be 128.48%
  );
  color: white !important;
  border: none !important;
  font-size: 13px !important;
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  outline: none !important;
}

.btn-view-button {
  background: linear-gradient(
    257.87deg,
    #ff4000 0.07%,
    #be2f31 43.5%,
    #0400be 128.48%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 13px !important;
}
.eye-icon {
  background: linear-gradient(
    257.87deg,
    #ff4000 0.07%,
    #be2f31 43.5%,
    #0400be 128.48%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  padding-right: 10px;
}
footer {
  height: 100%;
  background: #0d0fc6;
  padding: 50px 0;
}
.socials {
  display: flex;
  gap: 20px;
}
.socials img {
  width: 80%;
}
.head-links {
  color: white;
  padding-bottom: 10px;
  margin-bottom: 25px;
  position: relative;
  font-size: 20px;
  font-weight: bold;
}
.useful a {
  color: white !important;
  text-decoration: none !important;
  font-size: 17px !important;
}
.useful a span {
  padding-left: 10px !important;
}
.useful a:hover {
  text-decoration: underline !important;
  color: #ff4000 !important;
}
.head-links::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 3px;
  left: 0;
  bottom: 0;
  background: #ff4000;
}
.below-text {
  padding-top: 70px;
}
.close {
  background: #0400be;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 20%;
}
.xx {
  padding-top: 20px !important;
  width: 10%;
  cursor: pointer;
}
.login-button {
  display: none;
}
.mobile-search {
  display: none !important;
}
.dropdown {
  display: none !important;
}
.banner {
  margin: 30px 0;
}
.rules {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}
.rules a {
  color: white !important;
  font-size: 14px !important;
}

@media screen and (max-width: 576px) {
  .copy{
    text-align: center !important;
  }
  .rules{
    text-align: center !important;
    text-align: center !important;
    justify-content: center;
    justify-self: center;
    margin-inline: auto;
  }
  .login-button {
    display: block;
  }
  .dropdown {
    display: block !important;
    width: 40% !important;
    padding: 0 10px;
  }
  .mobile-search {
    display: block !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .input {
    width: 10% !important;
    border-radius: 20px 0 0 20px !important;
    padding-left: 20px !important;
  }
  .input:focus {
    box-shadow: none !important;
  }
  .input-group-text i {
    padding: 0 5px;
    font-size: 13px;
  }
  .input-group {
    width: 60% !important;
    margin-right: auto !important;
  }
  .btn-dropdown {
    background: linear-gradient(
      257.87deg,
      #ff4000 0.07%,
      #be2f31 43.5%,
      #0400be 128.48%
    );
    color: white !important;
    margin-top: 5px !important;
    border: none !important;
    padding: 5px;
    border-radius: 5px;
  }
  .facebook {
    padding: 5px 20px !important;
    border-radius: 5px;
    width: 70%;
    font-size: 13px !important;
  }
  .view-all {
    padding: 5px 0px !important;
    border-radius: 5px;
    width: 25%;
    cursor: pointer;
    font-size: 13px !important;
  }
  .banner {
    margin: 20px 0 !important;
  }
  .log {
    display: block !important;
    margin-top: 40px !important;
  }
  .log-container {
    width: 95% !important;
    margin: 10px 0 10px 10px;
  }
  .useful {
    margin-top: 50px !important;
  }
  .rules {
    justify-content: flex-start !important;
  }
  .column {
    margin-top: 30px !important;
  }
  .soon{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
  }
  .soon div{
    width: 100% !important;
  }
  .soon div img{
    width: 50% !important;
    border-radius: 5px !important;
  }
}