/* HERO SECTION */
.hero {
  height: 580px;
  /* display: flex; */
}

/* Sidebar section */
.hero-sidebar {
  display: none;

  width: 155px;
  padding: 32px 32px 40px var(--padding-horizontal-global);
  /* display: flex; */
  flex-direction: column;
  justify-content: space-between;
}

.hero-social-media {
  margin-bottom: 40px;
}

.hero-social-media-element {
  transform: rotate(-90deg);
}

.hero-social-media-element :first-child {
  margin-bottom: 80px;
}

.hero-side-bar-divider {
  transform: rotate(-90deg);
  align-self: first baseline;
}

.social-media-link {
  color: var(--black-text-color);
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 2.2px;
}

.social-media-link:hover,
.social-media-link:focus {
  color: var(--brand-color);
}

.hero-social-media-element:first-child {
  margin-bottom: 40px;
}

/* Hero container */
.hero-container {
  background-color: var(--black-text-color);
  /* background-image: url(../images/hero-image-slider.jpg); */
  /* background-size: cover; */
  color: var(--white-text-color);
  flex-grow: 1;
  position: relative;
}

.hero-carousel {
  position: absolute;
  overflow: hidden;

  width: 100%;
  height: 100%;
}

.hero-carousel-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform, 500ms, ease-in-out;
}

.hero-content-container {
  position: relative;
  padding: 40px var(--padding-horizontal-global);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  z-index: 1;
}

/* Header */
/* .header-container {
  display: flex;
  justify-content: space-between;
} */

.logo-hamburger-menu-container {
  display: flex;
  justify-content: space-between;
}

.hero-mobile-logo {
  fill: var(--white-text-color);
}

.hero-navbar-menu-button {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  fill: black;
  display: block;
}

.hero-navbar-menu-button-light {
  color: white;
  fill: transparent;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 120px;
  /* align-items: center; */
  justify-content: center;
}

/* Hero content */
/* .hero-content > :nth-child(n + 2) {
  margin-top: 20px;
} */

.hero-title {
  font-family: var(--header-font-family);
  /* font-size: 72px; */
  font-size: 48px;
  font-style: normal;
  line-height: normal;
  /* letter-spacing: 3.6px; */
  letter-spacing: 2.4px;

  color: var(--white-text-color);
}

.hero-description {
  /* color: #9da4bd;
  font-size: 18px;
  font-style: normal;
  line-height: 166.667%;
  letter-spacing: 0.36px; */

  color: #9da4bd;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%;
  letter-spacing: 0.32px;
}

.hero-control-buttons {
  /* display: none; */
  display: flex;
  justify-content: flex-end;
  gap: 26px;
}

.hero-control-button {
  background: none;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.1px;
  border: none;
  width: 60px;
  text-align: start;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 8px;
  cursor: pointer;
}

.hero-control-button-dark {
  color: var(--gray-color);
  border-bottom: 1px solid var(--gray-color);
  text-align: start;
}

.hero-control-button-light {
  color: var(--white-text-color);
  border-bottom: 1px solid var(--white-text-color);
  text-align: end;
}

.hero-navbar-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 30px;
  /* gap: 40px; */
}

.nav-link {
  /* color: var(--white-text-color); */
  color: var(--black-text-color);
  /* font-size: 12px; */
  /* aici nu se sterge font style chiar daca se repeta */
  /* numai la paragrafe se sterge deoarece se repeta si nu are nici un efect */
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  /* letter-spacing: 1.2px; */

  font-size: 18px;
  letter-spacing: 1.8px;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--brand-color);
}

/* header cta */
.hero-header-cta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* gap: 40px; */
  margin-top: 64px;
}

.hero-navbar-menu-button .hero-header-address {
  display: flex;
  align-items: center;
}

.address-phone-number {
  /* color: var(--white-text-color); */
  color: var(--black-text-color);
  /* font-size: 12px; */
  /* nu se sterge font stile pentru ca altfel scrisul ar fi italic si asa devine normal */
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  /* letter-spacing: 1.2px; */
  text-transform: uppercase;

  font-size: 18px;
  letter-spacing: 1.8px;
}

.address-phone-number:hover,
.address-phone-number:focus {
  color: var(--brand-color);
}

.hero-menu-social-media-container {
  display: flex;
  align-items: first baseline;
  gap: 40px;
  margin-top: 64px;
}

.hero-menu-social-media {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
}

/* Media */

@media screen and (width <= 1158px) {
  .hero-navbar-menu {
    visibility: hidden;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: white;
    padding: 48px var(--padding-horizontal-global) 0 40px;
  }
}

@media screen and (width >= 768px) {
  /* Sidebar section */
  .hero-sidebar {
    display: flex;
    align-items: center;
  }

  .hero {
    display: flex;
    height: 680px;
  }

  .hero-mobile-logo {
    display: none;
  }

  .hero-content {
    margin: 0 auto;
  }

  .hero-control-buttons {
    display: flex;
  }
}

@media screen and (width >= 1158px) {
  /* header navbar */
  .hero-navbar {
    display: flex;
    align-items: center;
  }

  .hero-navbar-list {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
    margin-top: 0;
  }

  .nav-link {
    color: var(--white-text-color);
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  .hero-header-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    margin-top: 0;
  }

  .address-phone-number {
    color: var(--white-text-color);
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  .hero-book-service-button {
    color: var(--white-text-color);
  }

  .hero-menu-social-media-container {
    display: none;
  }

  .hero-navbar-menu-button {
    display: none;
  }

  .hero-navbar-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .hero-content-container {
    padding: 40px 55px 40px 100px;
  }

  .hero-content {
    margin: 0;
  }

  .hero-title {
    font-family: var(--header-font-family);
    font-size: 72px;
    letter-spacing: 3.6px;

    color: var(--white-text-color);
  }

  .hero-description {
    font-size: 18px;
    line-height: 166.667%;
    letter-spacing: 0.36px;
  }
}

/* @media (min-device-pixel-ratio: 2),
  (min-resolution: 192dpi),
  (min-resolution: 2dppx) {
} */