body {
background: white;
}








/* Filter container styling */
.filter-container {
  position: fixed;
  left: 2vw;
  top: 12vw;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 20px;
  text-align: left;
}

/* Wrapper for individual filter labels to isolate width */
.filter-label-wrapper {
  display: inline-block; /* Ensures width is based only on content */
  text-align: left;
}

/* Actual filter label styling */
.filter-label {
  display: inline-block; /* Label takes up only the necessary width */
  cursor: pointer;
  padding: 5px 10px;
  
  font-family: Arial;
  font-weight:Bold;
  font-size: 2vw;
  color: black;
  
  transition: background-color 0.3s, color 0.3s;
}

/* Active filter style */
.filter-label.active {
  background-color: black;
  color: white;
}

/* Hover effect for filter labels */
.filter-label:hover {
  background-color: lightGrey;
  color: white;
}






  /* Responsive adjustments */
  @media (max-width: 970px) {
/* Filter container styling */
.filter-container {
  position: fixed;
  top:16vw;
  width: auto;
  display: flex;
  flex-direction: column; /* Stack filters vertically */
  gap: 0.5rem;
  margin-bottom: 20px;
}
  }
  
   /* Responsive adjustments */
  @media (max-width: 400px) {
/* Filter container styling */
.filter-container {
  position: fixed;
  top:20vw;
  width: auto;
  display: flex;
  flex-direction: column; /* Stack filters vertically */
  gap: 0.5rem;
  margin-bottom: 20px;
}
  }




 /* Fixed position for navigation */
 .TOMAIN_stone, .TOABOUT_stone, .Back_arrow, .TOWORKS_stone {
    position: fixed;
    top: 10px;
    z-index: 10;
  }
  
  /* Position and resize the TOMAIN_stone on larger screens */
  .Back_arrow {
    left: 10px;
    
  }
  
  .TOWORKS_stone {
    right: 10px;
  }
  
  .TOMAIN_stone {
    left: 10px;
  }
  
  .TOABOUT_stone {
    right: 10px;
  }
  
  /* Default sizes for larger screens */
  .TOMAIN_stone img, .TOABOUT_stone img, .Back_arrow img , .TOWORKS_stone img {
    width: 189px;
    height: 106px;
  }





  
@media (max-width: 600px) {
    

   

    footer {
        flex-direction: column;
        text-align: left;
    }
}
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    /* Adjust positioning and size on medium screens */
    .TOMAIN_stone, .TOABOUT_stone, .Back_arrow, .TOWORKS_stone {
      top: 5px;
    }
  
    .TOMAIN_stone img, .TOABOUT_stone img, .Back_arrow img, .TOWORKS_stone img {
      width: 100px; /* Scale down for smaller screens */
      height: auto; /* Maintain aspect ratio */
    }
  }
  
  



/* Grid container setup - Centering grid on the viewport */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
    grid-gap: 1rem;
    gap: 105px; /* Space between the grid items */
    justify-content: center; /* Center the items horizontally in the grid */
    align-items: center; /* Center items vertically in the grid */
    width: 75%; /* The grid container takes up 75% of the viewport width */
    margin-left:  auto; /* Center the grid container horizontally */
    margin-right:  auto; /* Center the grid container horizontally */
    margin-top:  10%; /* Center the grid container horizontally */
    margin-bottom:  5%; /* Center the grid container horizontally */
    padding: 20px; /* Add padding around the grid */
  }
  
  /* Each grid item - item1 */
  .item1 {
    width: 100%; /* Let the grid control the sizing, remove vw */
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
    display: flex;
    justify-content: center; /* Center the image horizontally inside the flexbox */
    align-items: center; /* Center the image vertically inside the flexbox */
  }
  
  /* Image styling to maintain aspect ratio and responsive scaling */
  .item1 img {
    width: 100%; /* Ensure image fits its container */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover;
  }
  
  
  /* Caption styling */
.caption {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: right;
    align-items: top;
    color: #000000;
    background: #ffffff00;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
    text-align: center;
    padding: 10px;
    pointer-events: none;
}

    h3 {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
	color: white;
    text-align: right;

}

h3 span {
	background-color: black;
	padding: 6px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	line-height: 4vw;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
	color: black;
    text-align: right;

}

h4 span {
	background-color: white;
	padding: 6px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	line-height: 4vw;
}


/* Show caption on hover */
.item1:hover .caption {
    opacity: 1;
}
  
  
  
  /* Hover effect for grid items */
  .item1:hover {
    transform: scale(1.1); /* Scale up the entire grid item, not just the image */
  }
  
  
  
  /* Media query for smaller screens */
  @media (max-width: 768px) {
    .grid-container {
      grid-template-columns: 1fr; /* Switch to a single column on small screens */
      width: 60%; /* Adjust grid width to 55% of the viewport */
      padding: 20px;
    }
  
    /* Center the grid items in single-column layout */
    .item1 {
      width: 100%; /* Make sure each item fills the full width */
      display: flex;
      justify-content: center; /* Ensure image is centered */
    }
  
    /* Make the images responsive on smaller screens */
    .item1 img {
      width: 100%; /* Ensure image takes full width */
      height: auto; /* Maintain aspect ratio */
      object-fit: cover;
    }
  }







.bottom-left-WORKS {
    
    float: left;
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif,Bold;
    bottom: 0;
    
  }
  .bottom-right-WORKS {
    float: right;
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
    bottom: 0;
   
  }