@import url('https://fonts.googleapis.com/css?family=Poppins:400,700,900');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

*, body{

  font-family: 'Poppins', sans-serif !important;
}


.input-field {
    width: 50%;
    padding: 20px;
} 

.app-download {
    width: 50%;
    background-color: #1ab0f5;
}

.hero-video {
    position: absolute;
    top: -38px;
    left: 34%;
    width: 95%;
    height: 95%;
    object-fit: cover;
    z-index: 1;
}

@media (max-width: 1200px) {
    .hero-video {
      left: 0px;
      top: 670px;
      width: 100%;
      height: 45%;
      display:none;
    }
    .hero-image{
      width: 100%;
      height: 100%;
      top: 870px;
    }
    .mobile-hero-image{
      position: absolute;
      top: 35%;
      right: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none
    }
    .input-field {
        width: 100%;
        padding: 20px;
    }
    .app-download {
        width: 100%;
        background-color: #1ab0f5;
    }
  }
  .hero-image{
      width: 50%;
    }
  
  .hero-highlight {
    background: var(--blue-2, #1ab0f5);
    width: 124px;
    height: 16px;
    position: absolute;
    left: 288px;
    display: none;
    top: 152px;
}

.sign {
  width: 100%;
  justify-content: start;
  align-items: end;
  display: flex
;
}

.hero-video {
  z-index: 0;
}