@font-face {
  font-family: 'CustomFont';
  src: url('../fonts/junegull/junegull.ttf') format('truetype');
}

body {
  font-family: 'Quicksand', sans-serif;
}

body .lolo-font {
  font-family: 'customFont';
}

#site-title {
  font-size: 6rem;
}

.lolo-green {
  color: #719a71;
}

.green-background {
  background: #719a71;
}

.pink-background {
  background: rgb(236, 163, 143);
}

.grey-background {
  background-color: #4a4a4a;
}

.lolo-border {
  border-style: solid;
  border-radius: 3rem;
  border-width: 5px;
}

.border-pink {
  border-color: rgb(236, 163, 143);
}

.border-green {
  border-color: #719a71;
}

.lolo-grey {
  color: #4a4a4a;
}

.lolo-pink {
  color: rgb(236, 163, 143);
}

.farmers-markets {
  border-radius: 3rem;
  border-style: solid;
  border-width: 5px;
  color: white;
  background: rgb(236, 163, 143);
}

.main-container {
  margin-top: 4em;
}

html {
  scroll-behavior: smooth;
}

h1.display-5, h2.display-5 {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

nav.navbar {
  overflow-y: scroll !important;
}

.logo {
  max-width: 200px;
}

.text-section {
  padding: 2em;
}

@media screen and (min-width: 768px) {
  .text-section {
    padding: 2em 6em;
  }
}

.image-section {
  padding: 0 3em 2em 3em;
}

@media screen and (min-width: 768px) {
  .image-section {
    padding: 0 6em 6em 6em;
  }
}

@media screen and (min-width: 768px) {
  .title-row h1 {
    margin-top: 50%;
  }
}

.bg-img {
  background-image: url("../images/shapes.jpg");
  min-height: 600px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.contact-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  border-radius: 3rem;
}

@media screen and (max-width: 768px) {
  #contact .contact-container {
    width: 80%;
  }
}

.overlay-title {
  position: absolute;
  bottom: 0;
  right: 1rem;
  color: #fff;
  padding: 1rem;
}

.overlay-title-meet-the-team {
  position: absolute;
  border-width: 5px;
  border-radius: 3rem;
  bottom: 0;
  right: 1rem;
  padding: 1rem;
  background: white;
  color: #719a71;
  border-style: solid;
  padding: 2rem;
  margin: 2rem;
}

@media screen and (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
}

.pastas img {
  padding-top: 1rem;
  width: 33vw;
  height: 33vw;
  object-fit: cover;
}

@media screen and (max-width: 768px) {

  .pastas img {
    padding-top: 1rem;
    width: 50vw;
    height: 50vw;
    object-fit: cover;
  }
}

figure {
  border-radius: 3rem;
}

.profile-images {
  height: 55vh;
}

/* ===== SHARED STYLES FOR BOTH PAGES ===== */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state triggered by scrolling */
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Blog-specific styles */
.blog-post {
  margin-bottom: 3rem;
}

.blog-content p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Link hover effects - darken current color */
a:hover {
  filter: brightness(0.8);
  transition: filter 0.2s ease;
}

/* Ensure smooth transitions for all links */
a {
  transition: filter 0.2s ease;
}

/* Image loading optimization */
img {
  /* Enable hardware acceleration */
  transform: translateZ(0);

  /* Smooth loading transition */
  transition: opacity 0.3s ease;

  /* Images are fully visible by default */
  opacity: 1;
}

/* Lazy loading placeholder styles */
img[loading="lazy"] {
  /* Placeholder while loading */
  background-color: #f8f9fa;
  min-height: 200px;
}

/* Fix navbar full-width issues */
.navbar {
  width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: fixed !important;
  top: 0 !important;
  z-index: 1030 !important;
}

/* Ensure navbar container extends full width */
.navbar .container-fluid {
  max-width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Remove body margins/padding that cause white gaps */
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove default HTML margins */
html {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure main container starts right after navbar */
.main-container {
  margin-top: 0 !important;
  padding-top: 70px; /* Account for fixed navbar height */
}

/* Responsive Navigation Styles */
.navbar-nav .nav-link {
  font-size: 0.8rem !important; /* Much smaller base size */
  padding: 0.25rem 0.5rem !important; /* Compact padding */
}

.navbar-nav .nav-item {
  padding: 0 !important; /* Remove extra padding */
}

/* Responsive font sizes using Bootstrap approach */
@media (min-width: 576px) {
  .navbar-nav .nav-link {
    font-size: 0.9rem !important;
  }
}

@media (min-width: 768px) {
  .navbar-nav .nav-link {
    font-size: 1rem !important;
  }
}

@media (min-width: 992px) {
  .navbar-nav .nav-link {
    font-size: 1.1rem !important;
  }
}