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

/* Body */
body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  background-color: #000; /* Dark black background */
  color: #fff; /* White text for contrast */
}

/* Navbar Styles */
.navbar {
  position: fixed;
  width: 100%;
  top: 0;
  color: white;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 15px;
  z-index: 10;
}

.navbar .logo {
  position: absolute;
  left: 20px;
}

.navbar .logo a {
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #000;
}

.navbar .call-btn {
  background-color: #f1990b;
  border: none;
  color: white;
  padding: 6px 12px;
  font-size: 1.3rem;
  cursor: pointer;
  position: absolute;
  right: 20px;
  border-radius: 50px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button.call-btn {
  background: linear-gradient(to left, #f1990b, #d35400);
  border: none;
  color: white;
  padding: 12px 25px;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 30px;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

button.call-btn .subtext {
  display: block;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
}

button.call-btn:hover {
  background-color: #e67e22;
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(243, 156, 18, 0.7), 0 0 25px rgba(243, 156, 18, 0.5);
}

.call-btn {
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 10px rgba(241, 153, 11, 0.5); }
  50% { box-shadow: 0 0 20px rgba(241, 153, 11, 0.8); }
  100% { box-shadow: 0 0 10px rgba(241, 153, 11, 0.5); }
}

/* Hero Section */
.hero {
  width: 100vw; /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; 
  backdrop-filter: blur(10px);
}

.hero h1 {
  font-size: 3.4rem;
  font-weight: bold;
  margin-bottom: 15px;
  text-transform: uppercase;
}

h1 span {
  font-weight: bold;
  color: #f1990b; /* Change text color */
}

.hero p {
  font-size: 1.5rem;
  margin-top: -15px;
  margin-bottom: 20px;
  line-height: 1.6;
  max-width: 700px;
  text-align: center;
  font-weight: 300;
}

.hero p span {
  font-size: 1.7rem;
  font-weight: bold;
  color: #f1990b; /* Change text color */
}

/* Section Styles */
.section {
  padding: 20px;
  text-align: center;
  background-color: #222; /* Dark background for sections */
  color: #fff; /* White text */
  border-bottom: 1px solid #444; /* Subtle border to separate sections */
}

h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #f1990b; /* Orange color for headings */
}

h2 span {
  color: #ddd ;
}

ul {
  list-style-type: none;
  margin: 20px 0;
  padding: 0;
  font-size: 1.1rem;
}

li {
  margin: 10px 0;
  padding-left: 20px;
  position: relative;
}

li span {
  font-weight: bold;
  color: #f1990b; /* Highlight important text in paragraphs */
}

p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  line-height: 1.8;
  color: #ddd; /* Slightly lighter text color for regular paragraphs */
  font-weight: 300;
}

p span {
  font-weight: bold;
  color: #f1990b; /* Highlight important text in paragraphs */
}

/* Section 1 */
/* Problem Section Styling */
.problem-section {
  text-align: center;
  background: linear-gradient(to bottom, #111, #222); /* Sleek dark gradient */
}

.problem-section h2 {
  font-size: 2.5rem;
  color: #f1990b;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.problem-section p {
  font-size: 1.3rem;
  max-width: 700px;
  margin: 0 auto 20px;
  color: #ddd;
  font-weight: 300;
}

/* Grid Styling */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 30px auto;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(241, 153, 11, 0.7);
}

/* Section 2 */
.solution-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  gap: 20px; /* Space between cards */
  row-gap: 1px; /* Vertical gap between rows */
  max-width: 900px; /* Keeps it from stretching too wide */
  margin: 0 auto; /* Centers the grid */
  margin-bottom: 10px;
}

.solution-card {
  background: #222; /* Adjust as needed */
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  min-height: 220px; /* Ensures equal height */
  display: flex;
  flex-direction: column;
  justify-content: center
}

.solution-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(241, 153, 11, 0.7);
}

.solution-cards h3 span {
  font-weight: bold;
  color: #f1990b; /* Highlight important text in paragraphs */
}

.solution-card h3 {
  margin-bottom: 5px; /* Adjust the space below the h3 */
}

.solution-card p {
  margin-top: 0; /* Remove the default margin above the p */
}

/* Section 3 Process */
.steps {
  max-width: 1500px; /* Maximum width of 900px */
  width: 100%; /* Allows it to shrink on smaller screens */
  margin: 0 auto; /* Centers the list */
}

.process-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap; /* Ensures responsiveness */
}

.process-card {
  background: rgba(255, 255, 255, 0.1); /* Subtle glass effect */
  border-radius: 12px;
  padding: 10px;
  width: 25%;
  min-width: 200px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(241, 153, 11, 0.7);
}

.process-card h3 {
  font-size: 1.4rem;
}

.step-number {
  color: white;
  font-weight: bold;
}

.step-text {
  color: orange;
  font-weight: bold;
}

.process-card p {
  color: white;
  margin-top: 8px;
  font-size: 1.1rem;
  font-weight: 400;
}

/* Section 4 */
.section4 {
  max-width: 750px; /* Maximum width of 900px */
  width: 100%; /* Allows it to shrink on smaller screens */
  margin: 0 auto; /* Centers the list */
}

/* Section 5 */
/* Testimonials Section - Pure CSS Carousel */
/* Prevent horizontal overflow on the entire page */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.testimonials {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial2 {
  background: #1e1e1e;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 15px;
}

.testimonial2 img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0; /* Prevents image from resizing */
}

.testimonial2 p {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  margin: 0;
}

.testimonial2 h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 1px 0 0;
  color: #ddd;
}

.testimonial2:hover {
  box-shadow: 0 0 15px rgba(241, 153, 11, 0.7);
  transform: translateY(-5px);
}

.stars {
  color: #f1990b; /* Gold color for stars */
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 2px; /* Slight spacing for a clean look */
  margin-bottom: -5px;
  text-align: center;
}

.testimonial p {
  margin-top: 1px; /* Reduced space between stars and review text */
  margin-bottom: 1px; /* Reduced space between review text and name */
}

.testimonial span {
  display: block;
  font-weight: bold;
  color: #ddd;
  margin-top: 1px; /* Reduce space between text and name */
}

.testimonial {
  width: 10%; /* Each testimonial takes up 1/10 of the container's width */
  padding: 10px;
  text-align: center;
}

.testimonial-carousel {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.testimonial-container {
  display: flex;
  width: 1000%; /* 10 testimonials */
  animation: carousel 70s infinite linear alternate;
}

/* Animation */
@keyframes carousel {
  0% { transform: translateX(0%); }  
  10% { transform: translateX(-10%); }  
  20% { transform: translateX(-20%); }  
  30% { transform: translateX(-30%); }  
  40% { transform: translateX(-40%); }  
  50% { transform: translateX(-50%); }  
  60% { transform: translateX(-60%); }  
  70% { transform: translateX(-70%); }  
  80% { transform: translateX(-80%); }  
  90% { transform: translateX(-90%); }  
  100% { transform: translateX(-100%); }
}

/* Section 6 */
.section6 {
  padding-left: 0; /* Removes default left padding */
  max-width: 900px; /* Maximum width of 900px */
  width: 100%; /* Allows it to shrink on smaller screens */
  margin: 0 auto; /* Centers the list */
  text-align: center; /* Aligns the list items to the left */
}

/* Footer */
.footer {
  background-color: #222;
  padding: 5px 0; /* Adjust padding for better spacing */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-content {
  max-width: 900px; /* Limit the max width */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer p {
  color: #ddd;
  font-size: 0.9rem;
  margin: 0; /* Remove margin */
}

/* Media Query for Mobile */
@media (max-width: 768px) {
  
  .hero h1 {
    font-size: 2.5rem;
    max-width: 400px;
  }

  .hero p {
    font-size: 1.3rem;
  }

  .hero p span{
    font-size: 1.5rem;
  }

  .navbar .call-btn {
    animation: none;
  }

  .section {
    padding: 40px 20px;
  }

  h2 {
    font-size: 2rem;
  }

  .problem-section h2 {
    font-size: 2rem;
  }

  .solution-cards {
    grid-template-columns: 1fr; /* Stack cards in one column on smaller screens */
  }

  .phone-number {
    display: none;  /* Hide the phone number on mobile */
  }

  .process-container {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .process-card {
    width: 90%;
  }

  .footer p {
    font-size: 0.75rem;
  }

}