@import 'tailwindcss';
@tailwind components;
@tailwind utilities;

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Times New Roman', Times, serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.pricing-card:hover {
    transform: scale(1.03);
}

/* --- Swiper Custom Styling --- */
.news-swiper {
    padding-bottom: 40px;
}

.news-swiper .swiper-button-next,
.news-swiper .swiper-button-prev {
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: rgba(255, 0, 0, 0.5);
    border-radius: 50%;
}

.news-swiper .swiper-button-next:after,
.news-swiper .swiper-button-prev:after {
    font-size: 16px;
    color: white;
}

.news-swiper .swiper-pagination {
    bottom: 100 !important;
}

/* resources/css/app.css */
.company-swiper .swiper-pagination {
    position: relative;
    margin-top: 10px;
}


.range-input {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 32px; /* taller hit area */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* disable track clicks */
}
.range-input::-webkit-slider-runnable-track {
    background: transparent;
}
.range-input::-moz-range-track {
    background: transparent;
}

/* Thumbs */
.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: #000000; /* blue like your screenshot */
    border: 2px solid white;
    box-shadow: 0 0 0 2px #000000; /* ring for contrast */
    pointer-events: auto; /* drag works */
}
.range-input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: #000000;
    border: 2px solid white;
}

/* Input states */
.input-dark {
  @apply bg-transparent text-white placeholder-current border-gray-300;
}

.input-light {
  @apply bg-white text-black placeholder-black border-black;
}

#progress-bar {
    width: 0%;
    transition: width 0.2s linear; /* add duration */
}

progress {
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
}
progress::-webkit-progress-bar {
  background-color: #e5e7eb; /* gray-300 */
  border-radius: 4px;
}
progress::-webkit-progress-value {
  background-color: black;
  border-radius: 4px;
}
progress::-moz-progress-bar {
  background-color: black;
  border-radius: 4px;
}