/* Construction Website Custom Styles */

/* Custom animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInFromBottom {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInFromLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromRight {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

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

/* Animation classes */
.animate-fade-in {
    animation: fadeIn 0.8s ease-in-out;
}

.animate-slide-up {
    animation: slideInFromBottom 0.8s ease-in-out;
}

.animate-slide-left {
    animation: slideInFromLeft 0.8s ease-in-out;
}

.animate-slide-right {
    animation: slideInFromRight 0.8s ease-in-out;
}

.animate-scroll {
    animation: scrollLeft 15s linear infinite;
    width: max-content;
}

.brands-scroll {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.brands-scroll .brands-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2rem;
    padding: 1rem 0;
}

/* Staggered animations for children */
.stagger-children > * {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }

/* Custom hover effects */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-shadow {
    transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

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

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

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

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

/* Prevent horizontal scrolling */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Ensure slider container has proper padding */
.hero-slider.swiper-container {
    padding: 0 10px;
}

/* Custom input focus styles */
.custom-focus:focus {
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.3);
    outline: none;
}

/* Slider image styles */
.hero-slider .swiper-slide img {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    margin: 10px;
    width: calc(100% - 20px); /* Adjust width to account for margins */
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    position: relative;
    z-index: 5; /* Ensure image is below the text */
}

/* Ensure slider slides have proper spacing */
.hero-slider .swiper-slide {
    padding: 0 5px;
    box-sizing: border-box;
    position: relative;
}

/* Custom button styles */
.btn-primary {
    @apply bg-primary text-white py-2 px-6 rounded-md hover:bg-primary/90 transition-colors font-medium;
}

.btn-secondary {
    @apply bg-secondary text-white py-2 px-6 rounded-md hover:bg-secondary/90 transition-colors font-medium;
}

.btn-outline {
    @apply border border-primary text-primary py-2 px-6 rounded-md hover:bg-primary hover:text-white transition-colors font-medium;
}

/* Custom card styles */
.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
}

/* Product slider image styles */
.product-slider .swiper-slide img {
    position: relative;
    z-index: 5; /* Ensure image is below any text overlay */
}

.card-hover {
    @apply transition-all duration-300 hover:shadow-lg;
}

/* Custom badge styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply bg-primary/10 text-primary;
}

/* Category section styles */
[class*="category"] img {
    position: relative;
    z-index: 5; /* Ensure image is below text overlay */
}

/* Testimonial slider styles */
.testimonial-slider .swiper-slide img {
    position: relative;
    z-index: 5; /* Ensure image is below text overlay */
}

.badge-secondary {
    @apply bg-secondary/10 text-secondary;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

/* Custom section styles */
.section-padding {
    @apply py-16;
}

.section-title {
    @apply text-3xl font-bold text-secondary mb-8 text-center;
}

.section-subtitle {
    @apply text-lg text-gray-600 mb-12 text-center max-w-3xl mx-auto;
}

/* Custom list styles */
.feature-list li {
    @apply flex items-start mb-4;
}

.feature-list li i {
    @apply text-primary mr-3 mt-1;
}

/* Custom divider */
.divider {
    @apply h-px bg-gray-200 my-8;
}

/* Custom overlay styles */
.overlay-dark {
    @apply absolute inset-0 bg-black bg-opacity-50;
}

.overlay-gradient {
    @apply absolute inset-0 bg-gradient-to-r from-black/70 to-black/30;
}

/* Custom text shadow */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Responsive utilities */
@media (max-width: 640px) {
    .section-padding {
        @apply py-10;
    }
    
    .section-title {
        @apply text-2xl mb-6;
    }
    
    .section-subtitle {
        @apply text-base mb-8;
    }
}