/* Header Inner (flex container) */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1000px; /* Optional: controls how wide the header gets */
  padding: 0 20px;
}

/* Header Navigation Links */
.header-text nav {
  font-family: 'Dancing Script', cursive;
  font-size: 2.0rem;
  text-align: center; /* Center text inside <nav> */
  flex-grow: 1;       /* Allow nav to take up available space */
}

.header-text nav a {
  margin-right: 15px;
  text-decoration: none;
  color: #dda0dd;
}

.header-text nav a:hover {
  color: teal;
}

/* Logo Styling */
.logo {
  max-height: 80px;
  height: auto;
}

/* General Body Styles */
body {
  font-family: 'Dancing Script', cursive;
  background-color: #e6f2f2;
  color: #333;
  margin: 0;
  padding: 0;
}

/* Main Header Styles */
header {
  display: flex;
  flex-direction: column;
  align-items: center;  /* Center content horizontally */
  justify-content: center; /* Optional: center vertically if given height */
  text-align: center; /* Center text inside elements like <nav> */
  background-color: #1F2A30; /* Slate Grey */
  color: white;
  padding: 20px 0;
  font-family: 'Dancing Script', cursive;
  font-size: 48px;
  width: 100%;
  margin: 0 auto;
}

/* Title and Logo Text */
h1, .logo-text {
  font-family: 'Dancing Script', cursive;
}

/* Navigation Styles */
nav a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
}

/* Section Styling */
section {
  padding: 20px;
  max-width: 900px;
  margin: auto;
}

/* Logo Space */
.logospace {
  background-color: #008080; /* Teal */
  color: white;
  text-align: center;
}

/* Gallery Layout */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
  justify-items: center;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Space between cards */
  justify-content: center; /* Center items */
}

/* Card layout */
.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}

.gallery-item img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.gallery-item h3,
.gallery-item p {
  margin: 10px 0 0 0;
  word-wrap: break-word;
}

/* Mobile-first tweak: single column on small screens */
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .gallery-item {
    max-width: 90vw; /* Use 90% of screen width */
  }
}

.gallery-intro {
  max-width: 800px;
  margin: 20px auto;
  padding: 10px 20px;
  text-align: center;
  font-size: 1.1rem;
  color: #333;
  background-color: #f2f2f2;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.gallery-intro a {
  color: #0077cc;
  text-decoration: underline;
}

.gallery-intro a:hover {
  text-decoration: none;
}

/* Footer Styling */
footer {
  background-color: #dda0dd; /* Light purple */
  color: #333;
  text-align: center;
  padding: 20px;
  font-family: 'Dancing Script', cursive;
}

/* Links Styling */
a {
  color: #008080;
}

/* Navigation Styling */
nav {
  margin-top: 10px;
}

nav a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
  font-weight: bold;
}

/* Mobile Media Query for Smaller Screens */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;  /* Stack logo and nav vertically */
    align-items: center;     /* Center content horizontally */
    width: 100%;             /* Ensure it fills the entire width */
    padding: 0 20px;         /* Optional: padding */
  }

  .header-text nav {
    margin-bottom: 15px;     /* Add space between nav and logo */
    text-align: center;      /* Center nav items */
    width: 100%;             /* Ensure nav spans the full width */
  }

  .logo {
    max-height: 120px;       /* Adjust logo size for small screens */
    margin-top: 15px;        /* Optional: add space between nav and logo */
  }

  .header-text nav a {
    margin: 5px 0;           /* Adjust spacing between nav links */
  }
}