style.css

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

body {
  background-color: rgb(20, 19, 19);
  font-family: 'Montserrat', sans-serif; /* Change font to Montserrat */
}

/* Navbar section */
.navbar {
  background-color: #1a1a1a; /* Dark background */
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Logo styling */
.logoContent img {
  width: 60px; 
}

/* Links styling */
.links {
  display: flex;
  gap: 20px;
}

.links a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  padding: 10px 20px;
  transition: 0.3s ease-in-out;
  border-radius: 5px;
  font-size: 16px;
}

.links a:hover {
  background-color: #333; /* Hover effect */
  color: rgb(24, 224, 227);
  box-shadow: 0 0 10px rgba(24, 224, 227, 0.5);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .navbar {
      flex-direction: column;
      align-items: flex-start;
      padding: 10px;
  }

  .links {
      flex-direction: column;
      width: 100%;
      gap: 10px;
  }

  .links a {
      padding: 15px;
      width: 100%;
      text-align: left;
  }
}

/* Slider CSS */
.section {
  position: relative;
  width: 100%; /* Full width */
  overflow: hidden; /* Hide overflow */
}

.slide {
  display: none; /* Hide all slides initially */
  width: 100%; /* Full width */
}

.slide.active {
  display: block; /* Show the active slide */
}

.slide img {
  width: 100%; /* Make the image cover the full width */
  height: auto; /* Maintain aspect ratio */
}

.dots {
  text-align: center;
  position: absolute;
  bottom: 20px; /* Adjust as necessary */
  left: 50%;
  transform: translateX(-50%);
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: #bbb; /* Inactive dot color */
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.dot.active {
  background-color: #717171; /* Active dot color */
}

/* Models Section */
.models {
  padding: 60px 20px; /* Adjust padding for smaller screens */
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap; /* Allow items to wrap on smaller screens */
  gap: 20px; /* Space between items */
}

.model {
  height: 60vh; /* Maintain height */
  width: 100%; /* Full width on smaller screens */
  max-width: 300px; /* Limit the width on larger screens */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align text at the bottom */
  color: white;
  text-align: center;
  border-radius: 10px; /* Rounded corners */
  overflow: hidden; /* Hide overflow */
  transition: transform 0.3s ease; /* Animation on hover */
  position: relative; /* Needed for absolute positioning of overlay */
  background-size: cover; /* Ensure background image covers the model */
  background-position: center; /* Center the image */
}

.one {
  background-image: url(https://i.pinimg.com/564x/d4/bb/69/d4bb697a2941b08ff749fef2f58c51b9.jpg);
}

.two {
  background-image: url(https://i.pinimg.com/564x/ad/93/be/ad93bef33e4630742f13a92005409140.jpg);
}

.three {
  background-image: url(https://i.pinimg.com/564x/08/ae/2f/08ae2fa3f4aa5f7aedd374107a49757d.jpg);
}

.models h1 {
  font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
  font-weight: 600; /* Change font weight for prominence */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
  margin: 20px 0; /* Spacing around text */
}

/* Testimonial Section */
.testimonials {
  padding: 60px 20px; /* Adjust padding */
  background-color: rgb(30, 30, 30); /* Background color for contrast */
  color: white; /* Text color */
  text-align: center; /* Center align text */
}

.testimonials h2 {
  font-size: 2.5rem; /* Heading size */
  margin-bottom: 40px; /* Spacing below heading */
}

/* Container for testimonials */
.testimonial-container {
  display: flex;
  justify-content: center; /* Center align testimonials */
  flex-wrap: wrap; /* Allow wrapping */
  gap: 20px; /* Space between testimonials */
}

/* Individual testimonial styling */
.testimonial {
  background-color: #1a1a1a; /* Dark background for each testimonial */
  border-radius: 10px; /* Rounded corners */
  padding: 20px; /* Padding inside testimonial */
  width: 300px; /* Fixed width for each testimonial */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Shadow for depth */
  transition: transform 0.3s ease; /* Transition for hover effect */
}

.testimonial:hover {
  transform: scale(1.05); /* Scale up on hover */
}

/* Image styling */
.testimonial img {
  width: 80px; /* Adjust image width as needed */
  height: 80px; /* Adjust image height to maintain aspect ratio */
  border-radius: 50%; /* Circular images */
  margin-bottom: 15px; /* Spacing below image */
  object-fit: cover; /* Ensures the image covers the space without distortion */
}

/* Styling for the user's name */
.testimonial h3 {
  margin-top: 10px; /* Spacing above name */
  font-size: 1.2rem; /* Font size for name */
  color: rgb(24, 224, 227); /* Color for name */
}


/* Add overlay effect for better visibility */
.model::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* Dark overlay */
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease; /* Smooth transition for overlay */
}

.model:hover {
  transform: scale(1.05); /* Scale up on hover */
}

.model:hover::before {
  opacity: 1; /* Show overlay on hover */
}
/* performance */
.performance {
  background-color: #121212; /* Darker background */
  color: #f0f0f0; /* Light text color */
  padding: 40px 20px; /* Increased padding for more space */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
  text-align: center; /* Center align text */
  height: 300px; /* Increased height */
}

.spec-box {
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center the items */
  list-style-type: none; /* Remove bullet points */
  padding: 0; /* Remove default padding */
  height: 100%; /* Full height for the flexbox */
  align-items: center; /* Center items vertically */
}

.spec-box li {
  flex: 1; /* Equal width for all items */
  margin: 0 15px; /* Space between items */
  transition: transform 0.3s; /* Animation effect on hover */
}

.spec-box li:hover {
  transform: scale(1.05); /* Slightly scale up on hover */
}

.spec-box p {
  font-size: 1.2rem; /* Increased font size for labels */
  margin-bottom: 10px; /* Space between label and value */
}

.spec-box h1 {
  font-size: 3rem; /* Increased font size for the numbers */
  margin: 0; /* Remove default margin */
}

.spec-box h1 p {
  font-size: 1.2rem; /* Font size for units */
  margin-top: 5px; /* Space above units */
}

.line {
  width: 1px; /* Line width */
  height: 80px; /* Line height */
  background-color: #444; /* Line color */
  margin: 0 15px; /* Space around the line */
}



.counting-animation {
  animation: countUp 1s ease-in-out forwards; /* Animation for counting */
}

@keyframes countUp {
  0% {
      opacity: 0; /* Start invisible */
      transform: translateY(20px); /* Move up */
  }
  100% {
      opacity: 1; /* Fully visible */
      transform: translateY(0); /* Move back to original */
  }
}

/* Footer */
footer {
  background-color: rgb(11, 11, 11);
  padding: 40px 20px;
  color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
}

/* Container for footer sections */
.end {
  display: flex;
  flex: 1;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

/* Styling for each list */
.end ul {
  list-style: none;
  padding: 0;
  margin: 0 20px;
  width: 200px;
}

/* Styling for headings */
h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  border-bottom: 1px solid rgb(24, 224, 227);
  padding-bottom: 5px;
}

/* Styling for list items */
li {
  padding: 8px 0;
  transition: color 0.3s;
}

li:hover {
  color: rgb(24, 224, 227);
}