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

:root {
  --brandPrimary: #dd5328;
  --scrollBarColor: #023e8a;
  --dardBlue2: #0c203b;
  --darkPrimary: #000618;
  --darkSecondary: #061329;
}

@layer base {
  body {
    @apply bg-dark-primary text-white text-sm lg:text-base;
  }
  input[type="checkbox"] {
    @apply cursor-pointer;
  }
  input::placeholder {
    color: currentColor;
    font-size: 14px;
    opacity: 0.5;
  }
  textarea::placeholder {
    color: currentColor;
    font-size: 14px;
    opacity: 0.5;
  }
  input:focus::-webkit-input-placeholder {
    opacity: 0;
    transition: all 0.3s ease;
  }

  input:focus::-moz-placeholder {
    opacity: 0;
    transition: all 0.3s ease;
  }

  input:focus::-ms-input-placeholder {
    opacity: 0;
    transition: all 0.3s ease;
  }
  textarea:focus::-webkit-input-placeholder {
    opacity: 0;
    transition: all 0.3s ease;
  }

  textarea:focus::-moz-placeholder {
    opacity: 0;
    transition: all 0.3s ease;
  }

  textarea:focus::-ms-input-placeholder {
    opacity: 0;
    transition: all 0.3s ease;
  }
  html {
    scroll-behavior: smooth;
  }
  table {
    @apply w-full whitespace-nowrap;
  }
  table th,
  table td {
    @apply px-6 py-3 border border-dark-blue1;
  }
  table tr {
    @apply bg-dark-blue1 border-b-8 border-dark-blue;
  }
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
@layer utilities {
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  *::-webkit-scrollbar-track {
    border-radius: 10px;
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background: var(--scrollBarColor);
    border-radius: 10px;
    border: 3px solid transparent;
  }
}

@layer components {
  .container_section {
    @apply mx-auto w-full xl:w-5/6 px-4 md:px-10 xl:px-0;
  }
  .container_section_sm {
    @apply mx-auto w-full xl:w-10/12 2xl:w-4/5 3xl:w-[70%] px-4 xl:px-0;
  }
  .btn {
    @apply px-6 py-2.5 rounded-xl;
  }
  .tw_btn_primary {
    @apply text-white bg-gradient-to-r from-blue-secondary to-blue-primary;
  }
  .section_heading_3xl {
    @apply text-2xl md:text-3xl lg:text-4xl 2xl:text-5xl font-bold;
  }

  .section_heading_xl {
    @apply text-2xl md:text-3xl xl:text-4xl font-bold;
  }
  .section_heading_md {
    @apply text-xl 2xl:text-[22px] leading-6 2xl:leading-7 font-bold;
  }
  .border_gradient {
    @apply bg-gradient-to-r from-indigo-500/5 via-blue-500 to-pink-500/5;
  }
  .border_gradient_purple {
    @apply bg-gradient-to-r from-purple-500 via-blue-500 to-pink-500;
  }
  /* ======= Top Navigation ====== */
  .nav_list {
    @apply inline-block my-2 mx-3;
  }
  .nav_link {
    @apply text-white font-normal text-sm md:text-base 2xl:text-lg relative after:absolute after:w-0 after:h-[3px]  after:bg-blue-primary after:left-0 after:bottom-[-6px] after:transition-all after:duration-300 after:ease-in transition-all duration-300 ease-in rtl:after:right-0;
  }

  .active_link {
    @apply text-blue-primary font-normal text-sm md:text-base 2xl:text-lg relative after:absolute after:w-2/3 after:h-[3px]  after:bg-blue-primary after:left-0 after:bottom-[-6px] after:transition-all after:duration-300 after:ease-in transition-all duration-300 ease-in rtl:after:right-0;
  }
  .border_1 {
    @apply border;
  }
  .border_top {
    @apply relative before:border_gradient before:opacity-70 before:w-full before:h-[1px] before:absolute before:top-0 before:left-0;
  }
  .border_bottom {
    @apply relative after:border_gradient after:opacity-70 after:w-full after:h-[1px] after:absolute after:bottom-0 after:left-0;
  }
  .border_bottom_purple {
    @apply relative after:border_gradient_purple after:opacity-70 after:w-full after:h-[1px] after:absolute after:bottom-0 after:left-0;
  }
  .dark_input_style {
    @apply bg-dark-blue1 text-blue-500 rounded-lg px-3 py-3.5 outline-none focus:outline-none w-full border border-dark-blue2 focus:border focus:border-blue-800 transition-colors duration-300 ease-in-out;
  }
  .btn_primary_outline2 {
    @apply text-md px-4 py-3 rounded-xl bg-gradient-to-r from-blue-400 via-blue-600 to-blue-700 hover:from-blue-700 hover:via-blue-700 hover:to-blue-600 transition-all duration-300 ease-in-out border border-blue-500;
  }
}