@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@700&family=Poppins:wght@400;600&display=swap");

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

@layer base {
  @media (min-width: 500px) {
    ::-webkit-scrollbar {
      width: 7px;
      height: 7px;
    }
    ::-webkit-scrollbar-button {
      width: 0px;
      height: 0px;
    }
    ::-webkit-scrollbar-thumb {
      background: #1e293b;
      border: 0px none #ffffff;
      border-radius: 0px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #1e293b;
    }
    ::-webkit-scrollbar-thumb:active {
      background: #1e293b;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
      border: 0px none #ffffff;
      border-radius: 50px;
    }
    ::-webkit-scrollbar-track:hover {
      background: transparent;
    }
    ::-webkit-scrollbar-track:active {
      background: transparent;
    }
    ::-webkit-scrollbar-corner {
      background: transparent;
    }
  }

  body,
  html {
    @apply font-poppins bg-slate-200 overflow-x-hidden relative w-[100%] h-[100%];
  }

  h3{
    @apply font-fira text-xl mb-3 pt-5
  }
}

@layer components {
  .nav-link {
    @apply cursor-pointer font-semibold text-center p-2 h-full uppercase group-hover:bg-slate-700 hover:bg-slate-700 group-hover:text-white hover:text-white flex justify-center items-center;
  }

  .sub-link {
    @apply cursor-pointer relative p-3 py-4 text-white hover:text-blue-200 hover:pl-5 transition-all duration-200 flex items-center;
  }

  .sub-link-arrow {
    @apply absolute left-0 scale-x-0 group-hover/item:scale-x-100 transition-all duration-300;
  }

  .sub-ul {
    @apply z-50 absolute left-0 top-[100%] w-[320px] -translate-y-5 opacity-0 invisible group-hover:opacity-100 group-hover:translate-y-0 group-hover:visible group-hover:duration-500 bg-slate-700/90 transition-all origin-top duration-200 backdrop-blur-sm;
  }

  .flags {
    @apply w-[120px] s500:w-[90px];
  }

  .between {
    background: url(/images/3.webp);
    background-size: cover;
    background-attachment: fixed;
  }

  .between2 {
    background: url(/images/4.webp);
    background-size: cover;
    background-attachment: fixed;
  }

  .blackbg{
    box-shadow:0 0 2px 2px #666;
  }

  @media (max-width: 500px) {
    .between,
    .between2 {
      background-attachment: inherit;
    }
  }

  .mobile-nav-link {
    @apply relative overflow-hidden font-semibold p-3 hover:text-white flex items-center  rounded-lg bg-slate-300 uppercase hover:bg-slate-900 transition-all;
  }

  .mobile-nav-link-span {
    @apply bg-slate-800 w-12 h-full absolute left-0 top-0 flex justify-center items-center;
  }
  button {
    @apply shadow-sm  transition-all w-full my-3 p-3 bg-slate-100 text-slate-900 rounded outline-none focus:border-slate-400;
  }

  input,select{
    @apply shadow-sm border-[1px] border-slate-300 transition-all w-full my-1 p-3 bg-slate-100 text-slate-900 rounded outline-none focus:border-slate-400 placeholder:text-slate-500 font-semibold;
  }

  textarea {
    @apply shadow-sm border-[1px] border-slate-300 transition-all w-full my-1 p-3 bg-slate-100 text-slate-900 rounded outline-none focus:border-slate-400 placeholder:text-slate-500 font-semibold;
  }

  .footer-link {
    @apply font-semibold hover:underline uppercase;
  }

  .services-menu{
  @apply block px-2 py-4 border border-slate-500 mb-5 rounded-sm
  }

  .lang-li{
  @apply p-4 h-14 w-[270px] s1200:w-[260px] s1024:w-[240px] s768:w-[350px] s640:w-full flex items-center m-2 bg-slate-300 rounded-md}

  .fi{
  @apply !w-[40px] !leading-7}

  .ref-box{
  @apply p-4 bg-slate-300 m-2 flex flex-col items-center justify-start rounded-md gap-2 w-[30%] h-[270px] s1024:w-[40%] s640:w-full s640:flex-col s640:h-auto}

  .ref-text{
  @apply w-full text-center font-semibold h-full flex items-center justify-center bg-slate-100/20 p-2 rounded-md}

  .doc-box{
  @apply p-4 bg-slate-300 m-2 flex items-center flex-col justify-between rounded-md gap-2 h-[400px] w-[30%] s1024:w-full s1024:h-auto}

  .doc-text{
  @apply w-full text-center font-semibold flex justify-center items-center bg-slate-100/20 p-2 rounded-md}
}