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

/* .underline-black {
    text-decoration-color: black;
}

.underline-offset {
    text-underline-offset: 20px;
} */

.no-scroll {
    overflow: hidden;
}

  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Custom CSS for border color when clicked */
.border-light-blue-500 {
    border-color: #3b82f6; /* Adjust the color to your needs */
}

/* Ensure scale effect on click */
.scale-105 {
    transform: scale(1.05);
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px); /* Start from the left */
    }
    25%{
        opacity: 0.25;
        transform: translateX(-15px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-10px); /* Move partially to the right */
    }
    75% {
        opacity: 0.75;
        transform: translateX(-5px); /* Move partially to the right */
        }
    100% {
        opacity: 1;
        transform: translateX(0); /* Move to original position */
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0); /* Start from original position */
    }
    25% {
        opacity: 0.75;
        transform: translateX(5px); /* Move partially to the left */
        }
    50% {
        opacity: 0.5;
        transform: translateX(10px); /* Move partially to the left */
    }
    75% {
        opacity: 0.25;
        transform: translateX(15px); /* Move partially to the left */
    } 
    100% {
        opacity: 0;
        transform: translateX(20px); /* Move out of view to the right */
    }
}

/* Class for fading in from the left */
.fade-in-left {
    animation: fadeInLeft 1s ease-in-out; /* Animation for fading in */
}

/* Class for fading out to the right */
.fade-out-right {
    animation: fadeOutRight 1s ease-in-out; /* Animation for fading out */
}


    .tab-button.active {
        background-color: #02ffd5; /* Adjust the color as needed */
        color: #fff;
    }

    html{
        scroll-behavior: smooth;
    }

    body {
        overflow-x: hidden;
    }
    
    

    /* In your global stylesheet or within Tailwind's config file */
.glassmorphism {
    backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Optional: border for more effect */
}