/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #fff8f0; /* soft cream */
  font-family: Verdana;
  color: #222; /* dark grey */
  line-height: 1.6;
  margin: 0 auto;
  padding: 0;
  font-size: 19px;
  text-align: justify;
    background-image: url("images/paper.jpg");
   background-repeat: repeat;
  background-position: top center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-wrapper {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  
  flex: 1 0 auto; /* grow and shrink as needed */
  display: flex;
  flex-direction: column;
}

.main-content {
  background-color: #ede4d2; /* cream */
  padding: 2rem;
  max-width: 80%;
  margin: 2rem auto; /* centres it horizontally */
  border-radius: 8px; /* optional, softer look */
  text-align: justify;
}


/* === Headings === */
h1 {
  color: #6b1f2b; /* deep reddish brown */
  font-family: 'Merriweather', serif;
  margin-top: 0rem;
  font-size: 30px;
  font-weight: 600;
  text-align: left;
}

h2 {
  color: #6b1f2b; /* deep reddish brown */
  font-family: 'Merriweather';
  margin-top: 0rem;
  font-size: 20px;
  font-weight: 600;
}


h3, h4, h5 {
  color: #6b1f2b; /* deep reddish brown */
  font-family: 'Merriweather';
  margin-top: 0rem;
  font-size: 15px;
  font-weight: 600;
}



.logo {
  display: block;
  margin: 0 auto;
  max-width: 50%;
  padding: 15px;
  background: transparent; }
  
  .picture {
  display: block;
  margin: 0 auto;
  max-width: 80%;
  padding: 15px;
  background: transparent; }
  
  
   .picture2 {
  display: block;
  margin: 0 auto;
  max-width: 50%;
  padding: 15px;
  background: transparent; }
  
  .pictureparagraph
  { 
  font-size: 16px;
  text-align: center;
}

.image-row {
  display: flex;
  gap: 1rem;           /* space between images */
}

.image-row img {
  width: 50%;          /* each takes half the row */
  height: auto;
}
   
  
  /* Navigation bar container */
.navbar {
  width: 100%;
  background-color: #6b1f2b; /* burgundy */
  padding: 0.75rem 1.5rem;
}

/* List layout */
.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  justify-content: center;
}

/* Link styling */
.nav-links a {
  color: #f5f1e6; /* cream */
  color: #e0c27a; /* gold*/
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
 
}

/* Hover effect */
.nav-links a:hover {
 text-decoration: none;
  color: #f5f1e6;
}



.boxes {
  display: flex;
  justify-content: space-between; /* evenly space boxes */
  gap: 1rem; /* optional spacing */
  margin: 2rem 0;
}

.minibox {
  text-align: left;
  flex: 1; /* makes all boxes equal width */
  padding: 10px;
   border: 5px solid #6b1f2b;
}

.box img {
  max-width: 80px; /* or whatever fits your design */
  margin-bottom: 0.5rem;
}

/* === Mobile layout === */
@media (max-width: 900px) {
  .boxes {
    flex-direction: column;
    gap: 2rem;
  }

  .minibox {
    padding: 1.75rem;
  }
}


.aboutbox {
  display: flex;
  justify-content: space-between; /* evenly space boxes */
  gap: 1rem; /* optional spacing */
  margin: 2rem 0;
}

.aboutminibox {
  text-align: justify;
  flex: 1; /* makes all boxes equal width */
  padding: 20px;
  
}

.aboutbox img {
  max-width: 80%; /* or whatever fits your design */
  margin-bottom: 0.5rem;
  display: block;
   margin: 0 auto 0.5rem;
}

@media (max-width: 800px) {
  .aboutbox {
    flex-direction: column;
    gap: 2rem; /* more breathing room */
  }

  .aboutminibox {
    padding: 1.5rem;
  }
}

footer {
  text-align: center;
  margin-top: 4rem;
  font-size: 0.9rem;
  color: #6b1f2b;}
  
  .testimonial-container {
  position: relative;
  width: 100%;
  min-height: 250px;
  overflow: hidden;
  background: transparent;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
    margin: 40px auto; 
     display: block;
}

.testimonial {
  display: none;
  width: 90%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.6;
  padding: 10px;
  margin: 0 auto;
}

.testimonial.active {
  display: block;            /* only show active testimonial */
  opacity: 1;
}

.nav-btn2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 1.2rem;
}

.prev-btn2 {
  left: 10px;
}

.next-btn2 {
  right: 10px;
}

.nav-btn2:hover {
  background: rgba(0, 0, 0, 0.7);
}

.email-link {
  color: #5a3e36;          /* Change the link color */
  text-decoration: none;   /* Remove underline */
  font-weight: bold;       /* Make it bold */
  font-size: 20px;       /* Slightly increase size */
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.email-link:hover {
  color: #88B04B;
  text-decoration: none;
}



/* === Hamburger Button === */
.menu-toggle {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  background-color: #5a3e36;
  color: #f5f1e6;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  z-index: 1100;
  cursor: pointer;
  border-radius: 5px;
}

/* === Mobile Navigation === */
@media (max-width: 1150px) {

  /* Show hamburger */
  .menu-toggle {
    display: block;
  }

  /* Hide desktop nav */
  .navbar {
    display: none;
  }

  /* Show nav when opened */
  .navbar.open {
    display: block;
    position: absolute;
    top: 90px;              /* below logo + button */
    left: 0;
    width: 100%;
    background-color: #6b1f2b;
    padding: 1.5rem 0;
    z-index: 1000;
  }

  /* Stack links vertically */
  .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .nav-links a {
    font-size: 1.1rem;
  }

  /* Optional: prevent content jump */
  .page-wrapper {
    position: relative;
  }
}