/* Custom styles to supplement Tailwind */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Animated Border Drawing Effect */
@keyframes borderDraw {
    0% {
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-top-color: transparent;
        border-right-color: transparent;
    }
    25% {
        border-bottom-color: #191a20;
        border-left-color: transparent;
        border-top-color: transparent;
        border-right-color: transparent;
    }
    50% {
        border-bottom-color: #191a20;
        border-left-color: #191a20;
        border-top-color: transparent;
        border-right-color: transparent;
    }
    75% {
        border-bottom-color: #191a20;
        border-left-color: #191a20;
        border-top-color: #191a20;
        border-right-color: transparent;
    }
    100% {
        border-bottom-color: #191a20;
        border-left-color: #191a20;
        border-top-color: #191a20;
        border-right-color: #191a20;
    }
}

.animate-border-draw {
    animation: borderDraw 0.8s ease-out forwards;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Fade in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

/* Carousel custom styles for full image display */
#hero-carousel .carousel-slide-container {
    width: 100%;
    background: #000;
    height: 600px;
    /* Optimized for 1900x600 images (3.17:1 aspect ratio) */
    transition: height 0.3s ease;
}

#hero-carousel .carousel-slide-container .relative {
    width: 100%;
    height: 100%;
}

#hero-carousel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Use cover to fill container completely */
    position: absolute;
    top: 0;
    left: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    /* Use auto for better quality with cover */
}

/* Responsive Breakpoints */

/* Large Desktops - Full 1900x600 display */
@media (min-width: 1400px) {
    #hero-carousel .carousel-slide-container {
        height: 600px;
        /* Native height for 1900x600 images */
    }
}

/* Desktop / Large Tablets - Scaled proportionally */
@media (max-width: 1200px) {
    #hero-carousel .carousel-slide-container {
        height: 480px;
        /* 80% scale maintaining 3.17:1 ratio */
    }
}

/* Tablets / Small Laptops - Further scaled */
@media (max-width: 1024px) {
    #hero-carousel .carousel-slide-container {
        height: 400px;
        /* 67% scale maintaining aspect ratio */
    }
}

/* Mobile Landscape / Large Phones */
@media (max-width: 768px) {
    #hero-carousel {
        margin: 0 -1rem;
        border-radius: 0;
        width: 100vw;
        /* Use full viewport width */
        left: 50%;
        transform: translateX(-50%);
        /* Center the carousel */
    }

    #hero-carousel .rounded-2xl {
        border-radius: 0;
    }

    #hero-carousel .carousel-slide-container {
        height: 300px;
        /* 50% scale for mobile landscape */
        width: 100%;
    }

    /* Adjust controls for mobile */
    #hero-carousel button[data-carousel-prev],
    #hero-carousel button[data-carousel-next] {
        padding: 0 1rem;
    }

    #hero-carousel button[data-carousel-prev] span,
    #hero-carousel button[data-carousel-next] span {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Mobile Portrait / Medium Phones */
@media (max-width: 640px) {
    #hero-carousel {
        margin: 0;
        padding: 0;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        /* Ensure full width and centering */
    }

    #hero-carousel .carousel-slide-container {
        height: 250px;
        /* 42% scale for mobile portrait */
        width: 100%;
    }

    /* Adjust indicators for mobile */
    #hero-carousel .absolute.z-30.flex {
        bottom: 1rem;
        gap: 0.5rem;
    }

    #hero-carousel .absolute.z-30.flex button {
        width: 0.5rem;
        height: 0.5rem;
    }
}

/* Mobile Portrait / Small Phones */
@media (max-width: 480px) {
    #hero-carousel {
        margin: 0;
        padding: 0;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        /* Ensure full width and centering */
    }

    #hero-carousel .carousel-slide-container {
        height: 200px;
        /* 33% scale for small phones */
        width: 100%;
    }

    /* Further adjust controls for very small screens */
    #hero-carousel button[data-carousel-prev],
    #hero-carousel button[data-carousel-next] {
        padding: 0 0.5rem;
    }

    #hero-carousel button[data-carousel-prev] span,
    #hero-carousel button[data-carousel-next] span {
        width: 2rem;
        height: 2rem;
    }
}

/* Ultra Small Phones */
@media (max-width: 360px) {
    #hero-carousel {
        margin: 0;
        padding: 0;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        /* Ensure full width and centering */
    }

    #hero-carousel .carousel-slide-container {
        height: 160px;
        /* 27% scale for ultra small phones */
        width: 100%;
    }
}