body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.p2 {
position: relative;
min-height: 100vh;
margin: 0;
padding: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}

.p2::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('../pictures/bg.png'); 
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.5; 
z-index: -1; 
}

.bg-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; 
z-index: -1;
}

/* Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #003366;
color: white;
font-family: century gothic;
text-align: center;
padding: 20px;
font-size: 18px;
z-index: 1000; 
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.9);
transition: all 0.3s ease-in-out;
}

/* Shrinking effect when scrolling */
header.shrink {
padding: 10px;
font-size: 14px;
}

/* Hide subtext when scrolling */
header.shrink #subtext {
display: none;
}

a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}

a:hover {
background-color: #ddd;
color: black;
}

.round {
position: absolute;  
  left: 10px;  
  background-color: white;
  border-radius: 5px;
  color: black;
}

/* Accessibility Button & Container */
.accessibility-container {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
}

#accessibility-button {
background: none;
border: none;
cursor: pointer;
padding: 10px;
}

#accessibility-button img {
width: 50px;
height: auto;
border-radius: 35px;
transition: transform 0.3s ease;
}

#accessibility-button:hover img {
transform: scale(1.1);
}

/* Dropdown Menu */
.accessibility-menu {
display: none;
position: absolute;
left: 60px;
top: 0;
background: #ffffff;
font-family: century gothic;
border-radius: 8px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
padding: 10px;
width: 200px;
}

.menu-title {
font-weight: bold;
font-size: 16px;
margin-bottom: 8px;
color: #333;
}

/* Styling buttons */
.accessibility-menu button {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 8px;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
border-radius: 5px;
transition: 0.3s;
}

.accessibility-menu button:hover {
background: #007bff;
color: white;
}

/* Dark mode styles */
.dark-mode {
background-color: black !important; 
color: white !important;             
}

/* Ensure images are not affected by dark mode */
.dark-mode img {
filter: none !important;  
}

/* Apply to all elements inside dark mode to make them black */
.dark-mode * {
background-color: black !important;  
color: white !important;            
border-color: white !important;    
}

/* Make buttons visible in dark mode */
.dark-mode button {
background-color: black !important;
color: white !important;
border: 1px solid white;
}

/* Make links visible in dark mode */
.dark-mode a {
color: #00bfff !important; 
}

/* Make input fields visible in dark mode */
.dark-mode input, .dark-mode textarea, .dark-mode select {
background-color: black !important;
color: white !important;
border: 1px solid white;
}

/* Accessibility dropdown remains black but text is visible */
.dark-mode .accessibility-dropdown {
background-color: black !important;
color: white !important;
border: 1px solid white;
}

.container {
max-width: 1800px;
margin: auto;
padding: 20px;
margin-top: 200px;
font-family: century gothic;
}

.gallery-section {
display: flex;
gap: 50px;
align-items: flex-start;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}

/* Image grid layout */
.image-grid {
display: grid;
grid-template-columns: repeat(3, 240px);
grid-auto-rows: 195px;
gap: 20px;
justify-content: center;
background: #fff;
padding: 16px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.image-box {
  position: relative;
  width: 100%; /* Ensure it's responsive */
  max-width: 240px; /* Maximum width */
  height: auto; /* Allow the height to adjust based on width */
  aspect-ratio: 240/195; /* Maintain the original aspect ratio */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.image-box:hover {
transform: scale(1.05);
}

.overlay {
position: absolute;
top: 0;               
left: 0;            
right: 0;          
bottom: 0;         
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
text-align: center;
display: flex;   
justify-content: center;
align-items: center;
font-size: 16px;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 10px;
font-weight: bold;
}

.image-box:hover .overlay {
opacity: 1;
}

/* Description area layout */
.description-area {
flex: 1;
background: #fff;
padding: 20px;
min-height: 140px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
color: #444;
margin: 0 auto;
}

.description-area h3 {
font-size: 20px;
margin-bottom: 2px;
}

.description-area p {
font-size: 15.5px;
margin-top: 9px;
}

.footer-container {
display: flex;
flex-direction: column;
padding: 20px;
background-color: #111;
color: #fff;
text-align: left;
margin-top: 20px;
}

.footer-top {
display: flex;
justify-content: left;
align-items: center;
}

.footer-bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px;
margin-top: 0px;
}

.footer-section {
flex: 1;
min-width: 200px;
}

ul {
list-style: none;
padding: 0;
}

ul li {
margin-bottom: 5px;
}

.footer-logo {
width: 150px;
}

.footer-container a {
color: #007bff !important;
background-color: transparent !important;
text-decoration: none;
padding: 0;
margin-top: 0px;
}

.footer-container a:hover {
text-decoration: underline;
color: #0056b3 !important;
}

.footer-container h3 {
font-family: Arial;
text-align: left;
font-weight: normal;
font-size: 25px;
}

.footer-copyright {
text-align: center;
padding: 10px;
border-top: 1px solid #444;
color: black;
background-color: white;
font-size: 14px;
}

/* Mobile Styles */
@media (max-width: 768px) {
/* Header adjustments for mobile */
header {
  padding: 10px;
  font-size: 16px;
}

/* Image grid layout for mobile */
.image-grid {
  grid-template-columns: repeat(2, 1fr); /* Two items per row on mobile */
  gap: 15px;
}

.image-box {
  width: 100%; /* Ensure the image takes full width of the grid cell */
  height: auto; /* Adjust height based on aspect ratio */
}

/* Gallery section layout on mobile */
.gallery-section {
  gap: 20px;
  justify-content: center;
}

.footer-container {
  gap: 15px;
}

.footer-container a {
  font-size: 14px;
}

.footer-copyright {
  font-size: 12px;
}

.footer-top,
.footer-bottom {
  flex-direction: column;
  align-items: center;
}

.footer-section {
  width: 100%;
  text-align: center;
}
}