{} *{} {}
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 .gp-component-id-Gfkec71ILO { width: 100%;overflow-wrap: break-word; } @media (max-width: 639px) { .gp-component-id-Gfkec71ILO { width: 100%;overflow-wrap: break-word; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-Gfkec71ILO { width: 100%;overflow-wrap: break-word; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-Gfkec71ILO { width: 100%;overflow-wrap: break-word; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-Gfkec71ILO { width: 100%;overflow-wrap: break-word; } } @media (min-width: 1200px) { .gp-component-id-Gfkec71ILO { width: 100%;overflow-wrap: break-word; } }

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ===== CSS CUSTOM PROPERTIES ===== */ :root { /* Colors */ --primary-color: #dc2626; --primary-hover: #b91c1c; --secondary-color: #d4af37; --text-primary: #333; --text-secondary: #666; --text-light: #999; --background-light: #f8f9fa; --background-dark: #1a1a1a; --white: #fff; --black: #000; --border-color: #e0e0e0; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 25px rgba(0,0,0,0.1); --shadow-xl: 0 15px 40px rgba(0,0,0,0.15); /* Border radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 15px; --radius-xl: 20px; /* Transitions */ --transition-fast: all 0.2s ease; --transition-normal: all 0.3s ease; --transition-slow: all 0.5s ease; /* Typography */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 5rem; } /* ===== RESET & BASE STYLES ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { width: 100%; margin: 0; padding: 0; overflow-x: hidden; } body { font-family: var(--font-family); background: var(--white); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===== LAZY LOADING & IMAGE OPTIMIZATION ===== */ .lazy-image { opacity: 0; transition: opacity 0.6s ease-in-out; will-change: opacity; } .lazy-image.loaded { opacity: 1; } .lazy-image.error { opacity: 0.5; filter: grayscale(100%); } /* Fade-in animation for images */ @keyframes fadeInImage { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in-image { animation: fadeInImage 0.8s ease-out forwards; } /* Image placeholder while loading */ .image-placeholder { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Optimized image containers */ .image-container { position: relative; overflow: hidden; background: var(--background-light); } .image-container img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--transition-normal); } .image-container:hover img { transform: scale(1.05); } /* ===== UTILITY CLASSES ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); } .hidden { display: none; } /* Button base styles */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: 12px 24px; border: none; border-radius: 25px; font-weight: 600; text-decoration: none; cursor: pointer; transition: var(--transition-normal); white-space: nowrap; } .btn-primary { background: var(--primary-color); color: var(--white); } .btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-dark { background: var(--black); color: var(--white); } .btn-dark:hover, .btn-dark:focus { background: #333; transform: translateY(-2px); } /* ===== NAVIGATION ===== */ .navbar { position: fixed; top: 0; left: 0; width: 100vw; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); padding: 15px 30px; z-index: 1000; display: flex; justify-content: space-between; align-items: center; transition: var(--transition-normal); box-sizing: border-box; } .navbar.scrolled { background: rgba(0, 0, 0, 0.95); box-shadow: var(--shadow-lg); } .navbar h1 { color: var(--white); font-size: var(--font-size-lg); font-weight: 600; } .navbar-links { display: flex; align-items: center; gap: var(--space-lg); } .nav-link { font-weight: 600; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; position: relative; color: var(--white); text-decoration: none; cursor: pointer; padding: 5px 0; transition: var(--transition-normal); } .nav-link:hover, .nav-link:focus { color: var(--primary-color); outline: none; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--primary-color); transition: var(--transition-normal); } .nav-link:hover::after, .nav-link:focus::after { width: 100%; } /* ===== HERO SECTION ===== */ .hero { width: 100vw; margin-left: calc(-50vw + 50%); background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.groovetech.io/gP3ET_s2yCP2r5mIj7y0TrLxrBaYv1-GJglHB7XLBYI/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzVlZTFhZmUxNzFiZmFhMDAxMzQ1M2M5Mi8xNzUxNzEwOTY5X2xpbW9kb29yb3BlbmluZ2hlcm8xLnBuZw.webp') center/cover; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--white); padding: 120px var(--space-lg) 60px; position: relative; box-sizing: border-box; } .hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.3); z-index: 1; } .hero > * { position: relative; z-index: 2; } .hero-badge { background: rgb(220 38 38 / 0.2); color: var(--white); padding: var(--space-xs) var(--space-lg); border-radius: 25px; font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--space-xl); display: flex; align-items: center; gap: var(--space-xs); backdrop-filter: blur(10px); } .hero-logo { max-width: 120px; height: auto; margin-bottom: var(--space-lg); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); transition: var(--transition-normal); } .hero-logo.lazy-image { opacity: 0; } .hero-logo.lazy-image.loaded { opacity: 1; } .hero h1 { font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-5xl)); font-weight: 700; margin-bottom: var(--space-sm); line-height: 1.1; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .hero-subtitle { font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-4xl)); font-weight: 700; color: var(--primary-color); margin-bottom: var(--space-lg); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } .hero p { font-size: clamp(var(--font-size-base), 2vw, var(--font-size-xl)); max-width: 800px; margin-bottom: var(--space-xl); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } /* ===== BOOKING SECTION ===== */ .booking-section { background: var(--background-light); padding: 60px 0; } .booking-container { max-width: 900px; margin: 0 auto; background: var(--white); padding: var(--space-2xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .booking-title { text-align: center; margin-bottom: var(--space-xl); font-size: var(--font-size-3xl); font-weight: 700; color: var(--text-primary); } /* Form Styles */ .form-group { margin-bottom: var(--space-lg); } .form-label { display: block; margin-bottom: var(--space-xs); font-weight: 600; color: var(--text-primary); font-size: var(--font-size-sm); } .input-container { position: relative; } .form-control { width: 100%; padding: 12px 15px 12px 45px; border: 2px solid var(--border-color); border-radius: var(--radius-sm); font-size: var(--font-size-base); font-family: var(--font-family); background: var(--white); transition: var(--transition-normal); } .form-control:focus { outline: none; border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1); } .form-control:invalid { border-color: var(--primary-color); } .form-control::placeholder { color: var(--text-light); } .input-icon { position: absolute; left: 15px; top: 15px; color: var(--text-secondary); pointer-events: none; z-index: 1; } .form-grid { display: grid; gap: var(--space-lg); } .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } textarea.form-control { min-height: 100px; resize: vertical; line-height: 1.5; } /* Form states */ .loading, .success, .error { padding: var(--space-lg); border-radius: var(--radius-sm); margin-top: var(--space-lg); text-align: center; font-weight: 600; display: none; } .success { background: #d4edda; color: #155724; border-left: 4px solid #28a745; } .error { background: #f8d7da; color: #721c24; border-left: 4px solid var(--primary-color); } .error-message { color: var(--primary-color); font-size: var(--font-size-xs); margin-top: var(--space-xs); display: block; } .spinner { border: 3px solid var(--border-color); border-top: 3px solid var(--primary-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ===== SERVICES SECTION ===== */ .services-section { background: #f5f5f5; padding: 10px 20px 80px; } .services-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); } .services-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); } .services-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-xl); justify-items: center; } .service-card { background: var(--white); padding: var(--space-2xl) var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: left; transition: var(--transition-normal); border: 1px solid transparent; width: 100%; max-width: 380px; grid-column: span 2; } .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--secondary-color); } .service-card:nth-child(4) { grid-column: 2 / 4; } .service-card:nth-child(5) { grid-column: 4 / 6; } .service-icon { width: 60px; height: 60px; background: var(--primary-color); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-lg); transition: var(--transition-normal); } .service-card:hover .service-icon { background: var(--secondary-color); transform: scale(1.1); } .service-icon i { font-size: 24px; color: var(--white); } .service-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-md); } .service-description { color: var(--text-secondary); margin-bottom: var(--space-lg); } .service-features { list-style: none; } .service-features li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-xs); color: #555; font-size: var(--font-size-sm); } .service-features li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; } /* ===== VIDEO SECTION ===== */ .video-section { background: var(--background-light); padding: var(--space-3xl) 0; } .video-title { font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); text-align: center; } .video-description { font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); text-align: center; } .video-player { position: relative; max-width: 1000px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); } .video-thumbnail { position: relative; width: 100%; height: 500px; overflow: hidden; background: var(--background-light); } .video-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--transition-normal); } .video-bg.lazy-image { opacity: 0; } .video-bg.lazy-image.loaded { opacity: 1; } .video-bg.lazy-image.loading { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .video-overlay { position: absolute; inset: 0; background: linear-gradient(45deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2)); display: flex; flex-direction: column; justify-content: center; align-items: center; } .play-button { width: 80px; height: 80px; border-radius: 50%; background: var(--primary-color); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-normal); box-shadow: 0 8px 25px rgba(220, 38, 38, 0.3); } .play-button:hover { background: var(--primary-hover); transform: scale(1.1); box-shadow: 0 12px 35px rgba(220, 38, 38, 0.4); } .play-button:focus { outline: 3px solid var(--white); outline-offset: 3px; } .play-button i { font-size: 28px; color: var(--white); margin-left: 4px; } .video-content { position: absolute; bottom: var(--space-2xl); left: var(--space-2xl); text-align: left; color: var(--white); } .video-content-title { font-size: var(--font-size-3xl); font-weight: 700; margin-bottom: var(--space-xs); text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .video-content-subtitle { font-size: var(--font-size-xl); opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } /* ===== FEATURES SECTION ===== */ .features-section { background: var(--background-dark); padding: var(--space-xl) 0; color: var(--white); } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); align-items: center; } .feature-item { text-align: center; padding: var(--space-md); } .feature-icon { width: 70px; height: 70px; margin: 0 auto var(--space-lg); display: flex; align-items: center; justify-content: center; border: 2px solid var(--primary-color); border-radius: 50%; transition: var(--transition-normal); } .feature-icon i { font-size: 28px; color: var(--primary-color); transition: var(--transition-normal); } .feature-item:hover .feature-icon { background: var(--primary-color); transform: scale(1.1); } .feature-item:hover .feature-icon i { color: var(--white); } .feature-title { font-size: var(--font-size-lg); font-weight: 700; letter-spacing: 0.1em; margin-bottom: var(--space-sm); text-transform: uppercase; } .feature-description { color: #b0b0b0; font-weight: 400; font-size: var(--font-size-sm); } /* ===== OCCASIONS SECTION ===== */ .occasions-section { background: var(--background-light); padding: var(--space-3xl) 0; } .occasions-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); } .occasions-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .occasions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .occasion-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition-normal); } .occasion-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .occasion-image { position: relative; width: 100%; height: 200px; overflow: hidden; } .occasion-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--transition-normal); } .occasion-bg.lazy-image { opacity: 0; } .occasion-bg.lazy-image.loaded { opacity: 1; } .occasion-card:hover .occasion-bg { transform: scale(1.05); } .occasion-overlay { position: absolute; inset: 0; background: linear-gradient(45deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3)); display: flex; align-items: flex-end; padding: var(--space-lg); } .occasion-card-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--white); text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .occasion-content { padding: var(--space-md); } .occasion-card-description { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-lg); } .occasion-features { list-style: none; padding: 0; } .occasion-features li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-xs); color: var(--text-secondary); font-size: var(--font-size-sm); } .occasion-features li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; } /* ===== FLEET SECTION ===== */ .fleet-section { background: var(--white); padding: var(--space-3xl) 0; } .fleet-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(220, 38, 38, 0.1); color: var(--primary-color); padding: var(--space-xs) var(--space-lg); border-radius: 25px; font-size: var(--font-size-sm); font-weight: 600; margin: 0 auto var(--space-lg); justify-content: center; width: fit-content; display: flex; } .fleet-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); } .fleet-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .fleet-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); align-items: flex-start; } .fleet-feature { text-align: center; } .fleet-feature-icon { width: 80px; height: 80px; background: var(--primary-color); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); transition: var(--transition-normal); } .fleet-feature-icon i { font-size: 32px; color: var(--white); } .fleet-feature:hover .fleet-feature-icon { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .fleet-feature-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); } .fleet-feature-description { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.5; } /* ===== VEHICLE GALLERY SECTION ===== */ .vehicle-gallery-section { background: var(--background-light); padding: var(--space-3xl) 0; } .vehicle-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); margin-top: var(--space-xl); } .vehicle-card { background: var(--white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); transition: var(--transition-normal); border: 1px solid var(--border-color); } .vehicle-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .vehicle-image { position: relative; width: 100%; height: 250px; overflow: hidden; } .vehicle-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--transition-normal); } .vehicle-bg.lazy-image { opacity: 0; } .vehicle-bg.lazy-image.loaded { opacity: 1; } .vehicle-card:hover .vehicle-bg { transform: scale(1.05); } .vehicle-badge { position: absolute; top: var(--space-lg); left: var(--space-lg); padding: var(--space-xs) var(--space-md); border-radius: 20px; font-size: var(--font-size-sm); font-weight: 600; color: var(--white); text-transform: uppercase; letter-spacing: 0.05em; } .vehicle-badge.executive { background: var(--primary-color); } .vehicle-badge.luxury { background: var(--primary-color); } .vehicle-badge.ultra-luxury { background: var(--primary-color); } .vehicle-capacity { position: absolute; bottom: var(--space-lg); right: var(--space-lg); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: var(--space-xs) var(--space-md); border-radius: 20px; display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); } .vehicle-content { padding: var(--space-xl); } .vehicle-title { font-size: var(--font-size-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-md); } .vehicle-description { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-lg); } .vehicle-features { list-style: none; padding: 0; margin-bottom: 0; } .vehicle-features li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-sm); color: var(--text-secondary); font-size: var(--font-size-sm); } .vehicle-features li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; } /* ===== CUSTOM REQUEST SECTION ===== */ .custom-request-section { background: var(--background-light); padding: var(--space-2xl) 0; } .custom-request-content { background: var(--background-dark); border-radius: var(--radius-xl); padding: var(--space-2xl) var(--space-xl); text-align: center; color: var(--white); max-width: 800px; margin: 0 auto; } .custom-request-title { font-size: var(--font-size-3xl); font-weight: 700; margin-bottom: var(--space-md); color: var(--white); } .custom-request-description { font-size: var(--font-size-base); line-height: 1.6; margin-bottom: var(--space-xl); max-width: 600px; margin-left: auto; margin-right: auto; color: #b0b0b0; } .custom-request-buttons { display: flex; justify-content: center; align-items: center; } .btn-custom-request { background: var(--primary-color); color: var(--white); padding: var(--space-sm) var(--space-xl); font-weight: 600; font-size: var(--font-size-base); border-radius: 25px; transition: var(--transition-normal); } .btn-custom-request:hover, .btn-custom-request:focus { background: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ===== ABOUT SECTION ===== */ .about-section { background: var(--background-light); padding: var(--space-3xl) 0; } .about-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .about-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); align-items: center; } .stat-item { text-align: center; padding: var(--space-lg); } .stat-icon { width: 80px; height: 80px; background: var(--primary-color); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); transition: var(--transition-normal); } .stat-icon i { font-size: 32px; color: var(--white); } .stat-item:hover .stat-icon { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .stat-number { font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); line-height: 1; } .stat-label { font-size: var(--font-size-base); color: var(--text-secondary); font-weight: 500; } /* ===== STORY SECTION ===== */ .story-section { background: var(--white); padding: var(--space-3xl) 0; } .story-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; } .story-text { padding-right: var(--space-lg); } .story-title { font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); line-height: 1.2; } .story-paragraph { font-size: var(--font-size-lg); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-lg); } .story-paragraph:last-child { margin-bottom: 0; } .story-image { position: relative; } .story-photo { position: relative; width: 100%; height: 500px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); } .story-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--transition-normal); } .story-bg.lazy-image { opacity: 0; } .story-bg.lazy-image.loaded { opacity: 1; } .story-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: var(--space-2xl); color: var(--white); } .story-info { text-align: left; } .story-name { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--space-xs); color: var(--white); } .story-role { font-size: var(--font-size-lg); font-weight: 500; margin-bottom: var(--space-xs); color: var(--white); opacity: 0.9; } .story-experience { font-size: var(--font-size-base); color: var(--white); opacity: 0.8; } /* ===== VALUES SECTION ===== */ .values-section { background: var(--background-light); padding: var(--space-3xl) 0; } .values-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .values-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); align-items: flex-start; } .value-card { background: var(--white); padding: var(--space-2xl); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-md); transition: var(--transition-normal); border: 1px solid var(--border-color); } .value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .value-icon { width: 80px; height: 80px; background: var(--primary-color); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); transition: var(--transition-normal); } .value-icon i { font-size: 32px; color: var(--white); } .value-card:hover .value-icon { transform: scale(1.1); box-shadow: var(--shadow-lg); } .value-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-md); } .value-description { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.5; } /* ===== TESTIMONIALS SECTION ===== */ .testimonials-section { background: var(--white); padding: var(--space-3xl) 0; } .testimonials-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(220, 38, 38, 0.1); color: var(--primary-color); padding: var(--space-xs) var(--space-lg); border-radius: 25px; font-size: var(--font-size-sm); font-weight: 600; margin: 0 auto var(--space-lg); justify-content: center; width: fit-content; display: flex; } .testimonials-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .testimonials-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); align-items: flex-start; } .testimonial-card { background: var(--background-light); padding: var(--space-2xl); border-radius: var(--radius-lg); position: relative; transition: var(--transition-normal); border: 1px solid var(--border-color); } .testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .testimonial-quote-icon { position: absolute; top: var(--space-lg); left: var(--space-lg); color: #e0e0e0; font-size: 40px; opacity: 0.3; } .testimonial-service-icon { position: absolute; top: var(--space-lg); right: var(--space-lg); width: 50px; height: 50px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .testimonial-service-icon.briefcase { background: var(--primary-color); } .testimonial-service-icon.heart { background: var(--primary-color); } .testimonial-service-icon.shield { background: var(--primary-color); } .testimonial-service-icon.user { background: var(--primary-color); } .testimonial-service-icon i { font-size: 20px; color: var(--white); } .testimonial-stars { margin: var(--space-2xl) 0 var(--space-lg); display: flex; gap: 4px; } .testimonial-stars i { color: #ffd700; font-size: 16px; } .testimonial-text { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-xl); font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: var(--space-md); } .author-photo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: center; transition: var(--transition-normal); } .author-photo.lazy-image { opacity: 0; } .author-photo.lazy-image.loaded { opacity: 1; } .author-info { flex: 1; } .author-name { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-xs); } .author-title { font-size: var(--font-size-sm); color: var(--primary-color); font-weight: 500; margin-bottom: 2px; } .author-company { font-size: var(--font-size-sm); color: var(--text-light); } /* ===== TRUST SECTION ===== */ .trust-section { background: var(--background-light); padding: var(--space-3xl) 0; } .trust-content { background: var(--primary-color); border-radius: var(--radius-xl); padding: var(--space-3xl) var(--space-xl); text-align: center; color: var(--white); max-width: 1000px; margin: 0 auto; } .trust-title { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--space-2xl); color: var(--white); line-height: 1.2; } .trust-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); margin-bottom: var(--space-2xl); align-items: center; } .trust-stat { text-align: center; } .trust-number { font-size: var(--font-size-5xl); font-weight: 700; color: var(--white); margin-bottom: var(--space-sm); line-height: 1; } .trust-label { font-size: var(--font-size-lg); color: var(--white); font-weight: 500; opacity: 0.9; } .trust-cta { display: flex; justify-content: center; align-items: center; } .btn-trust { background: var(--white); color: var(--primary-color); padding: var(--space-md) var(--space-2xl); font-weight: 700; font-size: var(--font-size-lg); border-radius: 30px; transition: var(--transition-normal); } .btn-trust:hover, .btn-trust:focus { background: #f8f9fa; color: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ===== AWARDS SECTION ===== */ .awards-section { background: var(--background-light); padding: var(--space-3xl) 0; } .awards-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(220, 38, 38, 0.1); color: var(--primary-color); padding: var(--space-xs) var(--space-lg); border-radius: 25px; font-size: var(--font-size-sm); font-weight: 600; margin: 0 auto var(--space-lg); justify-content: center; width: fit-content; display: flex; } .awards-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .awards-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .awards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); align-items: flex-start; } .award-card { background: var(--white); padding: var(--space-2xl); border-radius: var(--radius-lg); display: flex; align-items: flex-start; gap: var(--space-lg); box-shadow: var(--shadow-md); transition: var(--transition-normal); border: 1px solid var(--border-color); } .award-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .award-icon { width: 60px; height: 60px; background: var(--primary-color); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition-normal); } .award-icon i { font-size: 24px; color: var(--white); } .award-card:hover .award-icon { transform: scale(1.1); box-shadow: var(--shadow-lg); } .award-content { flex: 1; } .award-year { font-size: var(--font-size-lg); font-weight: 600; color: var(--primary-color); margin-bottom: var(--space-xs); } .award-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xs); line-height: 1.3; } .award-organization { font-size: var(--font-size-base); color: var(--primary-color); font-weight: 500; margin-bottom: var(--space-sm); } .award-description { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; } /* ===== RECOGNITION SECTION ===== */ .recognition-section { background: var(--white); padding: var(--space-3xl) 0; } .recognition-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .recognition-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .recognition-content { background: var(--background-light); border-radius: var(--radius-xl); padding: var(--space-3xl) var(--space-xl); text-align: center; } .recognition-main { margin-bottom: var(--space-2xl); } .recognition-feature-title { font-size: var(--font-size-2xl); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-lg); } .recognition-awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); align-items: flex-start; } .recognition-award { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-md); transition: var(--transition-normal); border: 1px solid var(--border-color); } .recognition-award:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .recognition-award-icon { width: 60px; height: 60px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); transition: var(--transition-normal); } .recognition-award-icon i { font-size: 24px; color: var(--white); } .recognition-award:hover .recognition-award-icon { transform: scale(1.1); box-shadow: var(--shadow-lg); } .recognition-award-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); } .recognition-award-description { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; } /* ===== CONTACT SECTION ===== */ .contact-section { background: var(--background-light); padding: var(--space-3xl) 0; } .contact-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .contact-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); align-items: flex-start; } .contact-card { background: var(--white); padding: var(--space-2xl); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-md); transition: var(--transition-normal); border: 1px solid var(--border-color); } .contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .contact-icon { width: 60px; height: 60px; background: var(--primary-color); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); transition: var(--transition-normal); } .contact-icon i { font-size: 24px; color: var(--white); } .contact-card:hover .contact-icon { transform: scale(1.1); box-shadow: var(--shadow-lg); } .contact-card-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); } .contact-details { text-align: center; } .contact-info { font-size: var(--font-size-base); color: var(--text-primary); font-weight: 500; margin-bottom: var(--space-sm); } .contact-note { font-size: var(--font-size-sm); color: var(--text-secondary); font-style: italic; margin-top: var(--space-md); } /* ===== SERVICE DETAILS SECTION ===== */ .service-details-section { background: var(--background-light); padding: var(--space-3xl) 0; } .service-details-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); max-width: 600px; margin: 0 auto; } /* Immediate Assistance Styles */ .immediate-assistance { background: var(--primary-color); border-radius: var(--radius-xl); padding: var(--space-2xl); color: var(--white); text-align: left; } .assistance-title { font-size: var(--font-size-3xl); font-weight: 700; margin-bottom: var(--space-lg); color: var(--white); } .assistance-description { font-size: var(--font-size-base); line-height: 1.6; margin-bottom: var(--space-xl); color: var(--white); opacity: 0.95; } .assistance-contact { margin-bottom: var(--space-xl); } .assistance-phone { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-lg); font-weight: 600; color: var(--white); } .assistance-phone i { font-size: var(--font-size-base); } .btn-assistance { background: var(--white); color: var(--primary-color); padding: var(--space-sm) var(--space-xl); font-weight: 600; font-size: var(--font-size-base); border-radius: 25px; transition: var(--transition-normal); } .btn-assistance:hover, .btn-assistance:focus { background: #f8f9fa; color: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* Business Hours Styles */ .business-hours { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-md); border: 1px solid var(--border-color); } .hours-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); } .hours-grid { display: grid; gap: var(--space-md); } .hours-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-color); } .hours-item:last-child { border-bottom: none; } .hours-label { font-size: var(--font-size-base); color: var(--text-secondary); font-weight: 500; } .hours-value { font-size: var(--font-size-base); color: var(--text-primary); font-weight: 600; } .hours-value.emergency { color: var(--primary-color); } /* Service Coverage Styles */ .service-coverage { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-md); border: 1px solid var(--border-color); } .coverage-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); } .coverage-list { list-style: none; padding: 0; margin: 0; } .coverage-list li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-sm); font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.5; } .coverage-list li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; } .coverage-list li:last-child { margin-bottom: 0; } /* ===== EXPERIENCE SECTION ===== */ .experience-section { background: var(--background-light); padding: var(--space-3xl) 0; } .experience-content { background: var(--background-dark); border-radius: var(--radius-xl); padding: var(--space-3xl) var(--space-xl); text-align: center; color: var(--white); max-width: 1000px; margin: 0 auto; } .experience-title { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--space-xl); color: var(--white); line-height: 1.2; } .experience-description { font-size: var(--font-size-lg); line-height: 1.6; margin-bottom: var(--space-2xl); max-width: 700px; margin-left: auto; margin-right: auto; color: #b0b0b0; } .experience-buttons { display: flex; justify-content: center; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } .btn-experience-primary { background: var(--primary-color); color: var(--white); padding: var(--space-md) var(--space-2xl); font-weight: 600; font-size: var(--font-size-lg); border-radius: 30px; transition: var(--transition-normal); } .btn-experience-primary:hover, .btn-experience-primary:focus { background: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-experience-secondary { background: transparent; color: var(--white); border: 2px solid var(--white); padding: var(--space-md) var(--space-2xl); font-weight: 600; font-size: var(--font-size-lg); border-radius: 30px; transition: var(--transition-normal); } .btn-experience-secondary:hover, .btn-experience-secondary:focus { background: var(--white); color: var(--background-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ===== CALL TO ACTION SECTION ===== */ .cta-section { background: var(--background-light); padding: var(--space-xl) 0; } .cta-content { background: var(--primary-color); border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-lg); text-align: center; color: var(--white); } .cta-title { font-size: var(--font-size-3xl); font-weight: 700; margin-bottom: var(--space-md); color: var(--white); } .cta-description { font-size: var(--font-size-base); line-height: 1.5; margin-bottom: var(--space-lg); max-width: 600px; margin-left: auto; margin-right: auto; color: var(--white); opacity: 0.95; } .cta-buttons { display: flex; justify-content: center; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } .btn-cta-primary { background: var(--white); color: var(--primary-color); padding: var(--space-sm) var(--space-xl); font-weight: 700; font-size: var(--font-size-base); } .btn-cta-primary:hover { background: #f8f9fa; color: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ===== FOOTER ===== */ .footer { width: 100vw; margin-left: calc(-50vw + 50%); background: var(--text-primary); color: var(--white); text-align: center; padding: var(--space-xl) var(--space-lg); box-sizing: border-box; } .footer p { margin-bottom: var(--space-sm); } .footer a { color: var(--secondary-color); text-decoration: none; transition: var(--transition-fast); } .footer a:hover { text-decoration: underline; } /* ===== RESPONSIVE DESIGN ===== */ @media (max-width: 1024px) { .container { padding: 0 var(--space-md); } .services-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); } .service-card { grid-column: span 2; } .service-card:nth-child(4) { grid-column: span 2; } .service-card:nth-child(5) { grid-column: 2 / 4; } .video-thumbnail { height: 400px; } .video-content { bottom: var(--space-xl); left: var(--space-xl); } .video-content-title { font-size: var(--font-size-2xl); } .video-content-subtitle { font-size: var(--font-size-lg); } .occasions-section { padding: var(--space-2xl) 0; } .occasions-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .occasion-image { height: 160px; } .occasion-content { padding: var(--space-md); } .cta-section { padding: var(--space-lg) 0; } .cta-content { padding: var(--space-lg) var(--space-md); } .cta-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-sm); } .cta-description { font-size: var(--font-size-sm); margin-bottom: var(--space-md); } .custom-request-section { padding: var(--space-xl) 0; } .custom-request-content { padding: var(--space-xl) var(--space-lg); } .custom-request-title { font-size: var(--font-size-2xl); } .custom-request-description { font-size: var(--font-size-sm); margin-bottom: var(--space-lg); } .btn-custom-request { padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); } .vehicle-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } .vehicle-image { height: 220px; } .vehicle-content { padding: var(--space-lg); } .vehicle-title { font-size: var(--font-size-xl); } .vehicle-description { font-size: var(--font-size-sm); } .about-section { padding: var(--space-2xl) 0; } .about-title { font-size: var(--font-size-3xl); } .about-description { font-size: var(--font-size-base); margin-bottom: var(--space-2xl); } .about-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } .stat-icon { width: 70px; height: 70px; } .stat-icon i { font-size: 28px; } .stat-number { font-size: var(--font-size-3xl); } .story-section { padding: var(--space-2xl) 0; } .story-content { grid-template-columns: 1fr; gap: var(--space-2xl); } .story-text { padding-right: 0; order: 2; } .story-image { order: 1; } .story-title { font-size: var(--font-size-3xl); } .story-paragraph { font-size: var(--font-size-base); } .story-photo { height: 400px; } .values-section { padding: var(--space-2xl) 0; } .values-title { font-size: var(--font-size-3xl); } .values-description { font-size: var(--font-size-base); margin-bottom: var(--space-2xl); } .values-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } .value-card { padding: var(--space-xl); } .value-icon { width: 70px; height: 70px; } .value-icon i { font-size: 28px; } .value-title { font-size: var(--font-size-lg); } .value-description { font-size: var(--font-size-sm); } .testimonials-section { padding: var(--space-2xl) 0; } .testimonials-title { font-size: var(--font-size-3xl); } .testimonials-description { font-size: var(--font-size-base); margin-bottom: var(--space-2xl); } .testimonials-grid { grid-template-columns: 1fr; gap: var(--space-xl); } .testimonial-card { padding: var(--space-xl); } .testimonial-quote-icon { font-size: 32px; top: var(--space-md); left: var(--space-md); } .testimonial-service-icon { top: var(--space-md); right: var(--space-md); width: 40px; height: 40px; } .testimonial-service-icon i { font-size: 16px; } .testimonial-text { font-size: var(--font-size-sm); margin-bottom: var(--space-lg); } .author-photo { width: 50px; height: 50px; } .author-name { font-size: var(--font-size-base); } .author-title, .author-company { font-size: var(--font-size-xs); } .experience-section { padding: var(--space-2xl) 0; } .experience-content { padding: var(--space-2xl) var(--space-lg); } .experience-title { font-size: var(--font-size-3xl); } .experience-description { font-size: var(--font-size-base); margin-bottom: var(--space-xl); } .experience-buttons { gap: var(--space-md); } .btn-experience-primary, .btn-experience-secondary { padding: var(--space-sm) var(--space-xl); font-size: var(--font-size-base); } .trust-section { padding: var(--space-2xl) 0; } .trust-content { padding: var(--space-2xl) var(--space-lg); } .trust-title { font-size: var(--font-size-3xl); } .trust-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); margin-bottom: var(--space-xl); } .trust-number { font-size: var(--font-size-4xl); } .trust-label { font-size: var(--font-size-base); } .btn-trust { padding: var(--space-sm) var(--space-xl); font-size: var(--font-size-base); } .awards-section { padding: var(--space-2xl) 0; } .awards-title { font-size: var(--font-size-3xl); } .awards-description { font-size: var(--font-size-base); margin-bottom: var(--space-2xl); } .awards-grid { grid-template-columns: 1fr; gap: var(--space-xl); } .award-card { padding: var(--space-xl); gap: var(--space-md); } .award-icon { width: 50px; height: 50px; } .award-icon i { font-size: 20px; } .award-year { font-size: var(--font-size-base); } .award-title { font-size: var(--font-size-lg); } .award-organization { font-size: var(--font-size-sm); } .award-description { font-size: var(--font-size-xs); } .recognition-section { padding: var(--space-2xl) 0; } .recognition-title { font-size: var(--font-size-3xl); } .recognition-description { font-size: var(--font-size-base); margin-bottom: var(--space-2xl); } .recognition-content { padding: var(--space-2xl) var(--space-lg); } .recognition-feature-title { font-size: var(--font-size-xl); } .recognition-awards { grid-template-columns: 1fr; gap: var(--space-xl); } .recognition-award { padding: var(--space-lg); } .recognition-award-icon { width: 50px; height: 50px; } .recognition-award-icon i { font-size: 20px; } .recognition-award-title { font-size: var(--font-size-base); } .recognition-award-description { font-size: var(--font-size-xs); } .contact-section { padding: var(--space-2xl) 0; } .contact-title { font-size: var(--font-size-3xl); } .contact-description { font-size: var(--font-size-base); margin-bottom: var(--space-2xl); } .contact-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } .contact-card { padding: var(--space-xl); } .contact-icon { width: 50px; height: 50px; } .contact-icon i { font-size: 20px; } .contact-card-title { font-size: var(--font-size-lg); } .contact-info { font-size: var(--font-size-sm); } .contact-note { font-size: var(--font-size-xs); } .service-details-section { padding: var(--space-2xl) 0; } .service-details-grid { gap: var(--space-xl); } .immediate-assistance { padding: var(--space-xl); } .assistance-title { font-size: var(--font-size-2xl); } .assistance-description { font-size: var(--font-size-sm); margin-bottom: var(--space-lg); } .assistance-phone { font-size: var(--font-size-base); } .btn-assistance { padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); } .business-hours, .service-coverage { padding: var(--space-lg); } .hours-title, .coverage-title { font-size: var(--font-size-lg); } .hours-label, .hours-value, .coverage-list li { font-size: var(--font-size-sm); } } @media (max-width: 768px) { .container { padding: 0 var(--space-sm); } .navbar { flex-direction: column; padding: 15px var(--space-lg); gap: var(--space-sm); } .navbar h1 { font-size: var(--font-size-base); text-align: center; } .navbar-links { gap: var(--space-md); flex-wrap: wrap; justify-content: center; } .nav-link { font-size: var(--font-size-xs); } .hero { padding: 140px var(--space-lg) 60px; } .hero-badge { font-size: var(--font-size-xs); padding: 6px 16px; } .booking-section { padding: var(--space-2xl) 0; } .booking-container { padding: var(--space-xl) var(--space-lg); } .form-grid.cols-3 { grid-template-columns: 1fr; } .booking-title { font-size: var(--font-size-2xl); } .services-section { padding: 10px 15px 60px; } .services-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .service-card { grid-column: span 1; } .service-card:nth-child(4), .service-card:nth-child(5) { grid-column: span 1; } .video-section { padding: var(--space-3xl) 0; } .features-section { padding: var(--space-xl) 0; } .features-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .feature-item { padding: var(--space-sm); } .feature-icon { width: 60px; height: 60px; } .feature-icon i { font-size: 24px; } .feature-title { font-size: var(--font-size-base); } .feature-description { font-size: var(--font-size-sm); } .video-thumbnail { height: 300px; } .play-button { width: 70px; height: 70px; } .play-button i { font-size: 24px; } .video-content { bottom: var(--space-lg); left: var(--space-lg); } .video-content-title { font-size: var(--font-size-xl); } .video-content-subtitle { font-size: var(--font-size-base); } .occasions-section { padding: var(--space-2xl) 0; } .occasions-title { font-size: var(--font-size-3xl); } .occasions-description { font-size: var(--font-size-base); margin-bottom: var(--space-2xl); } .occasions-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .occasion-image { height: 200px; } .occasion-card-title { font-size: var(--font-size-xl); } .occasion-content { padding: var(--space-md); } .occasion-card-description { font-size: var(--font-size-xs); } .cta-content { padding: var(--space-md) var(--space-sm); } .cta-title { font-size: var(--font-size-xl); margin-bottom: var(--space-sm); } .cta-description { font-size: var(--font-size-xs); margin-bottom: var(--space-md); } .custom-request-section { padding: var(--space-lg) 0; } .custom-request-content { padding: var(--space-lg) var(--space-md); } .custom-request-title { font-size: var(--font-size-xl); } .custom-request-description { font-size: var(--font-size-sm); margin-bottom: var(--space-md); } .vehicle-gallery-section { padding: var(--space-2xl) 0; } .vehicle-gallery-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .vehicle-image { height: 200px; } .vehicle-content { padding: var(--space-md); } .vehicle-title { font-size: var(--font-size-lg); } .vehicle-description { font-size: var(--font-size-xs); } .vehicle-features li { font-size: var(--font-size-xs); } .fleet-features { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .about-section { padding: var(--space-xl) 0; } .about-title { font-size: var(--font-size-2xl); } .about-description { font-size: var(--font-size-sm); margin-bottom: var(--space-xl); } .about-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .stat-item { padding: var(--space-md); } .stat-icon { width: 60px; height: 60px; } .stat-icon i { font-size: 24px; } .stat-number { font-size: var(--font-size-2xl); } .stat-label { font-size: var(--font-size-sm); } .story-section { padding: var(--space-xl) 0; } .story-content { gap: var(--space-xl); } .story-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-lg); } .story-paragraph { font-size: var(--font-size-sm); margin-bottom: var(--space-md); } .story-photo { height: 350px; } .story-overlay { padding: var(--space-lg); } .story-name { font-size: var(--font-size-xl); } .story-role { font-size: var(--font-size-base); } .story-experience { font-size: var(--font-size-sm); } .values-section { padding: var(--space-xl) 0; } .values-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-lg); } .values-description { font-size: var(--font-size-sm); margin-bottom: var(--space-xl); } .values-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .value-card { padding: var(--space-lg); } .value-icon { width: 60px; height: 60px; } .value-icon i { font-size: 24px; } .value-title { font-size: var(--font-size-base); } .value-description { font-size: var(--font-size-xs); } .testimonials-section { padding: var(--space-xl) 0; } .testimonials-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-lg); } .testimonials-description { font-size: var(--font-size-sm); margin-bottom: var(--space-xl); } .testimonials-grid { gap: var(--space-lg); } .testimonial-card { padding: var(--space-lg); } .testimonial-stars { margin: var(--space-lg) 0 var(--space-md); } .testimonial-text { font-size: var(--font-size-xs); margin-bottom: var(--space-md); } .testimonial-author { gap: var(--space-sm); } .author-photo { width: 40px; height: 40px; } .author-name { font-size: var(--font-size-sm); margin-bottom: 2px; } .experience-section { padding: var(--space-xl) 0; } .experience-content { padding: var(--space-xl) var(--space-md); } .experience-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-lg); } .experience-description { font-size: var(--font-size-sm); margin-bottom: var(--space-lg); } .experience-buttons { flex-direction: column; gap: var(--space-sm); width: 100%; } .btn-experience-primary, .btn-experience-secondary { padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); width: 100%; justify-content: center; } .trust-section { padding: var(--space-xl) 0; } .trust-content { padding: var(--space-xl) var(--space-md); } .trust-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-xl); } .trust-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); margin-bottom: var(--space-xl); } .trust-number { font-size: var(--font-size-3xl); } .trust-label { font-size: var(--font-size-sm); } .btn-trust { padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); } .awards-section { padding: var(--space-xl) 0; } .awards-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-lg); } .awards-description { font-size: var(--font-size-sm); margin-bottom: var(--space-xl); } .awards-grid { gap: var(--space-lg); } .award-card { padding: var(--space-lg); gap: var(--space-sm); flex-direction: column; text-align: center; } .award-icon { margin: 0 auto; } .award-title { font-size: var(--font-size-base); } } @media (max-width: 480px) { .container { padding: 0 var(--space-md); } .form-control { padding: 10px 12px 10px 40px; } .input-icon { left: 12px; top: 13px; } .btn { padding: 12px 24px; } .booking-container { padding: var(--space-lg) var(--space-md); } .features-section { padding: var(--space-lg) 0; } .features-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .feature-icon { width: 50px; height: 50px; } .feature-icon i { font-size: 20px; } .feature-title { font-size: var(--font-size-sm); } .feature-description { font-size: var(--font-size-xs); } .service-card { padding: var(--space-lg) var(--space-md); } .video-thumbnail { height: 250px; } .video-content-title { font-size: var(--font-size-lg); } .video-content-subtitle { font-size: var(--font-size-sm); } .play-button { width: 60px; height: 60px; } .play-button i { font-size: 20px; } .occasions-section { padding: var(--space-xl) 0; } .occasions-title { font-size: var(--font-size-2xl); } .occasion-image { height: 180px; } .occasion-card-title { font-size: var(--font-size-lg); } .occasion-content { padding: var(--space-sm); } .occasion-overlay { padding: var(--space-md); } .occasion-card-title { font-size: var(--font-size-base); } .occasion-card-description { font-size: var(--font-size-xs); } .custom-request-content { padding: var(--space-md) var(--space-sm); } .custom-request-title { font-size: var(--font-size-lg); } .custom-request-description { font-size: var(--font-size-xs); margin-bottom: var(--space-sm); } .btn-custom-request { padding: 10px var(--space-md); font-size: var(--font-size-xs); } .vehicle-gallery-section { padding: var(--space-xl) 0; } .vehicle-image { height: 180px; } .vehicle-content { padding: var(--space-sm); } .vehicle-title { font-size: var(--font-size-base); } .vehicle-badge { top: var(--space-sm); left: var(--space-sm); font-size: var(--font-size-xs); padding: 4px var(--space-xs); } .vehicle-capacity { bottom: var(--space-sm); right: var(--space-sm); font-size: var(--font-size-xs); padding: 4px var(--space-xs); } .fleet-features { grid-template-columns: 1fr; gap: var(--space-md); } .fleet-feature-icon { width: 60px; height: 60px; } .fleet-feature-icon i { font-size: 24px; } .about-stats { grid-template-columns: 1fr; gap: var(--space-md); } .stat-item { padding: var(--space-sm); } .stat-icon { width: 50px; height: 50px; } .stat-icon i { font-size: 20px; } .stat-number { font-size: var(--font-size-xl); } .stat-label { font-size: var(--font-size-xs); } .story-content { gap: var(--space-lg); } .story-title { font-size: var(--font-size-xl); margin-bottom: var(--space-md); } .story-paragraph { font-size: var(--font-size-xs); margin-bottom: var(--space-sm); } .story-photo { height: 300px; } .story-overlay { padding: var(--space-md); } .story-name { font-size: var(--font-size-lg); } .story-role { font-size: var(--font-size-sm); } .story-experience { font-size: var(--font-size-xs); } .values-grid { grid-template-columns: 1fr; gap: var(--space-md); } .value-card { padding: var(--space-md); } .value-icon { width: 50px; height: 50px; } .value-icon i { font-size: 20px; } .value-title { font-size: var(--font-size-sm); margin-bottom: var(--space-xs); } .value-description { font-size: var(--font-size-xs); } .testimonial-card { padding: var(--space-md); } .testimonial-quote-icon { font-size: 24px; top: var(--space-sm); left: var(--space-sm); } .testimonial-service-icon { top: var(--space-sm); right: var(--space-sm); width: 35px; height: 35px; } .testimonial-service-icon i { font-size: 14px; } .testimonial-stars { margin: var(--space-md) 0 var(--space-sm); } .testimonial-stars i { font-size: 14px; } .testimonial-text { font-size: var(--font-size-xs); margin-bottom: var(--space-sm); } .author-name { font-size: var(--font-size-xs); } .author-title, .author-company { font-size: var(--font-size-xs); } .experience-content { padding: var(--space-lg) var(--space-sm); } .experience-title { font-size: var(--font-size-xl); margin-bottom: var(--space-md); } .experience-description { font-size: var(--font-size-xs); margin-bottom: var(--space-md); } .btn-experience-primary, .btn-experience-secondary { padding: 12px var(--space-md); font-size: var(--font-size-xs); } .trust-content { padding: var(--space-lg) var(--space-sm); } .trust-title { font-size: var(--font-size-xl); margin-bottom: var(--space-lg); } .trust-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); } .trust-number { font-size: var(--font-size-2xl); } .trust-label { font-size: var(--font-size-xs); } .btn-trust { padding: 12px var(--space-md); font-size: var(--font-size-xs); } .award-card { padding: var(--space-md); } .award-icon { width: 40px; height: 40px; } .award-icon i { font-size: 16px; } .award-year { font-size: var(--font-size-sm); } .award-title { font-size: var(--font-size-sm); } .award-organization { font-size: var(--font-size-xs); } .award-description { font-size: var(--font-size-xs); } .recognition-section { padding: var(--space-xl) 0; } .recognition-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-lg); } .recognition-description { font-size: var(--font-size-sm); margin-bottom: var(--space-xl); } .recognition-content { padding: var(--space-xl) var(--space-md); } .recognition-feature-title { font-size: var(--font-size-lg); margin-bottom: var(--space-md); } .recognition-awards { gap: var(--space-lg); } .recognition-award { padding: var(--space-md); } .recognition-award-icon { width: 45px; height: 45px; } .recognition-award-icon i { font-size: 18px; } .recognition-award-title { font-size: var(--font-size-sm); } } /* ===== ACCESSIBILITY & PERFORMANCE ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (prefers-contrast: high) { :root { --border-color: var(--black); --text-secondary: var(--black); } } /* Google Places Autocomplete Styling */ .pac-container { border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border: none; font-family: var(--font-family); z-index: 1050; } .pac-item { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; } .pac-item:hover { background: var(--background-light); } .pac-matched { font-weight: 600; color: var(--secondary-color); } 

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ===== CSS CUSTOM PROPERTIES ===== */ :root { /* Colors */ --primary-color: #dc2626; --primary-hover: #b91c1c; --secondary-color: #d4af37; --text-primary: #333; --text-secondary: #666; --text-light: #999; --background-light: #f8f9fa; --background-dark: #1a1a1a; --white: #fff; --black: #000; --border-color: #e0e0e0; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 25px rgba(0,0,0,0.1); --shadow-xl: 0 15px 40px rgba(0,0,0,0.15); /* Border radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 15px; --radius-xl: 20px; /* Transitions */ --transition-fast: all 0.2s ease; --transition-normal: all 0.3s ease; --transition-slow: all 0.5s ease; /* Typography */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 5rem; } /* ===== RESET & BASE STYLES ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { width: 100%; margin: 0; padding: 0; overflow-x: hidden; } body { font-family: var(--font-family); background: var(--white); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===== LAZY LOADING & IMAGE OPTIMIZATION ===== */ .lazy-image { opacity: 0; transition: opacity 0.6s ease-in-out; will-change: opacity; } .lazy-image.loaded { opacity: 1; } .lazy-image.error { opacity: 0.5; filter: grayscale(100%); } /* Fade-in animation for images */ @keyframes fadeInImage { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in-image { animation: fadeInImage 0.8s ease-out forwards; } /* Image placeholder while loading */ .image-placeholder { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ===== UTILITY CLASSES ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); } .hidden { display: none; } /* Button base styles */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: 12px 24px; border: none; border-radius: 25px; font-weight: 600; text-decoration: none; cursor: pointer; transition: var(--transition-normal); white-space: nowrap; } .btn-primary { background: var(--primary-color); color: var(--white); } .btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-dark { background: var(--black); color: var(--white); } .btn-dark:hover, .btn-dark:focus { background: #333; transform: translateY(-2px); } /* ===== NAVIGATION ===== */ .navbar { position: fixed; top: 0; left: 0; width: 100vw; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); padding: 15px 30px; z-index: 1000; display: flex; justify-content: space-between; align-items: center; transition: var(--transition-normal); box-sizing: border-box; } .navbar.scrolled { background: rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-lg); } .navbar h1 { color: var(--white); font-size: var(--font-size-lg); font-weight: 600; flex: 1; } /* Mobile Controls Container */ .mobile-controls { display: none; align-items: center; gap: var(--space-md); } /* Mobile Book Button */ .mobile-book-btn { display: none; padding: 8px 16px; font-size: var(--font-size-xs); font-weight: 600; border-radius: 20px; white-space: nowrap; } /* Desktop Book Button */ .desktop-book-btn { padding: 12px 24px; font-size: var(--font-size-base); } /* Mobile Hamburger Button */ .mobile-menu-toggle { display: none; flex-direction: column; justify-content: space-around; width: 30px; height: 30px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; } .hamburger-line { width: 25px; height: 3px; background: var(--white); border-radius: 2px; transition: var(--transition-normal); transform-origin: center; } /* Hamburger Animation */ .mobile-menu-toggle.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-toggle.active .hamburger-line:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } .navbar-links { display: flex; align-items: center; gap: var(--space-lg); position: relative; } .nav-link { font-weight: 600; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; position: relative; color: var(--white); text-decoration: none; cursor: pointer; padding: 5px 0; transition: var(--transition-normal); } .nav-link:hover, .nav-link:focus { color: var(--primary-color); outline: none; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--primary-color); transition: var(--transition-normal); } .nav-link:hover::after, .nav-link:focus::after { width: 100%; } /* Dropdown Menu */ .nav-dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); border-radius: var(--radius-md); padding: var(--space-sm) 0; min-width: 200px; box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: var(--transition-normal); border: 1px solid rgba(255, 255, 255, 0.1); } .nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { display: block; padding: var(--space-sm) var(--space-lg); color: var(--white); text-decoration: none; font-size: var(--font-size-sm); font-weight: 500; transition: var(--transition-fast); border-bottom: 1px solid rgba(255, 255, 255, 0.05); position: relative; } .dropdown-item:last-child { border-bottom: none; } .dropdown-item::after { content: ''; position: absolute; bottom: 0; left: var(--space-lg); right: var(--space-lg); height: 2px; background: var(--primary-color); transform: scaleX(0); transform-origin: left; transition: var(--transition-normal); } .dropdown-item:hover { background: rgba(220, 38, 38, 0.1); color: var(--primary-color); } .dropdown-item:hover::after { transform: scaleX(1); } /* Mobile Menu Styles */ @media (min-width: 769px) { .mobile-controls { display: none !important; } .mobile-menu-toggle { display: none !important; } .mobile-book-btn { display: none !important; } .desktop-book-btn { display: inline-flex !important; } .desktop-only { display: block !important; } .mobile-about-link { display: none !important; } .navbar-links { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; background: transparent !important; flex-direction: row !important; padding: 0 !important; gap: var(--space-lg) !important; box-shadow: none !important; border: none !important; max-height: none !important; } .nav-link { font-size: var(--font-size-sm) !important; text-align: left !important; padding: 5px 0 !important; border-bottom: none !important; width: auto !important; } .dropdown-menu { position: absolute !important; background: rgba(0, 0, 0, 0.95) !important; backdrop-filter: blur(10px) !important; margin-top: 0 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-10px) !important; } .nav-dropdown:hover .dropdown-menu { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .dropdown-item { font-size: var(--font-size-sm) !important; text-align: left !important; padding: var(--space-sm) var(--space-lg) !important; } } @media (max-width: 768px) { .mobile-controls { display: flex; } .mobile-menu-toggle { display: flex; } .mobile-book-btn { display: inline-flex; } .desktop-book-btn { display: none; } .desktop-only { display: none !important; } .mobile-about-link { display: block !important; } .navbar h1 { font-size: var(--font-size-base); } .navbar-links { position: fixed; top: 70px; left: 0; right: 0; background: rgba(0, 0, 0, 0.98); backdrop-filter: blur(10px); flex-direction: column; padding: var(--space-2xl) var(--space-lg); gap: var(--space-xl); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: var(--shadow-xl); border-top: 1px solid rgba(255, 255, 255, 0.1); max-height: calc(100vh - 70px); overflow-y: auto; } .navbar-links.mobile-open { transform: translateY(0); opacity: 1; visibility: visible; } .nav-dropdown { width: 100%; } .nav-link { font-size: var(--font-size-lg); text-align: center; padding: var(--space-md) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); width: 100%; } .dropdown-menu { position: static; background: rgba(255, 255, 255, 0.05); backdrop-filter: none; border-radius: var(--radius-sm); margin-top: var(--space-md); opacity: 1; visibility: visible; transform: none; border: 1px solid rgba(255, 255, 255, 0.1); padding: var(--space-sm) 0; } .dropdown-item { font-size: var(--font-size-base); text-align: center; padding: var(--space-md) var(--space-lg); color: var(--white); text-decoration: none; display: block; transition: var(--transition-fast); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .dropdown-item:last-child { border-bottom: none; } .dropdown-item:hover { background: rgba(220, 38, 38, 0.1); color: var(--primary-color); } .mobile-about-link { font-weight: 600; border-bottom: 2px solid rgba(220, 38, 38, 0.3) !important; } /* Prevent body scroll when mobile menu is open */ body.mobile-menu-open { overflow: hidden; } } /* ===== HERO SECTION ===== */ .hero { width: 100vw; margin-left: calc(-50vw + 50%); background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.groovetech.io/gP3ET_s2yCP2r5mIj7y0TrLxrBaYv1-GJglHB7XLBYI/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzVlZTFhZmUxNzFiZmFhMDAxMzQ1M2M5Mi8xNzUxNzEwOTY5X2xpbW9kb29yb3BlbmluZ2hlcm8xLnBuZw.webp') center/cover; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--white); padding: 120px var(--space-lg) 60px; position: relative; box-sizing: border-box; } .hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.3); z-index: 1; } .hero > * { position: relative; z-index: 2; } .hero-badge { background: rgb(220 38 38 / 0.2); color: var(--white); padding: var(--space-xs) var(--space-lg); border-radius: 25px; font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--space-xl); display: flex; align-items: center; gap: var(--space-xs); backdrop-filter: blur(10px); } .hero-logo { max-width: 120px; height: auto; margin-bottom: var(--space-lg); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); transition: var(--transition-normal); } .hero-logo.lazy-image { opacity: 0; } .hero-logo.lazy-image.loaded { opacity: 1; } .hero h1 { font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-5xl)); font-weight: 700; margin-bottom: var(--space-sm); line-height: 1.1; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .hero-subtitle { font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-4xl)); font-weight: 700; color: var(--primary-color); margin-bottom: var(--space-lg); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } .hero p { font-size: clamp(var(--font-size-base), 2vw, var(--font-size-xl)); max-width: 800px; margin-bottom: var(--space-xl); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } /* ===== BOOKING SECTION ===== */ .booking-section { background: var(--background-light); padding: 60px 0; } .booking-container { max-width: 900px; margin: 0 auto; background: var(--white); padding: var(--space-2xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .booking-title { text-align: center; margin-bottom: var(--space-lg); font-size: var(--font-size-3xl); font-weight: 700; color: var(--text-primary); } .whatsapp-info { text-align: center; background: linear-gradient(135deg, #25D366 0%, #20c759 100%); color: var(--white); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); margin-bottom: var(--space-lg); box-shadow: var(--shadow-md); } .whatsapp-info i { font-size: 20px; margin-right: var(--space-xs); vertical-align: middle; } .whatsapp-info strong { font-size: var(--font-size-base); font-weight: 700; display: inline-block; margin-bottom: 4px; } .whatsapp-info span { display: block; opacity: 0.95; font-weight: 500; line-height: 1.3; } /* Form Styles */ .form-group { margin-bottom: var(--space-lg); } .form-label { display: block; margin-bottom: var(--space-xs); font-weight: 600; color: var(--text-primary); font-size: var(--font-size-sm); } .input-container { position: relative; } .form-control { width: 100%; padding: 12px 15px 12px 45px; border: 2px solid var(--border-color); border-radius: var(--radius-sm); font-size: var(--font-size-base); font-family: var(--font-family); background: var(--white); transition: var(--transition-normal); } .form-control:focus { outline: none; border-color: #25D366; box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1); } .form-control:invalid { border-color: #25D366; } .form-control::placeholder { color: var(--text-light); } .input-icon { position: absolute; left: 15px; top: 15px; color: var(--text-secondary); pointer-events: none; z-index: 1; transition: var(--transition-normal); } .form-grid { display: grid; gap: var(--space-lg); } .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } textarea.form-control { min-height: 100px; resize: vertical; line-height: 1.5; } /* Form states */ .loading, .success, .error { padding: var(--space-lg); border-radius: var(--radius-sm); margin-top: var(--space-lg); text-align: center; font-weight: 600; display: none; } .loading.visible { display: block; } .success { background: #d4edda; color: #155724; border-left: 4px solid #28a745; } .success.visible { display: block; } .error { background: #f8d7da; color: #721c24; border-left: 4px solid var(--primary-color); } .error.visible { display: block; } .error-message { color: var(--primary-color); font-size: var(--font-size-xs); margin-top: var(--space-xs); display: block; } .spinner { border: 3px solid var(--border-color); border-top: 3px solid var(--primary-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ===== SERVICES SECTION ===== */ .services-section { background: #f5f5f5; padding: 10px 20px 80px; } .services-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); } .services-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); } .services-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-xl); justify-items: center; } .service-card { background: var(--white); padding: var(--space-2xl) var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: left; transition: var(--transition-normal); border: 1px solid transparent; width: 100%; max-width: 380px; grid-column: span 2; } .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--secondary-color); } .service-card:nth-child(4) { grid-column: 2 / 4; } .service-card:nth-child(5) { grid-column: 4 / 6; } .service-icon { width: 60px; height: 60px; background: var(--primary-color); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-lg); transition: var(--transition-normal); } .service-card:hover .service-icon { background: var(--secondary-color); transform: scale(1.1); } .service-icon i { font-size: 24px; color: var(--white); } .service-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-md); } .service-description { color: var(--text-secondary); margin-bottom: var(--space-lg); } .service-features { list-style: none; } .service-features li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-xs); color: #555; font-size: var(--font-size-sm); } .service-features li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; } /* ===== VIDEO SECTION ===== */ .video-section { background: var(--background-light); padding: var(--space-3xl) 0; } .video-title { font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); text-align: center; } .video-description { font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); text-align: center; } .video-player { position: relative; max-width: 1000px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); } .video-thumbnail { position: relative; width: 100%; height: 500px; overflow: hidden; background: var(--background-light); } .video-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--transition-normal); } .video-bg.lazy-image { opacity: 0; } .video-bg.lazy-image.loaded { opacity: 1; } .video-overlay { position: absolute; inset: 0; background: linear-gradient(45deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2)); display: flex; flex-direction: column; justify-content: center; align-items: center; } .play-button { width: 80px; height: 80px; border-radius: 50%; background: var(--primary-color); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-normal); box-shadow: 0 8px 25px rgba(220, 38, 38, 0.3); } .play-button:hover { background: var(--primary-hover); transform: scale(1.1); box-shadow: 0 12px 35px rgba(220, 38, 38, 0.4); } .play-button:focus { outline: 3px solid var(--white); outline-offset: 3px; } .play-button i { font-size: 28px; color: var(--white); margin-left: 4px; } .video-content { position: absolute; bottom: var(--space-2xl); left: var(--space-2xl); text-align: left; color: var(--white); } .video-content-title { font-size: var(--font-size-3xl); font-weight: 700; margin-bottom: var(--space-xs); text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .video-content-subtitle { font-size: var(--font-size-xl); opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } /* ===== FEATURES SECTION ===== */ .features-section { background: var(--background-dark); padding: var(--space-xl) 0; color: var(--white); } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); align-items: center; } .feature-item { text-align: center; padding: var(--space-md); } .feature-icon { width: 70px; height: 70px; margin: 0 auto var(--space-lg); display: flex; align-items: center; justify-content: center; border: 2px solid var(--primary-color); border-radius: 50%; transition: var(--transition-normal); } .feature-icon i { font-size: 28px; color: var(--primary-color); transition: var(--transition-normal); } .feature-item:hover .feature-icon { background: var(--primary-color); transform: scale(1.1); } .feature-item:hover .feature-icon i { color: var(--white); } .feature-title { font-size: var(--font-size-lg); font-weight: 700; letter-spacing: 0.1em; margin-bottom: var(--space-sm); text-transform: uppercase; } .feature-description { color: #b0b0b0; font-weight: 400; font-size: var(--font-size-sm); } /* ===== OCCASIONS SECTION ===== */ .occasions-section { background: var(--background-light); padding: var(--space-3xl) 0; } .occasions-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); } .occasions-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .occasions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .occasion-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition-normal); } .occasion-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .occasion-image { position: relative; width: 100%; height: 200px; overflow: hidden; } .occasion-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--transition-normal); } .occasion-bg.lazy-image { opacity: 0; } .occasion-bg.lazy-image.loaded { opacity: 1; } .occasion-card:hover .occasion-bg { transform: scale(1.05); } .occasion-overlay { position: absolute; inset: 0; background: linear-gradient(45deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3)); display: flex; align-items: flex-end; padding: var(--space-lg); } .occasion-card-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--white); text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .occasion-content { padding: var(--space-md); } .occasion-card-description { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-lg); } .occasion-features { list-style: none; padding: 0; } .occasion-features li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-xs); color: var(--text-secondary); font-size: var(--font-size-sm); } .occasion-features li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; } /* ===== CALL TO ACTION SECTION ===== */ .cta-section { background: var(--background-light); padding: var(--space-xl) 0; } .cta-content { background: var(--primary-color); border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-lg); text-align: center; color: var(--white); } .cta-title { font-size: var(--font-size-3xl); font-weight: 700; margin-bottom: var(--space-md); color: var(--white); } .cta-description { font-size: var(--font-size-base); line-height: 1.5; margin-bottom: var(--space-lg); max-width: 600px; margin-left: auto; margin-right: auto; color: var(--white); opacity: 0.95; } .cta-buttons { display: flex; justify-content: center; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } .btn-cta-primary { background: var(--white); color: var(--primary-color); padding: var(--space-sm) var(--space-xl); font-weight: 700; font-size: var(--font-size-base); } .btn-cta-primary:hover { background: #f8f9fa; color: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ===== FLEET SECTION ===== */ .fleet-section { background: var(--white); padding: var(--space-3xl) 0; } .fleet-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(220, 38, 38, 0.1); color: var(--primary-color); padding: var(--space-xs) var(--space-lg); border-radius: 25px; font-size: var(--font-size-sm); font-weight: 600; margin: 0 auto var(--space-lg); justify-content: center; width: fit-content; display: flex; } .fleet-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); } .fleet-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .fleet-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); align-items: flex-start; } .fleet-feature { text-align: center; } .fleet-feature-icon { width: 80px; height: 80px; background: var(--primary-color); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); transition: var(--transition-normal); } .fleet-feature-icon i { font-size: 32px; color: var(--white); } .fleet-feature:hover .fleet-feature-icon { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .fleet-feature-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); } .fleet-feature-description { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.5; } /* ===== VEHICLE GALLERY SECTION ===== */ .vehicle-gallery-section { background: var(--background-light); padding: var(--space-3xl) 0; } .vehicle-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); margin-top: var(--space-xl); } .vehicle-card { background: var(--white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); transition: var(--transition-normal); border: 1px solid var(--border-color); } .vehicle-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .vehicle-image { position: relative; width: 100%; height: 250px; overflow: hidden; } .vehicle-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--transition-normal); } .vehicle-bg.lazy-image { opacity: 0; } .vehicle-bg.lazy-image.loaded { opacity: 1; } .vehicle-card:hover .vehicle-bg { transform: scale(1.05); } .vehicle-badge { position: absolute; top: var(--space-lg); left: var(--space-lg); padding: var(--space-xs) var(--space-md); border-radius: 20px; font-size: var(--font-size-sm); font-weight: 600; color: var(--white); text-transform: uppercase; letter-spacing: 0.05em; } .vehicle-badge.executive { background: var(--primary-color); } .vehicle-badge.luxury { background: var(--primary-color); } .vehicle-badge.ultra-luxury { background: var(--primary-color); } .vehicle-capacity { position: absolute; bottom: var(--space-lg); right: var(--space-lg); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: var(--space-xs) var(--space-md); border-radius: 20px; display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); } .vehicle-content { padding: var(--space-xl); } .vehicle-title { font-size: var(--font-size-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-md); } .vehicle-description { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-lg); } .vehicle-features { list-style: none; padding: 0; margin-bottom: 0; } .vehicle-features li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-sm); color: var(--text-secondary); font-size: var(--font-size-sm); } .vehicle-features li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; } /* ===== CUSTOM REQUEST SECTION ===== */ .custom-request-section { background: var(--background-light); padding: var(--space-2xl) 0; } .custom-request-content { background: var(--background-dark); border-radius: var(--radius-xl); padding: var(--space-2xl) var(--space-xl); text-align: center; color: var(--white); max-width: 800px; margin: 0 auto; } .custom-request-title { font-size: var(--font-size-3xl); font-weight: 700; margin-bottom: var(--space-md); color: var(--white); } .custom-request-description { font-size: var(--font-size-base); line-height: 1.6; margin-bottom: var(--space-xl); max-width: 600px; margin-left: auto; margin-right: auto; color: #b0b0b0; } .custom-request-buttons { display: flex; justify-content: center; align-items: center; } .btn-custom-request { background: var(--primary-color); color: var(--white); padding: var(--space-sm) var(--space-xl); font-weight: 600; font-size: var(--font-size-base); border-radius: 25px; transition: var(--transition-normal); } .btn-custom-request:hover, .btn-custom-request:focus { background: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ===== ABOUT SECTION ===== */ .about-section { background: var(--background-light); padding: var(--space-3xl) 0; } .about-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .about-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); align-items: center; } .stat-item { text-align: center; padding: var(--space-lg); } .stat-icon { width: 80px; height: 80px; background: var(--primary-color); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); transition: var(--transition-normal); } .stat-icon i { font-size: 32px; color: var(--white); } .stat-item:hover .stat-icon { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .stat-number { font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); line-height: 1; } .stat-label { font-size: var(--font-size-base); color: var(--text-secondary); font-weight: 500; } /* ===== STORY SECTION ===== */ .story-section { background: var(--white); padding: var(--space-3xl) 0; } .story-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; } .story-text { padding-right: var(--space-lg); } .story-title { font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); line-height: 1.2; } .story-paragraph { font-size: var(--font-size-lg); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-lg); } .story-paragraph:last-child { margin-bottom: 0; } .story-image { position: relative; } .story-photo { position: relative; width: 100%; height: 500px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); } .story-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--transition-normal); } .story-bg.lazy-image { opacity: 0; } .story-bg.lazy-image.loaded { opacity: 1; } .story-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: var(--space-2xl); color: var(--white); } .story-info { text-align: left; } .story-name { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--space-xs); color: var(--white); } .story-role { font-size: var(--font-size-lg); font-weight: 500; margin-bottom: var(--space-xs); color: var(--white); opacity: 0.9; } .story-experience { font-size: var(--font-size-base); color: var(--white); opacity: 0.8; } /* ===== VALUES SECTION ===== */ .values-section { background: var(--background-light); padding: var(--space-3xl) 0; } .values-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .values-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); align-items: stretch; } .value-card { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-md); transition: var(--transition-normal); border: 1px solid var(--border-color); display: flex; flex-direction: column; height: 100%; } .value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .value-icon { width: 80px; height: 80px; background: var(--primary-color); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); transition: var(--transition-normal); flex-shrink: 0; } .value-icon i { font-size: 32px; color: var(--white); } .value-card:hover .value-icon { transform: scale(1.1); box-shadow: var(--shadow-lg); } .value-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); flex-shrink: 0; } .value-description { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.4; flex-grow: 1; display: flex; align-items: center; } /* ===== EXPERIENCE SECTION ===== */ .experience-section { background: var(--background-light); padding: var(--space-3xl) 0; } .experience-content { background: var(--background-dark); border-radius: var(--radius-xl); padding: var(--space-3xl) var(--space-xl); text-align: center; color: var(--white); max-width: 1000px; margin: 0 auto; } .experience-title { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--space-xl); color: var(--white); line-height: 1.2; } .experience-description { font-size: var(--font-size-lg); line-height: 1.6; margin-bottom: var(--space-2xl); max-width: 700px; margin-left: auto; margin-right: auto; color: #b0b0b0; } .experience-buttons { display: flex; justify-content: center; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } .btn-experience-primary { background: var(--primary-color); color: var(--white); padding: var(--space-md) var(--space-2xl); font-weight: 600; font-size: var(--font-size-lg); border-radius: 30px; transition: var(--transition-normal); } .btn-experience-primary:hover, .btn-experience-primary:focus { background: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-experience-secondary { background: transparent; color: var(--white); border: 2px solid var(--white); padding: var(--space-md) var(--space-2xl); font-weight: 600; font-size: var(--font-size-lg); border-radius: 30px; transition: var(--transition-normal); } .btn-experience-secondary:hover, .btn-experience-secondary:focus { background: var(--white); color: var(--background-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ===== NEW VALET SECTIONS ===== */ /* Prestigious Events Section */ .prestigious-events-section { background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.7)), url('https://images.groovetech.io/VIuZ-z28q-ZhK1aNATnLLptQFg4F36DK1AJmXjXlWk4/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzVlZTFhZmUxNzFiZmFhMDAxMzQ1M2M5Mi8xNjUzNjM3NTkyX2NhcnMtMWJsdWUtZnJvbnQtMTIwMHg5MDBjb3B5Mi5qcGc.webp') center/cover; padding: var(--space-3xl) 0; color: var(--white); position: relative; } .prestigious-events-section::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.3); z-index: 1; } .prestigious-events-section > * { position: relative; z-index: 2; } .prestigious-events-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(220, 38, 38, 0.9); color: var(--white); padding: var(--space-xs) var(--space-lg); border-radius: 25px; font-size: var(--font-size-sm); font-weight: 600; margin: 0 auto var(--space-lg); justify-content: center; width: fit-content; display: flex; text-transform: uppercase; letter-spacing: 0.05em; } .prestigious-events-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--white); margin-bottom: var(--space-lg); line-height: 1.2; } .prestigious-events-subtitle { font-size: var(--font-size-4xl); color: var(--primary-color); font-weight: 700; text-align: center; margin-bottom: var(--space-xl); } .prestigious-events-description { text-align: center; font-size: var(--font-size-lg); color: var(--white); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; opacity: 0.95; } .elite-valet-section { background: rgba(0,0,0,0.9); padding: var(--space-3xl) 0; margin-top: var(--space-3xl); } .elite-valet-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--white); margin-bottom: var(--space-lg); } .elite-valet-subtitle { text-align: center; font-size: var(--font-size-lg); color: var(--white); margin-bottom: var(--space-2xl); opacity: 0.9; } .elite-badges { display: flex; justify-content: center; gap: var(--space-lg); margin-bottom: var(--space-3xl); flex-wrap: wrap; } .elite-badge { background: rgba(220, 38, 38, 0.2); color: var(--white); padding: var(--space-sm) var(--space-lg); border-radius: 25px; font-size: var(--font-size-sm); font-weight: 600; border: 1px solid rgba(220, 38, 38, 0.4); backdrop-filter: blur(10px); transition: var(--transition-normal); } .elite-badge:hover { background: rgba(220, 38, 38, 0.3); transform: translateY(-2px); } .valet-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); align-items: flex-start; } .valet-service-card { text-align: center; padding: var(--space-lg); background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.1); transition: var(--transition-normal); backdrop-filter: blur(10px); } .valet-service-card:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-5px); } .valet-service-icon { width: 70px; height: 70px; background: var(--primary-color); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); transition: var(--transition-normal); } .valet-service-icon i { font-size: 28px; color: var(--white); } .valet-service-card:hover .valet-service-icon { transform: scale(1.1); box-shadow: var(--shadow-lg); } .valet-service-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--white); margin-bottom: var(--space-sm); } .valet-service-description { font-size: var(--font-size-sm); color: var(--white); opacity: 0.8; line-height: 1.5; } /* Premium Valet Services CTA Section */ .premium-valet-cta-section { background: var(--background-dark); padding: var(--space-3xl) 0; } .premium-valet-content { background: linear-gradient(135deg, var(--primary-color) 0%, #b91c1c 100%); border-radius: var(--radius-xl); padding: var(--space-3xl) var(--space-xl); text-align: center; color: var(--white); max-width: 1000px; margin: 0 auto; box-shadow: var(--shadow-xl); } .premium-valet-title { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--space-lg); color: var(--white); line-height: 1.2; } .premium-valet-description { font-size: var(--font-size-lg); line-height: 1.6; margin-bottom: var(--space-3xl); max-width: 700px; margin-left: auto; margin-right: auto; color: var(--white); opacity: 0.95; } .premium-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-3xl); } .premium-feature-card { background: rgba(255, 255, 255, 0.1); padding: var(--space-xl); border-radius: var(--radius-lg); text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: var(--transition-normal); } .premium-feature-card:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-5px); } .premium-feature-icon { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-md); transition: var(--transition-normal); } .premium-feature-icon i { font-size: 24px; color: var(--white); } .premium-feature-card:hover .premium-feature-icon { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); } .premium-feature-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--white); margin-bottom: var(--space-sm); } .premium-feature-description { font-size: var(--font-size-sm); color: var(--white); opacity: 0.9; line-height: 1.4; } .premium-cta-buttons { display: flex; justify-content: center; align-items: center; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-lg); } .btn-premium-call { background: var(--white); color: var(--primary-color); padding: var(--space-md) var(--space-2xl); font-weight: 700; font-size: var(--font-size-lg); border-radius: 30px; transition: var(--transition-normal); display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; } .btn-premium-call:hover, .btn-premium-call:focus { background: #f8f9fa; color: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-premium-quote { background: transparent; color: var(--white); border: 2px solid var(--white); padding: var(--space-md) var(--space-2xl); font-weight: 600; font-size: var(--font-size-lg); border-radius: 30px; transition: var(--transition-normal); display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; } .btn-premium-quote:hover, .btn-premium-quote:focus { background: var(--white); color: var(--primary-color); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .premium-availability { font-size: var(--font-size-base); color: var(--white); opacity: 0.9; font-weight: 500; } /* ===== TESTIMONIALS SECTION ===== */ .testimonials-section { background: var(--white); padding: var(--space-3xl) 0; } .testimonials-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(220, 38, 38, 0.1); color: var(--primary-color); padding: var(--space-xs) var(--space-lg); border-radius: 25px; font-size: var(--font-size-sm); font-weight: 600; margin: 0 auto var(--space-lg); justify-content: center; width: fit-content; display: flex; } .testimonials-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .testimonials-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); align-items: flex-start; } .testimonial-card { background: var(--background-light); padding: var(--space-2xl); border-radius: var(--radius-lg); position: relative; transition: var(--transition-normal); border: 1px solid var(--border-color); } .testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .testimonial-quote-icon { position: absolute; top: var(--space-lg); left: var(--space-lg); color: #e0e0e0; font-size: 40px; opacity: 0.3; } .testimonial-service-icon { position: absolute; top: var(--space-lg); right: var(--space-lg); width: 50px; height: 50px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .testimonial-service-icon.briefcase { background: var(--primary-color); } .testimonial-service-icon.heart { background: var(--primary-color); } .testimonial-service-icon.shield { background: var(--primary-color); } .testimonial-service-icon.user { background: var(--primary-color); } .testimonial-service-icon i { font-size: 20px; color: var(--white); } .testimonial-stars { margin: var(--space-2xl) 0 var(--space-lg); display: flex; gap: 4px; } .testimonial-stars i { color: #ffd700; font-size: 16px; } .testimonial-text { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-xl); font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: var(--space-md); } .author-photo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: center; transition: var(--transition-normal); } .author-photo.lazy-image { opacity: 0; } .author-photo.lazy-image.loaded { opacity: 1; } .author-info { flex: 1; } .author-name { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-xs); } .author-title { font-size: var(--font-size-sm); color: var(--primary-color); font-weight: 500; margin-bottom: 2px; } .author-company { font-size: var(--font-size-sm); color: var(--text-light); } /* ===== TRUST SECTION ===== */ .trust-section { background: var(--background-light); padding: var(--space-3xl) 0; } .trust-content { background: var(--primary-color); border-radius: var(--radius-xl); padding: var(--space-3xl) var(--space-xl); text-align: center; color: var(--white); max-width: 1000px; margin: 0 auto; } .trust-title { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--space-2xl); color: var(--white); line-height: 1.2; } .trust-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); margin-bottom: var(--space-2xl); align-items: center; } .trust-stat { text-align: center; } .trust-number { font-size: var(--font-size-5xl); font-weight: 700; color: var(--white); margin-bottom: var(--space-sm); line-height: 1; } .trust-label { font-size: var(--font-size-lg); color: var(--white); font-weight: 500; opacity: 0.9; } .trust-cta { display: flex; justify-content: center; align-items: center; } .btn-trust { background: var(--white); color: var(--primary-color); padding: var(--space-md) var(--space-2xl); font-weight: 700; font-size: var(--font-size-lg); border-radius: 30px; transition: var(--transition-normal); } .btn-trust:hover, .btn-trust:focus { background: #f8f9fa; color: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ===== AWARDS SECTION ===== */ .awards-section { background: var(--background-light); padding: var(--space-3xl) 0; } .awards-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(220, 38, 38, 0.1); color: var(--primary-color); padding: var(--space-xs) var(--space-lg); border-radius: 25px; font-size: var(--font-size-sm); font-weight: 600; margin: 0 auto var(--space-lg); justify-content: center; width: fit-content; display: flex; } .awards-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .awards-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .awards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); align-items: flex-start; } .award-card { background: var(--white); padding: var(--space-2xl); border-radius: var(--radius-lg); display: flex; align-items: flex-start; gap: var(--space-lg); box-shadow: var(--shadow-md); transition: var(--transition-normal); border: 1px solid var(--border-color); } .award-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .award-icon { width: 60px; height: 60px; background: var(--primary-color); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition-normal); } .award-icon i { font-size: 24px; color: var(--white); } .award-card:hover .award-icon { transform: scale(1.1); box-shadow: var(--shadow-lg); } .award-content { flex: 1; } .award-year { font-size: var(--font-size-lg); font-weight: 600; color: var(--primary-color); margin-bottom: var(--space-xs); } .award-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xs); line-height: 1.3; } .award-organization { font-size: var(--font-size-base); color: var(--primary-color); font-weight: 500; margin-bottom: var(--space-sm); } .award-description { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; } /* ===== RECOGNITION SECTION ===== */ .recognition-section { background: var(--white); padding: var(--space-3xl) 0; } .recognition-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .recognition-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .recognition-content { background: var(--background-light); border-radius: var(--radius-xl); padding: var(--space-3xl) var(--space-xl); text-align: center; } .recognition-main { margin-bottom: var(--space-2xl); } .recognition-feature-title { font-size: var(--font-size-2xl); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-lg); } .recognition-awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); align-items: stretch; } .recognition-award { background: var(--white); padding: var(--space-lg); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-md); transition: var(--transition-normal); border: 1px solid var(--border-color); display: flex; flex-direction: column; height: 100%; } .recognition-award:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .recognition-award-icon { width: 60px; height: 60px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-md); transition: var(--transition-normal); flex-shrink: 0; } .recognition-award-icon i { font-size: 24px; color: var(--white); } .recognition-award:hover .recognition-award-icon { transform: scale(1.1); box-shadow: var(--shadow-lg); } .recognition-award-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); flex-shrink: 0; } .recognition-award-description { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.4; flex-grow: 1; display: flex; align-items: center; } /* ===== CONTACT SECTION ===== */ .contact-section { background: var(--background-light); padding: var(--space-3xl) 0; } .contact-title { text-align: center; font-size: var(--font-size-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xl); } .contact-description { text-align: center; font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-3xl); line-height: 1.6; } .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); align-items: stretch; } .contact-card { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-md); transition: var(--transition-normal); border: 1px solid var(--border-color); display: flex; flex-direction: column; height: 100%; } .contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .contact-icon { width: 60px; height: 60px; background: var(--primary-color); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-md); transition: var(--transition-normal); flex-shrink: 0; } .contact-icon i { font-size: 24px; color: var(--white); } .contact-card:hover .contact-icon { transform: scale(1.1); box-shadow: var(--shadow-lg); } .contact-card-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-md); flex-shrink: 0; } .contact-details { text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; } .contact-info { font-size: var(--font-size-base); color: var(--text-primary); font-weight: 500; margin-bottom: var(--space-xs); } /* Clickable phone number links */ .contact-phone-link { display: block; text-decoration: none; color: var(--text-primary); font-weight: 500; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); transition: var(--transition-normal); margin-bottom: var(--space-xs); border: 2px solid transparent; } .contact-phone-link:hover, .contact-phone-link:focus { color: var(--primary-color); background: rgba(220, 38, 38, 0.05); border-color: rgba(220, 38, 38, 0.2); transform: translateY(-1px); outline: none; } .contact-phone-link:active { transform: translateY(0); background: rgba(220, 38, 38, 0.1); } .contact-note { font-size: var(--font-size-sm); color: var(--text-secondary); font-style: italic; margin-top: var(--space-sm); } /* ===== SERVICE DETAILS SECTION ===== */ .service-details-section { background: var(--background-light); padding: var(--space-3xl) 0; } .service-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); max-width: 1200px; margin: 0 auto; } /* Immediate Assistance Styles */ .immediate-assistance { background: var(--primary-color); border-radius: var(--radius-xl); padding: var(--space-2