@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500&display=swap');

* {
  margin: 0;
  padding: 0;
}
body.body__contacts { background: #34342E }
.contacts main {
  padding-top: 80px;
  width: 100%; 
  background: #34342E;
    background-position: 0px -90px;
  /*padding-bottom: 80px;*/
}
@media screen and (max-width: 768px) {
  .contacts main {
    padding-top: 60px;
  }
}

.contacts main .container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding-right: 40px;

}
.contacts main .container h1 {
  font-style: normal;
  font-weight: normal;
  font-size: 72px;
  line-height: 110%;
  text-transform: uppercase;
  
  margin-bottom: 110px;
  text-align: start;
}
.contacts main .container .main_text {
  display: flex;
  justify-content: space-around;
}
.contacts main .container .main_text .contact_text {
  width: 270px;
}

.contacts main .container .main_text .contact_text p {
  font-family: Manrope;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  margin-bottom: 40px;
}

.contacts main .container .main_text .contact_text .contacts_info {
  display: flex;
  flex-direction: column;
}

.contacts main .container .main_text .contact_text .contacts_info a {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 120%;
  
  margin-bottom: 10px;
  text-decoration: none;
  -webkit-transition: .5s;
  transition: .5s;
}
.contacts main .container .main_text .contact_text .contacts_info a:last-child{
  line-height: 150%;
}
.contacts main .container .main_text .contact_text .contacts_info a:hover {
  color: #c19a5b;
  -webkit-transition: .5s;
  transition: .5s;
}
.contacts main .container .main_text .location {
  display: flex;
  flex-direction: column;
  max-width: 50%;
  margin-top: -189px;
  height: fit-content;
}

.contacts main .container .main_text .location .gold-arr-btn {
  max-width: 200px;
  margin-top: 27px;
}
.contacts main .container .main_text .location .google_maps_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 1200px) {
  .contacts main .container {max-width: 992px;}
  .contacts main .container .main_text .location {
    max-width: 44%;
    margin-top: -189px;
    height: fit-content;
  }
}
@media screen and (max-width: 1050px) {
  .contacts main .container {
    max-width: 768px;
  }
  .contacts main .container .main_text .location {
    max-width: 53%;
    margin-top: 0px;
  }
  .contacts main .container h1{
    font-size: 48px;
  }
  /*.contacts main .container{*/
  /*  padding-right: 0px;*/
  /*}*/
}
@media screen and (max-width: 992px) {
  .contacts main .container h1 {margin-bottom: 55px;}
  .contacts main .container .main_text {
    flex-direction: column;
  }
  .contacts main .container .main_text .contact_text {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
  .contacts main .container .main_text .contact_text .contact_text_description {
      width: 270px;
    }
  .contacts main .container .main_text .location {
      width: 100%;
      margin-top: 60px;
      max-width: 100%;
    }
}
@media screen and (max-width: 670px) {
  main  {padding-top: 40px;}
  .contacts main .container .main_text .contact_text {
    flex-direction: column;
    align-items: center;

  }
  .contacts main .container h1 {
    font-size: 45px;
        margin-bottom: 30px;
text-align: center;
  }
}
@media screen and (max-width: 510px) {
  .contacts main .container h1 {
    text-align: center;
  }
}
@media screen and (max-width: 450px) {
  .contacts main .container h1 {
    font-size: 35px;
    margin-bottom: 20px;
  }
  .contacts main .container .main_text .contact_text .contact_text_description {font-size: 14px;}
  .contacts main .container .main_text .contact_text .contacts_info {align-self: flex-start;}
  .contacts main .container .main_text .contact_text .contacts_info a {font-size: 16px;}
  .contacts main .container .main_text .contact_text .contact_text_description {
    width: auto;
    margin-bottom: 20px;
  }
  .contacts main .container .main_text .location {margin-top: 30px;}
}
@media screen and (max-width: 320px) {
  .contacts main .container h1 {font-size: 35px;}
  .contacts main .container .main_text .contact_text .contact_text_description { font-size: 12px;}
  .contacts main .container .main_text .contact_text .contact_text_description {width: 200px;}
  .contacts main .container .main_text .contact_text .contacts_info {
    align-self: center;
    width: 200px;
  }
  .contacts main .container .main_text .contact_text .contacts_info a{font-size: 14px;}
}
@media screen and (max-width: 260px) {
  .contacts main .container .main_text {
  }
  .contacts main .container .main_text .contact_text .contact_text_description {width: 100%;}
  .contacts main .container h1 {font-size: 25px;}
  .contacts main .container .main_text .contact_text .contacts_info {
    align-self: flex-start;
    width: 100%;
  }
}