* {
  margin: 0;
  padding: 0;
  scroll-snap-type: y mandatory;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: "Poppins", sans-serif;
}
.top {
  flex: 0.5;
  display: flex;
  flex-direction: column;
  background-color: #131313;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.navbar {
  height: 150px;
  /* background-color: #ff0000; */
  /* background: linear-gradient(45deg, #131313, #9b0303); */
  background: linear-gradient(45deg, #d40000, #670000);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__left {
  flex: 0.1;
  height: 120px;
  padding: 10px 15px;
}
.nav__left_logo {
  width: 100%;
  object-fit: contain;
}

.banner {
  display: flex;
  align-items: center;
  margin: 100px 300px;
}
.banner__left {
  display: flex;
  flex-direction: column;
  flex: 0.8;
  width: 100%;
}

.banner__title {
  color: white;
  font-weight: 900;
}
.banner__title > h1 {
  color: rgb(252, 252, 252);
  white-space: nowrap;
  font-size: 60px;
}
.banner__title_strong {
  background-color: rgb(255 232 18);
  color: black;
  padding: 0px 20px;
  margin: 0px 15px;
  border-radius: 82px;
}

.banner__title > h3 {
  color: rgb(255, 230, 0);
  font-size: 60px;
}
.banner__info {
  color: rgb(255, 255, 255);
  font-size: 25px;
  margin: 40px 0px;
}
.banner__info_strong {
  color: white;
  background-color: red;
  font-size: 55px;
  padding: 0px 20px;
  margin: 0px 20px;
  border-radius: 60px;
}
.banner__service_icons {
  display: flex;
  flex-wrap: wrap;
}
.service__box {
  background-color: #ffffff;
  height: 100px;
  width: 450px;
  border-radius: 60px;
  margin: 10px;
  padding: 5px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.service__box:hover {
  background-color: #131313;
}
.service__title:hover {
  font-size: 30px;
  color: red;
}
.service__box > img {
  margin: 0px 20px;
  width: 60px;
  object-fit: contain;
}
.banner__right {
  flex: 0.4;
  margin: 0px auto;
}
.right__img {
  width: 950px;
  object-fit: cover;
}

.middle {
  scroll-snap-type: y mandatory;

  flex: 0.2;
  width: 100%;
  background: linear-gradient(to right, rgb(232 211 15), rgb(255 202 8));
}
.our__service__title {
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
}
.our__service__title-info {
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
}

.our__service__overview {
  display: flex;
  align-items: center;
  justify-content: center;
}
.box__overview {
  width: 400px;
  height: 100px;
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 12px;
  margin: 20px;
}
.box__overview__icon {
  width: 60px;
  object-fit: contain;
  margin: 0px 15px;
}
.box__overview__title {
  display: flex;
  flex-direction: column;
  margin: 0px 15px;
}
.box__overview__title > h1 {
  font-size: 2rem;
  color: #fae100;
}
.box__overview__title > p {
  font-size: 1rem;
}
.bottom {
  flex: 0.3;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(45deg, #b74141, maroon);
  align-items: center;
}

.prototypes {
  display: flex;
  scroll-snap-type: y mandatory;

  align-items: center;
  margin: 50px;
}
.bottom > h1 {
  text-transform: uppercase;
  font-size: 3rem;
  color: rgb(252, 252, 252);

  padding: 15px;
}
.prototypes__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 400px;
  height: 400px;
  border: 5px solid #e1e6e1;
  box-shadow: inset;
  border-radius: 10px;
  padding: 10px;
  margin: 0px 20px;
  background: linear-gradient(45deg, #131313, #9b0303);
  justify-content: space-between;
}
.prototypes__box > img {
  width: 280px;

  margin: 5px;
  object-fit: cover;
}

.prototypes__box > h2 {
  font-size: 2.5rem;
  color: rgb(255, 238, 0);
}

.prototypes__box > p {
  font-size: 1rem;
  color: rgb(255, 255, 255);
}
.prototypes__box > button {
  font-size: 1rem;
  color: rgb(255, 255, 255);
  width: 100%;
  background: linear-gradient(45deg, #d1c026, #fae100);
  height: 60px;
  border-radius: 10px;
  color: black;
  font-weight: 900;
  cursor: pointer;
}