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


html {
    scroll-behavior: smooth;
}

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.custom-select {
  appearance: none;
  -webkit-appearance: none; /* for Safari */
  -moz-appearance: none;    /* for Firefox */

  background-image: url('data:image/svg+xml;utf8,<svg fill="blue" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem; /* space for arrow */
}


@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}


@layer components {
    body {
        @apply text-base overflow-x-hidden font-normal;
        -webkit-text-size-adjust: 100%;
    }
    html{
        @apply overflow-x-hidden;
    }

    .blog-details p {
        @apply dark:!text-gray ;
    }
    .blog-details li {
        @apply dark:!text-gray ;
    }

    textarea,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    select {
        @apply block outline-none text-base font-normal text-midnight_text m-0 rounded-[0.375rem] w-full placeholder:text-gray;
    }

    h1 {
        @apply md:text-[51px] md:leading-[1.2] text-[28px] leading-[1.2] font-bold text-midnight_text dark:text-white;
    }

    h2 {
        @apply md:text-[40px] leading-[1.2] text-2xl font-bold text-midnight_text dark:text-white;
    }

    h3 {
        @apply md:text-[28px] leading-[1.2] text-lg font-bold text-white dark:text-primary;
    }

    h4 {
        @apply text-2xl font-bold text-midnight_text dark:text-primary;
    }

    h5 {
        @apply text-[22px] leading-[1.2] font-medium text-midnight_text dark:text-primary;
    }

    .m_icon {
        @apply inline-block h-[3.8125rem] w-[3.4375rem] bg-no-repeat bg-cover object-cover;
    }

    .box_shadow {
        @apply shadow-[0px_3px_20px_0px_#3B4B68];
    }

    .header_shadow {
        @apply shadow-[0_2px_20px_rgba(0, 0, 0, 0.05)];
    }

    section {
        @apply lg:py-24 py-16;
    }

    /* Default Button CSS Start */
    .btn {
        @apply relative border-0 z-[1] py-3 px-4 text-lg font-normal rounded-lg cursor-pointer no-underline bg-primary text-white before:content-[''] before:absolute before:-z-[1] after:content-[''] after:absolute after:-z-[1] hover:bg-blue-700
    }

    /* White Button CSS Start */
    .btn_white {
        @apply relative z-[1] py-[0.85rem] px-[2.3rem] text-17 font-normal rounded-[0.3125rem] cursor-pointer no-underline border-transparent border-2 bg-white text-primary before:content-[''] before:absolute before:-z-[1] after:content-[''] after:absolute after:-z-[1] hover:bg-transparent hover:border-white hover:border-2 hover:text-white
    }

    /* transparent Button CSS Start */
    .btn_trans {
        @apply relative z-[1] py-[0.8rem] px-[2.3rem] text-17 font-normal rounded-[0.3125rem] cursor-pointer no-underline border-2 border-solid border-white text-white before:content-[''] before:absolute before:-z-[1] after:content-[''] after:absolute after:-z-[1] hover:text-white hover:border-transparent hover:bg-white
    }
}

.blog-details p, .blog-details hr {
    @apply mb-8;
}

.blog-details strong {
    @apply font-bold dark:text-white;
}

.blog-details ul {
    @apply mb-8 list-inside list-disc space-y-3;
}

.blog-details ol {
    @apply mb-8 list-inside list-decimal space-y-3;
}

.blog-details h1 {
    @apply mb-8 text-3xl font-bold dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.28];
}

.blog-details h2 {
    @apply mb-8 text-2xl font-bold dark:text-white sm:text-3xl md:text-[35px] md:leading-[1.28];
}

.blog-details h3 {
    @apply mb-6 text-2xl font-bold dark:text-white sm:text-[28px] sm:leading-[40px];
}

.blog-details hr {
    @apply border-border dark:border-dark_border
}

.dark .custom-input{
    background-color: red;
}