/* Enhanced Home Page Styles for Dusty Helmets */

/* Import Google Fonts for Better Typography */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700;800&family=Fredoka+One:wght@400&family=Bungee:wght@400&family=Righteous:wght@400&display=swap');

/* Root Variables for Consistent Colors */
:root {
    --primary-color: #fbaf32;
    --secondary-color: #4E5E30;
    --accent-color: #006FCD;
    --dark-green: #719a0a;
    --text-dark: #1e2714;
    --text-gray: #757575;
    --terrain-overlay: rgba(75, 94, 48, 0.1);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --terrain-gradient: linear-gradient(135deg, rgba(251, 175, 50, 0.1) 0%, rgba(113, 154, 10, 0.1) 100%);
}

/* Fun Typography for Service Cards */
.services__item h4 {
    font-family: 'Righteous', cursive;
    font-size: 1.4rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    text-shadow: 1px 1px 0px rgba(251, 175, 50, 0.2);
}

/* Fun Typography for Profile Card */
.profile-card-5 h4 {
    font-family: 'Bungee', cursive;
    font-size: 1.6rem;
    color: var(--primary-color);
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}

/* Terrain Background Patterns */
.terrain-bg {
    position: relative;
    overflow: hidden;
}

.terrain-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cg fill='%23fbaf32' opacity='0.1'%3E%3Cpath d='M100 200C150 180 180 220 220 200C260 180 290 240 340 220C380 200 420 260 460 240C500 220 540 280 580 260C620 240 660 300 700 280C740 260 780 320 820 300C860 280 900 340 940 320V400H60V200Z'/%3E%3Cpath d='M50 350C90 330 120 370 160 350C200 330 230 390 280 370C320 350 360 410 400 390C440 370 480 430 520 410C560 390 600 450 640 430C680 410 720 470 760 450C800 430 840 490 880 470V550H10V350Z'/%3E%3Ccircle cx='150' cy='150' r='20'/%3E%3Ccircle cx='350' cy='100' r='15'/%3E%3Ccircle cx='550' cy='180' r='18'/%3E%3Ccircle cx='750' cy='120' r='12'/%3E%3Ccircle cx='850' cy='200' r='25'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='%23fbaf32' opacity='0.08'%3E%3Cpath d='M80 400C120 380 150 420 190 400C230 380 260 440 310 420C350 400 390 460 430 440C470 420 510 480 550 460C590 440 630 500 670 480C710 460 750 520 790 500V600H40V400Z'/%3E%3Cpolygon points='200,300 220,280 240,300 220,320'/%3E%3Cpolygon points='400,250 425,230 450,250 425,270'/%3E%3Cpolygon points='600,320 630,300 660,320 630,340'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 600px 600px, 400px 400px;
    background-position: 0 0, 300px 200px;
    animation: terrainFloat 25s ease-in-out infinite;
    z-index: -1;
}

@keyframes terrainFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
        opacity: 0.3;
    }
    50% { 
        transform: translateY(-20px) rotate(1deg); 
        opacity: 0.5;
    }
}

/* Enhanced Hero Section */
.hero-section {
    position: relative;
    margin-top: -80px;
    min-height: 65vh;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow: hidden;
    background: #000;
}

.hero-carousel-container {
    width: 100%;
    height: 65vh;
    position: relative;
}

/* Owl Carousel Customization */
.hero-carousel .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 100%;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.hero-carousel .owl-nav button {
    background: rgba(251, 175, 50, 0.15) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 1.5rem !important;
    transition: all 0.3s ease;
    pointer-events: all;
    display: flex !important;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.hero-carousel .owl-nav button:hover {
    background: rgba(251, 175, 50, 0.25) !important;
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(251, 175, 50, 0.4);
}

.hero-carousel .owl-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.5rem;
}

.hero-carousel .owl-dot {
    background: rgba(255, 255, 255, 0.5) !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease;
    border: 2px solid rgba(251, 175, 50, 0.15) !important;
}

.hero-carousel .owl-dot.active,
.hero-carousel .owl-dot:hover {
    background: rgba(251, 175, 50, 0.15) !important;
    transform: scale(1.2);
}

.hero-slide {
    position: relative;
    min-height: 65vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.parallax-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) contrast(1.2) saturate(1.1);
    transition: all 0.3s ease;
    transform: scale(1.1);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(78, 94, 48, 0.5) 30%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(251, 175, 50, 0.05) 100%
    );
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 2rem;
}

.hero-content-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.hero-title {
    margin-bottom: 2rem;
    animation: heroTitleSlide 1s ease-out;
}

.hero-brand {
    font-family: 'Oswald', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
    display: block;
    margin-bottom: 0.5rem;
    position: relative;
}

.hero-brand::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--dark-green));
    border-radius: 2px;
    animation: underlineSlide 1.5s ease-out;
}

.hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--primary-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: heroTextFade 1s ease-out 0.3s both;
}

.hero-description {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    margin: 2rem auto;
    max-width: 600px;
    animation: heroTextFade 1s ease-out 0.6s both;
}

.hero-description p {
    margin-bottom: 1rem;
}

.hero-actions {
    margin: 3rem 0;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: heroTextFade 1s ease-out 0.9s both;
}

.hero-btn {
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
}

.hero-btn:hover {
    transform: translateY(-3px);
    text-decoration: none;
}

.primary-btn.hero-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--dark-green));
    color: white;
    box-shadow: 0 8px 25px rgba(251, 175, 50, 0.4);
}

.primary-btn.hero-btn:hover {
    box-shadow: 0 12px 35px rgba(251, 175, 50, 0.6);
    color: white;
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.primary-btn.hero-btn:hover .btn-shine {
    left: 100%;
}

.secondary-btn.hero-btn-outline {
    background: transparent;
    color: white;
    border: 2px solid var(--primary-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.secondary-btn.hero-btn-outline:hover {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 12px 35px rgba(251, 175, 50, 0.4);
}

.hero-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 4rem;
    flex-wrap: wrap;
    animation: heroTextFade 1s ease-out 1.2s both;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    line-height: 1;
}

.stat-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
}

.stat-divider {
    width: 2px;
    height: 50px;
    background: linear-gradient(180deg, transparent, var(--primary-color), transparent);
}

@keyframes heroTitleSlide {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes underlineSlide {
    from {
        width: 0%;
    }
    to {
        width: 200px;
    }
}

@keyframes heroTextFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Feature Section */
.feature {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
}

.feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fbaf32' fill-opacity='0.02' fill-rule='evenodd'%3E%3Cpath d='M20 20c0-11.046-8.954-20-20-20v40c11.046 0 20-8.954 20-20zM0 20c11.046 0 20 8.954 20 20H0V20z'/%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
}

.feature > .container {
    position: relative;
    z-index: 1;
}

/* Enhanced Section Headers */
.section-header {
    margin-bottom: 3rem;
    text-align: center;
}

.section-header p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.section-header h2 {
    font-family: 'Fredoka One', cursive;
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--secondary-color);
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 0px rgba(251, 175, 50, 0.3);
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--dark-green));
    border-radius: 2px;
}

/* Enhanced Profile Card */
.profile-card-5 {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: var(--card-shadow) !important;
    overflow: hidden;
    transition: all 0.4s ease;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
    position: relative;
}

.profile-card-5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--dark-green));
    z-index: 2;
}

.profile-card-5:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

.profile-card-5 .card-img-block {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    margin: 1rem;
    top: 0;
}

.profile-card-5 .card-img-block img {
    border-radius: 15px;
    transition: all 0.4s ease;
    filter: brightness(0.95) contrast(1.05);
}

.profile-card-5:hover .card-img-block img {
    transform: scale(1.05);
    filter: brightness(1) contrast(1.1);
}

.profile-card-5 h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--secondary-color) !important;
    margin-bottom: 1rem;
    position: relative;
}

.profile-card-5 .card-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-gray);
    margin-bottom: 1.5rem;
}

/* Enhanced Service Cards */
.hh {
    border: none !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
    box-shadow: var(--card-shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.hh::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--dark-green));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 1;
}

.hh:hover::before {
    transform: scaleX(1);
}

.hh:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-bottom: none !important;
}

/* Enhanced Service Icons */
.services__item__icon {
    position: relative;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    margin: 0 auto 1.5rem auto;
    background: linear-gradient(135deg, var(--primary-color), var(--dark-green));
    border-radius: 50%;
    transition: all 0.4s ease;
}

.services__item__icon i {
    color: white !important;
    font-size: 35px;
    transition: all 0.3s ease;
}

.services__item__icon::after {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 90px;
    height: 90px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    content: "";
    opacity: 0;
    transition: all 0.4s ease;
}

.services__item:hover .services__item__icon {
    transform: scale(1.1);
    box-shadow: 0 10px 25px rgba(251, 175, 50, 0.3);
}

.services__item:hover .services__item__icon::after {
    opacity: 1;
    transform: scale(1.1) rotate(360deg);
}

.services__item:hover .services__item__icon i {
    transform: rotate(-360deg) scale(1.1);
}

/* Enhanced Typography */
.hh h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--secondary-color) !important;
    margin-bottom: 1rem;
    text-align: center;
}

.hh .card-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-gray);
    text-align: center;
}

/* Enhanced Buttons */
.primary-btn, #bbt {
    font-family: 'Poppins', sans-serif !important;
    background: linear-gradient(135deg, var(--primary-color), var(--dark-green)) !important;
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.primary-btn::before, #bbt::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.primary-btn:hover, #bbt:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(251, 175, 50, 0.4) !important;
    color: white !important;
}

.primary-btn:hover::before, #bbt:hover::before {
    left: 100%;
}

/* View More/Less Links */
.view-more-link,
a[style*="color:#006FCD"] {
    color: var(--accent-color) !important;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Poppins', sans-serif;
}

.view-more-link:hover,
a[style*="color:#006FCD"]:hover {
    color: var(--primary-color) !important;
}

.view-more-link::after,
a[style*="color:#006FCD"]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.view-more-link:hover::after,
a[style*="color:#006FCD"]:hover::after {
    width: 100%;
}

/* Scroll Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* Animation Classes */
.animate__fadeInUp {
    animation: fadeInUp 0.8s ease-out both;
}

.animate__fadeInLeft {
    animation: fadeInLeft 0.8s ease-out both;
}

.animate__fadeInRight {
    animation: fadeInRight 0.8s ease-out both;
}

.animate__bounceIn {
    animation: bounceIn 1s ease-out both;
}

.animate__delay-1s { animation-delay: 0.2s; }
.animate__delay-2s { animation-delay: 0.4s; }
.animate__delay-3s { animation-delay: 0.6s; }
.animate__delay-4s { animation-delay: 0.8s; }

/* Responsive Design */
@media (max-width: 991.98px) {
    .hero-section {
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
    
    .hero-brand {
        font-size: 3.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.4rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
    
    .hero-actions {
        margin: 2rem 0;
    }
    
    .hero-btn {
        padding: 12px 25px;
        font-size: 1rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .stat-divider {
        display: none;
    }
    
    .hero-carousel .owl-nav {
        padding: 0 1rem;
    }
    
    .hero-carousel .owl-nav button {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
    }
    
    .section-header h2 {
        font-size: 2.8rem;
    }
    
    .feature {
        padding: 60px 0;
    }
    
    .profile-card-5 .card-img-block {
        margin: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .hero-brand {
        font-size: 2.8rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .hero-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        width: 100%;
        max-width: 250px;
        justify-content: center;
    }
    
    .hero-stats {
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    .section-header h2 {
        font-size: 2.2rem;
    }
    
    .hh {
        margin-bottom: 2rem !important;
    }
}

@media (max-width: 575.98px) {
    .hero-brand {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-description {
        font-size: 0.9rem;
    }
    
    .hero-content {
        padding: 0 1rem;
    }
    
    .hero-stats {
        margin-top: 1.5rem;
    }
    
    .stat-number {
        font-size: 1.8rem;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .services__item__icon {
        height: 70px;
        width: 70px;
        line-height: 70px;
    }
    
    .services__item__icon i {
        font-size: 30px;
    }
}

/* Parallax Effect for Background Elements */
.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* Loading Animation */
.loading-animate {
    opacity: 0;
    transform: translateY(50px);
}

/* Bike Trail Pattern */
.bike-trail {
    position: absolute;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--primary-color) 0px,
        var(--primary-color) 10px,
        transparent 10px,
        transparent 20px
    );
    animation: trailMove 3s linear infinite;
    opacity: 0.3;
}

@keyframes trailMove {
    0% { transform: translateX(-100px); }
    100% { transform: translateX(100px); }
}

/* Dust Particle Effect */
.dust-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.dust-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0.6;
    animation: dustFloat 6s ease-in-out infinite;
}

@keyframes dustFloat {
    0%, 100% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    50% {
        opacity: 0.8;
        transform: translateY(0vh) scale(1);
    }
}