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

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.coming-soon {
  position: relative;
  min-height: 100dvh;
  background: url("image.jpg") center / cover no-repeat;
  color: #fff;
}



.content {
  font-family: 'Poppins', 'Roboto', Arial, sans-serif;
  position: relative;
  height: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2fr 1fr;
}

/* Top */
.top {
  background-color: rgb(41, 41, 41, 0.8);
  font-size: 18px;
  letter-spacing: 1px;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  padding-left: 12.19vw;
  padding-right: 6.3vw;
  padding-top: 3.28vw;
  overflow-x: clip;
}

.top .name {
  position: relative;
  display: block;
  font-size: 2.86vw;
  line-height: 115%;
  margin-bottom: 4.01vw;
  color: #fff;
}

.top .name:before {
  position: absolute;
  content: '';
  bottom: 0;
  opacity: 0.4;
  left: 0;
  width: 3.39vw;
  height: 0.05vw;
  background-color: #fff;
}

.top .name:after {
  position: absolute;
  content: '';
  bottom: 0;
  width: 30.26vw;
  right: -6.3vw;
  height: 0.05vw;
  opacity: 0.4;
  background-color: #fff;
}

.top h1 {
  font-weight: 100;
  font-size: 8.02vw;
  line-height: 100%;
  text-align: right;
  color: #fff;
}


/* Bottom */
.bottom {
  background-color: rgb(41, 41, 41, 0.8);
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  padding: 1.04vw 12.19vw 2.24vw 2.97vw;
  overflow: hidden;
}

.bottom .name {
  position: relative;
  display: block;
  font-weight: 200;
  font-size: 2.08vw;
  line-height: 152%;
  color: #fff;
  margin-bottom: 2.08vw;
}

.bottom .name:before {
  position: absolute;
  content: '';
  bottom: -0.83vw;
  opacity: 0.4;
  left: -2.97vw;
  width: 50vw;
  height: 0.05vw;
  background-color: #fff;
}

.bottom .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.bottom .wrapper .info,
.bottom .wrapper .contact {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.09vw;
  line-height: 171%;
  color: #fff;
}


/* 🔁 Responsive */
@media (max-width: 768px) {
  .bottom {
    flex-direction: column;
    gap: 20px;
  }

  .content {
    font-family: 'Poppins', 'Roboto', Arial, sans-serif;
    position: relative;
    height: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* Top */
  .top {
    grid-row-start: 1;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: auto;
    padding: 5.04vw 2.97vw 2.24vw;

  }

  .bottom {
    grid-column-start: auto;
    grid-column-end: auto;
    grid-row-start: auto;
    grid-row-end: auto;
    padding: 1.04vw 2.97vw 2.24vw;

  }

  .top .name {
    font-size: 32px;
  }

  .top .name:before {
    bottom: 0;
    opacity: 0.4;
    width: 45px;
  }

  .top .name:after {
    width: 72.26vw;
    right: -6.3vw;
    height: 0.05vw;
  }

  .bottom .name {
    font-size: 28px;
    margin-bottom: 40px;
    text-align: center;
  }

  .bottom .name:before {
    bottom: -0.83vw;
    left: -2.97vw;
    width: 100vw;
    height: 0.05vw;
    background-color: #fff;
  }

  .bottom .wrapper {
    flex-wrap: wrap;
  }
  .bottom .wrapper .info,
  .bottom .wrapper .contact {
    font-size: 18px;
  }

  .top h1 {
    font-size: 64px;
    text-align: center;
  }

}