/* ========================================
   NuClear Detailing - Dark Theme Fixes
   ======================================== */

/* ========================================
   VIEWPORT & OVERFLOW FIXES
   ======================================== */

/* Prevent horizontal overflow */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Ensure all containers fit viewport */
.container,
.service-detail-grid,
.service-detail-content,
.service-pricing-box,
.pricing-row {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Service detail sections */
.service-detail {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.service-detail .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Pricing sections on bg-light */
.bg-light {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* ========================================
   UNIVERSAL ICON CENTERING & STYLING
   ======================================== */

/* All Font Awesome icons - perfect centering */
i,
i.fas,
i.far,
i.fab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Icons in buttons */
.btn i,
.btn-primary i,
.btn-secondary i,
.btn-whatsapp i,
.btn-google i,
.btn-outline i,
.btn-book-package i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin-right: 0.5rem !important;
}

/* Check circle icons in lists */
.fas.fa-check-circle,
.detail-list i,
ul li i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Arrow icons */
.fa-arrow-right,
.fa-arrow-up,
.fa-chevron-down {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Social media icons */
.social-links i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Placeholder image icons */
.placeholder-image i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 auto !important;
}

/* Feature icons */
.feature-icon,
.feature-icon i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Service icons */
.service-icon,
.service-icon i,
.service-icon-large,
.service-icon-large i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Contact method icons */
.contact-method-icon,
.contact-method-icon i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Gallery placeholder icons */
.gallery-item i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 auto !important;
}

/* FAQ icons */
.faq-question i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Stat icons */
.stat i,
.hero-stats i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Alert/Info box icons */
.alert-box i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* ========================================
   TEXT SPACING & READABILITY
   ======================================== */

/* Improve word spacing globally */
body,
p,
li,
span,
div {
    word-spacing: 0.05em !important;
    letter-spacing: 0.01em !important;
}

/* Headings - proper spacing */
h1, h2, h3, h4, h5, h6 {
    word-spacing: 0.05em !important;
    letter-spacing: 0.02em !important;
}

/* Service quotes - comfortable reading */
.service-quote {
    word-spacing: 0.08em !important;
    letter-spacing: 0.015em !important;
    line-height: 1.8 !important;
}

/* Lists - proper spacing */
.detail-list li,
.service-features li,
.package-features li {
    word-spacing: 0.05em !important;
    letter-spacing: 0.01em !important;
    line-height: 1.7 !important;
}

/* Alert boxes - clear spacing */
.alert-box div,
.alert-box strong {
    word-spacing: 0.06em !important;
    letter-spacing: 0.015em !important;
    line-height: 1.7 !important;
}

/* Buttons - clear text */
.btn,
.btn-book-package {
    word-spacing: 0.1em !important;
    letter-spacing: 0.05em !important;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 80px !important; /* Account for fixed navbar */
}

/* Hardware acceleration for smooth performance */
.service-card,
.pricing-card,
.btn,
.navbar,
.hero-logo img,
.scroll-to-top,
.whatsapp-float {
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Optimize animations */
@media (prefers-reduced-motion: no-preference) {
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
}

/* GPU acceleration for transforms */
.hero-logo img,
.service-icon,
.pricing-card:hover {
    transform: translate3d(0, 0, 0) !important;
}

/* ========================================
   LOGO STYLING
   ======================================== */

/* Logo in navbar - BIGGER, WHITE, subtle glow */
.navbar .logo img {
    width: 70px !important;
    height: 70px !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) !important;
    transition: var(--transition) !important;
}

.navbar .logo:hover img {
    filter: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.7)) !important;
    transform: scale(1.05) !important;
}

.logo {
    gap: 0 !important;
}

.logo span {
    display: none !important;
}

/* Hero logo - LARGE, WHITE, glowing (NO BOUNCE) */
.hero-logo {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 3rem !important;
}

.hero-logo img {
    width: 280px !important;
    height: 280px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) 
            drop-shadow(0 0 40px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 80px rgba(0, 212, 255, 0.6)) 
            drop-shadow(0 0 120px rgba(0, 212, 255, 0.4)) !important;
    animation: logoPulse 2s ease-in-out infinite !important;
}

@keyframes logoPulse {
    0%, 100% {
        filter: brightness(0) invert(1) 
                drop-shadow(0 0 40px rgba(255, 255, 255, 0.8)) 
                drop-shadow(0 0 80px rgba(0, 212, 255, 0.6)) 
                drop-shadow(0 0 120px rgba(0, 212, 255, 0.4));
    }
    50% {
        filter: brightness(0) invert(1) 
                drop-shadow(0 0 60px rgba(255, 255, 255, 1)) 
                drop-shadow(0 0 120px rgba(0, 212, 255, 0.8)) 
                drop-shadow(0 0 180px rgba(0, 212, 255, 0.5));
    }
}

/* Removed logoFloat animation - no more bouncing */

/* Mobile responsive */
@media (max-width: 768px) {
    .hero-logo img {
        width: 220px !important;
        height: 220px !important;
    }
}

@media (max-width: 480px) {
    .hero-logo img {
        width: 180px !important;
        height: 180px !important;
    }
}

/* Navbar contrast improvement */
/* ========================================
   NAVIGATION BAR - ENHANCED READABILITY
   ======================================== */

.navbar {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.98) 0%, rgba(25, 25, 25, 0.98) 100%) !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6) !important;
    padding: 0.5rem 0 !important;
}

.navbar.scrolled {
    background: linear-gradient(180deg, rgba(15, 15, 15, 0.99) 0%, rgba(20, 20, 20, 0.99) 100%) !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7) !important;
}

/* Navigation wrapper - better spacing */
.nav-wrapper {
    padding: 0.75rem 0 !important;
}

/* Navbar text - HIGHLY READABLE */
.nav-menu {
    gap: 2.5rem !important;
}

.nav-menu a {
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    letter-spacing: 0.02em !important;
    transition: all 0.3s ease !important;
}

.nav-menu a:hover {
    color: #00D4FF !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

.nav-menu a.active {
    color: #00D4FF !important;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.6) !important;
    font-weight: 700 !important;
}

/* Book Now button in navbar */
.nav-menu .btn-nav {
    background: linear-gradient(135deg, #00D4FF 0%, #0099CC 100%) !important;
    color: #ffffff !important;
    padding: 0.75rem 1.75rem !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-shadow: none !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

.nav-menu .btn-nav:hover {
    background: linear-gradient(135deg, #00E5FF 0%, #00B8E6 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 25px rgba(0, 212, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.logo span {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    font-weight: 700 !important;
}

/* Contact page layout fixes */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem !important;
    align-items: start;
}

/* ==========================================
   CONTACT PAGE - FORM READABILITY
   ========================================== */

/* Form container - dark theme with good contrast */
.form-container {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%) !important;
    padding: 2.5rem !important;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    overflow: hidden !important;
}

/* Form headings - bright and clear */
.form-container h2 {
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

.form-container p,
.form-container > p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.1rem !important;
    margin-bottom: 2rem !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* Form labels - BRIGHT WHITE */
.form-group label {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.form-group label .required {
    color: #FF5252 !important;
    font-weight: 700 !important;
}

/* Form inputs - BRIGHT, HIGH CONTRAST */
.form-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a1a !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
    padding: 0.875rem 1rem !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.form-control:focus {
    background-color: #ffffff !important;
    border-color: #00D4FF !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: rgba(26, 26, 26, 0.5) !important;
    font-weight: 400 !important;
}

/* Select dropdowns - visible arrow */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem !important;
    cursor: pointer !important;
}

/* Textarea */
textarea.form-control {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Form group spacing */
.form-group {
    margin-bottom: 1.25rem !important;
}

.contact-info-box {
    background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%) !important;
    padding: 2.5rem !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 12px !important;
}

.contact-info-box h2 {
    color: #ffffff !important;
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
    background: linear-gradient(135deg, #ffffff 0%, #00D4FF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.contact-info-box > p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.1rem !important;
    margin-bottom: 2rem !important;
}

.contact-method {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
    padding: 1.5rem 0 !important;
    margin-bottom: 1rem !important;
}

/* Soften bright cards for night viewing */
.feature-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.service-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%) !important;
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    padding: 2rem !important;
}

.pricing-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%) !important;
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    overflow: visible !important;
    padding: 2rem !important;
}

/* Ensure content doesn't overflow */
.service-card *,
.pricing-card * {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

/* Fix list items to stay within borders */
.service-features li,
.package-features li,
.detail-list li {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 0.5rem !important;
}

.testimonial-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.custom-service-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Soften white backgrounds */
.faq-item {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
}

.gallery-item {
    background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
}

.coating-option {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%) !important;
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .form-container {
        padding: 2rem 1.5rem !important;
    }
    
    .contact-info-box {
        padding: 2rem !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
    }
}

/* Ensure all form elements stay within bounds */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem !important;
}

.form-row .form-group {
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Button stays within container */
.form-container button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Text doesn't overflow */
.form-container * {
    box-sizing: border-box !important;
}

/* Legal content cards softer */
.legal-content {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Placeholder images softer */
.placeholder-image {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(107, 207, 127, 0.08)) !important;
}

/* Service detail boxes softer */
.service-pricing-box {
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 100%) !important;
    border-left-color: var(--color-blue) !important;
}

.service-note {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.05)) !important;
}

.alert-box {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.15)) !important;
    border: 2px solid var(--color-yellow) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    margin: 1.5rem 0 !important;
    box-shadow: 
        0 0 30px rgba(255, 193, 7, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    overflow: visible !important;
}

.alert-box i {
    color: var(--color-yellow) !important;
    font-size: 1.5rem !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.6)) !important;
}

.alert-box strong,
.alert-box div {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.6 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

.alert-box small {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Ensure hero text is always readable */
.hero-title,
.hero-subtitle {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Page headers more readable */
.page-header h1,
.page-header p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Footer readability */
.footer {
    background-color: #0a0a0a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   REDESIGNED "WHAT'S INCLUDED" SECTIONS
   ======================================== */

/* Service features list - better spacing and readability */
.service-features {
    margin: 1.5rem 0 !important;
    padding: 0 !important;
}

.service-features li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 1.25rem !important;
    padding: 1rem !important;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(0, 212, 255, 0.02)) !important;
    border-radius: 8px !important;
    border-left: 3px solid var(--color-cyan) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
    transition: var(--transition) !important;
}

.service-features li:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.05)) !important;
    transform: translateX(5px) !important;
}

.service-features i {
    color: var(--color-cyan) !important;
    font-size: 1.25rem !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

/* Package features list - better spacing */
.package-features {
    text-align: left !important;
    margin: 2rem 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.package-features li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 1.25rem !important;
    padding: 1rem 1rem 1rem 0.5rem !important;
    background: linear-gradient(135deg, rgba(107, 207, 127, 0.05), rgba(107, 207, 127, 0.02)) !important;
    border-radius: 8px !important;
    border-left: 3px solid var(--color-green) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
    transition: var(--transition) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.package-features li:hover {
    background: linear-gradient(135deg, rgba(107, 207, 127, 0.1), rgba(107, 207, 127, 0.05)) !important;
    transform: translateX(5px) !important;
}

.package-features i {
    color: var(--color-green) !important;
    font-size: 1.25rem !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}
    flex-shrink: 0 !important;
}

/* Detail list (services page) - better spacing */
.detail-list {
    margin: 2rem 0 !important;
    padding: 0 !important;
}

.detail-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 1.25rem !important;
    padding: 1rem 1.25rem !important;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(0, 212, 255, 0.03)) !important;
    border-radius: 8px !important;
    border-left: 3px solid var(--color-blue) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--text-primary) !important;
    transition: var(--transition) !important;
}

.detail-list li:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(0, 212, 255, 0.06)) !important;
    transform: translateX(5px) !important;
}

.detail-list i {
    color: var(--color-blue) !important;
    font-size: 1.5rem !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.detail-list strong {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Contact info list spacing */
.contact-info li {
    margin-bottom: 1.5rem !important;
    padding: 0.75rem !important;
}

/* FAQ answer lists */
.faq-answer ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 1rem !important;
}

.faq-answer ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
    padding: 0.875rem 1rem !important;
    background: rgba(0, 212, 255, 0.05) !important;
    border-radius: 6px !important;
    border-left: 2px solid var(--color-cyan) !important;
    line-height: 1.6 !important;
}

.faq-answer ul li::before {
    content: "→" !important;
    color: var(--color-cyan) !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
}

/* Legal content lists */
.legal-content ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.legal-content ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
    padding: 0.875rem 1rem !important;
    background: rgba(0, 212, 255, 0.04) !important;
    border-radius: 6px !important;
    border-left: 2px solid rgba(0, 212, 255, 0.3) !important;
    line-height: 1.6 !important;
}

.legal-content ul li::before {
    content: "•" !important;
    color: var(--color-cyan) !important;
    font-weight: bold !important;
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
}

/* ========================================
   IMPROVED TEXT VISIBILITY ON DARK BACKGROUNDS
   ======================================== */

/* All headings - brighter and more noticeable */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Hero subtitle - larger and brighter */
.hero-subtitle {
    font-size: 1.5rem !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 400 !important;
    max-width: 900px !important;
    margin: 0 auto 2.5rem !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* All paragraph text - higher contrast */
p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
}

/* Section headers - make prominent */
.section-header h2 {
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
    color: #ffffff !important;
    margin-bottom: 1.5rem !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--color-cyan) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.section-header p {
    font-size: 1.2rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.section-tag {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 212, 255, 0.1)) !important;
    color: var(--color-cyan) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 0.65rem 1.25rem !important;
    border: 1px solid rgba(0, 212, 255, 0.4) !important;
}

/* Card headings - more prominent */
.feature-card h3,
.service-card h3,
.pricing-card h3,
.testimonial-card h3,
.custom-service-card h3 {
    font-size: 1.75rem !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Card descriptions - readable */
.feature-card p,
.service-card > p,
.testimonial-card > p,
.custom-service-card p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}

/* ========================================
   PRICE VISIBILITY & ATTRACTIVENESS
   ======================================== */

/* New pricing table style - matches the image */
.price {
    margin: 2rem 0 !important;
    padding: 0 !important;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.05)) !important;
    border-radius: 12px !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
    overflow: hidden !important;
}

.price-header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(0, 212, 255, 0.15)) !important;
    padding: 1.25rem 2rem !important;
    text-align: center !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.3) !important;
}

.price-header h4 {
    font-size: 1.75rem !important;
    color: var(--color-cyan) !important;
    margin: 0 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

.price-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1.5rem 2rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.price-row:last-child {
    border-bottom: none !important;
}

.price-row .vehicle-type {
    font-size: 1.3rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.price-row .price-amount {
    font-size: 3rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-shadow: none !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--color-cyan) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    letter-spacing: -1px !important;
    line-height: 1 !important;
    min-width: 180px !important;
    text-align: right !important;
}

/* Hide old vehicle-type spans that are not in rows */
.price > .vehicle-type {
    display: none !important;
}

/* Old price-amount divs that are not in rows */
.price > .price-amount {
    display: none !important;
}

/* Vehicle type labels - clear */
.vehicle-type {
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Package description - visible */
.package-desc {
    font-size: 1.15rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
    margin-bottom: 2rem !important;
}

/* Price sections in cards */
.price {
    margin: 2rem 0 !important;
    padding: 2rem !important;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.05)) !important;
    border-radius: 12px !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
}

/* Pricing inline (ceramic coating page) */
.pricing-inline {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(0, 212, 255, 0.04)) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--color-cyan) !important;
    margin-bottom: 1.5rem !important;
}

.pricing-inline span {
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.pricing-inline strong {
    font-size: 1.8rem !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.6) !important;
}

/* Coating requirement warning */
.coating-requirement {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.15)) !important;
    border: 2px solid var(--color-yellow) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    margin: 1.5rem 0 !important;
    box-shadow: 
        0 0 30px rgba(255, 193, 7, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.coating-requirement strong,
.coating-requirement {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.6 !important;
}

.coating-requirement i {
    color: var(--color-yellow) !important;
    font-size: 1.3rem !important;
    margin-right: 0.75rem !important;
    filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.6)) !important;
}

/* ==========================================
   SERVICE DETAIL PAGES - NEW DESIGN MATCHING IMAGE
   ========================================== */

/* Service package header */
.service-detail-content h2 {
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Service subtitle */
.service-subtitle {
    color: #FFD54F !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 2rem !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Yellow quoted description box */
.service-quote {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1)) !important;
    border-left: 4px solid #FFC107 !important;
    padding: 1.5rem 2rem !important;
    margin: 2rem 0 !important;
    border-radius: 8px !important;
    font-style: italic !important;
    font-size: 1.125rem !important;
    line-height: 1.8 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* What's Included header */
.service-detail-content h3 {
    color: #ffffff !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 2.5rem 0 1.5rem 0 !important;
    text-shadow: none !important;
}

/* Service list items - simple checkmarks */
.detail-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2rem 0 !important;
}

.detail-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 0.75rem 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    border-radius: 0 !important;
    transition: none !important;
}

.detail-list li:hover {
    background: none !important;
    transform: none !important;
    border-left-color: transparent !important;
}

.detail-list li i {
    color: #FFC107 !important;
    font-size: 1.25rem !important;
    margin-top: 0.125rem !important;
    flex-shrink: 0 !important;
    filter: none !important;
    text-shadow: none !important;
}

.detail-list li strong {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 400 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Remove any extra styling from list items */
.detail-list li::before {
    display: none !important;
}

/* Yellow book button */
.btn-book-package {
    background: #FFC107 !important;
    color: #000000 !important;
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 1.25rem 3rem !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.5) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
    margin-top: 1.5rem !important;
    text-shadow: none !important;
}

.btn-book-package span {
    color: #000000 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

.btn-book-package:hover {
    background: #FFD54F !important;
    color: #000000 !important;
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.7) !important;
    transform: translateY(-2px) !important;
}

.btn-book-package:hover span {
    color: #000000 !important;
}

.btn-book-package i {
    font-size: 1.25rem !important;
    color: #000000 !important;
}

/* Hide old styling elements */
.service-icon-large {
    display: none !important;
}

/* Footer email fix - prevent overflow */
.footer .contact-info li a,
.footer-col a,
.footer a {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important;
    max-width: 100% !important;
    display: inline-block !important;
}

.footer .contact-info li {
    max-width: 100% !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
}

/* Footer improvements */
.footer-col {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ==========================================
   ANIMATED & COLORFUL ICONS
   ========================================== */

/* Service card icons - NO CONTAINERS */
.service-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
    margin: 0 auto 1.5rem !important;
    position: relative !important;
    animation: none !important;
    transition: all 0.4s ease !important;
}

.service-icon i {
    font-size: 3rem !important;
    z-index: 2 !important;
    position: relative !important;
    transition: all 0.4s ease !important;
    filter: none !important;
    text-shadow: none !important;
    line-height: 1 !important;
    display: block !important;
}

/* Individual service colors - CUSTOM COLOR SCHEME */

/* Service 1: NuClear Clean (Exterior Detailing) - GREEN */
.services-grid .service-card:nth-child(1) .service-icon {
    background: none !important;
    box-shadow: none !important;
}

.services-grid .service-card:nth-child(1) .service-icon i {
    color: #4CAF50 !important;
}

.services-grid .service-card:nth-child(1):hover {
    border-color: rgba(76, 175, 80, 0.5) !important;
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.3) !important;
}

/* Service 2: Full Interior Detailing - YELLOW */
.services-grid .service-card:nth-child(2) .service-icon {
    background: none !important;
    box-shadow: none !important;
}

.services-grid .service-card:nth-child(2) .service-icon i {
    color: #FFC107 !important;
}

.services-grid .service-card:nth-child(2):hover {
    border-color: rgba(255, 193, 7, 0.5) !important;
    box-shadow: 0 8px 24px rgba(255, 193, 7, 0.3) !important;
}

/* Service 3: Paint Enhancement - BLUE */
.services-grid .service-card:nth-child(3) .service-icon {
    background: none !important;
    box-shadow: none !important;
}

.services-grid .service-card:nth-child(3) .service-icon i {
    color: #2196F3 !important;
}

.services-grid .service-card:nth-child(3):hover {
    border-color: rgba(33, 150, 243, 0.5) !important;
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.3) !important;
}

/* Service 4: Paint Correction - RED */
.services-grid .service-card:nth-child(4) .service-icon {
    background: none !important;
    box-shadow: none !important;
}

.services-grid .service-card:nth-child(4) .service-icon i {
    color: #F44336 !important;
}

.services-grid .service-card:nth-child(4):hover {
    border-color: rgba(244, 67, 54, 0.5) !important;
    box-shadow: 0 8px 24px rgba(244, 67, 54, 0.3) !important;
}

/* Service 5: Ceramic Coating - PURPLE */
.services-grid .service-card:nth-child(5) .service-icon {
    background: none !important;
    box-shadow: none !important;
}

.services-grid .service-card:nth-child(5) .service-icon i {
    color: #9C27B0 !important;
}

.services-grid .service-card:nth-child(5):hover {
    border-color: rgba(156, 39, 176, 0.5) !important;
    box-shadow: 0 8px 24px rgba(156, 39, 176, 0.3) !important;
}

/* Service 6: Engine Bay - ORANGE */
.services-grid .service-card:nth-child(6) .service-icon {
    background: none !important;
    box-shadow: none !important;
}

.services-grid .service-card:nth-child(6) .service-icon i {
    color: #FF9800 !important;
}

.services-grid .service-card:nth-child(6):hover {
    border-color: rgba(255, 152, 0, 0.5) !important;
    box-shadow: 0 8px 24px rgba(255, 152, 0, 0.3) !important;
}

/* Hover effects for service icons */
.service-card:hover .service-icon {
    transform: scale(1.15) rotate(5deg) !important;
    animation: iconPulse 1s ease-in-out infinite !important;
}

.service-card:hover .service-icon i {
    transform: scale(1.1) rotate(-5deg) !important;
}

/* Hero stats icons - solid colors, no glow */
.hero-stats .stat i {
    filter: none !important;
    text-shadow: none !important;
    color: #00D4FF !important;
}

.hero-stats .stat:nth-child(1) i {
    color: #00D4FF !important;
}

.hero-stats .stat:nth-child(2) i {
    color: #FFC107 !important;
}

/* Checkmark icons in lists - solid colors, no glow */
.detail-list li i.fa-check-circle {
    color: #FFC107 !important;
    font-size: 1.5rem !important;
    margin-top: 0.125rem !important;
    flex-shrink: 0 !important;
    filter: none !important;
    text-shadow: none !important;
    animation: none !important;
}

.service-features li i.fa-check,
.package-features li i.fa-check {
    color: #4CAF50 !important;
    font-size: 1.25rem !important;
    filter: none !important;
    text-shadow: none !important;
    animation: none !important;
}

/* Social media icons - solid colors, centered, no glow */
.social-links a i.fa-facebook {
    color: #1877F2 !important;
    filter: none !important;
}

.social-links a i.fa-instagram {
    color: #E4405F !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    filter: none !important;
}

.social-links a i.fa-youtube {
    color: #FF0000 !important;
    filter: none !important;
}

.social-links a i.fa-whatsapp {
    color: #25D366 !important;
    filter: none !important;
}

.social-links a i.fa-google {
    color: #4285F4 !important;
    filter: none !important;
}

.social-links a:hover i {
    transform: scale(1.15) !important;
}
    transition: all 0.3s ease !important;
}

/* Alert/Warning icons */
.alert-box i.fa-exclamation-triangle,
.alert-box i.fa-info-circle {
    color: #FFC107 !important;
    font-size: 1.75rem !important;
    filter: drop-shadow(0 0 15px rgba(255, 193, 7, 0.8)) !important;
    animation: iconPulse 2s ease-in-out infinite !important;
}

/* WhatsApp float button icon */
.whatsapp-float {
    background-color: #25D366 !important;
}

.whatsapp-float:hover {
    background-color: #1da851 !important;
}

.whatsapp-float i {
    color: #ffffff !important;
    font-size: 2rem !important;
    animation: whatsappBounce 2s ease-in-out infinite !important;
}

/* Scroll to top icon */
.scroll-to-top i {
    color: #ffffff !important;
    animation: arrowBounce 1.5s ease-in-out infinite !important;
}

/* Icon animations */
@keyframes iconFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes checkPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes whatsappBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

/* Placeholder image icons - colorful */
.placeholder-image {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 150, 255, 0.05)) !important;
}

.placeholder-image i {
    font-size: 4rem !important;
    color: #00D4FF !important;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.6)) !important;
    animation: iconFloat 3s ease-in-out infinite !important;
}

/* CTA button icons */
.btn i,
.btn-primary i,
.btn-whatsapp i,
.btn-book-package i {
    transition: all 0.3s ease !important;
}

.btn:hover i,
.btn-primary:hover i {
    transform: translateX(5px) !important;
}

.btn-whatsapp:hover i {
    transform: scale(1.2) rotate(15deg) !important;
}

.btn-book-package:hover i {
    transform: translateX(8px) !important;
}

/* Contact page icons - solid colors, no glow */
/* Contact method icons - specific colors */
.contact-info-box .contact-method i {
    font-size: 2.5rem !important;
    margin-bottom: 1rem !important;
    filter: none !important;
    animation: none !important;
}

/* WhatsApp - GREEN */
.contact-info-box .contact-method:nth-child(3) .contact-method-icon i {
    color: #25D366 !important;
    text-shadow: 0 0 15px rgba(37, 211, 102, 0.6) !important;
}

/* Phone - BLUE */
.contact-info-box .contact-method:nth-child(4) .contact-method-icon i {
    color: #2196F3 !important;
    text-shadow: 0 0 15px rgba(33, 150, 243, 0.6) !important;
}

/* Email - PURPLE */
.contact-info-box .contact-method:nth-child(5) .contact-method-icon i {
    color: #9C27B0 !important;
    text-shadow: 0 0 15px rgba(156, 39, 176, 0.6) !important;
}

/* Location - ORANGE */
.contact-info-box .contact-method:nth-child(6) .contact-method-icon i {
    color: #FF9800 !important;
    text-shadow: 0 0 15px rgba(255, 152, 0, 0.6) !important;
}

/* ==========================================
   SERVICE DETAIL PAGES - COLOR SCHEMES
   ========================================== */

/* NuClear Clean (Exterior) - GREEN */
#exterior .service-quote {
    border-left-color: #4CAF50 !important;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.08)) !important;
}

#exterior .detail-list li i {
    color: #4CAF50 !important;
    filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.6)) !important;
}

#exterior .service-subtitle {
    color: #4CAF50 !important;
}

#exterior .btn-book-package {
    background: #4CAF50 !important;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.5) !important;
}

#exterior .btn-book-package:hover {
    background: #66BB6A !important;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.7) !important;
}

/* Full Interior - YELLOW */
#interior .service-quote {
    border-left-color: #FFC107 !important;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08)) !important;
}

#interior .detail-list li i {
    color: #FFC107 !important;
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.6)) !important;
}

#interior .service-subtitle {
    color: #FFC107 !important;
}

#interior .btn-book-package {
    background: #FFC107 !important;
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.5) !important;
}

#interior .btn-book-package:hover {
    background: #FFD54F !important;
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.7) !important;
}

/* Paint Enhancement - BLUE */
#paint-correction .service-quote {
    border-left-color: #2196F3 !important;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(33, 150, 243, 0.08)) !important;
}

#paint-correction .detail-list li i {
    color: #2196F3 !important;
    filter: drop-shadow(0 0 8px rgba(33, 150, 243, 0.6)) !important;
}

#paint-correction .service-subtitle {
    color: #2196F3 !important;
}

#paint-correction .btn-book-package {
    background: #2196F3 !important;
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.5) !important;
}

#paint-correction .btn-book-package:hover {
    background: #42A5F5 !important;
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.7) !important;
}

/* Paint Correction 2-Step - RED */
#paint-correction-2step .service-quote {
    border-left-color: #F44336 !important;
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.15), rgba(244, 67, 54, 0.08)) !important;
}

#paint-correction-2step .detail-list li i {
    color: #F44336 !important;
    filter: drop-shadow(0 0 8px rgba(244, 67, 54, 0.6)) !important;
}

#paint-correction-2step .service-subtitle {
    color: #F44336 !important;
}

#paint-correction-2step .btn-book-package {
    background: #F44336 !important;
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.5) !important;
}

#paint-correction-2step .btn-book-package:hover {
    background: #EF5350 !important;
    box-shadow: 0 6px 20px rgba(244, 67, 54, 0.7) !important;
}

/* Ceramic Coating - PURPLE */
#ceramic-coating .service-quote {
    border-left-color: #9C27B0 !important;
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(156, 39, 176, 0.08)) !important;
}

#ceramic-coating .detail-list li i {
    color: #9C27B0 !important;
    filter: drop-shadow(0 0 8px rgba(156, 39, 176, 0.6)) !important;
}

#ceramic-coating .service-subtitle {
    color: #9C27B0 !important;
}

#ceramic-coating .btn-book-package {
    background: #9C27B0 !important;
    box-shadow: 0 4px 16px rgba(156, 39, 176, 0.5) !important;
}

#ceramic-coating .btn-book-package:hover {
    background: #AB47BC !important;
    box-shadow: 0 6px 20px rgba(156, 39, 176, 0.7) !important;
}

/* Engine Bay - ORANGE */
#engine .service-quote {
    border-left-color: #FF9800 !important;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(255, 152, 0, 0.08)) !important;
}

#engine .detail-list li i {
    color: #FF9800 !important;
    filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.6)) !important;
}

#engine .service-subtitle {
    color: #FF9800 !important;
}

#engine .btn-book-package {
    background: #FF9800 !important;
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.5) !important;
}

#engine .btn-book-package:hover {
    background: #FFA726 !important;
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.7) !important;
}

/* ==========================================
   TERMS OF SERVICE & LEGAL PAGES - ENHANCED READABILITY
   ========================================== */

.legal-content {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(25, 25, 25, 0.95)) !important;
    padding: 3rem !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    box-shadow: 
        0 0 40px rgba(0, 212, 255, 0.15),
        0 10px 40px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.8 !important;
}

.legal-content h2 {
    color: #ffffff !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 3px solid var(--color-cyan) !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--color-cyan) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 2px 8px rgba(0, 212, 255, 0.3) !important;
}

.legal-content h3 {
    color: #ffffff !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.25rem !important;
    padding-left: 1rem !important;
    border-left: 4px solid var(--color-cyan) !important;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, transparent 100%) !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.legal-content p {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    line-height: 1.9 !important;
    margin-bottom: 1.5rem !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.legal-content p strong {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.legal-content ul {
    margin: 1.5rem 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.legal-content ul li {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    margin-bottom: 1rem !important;
    padding: 1rem 1.5rem !important;
    padding-left: 3rem !important;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(0, 212, 255, 0.02)) !important;
    border-radius: 8px !important;
    border-left: 3px solid var(--color-cyan) !important;
    position: relative !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.legal-content ul li:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.05)) !important;
    border-left-color: var(--color-yellow) !important;
    transform: translateX(5px) !important;
}

.legal-content ul li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 1.25rem !important;
    color: var(--color-cyan) !important;
    font-weight: 900 !important;
    font-size: 1.25rem !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.6) !important;
}

.legal-content ul li strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.legal-content em {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.05rem !important;
    font-style: italic !important;
    display: block !important;
    padding: 1.5rem !important;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0.05)) !important;
    border-radius: 12px !important;
    border: 2px solid rgba(255, 193, 7, 0.3) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Last updated text */
.page-header p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Contact information highlight */
.legal-content p:has(strong:contains("Email")),
.legal-content p:has(strong:contains("Phone")) {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.05)) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--color-green) !important;
}

/* Mobile optimization for terms */
@media (max-width: 768px) {
    .legal-content {
        padding: 2rem 1.5rem !important;
    }
    
    .legal-content h2 {
        font-size: 2rem !important;
    }
    
    .legal-content h3 {
        font-size: 1.5rem !important;
    }
    
    .legal-content p,
    .legal-content ul li {
        font-size: 1rem !important;
    }
    
    .legal-content ul li {
        padding: 0.875rem 1rem !important;
        padding-left: 2.5rem !important;
    }
}

/* Service pricing box */
.service-pricing-box {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.05)) !important;
    border-left: 4px solid var(--color-cyan) !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.service-pricing-box h4 {
    font-size: 1.5rem !important;
    color: #00D4FF !important;
    margin-bottom: 1.5rem !important;
    font-weight: 700 !important;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.6) !important;
}

.pricing-row {
    padding: 1rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.pricing-row:last-child {
    border-bottom: none !important;
}

.pricing-row span {
    font-size: 1.15rem !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.pricing-row strong {
    font-size: 1.75rem !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    letter-spacing: 0.5px !important;
}

/* ========================================
   PAGE HEADERS - HIGHLY VISIBLE
   ======================================== */

.page-header h1 {
    font-size: clamp(3rem, 6vw, 4.5rem) !important;
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
    font-weight: 900 !important;
}

.page-header p {
    font-size: 1.4rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

/* ========================================
   BUTTONS - MORE VISIBLE
   ======================================== */

.btn {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.btn-primary {
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.4) !important;
}

.btn-primary:hover {
    box-shadow: 0 6px 30px rgba(0, 212, 255, 0.6) !important;
}

/* ========================================
   STATS & BADGES
   ======================================== */

.hero-stats .stat strong {
    font-size: 1.8rem !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.hero-stats .stat span {
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Most Popular Badge - Fully Readable Diagonal Corner */
.popular-badge {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #000000 !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    z-index: 10 !important;
    transform: none !important;
    transform-origin: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
}

/* Star icon before text */
.popular-badge::before {
    content: "⭐ " !important;
    position: relative !important;
    font-size: 0.85rem !important;
}

/* NO after content */
.popular-badge::after {
    content: none !important;
}

/* ========================================
   PREMIUM ICON SYSTEM - UNIVERSAL
   ======================================== */

/* All Icons - Base Standardization */
.feature-icon,
.service-icon,
.contact-method-icon,
.placeholder-image,
.faq-question i,
i.fas,
i.far,
i.fab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* Feature Icons - Homepage Features */
.feature-icon {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    margin: 0 auto 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(176, 102, 255, 0.15)) !important;
    border: 3px solid var(--color-cyan) !important;
}

.feature-icon i {
    font-size: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

/* Service Icons - Service Cards */
.service-icon {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    margin: 0 auto 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    position: relative !important;
}

.service-icon i {
    font-size: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
    text-shadow: none !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Service Icon Large (Service Detail Pages) */
.service-icon-large {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    margin: 0 auto 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

.service-icon-large i {
    font-size: 3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
}

/* Contact Method Icons - Already Defined Above (Keep 70x70px) */

/* Placeholder Image Icons */
.placeholder-image {
    width: 100% !important;
    height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(176, 102, 255, 0.1)) !important;
    border-radius: 12px !important;
}

.placeholder-image i {
    font-size: 4rem !important;
    color: var(--color-cyan) !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* FAQ Icons */
.faq-question i {
    font-size: 1.5rem !important;
    color: var(--color-cyan) !important;
    margin-right: 1rem !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    width: 24px !important;
    height: 24px !important;
    text-shadow: none !important;
}

/* Social Icons */
.social-links a i {
    font-size: 1.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
}

/* Button Icons */
.btn i,
.btn-primary i,
.btn-outline i,
.btn-whatsapp i,
.btn-google i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin-right: 0.5rem !important;
    font-size: 1.1rem !important;
}

/* Gallery Icons */
.gallery-item i {
    font-size: 3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* List Icons (Checkmarks, etc) */
.detail-list i,
.service-features i,
ul li i.fa-check,
ul li i.fa-check-circle {
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
    font-size: 1rem !important;
}

/* Alert/Warning Icons */
.alert-box i {
    font-size: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Hero Stats Icons */
.hero-stat i {
    font-size: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin-bottom: 0.5rem !important;
}

/* ========================================
   ICON CENTERING FIX - UNIVERSAL
   ======================================== */

/* Remove any margin/padding that could offset centering */
i::before {
    display: inline-block !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Ensure Font Awesome icons render centered */
.fa, .fas, .far, .fab, .fal, .fad {
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   FIX HERO BUTTONS - HORIZONTAL LAYOUT
   ======================================== */

.hero-cta {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 3rem !important;
    width: 100% !important;
}

.hero-cta .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    min-width: auto !important;
    width: auto !important;
    flex: 0 1 auto !important;
}

/* Mobile responsive - stack on small screens */
@media (max-width: 768px) {
    .hero-cta {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .hero-cta .btn {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   FIX FOOTER CONTACT SECTION
   ======================================== */

.footer-col .contact-info {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-col .contact-info li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.6 !important;
}

.footer-col .contact-info li i {
    color: var(--color-cyan) !important;
    font-size: 1.1rem !important;
    margin-top: 0.2rem !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    text-align: center !important;
}

.footer-col .contact-info li a,
.footer-col .contact-info li span {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    word-break: break-word !important;
    transition: color 0.3s ease !important;
}

.footer-col .contact-info li a:hover {
    color: var(--color-cyan) !important;
}

/* ========================================
   REMOVE ALL GLOW EFFECTS & ANIMATIONS
   ======================================== */

/* Remove ALL text-shadow glow effects from icons */
.feature-icon i,
.service-icon i,
.service-icon-large i,
.contact-method-icon i,
.placeholder-image i,
.faq-question i,
.social-links i,
.gallery-item i,
.hero-stat i,
.alert-box i,
i.fas,
i.far,
i.fab,
i.fal,
i.fad {
    text-shadow: none !important;
    animation: none !important;
}

/* Remove logo pulse animation */
.hero-logo img {
    animation: none !important;
}

/* Remove any icon animations */
.feature-icon,
.service-icon,
.service-icon-large,
.contact-method-icon {
    animation: none !important;
}

/* Remove hover animations that cause bounce */
.feature-icon:hover,
.service-icon:hover,
.contact-method-icon:hover {
    animation: none !important;
    transform: none !important;
}

/* Remove scroll-down animation */
.scroll-down {
    animation: none !important;
}

/* ========================================
   CRITICAL: PERFECT ICON CENTERING FIX
   ======================================== */

/* FORCE all icons to be perfectly centered - MOBILE FIX */
i,
i.fas,
i.far,
i.fab,
i.fal,
i.fad,
i::before {
    display: inline-block !important;
    text-align: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Icon containers MUST center content */
.feature-icon,
.service-icon,
.service-icon-large,
.contact-method-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
}

/* Icons inside containers - FORCE to center */
.feature-icon i,
.service-icon i,
.service-icon-large i,
.contact-method-icon i {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
}

/* ========================================
   TESTIMONIALS - READABLE
   ======================================== */

.testimonial-author strong {
    color: #ffffff !important;
    font-size: 1.15rem !important;
}

.testimonial-author span {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1rem !important;
}

/* ========================================
   FAQ - CLEAR TEXT
   ======================================== */

.faq-question {
    font-size: 1.25rem !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.faq-answer-content {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
}

/* ========================================
   CONTACT INFO - HIGHLY VISIBLE
   ======================================== */

.contact-method-content h3 {
    font-size: 1.3rem !important;
    color: #ffffff !important;
}

.contact-method-content a,
.contact-method-content p {
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.contact-method-content a {
    color: #00D4FF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.contact-method-content a:hover {
    color: #FFC107 !important;
    text-decoration: underline !important;
}

/* ========================================
   MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .hero-subtitle {
        font-size: 1.25rem !important;
    }
    
    .price-amount {
        font-size: 3rem !important;
    }
    
    .section-header h2 {
        font-size: 2rem !important;
    }
    
    .page-header h1 {
        font-size: 2.5rem !important;
    }
}

/* ========================================
   COLORFUL VISIBLE ICONS
   ======================================== */

/* Feature icons - large and colorful */
/* Feature icons - solid colors, no glow, professional look */
.feature-icon {
    width: 90px !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1.5rem !important;
    position: relative !important;
    border-radius: 50% !important;
}

/* Remove the glowing background effect */
.feature-icon::before {
    display: none !important;
}

.feature-icon i {
    font-size: 3rem !important;
    position: relative !important;
    z-index: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    line-height: 1 !important;
    display: block !important;
}

/* Individual feature icon colors - solid, no glow */
.features-grid .feature-card:nth-child(1) .feature-icon {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(0, 212, 255, 0.1)) !important;
}

.features-grid .feature-card:nth-child(1) .feature-icon i {
    color: #2196F3 !important;
}

.features-grid .feature-card:nth-child(2) .feature-icon {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(233, 30, 99, 0.1)) !important;
}

.features-grid .feature-card:nth-child(2) .feature-icon i {
    color: #9C27B0 !important;
}

.features-grid .feature-card:nth-child(3) .feature-icon {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(255, 193, 7, 0.1)) !important;
}

.features-grid .feature-card:nth-child(3) .feature-icon i {
    color: #FF9800 !important;
}

.features-grid .feature-card:nth-child(4) .feature-icon {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.15), rgba(0, 150, 136, 0.1)) !important;
}

.features-grid .feature-card:nth-child(4) .feature-icon i {
    color: #00BCD4 !important;
}

/* Service icons - colorful and varied */
.service-icon {
    width: 80px !important;
    height: 80px !important;
    background: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
    position: relative !important;
}

.service-icon::before {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle, rgba(107, 207, 127, 0.2) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    animation: iconPulse 2.5s ease-in-out infinite !important;
}

.service-icon i {
    font-size: 2.5rem !important;
    color: var(--color-green) !important;
    text-shadow: 0 0 20px rgba(107, 207, 127, 0.8),
                 0 0 40px rgba(107, 207, 127, 0.5) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Service card specific icon colors */
.service-card:nth-child(1) .service-icon i {
    color: var(--color-cyan) !important;
    text-shadow: none !important;
}

.service-card:nth-child(2) .service-icon i {
    color: var(--color-purple) !important;
    text-shadow: none !important;
}

.service-card:nth-child(3) .service-icon i {
    color: var(--color-yellow) !important;
    text-shadow: none !important;
}

.service-card:nth-child(4) .service-icon i {
    color: var(--color-orange) !important;
    text-shadow: none !important;
}

.service-card:nth-child(5) .service-icon i {
    color: var(--color-pink) !important;
    text-shadow: none !important;
}

.service-card:nth-child(6) .service-icon i {
    color: var(--color-green) !important;
    text-shadow: none !important;
}

/* Custom service card icons */
.custom-service-card i {
    font-size: 3.5rem !important;
    color: var(--color-cyan) !important;
    text-shadow: 0 0 25px rgba(0, 212, 255, 0.8),
                 0 0 50px rgba(0, 212, 255, 0.5) !important;
    margin-bottom: 1.5rem !important;
}

.custom-service-card:nth-child(1) i {
    color: var(--color-purple) !important;
    text-shadow: 0 0 25px rgba(176, 102, 255, 0.8) !important;
}

.custom-service-card:nth-child(2) i {
    color: var(--color-cyan) !important;
    text-shadow: 0 0 25px rgba(0, 212, 255, 0.8) !important;
}

.custom-service-card:nth-child(3) i {
    color: var(--color-orange) !important;
    text-shadow: 0 0 25px rgba(255, 107, 53, 0.8) !important;
}

.custom-service-card:nth-child(4) i {
    color: var(--color-green) !important;
    text-shadow: 0 0 25px rgba(107, 207, 127, 0.8) !important;
}

.custom-service-card:nth-child(5) i {
    color: var(--color-yellow) !important;
    text-shadow: 0 0 25px rgba(255, 217, 61, 0.8) !important;
}

.custom-service-card:nth-child(6) i {
    color: var(--color-pink) !important;
    text-shadow: 0 0 25px rgba(255, 62, 157, 0.8) !important;
}

/* Hero stats icons - colorful */
.hero-stats .stat i {
    font-size: 2.5rem !important;
    color: var(--color-cyan) !important;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.8) !important;
}

.hero-stats .stat:nth-child(1) i {
    color: var(--color-cyan) !important;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.8) !important;
}

.hero-stats .stat:nth-child(2) i {
    color: var(--color-yellow) !important;
    text-shadow: 0 0 20px rgba(255, 217, 61, 0.8) !important;
}

/* Process step icons */
.step-number {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-purple)) !important;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6) !important;
    font-size: 2rem !important;
}

/* Contact method icons - PROFESSIONAL & CENTERED */
.contact-method-icon {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(176, 102, 255, 0.15)) !important;
    border: 3px solid var(--color-cyan) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
}

.contact-method-icon i {
    font-size: 2rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    text-shadow: none !important;
}

/* WhatsApp - GREEN (3rd child) */
.contact-info-box .contact-method:nth-child(3) .contact-method-icon {
    border-color: #25D366 !important;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.2), rgba(37, 211, 102, 0.1)) !important;
}

.contact-info-box .contact-method:nth-child(3) .contact-method-icon i {
    color: #25D366 !important;
}

/* Phone - BLUE (4th child) */
.contact-info-box .contact-method:nth-child(4) .contact-method-icon {
    border-color: #2196F3 !important;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(33, 150, 243, 0.1)) !important;
}

.contact-info-box .contact-method:nth-child(4) .contact-method-icon i {
    color: #2196F3 !important;
}

/* Email - PURPLE (5th child) */
.contact-info-box .contact-method:nth-child(5) .contact-method-icon {
    border-color: #9C27B0 !important;
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.2), rgba(156, 39, 176, 0.1)) !important;
}

.contact-info-box .contact-method:nth-child(5) .contact-method-icon i {
    color: #9C27B0 !important;
}

/* Location - ORANGE (6th child) */
.contact-info-box .contact-method:nth-child(6) .contact-method-icon {
    border-color: #FF9800 !important;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.2), rgba(255, 152, 0, 0.1)) !important;
}

.contact-info-box .contact-method:nth-child(6) .contact-method-icon i {
    color: #FF9800 !important;
}

/* Google Review Link in Hero Section */
.google-review-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.15), rgba(234, 67, 53, 0.1));
    border: 1px solid rgba(66, 133, 244, 0.3);
    transition: all 0.3s ease;
}

.google-review-link:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.25), rgba(234, 67, 53, 0.15));
    border-color: rgba(66, 133, 244, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
}

.google-review-link i {
    color: #4285F4;
    font-size: 1.2rem;
}

/* Service features list icons - colorful */
.service-features i {
    color: var(--color-green) !important;
    font-size: 1.5rem !important;
    text-shadow: 0 0 15px rgba(107, 207, 127, 0.6) !important;
}

/* Package features list icons - colorful */
.package-features i {
    color: var(--color-cyan) !important;
    font-size: 1.5rem !important;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.6) !important;
}

/* Detail list icons - colorful */
.detail-list i {
    color: var(--color-purple) !important;
    font-size: 1.75rem !important;
    text-shadow: 0 0 20px rgba(176, 102, 255, 0.6) !important;
}

/* Testimonial stars - yellow and glowing */
.stars i {
    color: var(--color-yellow) !important;
    font-size: 1.5rem !important;
    text-shadow: 0 0 15px rgba(255, 217, 61, 0.6) !important;
}

/* Button icons - visible and colorful */
.btn i {
    font-size: 1.25rem !important;
    margin-right: 0.5rem !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

.btn-primary i {
    color: rgba(255, 255, 255, 1) !important;
}

/* WhatsApp buttons - GREEN & PROMINENT */
.btn-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #1da851 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #2ee674 0%, #25D366 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6) !important;
    transform: translateY(-3px) !important;
}

.btn-whatsapp i {
    color: rgba(255, 255, 255, 1) !important;
    text-shadow: none !important;
}

/* Google Review Button - Simple Google Blue */
.btn-google {
    background: linear-gradient(135deg, #4285F4 0%, #357ae8 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.btn-google:hover {
    background: linear-gradient(135deg, #5a95f5 0%, #4285F4 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 6px 25px rgba(66, 133, 244, 0.6) !important;
    transform: translateY(-3px) !important;
}

.btn-google i {
    color: rgba(255, 255, 255, 1) !important;
    text-shadow: none !important;
}

/* FAQ icons - cyan */
.faq-question i {
    color: var(--color-cyan) !important;
    font-size: 1.5rem !important;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.6) !important;
}

/* WhatsApp float button - glowing */
.whatsapp-float i {
    font-size: 2.5rem !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.6) !important;
}

/* Scroll to top button - glowing */
.scroll-to-top i {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6) !important;
}

/* ========================================
   GALLERY COMING SOON SECTION
   ======================================== */
.coming-soon-gallery {
    text-align: center;
    padding: 6rem 2rem;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(176, 102, 255, 0.05));
    border-radius: 20px;
    border: 2px solid rgba(0, 212, 255, 0.2);
    max-width: 800px;
    margin: 0 auto;
}

.coming-soon-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(176, 102, 255, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-cyan);
}

.coming-soon-icon i {
    font-size: 3.5rem;
    color: var(--color-cyan);
}

.coming-soon-gallery h3 {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
    font-weight: 700;
}

.coming-soon-gallery p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
    line-height: 1.8;
}

.coming-soon-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.coming-soon-actions .btn {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/* Icon pulse animation */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Service icon large (services page) */
.service-icon-large {
    width: 110px !important;
    height: 110px !important;
    background: none !important;
    position: relative !important;
}

.service-icon-large::before {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.25) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    animation: iconPulse 2s ease-in-out infinite !important;
}

.service-icon-large i {
    font-size: 4rem !important;
    color: var(--color-cyan) !important;
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.8),
                 0 0 60px rgba(0, 212, 255, 0.5) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Vary colors for different service detail icons */
.service-detail:nth-child(odd) .service-icon-large i {
    color: var(--color-purple) !important;
    text-shadow: 0 0 30px rgba(176, 102, 255, 0.8) !important;
}

.service-detail:nth-child(even) .service-icon-large i {
    color: var(--color-cyan) !important;
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.8) !important;
}

/* Social links - properly centered */
.social-links {
    display: flex !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.social-links a {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    font-size: 1.125rem !important;
    transition: var(--transition) !important;
    padding: 0 !important;
}

/* Footer icons - visible, solid colors, centered */
.social-links a i {
    font-size: 1.125rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    filter: none !important;
    text-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Facebook - Blue */
.social-links a:nth-child(1) i {
    color: #1877F2 !important;
}

/* Instagram - Pink/Purple Gradient */
.social-links a:nth-child(2) i {
    color: #E4405F !important;
}

/* YouTube - Red */
.social-links a:nth-child(3) i {
    color: #FF0000 !important;
}

/* WhatsApp - Green */
.social-links a:nth-child(4) i {
    color: #25D366 !important;
}

.contact-info i {
    color: var(--color-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}

/* ========================================
   TERMS OF SERVICE - ENHANCED VISIBILITY
   ======================================== */

/* Legal content container */
.legal-content {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(20, 20, 20, 0.98)) !important;
    padding: 3rem !important;
    border-radius: 16px !important;
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    box-shadow: 
        0 0 40px rgba(0, 212, 255, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Main heading */
.legal-content h2 {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--color-cyan) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 2rem !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
}

/* Section headings (h3) */
.legal-content h3 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--color-cyan) !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.25rem !important;
    padding-left: 1rem !important;
    border-left: 4px solid var(--color-cyan) !important;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5) !important;
}

/* Paragraphs */
.legal-content p {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin-bottom: 1.25rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Strong text */
.legal-content strong {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

/* Lists */
.legal-content ul,
.legal-content ol {
    margin: 1rem 0 1.5rem 0 !important;
    padding-left: 0 !important;
}

.legal-content li {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin-bottom: 1rem !important;
    padding: 0.85rem 1.25rem !important;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(0, 212, 255, 0.03)) !important;
    border-radius: 8px !important;
    border-left: 3px solid var(--color-cyan) !important;
    list-style: none !important;
    position: relative !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.legal-content li::before {
    content: "→" !important;
    color: var(--color-cyan) !important;
    font-weight: 700 !important;
    margin-right: 0.75rem !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.6) !important;
}

/* Highlighted sections */
.legal-content em {
    color: var(--color-yellow) !important;
    font-style: italic !important;
    font-weight: 600 !important;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.4) !important;
}

/* Contact info in terms */
.legal-content p strong {
    color: var(--color-cyan) !important;
}

/* Back button */
.legal-content .btn {
    margin-top: 2rem !important;
    font-size: 1.1rem !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .legal-content {
        padding: 2rem 1.5rem !important;
    }
    
    .legal-content h2 {
        font-size: 2rem !important;
    }
    
    .legal-content h3 {
        font-size: 1.5rem !important;
    }
    
    .legal-content p,
    .legal-content li {
        font-size: 1rem !important;
    }
    
    /* Mobile Navigation Improvements */
    .navbar .logo img {
        width: 55px !important;
        height: 55px !important;
    }
    
    .nav-menu {
        background: linear-gradient(180deg, rgba(20, 20, 20, 0.98) 0%, rgba(25, 25, 25, 0.98) 100%) !important;
        border-right: 2px solid rgba(0, 212, 255, 0.3) !important;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.8) !important;
    }
    
    .nav-menu a {
        width: 100% !important;
        padding: 1rem 0 !important;
        font-size: 1.2rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .nav-menu .btn-nav {
        margin-top: 1rem !important;
        width: 100% !important;
        text-align: center !important;
        padding: 1rem 1.75rem !important;
    }
    
    .mobile-menu-toggle span {
        background-color: #ffffff !important;
        height: 3px !important;
    }
}