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


@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
  --primary: #FD5234;
  --light: #90A3BF;      
  --secondary: #040815;              
  --dark: #181820;              
}

html, body{
  width: 100%;
  height: 100%;
    overflow-x: hidden !important;
}

.list-disc{
  list-style: disc !important;
}

.text-gray {
  --tw-text-opacity: 1;
  color: #596780;
}

ul.list-disc .text-gray {
  color: #596780;
}

.ps-4{
  padding-inline-start: 1rem/* 16px */;

}

.z-10 {
  z-index: 10;
}

.bottom-section-break {
  bottom: -480px;
  left: -130px;
}

.hover\:text-gradient:hover {
  --tw-text-opacity: 1;
  background: var(--Dark-Gradient, linear-gradient(90deg, rgba(197, 97, 255, 0.87), rgba(85, 51, 255, 0.83)));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


::-webkit-scrollbar {
    width: 0px;
}


/* Track */
::-webkit-scrollbar-track {
    background: var(--dark);
    border-radius: 2px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--dark);
    border-radius: 2px;
}
 
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--dark);
}

p, nav li a{
    font-family: "IBM Plex Sans", sans-serif !important;
    font-weight: 400;
    color: #5F6368;
}

html {
    scroll-behavior: smooth;
}

.bg-gradient{
  border-radius: 40px;
  background: var(--Dark-Gradient, linear-gradient(90deg, rgba(197, 97, 255, 0.87), rgba(85, 51, 255, 0.83)));
}

.bg-dark-gradient{
  background: var(--Dark-Gradient, linear-gradient(90deg, rgba(197, 97, 255, 0.87), rgba(85, 51, 255, 0.83)));
}

.text-gradient{
  background: var(--Dark-Gradient, linear-gradient(90deg, rgba(197, 97, 255, 0.87), rgba(85, 51, 255, 0.83)));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-radial-gradient{
  background: radial-gradient(329.97% 83.3% at -20.42% 57.57%, rgba(112, 112, 112, 0.10) 0%, rgba(60, 60, 60, 0.10) 100%);
backdrop-filter: blur(15px);
}

.section {
height:fit-content;
}

.card-price{
    transform: translateX(-400%);
}

video {
    outline: none;
    /* clip-path: inset(5px 5px); */
}

.loader-custom {
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-top: 4px solid var(--Dark-Gradient, linear-gradient(90deg, rgba(197, 97, 255, 0.87), rgba(85, 51, 255, 0.83)));
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index:999;
    margin-left: -25px;
    margin-top: -25px;
}

#loader{
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

#content{
    display:none;
}

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


@media (min-width: 320px) {
  .icon-group svg{
    width: 25px;
    height: 25px;
  }
  .icon-flower svg{
    width: 25px;
    height: 25px;
  }
  .icon-projector svg{
    width: 25px;
    height: 25px;
  }

  .slick-prev, .slick-next{
      z-index:999 !important;
      color: #000000 !important;
      top:112% !important;
  }

  .slick-prev {
      left: 26% !important;
  }

  .slick-next {
      right: 26% !important;
  }

  .slick-dots {
  bottom:-18% !important;
  }

  .tab-content img{
      width: 100%;
      height: 100%;
      object: contain;
  }
}

@media (min-width: 768px) {
  .icon-group svg{
    width: 32px;
    height: 32px;
  }
  .icon-flower svg{
    width: 32px;
    height: 32px;
  }
  .icon-projector svg{
    width: 32px;
    height: 32px;
  }
    .slick-prev, .slick-next{
        z-index:999 !important;
        color: #000000 !important;
        top:105% !important;
    }

    .slick-prev {
        left: 36% !important;
    }

    .slick-next {
        right: 36% !important;
    }

    .slick-dots {
    bottom:-10% !important;
    }

    .tab-content img{
        width: 100%;
        height: 100%;
        object: contain;
    }

}

@media (min-width: 1024px) {
    .slick-prev, .slick-next{
        z-index:999 !important;
        color: #000000 !important;
        top:105% !important;
    }
    .slick-prev {
        left: 42% !important;
    }

    .slick-next {
        right: 42% !important;
    }

    .slick-dots {
    bottom:-8% !important;
    }

    .tab-content img{
        width: 320px;
        height: 100%;
        object: contain;
    }
}

@keyframes slide-left {
    0% {
      transform: translateX(150%);
      opacity:0;
    }
    100% {
      transform: translateX(0);
      opacity:1;
    }
}

@keyframes slide-right {
    0% {
      transform: translateX(-400%);
    }
    100% {
      transform: translateX(0);
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@keyframes show-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0%);
    }
}

@keyframes zoom-in {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}

@keyframes rotate {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(45deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-45deg);
    }
}

@keyframes show-right {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
}


.collapse:not(td):not(tr):not(colgroup) {
  visibility: visible;
}
.collapse {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.2s;
  width: 100%;
  border-radius: 8px;
}
.collapse-title,
.collapse > input[type="checkbox"],
.collapse > input[type="radio"],
.collapse-content {
  grid-column-start: 1;
  grid-row-start: 1;
}

.collapse > input[type="checkbox"],
.collapse > input[type="radio"] {
  appearance: none;
  opacity: 0;
}
.collapse-content {
  visibility: hidden;
  grid-column-start: 1;
  grid-row-start: 2;
  min-height: 0px;
  transition: visibility 0.2s;
  transition: padding 0.2s ease-out, background-color 0.2s ease-out;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: unset;
}
.collapse[open],
.collapse-open,
.collapse:focus:not(.collapse-close) {
  grid-template-rows: auto 1fr;
}
.collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
.collapse:not(.collapse-close):has(> input[type="radio"]:checked) {
  grid-template-rows: auto 1fr;
}
.collapse[open] .collapse-content,
.collapse-open .collapse-content,
.collapse:focus:not(.collapse-close) .collapse-content,
.collapse:not(.collapse-close)
  input[type="checkbox"]:checked
  ~ .collapse-content,
.collapse:not(.collapse-close) input[type="radio"]:checked ~ .collapse-content {
  visibility: visible;
  min-height: fit-content;
}
.collapse:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: hsl(var(--bc) / 1);
}
.collapse:has(.collapse-title:focus-visible),
.collapse:has(> input[type="checkbox"]:focus-visible),
.collapse:has(> input[type="radio"]:focus-visible) {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: hsl(var(--bc) / 1);
}
.collapse-arrow .collapse-title:after {
  position: absolute;
  display: block;
  height: 0.5rem;
  width: 0.5rem;
  --tw-translate-y: -150%;
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 0.2s;
  top: 50%;
  left: 1.4rem;
  content: url("/images/component/arrow/down.svg");
  transform-origin: 75% 75%;
  /* box-shadow: 2px 2px; */
  pointer-events: none;
}
[dir="rtl"] .collapse-arrow .collapse-title:after {
  --tw-rotate: -45deg;
}