/* Custom Logo */
.logo {
    width: 250px;
}

/* Custom Styles for elements not easily handled by standard Tailwind classes */
.hero-bg {
    background-image: linear-gradient(to right, rgba(8, 63, 84, 0.9), rgba(8, 63, 84, 0.6)), url('../images/banner-madi.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Nav Transition */
#navbar {
    transition: all 0.3s ease-in-out;
}
.nav-scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Card Hover Effects */
.product-card, .service-card {
    transition: all 0.3s ease;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.service-card:hover {
    background-color: #083F54;
    color: white;
}
.service-card:hover .service-icon {
    color: #8FB091;
}
.service-card:hover h3 {
    color: #e2e8f0;
}
.service-card:hover p {
    color: #e2e8f0;
}

/* Preloader Animation */
@keyframes load-bar {
    0% { width: 0%; left: 0; }
    50% { width: 100%; left: 0; }
    100% { width: 0%; left: 100%; }
}
.animate-load-bar {
    position: relative;
    animation: load-bar 1.5s ease-in-out infinite;
}

/* Custom Cursor para la Galería */
#custom-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    width: 48px;
    height: 48px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #083F54;
    font-size: 1.2rem;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    will-change: left, top, transform;
}
#custom-cursor.active {
    transform: translate(-50%, -50%) scale(1);
}
/* Ocultar el cursor por defecto en la galería */
.gallery-item, .gallery-item * {
    cursor: none !important;
}

@media(max-width:720px){
    /*Custom Logo*/
    .logo{
        width: 133px;
    }
}