body {
    font-family: 'Poppins', sans-serif;
    background-color: #F7FCF4;
    margin: 0;
    padding: 0;
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F7FCF4;
    padding: 1rem 3rem;
}
.logo img {
    height: 40px;
}
nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    padding: 0;
    margin: 0;
}
nav ul li {
    display: inline;
}
nav ul li a {
    text-decoration: none;
    color: #2D1D74;
    font-weight: 600;
    font-size: 1rem;
}
.contact-btn {
    background-color: #2D1D74;
    color: white;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
}

.branches-btn {
  background-color: #2D1D74;
  color: white;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
}

.order-btn {
  background-color: #2D1D74;
  color: white;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
}

/* Main, Hero Page */
.hero-section {
    position: relative;
    /* The content will be stacked above the background */
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('Videos/slideshow2.gif');
    background-size: cover;
    background-position: center;
    z-index: 0; /* Keeps the background behind everything */
}

.hero-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Apply the opacity only here */
    z-index: 0; /* Ensures the overlay is behind the image */
}

.hero {
    position: relative; /* The hero content stays above the background */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    z-index: 1; /* Keeps the content above the background and overlay */
}
.hero-text h1{
  color: #2D1D74;
  font-weight: 100px;
  font-size: 37px;
}
.hero-text h3, .hero-text h1, .hero-text p {
    color: #2D1D74;
}


.hero-image .pc-image {
    width: 350px;
    height: 350px;
    border-radius: 10px;
}

.contact-btn {
    background-color: #2D1D74;
    padding: 10px 20px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
}

/* Branches */
.branches {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  z-index: 1;
}
.branch-text h1{
color: #2D1D74;
font-weight: 100px;
font-size: 37px;
}
.branch-text h1, .branch-text p {
  color: #2D1D74;
}
.branch-image .pc-image {
  width: 500px;
  height: 350px;
  padding: 60px;
  border-radius: 10px;
}


  /* Order */
  .Order-Process {
    background-color: #22184D;
    justify-content: center;
    align-items: center;
  }
  
  .order{
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 50px ;
  }

  .order-process-btn{
    justify-content: center;
    text-align: center;
  }
  .ordertext{
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 50px ;
  }

  .order img{
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 50px ;
  }
  .order h1{
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fffffD;
  }

  /*footer*/

  footer {
    padding: 50px 30px;
    border-radius: 20px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .footer-image {
    width: 350px;
    height: 350px;
    border-radius: 10px;
  }
  
  .footer-content {
    display: flex;
    justify-content: space-between;
  }

  .cright{
    color: #898989;
    justify-content: center;
    text-align: center;
  }
  .footer-left h3 span,
  .footer-left p,
  .footer-center ul li,
  .footer-right p {
    color: #2D1D74;
    text-decoration: none;
  }
  
  .footer-left,
  .footer-center,
  .footer-right {
    width: 30%;
    text-decoration: none;
  }
  
  .footer-center ul {
    list-style: none;
    text-decoration: none;
  }
  
  .footer-center ul li {
    margin-bottom: 10px;
    text-decoration: none;
  }
  
  .footer-center ul li a:hover {
    color: #22184D;
  }
  
  /* Add this to remove underline from links */
  footer a {
    text-decoration: none;
    color: #22184D;
  }


  .social-icons i {
    margin: 0 5px;
    font-size: 1.5em;
  }
  
  .social-icons i {
    color: #22184D;
    font-size: 1.5em;
  }
  
  .social-icons a {
    color: #22184D;
    margin: 0 10px;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .social-icons a:hover {
    color: #ffffff;
  }

  .lanuevalogo img {
    height: 30px;
}


  
  /* Mobile Specific Styles */
  @media (max-width: 768px) {
    /* Navbar */
    nav {
      flex-direction: column;
      align-items: center; /* Center nav items */
      padding: 1rem;
      text-align: center;
    }
  
    nav ul {
      flex-direction: row; /* Stack items vertically */
      gap: 1.5rem;
      padding: 0;
      margin: 0;
    }
  
    /* Logo */
    .logo img {
      height: 50px;
      align-items: center;
      padding: 20px;
    }
  /* Buttons */
  .contact-btn,
  .order-btn,
  .branches-btn {
    width: 100%; /* Full-width buttons */
    text-align: center;
    margin-top: 10px;
  }

  /* Hero Section */
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    align-items: center; /* Center content */
  }

  .hero-text h1 {
    font-size: 28px; /* Resize for better fit */
  }

  .hero-image .pc-image {
    width: 60%; /* Scale the image to fit the screen width */
    height: auto;
  }

  /* Branches Section */
  .branches {
    flex-direction: column;
    text-align: center;
    align-items: center; /* Center content */
  }

  .branch-image .pc-image {
    width: 100%; /* Full width on mobile */
    height: auto;
    padding: 0;
  }

  /* Order Process Section */
  .Order-Process {
    background-color: #22184D;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 5px;
  }

  .order {
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 10px;
    margin-top: 3px;
  }

  .order-process-btn {
    justify-content: center;
    text-align: center;
    padding: 20px;
  }

  .order h1 {
    font-size: 20px;
  }

  .order img {
    width: 100%;
    height: auto;
    margin: 0;
  }

  /* Footer Section */
  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-content {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .footer-left, .footer-center, .footer-right {
    width: 100%;
    text-align: center; /* Center content */
  }

  .footer-center ul {
    list-style: none;
    text-decoration: none;
    padding: 0;
  }

  .footer-center ul li {
    margin-bottom: 10px;
  }

  /* Social Icons */
  .social-icons {
    justify-content: center;
    display: flex;
    gap: 15px;
    padding: 10px;
  }
}