/* Hero */

.eg-hero {
      height: 100vh;
      overflow: hidden;
      margin-bottom: 140px;
}

.eg-hero-wrapper {
      height: 100%;
      display: flex;
      flex-wrap: wrap;
}

.eg-hero-left {
      height: 100%;
}

.eg-hero-top,
.eg-hero-bottom {
      height: 50%;
      padding: 4% 8%;
}

.eg-hero-top {
      flex: 1;
      display: flex;
      align-items: center;
      background-color: #ffffff;
      padding: 4rem 3rem;
}

.eg-hero-meta {
      font-size: 14px;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 1rem;
      font-weight: 500;
}

.eg-hero-text-inner h1 {
      font-family: 'Alata', Helvetica, Arial, sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 79px;
      color: #383838;
      line-height: 1.2em;
      margin: 0;
      text-align: left;
}

.eg-hero-bottom {
      background-color: #0d416a;
      display: flex;
      align-items: center;
      justify-content: flex-start;
}

.eg-hero-bottom p {
      font-size: 19px;
      color: #dcdcdc;
      line-height: 1.6em;
      margin: 0;
      width: 90%;
      text-align: justify;
}

.eg-hero-image {
      height: 100%;
      overflow: hidden;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.eg-hero-image.eg-fade-in {
      opacity: 1;
      transform: translateY(0);
}

.eg-hero-image img,
.eg-full-width {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
}

.eg-hero-bottom .eg-container {
      padding: 0 !important;
}

/* Galerie Slick */

.eg-gallery {
      margin-bottom: 140px;
}

.eg-gallery h1 {
      font-family: 'Alata', Helvetica, Arial, sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 44px;
      color: #383838;
      line-height: 1.2em;
      margin: 0;
      text-align: center;
      padding-bottom: 140px;
}

.slick-gallery {
      width: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
}

.slick-slide {
      margin: 0 15px;
      border-radius: 4px;
      display: flex !important;
      align-items: stretch;
      height: 60vh;
}

.slick-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
}



.slick-prev:before,
.slick-next:before {
      display: none;
      content: none;
}

.slick-prev,
.slick-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
}

.slick-prev {
      left: 15px;
}

.slick-next {
      right: 15px;
}

.slick-prev i,
.slick-next i {
      font-size: 30px;
      color: #ffffff;
}

/* Controls */

.eg-arrows {
      padding: 0 3%;
      font-size: 1.1rem;
      color: #000000;
      margin-top: 3rem;
      margin-bottom: 140px;
      text-align: center;
}

.eg-arrows-inner {
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center !important;
}

.eg-arrow-button {
      background-color: #0d416a;
      color: white;
      padding: 0.8rem 1.4rem;
      border-radius: 4px;
      text-decoration: none;
      font-weight: bold;
      transition: background-color 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
}

.eg-archive-button{
      padding: 1rem 1.4rem !important;

}

.eg-arrow-button:hover {
      background-color: #092f4d;
}

@media (max-width: 768px) {
      .eg-hero-wrapper {
            flex-direction: column;
      }

      .eg-hero-left,
      .eg-hero-image {
            height: auto;
            width: 100%;
      }

      .eg-hero-top,
      .eg-hero-bottom {
            padding: 12% 10%;
      }

      .eg-hero-text-inner{
            width: 100%;
      }


      .eg-hero-text-inner h1 {
            font-size: 42px;
            text-align: center;
      }

      .eg-hero-meta {
            text-align: center;
            font-size: 12px;
      }

      .eg-hero-bottom p {
            font-size: 16px;
            text-align: center;
            width: 100%;
      }

      .eg-gallery-heading {
            text-align: center !important;
      }
}