@font-face {
    font-family: Almarai-ExtraBold;
    src: url('../../fonts/Almarai-ExtraBold.ttf') format('truetype');
  }
  
  @font-face {
    font-family: Almarai-Bold;
    src: url('../../fonts/Almarai-Bold.ttf') format('truetype');
  }
  
  @font-face {
    font-family: Almarai-Light;
    src: url('../../fonts/Almarai-Light.ttf') format('truetype');
  }
  
  @font-face {
    font-family: Almarai-Regular;
    src: url('../../fonts/Almarai-Regular.ttf') format('truetype');
  }

  :root{
    --main-color:#00306D
    ;
  }

  body {
    /* @apply bg-gray-50 dark:bg-gray-900 transition-colors duration-300; */
  
    font-family: Almarai-Regular;
    position: relative;
  
  }

  ::-webkit-scrollbar {
    width: 4px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent; /* شريط المسار شفاف */
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* شفاف قليلاً */
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
  }

  .checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.checkbox input[type="checkbox"]{
    position: relative;
    width: 20px;
    height: 20px;
    border: none;
    background: #eef0f2;
    border-radius: 4px;
    appearance: none;
    cursor: pointer;
    /* box-shadow: 0px 0px 5px 1px rgb(17, 17, 17,.1); */
}
.checkbox input[type="checkbox"]:checked{
    background-color: var(--main-color);
}

.check{
    background-color: #ffffff !important;
}
.check:checked{
    background-color:  var(--main-color) !important;
}
.checkbox input[type="checkbox"]:checked:focus,.checkbox input[type="checkbox"]:checked{
    box-shadow: none;
}
.checkbox input[type="checkbox"]::before{
    content: "";
    position: absolute;
    top: 4px;
    right: 7px;
    width: 5px ;
    height: 10px;
    border: 2px solid transparent;
    border-left: none;
    border-top: none;
    transform: rotate(45deg) scale(1);
}
.checkbox input[type="checkbox"]:checked::before{

    border-color: #fff;
    animation: check .2s ease;
}

@keyframes check {
  from{
      transform: rotate(45deg) scale(0); 
  }
}


@keyframes float-up-down {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-12px); 
  }
}

@keyframes slow-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes slow-spin-reverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}


@keyframes float-and-rotate {
  0%, 100% {
    /* يحافظ على الدوران ويضيف حركة الصعود/الهبوط */
    transform: rotate(var(--tw-rotate)) translateY(0);
  }
  50% {
    transform: rotate(var(--tw-rotate)) translateY(-12px);
  }
}