@import "bootstrap/dist/css/bootstrap.min.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ROOT STYLE */
@layer base {
    :root {
        --radius: 0.5rem;
        --primary: theme("colors.primary");
        --secondary: theme("colors.secondary");
        --tertiary: theme("colors.tertiary");
        --quaternary: theme("colors.quaternary");
        --light-purple: theme("colors.light-purple");
        --light-secondary: theme("colors.light-secondary");

        --primary-dark: theme("colors.primary-dark");
        --secondary-dark: theme("colors.secondary-dark");
        --tertiary-dark: theme("colors.tertiary-dark");
        --quaternary-dark: theme("colors.quaternary-dark");
        --white: theme("colors.white");

        --font-inter: theme("fontFamily.inter");
        --font-ibm: theme("fontFamily.ibm");
    }
}

/*  HTML STYLES */
html {
    scroll-behavior: smooth;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: var(--font-ibm);
}

html[dir="ltr"] body {
    direction: ltr;
    text-align: left;
    font-family: var(--font-inter);
}

/*  WEBKIT SCROLLBAR STYLES */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background: var(--white);
}

/* LIGHT AND DARK FONT */

.light {
    --font-primary-color: var(--primary);
    background-color: var(--light-secondary);
}

.dark {
    --font-primary-color: var(--primary-dark);
    background-color: var(--primary);
}

/* Custom styling for the body (light & dark mode) */
body {
    background-color: var(--background-color);
    color: var(--font-primary-color);
    overflow-x: hidden;
}

/* CUSTOM CLASSES */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.navlink {
    @apply block h-full no-underline text-sm font-normal lg:px-3 py-3 lg:py-0
}

/* .hover-underline {
    @apply lg:border-b !border-primary dark:!border-primary-dark border-opacity-0 dark:border-opacity-0 hover:border-opacity-100 dark:hover:border-opacity-100
} */

.hover-underline {
    @apply relative
}

.hover-underline::after {
    @apply content-[''] absolute -bottom-2 left-0 w-0 h-[0px] lg:h-[1px] bg-primary dark:bg-primary-dark
}

.hover-underline:hover::after {
    @apply w-full
}

.custom-btn {
    @apply text-sm lg:text-base w-[170px] h-[50px] rounded-tr-[8px] rounded-bl-[8px]
}

.btn-filled {
    @apply bg-primary dark:bg-primary-dark text-primary-dark dark:text-primary
}

.btn-transparent {
    @apply bg-transparent text-primary-dark dark:text-primary
}

.main-heading {
    @apply text-2xl lg:text-7xl font-semibold
}

.sub-heading {
    @apply text-sm lg:text-lg font-bold
}

.sub-text {
    @apply text-sm lg:text-lg font-normal
}

.caption {
    @apply text-sm lg:text-lg font-normal lg:max-w-[680px]
}

.text-green {
    @apply !text-tertiary dark:!text-tertiary-dark
}

.service-circle {
    @apply w-[100px] h-[100px] rounded-full flex items-center justify-center bg-primary dark:bg-secondary-dark
}

.home-circle {
    @apply mb-3 w-[40px] h-[40px] rounded-full flex items-center justify-center bg-[#D9C4E7] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300
}

.move-to-top {
    @apply animate-bounce fixed bottom-4 right-6 w-[50px] h-[50px] rounded-full flex items-center justify-center bg-primary dark:bg-primary-dark
}

.custom-border {
    @apply border border-primary dark:border-primary-dark;
}

.chip {
    @apply px-3 py-1 rounded-full !text-primary dark:!text-primary-dark bg-quaternary dark:bg-quaternary-dark
}

.help-box {
    @apply bg-light-purple rounded-lg p-6 flex items-center justify-center flex-col min-h-[300px]
}

.tab-trigger {
    @apply text-sm lg:text-lg py-2 px-3 !text-primary dark:!text-primary-dark data-[state=active]:!text-white dark:data-[state=active]:!text-white data-[state=active]:!bg-tertiary
}

.testimonial-card {
    @apply relative min-h-[450px] flex flex-col lg:flex-row items-center gap-10 rounded-lg p-8 lg:p-16 !bg-[#F1ECEC] dark:!bg-[#775E7A]
}

.border-left {
    @apply relative before:w-[3px] before:h-[40px] before:bg-primary dark:before:bg-primary-dark before:absolute before:left-0 before:top-2 ps-3
}

.border-right {
    @apply relative before:w-[3px] before:h-[40px] before:bg-primary dark:before:bg-primary-dark before:absolute before:right-0 before:top-1 ps-3
}

.max-w-section {
    @apply max-w-[1440px] ps-[1.5rem] lg:ps-[5rem] pe-[1.5rem] lg:pe-[5rem]
}

.company-slider {
    @apply py-[25px] bg-transparent dark:bg-primary-dark
}

.form-control {
    @apply text-sm lg:text-base text-primary dark:text-primary-dark focus:shadow-none hover:shadow-none placeholder-primary dark:placeholder-primary-dark border !border-primary dark:!border-primary-dark !bg-light-secondary dark:!bg-primary rounded-tl-[0px] rounded-tr-[8px] rounded-bl-[8px] rounded-br-[0px] py-3
}

.slick-slide {
    padding: 0 15px;
}
 
[id] {
    scroll-margin-top: 100px;
}

@media (max-width: 993px) {
    [id] {
        scroll-margin-top: 200px;
    }
}

.banner .carousel-indicators,
.banner .carousel-control-prev,
.banner .carousel-control-next {
    display: none;
}


.testimonial-carousel .carousel-control-next-icon,
.testimonial-carousel .carousel-control-prev-icon {
   @apply hidden;
}

.testimonial-carousel .carousel-indicators button {
    @apply w-[10px] h-[10px] rounded-[100%] bg-primary/30 dark:bg-primary-dark/30;
}

.testimonial-carousel .carousel-indicators button.active {
    @apply bg-primary dark:bg-primary-dark;
}