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

@font-face {

  font-family: "GT America";

  src: url("../fonts/GT-America-Light.otf");

  font-weight: 300;

}

@font-face {

  font-family: "GT America";

  src: url("../fonts/GT-America-Regular.otf");

  font-weight: 400;

}

@font-face {

  font-family: "GT America";

  src: url("../fonts/GT-America-Medium.otf");

  font-weight: 500;

}



body {

  padding: 0;

  margin: 0;

  /* font-family: Manrope; */

  font-family: "GT America";

  font-size: 16px;

}

p, h1, h2 {

  margin: 0;

}

.container {

  max-width: 1200px;

    width: 100%;

    padding-right: 10px;

    padding-left: 10px;

    margin: 0 auto;

    box-sizing: border-box;

}

header {

  padding: 8px 0;

  background: #58585A;

}

header p {

  color: #fff;

  text-align: right;

  font-size: 14px;

  font-weight: 300;

}

a {

  text-decoration: none;

  transition: ease all .3s;

}

section {

  padding: 20px 0 0;

  position: relative;

}

section .container {

  padding: 0;

}

h1 {

  color: #B83B26;

  text-align: center;

  font-size: 45px;

  line-height: 1.2;

  font-weight: 500;

  margin-bottom: 15px;

}

.map-holder {

  position: relative;

  max-height: 680px;

  overflow: hidden;

  margin-top: 26px;

}

.subtitle {

  color: #707070;

  text-align: center;

  font-size: 16px;

  font-weight: 400;

  line-height: 140%;

}

#map {

  height: 800px;

  transition: transform-scale 1s ease, transform-translate 0.5s ease; 

}

.overlay {

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  z-index: 2;

  display: block;

}

.modal-window {

  /* background: rgba(255,255,255,0.98); */  

  max-width: 800px;

  position: absolute;

  top: 50%;

    transform: translate(-50%, -50%);

    left: 50%;

    margin-top: -56px;

  width: 90%;

  max-width: 890px;

  padding: 35px 40px 25px 40px;

  z-index: 6;

  box-sizing: border-box;

  /* opacity: 0.2; */

}

.modal-window > div {

  position: relative;

  z-index: 2;

}

.modal-window:before {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  background-color: rgba(255,255,255,0.8);

  box-shadow: 0px 1.134px 3.332px 0px rgba(0, 0, 0, 0.02), 0px 2.867px 8.426px 0px rgba(0, 0, 0, 0.03), 0px 5.848px 17.189px 0px rgba(0, 0, 0, 0.04), 0px 12.046px 35.407px 0px rgba(0, 0, 0, 0.05), 0px 33px 97px 0px rgba(0, 0, 0, 0.07);

  filter: blur(1px);

}

path.active {

  fill: rgba(184, 59, 38, 1);

}

@keyframes z1 {

  

}

.modal-window h3 {

  color: #312D2D;

  text-align: center;

  font-size: 20px;

  font-style: normal;

  font-weight: 500;

  line-height: 140%;

  margin: 0;

}

.modal-countries-holder {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

  /* margin-top: 30px; */

}

.modal-countries-item {

  flex: 0 0 30%;

  cursor: pointer;

}

.modal-countries-item-inner, .modal-window-step-2-title {

  display: flex;

  align-items: flex-start;

  gap: 10px;

}

.modal-window-step-2-title {

  justify-content: center;

}

.modal-countries-item-inner img,

.modal-window-step-2-title img {

  border-radius: 5px;

  max-width: 40px;

  border: 1px solid #eee;

  margin-top: 3px;

}

.modal-countries-item-inner strong {

  color: #000;

  font-size: 18px;

  font-style: normal;

  font-weight: 500;

}

.modal-countries-item-inner > div {

  min-height: 56px;

}

.modal-countries-item-language {

  color: #8F9193;

  font-size: 13px;

  font-style: normal;

  font-weight: 400;

  margin: 2px 0 0;

}

.modal-countries-item-language span:hover {

  text-decoration: underline;

}

.modal-countries-item:hover .modal-countries-item-language {

  color: #B83B26;

}

.modal-window-step-2, .modal-window-step-2-title .modal-countries-item-language {

  display: none;

}

.modal-window-step-2-title span {

  color: #000;

  font-size: 22px;

  font-weight: 500;

  line-height: 140%;

}

.language-select-title {

  color: #9E9D9D;

  text-align: center;

  font-size: 16px;

  font-weight: 400;

  line-height: 140%;

}



#language-select {

  background: #EDEDED;

  border: none;

  padding: 10px;

  width: 250px;

  margin: 0 auto;

  display: block;

  text-align: center;

  line-height: 140%; /* 22.4px */

  font-size: 16px;

  outline: none;

  color: #fff;

}

.modal-window-button {

  color: #FFF;

  text-align: center;

  font-family: Manrope;

  font-size: 18px;

  font-weight: 500;

  line-height: 140%;

  display: block;

  background: #B83B26;

  width: 250px;

  margin: 30px auto 0;

  padding: 10px 0;

}

.modal-window-button:hover {

  transform: scale(1.05);

}

footer {

  background: #272728;

  padding: 20px 0;

  font-size: 14px;

}

.footer-holder {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.footer-left-top {

  display: flex;

  gap: 30px;

  margin-bottom: 10px;

}

.footer-link, .footer-text {

  color: #fff;

  font-weight: 500;

}

.footer-left-bottom {

  display: flex;

  gap: 30px;

}



header, footer {

  position: relative;

  z-index: 6;

}

.modal-window-step-2 {

  position: relative;

}

.back-button,

.next-button {

  position: absolute;

  top: 50%;

  left: -95px;

  transform: translateY(-50%) rotate(180deg);

  z-index: 3;

  cursor: pointer;

}

.next-button {

  left: unset;

  right: -95px;

  transform: translateY(-50%) rotate(0);

  display: none;

}

.next-button.active {

  /* display: block; */

}

.custom-select-holder {

  max-width: 250px;

  margin: 0 auto;

  position: relative;

}

.custom-select-value {

  position: relative;

  text-align: center;

  background: #EDEDED;

  height: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 500;

  cursor: pointer;

}

.custom-select-value svg {

  position: absolute;

  right: 15px;

  top: 50%;

  transform: translateY(-50%);

}

.custom-select-list {

  position: absolute;

  top: 32px;

  width: calc(100% - 2px);

  z-index: 4;

  background: #fff;

  border: 1px solid #EDEDED;

  display: none;

  max-height: 130px;

  overflow: auto;

}

.custom-select-list-item {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 32px;

  cursor: pointer;

}

.custom-select-list-item:hover {

  background: #EDEDED;

}

/* width */

.custom-select-list::-webkit-scrollbar {

  width: 3px;

}



/* Track */

.custom-select-list::-webkit-scrollbar-track {

  background: #f1f1f1;

}



/* Handle */

.custom-select-list::-webkit-scrollbar-thumb {

  background: #888;

}



/* Handle on hover */

.custom-select-list::-webkit-scrollbar-thumb:hover {

  background: #555;

}

@media(max-width: 1199px) {

  h1 {

    font-size: 36px;

  }

  .modal-window {

    /* max-width: 590px; */

    padding: 30px;

  }

  .modal-countries-item {

    margin-top: 20px;

  }

}

@media(max-width: 991px) {

  .back-button {

    left: -75px;

  }

}

@media(max-width: 767px) {

  h1 {

    font-size: 24px;

  }

  .container {

    max-width: 100%;

    padding: 0 15px;

  }

  .footer-holder {

    flex-direction: column;

  }

  /* .modal-window {

    padding: 20px;

    position: static;

    transform: none;

    margin: 40px auto 10px;

  } */

  section {

    padding: 40px 15px;

  }

  #map,

  .overlay {

    display: none;

  }

  .modal-countries-item-inner strong, .modal-countries-item-language {

    font-size: 14px;

  }

  .modal-countries-item {

    flex: 0 0 48%;

  }

  .modal-countries-holder {

    gap: 3%;

  }

  .back-button {

    left: -46px;

  }

  .next-button {

    right: -46px;

  }

  .footer-left-bottom {

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 30px;

  }

}



@media (max-width: 767px) {

  .map-holder {

    height: 650px;

    max-height: unset;

    margin-top: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px 0 40px 0;

    border-top: 4px solid #eeeeee;

  }

  #map, .overlay {

    display: block;

  }

  #map {

    position: absolute;

    position: absolute;

    left: 0;

    width: 100%;

    top: 0;

  }

  .modal-window {

    margin-top: 0;

    position: relative;

    left: unset;

    top: unset;

    transform: none;

  }

}