* {
  padding: 0%;
  margin: 0;
  font-family: "Inter", sans-serif;
  max-width: 2400px;
  scroll-behavior: smooth;
}
.navbar .logo img {
  width: 180px;
  height: 60px;
}
.navbar {
  width: auto;
  background-color: #f5f5f5;
  display: flex;
  height: 80px;
  padding: 0 5% 0 5%;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 500;
}
.container {
  display: flex;
  gap: 24px;
  align-items: center;
}
.container i {
  padding: 8px;
}
.links {
  align-items: center;
  display: flex;
  gap: 32px;
}
.links i {
  padding: 8px;
}
.links a {
  display: inline;
  gap: 10px;
  text-decoration: none;
  color: #000000;
}
.links a:hover {
  transition: 0.3s;
  transform: scale(1.03);
  color: #e86f08;
}
#primary-button {
  background-color: #e86f08;
  color: #ffffff;
  font-size: 18px;
  line-height: 23px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  margin-left: 16px;
  padding: 15px;
  cursor: pointer;
}
#secondary-button {
  background-color: #df3c10;
  color: #ffffff;
  font-size: 18px;
  line-height: 23px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  margin-left: 16px;
  padding: 15px;
  cursor: pointer;
}
.hamburger {
  display: none;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}
.main-page {
  background: url("files/background.png") no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #e86f08;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2% 5% 2% 5%;
}
.words-main-page {
  color: #ffffff;
  max-width: 800px;
  padding-right: 50px;
}
.words-main-page i {
  margin-left: 15px;
}
.words-main-page h1 {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -0.02em;
  text-align: left;
}
.words-main-page p {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.02em;
  text-align: left;
  margin-top: 20px;
  margin-bottom: 20px;
}
.main-page img {
  width: 800px;
  height: 550px;
  border-radius: 10px;
}
.swiper {
  max-width: 800px;
  height: 550px;
  border-radius: 10px;
}
.swiper-button-prev,
.swiper-button-next {
  background-color: #c7c7c76b;
  border-radius: 50px;
}
.looking-button {
  background-color: #4e4d4d;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  border-radius: 8px;
  padding: 10px;
  height: 60px;
  border: none;
  margin: 15px 10px 5px 0px;
  cursor: pointer;
}
.offer-button {
  background-color: #202020;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  border-radius: 8px;
  padding: 10px;
  height: 60px;
  border: none;
  text-align: center;
  margin: 15px 0 5px 0;
  cursor: pointer;
}
.color {
  background: url("files/background.png") no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #e86f08;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  padding: 2% 5% 2% 5%;
}
.words-color-section {
  color: #ffffff;
  max-width: 800px;
  padding-left: 50px;
}
.words-color-section h1 {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -0.02em;
  text-align: left;
}
.words-color-section p {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.02em;
  text-align: left;
  margin-top: 20px;
}
.color img {
  width: 800px;
  height: 550px;
  border-radius: 10px;
}
.bright {
  background-image: url("files/spiral.png");
  background-color: #f5f5f5;
  background-repeat: no-repeat;
  background-position: 0 180px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2% 5% 2% 5%;
}
.bright iframe {
  width: 90%;
  height: 500px;
}
.words-bright-section {
  max-width: 800px;
  padding-right: 50px;
}
.words-bright-section h1 {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -0.02em;
  text-align: left;
}
.words-bright-section p {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.02em;
  text-align: left;
  margin-top: 20px;
}
.words-bright-section ul li {
  font-size: 20px;
  line-height: 40px;
  list-style-type: square;
}
#contact {
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  background-color: #f5f5f5;
}
.offer-pricing {
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2% 5% 2% 5%;
}
.offer-pricing-section {
  max-width: auto;
}
.offer-pricing-section h1 {
  font-size: 45px;
  margin-bottom: 40px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -0.02em;
  text-align: center;
}
.offer-pricing-section p {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.02em;
  text-align: center;
  margin-top: 20px;
}
.offer-pricing form {
  margin-top: 40px;
  width: 50%;
  height: auto;
}
.bright img {
  width: 800px;
  height: 550px;
  border-radius: 10px;
}
.img-map img {
  width: auto;
  height: 350px;
}
form,
.info {
  width: 400px;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  background-color: #ffffff;
  border-radius: 15px;
  margin: 0 5%;
  padding: 25px 35px;
  display: flex;
  border: none;
  box-shadow: 0 0 20px 0.5px rgba(135, 136, 143, 0.336);
}

form input,
form textarea,
form select {
  font-size: 16px;
  margin: 0px 0;
  border: 1px solid #d4d3d3;
  border-radius: 5px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  padding-left: 8px;
}
form input,
form select {
  height: 45px;
}
form textarea {
  height: 135px;
  padding-top: 10px;
  resize: none;
}
form h1 {
  padding: 10px;
  margin-bottom: 18px;
}
.input-label {
  display: flex;
  flex-direction: column;
  align-items: left;
  width: 100%;
  margin-bottom: 15px;
}
.input-label label {
  margin-bottom: 5px;
}
.load-file label {
  margin: 0;
}
.input-label input,
.input-label select {
  width: 100%;
  box-sizing: border-box;
  padding-left: 8px;
}
.load-file {
  width: 100%;
  margin-bottom: 18px;
  border: 1px solid #d4d3d3;
  border-radius: 5px;
  height: fit-content;
  display: flex;
  align-items: center;
}
.load-file label {
  border-radius: 4px;
  text-align: left;
  align-items: end;
  box-sizing: border-box;
  padding: 2px;
  padding-left: 8px;
  padding-right: 8px;
  background-color: #e1d8d5;
  height: auto;
}
.load-file span {
  margin-left: 8px;
}
.agreement {
  font-size: 12px;
  display: flex;
  align-items: center;
  text-align: left;
}
.agreement a {
  color: black;
}
.agreement input {
  height: 20px;
  width: 15px;
  margin-right: 10px;
}
.send-button {
  padding: 15px;
}
.send-button button {
  background-color: #e86f08;
  font-size: 16px;
  padding: 15px 20px;
  border-radius: 5px;
  color: #ffffff;
  border: 0.9px solid black;
  letter-spacing: 1px;
  transition: transform 0.3s;
  border: none;
}
form select option {
  text-align: left;
}
.switch {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
}
.switch input {
  width: 25px;
}
.info i {
  font-size: 50px;
  padding: 70px 0 20px 0;
  color: #e86f08;
}
.info .top {
  margin-top: -60px;
}
.info h1 {
  padding: 10px 10px 50px 10px;
}

form input:hover,
form textarea:hover,
form select:hover,
.load-file label:hover {
  border: 1px solid #e86f08;
}
form input:focus,
form textarea:focus,
form input[type="file"]:focus,
form select:focus {
  border: 2px solid #e86f08;
  outline: none;
}
footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
  align-items: center;
  background-color: #1e1e1e;
  color: rgb(129, 129, 129);
  padding: 1% 3%;
}
footer div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5px;
}
footer div p {
  text-align: left;
  margin: 5px 0;
  width: 100%;
  max-width: 350px;
}
footer a {
  text-decoration: none;
  color: rgb(129, 129, 129);
}

button:hover {
  transition: 0.3s ease;
  transform: scale(1.03);
}
#milestones {
  background-color: #f5f5f5;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 2% 5% 0% 5%;
}
.milestone {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 10px;
  padding: 20px;
  width: 200px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.milestone h2 {
  font-size: 40px;
  color: #e86f08;
  margin-bottom: 10px;
}
.milestone p {
  font-size: 16px;
  color: #333;
}
.milestone:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.color .milestone {
  height: 150px;
}
#advantages-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 2% 5% 2% 5%;
}
#advantages {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.color h1 {
  font-size: 40px;
  margin-bottom: 40px;
  text-align: center;
  color: #ffffff;
}
.advantage {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 10px;
  padding: 20px;
  width: 20%;
  height: 120px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.advantage h2 {
  font-size: 40px;
  color: #e86f08;
  margin-bottom: 10px;
}
.advantage p {
  font-size: 16px;
  color: #333;
}
.advantage:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.contact-box {
  position: fixed;
  top: 75%;
  right: 0;
  width: 250px;
  background-color: #e86f08;
  opacity: 0.95;
  color: #ffffff;
  padding: 20px;
  border-radius: 8px 0 0 8px;
  box-shadow: -2px 2px 10px rgb(0, 0, 0);
  z-index: 1000;
  transition: transform 0.3s ease;
}
.contact-box p {
  margin: 10px 0;
}
.contact-box a {
  color: #ffffff;
  text-decoration: underline;
}
.contact-box i {
  padding: 0 8px 0 0;
}

.contact-box a:hover {
  text-decoration: none;
  color: #ffdd57;
}
.test {
  display: flex;
  flex-direction: column;
}
.container-stages {
  background: linear-gradient(to right, #e86f08, #c7350c);
  color: white;
  width: 90%;
  margin: auto;
  text-align: center;
  padding: 2% 5% 2% 5%;
}
.container-stages h1 {
  font-size: 40px;
  margin-bottom: 40px;
}
.steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.step {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1300px;
  margin: 20px 0;
}
.step-number {
  font-size: 36px;
  width: 60px;
  text-align: center;
  flex-shrink: 0;
  background-color: #fff;
  color: #e87f08;
  border-radius: 10%;
  line-height: 60px;
}
.step-line {
  width: 50px;
  height: 2px;
  background-color: white;
  margin: 0 20px;
  flex-shrink: 0;
}
.step-content {
  text-align: left;
  flex-grow: 1;
}
.step-content h2 {
  font-size: 20px;
  margin-bottom: 10px;
}
.step-content p {
  font-size: 16px;
  margin: 0;
}
.tile-section {
  background: url("files/background.png") no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #e86f08;
  padding: 2% 5% 2% 5%;
}
.tile-section h1 {
  font-size: 40px;
  margin-bottom: 40px;
  text-align: center;
  color: #ffffff;
}
.tile-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.tile {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 25%;
  margin: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.tile h3 {
  font-size: 23px;
  margin-bottom: 10px;
}
.tile p {
  font-size: 16px;
}
.industries {
  padding: 2% 5% 2% 5%;
  background-color: #f5f5f5;
  text-align: center;
}
.industries h2 {
  font-size: 40px;
  margin-bottom: 40px;
}
.industries-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.box {
  padding: 20px;
  width: 20%;
}
.box p {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.02em;
  margin-top: 20px;
}
.box img {
  width: 100%;
  box-shadow: 0 0 20px 0.5px rgba(135, 136, 143, 0.507);
  border-radius: 10px;
}
.looking-contact-form {
  width: 100%;
}
.popup {
  display: none;
  position: fixed;
  z-index: 501;
  left: 0;
  top: 0px;
  width: 100%;
  height: 200%;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
  position: relative;
  margin: 15% auto;
  padding: 30px;
  width: 70%;
  max-width: 600px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.popup h2 {
  font-size: 30px;
}
.popup p {
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}
.offer-contact-form-h1-mobile {
  display: none;
}