@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .footer-link {
    @apply mb-2 text-sm no-underline duration-300 ease-out text-neutral-400 hover:text-purple-400/70;
  }
  .project-card {
    @apply relative flex flex-col p-8 overflow-hidden border rounded-xl border-neutral-800 bg-gradient-to-r from-black to-neutral-950 duration-200 ease-in-out hover:shadow-violet-500/10 hover:-translate-y-1;
  }
  .project-card-service {
    @apply relative flex flex-col p-8 overflow-hidden border rounded-xl border-neutral-800 bg-gradient-to-br from-[#190730] to-[#0A0A0A] duration-200 ease-in-out hover:shadow-violet-500/10 hover:-translate-y-1;
  }
  .restaurant-service-card {
    @apply relative flex flex-col p-8 overflow-hidden border rounded-xl border-green-900/50 bg-gradient-to-br from-palm to-green-900/25 duration-200 ease-in-out hover:shadow-violet-500/10 hover:-translate-y-1;
  }
  .service-title {
    @apply pl-4 mb-2 text-xl font-semibold tracking-tight border-l-2 border-violet-500 text-violet-200;
  }
  .service-page-title {
    @apply mb-2 font-semibold tracking-tight text-neutral-100;
  }
  .service-page-description {
    @apply leading-relaxed text-[#efedfd99] text-base;
  }
  .service-description {
    @apply px-4 text-sm leading-relaxed text-neutral-200;
  }
  .grid-background {
    @apply z-0 absolute h-40 w-full bg-[linear-gradient(to_right,#b1b1b12e_1px,transparent_1px),linear-gradient(to_bottom,#b1b1b12e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)];
  }

  .project-tag {
    @apply text-violet-400 mt-auto text-center rounded-lg bg-mauve py-2 text-xs px-2 uppercase w-fit;
  }

  .project-tag-service {
    @apply text-violet-400 mt-auto text-center rounded-lg bg-mauve_light py-2 text-xs px-2 uppercase w-fit;
  }

  .article-card {
    @apply relative flex flex-col p-8 overflow-hidden border rounded-xl border-neutral-200 bg-gradient-to-r from-white to-neutral-50 duration-200 ease-in-out hover:shadow-violet-500/10 hover:-translate-y-1;
  }

  .form-input {
    @apply block text-sm rounded-md border outline-none px-3 py-2 mt-1 w-full bg-cod-gray-light border-cod-gray-medium focus:ring-transparent focus:border-violet-400 placeholder:text-neutral-500;
  }

  .btn-primary {
    @apply rounded-lg py-2 text-sm px-4 bg-violet-500/50 hover:bg-mauve_light text-white inline-block font-medium cursor-pointer transition-colors duration-200 ease-in-out w-fit;
  }

  .btn-secondary {
    @apply rounded-lg py-2 text-sm px-4 inline-block font-medium text-gray-50 bg-cod-gray-medium hover:bg-cod-gray-light transition-colors duration-200 ease-in-out w-fit;
  }

  .btn-danger {
    @apply rounded-lg py-2 text-sm px-4 inline-block font-medium text-gray-50 bg-red-600 hover:bg-red-700 transition-colors duration-200 ease-in-out w-fit;
  }

  .index-post-title {
    @apply flex items-center w-4/6 py-2 pl-12 space-x-3 overflow-hidden overflow-x-scroll font-normal bg-charcoal whitespace-nowrap text-gray-100;
  }
  .flash_notice {
    @apply w-full px-5 py-3 text-center rounded-lg pointer-events-none border border-cod-gray-medium bg-cod-gray text-neutral-50;
  }

  .filter-button {
    @apply px-3.5 py-2 mt-auto border rounded-lg border-neutral-800 bg-neutral-950 text-neutral-400 hover:bg-neutral-900 hover:text-neutral-100;
  }

  .filter-active {
    @apply bg-neutral-900 text-neutral-100;
  }
  .service-link {
    @apply text-[#e2cbff] hover:text-[#a78bfa] transition ease-in-out;
  }
  .form-label {
    @apply font-medium text-white text-sm;
  }
  .nested-form-label {
    @apply block text-xs text-neutral-400;
  }
}

.neurotic-gradient {
  background-image: radial-gradient(ellipse at 5% 145%, #3902674d, #111 5%),
    linear-gradient(10deg, #39026730, #2b2b2b 5%);
}

.turbo-progress-bar {
  background-color: #664a8d;
}

.dark_navbar {
  h1,
  #agency-btn,
  #contact-btn {
    color: white;
  }

  #agency-btn:hover,
  #contact-btn:hover {
    color: #0a0a0a;
  }

  #mobile-btn {
    color: white;
    background-color: transparent;
  }
}

.testimonials-card {
  backdrop-filter: blur(12px);
  background: radial-gradient(
      57.89% 132% at 65.79% -35%,
      rgba(120, 123, 255, 0.06) 0%,
      rgba(120, 123, 255, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 54.17%,
      rgba(255, 255, 255, 0.02) 100%
    ),
    rgba(255, 255, 255, 0.01);
}

.testimonials-card::before {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
  border-radius: inherit;
  content: "";
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: add, add;
  mask-composite: xor;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
  position: absolute;
}

.embla__slide {
  flex: 0 0 320px;
  min-width: 0;
}

@media (min-width: 768px) {
  .embla__slide {
    flex: 0 0 402px;
  }
}

.grid-background-position {
  width: 115%;
  height: 110%;
  @media (min-width: 768px) {
    width: 112%;
    height: 130%;
  }
}

.max-w-40 {
  max-width: 10rem;
}
.post-body p {
  margin-bottom: 1.5rem !important;
}

.post-body li {
  margin-bottom: 1rem !important;
  margin-left: 1.5rem !important;
}

.post-body ul li {
  list-style-type: disc;
}

.post-body ol li {
  list-style-type: decimal;
}

.post-body a {
  text-decoration: underline !important;
}

pre {
  font-family: monospace !important;
  color: #abb2bf;
  display: block;
  overflow-x: auto;
  padding: 1rem 1.4rem;
  border-radius: 0.6rem;
  background-color: #1f1f1f;
  font-size: 15px !important;
  margin-top: 1rem !important;
  margin-bottom: 1.5rem !important;
}

li pre {
  margin-left: -1.5rem !important;
}

.post-body code:not(.hljs) {
  font-family: monospace;
  color: #abb2bf;
  border-radius: 0.2rem;
  padding: 0.2rem 0.3rem;
  background-color: #1f1f1f;
  font-size: 15px !important;
  margin-top: 1rem !important;
}

.post-body img + em {
  color: #666;
  font-size: 16px;
  line-height: 1.2;
  font-style: normal;
  margin-left: auto;
  margin-right: auto;
  display: table;
  text-align: center;
}

.post-body img {
  margin-bottom: 1rem;
}

.post-body h1 {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.post-body h2 {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.post-body h3 {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.post-body pre + h1,
.post-body pre + h2,
.post-body pre + h3 {
  margin-top: 3rem;
}
.post-body p + h1,
.post-body p + h2,
.post-body p + h3 {
  margin-top: 3rem;
}

::-moz-selection {
  /* Code for Firefox */
  color: #4c1d95;
  background: #f3e8ff;
}

::selection {
  color: #4c1d95;
  background: #f3e8ff;
}

.track {
  will-change: transform;
  animation: marquee 16s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.track-reverse {
  will-change: transform;
  animation: marquee-reverse 16s linear infinite;
}

@keyframes marquee-reverse {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@property --color1 {
  syntax: '<color>';
  initial-value: rgb(249, 115, 22);
  inherits: false;
}

@property --color2 {
  syntax: '<color>';
  initial-value: rgb(239, 68, 68);
  inherits: false;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */