/* 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: 85%;
  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; }
  
  @media (max-width: 900px) {
  .logo {
    max-width: 100%;
  }

  .aboutminibox {
    padding: 1.5rem;
  }
}

  
  .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;
}

.catpic {
  display: block;
  margin: 0 auto;
  max-width: 50%;
  padding: 15px;
  background: transparent; }
  
  .graphicpic {
  display: block;
  margin: 0 auto;
  max-width: 60%;
  padding: 15px;
  background: transparent; }
  
    .graphicpic2 {
  display: block;
  margin: 0 auto;
  max-width: 70%;
  padding: 2px;
  background: transparent; }
  
 @media (max-width: 900px) {
  .catpic{
    max-width: 100%;
  }}

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

.image-row img {
  width: 50%;          /* each takes half the row */
  height: auto;
}
   
   
.edit-row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.edit-paragraph {
  flex: 1;
}

.edit-paragraph p {
  margin: 0 0 1rem 0;
}

.edit-row img {
  flex: 0 0 300px;
  max-width: 45%;
  height: auto;
}



@media (max-width: 768px) {
  .edit-row {
    flex-direction: column;
    align-items: center;
  }

  .edit-row img {
    flex: none;
    width: 50%;
  }
}


  /* Navigation bar container */
.navbar {
  width: 100%;
  background-color: #6b1f2b; /* burgundy */
  padding: 0.75rem 1.5rem;
  box-sizing: border-box;
}

/* 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;
   font-size: 16px;
}

.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;
  }
}

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

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

@media (max-width: 900px) {
  .coachingbox {
    flex-direction: column;
    gap: 2rem;
  }

  .coachingminibox {
    padding: 1.75rem;
  }
}

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 {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out;

  width: 90%;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.6;
  padding: 10px;
  margin: 0 auto;

  position: absolute;
  left: 0;
  right: 0;
}

.testimonial.active {
  visibility: visible;
  opacity: 1;

  position: relative;
}

.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: #6b1f2b;         /* 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: #E8B45C;
  text-decoration: none;
}

.email-link2 {
  color: #6b1f2b;         /* Change the link color */
  text-decoration: none;   /* Remove underline */
  font-weight: bold;       /* Make it bold */
  font-size: 22px;       /* Slightly increase size */
  display: block;
  text-align: center;

  overflow-wrap: break-word;
  word-break: break-word;
  padding: 10px;
}


.email-link2:hover {
  color: #E8B45C;
  text-decoration: none;
}


.fancytext {
  color: #6b1f2b;          /* Change the link color */
  text-decoration: none;   /* Remove underline */
  font-weight: bold;       /* Make it bold */
  font-size: 22px;       /* Slightly increase size */
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center;
  padding: 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.02em;
  
    background: #ede4d2;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  
}

.center-wrapper {
  text-align: center; /* centers the card itself */
  padding:20px;
}

.fancytext2 {
  
color: #6b1f2b;
  font-weight: bold;
  font-size: 20px;

  display: inline-block;
  text-align: center;

  padding: 1.25rem 1.75rem;
  background: #ede4d2;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  max-width: 40ch;
  overflow-wrap: break-word;
}

.fancytext3 {
  color: #6b1f2b;
  font-weight: bold;
  font-size: 20px;

  display: inline-block;          /* shrink to content */
  text-align: center;

  padding: 1.5rem;
  background: #ede4d2;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  max-width: 40ch;                /* readable line length */
  overflow-wrap: break-word;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.02em;
}




/* === 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;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
               

}

.faq-item.open .faq-answer {
  max-height: 500px; /* big enough for content */
}

.faq-question {
   font-size: 20px;             /* larger text for the question */
  color: #6b1f2b;             /* your burgundy text color */
  font-weight: bold;
  font-family: 'Merriweather', serif;
  width: 100%;
  text-align: left;
  padding: 1rem;
  background: #ede4d2;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.faq-item.open .faq-question {
  background: #E8B45C; /* golden highlight for active */
}

/* === 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;
  }
}

.contact-form {
  max-width: 500px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form label {
  font-weight: bold;
  color: #6b1f2b;
}

.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 18px;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #c8b8a6;
  background-color: #fff8f0;
}

.contact-form textarea {
  resize: vertical; /* lets users resize height only */
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #E6A01A; /* your desaturated gold */
  box-shadow: 0 0 0 2px rgba(230, 160, 26, 0.25);
}

.contact-form button {
  align-self: flex-start;
  background-color: #6b1f2b;
  color: #e0c27a;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1.25rem;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #e0c27a;
  color: #6b1f2b;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1000px;
  margin: 2rem auto;
}

/* Form takes the available space */
.contact-form {
  flex: 1;
}

/* Image stays a sensible size */
.catpic {
  flex: 0 0 300px;
  max-width: 50%;
  height: auto;
}


@media (max-width: 768px) {
  .contact-row {
    flex-direction: column;
    align-items: center;
  }

  .catpic {
    width: 60%;
  }
}

.thank-you {
  display: none;       /* hidden initially */
  text-align: center;
  color: #5a3e36;      /* matches your palette */
  font-weight: bold;
  margin-top: 1rem;
}






.commission-thumb {
  cursor: pointer;
}



.comcontainer {
  display: flex;
  flex-wrap: wrap;        /* allows multiple images per row */
  gap: 1rem;              /* spacing between images */
  justify-content: center; /* center the images horizontally */
}

.comimage {
  flex: 1 1 300px;        /* grow and shrink, with min width of 300px */
  max-width: 100%;        /* don’t exceed container width */
  cursor: pointer;
}

.comimage img {
  width: 100%;            /* fill the container */
  height: auto;           /* maintain aspect ratio */
  display: block;         /* fixes spacing issues in Safari */
}





.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.lightbox.hidden {
  display: none;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 95%;
  text-align: center;
  color: #fff;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  margin-bottom: 1rem;
}

.lightbox-close {
  position: absolute;
  top: -20px;
  right: -40px;
  font-size: 2rem;
  cursor: pointer;
   color: #fff; /* makes the X white */
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
   border: none;  /* remove default button border if any */
}


.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  font-size: 2rem;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}

.lightbox-nav.prev {
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-nav.next {
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-nav:hover {
  background: rgba(0,0,0,0.85);
}

.lightbox-image-container {
  position: relative;  /* so buttons are positioned relative to the image */
  display: inline-block; /* shrink to the size of the image */
}


#lightbox-title {
  color: #ffffff; /* white text */
  font-family: 'Merriweather', serif; /* Merriweather font */
  font-weight: normal; /* optional, adjust if you want bold */
  font-size: 1.3rem; /* adjust size if needed */
  margin: 0.5rem 0; /* spacing around the title */
  text-align: center; /* center the title */
}

/* Mobile safety */
@media (max-width: 600px) {
  .lightbox-nav.prev { left: 10px; }
  .lightbox-nav.next { right: 10px; }
}