@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/src/SF-Pro-Display-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

:visited {
  color: #000;
}

body {
  font-family: "SF Pro Display";
  font-weight: bold;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.pointer {
  cursor: pointer;
}

.main-section {
  width: 100vw;
  height: 100vh;
  background-image: url("../img/bg4.png"), linear-gradient(to right, rgba(111, 163, 176, 0.1) 40%, rgb(0,0,0,0) 0%, rgba(117,170,183,1) 20%), linear-gradient(to bottom, rgb(111, 163, 176), rgb(101, 147, 163));
  background-size: contain, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: top, top, top;
}

.mahatat-logo {
  height: 5.86vh;
  top: 5vh;
  position  : absolute;
  left: 50vw;
  transform: translateX(-50%);
}

.faq, .acc {
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #7CE7F2;
  width: 14.05vh;
  height: 4.6875vh;
  position: absolute;
  right: 6.25vw;
  top: 5.46875vh
}

.acc {
  top: 12vh
}

.faq-text {
  font-size: 1.7vh;
  line-height: 24px;
}

.faq-image {
  margin-left: 5px;
  height: 50%;
}

.mobile-faq {
  display: none;
}

.social-links-container {
  display: flex;
  justify-content: space-between;
  width: 15.375vh;
  height: 3.125vh;
  position: absolute;
  top: 14.02vh;
  left: 50vw;
  transform: translateX(-50%);
} 

.social-link {
  height: 100%;
}

.main-text {
  height: 60.25vh;
  position: absolute;
  top: 22.9vh;
  left: 50vw;
  transform: translateX(-50%);
}

.app-container {
  display: flex;
  justify-content: space-between;
  width: 44vh;
  height: 5.86vh;
  position: absolute;
  top: 88.77vh;
  left: 50vw;
  transform: translateX(-50%);
}

.app-image {
  width: 18.75vh;
}

@media only screen and (max-aspect-ratio: 1440/1024) {
  .main-section {
    background-image: url('../img/mobile-bg.png');
    background-size: cover;
  }

  .mahatat-logo {
    width: 28.33333vw;
    /* width: 20vh; */
    height: auto;
    top: 6.25vw;
  }

  .faq {
    display: none;
  }

  .mobile-faq, .acc {
    display: block;
    width: 4vh;
    height: 4vh;
    background-image: url('../img/mobile-faq.svg');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 8.1111vw;
    top: 6.25vw;
  }

  .acc {
    top: 92vh;
    width: 14vh;
    height: 6vh;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .acc > .faq-text {
    font-size: 2.2vh;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .social-links-container {
    width: 30vw;
    height: 5vw;
    top: 25vw;
  }

  .main-text { 
    /* width: 71.67vw;
    height: auto; */
    width: 75vw;
    height: auto;
    top: 40vw;
  }

  .app-container {
    top: 83vh;
    width: 80vw;
  }

  .app-image {
    width: 35vw;
  }
}

@media only screen and (max-aspect-ratio: 1440/1024) and (min-width: 58vh) {
  .main-section {
    background-image: url("../img/bg4.png"), linear-gradient(to right, rgba(111, 163, 176, 0.1) 40%, rgb(0,0,0,0) 0%, rgba(117,170,183,1) 20%), linear-gradient(to bottom, rgb(111, 163, 176), rgb(101, 147, 163));
  }
  .mahatat-logo {
    width: 20vh;
    top: 5.3vh;
  }
  .mobile-faq, .acc {
    height: 10vh;
    width: 10vh;
    top: 5.3vh;
  }
  .acc {
    left: 8.1111vw;
    transform: none;
  }
  .social-links-container {
    width: 20vh;
    height: 3.125vh;
    top: 15vh;
  }
  .main-text {
    height: auto;
    width: 45vh;
    max-height: 58.23vh;
    top: 22vh;
  }
  .app-container {
    width: 44vh;
    top: 83vh;
  }
  .app-image {
    width: 18.75vh;
  } 
}

@media only screen and (max-width: 290px) {
  .mahatat-logo {
    left: 30vw;
    width: 40vw;
  }
  .acc {
    display: none;
  }
  .mobile-faq {
    width: 10vw;
    height: 10vw;
    right: 10vw;
    top: 7.5vw;
  }
  .social-links-container
  {
    width: 80vw;
  }
  .social-link {
    width: 10vw;
    height: 10vw;
  }
  .main-text {
    top: 18vh;
  }
  .app-container {
    top: 70vh;
    width: 100vw;
    height: 60vw;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .app-image {
    width: 80%;
    height: 10vh;
  }
}