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

/* --- Custom fonts (place files in /fonts/) --- */
 @font-face { font-family: 'Gotham Pro'; src: url('./Gotham Pro/gothampro.ttf') format('truetype'); font-weight: 400; }
 @font-face { font-family: 'Gotham Pro'; src: url('./Gotham Pro/gothampro.ttf') format('truetype'); font-weight: 500; }
 @font-face { font-family: 'Gotham Pro'; src: url('./Gotham Pro/gothampro_medium.ttf') format('truetype'); font-weight: 700; }
 @font-face { font-family: 'Circe'; src: url('./Gotham Pro/gothampro_bold.ttf') format('truetype'); font-weight: 800; }
 @font-face { font-family: 'Circe'; src: url('./Gotham Pro/gothampro_black.ttf') format('truetype'); font-weight: 700; }

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-red: #ED1A3A;
  --color-dark: #010202;
  --color-white: #FFFFFF;
  --color-black: #050505;
  --color-gray: #9E9E9E;
  --color-gray-dark: #222222;
  --color-bg-light: #F8F8F8;
  --color-bg-blue-light: #F4FAFF;
  --color-blue: #618FA6;
  --color-green: #79B829;
  --color-logo-dark: #212329;

  --font-main: 'Gotham Pro', 'Montserrat', sans-serif;
  --font-display: 'Circe', 'Nunito', sans-serif;
  --font-accent: 'Montserrat', sans-serif;

  --container-max: 1856px;
  --container-padding: 32px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input {
  font-family: inherit;
}

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-padding) * 2);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

@media (max-width: 1023px) {
  :root {
    --container-padding: 24px;
  }
}

@media (max-width: 699px) {
  :root {
    --container-padding: 16px;
  }
}

.main_container {
  position: relative;
  margin: 20px;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
}

.text-red {
  color: #E51440
}

.map__wrapper {
  display: flex;
  justify-content: center;
  padding-bottom: 32px;
}

.map__wrapper_map {
  overflow: hidden;
  border-radius: 50px;
  width: 80%;
  height: 490px;
}
#map {
  overflow: hidden;
  border-radius: 30px;
  width: 100%;
  height: 490px;
}

@media (max-width: 800px) {
  .map__wrapper_map {
    width: 98%;
  }
}