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

html[lang="en"] {
 
}

/* Arabic content (rtl) uses Tajawal */
html[lang="ar-OM"] {
 
}


@layer components {
  .btn {
    @apply py-2 px-4 rounded-xl transition-all shadow-lg border-2;
  }

  .btn-primary {
    @apply bg-primary-900 text-white;
  }
  .btn-primary:hover {
    @apply bg-primary-700;
  }

  .btn-outline-primary {
    @apply border border-primary-900 text-primary-900 p-2;
  }
  .btn-outline-primary:hover {
    @apply bg-primary-700 text-white;
  }

  .btn-secondary {
    @apply bg-secondary-900 text-white;
  }

  .btn-light {
    @apply bg-gray-100 text-black;
  }
  .btn-light:hover {
    @apply bg-gray-300 text-black;
  }

  .btn-outline-light {
    @apply border border-gray-100 text-white;
  }
  .btn-outline-light:hover {
    @apply bg-gray-100 text-black;
  }

  .btn-secondary:hover {
    @apply bg-secondary-700;
  }

  .btn-info {
    @apply bg-info-100 text-white;
  }
  .btn-info:hover {
    @apply bg-info-200;
  }

  .form-control {
    @apply !appearance-none !border-[2px] !bg-white !border-gray-300 !rounded-lg !w-full !py-3 px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-red-600 focus:!outline-none;
  }
}

.tr2 {
  transition: 2s;
}

.tr03 {
  transition: 0.3s all;
}

.rtl {
  direction: rtl;
}

.ltr {
  direction: ltr;
}

.bg-couner-data-landing {
  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
    url(../assets/images/team.jpg);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

.content{
  @apply leading-8 text-lg
}