@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import "tailwindcss";


@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));


[data-theme="dark"] {
  --background-color: black;
  --text-color: white;
}

[data-theme="light"] {
  --background-color: #f3f4f6;
  --text-color: black;
}

html {
  transition: background-color 0.3s ease-in-out;
}

/* add the code bellow */
@layer utilities {

  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .mask-gradient {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  }

  /* Scrollbar for WebKit browsers (Chrome, Safari, Edge) */
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.5);
    border-radius: 10px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 0.7);
  }

  /* Scrollbar for Firefox */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 100, 100, 0.5) transparent;
  }
}

img .blue-svg{
  fill:var(--color-blue-1)
}

@theme {
  --color-blue-1:#282875;
  --color-blue-2:#4444B0;
  --color-blue-3:#8282FF;
  --color-blue-4:#4646B6;
  --color-blue-7:#3BA7FF;
  --color-blue-8:#2E64A9;
  --color-blue-9:#5571DB;
  --color-blue-10:#4646A5;
  --color-blue-11:#4748A5;
  --color-blue-12:#4F4FB9;
  --color-blue-13:#006ED3;
  --color-blue-14:#DCEFFF;
  --color-blue-15:#6610F2;

  --color-yellow-1:#FED74C;
  --color-yellow-2:#D1EA35;
  --color-yellow-3:#E9B430;
  --color-yellow-4:#FFAA23;
  --color-yellow-5:#FFCE1B;
  
  --color-orange-1:#F04B16;
  --color-orange-2:#FF8057;
 

  --color-green-1:#47A162;
  --color-green-2:#5CC87C;
  --color-green-3:#54F396;
  --color-green-4:#30EA9C;
  --color-green-5:#B7FBDE;
  --color-green-6:#0CB16C;
  --color-green-7:#B7FBDE;
  --color-green-8:#34D196;

  --color-red-1:#F35457;
  --color-red-2:#E95C1F;
  --color-red-4:#DC3D3D;
  --color-red-5:#FF824B;
  --color-red-6:#FFE0DF;
  --color-red-7:#F16063;
  --color-red-8:#F35457;

  --color-purple-3:#7922C5;
  --color-purple-4:#704FE6;

  --color-gray-1:#D9D9D9;

  --color-cyan-3:#4ACBAD;
  --color-cyan-4:#158FE1;

  /* Gradient Colors  */

  --color-purple-1:#B59FFF;
  --color-purple-2:#3917CF;

  --color-saffron-1:#FFA888;
  --color-saffron-2:#DB5926;

  --color-cyan-1:#5FEACD;
  --color-cyan-2:#0A7172;

  --color-blue-5:#12AEFB;
  --color-blue-6:#4364FD;


  --font-comic-sans: 'Comic Sans MS', "Comic Neue";
  --font-poppins:"Poppins", sans-serif;
  --font-inter: "Inter", sans-serif;

}

@layer utilities {
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #e0e0e0 #f1f1f1;
  }
  
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    border-radius: 10px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #d6d6d6;
  }
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background: transparent !important;
  /* Transparent background */
  -webkit-box-shadow: 0 0 0px 1000px transparent inset, 0 0 0 2px #3b82f6 !important;
  /* Blue focus ring */
  -webkit-text-fill-color: var(--text-color) !important;
  /* Inherit text color */
  transition: background-color 5000s ease-in-out 0s;
  /* Smooth background */
  caret-color: var(--text-color);
  /* Cursor color matches text */
  border-radius: 7px;
  /* Keeps rounded corners */
  text-decoration: none !important;
  /* Remove red curve underline */
  color: inherit !important;
  /* Force text color to inherit */
}

input {
  -webkit-text-fill-color: inherit !important;
  /* Apply text color globally */
  color: inherit !important;
  /* Force text color */
}

input:focus {
  outline: none;
  /* Optional */
}


/* Embala CSS */
.embla {
  margin: auto;
  --slide-height: 19rem;
  --slide-spacing: 1rem;
  --slide-size: 45%;
}
.embla__viewport {
  overflow: hidden;
}
.embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
  margin-left: calc(var(--slide-spacing) * -1);
}
.embla__slide {
  transform: translate3d(0, 0, 0);
  
  min-width: 0;
  padding-left: var(--slide-spacing);
}
.embla__slide__number {
  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
  border-radius: 1.8rem;
  font-size: 4rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;

  user-select: none;
}
.embla__buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  align-items: center;
}
.embla__button {
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  touch-action: manipulation;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
  width: 3.6rem;
  height: 3.6rem;
  z-index: 1;
  border-radius: 50%;
  color: var(--text-body);
  display: flex;
  align-items: center;
  justify-content: center;
}
.embla__button:disabled {
  color: var(--detail-high-contrast);
}

.embla__progress {
  border-radius: 1.8rem;
  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
  background-color: var(--background-site);
  position: relative;
  height: 0.6rem;
  justify-self: flex-end;
  align-self: center;
  width: 13rem;
  max-width: 90%;
  overflow: hidden;
}
.embla__progress__bar {
  background-color: var(--text-body);
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: -100%;
}
.embla__controls {
  grid-template-columns: auto 1fr auto;
}
.embla__progress {
  justify-self: center;
  transition: opacity 0.3s ease-in-out;
  width: 8rem;
}
.embla__progress--hidden {
  opacity: 0;
}
.embla__progress__bar {
  animation-name: autoplay-progress;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
.embla__progress--hidden .embla__progress__bar {
  animation-play-state: paused;
}
@keyframes autoplay-progress {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}