/* AAI Tours Logo Color Scheme Implementation */
/* Based on logo analysis: Teal/Cyan Blue, Navy Blue, and Gold */

:root {
    /* Logo Color Palette */
    --logo-primary: #008C9E;        /* Teal/Cyan Blue - Primary brand color */
    --logo-primary-light: #2BA5A0;  /* Lighter teal for gradients */
    --logo-secondary: #1F2E4E;      /* Navy Blue - Secondary brand color */
    --logo-secondary-light: #2A3F6B; /* Lighter navy for gradients */
    --logo-accent: #C9A03B;         /* Gold - Accent color */
    --logo-accent-light: #E4B34F;   /* Lighter gold for highlights */
    --logo-dark: #0C2C52;           /* Deep navy for backgrounds */
    --logo-light: #F8F9FA;          /* Light background */
    --logo-white: #FFFFFF;          /* Pure white */
    
    /* Override Bootstrap Variables */
    --bs-primary: var(--logo-primary);
    --bs-secondary: var(--logo-secondary);
    --bs-dark: var(--logo-dark);
    --bs-light: var(--logo-light);
    --bs-white: var(--logo-white);
    --bs-success: #28a745;          /* Keep green for success states */
    --bs-warning: var(--logo-accent); /* Use gold for warnings */
    --bs-info: var(--logo-primary-light); /* Use teal for info */
}

/* Primary Color Overrides */
.btn-primary {
    background: linear-gradient(135deg, var(--logo-primary), var(--logo-primary-light)) !important;
    border-color: var(--logo-primary) !important;
    color: var(--logo-white) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 140, 158, 0.2) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--logo-accent), var(--logo-accent-light)) !important;
    border-color: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
}

.btn-primary:focus {
    background: linear-gradient(135deg, var(--logo-primary), var(--logo-primary-light)) !important;
    border-color: var(--logo-primary) !important;
    color: var(--logo-white) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 140, 158, 0.25) !important;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--logo-secondary), var(--logo-secondary-light)) !important;
    border-color: var(--logo-secondary) !important;
    color: var(--logo-white) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(31, 46, 78, 0.2) !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--logo-accent), var(--logo-accent-light)) !important;
    border-color: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
}

/* Gold Accent Buttons */
.btn-warning {
    background: linear-gradient(135deg, var(--logo-accent), var(--logo-accent-light)) !important;
    border-color: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(201, 160, 59, 0.2) !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, var(--logo-primary), var(--logo-primary-light)) !important;
    border-color: var(--logo-primary) !important;
    color: var(--logo-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0, 140, 158, 0.4) !important;
}

/* Success Button (WhatsApp) */
.btn-success {
    background: linear-gradient(135deg, #25D366, #128C7E) !important;
    border-color: #25D366 !important;
    color: var(--logo-white) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2) !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #128C7E, #25D366) !important;
    border-color: #128C7E !important;
    color: var(--logo-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
}

/* Text Colors */
.text-primary {
    color: var(--logo-primary) !important;
}

.text-secondary {
    color: var(--logo-secondary) !important;
}

.text-warning {
    color: var(--logo-accent) !important;
}

/* Enhanced Text Colors with Golden Accents */
.text-logo-primary {
    color: var(--logo-primary) !important;
}

.text-logo-secondary {
    color: var(--logo-secondary) !important;
}

.text-logo-accent {
    color: var(--logo-accent) !important;
}

.text-logo-gold {
    color: var(--logo-accent) !important;
    font-weight: 600 !important;
}

/* Hover Text Effects */
.hover-text-gold:hover {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

.hover-text-teal:hover {
    color: var(--logo-primary) !important;
    transition: all 0.3s ease !important;
}

/* Background Colors */
.bg-primary {
    background: linear-gradient(135deg, var(--logo-primary), var(--logo-primary-light)) !important;
}

.bg-secondary {
    background: linear-gradient(135deg, var(--logo-secondary), var(--logo-secondary-light)) !important;
}

.bg-dark {
    background: linear-gradient(135deg, var(--logo-dark), var(--logo-secondary)) !important;
}

/* Breadcrumb Background with Logo Colors */
.bg-breadcrumb {
    background: linear-gradient(rgba(12, 44, 82, 0.9), rgba(31, 46, 78, 0.8)), url(../img/fact-bg.jpg) !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Navigation Colors with Golden Hover */
.navbar-light .navbar-nav .nav-link {
    color: var(--logo-dark) !important;
    transition: all 0.3s ease !important;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

.navbar-light .navbar-nav .nav-link.active {
    color: var(--logo-accent) !important;
}

.navbar-light .navbar-toggler {
    border-color: var(--logo-primary) !important;
    color: var(--logo-primary) !important;
}

/* Topbar Text Colors */
.topbar a {
    color: var(--logo-white) !important;
    transition: all 0.3s ease !important;
}

.topbar a i {
    color: var(--logo-white) !important;
    transition: all 0.3s ease !important;
}

/* Topbar Contact Links Hover */
.topbar a:hover {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

.topbar a:hover i {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

/* Social Media Buttons Hover */
.topbar .btn:hover {
    background: var(--logo-accent) !important;
    border-color: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(201, 160, 59, 0.3) !important;
    transition: all 0.3s ease !important;
}

.topbar .btn:hover i {
    color: var(--logo-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Brand Logo Hover */
.navbar-brand:hover h1 {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

.navbar-brand:hover i {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

/* Carousel Indicators */
.carousel-indicators [data-bs-target] {
    background-color: var(--logo-secondary) !important;
}

.carousel-indicators [data-bs-target].active {
    background-color: var(--logo-primary) !important;
}

/* Icon Colors */
.fa, .fas, .far, .fab {
    color: var(--logo-primary) !important;
}

/* Form Elements */
.form-control:focus {
    border-color: var(--logo-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 140, 158, 0.25) !important;
}

/* Card Borders */
.card {
    border-color: rgba(0, 140, 158, 0.1) !important;
}

.card:hover {
    border-color: var(--logo-primary) !important;
    box-shadow: 0 4px 20px rgba(0, 140, 158, 0.1) !important;
}

/* Links */
a {
    color: var(--logo-primary) !important;
}

a:hover {
    color: var(--logo-primary-light) !important;
}

/* Footer Hover Effects */
.footer .footer-item a:hover {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

/* Footer Text Colors */
.footer a {
    color: var(--logo-white) !important;
    transition: all 0.3s ease !important;
}

.footer a i {
    color: var(--logo-white) !important;
    transition: all 0.3s ease !important;
}

.footer h4,
.footer h6 {
    color: var(--logo-white) !important;
}

/* Footer Contact Links Hover */
.footer a:hover {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

.footer a:hover i {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

/* Footer Social Media Buttons Hover */
.footer .btn:hover {
    background: var(--logo-accent) !important;
    border-color: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(201, 160, 59, 0.3) !important;
    transition: all 0.3s ease !important;
}

.footer .btn:hover i {
    color: var(--logo-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Footer Navigation Links Hover */
.footer .d-flex.flex-column a:hover {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

.footer .d-flex.flex-column a:hover i {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

/* Footer Headings Hover */
.footer h4:hover,
.footer h6:hover {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

/* Social Media Icons - Always Visible */
.topbar .btn i,
.footer .btn i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

/* Social Media Icons Default State */
.topbar .btn i {
    color: var(--logo-primary) !important;
}

.footer .btn i {
    color: var(--logo-white) !important;
}

/* Social Media Icons Hover State */
.topbar .btn:hover i,
.footer .btn:hover i {
    color: var(--logo-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* About Us Page Icons - Always Visible */
.about-us .fa-headset,
.about-us .fa-car,
.about-us .fa-map-marker-alt {
    color: var(--logo-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

/* About Us Page Icon Containers Hover */
.about-us .d-flex.align-items-center:hover .fa-headset,
.about-us .d-flex.align-items-center:hover .fa-car,
.about-us .d-flex.align-items-center:hover .fa-map-marker-alt {
    color: var(--logo-white) !important;
    transform: scale(1.2) !important;
}

/* About Us Page Icon Background Hover */
.about-us .bg-primary:hover {
    background: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

/* About Us Page Headings Hover */
.about-us h4:hover {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease !important;
}

/* Force visibility for About Us icons */
.about-us .fa {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-white) !important;
}

/* About Us icon containers */
.about-us .bg-primary {
    background: var(--logo-primary) !important;
    transition: all 0.3s ease !important;
}

/* Floating Phone Buttons */
.btn-floating.phone {
    background: var(--logo-white) !important;
    border: 2px solid var(--logo-primary) !important;
    color: var(--logo-primary) !important;
    transition: all 0.3s ease !important;
}

.btn-floating.phone:hover {
    background: var(--logo-accent) !important;
    border-color: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
}

.btn-floating.phone i {
    color: var(--logo-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.btn-floating.phone:hover i {
    color: var(--logo-white) !important;
}

/* Back to Top Button */
.btn-floating.back-to-top {
    background: var(--logo-white) !important;
    border: 2px solid var(--logo-primary) !important;
    color: var(--logo-primary) !important;
    transition: all 0.3s ease !important;
}

.btn-floating.back-to-top:hover {
    background: var(--logo-accent) !important;
    border-color: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
}

.btn-floating.back-to-top i {
    color: var(--logo-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.btn-floating.back-to-top:hover i {
    color: var(--logo-white) !important;
}

/* WhatsApp Button */
.btn-floating.whatsapp {
    background: var(--logo-white) !important;
    border: 2px solid #25D366 !important;
    color: #25D366 !important;
    transition: all 0.3s ease !important;
}

.btn-floating.whatsapp:hover {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: var(--logo-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
}

.btn-floating.whatsapp i {
    color: #25D366 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.btn-floating.whatsapp:hover i {
    color: var(--logo-white) !important;
}

/* Services Page Bullet Points */
.bg-primary .fa-check-circle {
    color: var(--logo-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-size: 1.2rem !important;
}

.bg-primary ul li {
    color: var(--logo-white) !important;
}

.bg-primary ul li i {
    color: var(--logo-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Ready to Book Your Ride Section */
.bg-secondary h2,
.bg-secondary .display-5 {
    color: var(--logo-white) !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.bg-secondary p {
    color: var(--logo-white) !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.bg-secondary .btn-light {
    background: var(--logo-white) !important;
    color: var(--logo-primary) !important;
    border: 2px solid var(--logo-white) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.bg-secondary .btn-light:hover {
    background: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    border-color: var(--logo-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
}

.bg-secondary .btn-dark {
    background: var(--logo-dark) !important;
    color: var(--logo-white) !important;
    border: 2px solid var(--logo-dark) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.bg-secondary .btn-dark:hover {
    background: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    border-color: var(--logo-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
}

.bg-secondary .btn-success {
    background: #25D366 !important;
    color: var(--logo-white) !important;
    border: 2px solid #25D366 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.bg-secondary .btn-success:hover {
    background: #128C7E !important;
    color: var(--logo-white) !important;
    border-color: #128C7E !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
}

/* Button Icons in Ready to Book Section */
.bg-secondary .btn-light i,
.bg-secondary .btn-dark i,
.bg-secondary .btn-success i {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

.bg-secondary .btn-light i {
    color: var(--logo-primary) !important;
}

.bg-secondary .btn-light:hover i {
    color: var(--logo-white) !important;
}

.bg-secondary .btn-dark i {
    color: var(--logo-white) !important;
}

.bg-secondary .btn-dark:hover i {
    color: var(--logo-white) !important;
}

.bg-secondary .btn-success i {
    color: var(--logo-white) !important;
}

.bg-secondary .btn-success:hover i {
    color: var(--logo-white) !important;
}

/* Vehicle Book Now Button Hover */
.vehicle-btn {
    background: var(--logo-primary) !important;
    color: var(--logo-white) !important;
    border: 2px solid var(--logo-primary) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
}

.vehicle-btn:hover {
    background: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    border-color: var(--logo-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
    text-decoration: none !important;
}

.vehicle-btn i {
    color: inherit !important;
    transition: all 0.3s ease !important;
}

/* Breadcrumb Styling */
.breadcrumb-item a {
    color: var(--logo-white) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.breadcrumb-item a:hover {
    color: var(--logo-accent) !important;
    text-decoration: none !important;
}

.breadcrumb-item.active {
    color: var(--logo-white) !important;
}

.breadcrumb-item::before {
    color: var(--logo-white) !important;
}

/* Product Detail Page Action Buttons */
.product-detail .btn-primary {
    background: var(--logo-primary) !important;
    color: var(--logo-white) !important;
    border: 2px solid var(--logo-primary) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.product-detail .btn-primary:hover {
    background: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    border-color: var(--logo-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
}

.product-detail .btn-success {
    background: #25D366 !important;
    color: var(--logo-white) !important;
    border: 2px solid #25D366 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.product-detail .btn-success:hover {
    background: #128C7E !important;
    color: var(--logo-white) !important;
    border-color: #128C7E !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
}

/* Product Detail Button Icons */
.product-detail .btn-primary i,
.product-detail .btn-success i {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

/* Vehicle Listing Cards Hover - Override Red Shadow */
.categories .categories-item:hover {
    border: 1px solid var(--logo-primary) !important;
    transition: all 0.3s ease !important;
}

.categories .categories-item .categories-item-inner:hover {
    box-shadow: 0 0 50px rgba(0, 140, 158, 0.3) !important;
    transform: translateY(-5px) !important;
    transition: all 0.3s ease !important;
}

/* Custom Logo Color Classes */
.logo-primary { color: var(--logo-primary) !important; }
.logo-secondary { color: var(--logo-secondary) !important; }
.logo-accent { color: var(--logo-accent) !important; }
.logo-dark { color: var(--logo-dark) !important; }

.bg-logo-primary { background-color: var(--logo-primary) !important; }
.bg-logo-secondary { background-color: var(--logo-secondary) !important; }
.bg-logo-accent { background-color: var(--logo-accent) !important; }
.bg-logo-dark { background-color: var(--logo-dark) !important; }

/* Special Golden Button Classes */
.btn-gold {
    background: linear-gradient(135deg, var(--logo-accent), var(--logo-accent-light)) !important;
    border-color: var(--logo-accent) !important;
    color: var(--logo-white) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(201, 160, 59, 0.2) !important;
}

.btn-gold:hover {
    background: linear-gradient(135deg, var(--logo-accent-light), #F4D03F) !important;
    border-color: var(--logo-accent-light) !important;
    color: var(--logo-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.5) !important;
}

.btn-teal {
    background: linear-gradient(135deg, var(--logo-primary), var(--logo-primary-light)) !important;
    border-color: var(--logo-primary) !important;
    color: var(--logo-white) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 140, 158, 0.2) !important;
}

.btn-teal:hover {
    background: linear-gradient(135deg, var(--logo-primary-light), #4ECDC4) !important;
    border-color: var(--logo-primary-light) !important;
    color: var(--logo-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0, 140, 158, 0.4) !important;
}

/* Premium Golden Text Effects */
.text-golden {
    color: var(--logo-accent) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(201, 160, 59, 0.3) !important;
}

.text-golden-glow {
    color: var(--logo-accent) !important;
    font-weight: 600 !important;
    text-shadow: 0 0 10px rgba(201, 160, 59, 0.5) !important;
}

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--logo-primary), var(--logo-primary-light)) !important;
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, var(--logo-secondary), var(--logo-secondary-light)) !important;
}

.bg-gradient-accent {
    background: linear-gradient(135deg, var(--logo-accent), var(--logo-accent-light)) !important;
}

/* Hover Effects */
.hover-logo-primary:hover {
    color: var(--logo-primary) !important;
    transition: all 0.3s ease;
}

.hover-logo-accent:hover {
    color: var(--logo-accent) !important;
    transition: all 0.3s ease;
}

/* Border Colors */
.border-logo-primary {
    border-color: var(--logo-primary) !important;
}

.border-logo-secondary {
    border-color: var(--logo-secondary) !important;
}

.border-logo-accent {
    border-color: var(--logo-accent) !important;
}

/* Enhanced Button Styles */
.btn {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.btn:not(.btn-sm):not(.btn-lg) {
    padding: 12px 24px !important;
    font-size: 14px !important;
}

/* Special Golden Accent Elements */
.golden-accent {
    position: relative;
}

.golden-accent::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--logo-accent), var(--logo-accent-light), var(--logo-accent));
    border-radius: 10px;
    z-index: -1;
    opacity: 0.3;
}

/* Premium Card Styles */
.premium-card {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, var(--logo-accent), var(--logo-primary)) border-box;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.premium-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(201, 160, 59, 0.2);
}

/* Golden Text Highlights */
.highlight-gold {
    background: linear-gradient(135deg, var(--logo-accent), var(--logo-accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Homepage Slider Control Buttons */
.carousel-control-prev,
.carousel-control-next {
    opacity: 0.9 !important;
    visibility: visible !important;
    display: flex !important;
    transition: all 0.3s ease !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1 !important;
}

.carousel-control-prev .btn,
.carousel-control-next .btn {
    background: linear-gradient(135deg, var(--logo-primary), var(--logo-primary-light)) !important;
    border: 2px solid var(--logo-white) !important;
    color: var(--logo-white) !important;
    box-shadow: 0 4px 12px rgba(0, 140, 158, 0.3) !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
}

.carousel-control-prev .btn:hover,
.carousel-control-next .btn:hover {
    background: linear-gradient(135deg, var(--logo-accent), var(--logo-accent-light)) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
}

.carousel-control-prev .btn i,
.carousel-control-next .btn i {
    color: var(--logo-white) !important;
    font-size: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Service Icons */
.service-icon i,
.service-item .service-icon i,
.fleet-icon i {
    color: var(--logo-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.service-item:hover .service-icon i,
.fleet-card:hover .fleet-icon i {
    color: var(--logo-accent) !important;
    transform: scale(1.2) !important;
}

/* Service Icons Inside Shaped Containers - Always Visible */
.service-item .service-icon i,
.feature-item .feature-icon i,
.fleet-card .fleet-icon i,
.about-item .about-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
    transition: all 0.3s ease !important;
}

/* Service Icons Hover Effects */
.service-item:hover .service-icon i,
.feature-item:hover .feature-icon i,
.fleet-card:hover .fleet-icon i,
.about-item:hover .about-icon i {
    color: var(--logo-accent) !important;
    transform: scale(1.2) !important;
}

/* Force all FontAwesome icons to be visible */
.fa, .fas, .far, .fab, .fal, .fad {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Specific service section fixes */
.service-item .service-icon,
.feature-item .feature-icon,
.fleet-card .fleet-icon,
.about-item .about-icon {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Override any hidden states for service icons */
.service-icon,
.feature-icon,
.fleet-icon,
.about-icon {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.service-icon i,
.feature-icon i,
.fleet-icon i,
.about-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
    transition: all 0.3s ease !important;
}

/* About Section Icons */
.about-icon i,
.about-item-inner .about-icon i {
    color: var(--logo-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.about-item-inner:hover .about-icon i {
    color: var(--logo-accent) !important;
    transform: scale(1.1) !important;
}

/* Owl Carousel Navigation Arrows */
.owl-nav {
    display: block !important;
    opacity: 1 !important;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(135deg, var(--logo-primary), var(--logo-primary-light)) !important;
    color: var(--logo-white) !important;
    border: 2px solid var(--logo-white) !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    box-shadow: 0 4px 12px rgba(0, 140, 158, 0.3) !important;
    transition: all 0.3s ease !important;
    opacity: 0.9 !important;
    visibility: visible !important;
    z-index: 10 !important;
}

.owl-nav .owl-prev {
    left: -25px !important;
}

.owl-nav .owl-next {
    right: -25px !important;
}

.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
    background: linear-gradient(135deg, var(--logo-accent), var(--logo-accent-light)) !important;
    color: var(--logo-white) !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
    opacity: 1 !important;
}

/* Vehicle Listing Carousel Specific */
.categories-carousel .owl-nav .owl-prev,
.categories-carousel .owl-nav .owl-next {
    background: linear-gradient(135deg, var(--logo-primary), var(--logo-primary-light)) !important;
    color: var(--logo-white) !important;
    border: 2px solid var(--logo-white) !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 140, 158, 0.3) !important;
    transition: all 0.3s ease !important;
    opacity: 0.9 !important;
    visibility: visible !important;
}

.categories-carousel .owl-nav .owl-prev:hover,
.categories-carousel .owl-nav .owl-next:hover {
    background: linear-gradient(135deg, var(--logo-accent), var(--logo-accent-light)) !important;
    color: var(--logo-white) !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
    opacity: 1 !important;
}

/* Ensure Owl Carousel arrows are always visible */
.owl-carousel .owl-nav {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
    opacity: 0.9 !important;
    visibility: visible !important;
    display: flex !important;
}

.owl-carousel:hover .owl-nav .owl-prev,
.owl-carousel:hover .owl-nav .owl-next {
    opacity: 1 !important;
}

/* Force carousel control visibility */
.carousel-control-prev,
.carousel-control-next {
    display: flex !important;
    opacity: 0.9 !important;
    visibility: visible !important;
}

.carousel-control-prev .btn,
.carousel-control-next .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.carousel-control-prev .btn i,
.carousel-control-next .btn i {
    color: var(--logo-white) !important;
    font-size: 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Service section icon fixes */
.service-item .service-icon i {
    color: var(--logo-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

.about-item-inner .about-icon i {
    color: var(--logo-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Additional fixes for icon visibility */
.fa, .fas, .far, .fab {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Fix for service cards */
.fleet-card .fleet-icon i,
.feature-item .feature-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
}

/* Additional Service Icon Fixes for All Sections */
.services .service-item .service-icon i,
.about .about-item .about-icon i,
.features .feature-item .feature-icon i,
.fleet .fleet-card .fleet-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
    transition: all 0.3s ease !important;
}

/* Ensure service icons are visible in all containers */
[class*="service"] i,
[class*="feature"] i,
[class*="fleet"] i,
[class*="about"] i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Override any hidden states */
.service-icon,
.feature-icon,
.fleet-icon,
.about-icon {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Specific icon fixes for shaped containers */
.service-item .service-icon i,
.feature-item .feature-icon i,
.fleet-card .fleet-icon i,
.about-item .about-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
    transition: all 0.3s ease !important;
}

/* Force visibility for all FontAwesome icons in service sections */
.service-item i,
.feature-item i,
.fleet-card i,
.about-item i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
}

/* CRITICAL: Force all service icons to be visible by default */
.service-item .service-icon i,
.feature-item .feature-icon i,
.fleet-card .fleet-icon i,
.about-item .about-icon i,
.services .service-item .service-icon i,
.features .feature-item .feature-icon i,
.fleet .fleet-card .fleet-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
    transition: all 0.3s ease !important;
}

/* Override any CSS that might be hiding icons by default */
.service-item:not(:hover) .service-icon i,
.feature-item:not(:hover) .feature-icon i,
.fleet-card:not(:hover) .fleet-icon i,
.about-item:not(:hover) .about-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
}

/* Force visibility for all icons in service containers */
[class*="service"] .service-icon i,
[class*="feature"] .feature-icon i,
[class*="fleet"] .fleet-icon i,
[class*="about"] .about-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
}

/* Additional override for any hidden states */
.service-icon i,
.feature-icon i,
.fleet-icon i,
.about-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
    transition: all 0.3s ease !important;
}

/* Force all FontAwesome icons to be visible everywhere */
.fa, .fas, .far, .fab, .fal, .fad {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Specific fix for service section icons */
.services .service-item .service-icon i,
.features .feature-item .feature-icon i,
.fleet .fleet-card .fleet-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
}

/* AGGRESSIVE OVERRIDE: Force icons to be visible by default */
.service-item .service-icon i:not(:hover),
.feature-item .feature-icon i:not(:hover),
.fleet-card .fleet-icon i:not(:hover),
.about-item .about-icon i:not(:hover) {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
}

/* Override any existing CSS that might hide icons */
.service-item .service-icon i,
.feature-item .feature-icon i,
.fleet-card .fleet-icon i,
.about-item .about-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
    transition: all 0.3s ease !important;
}

/* Force visibility for all service icons regardless of state */
* .service-icon i,
* .feature-icon i,
* .fleet-icon i,
* .about-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
}

/* ROOT CAUSE FIX: Override main style.css service icon rules */
.service .service-item .service-icon i,
.feature .feature-item .feature-icon i,
.categories .categories-item .categories-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: var(--logo-primary) !important;
    font-size: 2rem !important;
    transition: all 0.3s ease !important;
}

/* Override the main style.css color and background */
.service .service-item .service-icon {
    color: var(--logo-primary) !important;
    background: var(--logo-primary) !important;
}

.service .service-item .service-icon i {
    color: var(--logo-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-size: 2rem !important;
}

/* Feature icons override */
.feature .feature-item .feature-icon {
    color: var(--logo-primary) !important;
    background: var(--logo-primary) !important;
}

.feature .feature-item .feature-icon i {
    color: var(--logo-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-size: 2rem !important;
}

/* Categories icons override */
.categories .categories-item .categories-icon {
    color: var(--logo-primary) !important;
    background: var(--logo-primary) !important;
}

.categories .categories-item .categories-icon i {
    color: var(--logo-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-size: 2rem !important;
}

/* Hover effects for service icons */
.service .service-item:hover .service-icon {
    background: var(--logo-accent) !important;
    transform: scale(1.1) !important;
}

.service .service-item:hover .service-icon i {
    color: var(--logo-white) !important;
    transform: scale(1.2) !important;
}

.feature .feature-item:hover .feature-icon {
    background: var(--logo-accent) !important;
    transform: scale(1.1) !important;
}

.feature .feature-item:hover .feature-icon i {
    color: var(--logo-white) !important;
    transform: scale(1.2) !important;
}

.categories .categories-item:hover .categories-icon {
    background: var(--logo-accent) !important;
    transform: scale(1.1) !important;
}

.categories .categories-item:hover .categories-icon i {
    color: var(--logo-white) !important;
    transform: scale(1.2) !important;
}

/* Hide default Owl Carousel navigation buttons */
.categories-carousel .owl-nav {
    display: none !important;
}

.categories-carousel .owl-nav .owl-prev,
.categories-carousel .owl-nav .owl-next {
    display: none !important;
}

/* Custom Navigation Buttons for Vehicle Listing - Positioned as per image */
.carousel-nav-container {
    position: relative;
    margin-bottom: 20px;
}

.btn-carousel-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(135deg, var(--logo-primary), var(--logo-primary-light)) !important;
    border: 2px solid var(--logo-white) !important;
    color: var(--logo-white) !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 140, 158, 0.3) !important;
    transition: all 0.3s ease !important;
    opacity: 0.9 !important;
    z-index: 10 !important;
}

.carousel-nav-left {
    left: -30px !important;
}

.carousel-nav-right {
    right: -30px !important;
}

.btn-carousel-nav:hover {
    background: linear-gradient(135deg, var(--logo-accent), var(--logo-accent-light)) !important;
    color: var(--logo-white) !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(201, 160, 59, 0.4) !important;
    opacity: 1 !important;
}

.btn-carousel-nav i {
    color: var(--logo-white) !important;
    font-size: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Responsive positioning for mobile */
@media (max-width: 768px) {
    .carousel-nav-left {
        left: -15px !important;
    }
    
    .carousel-nav-right {
        right: -15px !important;
    }
    
    .btn-carousel-nav {
        width: 50px !important;
        height: 50px !important;
    }
    
    .btn-carousel-nav i {
        font-size: 16px !important;
    }
}