bonsai-web/style/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply py-2 px-4 rounded transition-all;
  }

  .btn-primary {
    @apply bg-primary-500 text-white;
  }
  .btn-primary:hover {
    @apply bg-primary-600;
  }

  .btn-outline-primary {
    @apply border border-primary-500 text-primary-500;
  }
  .btn-outline-primary:hover {
    @apply bg-primary-600 text-white;
  }

  .btn-secondary {
    @apply bg-secondary-100 text-white;
  }

  .btn-light {
    @apply bg-gray-100 text-black;
  }
  .btn-light:hover {
    @apply bg-gray-300 text-black;
  }

  .btn-outline-light {
    @apply border border-gray-100 text-white;
  }
  .btn-outline-light:hover {
    @apply bg-gray-100 text-black;
  }

  .btn-secondary:hover {
    @apply bg-secondary-200;
  }

  .btn-info {
    @apply bg-info-100 text-white;
  }
  .btn-info:hover {
    @apply bg-info-200;
  }

  .form-control {
    @apply !appearance-none !border-[2px] bg-navbar !border-gray-300 !rounded-2xl !w-full !py-4 !px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-gray-300 focus:!outline-none;
  }

  .form-control-white {
    @apply !appearance-none !border-[2px] !bg-white !border-gray-300 !rounded-2xl !w-full !py-4 px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-red-600 focus:!outline-none;
  }
}

body {
  font-family: KalamehWeb !important;
  background: white;
  --toastify-font-family: KalamehWeb !important;
  --Chart-defaults-font-family: KalamehWeb !important;
}

.rtl {
  direction: rtl;
}

.ltr {
  direction: ltr;
}

.tr2 {
  transition: 2s;
}

.tr03 {
  transition: 0.3s all;
}

.fuck-cick {
  pointer-events: none;
}

.bg-header {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(../public/images/bg-header.jpg);
  height: 100vh;
  background-position: center;
  background-size: cover;
}

.bg-contact-us {
  background: hsla(142, 71%, 45%, 1);

  background: radial-gradient(
    circle,
    hsla(142, 71%, 45%, 1) 0%,
    hsla(142, 71%, 29%, 1) 54%,
    hsla(144, 61%, 20%, 1) 100%
  );

  background: -moz-radial-gradient(
    circle,
    hsla(142, 71%, 45%, 1) 0%,
    hsla(142, 71%, 29%, 1) 54%,
    hsla(144, 61%, 20%, 1) 100%
  );

  background: -webkit-radial-gradient(
    circle,
    hsla(142, 71%, 45%, 1) 0%,
    hsla(142, 71%, 29%, 1) 54%,
    hsla(144, 61%, 20%, 1) 100%
  );

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#22C55E", endColorstr="#16803D", GradientType=1 );
  background-position: center;
  background-size: cover;
}

.bg-error {
  background: hsla(0, 71%, 45%, 1);

  background: radial-gradient(
    circle,
    hsla(0, 71%, 45%, 1) 0%,
    hsla(0, 100%, 21%, 1) 100%
  );

  background: -moz-radial-gradient(
    circle,
    hsla(0, 71%, 45%, 1) 0%,
    hsla(0, 100%, 21%, 1) 100%
  );

  background: -webkit-radial-gradient(
    circle,
    hsla(0, 71%, 45%, 1) 0%,
    hsla(0, 100%, 21%, 1) 100%
  );

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#C62121", endColorstr="#6C0000", GradientType=1 );
  background-position: center;
  background-size: cover;
}

.bg-navbar {
  background: rgba(240, 240, 240, 0.4);
}

.bg-navbar2 {
  background: rgba(240, 240, 240, 0.2);
}

.bg-glass {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.4px);
  -webkit-backdrop-filter: blur(4.4px);
}

#swich-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#swich-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.bg-login {
  height: 100vh;

  --s: 200px; /* control the size */
  --c: #2189a836; /* first color */

  --_g: #b3222200 8%, var(--c) 0 17%, #b3222200 0 58%;
  background: linear-gradient(
        135deg,
        #b3222200 20.5%,
        var(--c) 0 29.5%,
        #b3222200 0
      )
      0 calc(var(--s) / 4),
    linear-gradient(45deg, var(--_g)) calc(var(--s) / 2) 0,
    linear-gradient(135deg, var(--_g), var(--c) 0 67%, #d6afaf00 0),
    linear-gradient(
      45deg,
      var(--_g),
      var(--c) 0 67%,
      #b3222200 0 83%,
      var(--c) 0 92%,
      #b3222200 0
    ),
    #1095c1; /* second color */
  background-size: var(--s) var(--s);
}

/* Styles for WebKit browsers (Chrome, Safari) */
.scroll-1::-webkit-scrollbar {
  width: 6px;
}

body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scroll-1::-webkit-scrollbar-thumb {
  background: #88888842;
  border-radius: 10px;
}

.scroll-1::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.dots {
  display: inline-block;
  width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollBar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollBar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.bg-header-1 {
  background-image: url("../public/images/1.gif");
  background-size: cover;
  background-position: center;
}

.bet-text {
  background: -webkit-linear-gradient(
    90deg,
    #ffffff,
    #ffffff,
    #007c4273,
    #016e3298
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
}

.bet-text-green {
  background: -webkit-linear-gradient(
    90deg,
    #007c4273,
    #016e3298,
    #85918a98,
    #ffffff,
    #ffffff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.3;
}

.bg-hero-pattern {
  background-position: center;
  background-size: contain;
  background-image: url(../public/images/patern.png);
}