/* Custom styles for the towing theme */
html,
body {
    overflow-x: hidden;
    width: 100vw;
    position: relative;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f7f7f7;
    scroll-behavior: smooth;
    /* Prevent horizontal scroll due to animations */
}

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

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

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #dc2626;
    /* Toggle red on scrollbar hover */
}


.hero-bg {
    /* Placeholder for a professional towing image */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://vanporttowingandrecovery.com/towing-banner.jpg');
    background-size: cover;
    background-position: center;
}

@media (max-width: 768px) {
    .hero-bg {
        /* Adjust positioning to keep the main truck subjects in frame on smaller screens */
        background-position: 65% center;
    }
}

.about-bg {
    /* Background for About section - Image with full overlay for contrast */
    background-image: url('https://vanporttowingandrecovery.com/vanport-tow-truck.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: right;
    /* Left justification applied here */
    background-attachment: scroll;
}

@media (max-width: 768px) {
    .about-bg {
        background-image: none !important;
    }
}

.cta-button {
    transition: transform 0.2s, box-shadow 0.2s;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.5);
    /* Red shadow */
}

.section-anchor {
    scroll-margin-top: 100px;
    /* Offset for sticky header */
}

/* --- Active Navigation State --- */
.active-link {
    color: #dc2626 !important;
    border-bottom: 2px solid #dc2626;
    font-weight: 700;
}

#mobile-menu .active-link {
    color: #dc2626 !important;
    border-bottom: none;
    font-weight: 700;
    background-color: #fef2f2;
    border-radius: 0.5rem;
}

/* --- Premium UI Enhancements --- */

/* Glassmorphism - For overlapping data cards on images (e.g. recovery page) */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-panel-dark {
    background: rgba(17, 24, 39, 0.85);
    /* Tailwind gray-900 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gentle hovering floating animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

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

/* Accordion Specific CSS */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, margin-top 0.3s ease-in-out;
}

.accordion-icon {
    transition: transform 0.3s ease-in-out;
}

/* Premium Card Hover State */
.premium-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #ef4444;
    /* Tailwind red-500 */
}