@font-face {
  font-family: '29LTZaridSans';
  src: url('../fonts/29LTZaridSansALVF.ttf') format('truetype');
}

* {
  font-family: '29LTZaridSans', Arial, sans-serif;
}

body {
  margin: 0;

  text-align: center;
  background-color: #fff;
  color: #333;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 20px;
  overflow: hidden;
}

.logo-name-section video {
  width: 30vw;
  height: auto;
  margin-bottom: 20px;
}

.slogan-section {
  width: max-content;
  min-width: 40vw;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.slogan-section h1 {
  font-size: 2rem;
  color: #979797;
  margin: 0;
  font-weight: normal;
  z-index: 2;
}

.slogan-section h2 {
  font-size: 1.5rem;
  color: #fde69b;
  margin: -24px 0 20px;
  font-weight: normal;
  z-index: 1;
}

.contact-section {
  margin-top: 40px;
  position: fixed;
  bottom: 5%;
}

.contact-section p {
  font-size: 2rem;
  margin: 0;
}

.contact-section a {
  text-decoration: none;
  color: #979797;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 1.2rem;
}

.svg-icon {
  width: 24px;
  height: 24px;
  fill: #979797;
}

@media (max-width: 1024px) {
  .logo-name-section video {
    width: 50vw;
    height: auto;
  }

  .contact-section,
  .slogan-section {
    width: 80vw;
  }

  .slogan-section h1 {
    font-size: 1.7rem;
  }

  .slogan-section h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 800px) {
  .container {
    justify-content: start;
    margin-top: 20vh;
    height: auto;
    /* overflow: hidden; */
  }

  .logo-name-section video {
    width: 60vw;
    height: auto;
  }

  .slogan-section h2 {
    font-size: 1.5rem;
    margin-top: -24px;
  }

  .contact-section,
  .slogan-section {
    width: 40vw;
  }
}

@media (max-width: 640px) {
  .slogan-section h2 {
    font-size: 0.9rem;
    margin-top: -18px;
  }
}