@tailwind components;
@tailwind utilities;
@font-face {
  font-family: "DINNextLTArabic";
  src: url("/assets/fonts/DINNextLTArabic-Regular-3.ttf") format("truetype");
}

@layer components {
  .all-\[unset\] {
    all: unset;
  }
}

:root {
  --display-4-font-family: "DIN Next LT Arabic", Helvetica;
  --display-4-font-size: 28px;
  --display-4-font-style: normal;
  --display-4-font-weight: 400;
  --display-4-letter-spacing: 0px;
  --display-4-line-height: 38px;
  --primary-text-color: #173c4e;
  --primary-color: #324b73;
  --secondary-color: #54698a;
  --gold: #E9E3DC;
  --neutral-colorscolor-600: rgba(212, 210, 227, 1);
  --neutral-colorscolor-700: rgba(188, 186, 205, 1);
  --neutral-colorscolor-900: rgba(141, 139, 167, 1);
  --neutral-colorsheadings-black: rgba(93, 90, 136, 1);
  --neutral-colorswhite: rgba(255, 255, 255, 1);
  --primary-colorscolor-1: rgba(251, 86, 96, 1);
  --regular-36-font-family: "DIN Next LT Arabic", Helvetica;
  --regular-36-font-size: 36px;
  --regular-36-font-style: normal;
  --regular-36-font-weight: 400;
  --regular-36-letter-spacing: 0px;
  --regular-36-line-height: 46px;
  --small-16-font-family: "DIN Next LT Arabic", Helvetica;
  --small-16-font-size: 16px;
  --small-16-font-style: normal;
  --small-16-font-weight: 400;
  --small-16-letter-spacing: 0px;
  --small-16-line-height: 30px;
  --text-single-regular-font-family: "DIN Next LT Arabic", Helvetica;
  --text-single-regular-font-size: 18px;
  --text-single-regular-font-style: normal;
  --text-single-regular-font-weight: 400;
  --text-single-regular-letter-spacing: 0px;
  --text-single-regular-line-height: 18px;
}

:root {
  --animate-spin: spin 1s linear infinite;
}

.animate-fade-in {
  animation: fade-in 1s var(--animation-delay, 0s) ease forwards;
}

.animate-fade-up {
  animation: fade-up 1s var(--animation-delay, 0s) ease forwards;
}

.animate-marquee {
  animation: marquee var(--duration) infinite linear;
}

.animate-marquee-vertical {
  animation: marquee-vertical var(--duration) linear infinite;
}

.animate-shimmer {
  animation: shimmer 8s infinite;
}

.animate-spin {
  animation: var(--animate-spin);
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes image-glow {
  0% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
  }

  10% {
    opacity: 0.7;
    animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
  }

  to {
    opacity: 0.4;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes shimmer {
  0%,
  90%,
  to {
    background-position: calc(-100% - var(--shimmer-width)) 0;
  }

  30%,
  60% {
    background-position: calc(100% + var(--shimmer-width)) 0;
  }
}

@keyframes marquee {
  0% {
    transform: translate(0);
  }

  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

@keyframes marquee-vertical {
  0% {
    transform: translateY(0);
  }

  to {
    transform: translateY(calc(-100% - var(--gap)));
  }
}

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: transparent;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: transparent;
    --card-foreground: 213 31% 91%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer utilities {
  @keyframes ring-bell {
    0% {
      transform: rotate(0deg);
    }
    15% {
      transform: rotate(5deg);
      -webkit-transform: rotate(5deg);
      -moz-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
      -o-transform: rotate(5deg);
    }
    30% {
      transform: rotate(-2deg);
      -webkit-transform: rotate(-2deg);
      -moz-transform: rotate(-2deg);
      -ms-transform: rotate(-2deg);
      -o-transform: rotate(-2deg);
    }
    45% {
      transform: rotate(5deg);
      -webkit-transform: rotate(5deg);
      -moz-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
      -o-transform: rotate(5deg);
    }
    60% {
      transform: rotate(-2deg);
      -webkit-transform: rotate(-2deg);
      -moz-transform: rotate(-2deg);
      -ms-transform: rotate(-2deg);
      -o-transform: rotate(-2deg);
    }
    75% {
      transform: rotate(2deg);
      -webkit-transform: rotate(2deg);
      -moz-transform: rotate(2deg);
      -ms-transform: rotate(2deg);
      -o-transform: rotate(2deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  .animate-ring-bell {
    animation: ring-bell 1s ease-in-out infinite;
    transform-origin: top center;
  }
}

@keyframes pulse-once {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.animate-pulse-once {
  animation: pulse-once 1s ease-in-out 1;
}

.list-none {
  list-style: none;
}
.list-none li::before {
  content: none;
}

.Toastify__toast-container {
  z-index: 9999;
}

.Toastify__toast {
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.Toastify__toast-body {
  padding: 0 !important;
  margin: 0 !important;
}
.Toastify__close-button--light {
  color: white !important;
}