body {
    background-color: #FAF6ED;
    font-family: 'Nunito', sans-serif;
    color: #000;
  }

  /* .lead {
    font-size: 2.5em;  /* relative to your new base size */
    /* line-height: 1.0; */
  /* } */
  
  .brand-title {
    font-family: 'Bagel Fat One', sans-serif;
    font-size: 1.8rem;
  }
  
  .highlight {
    color: #02EC88;
  }
  
  .hero-section {
    min-height: 100vh;
    background-color: #FAF6ED;
  }
  
  .storyset-anim {
    max-width: 100%;
    height: auto;
  }
  
  h1, h2 {
    font-family: 'Bagel Fat One', sans-serif;
  }
  
  footer {
    /* background: #fff; */
    /* border-top: 1px solid #ddd; */
    /* font-size: 1.5em;  relative to your new base size */
    /* line-height: 1.0; */
  }

  .footer a {
    color: #000;
    text-decoration: none; /* remove underline */
    transition: color 0.3s ease;
  }


 .footer a:hover {
    color: #02EC88; /* your highlight green */
    text-decoration: underline; /* optional for hover feedback */
  }

  .navbar-nav .nav-link {
    font-family: 'Dongle', sans-serif;
    font-weight: 700;           /* heaviest Nunito weight */
    font-size: 2.1rem;          /* a bit larger than default (0.9rem) */
    letter-spacing: 0.75px;     /* gives it a clean, airy look */
    color: #000;
    transition: color 0.2s ease, transform 0.2s ease;
  }
  
  .navbar-nav .nav-link:hover {
    color: #02EC88;
    transform: scale(1.05);     /* subtle growth on hover for emphasis */
  }

  .section-img {
    max-width: 80%;
    max-height: 50vh;      /* good balance on most screens */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  
  /* For taller screens (like phones held upright) */
  @media (max-aspect-ratio: 3/4) {
    .section-img {
      max-height: 30vh;    /* shrink images on tall/narrow screens */
      max-width: 90%;      /* let them be a bit wider since height is smaller */
    }
  }
  
  
  .navbar {
    align-items: center; /* ensures vertical centering across all items */
  }
  
  
  .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    padding-top: 1.1rem;  /* adjust these slightly if still off */
    padding-bottom: 0.25rem;
  }
/* Text alignment */
.carousel-item blockquote,
.carousel-item figcaption {
  text-align: left;
  max-width: 800px;
  margin: auto;
  padding: 0rem;
}

/* Quote styling */
.carousel-item blockquote {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.6;
}

.carousel-item figcaption {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #555;
}

/* Controls container styling */
.carousel-controls {
  position: static;              /* take it out of absolute positioning */
  display: flex;
  justify-content: center;       /* center buttons horizontally */
  gap: 1rem;                     /* space between prev/next */
  margin-top: 1rem;              /* space above the buttons */
  pointer-events: auto;          /* buttons remain clickable */
}

.carousel-controls button {
  background-color: rgba(2, 236, 136, 0.85);
  border-radius: 50%; 
  width: 2.5rem;
  height: 2.5rem;
  border: none;
}

/* Optional: make arrows larger for mobile usability */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-size: 1.5rem 1.5rem;
}

/* Remove any leftover positioning rules */
.carousel-control-prev,
.carousel-control-next {
  position: static;
  left: auto;
  right: auto;
}



.btn-round {
    background-color: #02EC88; /* your highlight green */
    color: white;              /* text color */
    border: none;              /* remove default border */
    border-radius: 50px;       /* makes button pill‑shaped */
    padding: 0.8rem 2.4rem;    /* size */
    font-weight: bold;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
  }
  
  .btn-round:hover {
    transform: scale(1.1); 
    background-color: #02EC88; /* your highlight green */
    color: white;              /* text color */
  }

  .navbar-nav .nav-link.active {
    text-decoration: underline;
    text-decoration-color: #02EC88; /* your highlight green */
    text-decoration-thickness: 3px; /* thickness of underline */
  }

  .cameo-container {
    width: 100%;
    max-width: 400px; /* or whatever looks good */
    position: relative;
    margin: 0 auto;
}

  
  .illustration {
    width: 100%;
    height: auto;
  }
  
  .photo {
    position: absolute;
    width: 45.5%; /* adjust as needed */
    top: 40%;   /* position over the illustration */
    left: 50%;
    transform: translate(-33.25%, -53%);
    border-radius: 0%;
  }
/* 
  #contact-form {
    background-color: #ebebeb; 
    border-radius: 500px;
    border-color: #919191;
  } */
  
#contact-form input,
#contact-form textarea {
  border-radius: 20px;
  background-color: #FAF6ED; 
  border-color: #000;
  padding: 1rem;
  font-size: 1.2rem;
}

#contact-form label {
    /* padding: 0rem 0rem; */
    font-family: Dongle, sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    text-decoration: underline;
    text-decoration-color: #02EC88;
  }

  #contact-form ::placeholder {
    font-size: 1.2rem;
}

#contact-form input:focus,
#contact-form textarea:focus {
    outline: none; /* removes default focus outline */
    box-shadow: 0 0 0 0.2rem rgba(2, 236, 136, 1); /* optional: custom shadow */
    border-color: #02EC88; /* custom border color when focused */
}

/* Adjust spacing and alignment for checkbox + label */
#contact-form .form-check {
  display: flex;
  align-items: center;        /* vertically center label with checkbox */
  gap: 1rem;                /* horizontal spacing between checkbox and label */
  padding-left: 0rem;
}

/* Make checkbox green when checked */
#contact-form .form-check-input:checked {
  background-color: #02EC88;  /* your highlight green */
  border-color: #02EC88;
}

/* Force the white checkmark inside to become visible */
#contact-form .form-check-input:checked[type="checkbox"] {
  background-image: 
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath d='M16.7 5.3a1 1 0 0 0-1.4 0L8 12.6 4.7 9.3a1 1 0 1 0-1.4 1.4l4 4a1 1 0 0 0 1.4 0l8-8a1 1 0 0 0 0-1.4z'/%3e%3c/svg%3e");
}

#contact-form .form-check-input {
  border-radius: 10px;
  margin: 0;                  /* remove default margin */
  position: relative;
  top: 0px;                   /* adjust vertical alignment */
}

/* Make label match your form style */
/* #contact-form .form-check-label {
  font-family: 'Dongle', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  margin: 0;
} */

#form-status {
  font-family: Dongle, sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  transition: opacity 0.3s ease;
}

.btn.loading {
  position: relative;
  color: transparent !important; /* hide text */
  pointer-events: none; /* prevent double clicks */
}

.btn.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -0.6rem;
  margin-left: -0.6rem;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

#form-status.error {
  color: #dc3545; /* Bootstrap red */
}

.form-submit-row {
  display: flex;
  align-items: center;
  gap: 1rem;               /* space between button and feedback text */
  justify-content: flex-start; /* align left; use center if preferred */
}