@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Space+Grotesk:wght@300..700&display=swap");

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

h1,
h2 {
  font-family: "Space Grotesk", sans-serif;
}

.tech {
  background: linear-gradient(90deg, #2c9055 12.42%, #b8505a 91.81%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Space Grotesk";
  font-size: 54px;
  font-style: normal;
  font-weight: 700;
  line-height: 65px;
}

.navbar {
  background-color: #164343;
  padding: 1rem 2rem;
  margin-top: 1rem;
  border-radius: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar img {
  width: 80px;
}

.nav-items {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-items a {
  color: white;
  text-decoration: none;
}

.nav-items a:hover {
  color: #2c9055;
}

.nav-items2 {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-items2 a {
  color: white;
  text-decoration: none;
}

.nav-items2 a:hover {
  color: #2c9055;
}

.contact-btn {
  background-color: #ffffff;
  color: #164343;
  padding: 0.75rem 2rem;
  border-radius: 1.5rem;
  text-decoration: none;
}

.contact-btn:hover {
  background-color: #2c9055;
  color: white;
}

.menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.contact-container {
  display: flex;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .tech {
    font-size: 2.1rem;
  }

  .navbar {
    background-color: #ffffff;
  }

  .list2 {
    padding: 0px 24px;
  }

  .nav-items {
    display: none;
    background-color: #164343;
    flex-direction: column;
    padding: 1.3rem 0rem;
    border-radius: 12px;
    gap: 1rem;
    width: 100%;
    text-align: center;
  }

  .nav-items.active {
    display: flex;
  }

  .nav-items2 {
    margin-bottom: 24px;
    display: none;
    background-color: #164343;
    flex-direction: column;
    padding: 1.3rem 1rem;
    border-radius: 12px;
    gap: 1rem;
    width: 100%;
  }

  .nav-items2.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
    color: #164343;
  }

  .contact-container {
    display: none;
  }
}


.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 90%;
  height: 80%;
  object-fit: cover;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
}