@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: sans-serif;
  background: #f8fafc;
  font-family: 'Montserrat', sans-serif; /* Replaces generic sans-serif */
  color: #334155; /* Softens the text color for better readability */
}

/* HEADER & NAV */
.header { 
  background: #000; 
  height: auto;           /* Changed from 15vh to auto to fit banner height */
  display: block;         /* Allows banner to dictate height */
  position: relative; 
  line-height: 0;         /* Removes tiny white gap under images */
}

.banner { 
  width: 100%;            /* Takes full width */
  height: auto;           /* Maintains proportions (1590x554) */
  display: block;
}

/* Desktop Navigation */
.tab-bar { display: flex; justify-content: center; background: #111; position: sticky; top: 0; z-index: 100; }
.tab-bar button { background: none; border: none; color: white; padding: 15px 25px; cursor: pointer; font-size: 16px; }
.active-tab { text-decoration: underline; text-underline-offset: 6px; color: #00bcd4 !important; }

/* Hamburger - Hidden on Desktop */
/* Ensure hamburger stays on top of the banner */
.hamburger { 
  position: absolute; 
  right: 20px; 
  top: 50%; 
  transform: translateY(-50%); /* Centers icon vertically against the banner */
  align-items: center;     /* Vertical centering */
  justify-content: center;  /* Horizontal centering */
  font-size: 28px;
  color: white;
  cursor: pointer;
  display: none;
  
  /* The Border and Background */
  background: rgba(255, 165, 0, 0.8); /* Semi-transparent black */
  border: 1px solid rgba(255, 255, 255, 0.5); /* Subtle white border */
  padding: 5px 10px;
  border-radius: 4px;
  line-height: 1;          /* Keeps the box tight around the icon */
  
  transition: all 0.2s ease;
}

/* Ensure the icon stays centered even when it changes to X */
@media (max-width: 768px) {
  .hamburger { 
    display: flex; /* Use flex to center the ☰ or ✖ */
  }
}

/* Optional: Slight color change when menu is open */
.hamburger.active {
  background: rgba(255, 100, 0, 0.9); /* Slightly darker orange/red */
}

.mobile-menu { 
  position: fixed; 
  top: 80px;               /* Starts right below the black header */
  right: 10px;             /* Small gap from the right edge */
  background: #323232; 
  width: 200px;            /* Lesser width for the popup look */
  display: none; 
  flex-direction: column; 
  z-index: 1001; 
  border-radius: 8px;      /* Rounded corners for the popup effect */
  box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Shadow to make it sit 'above' the page */
  overflow: hidden;        /* Keeps the links inside the rounded corners */
}

.mobile-menu a { 
  padding: 15px; 
  color: white; 
  text-align: left;        /* Left-aligned text looks cleaner in a small menu */
  border-bottom: 1px solid #333; 
  text-decoration: none; 
  font-size: 16px;
}

.mobile-menu a:last-child {
  border-bottom: none;     /* Removes the line from the last item */
}

.mobile-menu.show { 
  display: flex; 
}

main {
  flex: 1;                /* This tells the main content to grow and fill all available space */
  display: flex;
  flex-direction: column; /* Stack sections vertically */
  background: url('background.png');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

main, main * {
  font-weight: 600; /* 600 is a nice "semi-bold" that looks professional */
}

/* Ensure active sections start at the very top of the main area */
section.active {
  display: block;
  width: 100%;
}

/* CAROUSEL & SECTIONS */
section { display: none; padding: 20px; text-align: center; }
#home { padding: 0; } /* Remove gap between header/carousel */
section.active { display: block; }

section h2 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #0891b2;
}

.moderate-space {
  height: 8px; /* This is roughly half the height of a standard <br> line */
}

.carousel {
  width: 100%;
  height: 55vh;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.slides { display: flex; align-items: center; gap: 20px; }
.slide { flex: 0 0 50vh; height: 50vh; transition: transform 0.5s ease; }

.slide img { 
  width: 100%; height: 100%; object-fit: cover; border-radius: 12px; 
  transform: scale(0.85); opacity: 0.4; filter: blur(2px); 
  transition: transform 0.5s, opacity 0.5s, filter 0.5s; 
}

/* Fix double zoom: Stops image transition during the loop jump */
.no-transition img { transition: none !important; }

.slide.active-slide img { transform: scale(1); opacity: 1; filter: blur(0); }

/* DOTS STYLING */
.dots { display: flex; justify-content: center; gap: 12px; padding: 5px 0 15px 0; }
.dots span { height: 10px; width: 10px; background: rgba(0, 0, 0, 0.2); border-radius: 50%; cursor: pointer; }
.dots .active-dot { background: #0891b2; transform: scale(1.3); }

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
  .hamburger { display: block; } /* Show ☰ */
  .tab-bar { display: none; }    /* Hide desktop nav buttons */
  
  /* Square mobile images */
  .slide { flex: 0 0 85vw; height: 85vw; } 
  .carousel { height: auto; padding: 20px 0; }
  .slide img { transform: scale(1); opacity: 1; filter: none; }
}

.social {
  width: 32px;
  height: 32px;   /* ✅ force perfect square */

  display: inline-flex;   /* ✅ better centering */
  align-items: center;
  justify-content: center;

  font-size: 16px;
  margin: 5px;
  color: white;
  border-radius: 50%;
  text-decoration: none;
}

/* Mobile */
@media (max-width: 768px) {
  .social i {
    font-size: 16px;
  }
}

.ig {
  background: #E1306C;
}

.fb {
  background: #1877F2;
}

.social:hover {
  opacity: 0.8;
}

.wa-float {
  background: #25D366;
  color: white;
  font-size: 16px;
  padding: 10px 16px;
  border-radius: 30px; /* pill shape */
  text-decoration: none;
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* space between text & icon */

  width: fit-content;
  margin: 20px auto; /* 👈 centers horizontally */
  
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.wa-float i {
  font-size: 20px;
}

.wa-float:hover {
  opacity: 0.9;
}

#about {
  width: 50%;
  margin: 0 auto;
}

#about p {
  text-align: justify;
}

@media (max-width: 768px) {
  #about {
    width: 90%;
  }
}

#location {
  width: 50%;
  margin: 0 auto;  /* center it */
}

#location iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px solid #ddd;
  border-radius: 10px;
}

/* Mobile */
@media (max-width: 768px) {
  #location {
    width: 100%;
  }
}

/* Default: show desktop */
.mobile-text {
  display: none;
}

/* Mobile */
@media (max-width: 768px) {
  .desktop-text {
    display: none;
  }

  .mobile-text {
    display: inline;
  }
}

/* FOOTER STYLING */
.footer {
  margin: 0;
  position: relative;     /* Changed from fixed to relative */
  bottom: 0;
  background: #000;
  color: #888;            /* Sleek gray text */
  text-align: center;
  padding: 4px 0;
  font-size: 13px;
  width: 100%;
  line-height: 1;       /* Collapses extra space around the text */
}

/* MOBILE SPECIFIC FOOTER */
@media (max-width: 768px) {
  .footer {
    margin: 0;            /* IMPORTANT: Removes the default browser gap */
    position: fixed;      /* Remains visible while scrolling */
    bottom: 0;
    left: 0;
    z-index: 1000;
    border-top: 1px solid #333; /* Subtle separation */
  }

  /* Add padding to the body so the footer doesn't cover content */
  body {
    padding-bottom: 50px; 
  }
}

* {
  box-sizing: border-box;
}