#map {
  height: 200px;
  /* The height is 400 pixels */
  width: 70%;
  /* The width is the width of the web page */

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#showcase {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 1600px;
  height: 100vh;
  margin: auto;
  background-image: url("/assets/RESIZED PHOTOS/wall-mockup.png");
  display: flex;
}

.showcase-title {
  font-size: 90px;
  font-family: "Carnas-light";
  text-transform: uppercase;
}

.showcase-subtitle {
  font-size: 90px;
  text-transform: uppercase;
  font-family: "Carnas-bold";
}

#showcase-overlay {
  margin: auto;
  width: 1600px;
  height: 100vh;
  position: absolute;
  background: #000;
  opacity: 0.7;
  z-index: 1;
}

#showcase-content {
  padding: 13%;
  position: relative;
  z-index: 2;
  font-family: "Carnas-light";
  color: #ffffff;
  display: flex;
  align-items: center;
}

.showcase-list .marinho-steel-button {
  margin-top: 50px;
}

.block-border-title {
  padding-top: 10px;
  width: 80%;
}

.team-block {
  padding: 100px;
  width: 100%;
}

.team-block-content {
  max-width: 1600px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.team-block-title {
  font-size: 33px;
  padding-top: 90px;
  color: #454545;
  font-family: "Carnas-bold";
  text-transform: uppercase;
  padding-bottom: 15px;
  border-bottom: 2px solid #e5e5e5;
  width: 90%;
}

.team-block-subtitle {
  padding-top: 20px;
  font-size: 25px;
  color: #454545;
  width: 90%;
  font-family: "Carnas-bold";
}

.team-block-text {
  padding-top: 10px;
  font-size: 20px;
  color: #454545;
  width: 90%;
}

.team-img {
  background-image: url("/assets/RESIZED PHOTOS/business-team-and-manager-in-meeting.jpg");
  background-position: center center;
  background-size: cover;
  height: 400px;
}

.team-members {
  width: 100%;
  background-image: url("/assets/RESIZED PHOTOS/horizontal-shot-abstract-buildings-with-white-metallic-ribs-glass-windows.jpg");
  background-position: center;
  background-size: cover;
  padding: 50px 0;
}

.team-members-block {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.team-member-content {
  border-bottom: 10px solid #828282;
  background-color: #ffffff;
  padding: 20px;
  width: 80%;
  justify-self: center;
}

.team-member-name {
  font-size: 30px;
  font-family: "Carnas-light";
  color: #454545;
  border-bottom: 3px solid #f2daa7;
  padding: 10px 0;
}

.team-member-position {
  padding-bottom: 10px;
  font-family: "Carnas-light";
  font-size: 20px;
  color: #454545;
  font-style: italic;
}

.team-member-phones {
  padding-top: 20px;
  font-family: "Carnas-light";
  font-size: 20px;
  color: #454545;
}

.team-member-email {
  padding-top: 10px;
  font-family: "Carnas-light";
  font-size: 20px;
  color: #454545;
}

.surname {
  font-family: "Carnas-bold";
}

.form-block {
  width: 100%;
  padding: 50px 20px;
}

.form-block-content {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.form-block-subtitle {
  padding-top: 15px;
  font-family: "Carnas-light";
  font-size: 20px;
  color: #454545;
}

.block-border-title {
  font-size: 35px;
  color: #454545;
  text-transform: uppercase;
  padding-bottom: 15px;
  border-bottom: 2px solid #e5e5e5;
  font-family: "Carnas-bold";
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 25px;
}

.input-form-block {
  display: grid;
}

.text-input,
textarea {
  border: none;
  border-bottom: 1px solid #000;
  margin: 10px 0;
}

.select-input-form {
  display: grid;
  grid-area: 3 / 1 / span 1 / span 2;
}

.text-input-form {
  display: grid;
  grid-area: 4 / 1 / span 1 / span 2;
  height: 15vh;
}

.select-input {
  border: none;
 border-bottom: #000 1px solid;
 margin: 20px 0;
}

.checkbox-button {
  display: flex;
  align-items: center;
  background-color: #c6c6c6;
  width: fit-content;
  padding: 20px 30px;
  border-radius: 10px;
  margin: 20px 0;
}

.checkbox-button-text {
  text-transform: uppercase;
  padding-left: 10px;
  font-size: 14px;
  font-family: "Carnas-light";
}

.contacts-block {
  margin-top: 82px;
  border-left: 1px solid #828282;
  padding-left: 50px;
}

.contacts-content-block {
  padding-top: 20px;
  display: grid;
  gap: 20px;
}

.contacts-icons-item {
  color: #828282;
  font-size: 20px;
}

.contacts-icons-item img {
  width: 30px;
}

.contacts-icons-item a{
  color: #828282;
}
.contacts-icons-item a:hover{
  color: #454545;
}

@media (max-width: 1200px) {
  .team-block-content {
    grid-template-columns: 1fr;
  }

  .team-block-title {
    font-size: 30px;
  }

  .team-img {
    width: 100%;
    height: auto;
  }

  .team-members-block {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .form-block-content {
    grid-template-columns: 1fr;
  }

  .contacts-block {
    margin-top: 50px;
    border-left: none;
    padding-left: 0px;
  }

  .form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .input-form-block {
    display: grid;
  }

  .select-input-form {
    grid-area: auto;
  }

  .text-input-form {
    grid-area: auto;
  }

  #map {
    height: 200px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
  }
}

@media (max-width: 1200px) {
  #showcase {
     width: 100%;
    /*height: auto; */
  }

  .showcase-title {
    font-size: 50px;
    text-transform: uppercase;
  }

  .showcase-subtitle {
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 600;
  }

  #showcase-overlay {
    margin: auto;
     width: 100%;
    /*height: 570px; */
  }

  #showcase-content {
    padding: 13%;
    position: relative;
    z-index: 2;
    font-size: 70px;
    color: #ffffff;
  }

  .form-block {
    padding: 100px;
  }
}




@media (max-width: 556px) {
  .team-block, .form-block {
    padding: 100px 70px;
  }
}


@media (max-width: 498px) {
  .team-block, .form-block {
    padding: 100px 50px;
  }
}



@media (max-width: 400px) {
  /* #showcase {
    width: 100%;
    height: auto;
  } */

  .showcase-title {
    font-size: 35px;
    margin-top: 35px;
  }

  .showcase-subtitle {
    font-size: 35px;
  }

  #showcase-content {
    padding: 10%;
    font-size: 20px;
  }

  .block-border-title {
    font-size: 30px;
    color: #454545;
    text-transform: uppercase;
    font-weight: 500;
    padding-bottom: 15px;
    border-bottom: 10px solid #e5e5e5;
    width: fit-content;
  }
}

@media (max-width: 360px) {

}