.containerIndividualWalks {
    width: 100%; /* Set width (adjust as needed) */
    height: 100%; /* Set width (adjust as needed) */

    margin: 0 auto; /* Center the div */
    padding: 0px; /* Space inside the div */
    /* background-color: #f0f0f0; Optional background color */
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); Optional shadow */
    text-align: center; 
  }
  .gpxMaps{
    height: 600px;    
    width: 500px;    
    border: none;          /* Remove the default iframe border for a cleaner look */
    max-width: 1800px;     /* Optional: set a maximum width */
    display: block;        /* Ensures it's treated as a block-level element */
    margin: 0 auto;        /* Centers the iframe horizontally if needed */
    padding: 20px; /* Add padding inside the divs */
    box-sizing: border-box; /* Ensure padding and borders are included in the width */
    text-align: center; /* Center text inside the div */


  }

/* Button container to center and control spacing */
.button-container-homepage {
  text-align: center; /* Centers the buttons */
  margin-top: 0px; /* Remove extra space above */
  margin-bottom: 10px; /* Keep some spacing below */
  padding: 0; /* Ensure no extra padding inside */

}

/* Base button styles for mobile (default) */
.button-container-homepage button {
  display: inline-block;
  padding: 12px 24px; /* Good size for mobile */
  font-size: 1.8rem; /* Large text for mobile */
  border: 1px solid black; /* Thin black border */
  border-radius: 8px; /* Slightly rounded corners */
  background-color: transparent; /* No background */
  color: black; /* Black text */
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 5px; /* Reduce space between buttons */
  min-width: 140px; /* Keep a minimum width */
}

/* Hover effect */
.button-container-homepage button:hover {
  background-color: red; /* Turns red on hover */
  color: white; /* White text when hovered */
}

@media (max-width: 480px) { /* Small mobile screens */
  .button-container-homepage button {
    padding: 4px 8px; /* Very compact padding */
    font-size: 1rem; /* Small but readable text */
    min-width: 80px; /* Smaller width */
  }
}

@media (max-width: 320px) { /* Extra small screens */
  .button-container-homepage button {
    padding: 2px 6px; /* Minimal padding */
    font-size: 0.8rem; /* As small as possible while readable */
    min-width: 60px; /* Keep it compact */
  }
}






/*  */

  .button-container {
      margin: auto; /* Center this div within the body */
      display: flex; /* Center the button inside the container */
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      height: auto; /* Optional: adjust height to fit the button */
    }
    
    .download-button {
      display: inline-block; /* Makes the link look like a block-level element */
      font-size: 30px; /* Large font size */
      padding: 20px 40px; /* Add padding for a large button */
      text-decoration: none; /* Remove underline */
      color: white; /* Button text color */
      background-color: #007BFF; /* Initial button background color */
      border: none; /* Remove default border */
      border-radius: 8px; /* Rounded corners */
      cursor: pointer; /* Change cursor to pointer on hover */
      transition: background-color 0.3s, transform 0.2s; /* Smooth hover and scaling effect */
      text-align: center; /* Center text inside the button */
    }
    
    .download-button:hover {
      background-color: #28a745; /* Change to green on hover */
      transform: scale(1.05); /* Slight zoom effect */
    }
    
  .videoYoutube {
    height: 562.5px;    
    width: 1000px;    
    max-width: 1000px; /* Set the maximum width for both containers */
    margin: 0 auto; /* Center the containers horizontally */
    padding: 20px; /* Add padding inside the divs */
    box-sizing: border-box; /* Ensure padding and borders are included in the 

  }



  

*/
  

  }/* Ensures table container adapts to different screens */
.tableContainer {
  text-align: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  overflow-x: auto; /* Allow horizontal scrolling on small screens */
}

/* Table structure */
.tableContainer table {
  border-collapse: collapse;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  font-size: 22px;
  border: 1px solid black; /* Ensure table has visible borders */
}

/* Table cell styles */
.tableContainer th, 
.tableContainer td {
  border: 1px solid black; /* Increase border thickness */
  padding: 10px;
  text-align: left;
  font-size: 22px;
}

/* Responsive font size and table adjustments */
@media (max-width: 768px) {
  .tableContainer table {
    font-size: 16px;
  }
  .tableContainer th, 
  .tableContainer td {
    padding: 8px;
    font-size: 16px;
    border-width: 1px; /* Ensure borders remain visible */
  }
}

/* Further adjustments for smaller screens */
@media (max-width: 480px) {
  .tableContainer table {
    padding: 6px;
    font-size: 40px;
  }
  .tableContainer th, 
  .tableContainer td {
    font-size: 14px;
    padding: 6px;
    border-width: 1px; /* Keep borders thick for visibility */
  }
}




  .pictureContainer {
    text-align: center; 
    width: 100%;
    max-width: 1000px; /* Set the max width of the logo container */
    margin: 0 auto; /* Center horizontally */
    padding: 0;
    box-sizing: border-box;
}
.nav-bar {
  background-color: black;
  position: relative;
  width: 100%;
  max-width: 1000px; /* Same as the logo container */
  margin: 0 auto; /* Center horizontally */
}

.nav-bar::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: red;
  position: absolute;
  bottom: -3px;
  left: 0;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav-item {
  margin: 0;
}

.nav-link {
  text-decoration: none;
  color: white;
  padding: 10px 15px;
  display: block;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background-color: red;
}

.textContainer { 
  text-align: center; /* Center text inside the div */
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  font-size: 20px; /* Default size for computers */

}





  .videoContainer {
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  flex-wrap: wrap; /* Wrap the content if necessary */
  }


  .photoContainer {
      display: flex;
      width: 100%; /* Set width (adjust as needed) */
      height: 100%; /* Set width (adjust as needed) */
      justify-content: center; /* Center content horizontally */
      align-items: center; /* Center content vertically */
      flex-wrap: wrap; /* Wrap the content if necessary */
      }
      

      

      .iframe-youtube-container{
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; 
        
        height: 0;
      }/* Centering iframe container and making it slightly taller */
.iframe-gpx-container {
  text-align: center; 
  width: 95%; /* Wider but still responsive */
  max-width: 1200px; /* Ensures it doesn't get too large */
  margin: 0 auto; /* Centers horizontally */
  padding: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  padding-bottom: 48%; /* Slightly more height (between 40% and 60%) */
  height: 0;
}

/* Ensure the iframe fits properly */
.iframe-gpx-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
} 



.youtube-container {
  text-align: center; 
  width: 100%;
  max-width: 1000px; /* Matches .pictureContainer */
  margin: 0 auto; /* Centers it */  
  padding: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%; /* Maintains 16:9 aspect ratio */
  height: 0; /* Ensures proper scaling */
}

/* Make sure the iframe fits properly */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
@media (max-width: 768px) { /* Tablets and smaller devices */
  .iframe-gpx-container {
    padding-bottom: 175%; /* Increase height */
    width: 100%; /* Use full width */

  }
}

@media (max-width: 480px) { /* Small mobile screens */
  .iframe-gpx-container {
    padding-bottom: 175%; /* Make it much taller */
    width: 100%; /* Use full width */

  }
}

@media (max-width: 360px) { /* Extra small screens */
  .iframe-gpx-container {
    padding-bottom: 175%; /* Very tall for small devices */
    width: 100%; /* Use full width */

  }
}