/* Tailwind CSS configuration and design system */

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL. */
:root {
    --background: 0 0% 100%;
    --foreground: 210 24% 16%;

    --card: 0 0% 100%;
    --card-foreground: 210 24% 16%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 24% 16%;

    /* #E30613 - Brand Red */
    --primary: 355 95% 45%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 355 95% 65%;
    --primary-dark: 355 95% 35%;

    /* Darker Brand Red - Complementary */
    --secondary: 355 95% 40%;
    --secondary-foreground: 0 0% 100%;
    --secondary-light: 355 95% 60%;

    /* Brand Red accent tones */
    --accent: 355 80% 90%;
    --accent-foreground: 355 60% 30%;
    --accent-warm: 355 70% 70%;

    --muted: 210 20% 96%;
    --muted-foreground: 210 15% 45%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 210 20% 90%;
    --input: 210 20% 95%;
    --ring: 200 95% 45%;

    /* Custom gradients */
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    --gradient-card: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted)));
    --gradient-accent: linear-gradient(45deg, hsl(355 70% 60%), hsl(355 80% 40%));

    /* Custom shadows */
    --shadow-soft: 0 4px 20px hsl(var(--primary) / 0.1);
    --shadow-hover: 0 8px 30px hsl(var(--primary) / 0.15);
    --shadow-card: 0 2px 10px hsl(210 20% 16% / 0.08);

    --radius: 0.75rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
}

/* Tailwind CSS utility classes using CSS variables */
.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.bg-primary { background-color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.text-secondary { color: hsl(var(--secondary)); }
.bg-secondary\/90 { background-color: hsl(var(--secondary) / 0.9); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.border-border { border-color: hsl(var(--border)); }
.bg-accent { background-color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.bg-accent\/30 { background-color: hsl(var(--accent) / 0.3); }
.border-primary { border-color: hsl(var(--primary)); }
.border-primary\/20 { border-color: hsl(var(--primary) / 0.2); }

/* Gradient backgrounds */
.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-card { background: var(--gradient-card); }
.bg-gradient-accent { background: var(--gradient-accent); }

/* Shadow utilities */
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-hover { box-shadow: var(--shadow-hover); }
.shadow-card { box-shadow: var(--shadow-card); }

/* Navigation styles */
.nav-link.active {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: var(--shadow-soft);
}

.nav-link:not(.active):hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.mobile-nav-link.active {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.mobile-nav-link:not(.active):hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* Page transitions */
.page-content {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.page-content.hidden {
    opacity: 0;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Carousel styles */
.carousel-slide {
    transition: opacity 0.7s ease-in-out;
}

/* Star icon fill */
[data-lucide="star"].fill-current {
    fill: currentColor;
    stroke: none;
}

.carousel-indicator.active {
    background-color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.carousel-indicator {
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.carousel-indicator:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

/* Button hover effects */
button:hover {
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Custom scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Reviews auto-scrolling */
#reviews-container {
    display: flex;
    width: max-content;
    animation: scroll-reviews 30s linear infinite;
    will-change: transform;
}

@keyframes scroll-reviews {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Testimonials carousel */
#testimonials-carousel {
    will-change: transform;
}

.testimonial-slide {
    transition: all 0.5s ease;
}

.min-w-1\/4 {
    min-width: 25%;
}

.min-w-1\/2 {
    min-width: 50%;
}

@media (max-width: 768px) {
    #reviews-container {
        animation-duration: 20s;
    }
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

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

/* FAQ Styles */
.faq-item {
    transition: all 0.3s ease;
}

.faq-question {
    cursor: pointer;
}

.faq-question:hover {
    background-color: hsl(var(--accent) / 0.2);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer:not(.hidden) {
    max-height: 500px;
}

.faq-icon {
    transition: transform 0.3s ease;
}


/* Gallery Carousel Smooth Scrolling */
#gallery-carousel {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

.gallery-slide {
    transition: all 0.3s ease;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.gallery-slide img {
    transition: transform 0.3s ease;
    backface-visibility: hidden;
}

.gallery-slide:hover img {
    transform: scale(1.02);
}

/* Smooth scroll behavior for gallery */
.gallery-container {
    scroll-behavior: smooth;
    overflow: hidden;
}

/* Prevent weird scrolling on touch devices */
#gallery-carousel {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.gallery-scroll:hover {
    animation-play-state: paused;
}





/* Language transition effects */
[data-i18n] {
    transition: opacity 0.2s ease-in-out;
}

.language-changing [data-i18n] {
    opacity: 0.7;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .gallery-scroll {
        animation-duration: 20s;
    }

}
#gallery-image {
    height: 24rem;
   
}