/* Hlavní nastavení stránky */
.about {
  background-color: #132423;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

/* Wrapper a obsah */
.about .overlap-group-wrapper {
  background-color: #132423;
  overflow: hidden;
  width: 1920px;
  height: 100%;
}

.about .overlap-group {
  position: relative;
  height: 1900px;
}

/* Fixní pozadí */
.about .web-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 70%;
}

/* Obdélník */
.about .rectangle {
  position: absolute;
  width: 1360px;
  height: 1600px;
  top: 208px;
  left: 280px;
  background-color: #000000ad;
  border: 8px solid #faeab9;
  backdrop-filter: blur(8px) brightness(100%);
  -webkit-backdrop-filter: blur(8px) brightness(100%);

}

/* Text o firmě */
.about .we-re-a-creative {
  position: absolute;
  width: 861px;
  top: 293px;
  left: 696px;
  font-family: "Sen", Helvetica;
  font-weight: 300;
  color: #bcbcc9;
  font-size: 24px;
  text-align: justify;
  letter-spacing: 0;
  line-height: 33px;
}

/* Text miro */
.about .mironadpis {
  position: absolute;
  width: 861px;
  top: 700px;
  left: 370px;
  font-family: "Sen", Helvetica;
  font-weight: 400;
  color: #eeeeff;
  font-size: 30px;
  text-align: justify;
  letter-spacing: 0;
  line-height: 33px;
}

.about .miro {
  position: absolute;
  width: 840px;
  top: 760px;
  left: 380px;
  font-family: "Sen", Helvetica;
  font-weight: 400;
  color: #bcbcc9;
  font-size: 18px;
  text-align: justify;
  letter-spacing: 0;
  line-height: 33px;
}

/* Text riso */
.about .risonadpis {
  position: absolute;
  width: 861px;
  top: 1150px;
  left: 680px;
  font-family: "Sen", Helvetica;
  font-weight: 400;
  color: #eeeeff;
  font-size: 30px;
  text-align: justify;
  letter-spacing: 0;
  line-height: 33px;
}

.about .riso {
  position: absolute;
  width: 840px;
  top: 1210px;
  left: 700px;
  font-family: "Sen", Helvetica;
  font-weight: 400;
  color: #bcbcc9;
  font-size: 18px;
  text-align: justify;
  letter-spacing: 0;
  line-height: 33px;
}

.about .quote {
  position: absolute;
  top: 1700px;
  left: 33%;
  width: 861px;
  font-family: "Sen", Helvetica;
  font-weight: 400;
  color: #bcbcc9;
  font-size: 30px;
  text-align: justify;
  letter-spacing: 0;
  line-height: 33px;
}

/* Obrázek v rámečku */
.about .ellipse {
  position: absolute;
  width: 280px;
  height: 280px;
  top: 280px;
  left: 360px;
  background-color: #faeab9;
  border-radius: 500px;
}

.about .mask-group {
  position: absolute;
  width: 279px;
  height: 276px;
  top: 287px;
  left: 363px;
}

.about .ellipse2 {
  position: absolute;
  width: 280px;
  height: 280px;
  top: 755px;
  left: 1270px;
  background-color: #faeab9;
  border-radius: 500px;
}

.about .ellipse3 {
  position: absolute;
  width: 280px;
  height: 280px;
  top: 1225px;
  left: 360px;
  background-color: #faeab9;
  border-radius: 500px;
}

.about .img {
  position: absolute;
  width: 276px;
  height: 239px;
  top: 62px;
  left: 32px;
}

/* Logo */
.about .logo-transparent {
  position: absolute;
  z-index: 2;
  top: 25px;
  left: 25px;
  width: 55px;
  height: 55px;
  cursor: pointer;
}

.about .layer {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: difference; /* jen pro logo */
}

/* Dekorace */
.about .subtract {
  position: absolute;
  width: 317px;
  height: 73px;
  top: 150px;
  left: 257px;
}

/* Navigace */
.about .nav-bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 30px;
  left: 0;
  right: 0;
  gap: 20px;
}

/* Navigace hlavní část */
.about .nav-center {
  display: flex;
  gap: 100px;
}

/* Navigace kontakt (vpravo) */
.about .nav-contact {
  position: absolute;
  top: 0;
  right: 30px;
}

/* Položky navigace */
.about .nav-item {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 42px;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  display: inline-block;
}

/* Hover efekt */
.about .nav-item:hover {
  color: #1d66b1;
}

/* SCROLL STAV navigace */
.about.scrolled .nav-bar {
  flex-direction: column;
  align-items: flex-end;
  position: fixed;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}

.about.scrolled .nav-center,
.about.scrolled .nav-contact {
  flex-direction: column;
  align-items: flex-end;
  gap: 30px;
  position: static;
}

/* Položky při scrollu */
.about.scrolled .nav-item {
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  position: relative;
  width: 25px;
  transition: width 0.3s ease;
}

/* Hover efekt při scrollu */
.about.scrolled .nav-item:hover {
  width: max-content;
}

/* Span uvnitř */
.about.scrolled .nav-item span {
  display: inline;
}