* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background: #000000;
            color: #ffffff;
            line-height: 1.6;
            scroll-behavior: smooth;
        }

        /* Navigation */
        nav {
            position: fixed;
            width: 100%;
            padding: 1.5rem 5%;
            background: rgba(0,0,0,0.97);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            border-bottom: 1px solid #333;
        }

		/** logo **/
       .logo {
            font-size: 1.8rem;
            font-weight: bold;
            letter-spacing: -0.5px;
            color: #fff;
        }
		
		.logo-icon {
		  width: 1.2em;
		  height: 1.2em;
		  margin-right: 0.8rem;
		}
		
		.logo i {
		  animation: float 3s ease-in-out infinite;
		}
		
		.logo img {
		  animation: float 3s ease-in-out infinite;
		}
		
		@keyframes float {
		  0%, 100% { transform: translateY(0); }
		  50% { transform: translateY(-5px); }
		}
		
		/** navigation **/
        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: #ffffff;
            text-decoration: none;
            font-weight: 500;
            transition: opacity 0.3s;
        }

        .nav-links a:hover {
            opacity: 0.8;
        }

        /* Mobile Menu */
        .menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
            color: #fff;
        }

        /* Hero Section */
        .hero {
            padding: 12rem 5% 6rem;
            text-align: center;
            background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)),
                        url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
            background-size: cover;
            background-position: center;
        }

        .hero h1 {
            font-size: 2.8rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .hero p {
            font-size: 1.1rem;
            color: #cccccc;
            max-width: 800px;
            margin: 0 auto 2.5rem;
        }

        .cta-button {
            display: inline-block;
            background: #ffffff;
            color: #000000;
            padding: 1rem 2.5rem;
            border-radius: 2rem;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255,255,255,0.2);
        }


        /* Content Sections */
        .section {
            padding: 5rem 5%;
        }

        .section-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 3rem;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .card {
            padding: 2rem;
            border-radius: 1rem;
            background: #111111;
            border: 1px solid #333;
            transition: transform 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .feature-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 1rem;
            margin-bottom: 1.5rem;
            border: 1px solid #333;
        }

/* Partner Integrations Section - Hero Slider Version */
.integrations-wrapper {
  overflow: hidden;
  position: relative;
  padding: 4rem 0;
  background: #000;
}

.integrations-marquee {
  display: flex;
  width: 200%;
  animation: marquee 40s linear infinite;
}

@media (hover: hover) {
  .integrations-marquee:hover {
    animation-play-state: paused;
  }
}

.integrations-row {
  display: flex;
  align-items: center;
  justify-content: center; /* Center logos vertically */
  width: 50%;
  gap: 4rem; /* Increased gap between logos */
  padding: 2rem 0;
}


.integration-logo {
  height: 80px; /* Increased from 40px */
  filter: grayscale(1) brightness(1.5);
  opacity: 0.8;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
  /* transition: all 0.4s, filter 0.2s, opacity 0.2s; */
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.integration-logo:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.8) translateY(-10px); /* Bigger hover effect */
  z-index: 2;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* Hero Slider Animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .integrations-wrapper {
    padding: 2rem 0;
  }
  
  .integrations-row {
    gap: 2rem;
  }
  
  .integration-logo {
    height: 50px; /* Adjusted mobile size */
  }
  
  .integration-logo:hover {
    transform: scale(1.4) translateY(-5px); /* Smaller hover on mobile */
  }
}

/* Desktop Enhancements */
@media (min-width: 1200px) {
  .integrations-row {
    gap: 6rem;
  }
  
  .integration-logo {
    height: 100px; /* Extra large on big screens */
  }
  
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-45%); } /* Slower movement */
  }
}

/* Add Perspective Effect */
.integrations-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(0,0,0,1) 0%, 
    rgba(0,0,0,0) 15%, 
    rgba(0,0,0,0) 85%, 
    rgba(0,0,0,1) 100%
  );
  z-index: 1;
  pointer-events: none;
}


        /* Pricing Section */
		/* Pricing Cards */
		.price-card {
			text-align: center;
			padding: 2rem;
		}
		
		.price-card .cta-button {
			display: block;
			margin: 1.5rem auto 0;
			min-width: 180px;
			width: fit-content;
			padding: 0.8rem 2rem;
		}

		@media (max-width: 1024px) {
			.price-card .cta-button {
				padding: 0.7rem 1.5rem;
				min-width: 160px;
			}
		}

		@media (max-width: 768px) {
			.price-card .cta-button {
				width: 100%;
				max-width: 200px;
				padding: 0.6rem 1rem;
			}
		}

        .price {
            font-size: 2.5rem;
            margin: 1rem 0;
        }

        /* Contact Form */
        .contact-form {
            max-width: 600px;
            margin: 0 auto;
        }
		

        input, textarea {
            width: 100%;
            padding: 1rem;
            margin: 1rem 0;
            background: #111;
            border: 1px solid #333;
            color: #fff;
            border-radius: 0.5rem;
        }

        /* Footer */
        footer {
            padding: 4rem 5%;
            text-align: center;
            background: #111111;
            border-top: 1px solid #333;
        }

        /* Mobile Styles */
        @media (max-width: 768px) {
            .nav-links {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: #111;
                flex-direction: column;
                gap: 0;
                max-height: 0; 
                overflow: hidden;
                transition: max-height 0.3s ease-out;
                padding: 0 5%;
            }

            .nav-links.active {
                max-height: 600px;
                padding: 1rem 5%;
            }

            .nav-links a {
                padding: 1rem 0;
                border-bottom: 1px solid #333;
            }

            .menu-toggle {
                display: block;
            }

            .hero h1 {
                font-size: 2rem;
            }

            .grid-3 {
                grid-template-columns: 1fr;
            }
        }
		
		/* Optimized Image Sizes */
		.feature-image {
		    width: 100%;
		    max-width: 400px;
		    height: auto;
		    border-radius: 1rem;
		    margin: 0 auto 1.5rem;
		    display: block;
		}
				
		/* About Us Section */
	    /* About Us Section */
	    .about-container {
	        display: grid;
	        grid-template-columns: 1fr 1fr;
	        gap: 3rem;
	        align-items: center;
	        max-width: 1200px;
	        margin: 0 auto;
	    }
	
	    .map-container {
	        position: relative;
	        width: 100%;
	        height: 0;
	        padding-bottom: 56.25%; /* 16:9 aspect ratio */
	        border-radius: 1rem;
	        overflow: hidden;
	        box-shadow: 0 10px 30px rgba(255,255,255,0.05);
	        border: 1px solid #333;
	    }
	
	    .map-container iframe {
	        position: absolute;
	        top: 0;
	        left: 0;
	        width: 100%;
	        height: 100%;
	        border: 0;
	    }
	
	    .about-content {
	        /* padding: 0 2rem; */
	    }
	
	    .about-heading {
	        font-size: 2rem;
	        margin-bottom: 1.5rem;
	        color: #fff;
	    }
	
	    .about-text {
	        font-size: 1.1rem;
	        line-height: 1.8;
	        color: #ccc;
	        margin-bottom: 2rem;
	    }
	
	    .about-points {
	        display: grid;
	        gap: 1.5rem;
	        margin-bottom: 3rem;
	    }
	
	    .about-point {
	        display: flex;
	        gap: 1.2rem;
	        align-items: center;
	        background: rgba(255,255,255,0.05);
	        padding: 1.2rem;
	        border-radius: 0.8rem;
	        transition: transform 0.3s;
	    }
	
	    .about-point:hover {
	        transform: translateX(10px);
	    }
	
	    .about-point i {
	        font-size: 1.8rem;
	        color: #fff;
	        min-width: 40px;
	    }
	
	    /* Responsive Design */
	    @media (max-width: 1024px) {
	        .about-container {
	            gap: 2rem;
	        }
	        
	        .about-heading {
	            font-size: 1.8rem;
	        }
	    }
	
	    @media (max-width: 768px) {
	        .about-container {
	            grid-template-columns: 1fr;
	            padding: 0 1rem;
	        }
	        
	        .map-container {
	            max-width: 600px;
	            margin: 0 auto 2rem;
	        }
	        
	        .about-heading {
	            font-size: 1.6rem;
	            text-align: center;
	        }
	        
	        .about-text {
	            text-align: center;
	            font-size: 1rem;
	        }
	        
	        .about-points {
	            gap: 1rem;
	        }
	        
	        .cta-button {
	            width: 100%;
	            max-width: 300px;
	            margin: 0 auto;
	        }
			
			.cta-button2 {
			  padding: 12px 24px;
			  font-size: 1rem;
			  border-radius: 30px;
			  background: #000;
			  color: #fff;
			  border: none;
			  cursor: pointer;
			}
			
	    }
	
	    @media (max-width: 480px) {
	        .about-point {
	            flex-direction: column;
	            text-align: center;
	        }
	        
	        .about-point i {
	            margin-bottom: 0.5rem;
	        }
	        
	        .map-container {
	            padding-bottom: 75%; /* Taller aspect ratio for mobile */
	        }
	    } 
		
		/* Company Profile Styles */
		.profile-container {
		  /* max-width: 1200px; */
		  margin: 0 auto;
		  /* padding: 0 1rem; */ /* Adds breathing room on mobile */
		}

		.profile-card {
		  display: grid;
		  grid-template-columns: 1fr; /* Stack columns on mobile first */
		  gap: 1.5rem;
		  background: #111;
		  border-radius: 1rem;
		  padding: 1.5rem;
		  margin-bottom: 2rem;
		  border: 1px solid #333;
		}

		/* Tablet & Desktop Layout */
		@media (min-width: 768px) {
		  .profile-card {
			grid-template-columns: 1fr 1fr; /* 2 columns only on larger screens */
			gap: 2rem;
			padding: 2rem;
		  }
		}

		.profile-image {
		  width: 100%;
		  height: 300px; /* Set fixed height for consistency */
		  border-radius: 1rem;
		  object-fit: cover;
		  transition: transform 0.3s ease;
		}
		
		.profile-image:hover {
		  transform: scale(1.02);
		}
		
		/* Mobile Image Adjustment */
		@media (max-width: 767px) {
		  .profile-image {
			height: 250px; /* Smaller height for mobile */
			order: -1; /* Move image above text on mobile */
		  }
		}

		.stats-grid {
		  display: grid;
		  grid-template-columns: 1fr; /* Single column on mobile */
		  gap: 1rem;
		  margin-top: 1.5rem;
		}

		/* Tablet & Desktop Stats Grid */
		@media (min-width: 480px) {
		  .stats-grid {
			grid-template-columns: repeat(3, 1fr); /* 3 columns on larger screens */
		  }
		}

		.stat-item {
		  text-align: center;
		  padding: 1rem; /* Reduced padding for mobile */
		  background: #000;
		  border-radius: 0.5rem;
		}

		.stat-number {
		  font-size: 1.75rem; /* Smaller font for mobile */
		  font-weight: bold;
		  color: #fff;
		}

		.stat-label {
		  color: #888;
		  font-size: 0.85rem; /* Adjusted for mobile */
		}

		/* Mobile Font Adjustments */
		@media (min-width: 768px) {
		  .stat-number {
			font-size: 2rem; /* Original size on desktop */
		  }
		  .stat-label {
			font-size: 0.9rem;
		  }
		}
		
		.timeline-card {
		    background: #111;
		    padding: 2rem;
		    border-radius: 1rem;
		    margin: 2rem 0;
		    border: 1px solid #333;
		}
		
		.timeline {
		    position: relative;
		    padding-left: 2rem;
		    margin-top: 2rem;
		}
		
		.timeline::before {
		    content: '';
		    position: absolute;
		    left: 7px;
		    top: 0;
		    height: 100%;
		    width: 2px;
		    background: #333;
		}
		
		.timeline-event {
		    position: relative;
		    margin-bottom: 2rem;
		    padding-left: 2rem;
		}
		
		.event-date {
		    position: absolute;
		    left: -2.5rem;
		    top: 0;
		    background: #000;
		    padding: 0.5rem 1rem;
		    border-radius: 1rem;
		    border: 1px solid #333;
		}
		
		/* Optional: Adjust grid for better mobile display */
		.team-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 2rem;
			margin-top: 2rem;
		}
		
		h3.department-title {
			margin-top: 2rem;
		}
/* 		.member-photo {
			width: 150px;
			height: 150px;
			border-radius: 50%;
			object-fit: cover;
			margin-bottom: 1rem;
			border: 2px solid #333;
			transition: transform 0.3s ease;
		}

		.member-photo:hover {
			transform: scale(1.05);
		} */
		
		.member-photo {
		    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
		    transition: transform 0.3s ease, filter 0.3s ease;
		}
		
		.member-photo:hover {
		    transform: scale(1.1);
		    filter: drop-shadow(0 4px 8px rgba(255,255,255,0.2));
		}
		

		@media (max-width: 768px) {
			.team-grid {
				grid-template-columns: repeat(2, 1fr));
				gap: 1rem;
			}
			
			.member-photo {
				width: 120px;
				height: 120px;
			}
		}

		@media (max-width: 480px) {
			.team-grid {
				grid-template-columns: 1fr;
			}
			
			.team-member {
				text-align: center;
				margin-bottom: 2rem;
			}
		}	
		
		/* Drivers Team Specific Styles */
		.drivers-team .team-grid {
		    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		    gap: 1rem;
		}
		
		.drivers-team .member-photo {
		    width: 100px;
		    height: 100px;
		    border: 2px solid #555;
		}
		
		.drivers-team h4 {
		    font-size: 0.95rem;
		}
		
		.drivers-team p {
		    font-size: 0.8rem;
		    color: #888;
		}
		
		@media (max-width: 768px) {
		    .drivers-team .team-grid {
		        grid-template-columns: repeat(3, 1fr);
		    }
		}
		
		@media (max-width: 480px) {
		    .drivers-team .team-grid {
		        grid-template-columns: repeat(2, 1fr);
		    }
		}
		
		/* Contact Section */
		.contact-container {
		    display: grid;
		    grid-template-columns: 1fr;
		    gap: 2rem;
		    max-width: 2400px;
		    margin: 0 auto;
		    padding: 0 1rem;
		}
		
		.contact-map {
		    border-radius: 1rem;
		    overflow: hidden;
		    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
		}
		
		.map-container {
		    position: relative;
		    padding-bottom: 56.25%; /* 16:9 aspect ratio */
		    height: 0;
		}
		
		.map-container iframe {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    border: 0;
		}
		
		.contact-info {
		    display: grid;
		    gap: 1.5rem;
		}
		
		.contact-card {
		    background: #111;
		    border-radius: 1rem;
		    padding: 1.5rem;
		    border: 1px solid #333;
		    display: flex;
		    flex-direction: column;
		    gap: 1rem;
		}
		
		.contact-icon {
		    font-size: 1.8rem;
		    color: #fff;
		    text-align: center;
		}
		
		.contact-content h3 {
		    margin-bottom: 1rem;
		    color: #fff;
		    font-size: 1.3rem;
		}
		
		.address {
		    color: #aaa;
		    line-height: 1.6;
		    margin-bottom: 1rem;
		    font-size: 0.95rem;
		}
		
		.contact-numbers li {
		    margin-bottom: 0.8rem;
		    color: #ccc;
		    font-size: 0.95rem;
		}
		
		.contact-numbers a {
		    color: #fff;
		    text-decoration: none;
		    transition: color 0.3s;
		}
		
		.contact-numbers a:hover {
		    color: #4a90e2;
		}
		
		.business-hours,
		.emergency-contact {
		    margin-top: 1.5rem;
		    padding-top: 1.5rem;
		    border-top: 1px solid #333;
		}
		
		.emergency-contact p {
		    color: #e74c3c;
		    font-weight: 600;
		}
		
		/* Medium screens (tablets) */
		@media (min-width: 768px) {
		    .contact-container {
		        grid-template-columns: 1fr 1fr;
		        gap: 3rem;
		        padding: 0 2rem;
		    }
		    
		    .contact-card {
		        flex-direction: row;
		        padding: 2rem;
		        gap: 1.5rem;
		    }
		    
		    .contact-icon {
		        min-width: 50px;
		        text-align: left;
		    }
		    
		    .contact-content h3 {
		        font-size: 1.4rem;
		    }
		    
		    .address {
		        font-size: 1rem;
		    }
		}
		
		/* Large screens (desktops) */
		@media (min-width: 1024px) {
		    .contact-container {
		        gap: 4rem;
		        padding: 0;
		    }
		    
		    .contact-card {
		        padding: 2.5rem;
		    }
		    
		    .contact-content h3 {
		        font-size: 1.5rem;
		    }
		    
		    .address {
		        font-size: 1.05rem;
		    }
		}
		
		/* Mobile landscape */
		@media (max-width: 767px) and (orientation: landscape) {
		    .contact-card {
		        padding: 1rem;
		    }
		    
		    .contact-icon {
		        font-size: 1.5rem;
		    }
		}
		
		/* Very small screens */
		@media (max-width: 480px) {
		    .section {
		        padding: 3rem 1rem;
		    }
		    
		    .contact-card {
		        padding: 1rem;
		    }
		    
		    .contact-icon {
		        font-size: 1.5rem;
		    }
		    
		    .contact-content h3 {
		        font-size: 1.2rem;
		    }
		}