/* ================= GENERAL ================= */
body {
    margin: 0;
    line-height: 1.7;
    color: #2c2c2c;
    background-color: #f2f6f8;
}

/* ================= HERO ================= */
.hero {
    background: linear-gradient(135deg, #05391c, #0f6f3a);
    color: #ffffff;
    padding: 60px 20px;
    text-align: center;
    position: relative;
}

.hero h1 {
    margin: 0;
    font-size: 2.3rem;
}

.hero p {
    margin-top: 10px;
    font-size: 1.1rem;
    opacity: 0.95;
}

.back-btn {
    position: absolute;
    left: 20px;
    top: 20px;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.4rem;
}

.subtitle {
  font-size: 18px;
  opacity: 0.9;
}

/* ================= SECTIONS ================= */
.section {
    max-width: 1100px;
    margin: 45px auto;
    padding: 0 20px;
}

.section h2 {
    color: #0f7326;
    margin-bottom: 12px;
}

/* ================= HIGHLIGHT ================= */
.highlight {
    background-color: #ffffff;
    padding: 35px 30px;
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.08);
}

.project-section {
  padding: 40px 80px;
  background: white;
  margin-bottom: 20px;
}

.project-section h2 {
  border-left: 5px solid #045b3b;
  padding-left: 15px;
}

.map-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.map-row img,
.map-slider img {
  width: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

details {
  margin-top: 20px;
}

summary {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 15px;
}

.map-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.highlight {
  background: white;
}

/* ================= SKILLS ================= */
.skills {
  display: flex;
  flex-direction: column; /* stack vertically */
  align-items: flex-start; /* left align text */
  padding-left: 20px; /* space for bullets */
  margin-top: 15px;
  list-style-type: disc; /* shows bullet points */
}

.skills li {
  margin-bottom: 10px; /* space between each skill */
  white-space: nowrap; /* keep text on one line */
}

/* ===== MAP SLIDER WITH ARROWS ===== */

.map-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.map-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  scrollbar-width: none;
}

.map-slider::-webkit-scrollbar {
  display: none;
}

.map-slider img {
  width: 300px;
  flex-shrink: 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.map-slider img:hover {
  transform: scale(1.05);
}

.slider-btn {
  background: #0b7014;
  color: white;
  border: none;
  font-size: 15px;
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.slider-btn:hover {
  background: #0b7014;
}

.slider-btn.left {
  margin-right: 10px;
}

.slider-btn.right {
  margin-left: 10px;
}

/* ===== EXTRA LARGE SOIL TYPE MAP ONLY ===== */
.map-row.soil-map-large img {
  width: 800px;        /* large but realistic */
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== GLOBAL MAP SIZE (ALL MAPS LARGE) ===== */
.map-row img,
.map-slider img {
  width:500px;        /* main size */
  max-width: 100%;     /* responsive */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ===== Make only the first map (location.jpg) larger ===== */
.map-slider img:nth-child(1) {
  width: 600px;      /* adjust size as needed */
  max-width: 100%;    /* still responsive */
  height: auto;
}
.map-slider img:nth-child(2) {
  width: 600px;      /* adjust size as needed */
  max-width: 100%;    /* still responsive */
  height: auto;
}

/* ===== Keep other maps standard size ===== */
.map-slider img {
  width: 600px;       /* normal size for other maps */
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ===== Make only the first map (location.jpg) larger ===== */
.map-slider img:nth-child(1) {
  width: 600px;      /* adjust size as needed */
  max-width: 100%;    /* still responsive */
  height: auto;
}
.map-slider img:nth-child(2) {
  width: 600px;      /* adjust size as needed */
  max-width: 100%;    /* still responsive */
  height: auto;
}

/* Make only the location map larger */
.map-slider img.location-map {
  width: 600px;      /* Adjust width as you like */
  max-width: 100%;    /* Keeps it responsive on smaller screens */
  height: auto;
  border-radius: 8px; /* Optional styling */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Make the DS Division map larger */
.map-slider img.ds-division-map {
  width: 1000px !important;      /* Force larger width */
  max-width: 100% !important;    /* Keeps it responsive */
  height: auto !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Optional: Location map too */
.map-slider img.location-map {
  width: 1000px !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


/* Keep all other maps standard */
.map-slider img:not(.location-map) {
  width: 500px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.land-cover-map {
  width: 95%;        /* Makes it big but responsive */
  max-width: 1300px; /* Optional: prevent it from being too wide */
  height: auto;      /* Maintain aspect ratio */
  display: block;
  margin: 0 auto;    /* Center the image */
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.map-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.map-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  scrollbar-width: none; /* Firefox */
}

.map-slider::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.map-slider img {
  flex-shrink: 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.map-slider img:hover {
  transform: scale(1.05);
}

.slider-btn {
  background: #0b7014;
  color: white;
  border: none;
  font-size: 18px;
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.slider-btn:hover {
  background: #0b7014;
}

/* ===== Study Area Slider Images Smaller ===== */
.map-slider img.location-map,
.map-slider img.ds-division-map,
.map-slider img.land-cover-map {
  width: 600px;       /* smaller width */
  max-width: 100%;    /* responsive */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Optional: hover effect still works */
.map-slider img:hover {
  transform: scale(1.05);
}

/* ===== Reduce size of 3 Study Area Maps ===== */
.map-slider img.location-map,
.map-slider img.ds-division-map,
.map-slider img.land-cover-map {
  width: 500px !important;       /* smaller width */
  max-width: 100% !important;   /* responsive */
  height: auto !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* ===== HERO SECTION (ensure relative positioning) ===== */
.project-hero {
  position: relative;
  padding: 60px;
  background: #0b7014;
  color: white;
}

/* ===== BACK BUTTON (HERO ONLY) ===== */
.back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #238953;
  color: white;
  text-decoration: none;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 6px;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.back-btn:hover {
  background: #0b7014;
}

.map-cert {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.map-cert img {
  width: 100%;
  display: block;
}

.map-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.map-cert:hover .map-overlay {
  opacity: 1;
}

.map-cert {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.map-cert img {
  width: 100%;
  display: block;
}

.map-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.map-cert:hover .map-overlay {
  opacity: 1;
}

/* ===== FINAL CSA MAP PREVIEW SIZE (ONLY) ===== */
.map-row .map-cert {
  width: 500px;        /* ← adjust: 280–350px looks good */
  max-width: 100%;
}

/* ================= DSD CSA MAPS ================= */
.dsd-csa-maps {
  margin-top: 40px;
}

.dsd-csa-maps h3 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
}

.dsd-container {
  margin-bottom: 40px;
}

.dsd-name {
  text-align: center;
  margin-bottom: 15px;
  font-size: 20px;
  color: #0b7014; /* You can change color */
}

.dsd-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* allows wrapping on smaller screens */
}

.dsd-map {
  flex: 1;
  text-align: center;
}

.dsd-map h5 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.dsd-map img {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: block;
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 600px) {
  /* Hero text smaller and padding reduced */
  .hero, .project-hero {
    padding: 40px 15px;
  }

  .hero h1 {
    font-size: 1.7rem;
  }

  .hero p,
  .subtitle {
    font-size: 1rem;
  }

  .back-btn {
    font-size: 12px;
    padding: 8px 12px;
  }

  /* Section padding reduced */
  .section {
    padding: 0 10px;
    margin: 30px auto;
  }

  /* Map rows stack vertically on small screens */
  .map-row,
  .dsd-row,
  .map-slider {
    flex-direction: column;
    gap: 15px;
  }

  /* Make all images fully responsive */
  .map-row img,
  .map-slider img,
  .map-cert img,
  .dsd-map img,
  .land-cover-map {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
  }

  /* Slider buttons smaller */
  .slider-btn {
    padding: 10px;
    font-size: 14px;
  }

  /* Highlight box padding smaller */
  .highlight {
    padding: 20px 15px;
  }

  /* Skills list spacing smaller */
  .skills {
    padding-left: 15px;
  }
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* ================= MOBILE RESPONSIVE FIX ================= */
@media (max-width: 768px) {

  /* HERO */
  .hero,
  .project-hero {
    padding: 35px 15px;
    text-align: center;
  }

  .hero h1 {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .hero p,
  .subtitle {
    font-size: 0.95rem;
  }

  .back-btn {
    font-size: 12px;
    padding: 8px 12px;
  }

  /* SECTIONS */
  .section {
    padding: 0 12px;
    margin: 25px auto;
  }

  .project-section {
    padding: 25px 15px;
  }

  /* FORCE ALL MAP LAYOUTS TO STACK */
  .map-row,
  .map-slider,
  .dsd-row {
    display: flex;
    flex-direction: column !important;
    gap: 15px;
  }

  /* KILL ALL FIXED IMAGE WIDTHS */
  .map-row img,
  .map-slider img,
  .map-cert,
  .map-cert img,
  .dsd-map img,
  .land-cover-map,
  .location-map,
  .ds-division-map {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* SLIDER: behave like normal list on mobile */
  .map-slider {
    overflow-x: hidden;
  }

  .slider-btn {
    display: none; /* hide arrows on mobile */
  }

  /* HIGHLIGHT BOX */
  .highlight {
    padding: 18px 15px;
  }

  /* SKILLS */
  .skills li {
    white-space: normal; /* allow text wrapping */
  }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {

    body {
        line-height: 1.6;
        font-size: 15px;
    }

    .hero {
        padding: 45px 16px;
    }

    .hero h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .hero p {
        font-size: 1rem;
        margin-top: 8px;
    }

    .subtitle {
        font-size: 16px;
    }

    .back-btn {
        font-size: 1.2rem;
        left: 12px;
        top: 12px;
    }
}

/* ================= SMALL MOBILES (VERY SMALL SCREENS) ================= */
@media (max-width: 480px) {

    .hero {
        padding: 35px 14px;
    }

    .hero h1 {
        font-size: 1.6rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    .subtitle {
        font-size: 15px;
    }

    .back-btn {
        font-size: 1.1rem;
    }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {

    .section {
        margin: 35px auto;
        padding: 0 16px;
    }

    .section h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
}

/* ================= SMALL MOBILES ================= */
@media (max-width: 480px) {

    .section {
        margin: 28px auto;
        padding: 0 14px;
    }

    .section h2 {
        font-size: 1.35rem;
        margin-bottom: 8px;
    }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {

    .highlight {
        padding: 28px 22px;
        border-radius: 10px;
    }

    .project-section {
        padding: 32px 24px;
        margin-bottom: 18px;
    }

    .project-section h2 {
        font-size: 1.6rem;
        padding-left: 12px;
    }

    .map-row {
        gap: 16px;
        justify-content: center;
    }

    .map-row img,
    .map-slider img {
        width: 100%;
        max-width: 360px;
    }

    summary {
        font-size: 16px;
        margin-bottom: 12px;
    }

    details {
        margin-top: 16px;
    }

    .map-slider {
        gap: 16px;
        padding-bottom: 8px;
    }
}

/* ================= SMALL MOBILES ================= */
@media (max-width: 480px) {

    .highlight {
        padding: 22px 18px;
    }

    .project-section {
        padding: 26px 18px;
    }

    .project-section h2 {
        font-size: 1.45rem;
    }

    .map-row img,
    .map-slider img {
        max-width: 100%;
    }

    summary {
        font-size: 15px;
    }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {

    .skills {
        padding-left: 16px; /* slightly smaller padding */
        margin-top: 12px;
    }

    .skills li {
        margin-bottom: 8px;
        white-space: normal; /* allow text to wrap */
        font-size: 0.95rem;
    }
}

/* ================= SMALL MOBILES ================= */
@media (max-width: 480px) {

    .skills {
        padding-left: 14px;
        margin-top: 10px;
    }

    .skills li {
        margin-bottom: 6px;
        font-size: 0.9rem;
    }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {

    .map-slider {
        gap: 16px;
        padding: 8px 0;
    }

    .map-slider img {
        width: 80%; /* responsive width for tablets / small screens */
        max-width: 280px;
    }

    .slider-btn {
        font-size: 14px;
        padding: 10px 12px;
    }

    .slider-btn.left {
        margin-right: 8px;
    }

    .slider-btn.right {
        margin-left: 8px;
    }
}

/* ================= SMALL MOBILES ================= */
@media (max-width: 480px) {

    .map-slider {
        gap: 12px;
        padding: 6px 0;
    }

    .map-slider img {
        width: 90%; /* almost full width for very small screens */
        max-width: none;
    }

    .slider-btn {
        font-size: 12px;
        padding: 8px 10px;
    }

    .slider-btn.left {
        margin-right: 6px;
    }

    .slider-btn.right {
        margin-left: 6px;
    }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {
    .map-row.soil-map-large img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }
}

/* ================= SMALL MOBILES ================= */
@media (max-width: 480px) {
    .map-row.soil-map-large img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {
    .map-row img,
    .map-slider img {
        width: 80%;          /* responsive width on tablets / small screens */
        max-width: 100%;
        height: auto;
    }
}

/* ================= SMALL MOBILES ================= */
@media (max-width: 480px) {
    .map-row img,
    .map-slider img {
        width: 95%;          /* almost full width for very small screens */
        max-width: 100%;
        height: auto;
    }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {
    .map-slider img:nth-child(1),
    .map-slider img:nth-child(2) {
        width: 90%;       /* responsive width for tablets */
        max-width: 100%;
        height: auto;
    }
}

/* ================= SMALL MOBILES ================= */
@media (max-width: 480px) {
    .map-slider img:nth-child(1),
    .map-slider img:nth-child(2) {
        width: 95%;       /* almost full width for small phones */
        max-width: 100%;
        height: auto;
    }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {
    .map-slider img {
        width: 90%;          /* responsive width for tablets */
        max-width: 100%;
        height: auto;
    }
}

/* ================= SMALL MOBILES ================= */
@media (max-width: 480px) {
    .map-slider img {
        width: 95%;          /* almost full width on small phones */
        max-width: 100%;
        height: auto;
    }
}

/* ================= DESKTOP (keep current sizes) ================= */
.map-slider img:nth-child(1),
.map-slider img:nth-child(2) {
    width: 600px;      /* desktop size */
    max-width: 100%;
    height: auto;
}

/* ================= TABLETS / MEDIUM SCREENS ================= */
@media (max-width: 768px) {
    .map-slider img:nth-child(1),
    .map-slider img:nth-child(2) {
        width: 85%;        /* responsive width for tablets */
        max-width: 100%;
        height: auto;
    }
}

/* ================= SMALL MOBILE SCREENS ================= */
@media (max-width: 480px) {
    .map-slider img:nth-child(1),
    .map-slider img:nth-child(2) {
        width: 95%;        /* almost full width on small phones */
        max-width: 100%;
        height: auto;
    }
}

/* ================= DESKTOP (keep current size) ================= */
.map-slider img.location-map {
    width: 600px;           /* desktop size */
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ================= TABLETS / MEDIUM SCREENS ================= */
@media (max-width: 768px) {
    .map-slider img.location-map {
        width: 85%;          /* responsive width for tablets */
        max-width: 100%;
        height: auto;
    }
}

/* ================= SMALL MOBILE SCREENS ================= */
@media (max-width: 480px) {
    .map-slider img.location-map {
        width: 95%;          /* almost full width for small phones */
        max-width: 100%;
        height: auto;
    }
}

/* ================= DESKTOP (keep large size) ================= */
.map-slider img.ds-division-map {
    width: 1000px !important;       /* desktop size */
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ================= TABLETS / MEDIUM SCREENS ================= */
@media (max-width: 1024px) {
    .map-slider img.ds-division-map {
        width: 90% !important;       /* responsive width for tablets */
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ================= SMALL MOBILE SCREENS ================= */
@media (max-width: 480px) {
    .map-slider img.ds-division-map {
        width: 95% !important;       /* almost full width on small phones */
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ================= DESKTOP (keep current size) ================= */
.map-slider img.location-map {
    width: 1000px !important;       /* desktop size */
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ================= TABLETS / MEDIUM SCREENS ================= */
@media (max-width: 1024px) {
    .map-slider img.location-map {
        width: 90% !important;       /* responsive width for tablets */
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ================= SMALL MOBILE SCREENS ================= */
@media (max-width: 480px) {
    .map-slider img.location-map {
        width: 95% !important;       /* almost full width for small phones */
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 1024px) {
    /* Standard maps except location-map */
    .map-slider img:not(.location-map) {
        width: 90%;           /* responsive width for tablets */
        max-width: 100%;
        height: auto;
    }

    /* Land cover map */
    .land-cover-map {
        width: 90%;
        max-width: 1000px;    /* optional cap for medium screens */
    }

    /* Map slider */
    .map-slider {
        gap: 16px;
        padding: 8px 0;
    }

    .slider-btn {
        font-size: 16px;
        padding: 10px 12px;
    }
}

/* ================= SMALL MOBILE SCREENS ================= */
@media (max-width: 480px) {
    /* Standard maps except location-map */
    .map-slider img:not(.location-map) {
        width: 95%;           /* almost full width on small phones */
        max-width: 100%;
        height: auto;
    }

    /* Land cover map */
    .land-cover-map {
        width: 95%;
        max-width: 100%;
    }

    /* Map slider */
    .map-slider {
        gap: 12px;
        padding: 6px 0;
    }

    .slider-btn {
        font-size: 14px;
        padding: 8px 10px;
    }
}

/* ================= DESKTOP (keep current size) ================= */
.map-slider img.location-map,
.map-slider img.ds-division-map,
.map-slider img.land-cover-map {
    width: 600px;       /* desktop size */
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ================= TABLETS / MEDIUM SCREENS ================= */
@media (max-width: 1024px) {
    .map-slider img.location-map,
    .map-slider img.ds-division-map,
    .map-slider img.land-cover-map {
        width: 85%;       /* responsive width for tablets */
        max-width: 100%;
        height: auto;
    }
}

/* ================= SMALL MOBILE SCREENS ================= */
@media (max-width: 480px) {
    .map-slider img.location-map,
    .map-slider img.ds-division-map,
    .map-slider img.land-cover-map {
        width: 95%;       /* almost full width on small phones */
        max-width: 100%;
        height: auto;
    }
}

/* ================= DESKTOP HOVER EFFECT ================= */
@media (hover: hover) and (pointer: fine) {
    .map-slider img:hover {
        transform: scale(1.05);
    }
}

/* ================= MOBILE / TOUCH DEVICES ================= */
@media (hover: none) {
    .map-slider img {
        transform: none; /* No hover effect on touch devices */
    }
}

/* ================= DESKTOP (keep current size) ================= */
.map-slider img.location-map,
.map-slider img.ds-division-map,
.map-slider img.land-cover-map {
    width: 500px !important;       /* desktop size */
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ================= TABLETS / MEDIUM SCREENS ================= */
@media (max-width: 1024px) {
    .map-slider img.location-map,
    .map-slider img.ds-division-map,
    .map-slider img.land-cover-map {
        width: 85% !important;       /* responsive width for tablets */
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ================= SMALL MOBILE SCREENS ================= */
@media (max-width: 480px) {
    .map-slider img.location-map,
    .map-slider img.ds-division-map,
    .map-slider img.land-cover-map {
        width: 95% !important;       /* almost full width on small phones */
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ================= DESKTOP (keep current padding) ================= */
.project-hero {
    position: relative;
    padding: 60px;
    background: #0b7014;
    color: white;
}

/* ================= TABLETS / MEDIUM SCREENS ================= */
@media (max-width: 1024px) {
    .project-hero {
        padding: 45px;  /* reduce padding for medium screens */
    }
}

/* ================= SMALL MOBILE SCREENS ================= */
@media (max-width: 480px) {
    .project-hero {
        padding: 30px 20px;  /* reduce top/bottom and add horizontal padding */
        text-align: center;   /* centre text for mobile readability */
    }
}

/* ================= DESKTOP (keep current styles) ================= */
.back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #238953;
    color: white;
    text-decoration: none;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 6px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.back-btn:hover {
    background: #0b7014;
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {
    .back-btn {
        top: 15px;
        left: 15px;
        padding: 8px 14px;   /* slightly smaller padding */
        font-size: 13px;     /* slightly smaller font */
    }

    .map-overlay {
        font-size: 16px;     /* smaller overlay text */
    }
}

@media (max-width: 480px) {
    .back-btn {
        top: 12px;
        left: 12px;
        padding: 6px 12px;   /* smaller padding for small phones */
        font-size: 12px;     /* smaller font */
    }

    .map-overlay {
        font-size: 14px;     /* smaller overlay text for small phones */
    }
}

/* ================= DESKTOP (keep current size) ================= */
.map-row .map-cert {
    width: 500px;       /* desktop size */
    max-width: 100%;
}

/* ================= TABLETS / MEDIUM SCREENS ================= */
@media (max-width: 1024px) {
    .map-row .map-cert {
        width: 80%;      /* responsive width for tablets */
        max-width: 400px; /* optional cap to prevent oversized maps */
    }
}

/* ================= SMALL MOBILE SCREENS ================= */
@media (max-width: 480px) {
    .map-row .map-cert {
        width: 95%;      /* almost full width on small phones */
        max-width: none;
    }
}

/* ================= DESKTOP (keep current styles) ================= */
.dsd-csa-maps {
    margin-top: 40px;
}

.dsd-csa-maps h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
}

.dsd-container {
    margin-bottom: 40px;
}

.dsd-name {
    text-align: center;
    margin-bottom: 15px;
    font-size: 20px;
    color: #0b7014;
}

.dsd-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.dsd-map {
    flex: 1;
    text-align: center;
}

.dsd-map h5 {
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}

.dsd-map img {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: block;
}

/* ================= TABLETS / MEDIUM SCREENS ================= */
@media (max-width: 1024px) {
    .dsd-csa-maps h3 {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .dsd-name {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .dsd-map h5 {
        font-size: 15px;
    }

    .dsd-row {
        gap: 15px;  /* slightly smaller gap for tablets */
    }
}

/* ================= SMALL MOBILE SCREENS ================= */
@media (max-width: 480px) {
    .dsd-csa-maps h3 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .dsd-name {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .dsd-map h5 {
        font-size: 14px;
    }

    .dsd-row {
        flex-direction: column; /* stack maps vertically */
        gap: 12px;
    }

    .dsd-map {
        width: 100%; /* ensure full width on small screens */
    }

    .dsd-map img {
        width: 95%; /* slightly smaller to prevent touching screen edges */
        margin: 0 auto; /* center the map */
    }
}

/* ================= GLOBAL BOX-SIZING ================= */
* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* ================= MOBILE RESPONSIVE (Small devices <600px) ================= */
@media (max-width: 600px) {

  /* HERO & PROJECT HERO */
  .hero,
  .project-hero {
    padding: 40px 15px;
    text-align: center;
  }

  .hero h1 {
    font-size: 1.7rem;
    line-height: 1.2;
  }

  .hero p,
  .subtitle {
    font-size: 1rem;
  }

  .back-btn {
    font-size: 12px;
    padding: 8px 12px;
  }

  /* SECTIONS */
  .section {
    padding: 0 10px;
    margin: 30px auto;
  }

  .project-section,
  .highlight {
    padding: 20px 15px;
  }

  /* SKILLS */
  .skills {
    padding-left: 15px;
  }

  .skills li {
    white-space: normal; /* allow wrapping */
  }

  /* MAPS & SLIDERS */
  .map-row,
  .map-slider,
  .dsd-row {
    flex-direction: column;
    gap: 15px;
  }

  .map-row img,
  .map-slider img,
  .map-cert img,
  .dsd-map img,
  .land-cover-map,
  .location-map,
  .ds-division-map {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  
/* ================= MOBILE RESPONSIVE (Medium devices <768px) ================= */
@media (max-width: 768px) {

  /* HERO */
  .hero,
  .project-hero {
    padding: 35px 15px;
    text-align: center;
  }

  .hero h1 {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .hero p,
  .subtitle {
    font-size: 0.95rem;
  }

  .back-btn {
    font-size: 12px;
    padding: 8px 12px;
  }

  /* SECTIONS */
  .section {
    padding: 0 12px;
    margin: 25px auto;
  }

  .project-section {
    padding: 25px 15px;
  }

  .highlight {
    padding: 18px 15px;
  }

  /* MAPS & SLIDERS */
  .map-row,
  .dsd-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
  }

  .map-row img,
  .map-slider img,
  .map-cert,
  .map-cert img,
  .dsd-map img,
  .land-cover-map,
  .location-map,
  .ds-division-map {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  
  /* SKILLS */
  .skills li {
    white-space: normal;
  }
}

/* ================= FORCE SLIDER & BUTTONS ON MOBILE ================= */
@media (max-width: 768px) {

  .map-slider {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
  }

  .slider-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .slider-btn {
    font-size: 14px;
    padding: 10px 12px;
  }
}

    @media (max-width: 768px) {
  .map-slider {
    scroll-snap-type: x mandatory;
  }

  .map-slider img {
    scroll-snap-align: start;
  }
}

/* ================= FINAL MOBILE FONT FIX (OVERRIDE ALL) ================= */
@media (max-width: 768px) {

  body {
    font-size: 14px;
    line-height: 1.55;
  }

  h1 {
    font-size: 1.45rem !important;
    line-height: 1.25;
  }

  h2 {
    font-size: 1.25rem !important;
  }

  h3 {
    font-size: 1.1rem !important;
  }

  p,
  li,
  span {
    font-size: 0.9rem !important;
  }

  .subtitle {
    font-size: 0.9rem !important;
  }

  .back-btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* ================= SMALL PHONES ================= */
@media (max-width: 480px) {

  body {
    font-size: 13.5px;
  }

  h1 {
    font-size: 1.35rem !important;
  }

  h2 {
    font-size: 1.15rem !important;
  }

  p,
  li {
    font-size: 0.85rem !important;
  }

  .subtitle {
    font-size: 0.85rem !important;
  }

  .back-btn {
    font-size: 9px !important;   /* default tiny size */
    padding: 2px 4px !important; /* default small button */
}

/* Small phones: <480px */
@media (max-width: 480px) {
    .back-btn {
        font-size: 8px !important;      /* smallest text */
        padding: 1px 3px !important;    /* smallest button size */
        top: 6px !important;            /* move a little up */
        left: 6px !important;           /* move a little left */
    }
}

/* Medium mobiles: <768px */
@media (max-width: 768px) {
    .back-btn {
        font-size: 10px !important;     /* slightly bigger for medium mobiles */
        padding: 2px 4px !important;    /* compact size */
        top: 8px !important;
        left: 8px !important;
    }
}