/*========== Reset and Global Styles ==========*/
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background-color: #f4f4f4;
  color: #333;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 300;
}

/* Emphasized Section Titles */
.section-title.emphasis {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
}

/*========== Navbar ==========*/
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1500; /* above page content */
}

.navbar ul { list-style: none; display: flex; gap: 20px; }
.navbar ul li a {
  color: white; text-decoration: none; font-size: 18px;
  padding: 10px; transition: color 0.3s;
}
.navbar ul li a:hover { color: #ffcc00; }

/* active nav link highlight */
.navbar ul li a.active {
  color: #ffcc00; font-weight: 600; position: relative;
}
.navbar ul li a.active::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px; background-color: #ffcc00;
}

.logo { color: white; font-size: 20px; font-weight: bold; text-decoration: none; cursor: pointer; }
.logo:hover { color: #ffcc00; }
/* Reserve space for the fixed navbar on small screens */
@media (max-width: 768px) {
  /* set your mobile navbar height once here */
  :root { --mobile-nav-h: 72px; }  /* tweak 64–80px to taste */

  body {
    padding-top: var(--mobile-nav-h);
  }

  /* optional: make sure the hero doesn't add extra margin */
  #hero { margin-top: 0; }
}


/*========== Hamburger (white lines, mobile only) ==========*/
.menu-toggle {
  display: none;                /* hidden on desktop; shown in media query */
  background: none;             /* remove button bg */
  border: none;                 /* remove button border */
  cursor: pointer;
  padding: 10px;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  z-index: 2000;                /* above menu panel */
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle:focus-visible { outline: 2px solid #ffcc00; outline-offset: 3px; }
.menu-toggle span {
  display: block;
  width: 25px; height: 3px;
  background: #fff;             /* WHITE bars */
  border-radius: 2px;
  transition: all 0.3s ease;
}

/*========== Mobile menu panel ==========*/
@media (max-width: 768px) {
  .menu-toggle { display: flex; }

  .navbar ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background: rgba(0,0,0,0.95);
    position: absolute;
    top: 60px; left: 0;
    text-align: center;
    z-index: 1900;
    padding: 20px 0;
  }
  .navbar ul.active { display: flex; }
  .navbar ul li { margin: 15px 0; }
}

/* Desktop overrides to ensure full menu shows and hamburger hides */
@media (min-width: 769px) {
  .menu-toggle { display: none !important; }
  .navbar ul {
    display: flex !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
  }
}

/*========== Hero Section ==========*/
#hero {
  background: url('/Images/Abeto.jpg') no-repeat center center;
  background-size: cover;
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
  color: white; text-align: center;
}
@media (max-width: 768px) {
  #hero {
    background: url('/Images/Abeto Mobile.jpg') no-repeat center center;
    background-size: cover; height: 60vh;
  }
}
@media (max-width: 480px) { #hero { height: 50vh; } }

/*========== Section Titles & Divider ==========*/
.section-title {
  font-size: 36px; color: #871036; text-transform: uppercase;
  margin-bottom: 40px; transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.section-title:hover { color: rgb(19, 102, 30); transform: scale(1.05); }

.section-divider {
  width: 80%; height: 2px; background-color: #871036;
  margin: 50px auto; border-radius: 1px;
}

/*========== About Me Section (on home) ==========*/
#about { padding: 80px 10%; background-color: #f8f8f8; text-align: center; }

.about-container {
  display: flex; align-items: center; justify-content: center; gap: 40px;
  flex-wrap: wrap; max-width: 1200px; margin: 0 auto;
}
.about-text { flex: 1; min-width: 300px; text-align: left; color: #444; font-size: 18px; line-height: 1.6; }
.about-text h2 { font-size: 32px; margin-bottom: 20px; color: #871036; }
.about-photo { flex: 1; min-width: 250px; max-width: 400px; display: flex; justify-content: center; }
.about-photo img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

@media (max-width: 768px) {
  .about-container { flex-direction: column-reverse; gap: 20px; }
  .about-text { text-align: center; font-size: 16px; }
  .about-text, .about-photo { max-width: 100%; }
}

/*========== Photography Section (slideshow) ==========*/
#photography { padding: 80px 10%; background-color: #fff; text-align: center; }

.photo-gallery {
  display: flex; justify-content: center; align-items: center;
  position: relative; max-width: 800px; margin: 20px auto;
  overflow: hidden; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.gallery-container { position: relative; width: 100%; }

/* Fallback visible if JS fails */
.slide { display: block; }

.slide.fade img { animation: fadeEffect 1s ease-in-out; }
.slide img { width: 100%; height: auto; border-radius: 10px; }

/* Arrows (fixed to left/right) */
.gallery-container .prev,
.gallery-container .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border-radius: 50%;
  user-select: none;
  left: auto; right: auto;          /* reset any inherited values */
  z-index: 1600;
  pointer-events: auto;
}
.gallery-container .prev { left: 10px; }
.gallery-container .next { right: 10px; }

.gallery-container .prev:hover,
.gallery-container .next:hover { background: rgba(0,0,0,0.85); }

@keyframes fadeEffect { from { opacity: 0.5; } to { opacity: 1; } }

@media (max-width: 600px) {
  #photography { padding: 40px 5%; }
  .photo-gallery { width: 100vw; margin: 0 auto; padding: 0; }
  .gallery-container { width: 100%; }
  .slide img { width: 100%; height: auto; border-radius: 0; object-fit: cover; display: block; }
  .gallery-container .prev, .gallery-container .next { width: 48px; height: 48px; font-size: 22px; }
}

/*========== Instagram follow block (centered) ==========*/
.social-media-links {
  text-align: center;
  margin: 30px auto 10px;
}
.social-media-links p {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}
.social-media-links .social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.social-media-links .social-icons img { display: block; }

/*========== Portrait Gallery Section ==========*/
#portrait-gallery { padding: 60px 10%; background-color: #fdfdfd; text-align: center; }
.portrait-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.portrait-item {
  width: 400px; overflow: hidden; border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease;
}
.portrait-item:hover { transform: scale(1.03); }
.portrait-item img { width: 100%; height: auto; display: block; }

/*========== WEB DEVELOPMENT (centered & responsive) ==========*/
#webdev {
  background-color: #f9f9f9;
  padding: 60px 20px;
  border-radius: 10px;
}

/* Center the section heading ONLY inside Web Dev */
#webdev .section-title,
#webdev h2,
#webdev h1 {
  text-align: center;
  margin: 0 auto 40px;
  font-size: 36px;
  color: #871036;
  text-transform: uppercase;
  transition: color 0.3s ease, transform 0.3s ease;
}
#webdev .section-title:hover,
#webdev h2:hover,
#webdev h1:hover {
  color: rgb(19, 102, 30);
  transform: scale(1.05);
}

/* =========================
   WEB DEVELOPMENT (cards)
   ========================= */
#webdev {
  background-color: #f9f9f9;
  padding: 60px 20px;
  border-radius: 10px;
}

/* Responsive card grid */
#webdev .projects-container {
  max-width: 1200px;
  margin: 0 auto;                          /* center the whole grid */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Card */
#webdev .project-card {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;                   /* stack image + text + button */
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#webdev .project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* Card image */
#webdev .project-card img {
  width: 100%;
  height: 200px;                            /* consistent card height */
  object-fit: cover;                        /* crop nicely */
  display: block;
  transition: transform 0.35s ease;
}
#webdev .project-card:hover img {
  transform: scale(1.04);
}

/* Card text */
#webdev .project-card h3 {
  font-size: 20px;
  color: #871036;
  margin: 16px 16px 8px;
  font-family: 'Playfair Display', serif;
}

#webdev .project-card p {
  font-size: 16px;
  color: #555;
  margin: 0 16px 16px;
}

/* CTA link */
#webdev .project-link {
  display: block;
  margin: 0 16px 18px;
  padding: 12px 0;
  background-color: #871036;                /* burgundy */
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
#webdev .project-link:hover {
  background-color: rgb(19, 102, 30);       /* your green hover */
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* Small tweaks on narrower screens */
@media (max-width: 1024px) {
  #webdev .projects-container { gap: 20px; }
  #webdev .project-card img { height: 190px; }
}
@media (max-width: 640px) {
  #webdev { padding: 48px 16px; }
  #webdev .projects-container { gap: 18px; }
  #webdev .project-card img { height: 180px; }
}


/*========== FAQ Section ==========*/
#faq {
  background-color: #f9f9f9; padding: 60px 20px; border-radius: 10px;
  max-width: 900px; margin: 0 auto;
}
#faq .section-title { margin-bottom: 40px; }
.faq-container { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; }
.faq-column { flex: 1; min-width: 300px; }
.faq-item { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #ccc; }
.faq-question {
  background: none; border: none; color: black; font-size: 16px; font-weight: bold;
  cursor: pointer; padding: 8px 0; text-align: left; width: 100%; transition: color 0.3s ease;
}
.faq-question.active { color: #871036; }
.faq-question:hover { color: rgb(19, 102, 30); }
.faq-answer {
  display: none; color: #333; font-size: 14px; line-height: 1.6; text-align: justify; text-indent: 12px; padding-top: 6px;
}
@media (max-width: 768px) { .faq-container { flex-direction: column; gap: 20px; } }

/*========== Contact Section ==========*/
#contact {
  background-color: #f4f4f4; padding: 80px 20px; border-radius: 10px;
  max-width: 900px; margin: 0 auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
#contact .section-title { margin-bottom: 40px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { text-align: left; }
.form-group label { margin-bottom: 8px; color: #444; font-weight: bold; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 14px; font-size: 15px; border: 1px solid #ccc; border-radius: 5px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color: #871036; box-shadow: 0 0 5px rgba(135, 16, 54, 0.3); outline: none;
}
.submit-button {
  padding: 14px; font-size: 16px; font-weight: bold; border: none; border-radius: 5px;
  color: #fff; background-color: #871036; cursor: pointer; transition: background-color 0.3s, transform 0.3s;
}
.submit-button:hover { background-color: rgb(19, 102, 30); transform: scale(1.05); }
@media (max-width: 600px) {
  #contact { padding: 60px 15px; }
  .contact-form input, .contact-form textarea { font-size: 14px; }
  .submit-button { font-size: 15px; }
}

/*========== Footer Section ==========*/
/* (Your inline styles in HTML handle most, keep here for extra rules if needed) */