/* ========================
   GALLERY SECTION
======================== */
.gallery-bg {
  background-color: #111; /* Off-black */
  padding: 50px 20px;
  color: white;
}

.gallery-title {
  color: white;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.gallery-title .highlight {
  color: #a35ef7; /* same as your previous highlight */
}

.gallery-menu {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.gallery-menu li {
  list-style: none;
  cursor: pointer;
  color: white;
  font-weight: 500;
}

.gallery-menu li.active {
  text-decoration: underline;
}

/* ========================
   SWIPER SLIDER
======================== */
.gallery-swiper {
  max-width: 1200px;
  margin: 0 auto;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
}

.swiper-slide {
  display: flex;
  justify-content: center;
}

.gallery-img {
  width: auto;
  max-width: 90%;        /* slightly reduce landscape/square */
  max-height: 400px;     /* limit portrait height */
  height: auto;
  transition: transform 0.3s ease;
  object-fit: cover;
}

.gallery-img:hover {
  transform: scale(1.02);
}

/* Swiper arrows outside images */
.swiper-button-next,
.swiper-button-prev {
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  cursor: pointer;
  z-index: 10;
}

.swiper-button-next {
  right: -60px;
}

.swiper-button-prev {
  left: -60px;
}

/* Arrow color */
.swiper-button-next::after,
.swiper-button-prev::after {
  color: white !important;
  font-size: 30px;
  opacity: 0.8;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
  transform: scale(1.2);
  opacity: 1;
}

/* Responsive: hide arrows on mobile */
@media (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
  .gallery-img {
    max-width: 100%;
    max-height: 300px;
  }
}

/* ========================
   ABOUT SECTION
======================== */
.about.new-container {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  flex-wrap: wrap;
}

.about .photo {
  flex-shrink: 0;
  max-width: 500px;
  width: 100%;
  overflow: hidden;
}

.about .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-height: 500px; /* crop top/bottom slightly */
}

.about .content {
  flex: 1;
  min-width: 250px;
}

/* Responsive: stack image above text on small screens */
@media (max-width: 900px) {
  .about.new-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  .about .content {
    min-width: auto;
  }
}

/* ========================
   HERO / PROFILE SECTION
======================== */
.hero {
  width: 100%;
  max-width: 1200px;
  display: block;
  margin: 0 auto 20px;
}

/* Full-width top section background */
.home-bg {
  position: relative;
  width: 100vw;
  min-height: 100vh; /* makes it fill the viewport */
  background: url('../imgs/geral/topbg2.webp') top center/cover no-repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Faded overlay */
.home-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5); /* fade */
  z-index: 0;
}

/* Content above overlay */
.home-bg .home.container {
  position: relative;
  z-index: 1;
  padding: 100px 20px 80px; /* top padding pushes content down from logo */
}

/* Limit profile pic size */
.home-bg .home.container img {
  max-width: 120px;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

/* ========================
   THUMB ROW / COLUMN GALLERY
======================== */
.thumb-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

.thumb-row img {
  width: 100%;
  display: block;
}

.column-gallery {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.02);
}

/* ========================
   MISC
======================== */
/* Limit max width for general images */
.hero img,
.thumb-row img,
.column-gallery img,
.about .photo img {
  max-width: 100%;
  height: auto;
}

/* ========================
   CONTACT SECTION: card-style container
======================== */
.contact.container {
  background-color: rgba(0, 0, 0, 0.6); /* dark semi-transparent box */
  padding: 60px 40px; /* space inside the box */
  border-radius: 12px; /* optional: rounded corners */
  max-width: 800px; /* limits width */
  margin: 60px auto; /* centers the box and adds space above/below */
}

.contact.container h2,
.contact.container h3 {
  margin: 0 0 20px 0;
}

.contact-bg {
  /* make sure background image still shows behind the box */
  background: url('../imgs/geral/contactbg.webp') center/cover no-repeat;
  padding: 100px 20px; /* keeps image visible above and below box */
  position: relative;
}

.contact-bg::before {
  /* optional: keep slight fade overlay */
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.3); /* lighter overlay so box stands out */
  z-index: 0;
}

.contact.container > * {
  position: relative; /* ensures content sits above overlay */
  z-index: 1;
}