.white {
    color:rgb(236, 221, 212);
}

button {
  -webkit-text-fill-color: black !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}

button:focus,
button:active {
  outline: none !important;
  background: none !important;
  box-shadow: none !important;
}
  /* Video-ul propriu-zis */
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* sau "contain" dacă vrei să nu taie imaginea */
  }
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* ocupă toată înălțimea ecranului */
    overflow: hidden;
  }

  /* Video-ul de fundal */
  .hero-section video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0; /* trimite video-ul în spate */
  }

  /* Textul peste video */
  .hero-content {
    position: relative;
    z-index: 1; /* aduce textul deasupra video-ului */
    color: white;
    text-align: left;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    max-width: 2500px;
  }

  .hero-content h1 {
    font-size: 5rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); /* umbră pt lizibilitate */
  }

  .hero-content h2 {
    font-size: 3rem;
    font-weight: 300;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  }
  .img {
    width: 50px;
    position: relative;
    top: -2.5px;
    cursor: pointer;
  }
header {
  padding-top: env(safe-area-inset-top);
}

.img2 {
    width: 50px;
    position: relative;
    top: -5px;
    left: 5px;
    cursor: pointer;
  }
.img3 {
    position: relative;
    top: 2px;
    left: -10px;
    cursor: pointer;
  }

.img100 {
  position: relative;
  top: 2px;
  left: -7px;
  cursor: pointer;
}
@font-face {
  font-family: 'FontPersonalizat';
  src: url('brown-sugar.ttf') format('truetype');
}

.font {
  font-family: 'FontPersonalizat', sans-serif;
  text-align:left;
  padding-left: 100px;
}
.fontv {
  font-family: 'FontPersonalizat', sans-serif;
  text-align:left;
  size: 5rem;
  padding-left: 100px;
}
.button {
  border: none;
  font-size: 2em;
  position: relative;
  top: -15px;  
  background: none;
  cursor: pointer;
  font-family: 'FontPersonalizat', sans-serif;
}

.btn {
  display: block;
  margin: 0 auto; 
  border: none;
  font-size: 2em; 
  position: relative; 
  top: -5px; 
  background: none; 
  cursor: pointer;
  color: white;
  font-family: 'FontPersonalizat', sans-serif;
}

.ch {
  background-color: rgb(236, 221, 212);
  text-align: left;
  padding-left: 30px;
  font-family: 'FontPersonalizat', sans-serif
}

.alilup {
  top: -5px;
  position: relative;
}

.sigma {
  background-color:rgb(236, 221, 212);
  text-align: left;
  padding-left: 30px;
  font-size: 2.5rem
}

.mic {
  font-size: 2rem;
}

.ro {
  background-color: rgb(236, 221, 212);
  text-align: left;
  font-family: 'FontPersonalizat', sans-serif
}

.ofont {
  font-family: 'FontPersonalizat', sans-serif;
  font-size: 3rem;
  padding-left: 50px;
}

.mare {
  font-size: 2rem;
  text-align: right;
  padding-right: 100px;
}

.inv {
  font-size: 0.1rem;
}

.img-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  margin-top: 30px; 
  margin-left: 90px;
}

.img-btn img {
  width: 70px; /* mărimea imaginii-buton */
  transition: transform 0.2s;
}

.img-btn:hover img {
  transform: scale(1.1); /* mic efect când treci cu mouse-ul */
}

.img10 {
  position: relative;
  left: -7px;
  cursor: pointer;
}

@font-face {
  font-family: 'Textfonty';
  src: url('textfont.otf') format('opentype');
}

.tx {
  background-color: rgb(236, 221, 212);
  text-align: left;
  padding-left: 30px;
  font-family: 'Textfonty', sans-serif
}
.bruh {
  font-family: 'FontPersonalizat';
}
.txomare {
  font-size: 3rem;
}

.camare {
  font-size: 4rem;
}
.top-bar {
  padding: 0;
  padding-left: 10px;
}

.colt {
      position: absolute;
      top: 15px;       /* distanța de sus */
      right: 15px;     /* distanța de dreapta */
      width: 60px;    /* dimensiunea imaginii */
      cursor: pointer;
    }
.colp {
      position: absolute;
      top: 5px;       /* distanța de sus */
      right: 15px;     /* distanța de dreapta */
      width: 60px;    /* dimensiunea imaginii */
      cursor: pointer;
    }
.fonty {
  font-family: 'Textfonty';
}

.stiitu {
  padding-left: 100px;
  position:absolute;
  top: 200px;
  font-size: 3rem;
}

@media (max-width: 600px) {
header {
  padding-top: env(safe-area-inset-top);
}

  .hero-content h1 {
    font-size: 2.5rem;  /* mai mic pe telefon */
  }

  .hero-content h2 {
    font-size: 1.8rem;
  }

  .font, .fontv, .ofont {
    padding-left: 20px; /* pe telefon nu trebuie 100px */
  }

  .mare {
    padding-right: 20px;
    font-size: 1.5rem;
  }

  .stiitu {
    padding-left: 20px;
    top: 150px;
    font-size: 1.8rem;
  }

  .img-btn img {
    width: 50px; /* mai mic */
  }

  .colt {
    width: 40px;
    right: 10px;
    top: 5px;
  }

  .colp {
      position: absolute;
      top: 5px; 
      right: 10px;     
      width: 40px;
    }

  .camare {
    font-size: 2.5rem;
  }

  .txomare {
    font-size: 2rem;
  }
  .navbar {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 20px;
}
.navbar img, .navbar button {
    flex-shrink: 0;
}
.button {
  border: none !important;
  border-radius: 10000px !important;
  outline: none !important;
  font-size: 1.3em !important;
  position: relative !important;
  top: 0 !important;  
  background: none !important;
  font-family: 'FontPersonalizat', sans-serif;
  color: black !important;
  user-select: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-text-fill-color: black !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-select: none !important;
}
.top-bar {
  padding: 0;
  margin: 0;
  display: inline-block;
  line-height: 1;
  vertical-align: top;
}

.button:focus,
.button:active {
  outline: none !important;
  background: none !important;
  box-shadow: none !important;
}


}