/*
 * Alom Steel Custom Styles
 * 
 * Note: Main styling is handled by Tailwind CSS (CDN).
 * This file is for overrides and custom components.
 */

/* Swiper Slider Customization */
.swiper-button-next,
.swiper-button-prev {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    background-color: rgba(0,0,0,0.2);
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(220, 38, 38, 0.8); /* Red hover */
    transform: scale(1.1);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 20px !important;
    font-weight: bold;
}

.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background-color: white !important;
    opacity: 0.5 !important;
}

.swiper-pagination-bullet-active {
    background-color: #dc2626 !important; /* Secondary Red */
    opacity: 1 !important;
    width: 24px !important;
    border-radius: 6px !important;
}

/* Button Component Styles */
.btn-primary {
    background-color: #dc2626; /* Secondary Color */
    color: white;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: #b91c1c; /* Darker Red */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}