@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

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

@layer base {
    body {
        @apply font-body text-[#141820];
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-heading;
    }
}

@layer components {
    #header .nav-link {
        @apply py-1.5 px-2.5 text-black hover:bg-gray-200 rounded;
    }

    .prose-list {
        @apply prose-li:relative prose-li:pl-7 prose-li:after:absolute prose-li:after:left-0 prose-li:after:top-1/2 prose-li:after:-translate-y-1/2 prose-li:after:size-5 prose-li:after:bg-contain;
    }

    .sectionGap {
        @apply py-12 md:py-16 lg:py-[100px];
    }

    .sectionDiv {
        @apply text-center max-w-[689px] mx-auto mb-8 lg:mb-[52px];
    }

    .sectionTitle {
        @apply font-heading font-extrabold text-header text-2xl sm:text-3xl md:text-4xl lg:text-5xl mb-1 [&_br]:hidden [&_br]:lg:block [&_span]:text-primary;
    }

    .serviceSubTitle {
        @apply text-2xl md:text-4xl font-semibold mb-3;
    }

    .sectionSub {
        @apply relative pl-10 mb-3 tracking-widest font-semibold uppercase text-xs after:absolute after:left-0 after:top-1/2 after:-translate-y-1/2 after:h-px after:w-8 after:bg-[#141820];
    }

    .flexCenter {
        @apply flex items-center justify-center;
    }

    .flexItemCenter {
        @apply flex items-center;
    }

    .primary-btn {
        @apply relative z-[1] whitespace-nowrap font-semibold shrink-0 tracking-wider uppercase overflow-hidden inline-flex gap-2.5 cursor-pointer items-center justify-center bg-primary px-6 rounded py-2.5 text-white  after:absolute after:h-0 after:w-0 after:rounded-full after:bg-white after:opacity-10 after:z-[-1] after:transition-all after:duration-300 after:ease-out hover:after:h-80 hover:after:w-80;
    }

    .secondary-btn {
        @apply primary-btn bg-darkblue;
    }

    .outline-btn {
        @apply primary-btn border bg-transparent after:bg-primary after:opacity-100 text-black hover:text-white;
    }

    .btnOutline {
        @apply bg-transparent border-primary text-tertiary;
    }

    .inputField {
        @apply border border-gray-300 w-full outline-none px-3 py-2 md:px-5 md:py-[14px] text-base text-bluegray rounded focus:shadow-none;
    }

    .billingInputField {
        @apply placeholder:text-[#C8C8C8] text-sm  border-[#D9D9D9] focus:ring-primary focus:border-primary rounded py-3 md:py-[14px] pl-3 md:pl-5 w-full;
    }

    .categoryItem:hover .bgWhite {
        @apply fill-white;
    }

    .categoryItem:hover .bgWhite {
        @apply stroke-white;
    }

    .caseTab {
        @apply bg-[#1844CB]  text-lg rounded text-white border border-[#1844CB] py-2.5 px-10 relative z-[1] after:visible after:absolute after:left-[50%] after:translate-x-[-50%] after:-bottom-2 after:h-5 after:w-5 after:rounded-sm after:bg-[#1844CB] after:rotate-45 after:z-[-1];
    }

    .alert-danger {
        @apply text-red-600 text-sm;
    }

    .navCollapseBtn {
        @apply flex items-center w-full justify-between text-[#333333] hover:text-primary duration-300 font-medium;
    }
    .pricing-btn {
        @apply flex items-center justify-center w-full py-[14px] mt-8 mb-7 border border-primary font-bold  text-[#212121] rounded-[100px] my-[42px] transition-all duration-500;
    }

    .sitelist-dropdown {
        @apply px-4 py-[15px] font-normal text-[#627193] rounded-lg border border-[#00005C80] focus:ring-0 focus:bg-darkblue focus:border-[#00005C80] focus:text-[#F1F1F1E5] cursor-pointer leading-[19px];
    }

    .footerNavTitle {
        @apply relative text-xl font-bold mb-3 text-white;
    }

    .footerNavLink {
        @apply relative inline-flex items-center text-base gap-2 duration-500 hover:ml-1 hover:text-white;
    }

    [drawer-backdrop],
    [modal-backdrop] {
        @apply !bg-black/80 !z-[9999];
    }

    .action-btn {
        @apply h-8 w-8 rounded cursor-pointer duration-300 flex items-center justify-center;
    }

    .show-action-btn {
        @apply action-btn bg-blue-600/20 text-blue-600 hover:bg-blue-600 hover:text-white;
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

.showDrpDown {
    max-height: 100vh;
}

.chevronUpDown {
    rotate: 180deg;
}

.swiper-slide.swiper-slide-active .bannerHeading {
    transform: translateY(0px);
}

.swiper-slide .bannerHeading {
    transition: 0.8s;
    transform: translateY(50px);
}

.swiper-slide .bannerHeading span {
    color: #ffc221;
}
input[type="radio"] {
    color: black;
}
input[type="radio"]:focus {
    border-color: black !important;
    color: black !important;
    box-shadow: none !important;
}

#dropdownHover ul li a {
    color: black !important;
}

#swiper-pagination {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5px;
    width: auto !important;
}

.swiper-pagination-bullets {
    bottom: auto !important;
    top: auto !important;
}

.swiper-pagination-bullet {
    position: relative;
    border-radius: 100%;
    height: 14px !important;
    width: 14px !important;
    text-align: center;
    opacity: 1;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    opacity: 1 !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    border-color: white !important;
    background-color: white !important;
}

/* ========================================== */
/* Badge Style */
/* ========================================== */
.badge {
    @apply [--badge-color:#000000] inline-block px-2.5 py-1 font-medium text-xs bg-transparent border border-[var(--badge-color)] rounded-[20px] text-[var(--badge-color)] relative capitalize z-[1];
}

.badge.badge-primary {
    --badge-color: #00a2ff;
}

.badge.badge-secondary {
    --badge-color: #595959;
}

.badge.badge-success {
    --badge-color: #09893f;
}

.badge.badge-danger {
    --badge-color: #ff0000;
}

.badge.badge-warning {
    --badge-color: #fda201;
}

.badge.badge-basic {
    --badge-color: #0377a5;
}

.badge.badge-standard {
    --badge-color: #9304be;
}

.badge.badge-premium {
    --badge-color: #d85002;
}
.badge::after {
    @apply absolute left-0 top-0 size-full bg-[var(--badge-color)] rounded-[20px] opacity-20 z-[-1];
}

/* table part from database  */
.dataTables_wrapper {
    @apply overflow-x-auto;
}
select:not([size]) {
    @apply rounded-lg;
}
select:not([size]):focus {
    @apply outline-none border-secondary;
}