/*
Theme Name: Dar al Ahsan Travel and Tourism
Theme URI: https://daralahsan.com
Author: Dar al Ahsan Development Team
Author URI: https://daralahsan.com
Description: Premium WordPress theme for Dar al Ahsan Travel and Tourism - Luxury car rental services in Dubai. High-performance, SEO-optimized, and conversion-focused design.
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: daral-ahsan
Domain Path: /languages
Tags: car-rental, dubai, luxury, tourism, responsive, seo-friendly, high-performance
*/

/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }

p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

/* Enhanced Color Palette */
:root {
    --primary-green: #0E7A57;
    --accent-gold: #D4AF37;
    --accent-lime: #79C879;
    --charcoal: #1F2937;
    --off-white: #F7FAFC;
    --light-gray: #F1F5F9;
    --medium-gray: #64748B;
    --dark-gray: #334155;
    --white: #FFFFFF;
    --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Top Bar */
.top-bar {
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--dark-gray) 100%);
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.contact-info {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--off-white);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.contact-item:hover {
    color: var(--accent-gold);
}

.contact-item i {
    color: var(--accent-gold);
    font-size: 0.9rem;
}

.contact-item a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: var(--accent-gold);
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--off-white);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-link:hover {
    background: var(--accent-gold);
    color: var(--charcoal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

/* Enhanced Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Transparent header for hero section */
.header-transparent {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-transparent .top-bar {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-transparent .contact-item,
.header-transparent .contact-item a {
    color: rgba(255, 255, 255, 0.9);
}

.header-transparent .contact-item:hover,
.header-transparent .contact-item a:hover {
    color: var(--accent-gold);
}

.header-transparent .social-link {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-transparent .company-name {
    color: white;
}

.header-transparent .tagline {
    color: rgba(255, 255, 255, 0.8);
}

.header-transparent .nav-menu a {
    color: rgba(255, 255, 255, 0.9);
}

.header-transparent .nav-menu a:hover {
    color: var(--accent-gold);
}

.header-transparent .nav-menu a::after {
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-lime));
}

.header-transparent .cta-button.secondary {
    color: white;
    border-color: var(--accent-gold);
}

.header-transparent .cta-button.secondary:hover {
    background: var(--accent-gold);
    color: var(--charcoal);
}

.header-transparent .mobile-menu-toggle span {
    background: white;
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.99);
    box-shadow: var(--shadow-medium);
    transform: translateY(0);
}

.header.scrolled .top-bar {
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--dark-gray) 100%);
}

.header.scrolled .contact-item,
.header.scrolled .contact-item a {
    color: var(--off-white);
}

.header.scrolled .company-name {
    color: var(--charcoal);
}

.header.scrolled .tagline {
    color: var(--medium-gray);
}

.header.scrolled .nav-menu a {
    color: var(--charcoal);
}

.header.scrolled .cta-button.secondary {
    color: var(--charcoal);
    border-color: var(--primary-green);
}

.header.scrolled .mobile-menu-toggle span {
    background: var(--charcoal);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    min-height: 90px;
}

/* Enhanced Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.02);
}

.logo-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-lime) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
}

.logo-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
    animation: shimmer 3s infinite;
}

.logo-icon i {
    font-size: 1.8rem;
    color: white;
    z-index: 2;
    position: relative;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.brand-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.company-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--charcoal);
    letter-spacing: -0.5px;
    line-height: 1.1;
    transition: color 0.3s ease;
}

.tagline {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--medium-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Inter', sans-serif;
}

/* Enhanced Navigation */
.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

.mobile-navigation-panel {
    display: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    text-decoration: none;
    color: var(--charcoal);
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    padding: 8px 0;
    text-transform: capitalize;
    letter-spacing: -0.2px;
}

.nav-menu a:hover {
    color: var(--primary-green);
    transform: translateY(-1px);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-green), var(--accent-lime));
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(-50%);
    border-radius: 2px;
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a {
    color: var(--primary-green);
}

.nav-menu .current-menu-item > a::after,
.nav-menu .current_page_item > a::after {
    width: 100%;
}

/* Dropdown Support */
.nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 220px;
    box-shadow: var(--shadow-heavy);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1001;
    padding: 8px 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu .sub-menu li {
    display: block;
}

.nav-menu .sub-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--charcoal);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.nav-menu .sub-menu a:hover {
    background: var(--light-gray);
    color: var(--primary-green);
    padding-left: 25px;
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    text-transform: capitalize;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.cta-button.primary {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-lime) 100%);
    color: white;
    box-shadow: var(--shadow-light);
}

.cta-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.cta-button.secondary {
    background: transparent;
    color: var(--charcoal);
    border-color: var(--primary-green);
}

.cta-button.secondary:hover {
    background: var(--primary-green);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.cta-button i {
    font-size: 1rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.mobile-menu-toggle:hover {
    background: var(--light-gray);
}

.mobile-menu-toggle span {
        width: 25px;
        height: 3px;
        background: var(--charcoal);
        border-radius: 2px;
        transition: all 0.3s ease;
        display: block;
    }
    
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

/* Mobile Menu Styles */
@media (max-width: 1024px) {
    /* Prevent body scroll when mobile menu is open */
    body.menu-open,
    html.menu-open {
        overflow: hidden;
        height: 100%;
    }
    
    .header-content {
        padding: 15px 0;
        min-height: 80px;
        position: relative;
    }
    
    /* Show mobile menu toggle on tablets and below */
    .mobile-menu-toggle {
        display: flex;
        margin-left: auto;
    }
    
    /* Hide header actions on tablets and below */
    .header-actions {
        display: none;
    }
    
    .main-navigation {
        display: none;
    }
    
    .mobile-navigation-panel {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px, 85%);
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 24px 0 0 24px;
        padding: 110px 24px 32px;
        transform: translateX(100%);
        transition: transform 0.35s ease, opacity 0.35s ease;
        z-index: 1002;
        opacity: 0;
        overflow-y: auto;
        pointer-events: none;
    }
    
    .mobile-navigation-panel.active {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }
    
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.25);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    .mobile-navigation-panel .nav-menu {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
    }
    
    .mobile-navigation-panel .nav-menu li {
        width: 100%;
    }
    
    .mobile-navigation-panel .nav-menu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        color: var(--charcoal) !important;
        text-align: left;
        width: 100%;
    }
    
    .mobile-navigation-panel .nav-menu a:hover {
        background: var(--light-gray);
        padding-left: 28px;
    }
    
    .mobile-navigation-panel .nav-menu a::after {
        display: none;
    }
    
    .mobile-navigation-panel .nav-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: var(--light-gray);
        padding-left: 12px;
    }
    
    .mobile-navigation-panel .nav-menu .sub-menu a {
        font-size: 0.95rem;
        padding: 12px 18px;
    }
    
    .mobile-navigation-panel .nav-menu li.menu-item-has-children > a::after {
        content: '\f107';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        margin-left: 12px;
        transition: transform 0.3s ease;
    }
    
    .mobile-navigation-panel .nav-menu li.menu-item-has-children.active > a::after {
        transform: rotate(180deg);
    }
    
    .mobile-navigation-panel .nav-menu li.menu-item-has-children.active > .sub-menu {
        max-height: 500px;
    }
    
    .mobile-header-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 30px;
    }
    
    .mobile-header-actions .cta-button {
        width: 100%;
        justify-content: center;
    }
    
    .header-actions {
        gap: 10px;
    }
    
    .cta-button {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    .company-name {
        font-size: 1.6rem;
    }
    
    .logo-icon {
        width: 50px;
        height: 50px;
    }
    
    .logo-icon i {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
    
    .header-content {
        padding: 12px 0;
        min-height: 70px;
    }
    
    .company-name {
        font-size: 1.4rem;
    }
    
    .tagline {
        font-size: 0.75rem;
    }
    
    .logo-icon {
        width: 45px;
        height: 45px;
    }
    
    .logo-icon i {
        font-size: 1.3rem;
    }
    
    .mobile-navigation-panel {
        width: 100%;
        max-width: none;
        border-radius: 0;
        padding: 90px 20px 24px;
    }
    
    .mobile-navigation-panel .nav-menu {
        padding: 15px 0;
    }
    
    .mobile-navigation-panel .nav-menu a {
        padding: 12px 20px;
        font-size: 1rem;
    }
}

/* Mobile Menu Toggle Animation */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Body scroll lock when menu is open */
body.menu-open {
    overflow: hidden;
}

/* Overlay for mobile menu */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -90px; /* Account for floating header */
    padding-top: 90px; /* Push content below header */
}

/* Video Container with Loading Optimization */
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

/* Video Loading Progress Bar */
.video-loading-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 60px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.video-loading-bar.hidden {
    opacity: 0;
    pointer-events: none;
}

.video-loading-progress {
    width: 80%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.video-loading-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-gold), var(--primary-green));
    border-radius: 3px;
    transition: width 0.3s ease;
    animation: loading-pulse 1.5s ease-in-out infinite;
}

@keyframes loading-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.video-loading-text {
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* Video Poster/Placeholder */
.hero-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: opacity 0.8s ease;
}

.hero-video-poster.hidden {
    opacity: 0;
    pointer-events: none;
}

.video-poster-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.video-poster-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    text-align: center;
}

.poster-content {
    background: rgba(0, 0, 0, 0.6);
    padding: 40px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.poster-content i {
    font-size: 4rem;
    margin-bottom: 20px;
    color: var(--accent-gold);
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.poster-content span {
    font-size: 1.2rem;
    font-weight: 500;
    display: block;
}

/* Optimized Hero Video */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-video.loaded {
    opacity: 1;
}

.hero-video::-webkit-media-controls {
    display: none !important;
}

.hero-video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* Fallback background */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0E7A57 0%, #D4AF37 100%);
    z-index: 0;
}

/* Enhanced Logo Hover Effects */
.logo:hover .logo-icon {
    transform: scale(1.05);
    box-shadow: var(--shadow-medium);
}

.logo:hover .company-name {
    color: var(--primary-green);
}

.logo:hover .tagline {
    color: var(--accent-gold);
}

/* Enhanced CTA Button Effects */
.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button.primary:hover {
    background: linear-gradient(135deg, var(--accent-lime) 0%, var(--primary-green) 100%);
    transform: translateY(-3px);
    box-shadow: var(--shadow-heavy);
}

.cta-button.secondary:hover {
    background: var(--primary-green);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-green);
}

/* Enhanced Navigation Effects */
.nav-menu a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    width: 6px;
    height: 6px;
    background: var(--accent-gold);
    border-radius: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform 0.3s ease;
}

.nav-menu a:hover::before {
    transform: translateY(-50%) scale(1);
}

/* Trust Badge */
.trust-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, var(--accent-gold) 0%, #F59E0B 100%);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-light);
    animation: float 3s ease-in-out infinite;
}

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

/* Premium gradient overlay for header */
.header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    opacity: 0.3;
}

/* Enhanced contact info hover */
.contact-item:hover i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.contact-item:hover a {
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

/* Social links enhanced hover */
.social-link:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

/* Add subtle animation to company name */
.company-name {
    position: relative;
    display: inline-block;
}

.company-name::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-green), var(--accent-gold));
    transition: width 0.4s ease;
}

.logo:hover .company-name::after {
    width: 100%;
}

/* Enhanced mobile menu */
@media (max-width: 1024px) {
    .main-navigation {
        background: linear-gradient(135deg, white 0%, var(--off-white) 100%);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-top: none;
    }
    
    .nav-menu a {
        position: relative;
        overflow: hidden;
    }
    
    .nav-menu a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background: linear-gradient(135deg, var(--primary-green), var(--accent-gold));
        transform: scaleY(0);
        transition: transform 0.3s ease;
    }
    
    .nav-menu a:hover::before {
        transform: scaleY(1);
    }
    
    .nav-menu a:hover {
        background: linear-gradient(90deg, rgba(14, 122, 87, 0.05), transparent);
        padding-left: 30px;
    }
}

/* Add elegant entrance animation */
@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.header {
    animation: slideInDown 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Premium focus states for accessibility */
.cta-button:focus,
.nav-menu a:focus,
.social-link:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* Luxury shimmer effect for special elements */
.luxury-shimmer {
    position: relative;
    overflow: hidden;
}

.luxury-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    transition: left 0.8s ease;
}

.luxury-shimmer:hover::before {
    left: 100%;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 20px;
}

.hero-title {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    animation: fadeInUp 1s ease-out 0.3s both;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #3aa64c, #2e8f3e);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    animation: fadeInUp 1s ease-out 0.6s both;
    position: relative;
    overflow: hidden;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(58, 166, 76, 0.4);
}

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

.cta-button:hover::before {
    left: 100%;
}

/* Fleet Section - Premium Enhanced */
.fleet-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--dark-gray) 0%, var(--charcoal) 50%, #1a1f2e 100%);
    position: relative;
    overflow: hidden;
}

.fleet-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(14, 122, 87, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 500" preserveAspectRatio="none"><defs><linearGradient id="dubaiGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.05);stop-opacity:1" /><stop offset="50%" style="stop-color:rgba(255,255,255,0.02);stop-opacity:1" /><stop offset="100%" style="stop-color:rgba(255,255,255,0.01);stop-opacity:1" /></linearGradient><linearGradient id="towerGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgba(212,175,55,0.2);stop-opacity:1" /><stop offset="50%" style="stop-color:rgba(14,122,87,0.15);stop-opacity:1" /><stop offset="100%" style="stop-color:rgba(14,122,87,0.08);stop-opacity:1" /></linearGradient></defs><g fill="url(%23dubaiGrad)" opacity="0.5"><path d="M0,500 L0,480 L50,480 L50,440 L100,440 L100,400 L150,400 L150,360 L200,360 L200,320 L250,320 L250,280 L300,280 L300,240 L350,240 L350,200 L400,200 L400,160 L450,160 L450,120 L500,120 L500,80 L550,80 L550,40 L600,40 L600,10 L650,10 L650,0 L700,0 L700,500 Z"/><path d="M150,500 L150,460 L200,460 L200,420 L250,420 L250,380 L300,380 L300,340 L350,340 L350,300 L400,300 L400,260 L450,260 L450,220 L500,220 L500,180 L550,180 L550,140 L600,140 L600,100 L650,100 L650,60 L700,60 L700,30 L750,30 L750,10 L800,10 L800,0 L850,0 L850,500 Z" opacity="0.4"/><path d="M300,500 L300,470 L350,470 L350,430 L400,430 L400,390 L450,390 L450,350 L500,350 L500,310 L550,310 L550,270 L600,270 L600,230 L650,230 L650,190 L700,190 L700,150 L750,150 L750,110 L800,110 L800,70 L850,70 L850,35 L900,35 L900,15 L950,15 L950,0 L1000,0 L1000,500 Z" opacity="0.35"/><path d="M500,500 L500,490 L520,490 L520,480 L540,480 L540,470 L560,470 L560,460 L580,460 L580,450 L600,450 L600,440 L620,440 L620,430 L640,430 L640,420 L660,420 L660,410 L680,410 L680,400 L700,400 L700,390 L720,390 L720,380 L740,380 L740,370 L760,370 L760,360 L780,360 L780,350 L800,350 L800,340 L820,340 L820,330 L840,330 L840,320 L860,320 L860,310 L880,310 L880,300 L900,300 L900,290 L920,290 L920,280 L940,280 L940,270 L960,270 L960,260 L980,260 L980,250 L1000,250 L1000,240 L1020,240 L1020,230 L1040,230 L1040,220 L1060,220 L1060,210 L1080,210 L1080,200 L1100,200 L1100,190 L1120,190 L1120,180 L1140,180 L1140,170 L1160,170 L1160,160 L1180,160 L1180,150 L1200,150 L1200,140 L1220,140 L1220,130 L1240,130 L1240,120 L1260,120 L1260,110 L1280,110 L1280,100 L1300,100 L1300,90 L1320,90 L1320,80 L1340,80 L1340,70 L1360,70 L1360,60 L1380,60 L1380,50 L1400,50 L1400,40 L1420,40 L1420,30 L1440,30 L1440,20 L1460,20 L1460,10 L1480,10 L1480,0 L1500,0 L1500,500 Z" fill="url(%23towerGrad)" opacity="0.7"/><path d="M650,500 L650,480 L700,480 L700,440 L750,440 L750,400 L800,400 L800,360 L850,360 L850,320 L900,320 L900,280 L950,280 L950,240 L1000,240 L1000,200 L1050,200 L1050,160 L1100,160 L1100,120 L1150,120 L1150,80 L1200,80 L1200,50 L1250,50 L1250,25 L1300,25 L1300,5 L1350,5 L1350,0 L1400,0 L1400,500 Z" opacity="0.4"/><path d="M800,500 L800,470 L850,470 L850,430 L900,430 L900,390 L950,390 L950,350 L1000,350 L1000,310 L1050,310 L1050,270 L1100,270 L1100,230 L1150,230 L1150,190 L1200,190 L1200,150 L1250,150 L1250,110 L1300,110 L1300,70 L1350,70 L1350,40 L1400,40 L1400,15 L1450,15 L1450,0 L1500,0 L1500,500 Z" opacity="0.35"/><path d="M950,500 L950,480 L1000,480 L1000,440 L1050,440 L1050,400 L1100,400 L1100,360 L1150,360 L1150,320 L1200,320 L1200,280 L1250,280 L1250,240 L1300,240 L1300,200 L1350,200 L1350,160 L1400,160 L1400,120 L1450,120 L1450,80 L1500,80 L1500,500 Z" opacity="0.3"/></g></svg>');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    opacity: 0.7;
    pointer-events: none;
}

.fleet-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-green), var(--accent-gold), var(--accent-lime));
}

.section-title {
    text-align: center;
    margin-bottom: 4rem;
    color: white;
    font-size: 3rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, var(--accent-lime) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-lime));
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

.car-card {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.car-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-green), var(--accent-gold), var(--accent-lime));
    z-index: 1;
}

.car-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 35px 100px rgba(14, 122, 87, 0.4);
    border-color: rgba(14, 122, 87, 0.4);
    background: rgba(255, 255, 255, 1);
}

.car-image {
    width: 100%;
    height: 450px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.car-card:hover .car-image {
    transform: scale(1.08);
}

.car-details {
    padding: 3rem;
    position: relative;
}

.car-name {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--charcoal);
    font-weight: 700;
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--primary-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.car-year {
    color: var(--medium-gray);
    font-size: 1.2rem;
    margin-bottom: 2rem;
    font-weight: 500;
}

.pricing-table {
    background: linear-gradient(135deg, rgba(14, 122, 87, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    border: 2px solid rgba(14, 122, 87, 0.2);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.pricing-table::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-green), var(--accent-gold));
}

.pricing-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--charcoal);
    text-align: center;
    font-weight: 700;
}

.pricing-note {
    font-style: italic;
    color: var(--medium-gray);
    text-align: center;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 0;
}

.pricing-item {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    border: 2px solid rgba(14, 122, 87, 0.15);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.pricing-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-green), var(--accent-lime));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.pricing-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(14, 122, 87, 0.3);
    border-color: rgba(14, 122, 87, 0.4);
    background: rgba(255, 255, 255, 1);
}

.pricing-item:hover::before {
    transform: scaleX(1);
}

.service-type {
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.duration {
    color: var(--medium-gray);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    font-weight: 500;
}

.price-dubai {
    color: var(--primary-green);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
}

.price-abu-dhabi {
    color: var(--accent-gold);
    font-size: 1rem;
    font-weight: 600;
    display: block;
}

.inclusions, .additional-info {
    margin-bottom: 2.5rem;
    background: rgba(14, 122, 87, 0.06);
    padding: 2rem;
    border-radius: 16px;
    border-left: 4px solid var(--primary-green);
    backdrop-filter: blur(5px);
}

.inclusions h4, .additional-info h4 {
    color: var(--charcoal);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.inclusions h4::before, .additional-info h4::before {
    content: '✨';
    font-size: 1.5rem;
}

.inclusions ul, .additional-info ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
}

.inclusions li, .additional-info li {
    padding: 0.75rem 0 0.75rem 2rem;
    position: relative;
    color: var(--dark-gray);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.inclusions li:hover, .additional-info li:hover {
    color: var(--primary-green);
    transform: translateX(5px);
}

.inclusions li::before, .additional-info li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-green);
    font-weight: bold;
    font-size: 1.2rem;
    width: 24px;
    height: 24px;
    background: rgba(14, 122, 87, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

/* Manager Info in Car Card */
.car-details .manager-info {
    background: linear-gradient(135deg, rgba(14, 122, 87, 0.08), rgba(212, 175, 55, 0.05));
    padding: 2rem;
    border-radius: 16px;
    margin-top: 2rem;
    border: 2px solid rgba(14, 122, 87, 0.15);
    position: relative;
    overflow: hidden;
}

.car-details .manager-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-green), var(--accent-gold));
}

.car-details .manager-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 0.5rem;
}

.car-details .manager-info > div:last-child {
    color: var(--medium-gray);
    font-size: 1rem;
    font-weight: 500;
}

/* Contact Section - Premium Footer Redesign */
.contact-section {
    padding: 6rem 0 4rem;
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--dark-gray) 50%, #1a1a1a 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(14, 122, 87, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 1;
    pointer-events: none;
}

.contact-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-green), var(--accent-gold), var(--accent-lime));
}

.contact-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: start;
}

.contact-info {
    background: rgba(255, 255, 255, 0.05);
    padding: 3rem;
    border-radius: 24px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-info h3 {
    margin-bottom: 2rem;
    color: var(--accent-lime);
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    padding-bottom: 1rem;
}

.contact-info h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-lime));
    border-radius: 2px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(14, 122, 87, 0.3);
    transform: translateX(5px);
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-green), var(--accent-lime));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(14, 122, 87, 0.3);
    transition: all 0.3s ease;
}

.contact-item:hover .contact-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(14, 122, 87, 0.4);
}

.contact-item a,
.contact-item span {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.05rem;
    font-weight: 500;
}

.contact-item a:hover {
    color: var(--accent-lime);
    text-shadow: 0 0 10px rgba(121, 200, 121, 0.3);
}

.manager-info {
    background: linear-gradient(135deg, rgba(14, 122, 87, 0.15), rgba(212, 175, 55, 0.1));
    padding: 2rem;
    border-radius: 16px;
    margin-top: 2.5rem;
    border: 1px solid rgba(14, 122, 87, 0.3);
    position: relative;
    overflow: hidden;
}

.manager-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-green), var(--accent-gold));
}

.manager-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-lime);
    margin-bottom: 0.5rem;
}

.manager-info > div:last-child {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
}

/* Quick Booking Form - Fixed and Enhanced */
.contact-form {
    background: rgba(255, 255, 255, 0.05);
    padding: 3rem;
    border-radius: 24px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-form h3 {
    margin-bottom: 0.75rem;
    color: white;
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    padding-bottom: 1rem;
}

.contact-form h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-lime));
    border-radius: 2px;
}

.contact-form > p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.6;
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    position: relative;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-lime);
    box-shadow: 0 0 0 3px rgba(121, 200, 121, 0.2);
    transform: translateY(-2px);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.form-group select {
    cursor: pointer;
    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='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    padding-right: 3rem;
}

.form-group select option {
    background: var(--charcoal);
    color: white;
    padding: 0.5rem;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.booking-form .cta-button {
    margin-top: 0.5rem;
    padding: 1.25rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.booking-form .cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.booking-form .cta-button:hover::before {
    left: 100%;
}

/* Booking Form Messages */
.booking-form-message {
    margin-top: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    animation: fadeIn 0.3s ease-in-out;
    font-size: 1rem;
    line-height: 1.5;
}

.booking-form-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.booking-form-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: white;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(37, 211, 102, 0.6);
}

.whatsapp-float::before {
    content: '💬';
    font-size: 24px;
}

/* Footer - Premium Styling */
.footer {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 2.5rem 0;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-green), var(--accent-gold), transparent);
}

.footer p {
    margin: 0.5rem 0;
    font-size: 0.95rem;
}

.footer p:first-child {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.footer p:last-child {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .nav-menu {
        display: none;
    }
    
    .company-name {
        font-size: 1rem;
    }
    
    .fleet-section {
        padding: 4rem 0;
    }
    
    .section-title {
        font-size: 2rem;
        margin-bottom: 2.5rem;
    }
    
    .car-card {
        max-width: 100%;
        border-radius: 16px;
    }
    
    .car-details {
        padding: 2rem;
    }
    
    .car-name {
        font-size: 1.8rem;
    }
    
    .pricing-table {
        padding: 1.5rem;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .pricing-item {
        padding: 1.5rem;
    }
    
    .inclusions ul, .additional-info ul {
        grid-template-columns: 1fr;
    }
    
    .contact-section {
        padding: 4rem 0 3rem;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .contact-info,
    .contact-form {
        padding: 2rem;
    }
    
    .contact-info h3,
    .contact-form h3 {
        font-size: 1.5rem;
    }
    
    .contact-item {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .contact-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.875rem 1rem;
        font-size: 0.95rem;
    }
    
    .booking-form .cta-button {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
    
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .car-details {
        padding: 1.5rem;
    }
    
    .pricing-table {
        padding: 1.5rem;
    }
    
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
}

/* Performance Optimizations */
img {
    max-width: 100%;
    height: auto;
    loading: lazy;
}

/* Critical CSS Above the Fold */
.header, .hero, .hero-content {
    will-change: transform;
}

/* Print Styles */
@media print {
    .header, .whatsapp-float {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .container {
        max-width: 100%;
    }
}