/* Custom CSS for BD Motor Website */
.gradient-gold {
    background: linear-gradient(135deg, #D4AF37 0%, #B8941F 100%);
}

.text-gradient {
    background: linear-gradient(135deg, #D4AF37 0%, #B8941F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2);
}

.wave-divider {
    /*
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='goldGradient' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23FFD700'/%3E%3Cstop offset='50%25' stop-color='%23DAA520'/%3E%3Cstop offset='100%25' stop-color='%23B8860B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z' fill='url(%23goldGradient)'%3E%3C/path%3E%3C/svg%3E") no-repeat;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='goldGradient' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFD700'/%3E%3Cstop offset='50%25' stop-color='%23DAA520'/%3E%3Cstop offset='100%25' stop-color='%23B8860B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z' fill='url(%23goldGradient)'%3E%3C/path%3E%3C/svg%3E") no-repeat;
    */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cdefs%3E%3ClinearGradient id='goldSilverGradient' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23FFD700'/%3E%3Cstop offset='25%25' stop-color='%23C0C0C0'/%3E%3Cstop offset='50%25' stop-color='%23DAA520'/%3E%3Cstop offset='75%25' stop-color='%23C0C0C0'/%3E%3Cstop offset='100%25' stop-color='%23B8860B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath d='M1000 100C500 100 500 64 0 64V0h1000v100Z' opacity='.5' fill='url(%23goldSilverGradient)'%3E%3C/path%3E%3Cpath d='M1000 100C500 100 500 34 0 34V0h1000v100Z' opacity='.5' fill='url(%23goldSilverGradient)'%3E%3C/path%3E%3Cpath d='M1000 100C500 100 500 4 0 4V0h1000v100Z' fill='url(%23goldSilverGradient)'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat;
    background-size: cover;
    height: 120px;
    width: 100%;
    position: relative;
    
    z-index: 1; 
    pointer-events: none;
}

/* Additional Performance Optimizations */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    loading: lazy;
}

/* Smooth scrolling for better UX */
html {
    scroll-behavior: smooth;
}

/* Focus states for accessibility */
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid #D4AF37;
    outline-offset: 2px;
}

/* Extra CSS to make the buttons more interactive */
/* New CSS for Shimmer Animation */
.shimmer-gold {
    position: relative;
    overflow: hidden;
}

.shimmer-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: skewX(-20deg);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}