@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:#D72638;
  }

  body {

    font-display: swap;
    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); 
  }
}