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


#bt {
    outline: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 140px;
    height: 50px;
    border-radius: 0.5em;
    box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35);
    overflow: hidden;
   }
   
   #bt div {
    transform: translateY(0px);
    width: 100%;
   }
   
   #bt,
   #bt div {
    transition: 0.6s cubic-bezier(.16,1,.3,1);
   }
   
   #bt div span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0.75em 1.125em;
   }
   
   /* #bt div:nth-child(1) {
    background-color: #1e90ff;
   }
   
   #bt div:nth-child(2) {
    background-color: #21dc62; */
   }
   
   #bt:hover {
    box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35);
   }
   
   #bt:hover div {
    transform: translateY(-50px);
   }
   
   #bt p {
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
   }
   
   #bt:active {
    transform: scale(0.95);
   }
   
   button {
    padding: 0.8em 1.8em;
    border: 2px solid ;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
    transition: .3s;
    font-family: inherit;
    color: #93c5fd;
   }
   
   button::before {
    content: '';
    width: 0;
    height: 300%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #ffffff5b;
    transition: .5s ease;
    display: block;
   
   }
   
   button:hover::before {
    width: 105%;
   }
   
   button:hover {

   }
   
   *{
       
       margin: 0px;
       padding: 0;
       box-sizing: border-box;
       scroll-behavior: smooth;
       max-width: 100%;
       font-family: 'Almarai';
   }

   .card {
    flex-wrap: wrap;
    border-radius: 0.5rem;

    padding: 1.25rem;
   margin:1rem;
}


/* arabic */
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/almarai/v12/tsstApxBaigK_hnnQ1iFow.woff2") format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* arabic */
  @font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/almarai/v12/tssoApxBaigK_hnnS-agtnqWow.woff2") format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* arabic */
  @font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/almarai/v12/tssoApxBaigK_hnnS_qjtnqWow.woff2") format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }