/* Socials - LinkTree */
  @font-face {
    font-family: 'MilkMango';
    src: url('Fonts/milk_mango-webfont.woff') format('woff'),
        url('Fonts/milk_mango-webfont.woff2') format('woff2'),
        url('Fonts/Milk Mango.ttf') format('truetype');
    /* Add any additional properties */
}

@font-face {
    font-family: 'ComfortaReg';
    src: url('Fonts/Comfortaa-Regular.woff') format('woff'),
        url('Fonts/Comfortaa-Regular.woff2') format('woff2');
    /* Add any additional properties */
}

@font-face {
    font-family: 'Farmshow';
    src: url('Fonts/Farmshow.woff') format('woff'),
        url('Fonts/Farmshow.woff2') format('woff2');
    /* Add any additional properties */
}


/* NAV BAR */
.header {
  border-bottom: 1px solid #EADEC7;
  font-family: 'Farmshow';
}

nav {
  font-family: 'Farmshow', sans-serif;
}

.navbar {
  position: static;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0rem;
  /* Adjust the padding values as needed */
  background-color: #3C7042;
  font-family: 'Farmshow';

}

.hamburger {
  display: none;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #EADEC7;
}

.nav-menu {
  position: static;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: auto;
  z-index: 3;
}

.nav-item {
  opacity: 0;
  /* Set initial opacity to 0 */
  margin-right: 1rem;
}

.nav-link {
  font-size: 25px;
  font-weight: 400;
  color: #EADEC7;
  font-family: 'Farmshow';

  white-space: nowrap;
  /* Prevent the text from wrapping */
}

.nav-link:hover {
  color: #BAB2A3;
}

.nav-link:visited {
  color: #EADEC7;
}

.nav-logo {
  text-align: left;
  margin: .5px 0;
  /* Adjust the margin values as needed */

}

.phone-image {
  display: none;
}

@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(-20px);
  }

  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.logo-image {
  width: 70%;
  height: auto;
  text-align: left;
  animation: fadeIn 1s ease-out;
}

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

  /* Adjustments for smaller screens */
  /* Adjustments for smaller screens */
  .nav-menu {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.3s ease-in-out;
      /* Add transition for smoother effect */
  }

  .nav-menu.active {
      transform: translateX(0);
      /* Show the menu when active */
  }

  .nav-item {
      margin: 10px 0;
      opacity: 0;
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }

  .nav-menu.active .nav-item {
      opacity: 1;
      /* Make the items visible when menu is active */
      transform: translateY(0);
  }

  .phone-image {
      max-width: 50%;
      height: auto;
      display: block;
      margin: 0 auto;
      padding-bottom: 100%;
  }

  body.menu-active {
      background-color: #3C7042;
      /* Set your desired green background color */
  }

  .navbar {
      position: relative;
      /* Make sure it's a positioned element */
      z-index: 4;
      /* Set a higher z-index than the green background */
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 4;
      /* Set a higher z-index than the green background */

  }

  .nav-logo,
  .nav-menu,
  .hamburger {
      background-color: transparent;
      /* Set a transparent background for these elements */
      position: relative;
      /* Make sure they are positioned elements */
      z-index: 5;
      /* Set a higher z-index than the green background */
  }


  .nav-logo {
      text-align: center;
      /* Center the logo */
      margin: 10px 0;
      /* Adjust the margin values as needed */
      position: relative;
      top: 15px;
      right: 50px;
      z-index: 5;
  }

  /* Make the header logo and navigation menu responsive */
  .nav-logo img {
      max-width: 80%;
      /* Adjust the maximum width as needed */
      height: auto;
  }


  .nav-menu {
      display: none;
      /* Hide the navigation menu by default on small screens */
      flex-direction: column;
      width: 100%;
      text-align: center;
      background-color: #BAB2A3;
      /* Change background color as needed */
      position: absolute;
      top: 70px;
      /* Adjust as needed */
      left: 0;
      z-index: 1;
  }

  .nav-menu.active {
      display: flex;
      /* Show the navigation menu when the hamburger menu is clicked */
  }


  .nav-item {
      padding: 15px;
      border-bottom: 1px solid #ddd;
      /* Add a border between menu items */
  }

  /* Make the hamburger menu visible on small screens */
  .hamburger {
      display: block;
      cursor: pointer;
      right: 25px;
      position: relative;
      /* Make sure it's a positioned element */
      z-index: 5;
      /* Set a higher z-index than the green background */
      left: 45%;
      top: -35px;
  }

  .hamburger.active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(2) {
      opacity: 0;
  }

  .hamburger.active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
  }

  @media (max-width: 768px) {
      .hamburger {
          display: block;
      }
  }

  /* Style adjustments for the banner image */
  img.banner-image {
      max-width: 100%;
      height: auto;
  }

  /* Style adjustments for the profile picture */
  img.square-img {
      max-width: 100%;
      height: auto;
  }

  /* Style adjustments for the content text */
  .tan {

      line-height: 1.5;
  }

  /* Style adjustments for the gallery items */
  .gallery-item img {
      max-width: 100%;
      height: auto;
  }


  /* Adjust the z-index of the navigation menu */
  .nav-menu {
      z-index: 3;
      /* Above the green background */
  }

  .navbar {
      position: relative;
      /* Make sure it's a positioned element */
      z-index: 4;
      /* Set a higher z-index than the green background */
  }

}

/* diff colors sections */
body {
    background-color: #3C7042;
    color:#3C7042;
    margin: 0;
   text-align: center;
}

h1 {
    text-align: center;
    padding-top: 2%;
    font-size: 90px;
    margin: 0%;
    font-family: 'Farmshow', sans-serif;
}

h2 {
    text-align: center;
    padding-top: 2%;
    font-size: 50px;
    margin: 0%;
    font-family: 'Farmshow', sans-serif;
}

a {
    color: #EADEC7;
    /* Set your desired color using a color code or name */
    text-decoration: none;
    /* Remove underline */
}

/* Style for visited links */
a:visited {
    color: #BAB2A3; /* Set a different color for visited links */

}

/* Style for hover (when mouse is over) links */
a:hover {
    color: #BAB2A3;
    /* Set a different color for hover state */
}

/* Style for active links (when being clicked) */
a:active {
    color: #3C7042;
    /* Set a different color for active state */
}

h4 {
    font-family: 'ComfortaReg', sans-serif;
    font-size: 20px;
}

p {

    font-family: 'Farmshow', sans-serif;
    padding: 20px;
    font-size: 36px;

}

.container {
    width: 100%;
    height: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  
  .links-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .links-container a {
    width: 80%;
    display: inline-block; /* Ensure the link behaves like a block element */
    padding: 10px 20px; /* Adjust padding for button-like appearance */
    text-align: center; /* Center the text within the button */
    border: 2px solid #BAB2A3; /* Add border to mimic button */
    background-color: #3C7042; /* Button background color */
    color: #EADEC7; /* Text color */
    text-decoration: none; /* Remove default underline */
    border-radius: 5px; /* Optional: Rounded corners for aesthetics */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
  }
  
  .links-container a:hover {
    background-color: #BAB2A3; /* Darker background color on hover */
    border: 2px solid #3C7042;
  }
  
  .margin-top-2 {
    margin-top: 32px;
  }
  
  .bottom {
    width: 100%;
    text-align: center;
    font-weight: bolder;
  }
  
  .bottom span {
    color: #3C7042;
  }
  
  .bottom svg {
    stroke: #3C7042;
    fill: #3C7042;
  }
  
  @media (min-width: 768px) {
    .link {
      width: 100%;
    }
  }
  
  @media (min-width: 576px) {
    .container {
      max-width: 540px;
    }
  }

  .tan {
    color:#EADEC7
  }