/* Custom styles for Zayloft website */

/* Global resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #1f2937; /* Tailwind gray-800 */
}

/* Hero Section with Vanta.js */
.hero-gradient {
    background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
    position: relative;
    z-index: 10; /* Ensure hero content is above Vanta.js canvas */
    overflow: hidden;
}

/* Ensure Vanta.js canvas doesn't obscure content */
#vanta-globe canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Ensure hero content is visible */
#vanta-globe > div {
    position: relative;
    z-index: 10;
}

/* Service Card Hover Effects */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Mobile Menu */
#mobile-menu {
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

#mobile-menu.active {
    max-height: 500px; /* Adjust based on content height */
}

/* Payment Method Selection */
.payment-method {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.payment-method:hover {
    transform: scale(1.05);
    border-color: #4f46e5; /* Tailwind indigo-600 */
}

/* Fallback Content for Vanta.js */
.fallback-content {
    display: none;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    position: relative;
    z-index: 20;
}

/* Ensure AOS animations don't hide content prematurely */
[data-aos] {
    opacity: 1 !important; /* Fallback to ensure visibility */
    transition-property: opacity, transform;
}

[data-aos].aos-animate {
    opacity: 1 !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-gradient {
        padding-top: 6rem; /* Adjust for mobile navigation */
    }

    #vanta-globe {
        min-height: 400px; /* Prevent hero section collapse */
    }

    .service-card {
        margin-bottom: 1.5rem;
    }
}

/* Accessibility Enhancements */
:focus {
    outline: 2px solid #4f46e5; /* Tailwind indigo-600 */
    outline-offset: 2px;
}

a:hover {
    text-decoration: underline;
}

/* Ensure images are responsive and don't break layout */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Prevent layout shifts */
}

/* Footer styling */
footer {
    background-color: #1e3a8a; /* Tailwind indigo-900 */
}

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