body {
    text-align: center;
    font-family: Arial, sans-serif;
  }

  .shadowbox-container {
    display: flex;               /* Arrange items in a row */
    align-items: center;         /* Vertically center shadowbox and images */
    justify-content: center;     /* Center entire row horizontally */
    gap: 20px;                   /* Space between images and shadowbox */
    margin: 20px 0;              /* Optional spacing above/below */
  }
  
  .hc2, .hc5 {
    height: 230px;               /* Smaller image size */
    width: auto;                  /* Keep aspect ratio */
  }
  
  .shadowbox {
    flex-shrink: 0;               /* Prevent shadowbox from shrinking */
    padding: 20px;
    text-align: center;
    background: #f0f0f0;          /* Or your current shadowbox style */
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
  }

  h1 {
    font-weight: bold;
    color: black;
    font-size: 26px;
  }
  
  h2 {
    font-weight: bold;
    color: black;
    font-size: 22px;
  }

  .hc1 {
    width: 100%;  
    height: auto;    
    display: block;   
    object-fit: cover;
    margin: auto;
  }

  .hc3 {
    width: 100%;  
    height: 500px;    
    display: block;   
    object-fit: cover;
    margin: auto;
  }

  .footer-text {
    max-width: 300px;      /* Optional width limit */
    margin: 20px auto;     /* Center horizontally and add spacing */
    padding: 15px 0px;    /* Space inside shadowbox */
    text-align: center;    /* Center the text */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Shadow effect */
    background: #f0f0f0;  /* Optional background */
    border-radius: 10px;   /* Rounded corners */
    font-size: 16px;
  }

  .footer-text a {
    color: #000;          /* Link color */
    text-decoration: none; /* Remove underline */
    font-weight: bold;     /* Optional */
  }
  
  .footer-text a:hover {
    text-decoration: underline; /* Underline on hover */
    color: #333;               /* Slight color change on hover */
  }

  		/* Home button styling */
      .home-button {
        display: inline-block;
        margin: 15px auto;
        padding: 10px 20px;
        background: #f0f0f0;
        color: #000;
        font-weight: bold;
        text-decoration: none;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        transition: all 0.3s ease;
      }
  
      .home-button:hover {
        background: #e0e0e0;
        color: #333;
        transform: scale(1.05);
      }
  
      /* Centering inside header */
      .home-container {
        text-align: center;
      }

      .isu-container {
        text-align: center;
      }

      .isu-button {
        display: inline-block;
        margin: 15px auto;
        padding: 10px 20px;
        background: #f0f0f0;
        color: #000;
        font-weight: bold;
        text-decoration: none;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        transition: all 0.3s ease;
      }
  
      .isu-button:hover {
        background: #e0e0e0;
        color: #333;
        transform: scale(1.05);
      }

    /* Default audio player */
.player {
  width: 300px;   /* Desktop width */
  max-width: 100%; /* Prevent overflow */
}

.quote {
  margin: 15px auto;
  font-style: italic;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
  max-width: 90%;
}

  /* -------- MOBILE STYLES -------- */
@media (max-width: 768px) {
  .shadowbox-container {
    flex-direction: column;  /* Stack vertically */
    gap: 15px;               /* Less spacing */
  }

  .hc2, .hc5 {
    height: 180px;           /* Smaller on mobile */
  }

  h1 {
    font-size: 22px;
  }

  h2 {
    font-size: 18px;
  }

  .hc3 {
    height: 300px;           /* Reduce large image height */
  }

  .footer-text {
    max-width: 90%;          /* Expand to fit screen */
    font-size: 14px;
    padding: 10px;
  }

  .home-button {
    width: 80%;         /* Full-width style button on mobile */
    max-width: 300px;   /* Prevent over-expansion */
    font-size: 16px;
    padding: 12px;
  }

  .isu-button {
    width: 80%;         /* Full-width style button on mobile */
    max-width: 300px;   /* Prevent over-expansion */
    font-size: 16px;
    padding: 12px;
  }
  .player {
    width: 220px;   /* Smaller for tablets/phones */
  }
  .quote {
    font-size: 15px;
    max-width: 95%;  /* allow more width on smaller screens */
    margin: 12px auto;
    padding: 0 10px; /* add breathing room */
  }
}

/* ---------- EXTRA-SMALL MOBILE (≤480px) ---------- */
@media (max-width: 480px) {
  .hc2, .hc5 {
    height: 150px;   /* Shrink side images further */
  }

  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 16px;
  }

  .hc3 {
    height: 220px;   /* Much smaller large image */
  }

  .footer-text {
    font-size: 12px;
    padding: 8px;
  }

  .home-button {
    width: 90%;        /* Almost full-width */
    font-size: 14px;
    padding: 10px;
  }

  .isu-button {
    width: 90%;        /* Almost full-width */
    font-size: 14px;
    padding: 10px;
  }

  .player {
    width: 180px;      /* Smaller audio player */
  }
  .quote {
    font-size: 14px;
    max-width: 100%; /* full width */
    margin: 10px auto;
    padding: 0 12px;
    line-height: 1.4; /* tighter spacing */
  }
}