/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');



/* ========================================
   GLOBAL STYLES
   ======================================== */

body, html {
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
  scroll-padding-top: 50px; /* adjust depending on navbar height */
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #333;
}

a {
  text-decoration: none;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'poppins', sans-serif;
}

h2 {
  font-weight: 600;
}

/* ========================================
   IMAGE STYLES
   ======================================== */

img {
  max-width: 100%;
  height: auto;
  /* Remove global fixed sizing that causes zoom/cropping */
}

#about img {
  width: 500px;
  height: 650px;
}

@media (max-width: 768px) {
  #about img {
    width: 300px;
    height: 400px;
  }
}

/* ========================================
   HERO SECTION STYLES
   ======================================== */

.hero {
  position: relative;
  height: 100vh; /* keep full viewport height */
  overflow: hidden;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero .slideshow {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  /* Slideshow now covers the whole hero area */
}

.hero .slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain; /* key: fills container without distortion */
  object-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: block;
}

.hero .slideshow img.active {
  opacity: 1;
  z-index: 0;
  /* active slide visible */
}

.hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* tweak darkness for readability */
  z-index: 1;
  /* overlay and content stacking */
}

.hero .content {
  position: relative;
  z-index: 2;
}

.hero span {
  color: #dddddd;
  font-style: italic;
  font-weight: lighter;
}

/* ========================================
   RESPONSIVE - HERO SECTION
   ======================================== */

@media (max-width: 768px) {
  .hero {
    height: 100vh;
    /* keep full hero height on small screens */
  }

  .hero .slideshow {
    height: 100%;
  }

  .hero .slideshow img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

/* ========================================
   RESPONSIVE - MOBILE IMAGE TOGGLE
   ======================================== */

.desktop-slide {
  display: block;
  /* Show on desktop */
}

.mobile-slide {
  display: none;
  /* Hide on desktop */
}

@media (max-width: 768px) {
  .desktop-slide {
    display: none;
    /* Hide on mobile */
  }

  .mobile-slide {
    display: block;
    /* Show on mobile */
  }
}

/* ========================================
   OTHER SECTIONS
   ======================================== */

section {
  padding: 100px 20px;
}