/* style.css */

/* ── GLOBAL RESET & BACKGROUNDS ───────────────────────── */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0; padding: 0;
  color: #003d40;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-image: url('Images/island.jpg');
  position: relative;
  z-index: 0;
}
body::before {
  content: "";
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.9);
  z-index: -1;
}

/* ── PAGE-SPECIFIC BACKGROUNDS ───────────────────────── */
body.home    { background-image: url('Images/island.jpg'); }
body.about   { background-image: url('Images/reef.png'); }
body.report  { background-image: url('Images/fishs.png'); }
body.contact { background-image: url('Images/fishs.png'); }

/* ── NAVBAR ───────────────────────────────────────────── */
header { text-align:center; margin-bottom:20px; }
nav.navbar {
  display:inline-flex; align-items:center;
  position:sticky; top:10px; z-index:1000;
  background:#c9fdfe; padding:10px 30px;
  border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
nav.navbar .logo-link { margin-right:20px; }
.logo-img {
  height:100px; width:auto; border-radius:8px;
}
nav.navbar ul {
  list-style:none; margin:0; padding:0;
  display:inline-flex;
}
nav.navbar .menu {
  margin:0 10px;
  background:#b5f6c6; color:white;
  border-radius:3px; padding:6px 12px;
  font-size:1.1rem;
}
nav.navbar .menu:hover { background:rgb(102,161,255); }
nav.navbar a {
  text-decoration:none; text-transform:uppercase;
  color:white;
}

/* ── PAGE TITLE ───────────────────────────────────────── */
.page-title {
  display: block;        /* full‐width block */
  width: 100%;           /* span the container */
  margin: 20px 0;        /* vertical spacing top & bottom */
  text-align: center;    /* center the text */
  background: #9acbd0;
  color: #006A71;
  padding: 15px 25px;
  border-radius: 5px;
  font-size: 1.75rem;
}


/* ── HERO CALL TO ACTION ─────────────────────────────── */
.hero {
  background:rgba(255,255,255,0.9);
  padding:60px 20px; margin-bottom:40px;
  border-radius:10px; text-align:center;
}
.hero h2 {
  font-size:2.5rem; margin-bottom:20px;
  color:#006A71;
}
.hero p {
  font-size:1.2rem; margin-bottom:30px;
  color:#003d40;
}
.hero .cta-button {
  display:inline-block;
  text-decoration:none;
  background:#48a6a7; color:white;
  padding:15px 30px; border-radius:5px;
  font-size:1.1rem;
  animation:pulse 4s ease-in-out infinite;
  transition:background .3s,transform .2s;
}
@keyframes pulse {
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.03)}
}
.hero .cta-button:hover {
  background:#006A71;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transform:translateY(-2px);
}

/* ── ZIGZAG SECTIONS ─────────────────────────────────── */
main {
  max-width:1000px; margin:0 auto; padding:0 20px;
}
.zigzag {
  display:flex; align-items:center; gap:20px;
  margin-bottom:30px;
}
.zigzag:nth-child(even){flex-direction:row-reverse}
.zigzag h2 {
  flex:0 0 25%;
  background:#a0d2cf; color:#003d40;
  padding:10px 20px; border-radius:25px;
  margin:0; white-space:nowrap; text-align:center;
}
.zigzag .content {
  flex:1; background:white;
  padding:20px; border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  transition:transform .2s;
}
.zigzag .content:hover{transform:translateY(-5px)}
@media(max-width:768px){
  .zigzag{flex-direction:column!important}
  .zigzag h2{width:auto;margin-bottom:15px}
}

/* ── REPORT FORM & MAP ───────────────────────────────── */
#waste-form {
  background:white; padding:20px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  max-width:800px; margin:0 auto 40px;
}
#waste-form label {
  display:block; margin:12px 0 6px;
  font-weight:bold; color:#003d40;
}
#waste-form input[type=text],
#waste-form input[type=email],
#waste-form input[type=number],
#waste-form textarea {
  width:100%; padding:8px;
  border:1px solid #ccc; border-radius:5px;
  box-sizing:border-box;
}
#waste-form textarea{resize:vertical;min-height:80px}
.waste-types{
  display:flex;flex-wrap:wrap;gap:20px;
  margin-bottom:20px;
}
.waste-type-item{
  flex:1 1 140px;
  display:flex;align-items:center;gap:8px;
}
.waste-type-item img{width:32px;height:32px}
#map{
  width:100%;height:500px;
  border-radius:10px;margin:20px 0;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
#waste-form .form-actions{
  display:flex;justify-content:center;
  gap:12px;margin-top:30px;
}
#waste-form button{
  background:#48a6a7;color:white;
  padding:12px 24px;border:none;
  border-radius:5px;font-size:1rem;
  cursor:pointer;
  transition:background .3s,transform .2s;
}
#waste-form button:hover{
  background:#006A71;transform:translateY(-2px);
}
#waste-form .reset-button{
  background:#ccc;color:#003d40;
}
#waste-form .reset-button:hover{background:#999}
#waste-form input[type=file]{
  width:100%;padding:6px 8px;
  margin-bottom:20px;
  border:1px solid #ccc;border-radius:5px;
  background:#f9f9f9;color:#333;
}

/* ── FOOTER ───────────────────────────────────────────── */
footer{
  background:#004d53;color:white;
  padding:40px 20px 20px;font-size:.95rem;
}
.footer-container{
  display:flex;flex-wrap:wrap;
  gap:30px;max-width:1200px;
  margin:0 auto;justify-content:space-between;
}
.footer-column{flex:1 1 200px;min-width:180px}
.footer-column h3{margin-bottom:15px;color:#a0e7e5}
.footer-column p,
.footer-column li,
.footer-column a{color:#d4f1f0;line-height:1.6}
.footer-column ul{list-style:none;padding:0;margin:0}
.footer-column li{margin-bottom:8px}
.footer-column a{text-decoration:none}
.footer-column a:hover{text-decoration:underline}
.footer-social .social-icons{display:flex;gap:15px}
.footer-social img{width:24px;height:24px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.2);
  text-align:center;padding-top:15px;
  margin-top:20px;
}
.footer-bottom p{margin:0;font-size:.85rem;color:#cbe7e7}

/* ── NAVIGATION TOGGLE (MOBILE) ───────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px; height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  height: 4px;
  background: #006A71;
  border-radius: 2px;
}

/* on small screens: show toggle, hide menu */
@media(max-width: 768px) {
  nav.navbar {
    flex-wrap: wrap;
    position: relative;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #c9fdfe;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-top: 8px;
  }
  .nav-menu.open {
    display: flex;
  }
  .nav-menu .menu {
    margin: 10px 0;
    text-align: center;
    width: 100%;
  }
}
/*Thank You page centering*/
   .thankyou-content {
    /* center all text inside */
    text-align: center;
    /* give it some breathing room */
    padding: 60px 20px;
    /* constrain the width for better readability */
    max-width: 600px;
    margin: 0 auto;
  }