Transport Solutions Template Page | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elite Transport Solutions - Your Journey, Our Priority</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

</head>
<body>

<header id="home">
        <nav>
            <div class="logo">Elite Transport</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About Us</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <div class="burger" role="button" aria-label="Toggle navigation">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
        </nav>
        <div class="hero-content">
            <h1>Reliable Transport Solutions, Every Mile</h1>
            <p>Your trusted partner for efficient and safe logistics across the nation.</p>
            <a href="#contact" class="btn-primary">Get a Free Quote</a>
        </div>
    </header>

<section id="about" class="section-padding">
        <div class="container">
            <h2>About Elite Transport</h2>
            <p class="section-description">For over a decade, we've been delivering excellence in transportation. Learn more about our unwavering commitment to quality, safety, and customer satisfaction.</p>
            <div class="about-grid">
                <div class="about-item animated-fade-in-up">
                    <h3>Our Mission</h3>
                    <p>To provide unparalleled transport services, ensuring timely, secure, and cost-effective delivery for all our clients, fostering long-term partnerships.</p>
                </div>
                <div class="about-item animated-fade-in-up" style="transition-delay: 0.1s;">
                    <h3>Our Vision</h3>
                    <p>To be the leading transport provider, recognized for our reliability, innovative logistics solutions, advanced technology, and customer-centric approach globally.</p>
                </div>
                <div class="about-item animated-fade-in-up" style="transition-delay: 0.2s;">
                    <h3>Our Values</h3>
                    <ul>
                        <li><span class="value-icon">&#9989;</span> Integrity & Transparency</li>
                        <li><span class="value-icon">&#128737;</span> Uncompromising Safety</li>
                        <li><span class="value-icon">&#128640;</span> Operational Efficiency</li>
                        <li><span class="value-icon">&#128100;</span> Customer Centricity</li>
                        <li><span class="value-icon">&#128172;</span> Continuous Improvement</li>
                    </ul>
                </div>
            </div>
            <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Logistics and Transport Operations" class="responsive-img animated-slide-in-left">
        </div>
    </section>

<section id="services" class="section-padding bg-light">
        <div class="container">
            <h2>Our Comprehensive Services</h2>
            <p class="section-description">We offer a diverse range of reliable transport solutions, meticulously tailored to meet the dynamic and specific needs of your business.</p>
            <div class="services-grid">
                <div class="service-card animated-pop-in">
                    <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Freight Transport">
                    <h3>Freight Transport</h3>
                    <p>Efficient and secure movement of general, bulk, and specialized cargo across national routes.</p>
                </div>
                <div class="service-card animated-pop-in" style="transition-delay: 0.1s;">
                    <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1524&q=80" alt="Passenger Transport">
                    <h3>Passenger Transport</h3>
                    <p>Safe, comfortable, and timely transportation for corporate groups, events, and private tours.</p>
                </div>
                <div class="service-card animated-pop-in" style="transition-delay: 0.2s;">
                    <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Logistics & Warehousing">
                    <h3>Logistics & Warehousing</h3>
                    <p>Integrated supply chain solutions including storage, distribution, and inventory management.</p>
                </div>
                <div class="service-card animated-pop-in" style="transition-delay: 0.3s;">
                    <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Specialized Transport">
                    <h3>Specialized Transport</h3>
                    <p>Expert handling of oversized, heavy-lift, delicate, and high-value cargo with custom solutions.</p>
                </div>
            </div>
        </div>
    </section>

<section id="fleet" class="section-padding">
        <div class="container">
            <h2>Our Modern Fleet</h2>
            <p class="section-description">Our state-of-the-art fleet comprises a diverse range of impeccably maintained vehicles, ready for any transport challenge.</p>
            <div class="fleet-gallery">
                <div class="fleet-item animated-fade-in-up">
                    <img src="https://images.unsplash.com/photo-1601362840469-51e4d8d58785" alt="Heavy Duty Truck">
                    <h3>Heavy Duty Trucks</h3>
                    <p>For large-scale freight and long-haul distances.</p>
                </div>
                <div class="fleet-item animated-fade-in-up" style="transition-delay: 0.1s;">
                    <img src="https://images.unsplash.com/photo-1568605114967-8130f3a36994" alt="Cargo Vans">
                    <h3>Cargo Vans</h3>
                    <p>Ideal for agile urban deliveries and smaller shipments.</p>
                </div>
                <div class="fleet-item animated-fade-in-up" style="transition-delay: 0.2s;">
                    <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1524&q=80" alt="Passenger Buses">
                    <h3>Passenger Buses</h3>
                    <p>Comfortable and safe for group transportation and charters.</p>
                </div>
                <div class="fleet-item animated-fade-in-up" style="transition-delay: 0.3s;">
                    <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Luxury Sedans">
                    <h3>Luxury Sedans</h3>
                    <p>Executive transport for VIPs and special occasions.</p>
                </div>
            </div>
        </div>
    </section>

<section id="features" class="section-padding bg-light">
        <div class="container">
            <h2>Why Choose Elite Transport?</h2>
            <p class="section-description">Experience the unparalleled difference with our unwavering commitment to excellence, innovation, and client satisfaction.</p>
            <div class="features-grid">
                <div class="feature-item animated-rotate-in">
                    <span class="icon">&#9203;</span> <h3>Unmatched Reliability</h3>
                    <p>Guaranteed on-time deliveries, every time, backed by robust planning and execution.</p>
                </div>
                <div class="feature-item animated-rotate-in" style="transition-delay: 0.1s;">
                    <span class="icon">&#128737;</span> <h3>Safety First Culture</h3>
                    <p>Rigorous safety protocols, routine vehicle inspections, and highly trained personnel for secure operations.</p>
                </div>
                <div class="feature-item animated-rotate-in" style="transition-delay: 0.2s;">
                    <span class="icon">&#128222;</span> <h3>24/7 Dedicated Support</h3>
                    <p>Our expert support team is always available, round the clock, to assist with any queries or urgent needs.</p>
                </div>
                <div class="feature-item animated-rotate-in" style="transition-delay: 0.3s;">
                    <span class="icon">&#128176;</span> <h3>Competitive & Transparent Pricing</h3>
                    <p>Affordable, clear, and upfront pricing structures with no hidden costs, ensuring maximum value.</p>
                </div>
                <div class="feature-item animated-rotate-in" style="transition-delay: 0.4s;">
                    <span class="icon">&#128279;</span> <h3>Advanced Tracking & Technology</h3>
                    <p>Real-time GPS tracking and cutting-edge logistics software for complete shipment visibility.</p>
                </div>
                <div class="feature-item animated-rotate-in" style="transition-delay: 0.5s;">
                    <span class="icon">&#129309;</span> <h3>Customized Solutions</h3>
                    <p>Flexible and bespoke transport solutions crafted to perfectly match your unique business requirements.</p>
                </div>
            </div>
        </div>
    </section>

<section id="testimonials" class="section-padding">
        <div class="container">
            <h2>What Our Valued Clients Say</h2>
            <div class="testimonial-slider">
                <div class="testimonial-card animated-fade-in-up">
                    <p>"Elite Transport has truly revolutionized our supply chain. Their efficiency, professionalism, and commitment to deadlines are absolutely unmatched. A reliable partner we trust completely."</p>
                    <h4>- Anya Sharma, CEO of Global Goods Inc.</h4>
                </div>
                <div class="testimonial-card animated-fade-in-up">
                    <p>"We rely on Elite Transport for all our critical shipments. They are consistently on time, incredibly reliable, and their communication is flawless. Truly the best in the business."</p>
                    <h4>- Rohan Kapoor, Operations Manager, Tech Innovations</h4>
                </div>
                <div class="testimonial-card animated-fade-in-up">
                    <p>"From specialized cargo to standard freight, Elite Transport handles everything with expert care. Their team goes above and beyond to ensure smooth operations. Highly, highly recommend!"</p>
                    <h4>- Priya Singh, Director of Logistics, Industrio Ltd.</h4>
                </div>
                <div class="testimonial-card animated-fade-in-up">
                    <p>"Booking corporate travel has never been easier or more reliable. Elite Transport provides comfortable, safe, and punctual passenger services. Our team always arrives refreshed."</p>
                    <h4>- Vikram Desai, HR Head, Corporate Solutions</h4>
                </div>
            </div>
            <div class="slider-nav">
                <button class="prev-btn" aria-label="Previous Testimonial">&#8249;</button>
                <button class="next-btn" aria-label="Next Testimonial">&#8250;</button>
            </div>
        </div>
    </section>

<section id="faq" class="section-padding bg-light">
        <div class="container">
            <h2>Frequently Asked Questions</h2>
            <div class="faq-accordion">
                <div class="accordion-item animated-fade-in-up">
                    <button class="accordion-header" aria-expanded="false">What types of cargo do you transport?</button>
                    <div class="accordion-content">
                        <p>We transport a comprehensive range of cargo including general freight, oversized and heavy-lift loads, temperature-sensitive goods, hazardous materials (fully compliant with regulations), and high-value items.</p>
                    </div>
                </div>
                <div class="accordion-item animated-fade-in-up" style="transition-delay: 0.1s;">
                    <button class="accordion-header" aria-expanded="false">Do you offer international shipping services?</button>
                    <div class="accordion-content">
                        <p>Yes, we proudly offer both international air and sea freight services. Our global network ensures seamless customs clearance and door-to-door delivery. Please contact our team for detailed international routing and documentation requirements.</p>
                    </div>
                </div>
                <div class="accordion-item animated-fade-in-up" style="transition-delay: 0.2s;">
                    <button class="accordion-header" aria-expanded="false">How can I track my shipment in real-time?</button>
                    <div class="accordion-content">
                        <p>Upon booking your shipment, you will receive a unique tracking number. You can effortlessly use this number on our dedicated website tracking portal to get real-time updates on your cargo's location and status, 24/7.</p>
                    </div>
                </div>
                <div class="accordion-item animated-fade-in-up" style="transition-delay: 0.3s;">
                    <button class="accordion-header" aria-expanded="false">What are your typical delivery timelines?</button>
                    <div class="accordion-content">
                        <p>Delivery timelines vary based on distance, cargo type, and service selected (e.g., express, standard). We provide estimated delivery times during the quotation process and keep you informed throughout. For urgent shipments, we offer expedited services.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="careers" class="section-padding">
        <div class="container">
            <h2>Join Our Elite Team</h2>
            <p class="section-description">Are you passionate about logistics, dedicated to excellence, and looking for a dynamic career? Explore exciting opportunities with Elite Transport and grow with us.</p>
            <div class="careers-content">
                <p>We are a rapidly expanding company constantly seeking talented, motivated, and results-driven individuals to join our diverse team of professionals. We offer a supportive work environment, opportunities for professional development, and competitive compensation packages.</p>
                <a href="#contact" class="btn-secondary">View Open Positions</a>
            </div>
            <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Team collaborating in a transport office" class="responsive-img animated-slide-in-right">
        </div>
    </section>

<section id="blog" class="section-padding bg-light">
        <div class="container">
            <h2>Latest Insights from Our Blog</h2>
            <p class="section-description">Stay updated with the latest trends, news, and expert insights from the world of logistics and transportation.</p>
            <div class="blog-grid">
                <div class="blog-post-card animated-pop-in">
                    <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Blog Post Image 1">
                    <h3>The Future of Logistics: AI & Automation</h3>
                    <p>Explore how artificial intelligence and automation are set to revolutionize the efficiency and speed of global supply chains.</p>
                    <a href="#" class="read-more">Read More &rarr;</a>
                </div>
                <div class="blog-post-card animated-pop-in" style="transition-delay: 0.1s;">
                    <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Blog Post Image 2">
                    <h3>5 Essential Tips for Efficient Freight Management</h3>
                    <p>Unlock strategies to streamline your freight operations, reduce costs, and enhance delivery reliability.</p>
                    <a href="#" class="read-more">Read More &rarr;</a>
                </div>
                <div class="blog-post-card animated-pop-in" style="transition-delay: 0.2s;">
                    <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1524&q=80" alt="Blog Post Image 3">
                    <h3>Sustainability in Transport: A Greener Future</h3>
                    <p>Discover how the transport industry is adopting eco-friendly practices for a sustainable and responsible future.</p>
                    <a href="#" class="read-more">Read More &rarr;</a>
                </div>
            </div>
        </div>
    </section>

<section class="section-padding cta-section">
        <div class="container text-center">
            <h2>Ready to Elevate Your Logistics?</h2>
            <p class="section-description cta-description">Partner with Elite Transport Solutions today for reliable, efficient, and secure transportation services that drive your business forward.</p>
            <a href="#contact" class="btn-primary animated-pop-in" style="animation-delay: 0.2s;">Request a Custom Quote</a>
        </div>
    </section>

<section id="contact" class="section-padding">
        <div class="container">
            <h2>Get in Touch With Us</h2>
            <p class="section-description">Have questions, need a detailed quote, or ready to discuss your transport needs? Our team is here to assist you.</p>
            <div class="contact-grid">
                <div class="contact-info animated-slide-in-left">
                    <h3>Contact Details</h3>
                    <p><strong>Address:</strong> Elite Transport HQ, 123 Logistics Park, Transport Lane, City of Commerce, TL 12345, India</p>
                    <p><strong>Phone:</strong> <a href="tel:+919876543210">+91 98765 43210</a></p>
                    <p><strong>Email:</strong> <a href="mailto:info@elitetransport.com">info@elitetransport.com</a></p>
                    <p><strong>Working Hours:</strong> Mon-Fri: 9 AM - 6 PM</p>
                    <div class="social-icons">
                        <a href="https://facebook.com" target="_blank" aria-label="Facebook"><img src="https://img.icons8.com/ios-filled/50/000000/facebook-new.png" alt="Facebook"></a>
                        <a href="https://twitter.com" target="_blank" aria-label="Twitter"><img src="https://img.icons8.com/ios-filled/50/000000/twitter.png" alt="Twitter"></a>
                        <a href="https://linkedin.com" target="_blank" aria-label="LinkedIn"><img src="https://img.icons8.com/ios-filled/50/000000/linkedin.png" alt="LinkedIn"></a>
                        <a href="https://instagram.com" target="_blank" aria-label="Instagram"><img src="https://img.icons8.com/ios-filled/50/000000/instagram-new.png" alt="Instagram"></a>
                    </div>
                </div>
                <div class="contact-form-container animated-slide-in-right">
                    <form class="contact-form">
                        <input type="text" placeholder="Your Full Name" required>
                        <input type="email" placeholder="Your Business Email" required>
                        <input type="tel" placeholder="Your Phone Number (Optional)">
                        <input type="text" placeholder="Subject (e.g., Quote Request, Partnership)">
                        <textarea placeholder="Your Detailed Message" rows="6" required></textarea>
                        <button type="submit" class="btn-primary">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <p>&copy; 2025 Elite Transport Solutions. All rights reserved. Designed with <span style="color: var(--primary-yellow);">&#10084;</span> by Your Company</p>
        </div>
    </footer>

</body>
</html>

CSS

/* CSS RESET & BASE STYLES */
        :root {
            --primary-yellow: hsl(48, 100%, 50%);
            --darker-yellow: hsl(40, 100%, 40%);
            --neutral-dark: hsl(0, 0%, 15%);
            --neutral-light: hsl(0, 0%, 95%);
            --call-to-action-green: hsl(120, 70%, 40%);
            --text-color-dark: var(--neutral-dark);
            --text-color-light: var(--neutral-light);
            --header-height: 80px; /* Define header height for sticky nav */
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--text-color-dark);
            background-color: var(--neutral-light);
            overflow-x: hidden; /* Prevent horizontal scroll due to animations */
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

.section-padding {
            padding: 100px 0; /* Increased padding */
            position: relative; /* For scroll animations */
        }

.bg-light {
            background-color: var(--neutral-light);
        }

h1, h2, h3, h4 {
            color: var(--neutral-dark);
            margin-bottom: 20px;
            font-weight: 700;
        }

h1 {
            font-size: 4.5em; /* Larger hero heading */
            line-height: 1.1;
            color: var(--text-color-light);
            text-shadow: 3px 3px 8px rgba(0,0,0,0.6); /* Stronger shadow */
        }

h2 {
            font-size: 3em; /* Larger section headings */
            text-align: center;
            margin-bottom: 50px; /* More spacing */
            position: relative;
            padding-bottom: 15px;
        }

h2::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 80px; /* Wider underline */
            height: 5px; /* Thicker underline */
            background-color: var(--primary-yellow);
            border-radius: 2px;
        }

h3 {
            font-size: 2em; /* Larger sub-headings */
            margin-bottom: 15px;
        }

p {
            margin-bottom: 20px;
        }

.section-description {
            text-align: center;
            max-width: 800px; /* Wider description */
            margin: 0 auto 70px auto; /* More spacing */
            font-size: 1.2em; /* Larger description font */
            color: #555;
            line-height: 1.8;
        }

.responsive-img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 50px auto; /* More spacing */
            border-radius: 12px; /* More rounded */
            box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* Stronger shadow */
            transition: transform 0.5s ease;
        }
        .responsive-img:hover {
            transform: scale(1.02);
        }

/* Buttons */
        .btn-primary, .btn-secondary {
            display: inline-block;
            padding: 18px 35px; /* Larger buttons */
            border-radius: 8px; /* More rounded buttons */
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Springy transition */
            cursor: pointer;
            border: none;
            font-size: 1.1em;
            letter-spacing: 0.5px;
        }

.btn-primary {
            background-color: var(--primary-yellow);
            color: var(--neutral-dark);
            box-shadow: 0 8px 20px rgba(0,0,0,0.25);
        }

.btn-primary:hover {
            background-color: var(--darker-yellow);
            transform: translateY(-5px) scale(1.02); /* Lift and slight scale */
            box-shadow: 0 12px 25px rgba(0,0,0,0.4);
        }

.btn-secondary {
            background-color: var(--call-to-action-green);
            color: var(--neutral-light);
            box-shadow: 0 8px 20px rgba(0,0,0,0.25);
        }

.btn-secondary:hover {
            background-color: darken(var(--call-to-action-green), 10%);
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 12px 25px rgba(0,0,0,0.4);
        }

/* HEADER / NAVIGATION */
        header {
            background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80') no-repeat center center/cover;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: var(--text-color-light);
            text-align: center;
            padding: 20px 0;
            position: relative;
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
            position: fixed; /* Sticky navigation */
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            background-color: rgba(0,0,0,0.8); /* Semi-transparent background */
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
            transition: background-color 0.3s ease, padding 0.3s ease;
            height: var(--header-height);
        }
        nav.scrolled {
            background-color: var(--neutral-dark); /* Solid background on scroll */
            padding: 10px 40px; /* Smaller padding on scroll */
            height: 60px; /* Smaller height on scroll */
        }

.logo {
            font-size: 2.2em; /* Larger logo */
            font-weight: 700;
            color: var(--primary-yellow);
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 35px; /* More spacing */
        }

.nav-links a {
            color: var(--text-color-light);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            position: relative;
            padding: 5px 0; /* Padding for hover effect */
        }

.nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 3px; /* Thicker underline */
            background-color: var(--primary-yellow);
            bottom: -8px; /* More space below link */
            left: 50%; /* Center the underline */
            transform: translateX(-50%);
            transition: width 0.3s ease-out;
        }

.nav-links a:hover::after,
        .nav-links a.active::after { /* Active state for current section */
            width: 100%;
        }

.nav-links a:hover,
        .nav-links a.active {
            color: var(--primary-yellow);
        }

.burger {
            display: none;
            cursor: pointer;
            flex-direction: column;
            justify-content: space-around;
            width: 35px; /* Larger burger */
            height: 30px;
        }

.burger div {
            width: 35px;
            height: 4px; /* Thicker lines */
            background-color: var(--text-color-light);
            transition: all 0.3s ease;
            border-radius: 2px;
        }

.hero-content {
            margin-top: 100px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            animation: fadeInScale 1.5s ease-out forwards; /* Initial hero animation */
        }

.hero-content p {
            font-size: 1.6em;
            margin-bottom: 50px;
            max-width: 800px;
            color: rgba(255,255,255,0.95);
        }

/* ABOUT US SECTION */
        .about-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Slightly larger min-width */
            gap: 40px; /* More gap */
            margin-bottom: 50px;
            text-align: center;
        }

.about-item {
            background-color: #fff;
            padding: 35px; /* More padding */
            border-radius: 12px; /* More rounded */
            box-shadow: 0 8px 25px rgba(0,0,0,0.08); /* Stronger shadow */
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; /* Springy hover */
            border-top: 5px solid var(--primary-yellow); /* Accent border */
        }

.about-item:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

.about-item h3 {
            color: var(--primary-yellow);
            font-size: 1.7em;
            margin-bottom: 20px;
        }

.about-item ul {
            list-style: none;
            padding: 0;
            text-align: left; /* Align list left */
        }

.about-item ul li {
            margin-bottom: 12px;
            position: relative;
            padding-left: 30px; /* More padding */
            font-size: 1.1em;
            color: #444;
        }

.about-item ul li::before {
            content: '\2713'; /* Checkmark icon */
            color: var(--call-to-action-green); /* Green checkmark */
            font-size: 1.2em;
            position: absolute;
            left: 0;
            top: 0;
            font-weight: bold;
        }

/* SERVICES SECTION */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

.service-card {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            overflow: hidden;
            text-align: center;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
        }

.service-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

.service-card img {
            width: 100%;
            height: 250px; /* Taller images */
            object-fit: cover;
            display: block;
            border-bottom: 6px solid var(--primary-yellow); /* Thicker border */
        }

.service-card h3 {
            margin-top: 25px;
            font-size: 1.8em;
            color: var(--neutral-dark);
        }

.service-card p {
            padding: 0 25px 25px; /* More padding */
            color: #666;
            font-size: 1.05em;
        }

/* FLEET SECTION */
        .fleet-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }

.fleet-item {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            overflow: hidden;
            text-align: center;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
        }

.fleet-item:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

.fleet-item img {
            width: 100%;
            height: 280px; /* Taller images */
            object-fit: cover;
            display: block;
            border-bottom: 6px solid var(--primary-yellow);
        }

.fleet-item h3 {
            margin-top: 25px;
            padding-bottom: 25px;
            font-size: 1.8em;
            color: var(--neutral-dark);
        }

/* FEATURES SECTION */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            text-align: center;
        }

.feature-item {
            background-color: #fff;
            padding: 40px; /* More padding */
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
            border-bottom: 5px solid var(--primary-yellow); /* Accent border */
        }

.feature-item:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

.feature-item .icon {
            font-size: 3.5em; /* Larger icon */
            color: var(--primary-yellow);
            margin-bottom: 20px;
            display: block;
            line-height: 1; /* Adjust line height for icons */
        }

.feature-item h3 {
            font-size: 1.7em;
            color: var(--neutral-dark);
        }

.feature-item p {
            font-size: 1.05em;
            color: #666;
        }

/* TESTIMONIALS SECTION */
        .testimonial-slider {
            display: flex;
            overflow-x: hidden;
            scroll-snap-type: x mandatory;
            margin-bottom: 40px;
            position: relative;
        }

.testimonial-card {
            flex: 0 0 100%;
            scroll-snap-align: start;
            background-color: #fff;
            padding: 50px; /* More padding */
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 250px; /* Consistent height */
            font-style: italic;
            color: #444;
        }

.testimonial-card p {
            font-size: 1.3em; /* Larger quote */
            margin-bottom: 30px;
            line-height: 1.8;
        }

.testimonial-card h4 {
            color: var(--primary-yellow);
            font-size: 1.2em; /* Larger name */
            margin-bottom: 0;
            font-weight: 600;
        }

.slider-nav {
            text-align: center;
            margin-top: 30px;
        }

.slider-nav button {
            background-color: var(--primary-yellow);
            border: none;
            color: var(--neutral-dark);
            font-size: 2.2em; /* Larger buttons */
            padding: 12px 18px;
            margin: 0 12px;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

.slider-nav button:hover {
            background-color: var(--darker-yellow);
            transform: scale(1.15);
        }

/* FAQ SECTION */
        .faq-accordion {
            max-width: 900px; /* Wider accordion */
            margin: 0 auto;
        }

.accordion-item {
            background-color: #fff;
            border: 1px solid #eee; /* Lighter border */
            border-radius: 12px;
            margin-bottom: 20px; /* More spacing */
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        }

.accordion-header {
            width: 100%;
            background-color: var(--primary-yellow);
            color: var(--neutral-dark);
            padding: 22px 30px; /* More padding */
            text-align: left;
            font-size: 1.3em; /* Larger header */
            font-weight: 600;
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s ease;
        }

.accordion-header:hover {
            background-color: var(--darker-yellow);
        }

.accordion-header::after {
            content: '+';
            font-size: 1.8em; /* Larger icon */
            transition: transform 0.3s ease;
        }

.accordion-header.active::after {
            content: '-';
            transform: rotate(180deg);
        }

.accordion-content {
            padding: 0 30px; /* Matches header padding */
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out, padding 0.5s ease-out; /* Slower transition */
            background-color: #fcfcfc;
        }

.accordion-content p {
            padding-top: 25px; /* More padding */
            padding-bottom: 25px;
            margin-bottom: 0;
            color: #555;
            font-size: 1.05em;
            line-height: 1.7;
        }

/* CAREERS SECTION */
        .careers-content {
            text-align: center;
            margin-bottom: 50px;
        }

.careers-content p {
            max-width: 900px;
            margin: 0 auto 40px auto;
            font-size: 1.2em;
            color: #555;
            line-height: 1.7;
        }

/* BLOG SECTION */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }

.blog-post-card {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            overflow: hidden;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
        }

.blog-post-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

.blog-post-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            display: block;
            border-bottom: 6px solid var(--primary-yellow);
        }

.blog-post-card h3 {
            margin: 25px 25px 15px;
            font-size: 1.7em;
            color: var(--neutral-dark);
        }

.blog-post-card p {
            padding: 0 25px;
            color: #666;
            margin-bottom: 20px;
            font-size: 1.05em;
        }

.blog-post-card .read-more {
            display: inline-block;
            color: var(--primary-yellow);
            text-decoration: none;
            font-weight: 600;
            padding: 0 25px 25px;
            transition: color 0.3s ease, text-decoration 0.3s ease;
        }

.blog-post-card .read-more:hover {
            color: var(--darker-yellow);
            text-decoration: underline;
        }

/* CONTACT SECTION */
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1.8fr; /* Form slightly wider */
            gap: 60px; /* More gap */
            background-color: #fff;
            padding: 50px; /* More padding */
            border-radius: 15px; /* More rounded */
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

.contact-info h3 {
            color: var(--primary-yellow);
            margin-bottom: 30px;
            font-size: 2em;
        }

.contact-info p {
            margin-bottom: 18px;
            font-size: 1.15em;
            color: #444;
        }

.contact-info p strong {
            color: var(--neutral-dark);
        }

.social-icons {
            margin-top: 40px;
            display: flex;
            gap: 20px;
        }

.social-icons a {
            filter: grayscale(100%); /* Desaturate icons */
            transition: filter 0.3s ease, transform 0.3s ease;
        }

.social-icons a:hover {
            filter: grayscale(0%); /* Color on hover */
            transform: scale(1.25);
        }

.social-icons img {
            width: 40px; /* Larger icons */
            height: 40px;
        }

.contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 18px; /* More padding */
            margin-bottom: 25px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-family: 'Poppins', sans-serif;
            font-size: 1.05em;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

.contact-form input:focus,
        .contact-form textarea:focus {
            border-color: var(--primary-yellow);
            outline: none;
            box-shadow: 0 0 0 4px rgba(var(--primary-yellow), 0.2); /* Thicker focus ring */
        }

.contact-form textarea {
            resize: vertical;
            min-height: 150px; /* Taller textarea */
        }

.contact-form button {
            width: auto;
        }

/* FOOTER */
        footer {
            background-color: var(--neutral-dark);
            color: var(--text-color-light);
            text-align: center;
            padding: 40px 0; /* More padding */
            font-size: 0.95em;
            border-top: 5px solid var(--primary-yellow); /* Accent border */
        }

/* ======================================= */
        /* ANIMATIONS (CSS Keyframes and Classes) */
        /* ======================================= */

/* Initial Hero Animation */
        @keyframes fadeInScale {
            0% { opacity: 0; transform: scale(0.95); }
            100% { opacity: 1; transform: scale(1); }
        }

/* General Fade In Up */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animated-fade-in-up {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 1s ease-out, transform 1s ease-out; /* Slower, smoother */
        }
        .animated-fade-in-up.animate {
            opacity: 1;
            transform: translateY(0);
        }

/* Pop In Scale */
        @keyframes popInScale {
            0% { opacity: 0; transform: scale(0.8); }
            80% { transform: scale(1.05); }
            100% { opacity: 1; transform: scale(1); }
        }
        .animated-pop-in {
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .animated-pop-in.animate {
            opacity: 1;
            transform: scale(1);
        }

/* Rotate In (for icons/features) */
        @keyframes rotateIn {
            0% { opacity: 0; transform: rotate(-90deg) scale(0.5); }
            100% { opacity: 1; transform: rotate(0deg) scale(1); }
        }
        .animated-rotate-in {
            opacity: 0;
            transform: rotate(-90deg) scale(0.5);
            transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .animated-rotate-in.animate {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }

/* Image Slide In Left */
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-100px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .animated-slide-in-left {
            opacity: 0;
            transform: translateX(-100px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .animated-slide-in-left.animate {
            opacity: 1;
            transform: translateX(0);
        }

/* Image Slide In Right */
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(100px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .animated-slide-in-right {
            opacity: 0;
            transform: translateX(100px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .animated-slide-in-right.animate {
            opacity: 1;
            transform: translateX(0);
        }

/* Navigation Link Fade (JS controlled delay) */
        @keyframes navLinkFade {
            from { opacity: 0; transform: translateX(50px); }
            to { opacity: 1; transform: translateX(0px); }
        }

/* ======================================= */
        /* RESPONSIVE DESIGN (Media Queries)      */
        /* ======================================= */

/* Tablet and smaller laptops */
        @media (max-width: 1024px) {
            .container {
                padding: 0 30px;
            }

h1 {
                font-size: 3.8em;
            }

h2 {
                font-size: 2.5em;
            }

h3 {
                font-size: 1.6em;
            }

.hero-content p {
                font-size: 1.3em;
            }

nav {
                padding: 20px 30px;
            }
            nav.scrolled {
                padding: 10px 30px;
            }

.nav-links li {
                margin-left: 25px;
            }

.contact-grid {
                grid-template-columns: 1fr;
                gap: 40px;
                padding: 40px;
            }
            .contact-info {
                text-align: center;
            }
            .social-icons {
                justify-content: center;
            }

.section-padding {
                padding: 80px 0;
            }
        }

/* Mobile Devices */
        @media (max-width: 768px) {
            .section-padding {
                padding: 60px 0;
            }

h1 {
                font-size: 2.8em;
            }

h2 {
                font-size: 2.2em;
            }

.hero-content p {
                font-size: 1.1em;
            }

.btn-primary, .btn-secondary {
                padding: 15px 30px;
                font-size: 1em;
            }

nav {
                padding: 15px 20px;
            }
            nav.scrolled {
                padding: 10px 20px;
            }

.logo {
                font-size: 2em;
            }

.nav-links {
                position: fixed;
                right: 0;
                top: 0;
                height: 100vh;
                width: 70%; /* Wider for better touch target */
                background-color: var(--neutral-dark);
                flex-direction: column;
                align-items: center;
                transform: translateX(100%);
                transition: transform 0.5s ease-in;
                z-index: 99;
                justify-content: center;
                padding-top: var(--header-height); /* Push links down from sticky nav */
            }

.nav-links.nav-active {
                transform: translateX(0%);
            }

.nav-links li {
                opacity: 0;
                margin: 28px 0; /* More vertical spacing */
            }

.nav-links li a {
                font-size: 1.6em; /* Larger mobile links */
            }

.burger {
                display: flex;
                z-index: 100;
            }

.burger.toggle .line1 {
                transform: rotate(-45deg) translate(-5px, 6px);
            }
            .burger.toggle .line2 {
                opacity: 0;
            }
            .burger.toggle .line3 {
                transform: rotate(45deg) translate(-5px, -6px);
            }

.about-grid,
            .services-grid,
            .fleet-gallery,
            .features-grid,
            .blog-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }

.testimonial-card {
                padding: 40px 25px;
            }

.accordion-header {
                font-size: 1.2em;
                padding: 18px 25px;
            }
            .accordion-content p {
                padding: 20px 25px;
            }

.contact-grid {
                padding: 30px;
            }

.social-icons img {
                width: 35px;
                height: 35px;
            }
        }

@media (max-width: 480px) {
            .section-padding {
                padding: 40px 0;
            }

h1 {
                font-size: 2.2em;
            }

h2 {
                font-size: 1.8em;
            }

.hero-content p {
                font-size: 1em;
            }

.btn-primary, .btn-secondary {
                padding: 12px 25px;
                font-size: 0.9em;
            }

.logo {
                font-size: 1.8em;
            }

.nav-links {
                width: 85%;
            }
            .nav-links li a {
                font-size: 1.4em;
            }

.about-item, .service-card, .fleet-item, .feature-item, .blog-post-card {
                padding: 25px; /* Reduce padding for smaller cards */
            }
            .service-card img, .fleet-item img, .blog-post-card img {
                height: 200px; /* Smaller image height */
            }
        }

JavaScript

document.addEventListener('DOMContentLoaded', () => {
            // --- 1. Mobile Navigation Toggle & Smooth Scroll ---
            const burger = document.querySelector('.burger');
            const nav = document.querySelector('.nav-links');
            const navLinks = document.querySelectorAll('.nav-links li a');

burger.addEventListener('click', () => {
                nav.classList.toggle('nav-active');
                burger.classList.toggle('toggle'); // Burger animation

// Animate individual nav links with staggered delay
                navLinks.forEach((link, index) => {
                    if (link.style.animation) {
                        link.style.animation = ''; // Reset animation
                    } else {
                        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
                    }
                });
            });

// Close mobile nav when a link is clicked
            navLinks.forEach(link => {
                link.addEventListener('click', (e) => {
                    // Prevent default anchor click behavior
                    e.preventDefault();

const targetId = link.getAttribute('href').substring(1);
                    const targetSection = document.getElementById(targetId);

if (targetSection) {
                        // Smooth scroll to section, accounting for sticky header
                        const headerOffset = document.querySelector('nav').offsetHeight;
                        const elementPosition = targetSection.getBoundingClientRect().top + window.pageYOffset;
                        const offsetPosition = elementPosition - headerOffset - 20; // -20 for extra padding

window.scrollTo({
                            top: offsetPosition,
                            behavior: "smooth"
                        });
                    }

// Close mobile nav
                    if (nav.classList.contains('nav-active')) {
                        nav.classList.remove('nav-active');
                        burger.classList.remove('toggle');
                        navLinks.forEach(item => item.style.animation = ''); // Reset animation
                    }
                });
            });

// --- 2. Sticky Navigation & Active Link Highlighting ---
            const mainNav = document.querySelector('nav');
            const sections = document.querySelectorAll('section[id]');

const options = {
                root: null, // viewport
                rootMargin: `-${mainNav.offsetHeight / 2}px 0px -${mainNav.offsetHeight / 2}px 0px`, // Halfway through section
                threshold: 0 // As soon as section enters/leaves the rootMargin
            };

const observerNav = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    const id = entry.target.getAttribute('id');
                    const navLink = document.querySelector(`.nav-links a[href="#${id}"]`);

if (navLink) {
                        if (entry.isIntersecting) {
                            navLinks.forEach(link => link.classList.remove('active'));
                            navLink.classList.add('active');
                        } else {
                            // Optional: Remove active class when leaving, or keep it for slightly longer based on preference
                            // navLink.classList.remove('active');
                        }
                    }
                });
            }, options);

sections.forEach(section => {
                observerNav.observe(section);
            });

// Sticky header class change
            window.addEventListener('scroll', () => {
                if (window.scrollY > 0) {
                    mainNav.classList.add('scrolled');
                } else {
                    mainNav.classList.remove('scrolled');
                }
            });

// --- 3. Scroll Animations (Intersection Observer) ---
            const animatedElements = document.querySelectorAll(
                '.animated-fade-in-up, .animated-pop-in, .animated-rotate-in, .animated-slide-in-left, .animated-slide-in-right'
            );

const scrollObserverOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.1 // Trigger when 10% of the element is visible
            };

animatedElements.forEach(el => {
                scrollObserver.observe(el);
            });

// Initial check for elements already in viewport on page load
            animatedElements.forEach(el => {
                if (el.getBoundingClientRect().top < window.innerHeight) {
                    el.classList.add('animate');
                    scrollObserver.unobserve(el);
                }
            });

// --- 4. Testimonial Slider ---
            const testimonialSlider = document.querySelector('.testimonial-slider');
            const prevBtn = document.querySelector('.slider-nav .prev-btn');
            const nextBtn = document.querySelector('.slider-nav .next-btn');
            let currentIndex = 0;
            const slides = document.querySelectorAll('.testimonial-card');
            const totalSlides = slides.length;

const updateSlider = () => {
                const slideWidth = slides[0].clientWidth;
                testimonialSlider.scrollTo({
                    left: currentIndex * slideWidth,
                    behavior: 'smooth'
                });
            };

nextBtn.addEventListener('click', () => {
                currentIndex = (currentIndex + 1) % totalSlides;
                updateSlider();
            });

prevBtn.addEventListener('click', () => {
                currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
                updateSlider();
            });

// Add swipe functionality for touch devices
            let touchStartX = 0;
            let touchEndX = 0;

testimonialSlider.addEventListener('touchstart', (e) => {
                touchStartX = e.touches[0].clientX;
            });

testimonialSlider.addEventListener('touchmove', (e) => {
                touchEndX = e.touches[0].clientX;
            });

testimonialSlider.addEventListener('touchend', () => {
                if (touchStartX - touchEndX > 50) { // Swiped left
                    currentIndex = (currentIndex + 1) % totalSlides;
                    updateSlider();
                }
                if (touchEndX - touchStartX > 50) { // Swiped right
                    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
                    updateSlider();
                }
            });

// Auto-slide functionality (Optional, but adds to dynamic feel)
            // setInterval(() => {
            //     currentIndex = (currentIndex + 1) % totalSlides;
            //     updateSlider();
            // }, 7000); // Change slide every 7 seconds

// --- 5. FAQ Accordion ---
            const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
                header.addEventListener('click', () => {
                    const accordionContent = header.nextElementSibling;
                    const isActive = header.classList.contains('active');

// Close all other open accordions
                    accordionHeaders.forEach(otherHeader => {
                        if (otherHeader !== header && otherHeader.classList.contains('active')) {
                            otherHeader.classList.remove('active');
                            otherHeader.setAttribute('aria-expanded', 'false');
                            otherHeader.nextElementSibling.style.maxHeight = 0;
                            otherHeader.nextElementSibling.style.padding = '0 30px';
                        }
                    });

// Toggle current accordion
                    if (isActive) {
                        header.classList.remove('active');
                        header.setAttribute('aria-expanded', 'false');
                        accordionContent.style.maxHeight = 0;
                        accordionContent.style.padding = '0 30px';
                    } else {
                        header.classList.add('active');
                        header.setAttribute('aria-expanded', 'true');
                        accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px';
                        accordionContent.style.padding = '25px 30px'; // Restore padding
                    }
                });
            });
        });

Transport Solutions Template Page Preview

Download Options