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

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

body {
   font-family: 'Tajawal', sans-serif;
}

/* Style the entire scrollbar */
::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}

/* Style the scrollbar track */
::-webkit-scrollbar-track {
   background: #232426;
   border-radius: 10px;
}

::-webkit-scrollbar-thumb {
   background: #E5BB44;
   border-radius: 10px;
}


input:focus-visible,
textarea:focus-visible {
   outline: none !important;
}

@keyframes border-move {
   0% {
      background-position: 0% 50%;
   }

   100% {
      background-position: 100% 50%;
   }
}

.animate-border-move {
   background: linear-gradient(90deg, #E5BB44, #16110D, #E5BB44);
   background-size: 300%;
   animation: border-move 2s linear infinite;
   border-radius: inherit;
}

.ribbon {
   font-size: 35px;
   font-weight: bold;
   text-align: center;
}

.ribbon {
   --f: .4em;
   /* control the folded part*/
   --r: .4em;
   /* control the ribbon shape */
   background: rgb(229, 187, 68);
   background: linear-gradient(197deg, rgba(229, 187, 68, 1) 65%, rgba(255, 255, 255, 1) 100%);
   position: absolute;
   inset-inline-start: 20px;
   top: calc(-1*var(--f));
   padding: .2em;
   border-left: var(--f) solid #0005;
   clip-path: polygon(var(--f) 0, 100% 0, 100% calc(100% - var(--r)), calc(50% + var(--f)/2) 100%, var(--f) calc(100% - var(--r)), var(--f) var(--f), 0 var(--f));
}
 
@media screen and (max-width: 600px) {
   .text-medium{
      & p{
   font-size: large !important;   }
   }
   
}