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

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans: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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=ADLaM+Display&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans: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&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wallpoet&display=swap');

/* Category Button */
.category-btn {
  @apply flex flex-col items-center justify-center bg-white p-4 rounded-lg shadow-md hover:scale-105 transition-transform cursor-pointer text-brand-green font-medium;
}

/* Card Style */
.card {
  @apply bg-white shadow-card rounded-lg p-6 hover:shadow-cardHover hover:scale-105 transition transform cursor-pointer;
}

h1, h2, h3, h4, h5, h6, p ,span{
  color: #fff !important;
  font-weight: 300 !important;
    }

/* Background Hex Pattern */
body {
    font-family: 'Poppins', sans-serif;
    font-style: regular;
    backdrop-filter: blur(80px);
    background-color: #226CFE !important;
    backdrop-filter: blur(200px);
    background-size: contain;
    color: #e6f0ff;
}

.ftrtext{
font-weight: 400 !important;
font-style: Regular!important;
font-size: 16px!important;
line-height: 28px!important;
letter-spacing: 0%!important;
}

.group {
    font-size: 12px;
    color: #ffffff;
    margin: 8px 4px;
}

.text-2xl{
font-weight: 300 !important;
font-style: Light!important;
font-size: 26px!important;
}


      #mainSearch::placeholder{
      font-weight: 300 !important;
      font-style: Light !important;
      font-size: 18px !important;
      }

        .textbox{
        width: 231px !important;
        font-weight: 500!important;
        font-style: Medium!important;
        font-size: 20px!important;
        line-height: 28px!important;
        letter-spacing: 0%!important;
        text-align: start;
        }

        .textpera{
          width: 231px !important;
          font-weight: 400!important;
          font-style: Regular!important;
          font-size: 18px!important;
          line-height: 131%!important;
          letter-spacing: 0%!important;
          text-align: start;
        }
        
        strong{
        font-weight: 500 !important;
        font-style: Medium;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;

        }

        #mainsearch::placeholder{
          font-family: Poppins;
          font-weight: 300;
          font-style: Light;
          font-size: 18px;
          line-height: 100%;
          letter-spacing: 0%;
          color: #898989;

        }

        span{
          font-family: Poppins;
          font-weight: 400;
          font-style: Regular;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0%;
          text-align: center;
        }

        .gap-2 img{
         width: 42px;
        height: 42px;
        opacity: 1;
        }

    .text-3xl{
    font-weight: 500 !important;
    font-style: Medium !important;
    font-size: 36px !important;
    line-height: 50px !important;
    letter-spacing: 1% !important;
    }

.slabs{
  width: 20px;
  height: 6px;
  margin: 0 2px;
  /* animation: pulse 1.5s infinite; */
  border-radius:50px;
  background-color: rgba(255, 255, 255, 0.3);
}

/* Remove default focus outlines and borders */
input:focus {
  outline: none;             /* removes the browser's glow/outline */
  box-shadow: none;          /* removes default shadow (like Chrome blue) */
  border: none; /* your custom border color */
}

/* Optional: smooth transition effect */
input {
  transition: border 0.2s ease, box-shadow 0.2s ease;
}