* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  text-decoration: none;
  background: none;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: Arial, sans-serif;
  background-color: #fff;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  /*padding: 20px 5%;*/
  padding: 3vw;
  /*gap: 20px;*/
}

.logo {
  width: 80%;
  height: auto;
}

.studio-text {
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 2rem;
  color: black;
  text-transform: uppercase;
}

.nav-menu {
  display: flex;
  gap: 2vw;
  font-size: 2.5vw;
  text-transform: uppercase;
  color: #888;
  justify-content: center;
  padding: 0 5%;
  flex-wrap: wrap;
}

.nav-menu a {
  color: #888;
  text-decoration: none;
}

.nav-menu a:hover {
  color: #555;
}

.main-image {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px 5%;
}

.image-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.office,
.office * {
  box-sizing: border-box;
}
.office {
  background: #ffffff;
  height: 212vw;
  position: relative;
  overflow: hidden;
}
.heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s, 1.7142857142857142vw);
  align-items: flex-start;
  justify-content: flex-start;
  width: 22.428571428571427vw;
  height: 4.357142857142857vw;
  position: absolute;
  left: 4.785714285714286vw;
  top: 207.5vw;
}
._2024 {
  color: rgba(0, 0, 0, 0.42);
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1.4vw;
  line-height: 150%;
  font-weight: 600;
  position: absolute;
  left: 36.8vw;
  top: 208.9vw;
  width: 69.07142857142857vw;
  height: 5.0vw;
}
.image-4 {
  width: 102.85714285714286vw;
  height: 28.928571428571427vw;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 0.0vw;
  object-fit: cover;
  aspect-ratio: 32/9;
}
.studio {
  color: rgba(0, 0, 0, 0.86);
  text-align: left;
  font-family: var(
    --m3-display-large-emphasized-font-family,
    "Roboto-Medium",
    sans-serif
  );
  font-size: var(--m3-display-large-emphasized-font-size, 4.071428571428571vw);
  line-height: var(--m3-display-large-emphasized-line-height, 4.571428571428571vw);
  letter-spacing: var(--m3-display-large-emphasized-letter-spacing, -0.017857142857142856vw);
  font-weight: var(--m3-display-large-emphasized-font-weight, 500);
  position: absolute;
  left: 74.07142857142857vw;
  top: 21.785714285714285vw;
  width: 21.214285714285715vw;
  height: 8.642857142857142vw;
}
.div {
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 2.857142857142857vw;
  line-height: 150%;
  font-weight: 600;
  position: absolute;
  left: 2.4285714285714284vw;
  top: 34.642857142857146vw;
  width: 98.07142857142857vw;
  height: 5.0vw;
}
.div-span {
  color: rgba(0, 0, 0, 0.36);
}
.div-span2 {
  color: rgba(0, 0, 0, 0.66);
}
._2-st-office-17-1 {
  width: 93.78571428571429vw;
  height: 62.42857142857143vw;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 40.714285714285715vw;
  object-fit: cover;
  aspect-ratio: 1313/874;
}
._2-st-office-374-1 {
  width: 42.07142857142857vw;
  height: 25.285714285714285vw;
  position: absolute;
  left:  54.785714285714285vw;
  top: 145.14285714285714vw;
  object-fit: cover;
  aspect-ratio: 589/354;
}
._2-st-office-322-1 {
  width: 42.142857142857146vw;
  height: 35.5vw;
  position: absolute;
  left:  56.0vw;
  top: 106.0vw;
  object-fit: cover;
  aspect-ratio: 590/497;
}
.image-6 {
  width: 48.5vw;
  height: 26.0vw;
  position: absolute;
  left:  3.357142857142857vw;
  top: 145.14285714285714vw;
  object-fit: cover;
  aspect-ratio: 679/364;
}
.image-8 {
  width: 41.142857142857146vw;
  height: 33.5vw;
  position: absolute;
  left:  3.357142857142857vw;
  top: 174.0vw;
  object-fit: cover;
  aspect-ratio: 576/469;
}
.image-9 {
  width: 49.07142857142857vw;
  height: 33.5vw;
  position: absolute;
  left:  47.785714285714285vw;
  top: 174.0vw;
  object-fit: cover;
  aspect-ratio: 687/469;
}
.image-2024-09-24-14-38-13-copy-1 {
  width: 49.57142857142857vw;
  height: 35.07142857142857vw;
  position: absolute;
  left:  3.357142857142857vw;
  top: 106.0vw;
  object-fit: cover;
  aspect-ratio: 694/491;
}
.button {
  background: #000000;
  border-radius: 0.5714285714285714vw;
  padding: 0.8571428571428571vw 1.7142857142857142vw 0.8571428571428571vw 1.7142857142857142vw;
  display: flex;
  flex-direction: row;
  gap: 0.5714285714285714vw;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 1.7857142857142858vw;
  bottom: 6.642857142857143vw;
  box-shadow: var(
    --button-shadow-box-shadow,
    0.0vw 0.07142857142857142vw 0.14285714285714285vw 0.0vw rgba(0, 0, 0, 0.05)
  );
}
.div2 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 1.7142857142857142vw;
  line-height: 150%;
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.button2 {
  background: #e6e6e6;
  border-radius: 0.5714285714285714vw;
  padding: 0.8571428571428571vw 1.7142857142857142vw 0.8571428571428571vw 1.7142857142857142vw;
  display: flex;
  flex-direction: row;
  gap: 0.5714285714285714vw;
  align-items: center;
  justify-content: flex-start;
  width: 87.0vw;
  height: 4.285714285714286vw;
  position: absolute;
  left:  11.785714285714286vw;
  top: 222.57142857142858vw;
  box-shadow: var(
    --button-shadow-box-shadow,
    0.0vw 0.07142857142857142vw 0.14285714285714285vw 0.0vw rgba(0, 0, 0, 0.05)
  );
}
.sokolart-studio-yandex-ru {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 2.2857142857142856vw;
  line-height: 150%;
  font-weight: 500;
  position: absolute;
  left: 68.28571428571429vw;
  top: 218.14285714285714vw;
  width: 31.0vw;
  height: 12.785714285714286vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
._79163620336 {
  color: rgba(0, 0, 0, 0.99);
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 2.2857142857142856vw;
  line-height: 150%;
  font-weight: 600;
  position: absolute;
  left: 46.142857142857146vw;
  top: 222.85714285714286vw;
  width: 20.928571428571427vw;
  height: 5.0vw;
}
.t-me-mariia-v-sokolova {
  color: rgba(0, 0, 0, 0.99);
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 2.2857142857142856vw;
  line-height: 150%;
  font-weight: 600;
  position: absolute;
  left:  14.642857142857142vw;
  top: 222.78571428571428vw;
  width: 94.57142857142857vw;
  height: 5.0vw;
}

.footer-text {
  font-size: 1.2rem;
  color: #888;
  padding: 20px 5%;
  text-align: center;
}

/* Ensure the iframe is styled consistently */
iframe {
  width: 100%;
  border: none;
  overflow: hidden;
}