/* styles.css */
/*style for contact page */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
    text-align: center; /* Center the content horizontally */
}

header, nav, main, footer {
    margin: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left; /* Align text to the left */
}

header {
    background-color: #d088f2;
    color: #fff;
    padding: 20px;
    text-align: center; /* Center the header content */
}

header h1, header p {
    margin: 0; /* Remove default margins for better centering */
}

nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center; /* Center the navigation links */
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

main section {
    margin-top: 20px;
    padding: 20px;
    text-align: center; /* Center the main content */
}

footer {
    margin-top: 20px;
    text-align: center;
    color: #666;
}

/* Additional styling for links */
nav a, footer a {
    text-decoration: none;
    color: #d088f2;
    font-weight: bold;
}

nav a:hover, footer a:hover {
    text-decoration: underline;
}

/* Styling for the image */
.profile-image {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/*contact page */
#contact-content a {
  font-weight: bold;
    color: #d088f2; /* Match the color of the footer links */
    text-decoration: none;
}

#contact-content a:hover {
    text-decoration: underline;
}
/*  styles to make the table noticeable and match the header background */
#about-content table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#about-content th, #about-content td {
    border: 1px solid #d088f2; /* Match the color of the header background */
    padding: 8px;
    text-align: left;
}

#about-content th {
    background-color: #d088f2; /* Match the color of the header background */
    color: #fff;
}

#about-content tr:nth-child(even) {
    background-color: #f9f9f9; /* Alternating row background color */
}

#about-content tr:hover {
    background-color: #e0e0e0; /* Hover effect for rows */
}
/* First media query for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Styles for tablets */
    body {
        background-color: #f0f0f0; /* Example background color change for tablets */
    }
  nav .mobile-menu-icon {
      display: none;
  }
}

/* Second media query for desktops */
@media only screen and (min-width: 1025px) {
    /* Styles for desktops */
    body {
        background-color: #e0e0e0; /* Example background color change for desktops */
    }
  nav .mobile-menu-icon {
      display: none;
  }
  nav a:hover {
      text-decoration: underline;
  }
}

/* Additional styles outside of media queries */


body {
    font-family: 'Dosis', sans-serif;
}
/*photo gallery */
/* Additional styling for the gallery */
#gallery-content {
    text-align: center;
}

#photo-section, #video-section {
    margin-top: 20px;
}

#photo-section img {
    margin: 10px;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#video-section iframe {
    width: 100%;
    max-width: 800px;
    height: 450px;
}
#gallery-content {
    text-align: center; /* Center the content horizontally */
}

#photo-section img {
    max-width: 45%; /* Limit the maximum width of each image */
    margin: 10px; /* Add some margin between images */
    border-radius: 10px; /* Add rounded corners to the images */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a subtle box shadow */
}

#video-section iframe {
    max-width: 100%; /* Make the video take the full width of its container */
}
#gallery-content {
    text-align: center; /* Center the content horizontally */
}

#photo-section img {
    max-width: 30%; /* Adjust the maximum width to make the images smaller */
    margin: 10px; /* Add some margin between images */
    border-radius: 10px; /* Add rounded corners to the images */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a subtle box shadow */
}

#video-section iframe {
    max-width: 100%; /* Make the video take the full width of its container */
}
/* Add the following styles for the gallery page */
#photo-section figure {
    display: inline-block;
    max-width: 30%; /* Adjust the maximum width to make the images smaller */
    margin: 10px; /* Add some margin between images */
    text-align: center;
}

#photo-section img {
    max-width: 100%; /* Ensure images take the full width of their container */
    border-radius: 10px; /* Add rounded corners to the images */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a subtle box shadow */
}

#photo-section figcaption {
  background-color: #d088f2; /* Match the color of the header background */
  color: #fff; /* Text color */
  font-size: 18px; /* Adjust the text size as needed */
  font-weight: bold; /* Apply bold font */
  padding: 8px; /* Add padding for better visual */
  text-align: center; /* Center the text */
  margin: 0; /* Remove default margins */
}