@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

* {
  margin: 0px;
  padding: 0px;
  font-family: poppins;
}

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

li > a {
  color: white !important;
}

.bg-img {
  /* The image used */
  background-image: url("src/vts1.png");

  height: 100vh;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Needed to position the navbar */
  position: relative;
}

.logo {
  font-weight: 600;
  color: #fff !important;
}

.navbar-toggler-icon {
  color: #28d3e2 !important;
}

.nav-active {
  background-color: #fff;
  color: #545454 !important;
}

.logo-active {
  color: #545454 !important;
}

/* .navbar-default {
  color:#ffffff !important;
} */

.about-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.about {
  margin-top: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.about-div > p {
  text-align: center;
  padding-top: 100px;
}

.about > h1 {
  font-weight: 700;
  font-size: 3.3rem;
}

.about > h3 {
  font-weight: 600;
  font-size: 2.2rem;
}

.about-us-dev {
  margin: 20px;
  margin-top: 3.5rem;
  background-color: #28d3e2;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  position: relative;
}

.about-us-dev > h2 {
  padding: 50px 10px 20px;
  font-weight: 700;
  font-size: 2.4rem;
}

.about-us-dev > h4 {
  padding: 20px;
  font-weight: 500;
  font-size: 2rem;
  text-align: center;
}

.about-us-dev > p {
  padding: 30px 80px;
  text-align: justify;
  padding-bottom: 80px;
}

/* .about-video {
  position: absolute;
  bottom: -250px;
} */

/* .about-video > iframe {
    border-radius: 8px;
  border: none;
  outline: none;
} */

/* sister-company */

.sister-company {
  margin-top: 3.5rem;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sister-company > h2 {
  padding: 70px 10px 70px;
  font-weight: 700;
  font-size: 2.4rem;
}

.sisters {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 100px;
  width: 60%;
}
/* 
.sisters {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 20px; 
  margin-top: 30px;
  margin-bottom: 100px;
  width: 60%;
} */

.sisters > img {
  width: 30%; /* Use percentage for dynamic scaling */
  max-width: 250px; /* Prevent images from exceeding their max width */
}

/* certificates */

.certificates {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.item > img {
  width: 300px;
  height: 100%;
}

.certificates > h2 {
  padding: 70px 10px 70px;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
}

/* design and development  */

.development {
  margin-top: 80px;
  margin-bottom: 50px;
}

.development > h2 {
  padding: 70px 10px 70px;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
}

.dev-items {
  margin-top: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

.dev-item {
  width: 200px;
  background-color: #28d3e2;
  color: #fff;
  height: 250px;
  text-align: center;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding: 10px 25px;
  border-radius: 5px;
  /* box-shadow: 4px 4px #f5f5f5; */
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2);
  font-weight: 500;
}

/* infra  */

.infra {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Make it responsive */
  justify-content: center; /* Center the items */
  align-items: flex-start; /* Align items vertically */
  text-align: center;
  background-color: #f8f8f8;
  margin: 100px auto 40px;
  padding: 40px 20px; /* Fixed padding */
  gap: 70px;
}

.infra-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 500px; /* Prevents text from stretching too wide */
  padding: 20px;
  /* background: white; */
  /* border-radius: 10px; */
  /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); */
}

.infra-div > h2 {
  font-weight: 700;
  font-size: 2.2rem;
  padding: 20px 0;
  color: #333;
}

.infra-div > h3 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #666;
  padding: 10px 0;
}

.infra-div > h1 {
  font-weight: 700;
  font-size: 2rem;
  padding: 20px 0;
  /* color: #007bff; */
}

@media (max-width: 768px) {
  .infra {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .infra-div {
    width: 90%;
  }
}

/* casting and foregin  */

.parts-dec {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 20px auto;
}

.parts > h2 {
  padding: 70px 10px 70px;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
}

#casting-parts {
  background-color: #f8f8f8;
  margin-top: 100px;
  padding-bottom: 80px;
}

.casting-img {
  padding-right: 100px;
}

.parts-items > ul > li {
  font-weight: 500;
  list-style-type: circle;
}

/* type of products  */

.type-of-products {
  margin-top: 40px;
  margin-bottom: 80px;
}

.type-of-products > h2 {
  padding: 70px 10px 70px;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
}

.list-of-product {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

.products-dec > h3 {
  font-size: 1.2rem;
  padding-bottom: 30px;
  font-weight: 600;
}

.products-dec > ul > li {
  list-style-type: none;
  padding: 8px 10px;
  font-weight: 500;
  color: #545454;
}

/* contact link  */

.contact-link {
  background-color: #28d3e2;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 90px;
  margin-bottom: 10px;
}

.contact-focus > h2 {
  font-size: 2rem;
  font-weight: 400;
}

.contact-focus > h3 {
  padding-top: 8px;
  font-size: 1rem;
  font-weight: 600;
}

.contact-btn {
  border: 1px solid #fff;
  color: #fff;
  background-color: #28d3e2;
  font-weight: 500;
  padding: 8px 35px;
  border-radius: 4px;
  outline: none;
}

@media screen and (max-width: 1027px) {
  .navbar {
    background-color: #fff !important;
    color: #545454 !important;
  }

  /* .navbar-toggler{
    margin-right: 20px;
  } */

  .logo {
    color: #545454 !important;
  }

  .nav-link {
    color: #545454 !important;
    font-weight: 500;
  }

  .nav-item {
    margin: 1px auto;
  }

  .db {
    width: 100%;
  }
}

/* tablet   */

@media screen and (max-width: 870px) {
  .about-div {
    top: 45%;
  }

  .about > h1 {
    text-align: center;
    font-size: 2.5rem;
  }

  .about > h3 {
    text-align: center;
  }

  .about-div > p {
    padding-top: 20px;
  }

  .about-us-dev > p {
    padding: 30px 62px;
  }

  .item {
    margin-bottom: 30px;
  }

  /* sisters  */

  /* .sister-company > img {
  width: 350px;
} */

  .sisters > img {
    width: 250px;
  }

  .sisters {
    width: 100%; /* Adjust the container width for smaller screens */
    gap: 15px; /* Adjust spacing */
  }

  /* .sisters > img {
  width: 45%; 
  max-width: 200px;
} */

  /* dev & design  */

  .development {
    margin-top: 50px;
  }

  .dev-items {
    flex-wrap: wrap;
  }

  .dev-item {
    margin-top: 15px;
    width: 310px;
  }

  /* parts  */

  .parts-img > img {
    width: 300px;
  }

  .casting-img {
    padding-right: 0px;
  }

  /* type of products  */

  .products-dec {
    font-size: 14px;
  }
}

/* mobile  */

@media screen and (max-width: 560px) {
  .heading {
    font-size: 2rem !important;
    padding: 70px 10px 50px !important;
  }

  .about > h1 {
    text-align: center;
    font-size: 2.1rem;
  }

  .about > h3 {
    text-align: center;
    font-size: 1rem;
  }

  .about-div > p {
    padding-top: 60px;
    font-size: 15px;
  }

  .about-us-dev > p {
    padding: 30px 30px;
    font-size: 13px;
  }

  .item {
    margin-bottom: 30px;
  }

  .item > h3 {
    padding: 20px;
    font-weight: 600;
  }

  /* dev & design  */

  .development {
    margin-top: 50px;
  }

  .sister-company {
    align-items: center;
  }

  .sister-company > img {
    width: 300px;
  }

  .sisters {
    flex-direction: column;
    justify-items: center;
    align-items: center;
  }

  /* .sisters {
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    gap: 15px; 
  } */

  .sisters > img {
    width: 80%; /* Make images responsive */
    max-width: 300px; /* Prevent them from becoming too large */
  }

  .item {
    flex-direction: column-reverse;
  }

  .item:nth-child(odd) {
    flex-direction: column;
  }

  .dev-items {
    flex-wrap: wrap;
  }

  .dev-item {
    margin-top: 10px;
  }

  .parts-dec {
    flex-direction: column-reverse;
    /* justify-content: center; */
    /* align-items: flex-start; */
  }

  .parts-dec:nth-child(odd) {
    flex-direction: column;
  }

  .parts-img > img {
    width: 300px;
    margin: 20px auto;
  }

  .parts-items {
    margin: 10px 0px;
  }

  .casting-img {
    padding-right: 0px;
  }

  .list-of-product {
    flex-direction: column;
  }

  .products-dec > h3 {
    font-size: 15px;
    padding: 10px 20px;
  }

  /* .navbar > .container-fluid {
    justify-content: space-around;
  } */
}