body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }


/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }





/*PICTURE TOP*/
.team-picture {
  line-height: 0;
  position: relative;
}

.team-pic img {
  margin: 0;
  max-height: 96vh;
  object-fit: cover;
  width: 100%;
}
      




/*HEADINGS COLOR*/
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: #0B3D25;
}




/* FOOTER */
body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }


/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }


/* footer */
.footer-up {
  background-color: #33472B;
}


.footer-bottom {
  background-color: #33472B;
}


.img-min-size {
  min-width: 120px; /* Set minimum width */
  margin-top: 1.5vh;
}


.grey {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);    
}


.grey:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}
   
 
.social-footer {
      margin-top: 15px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
   
.social-footer a {
      color: #3d5534;
      transition: 0.3s;
      border-radius: 50%;
      width: 46px; /* Adjust icon width to make it larger */
      height: 46px; /* Adjust icon height to make it larger */
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #48623d;
      background-color: rgba(196, 215, 177, 0.786);
    }
   
.social-footer a:hover {
      color: #91B484;
      border-color: #91B484;
      background-color: #fff;
    }
   
.social-footer svg {
      width: 25px;
      height: 25px;
    }
   
       




/*NAVBAR*/

  .mynavbar {
    background-color: #0B3D25;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
  }

  .mynavbar .navbar-brand {
    font-size: 24px;
  }

  /* Apply CSS styles to the brand text */
.brand-text {
  font-size: 16px;
  color: #fff;
}

/* Use flexbox to arrange elements horizontally */
.brand-content {
  display: flex;
  align-items: center; /* Center elements vertically */
}

/* Add space between the logo and brand text */
.logo-nav {
  margin-right: 10px; /* Adjust the margin as needed */
}

  
  @media (max-width: 993px) {
   .mynavbar .navbar-brand  {
      padding-top: 0px; /* Adjust the padding value as needed */
    }
  }
 

  .mynavbar .navbar-nav .nav-item {
    margin-left: 1.5px;
    margin-right: 1.5px;
  }
  
  .mynavbar .navbar-nav .nav-link {
    color: #fff;
    padding: 5px 9px;
    transition: color 0.2s ease; 
  }

  .mynavbar .navbar-nav .nav-link:hover {
   color: #141C11; 
   background-color: #A7C39D;
   border-radius: 15px; 
  }

  .mynavbar .nav-link:focus {
   outline: none;
   color: #141C11; 
   background-color: #A7C39D;
   border-radius: 15px; 
  }

  .mynavbar .dropdown-menu {
    padding: 0.5rem;
    padding-left: 0.3rem;
    padding-right: 0rem ;
    margin-top: 0.30rem;
    background-color: #e3ece0;
    border: 1px solid #6d995d; 
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); 
    border-radius: 10px;
    width: 178px; /* Adjust the width as needed */
  }

  .mynavbar .dropdown-menu .dropdown-item {
    color: #141C11; 
    padding: 0.25rem;
    padding-right: 0rem;
    transition: opacity 0.3s ease;
    font-weight: normal;
  }
  
  .svg-menu{
    fill: #48623d;
    vertical-align: middle;
    margin-right: 8px;
  }

  .mynavbar .dropdown-menu .dropdown-item:hover {
    background-color: #e3ece0; 
    color: #6D995D;
    opacity: 1;
    font-weight: bold;
  }

  .mynavbar .dropdown-menu .dropdown-item:hover .svg-menu{
    fill:#6D995D;
  }


  /* Set initial background color and height for the navbar */
  .navbar-scroll {
    background-color: #0B3D25;
    height: 70px;
    transition: height 0.3s ease, opacity 0.3s ease;
  }
  
  /* Change opacity and height on the first 10px of scrolling */
  .navbar-scroll.scrolled {
    opacity: 0.8;
    height: 60px; 
  }
  


  /*MENU FOR MOBILE*/
  @media (max-width: 991.98px) {
    .mynavbar .navbar-collapse {
      background-color: #A7C39D;  
      border-radius: 15px;
      opacity: 1;
      box-shadow: 0 2px 4px #141C11; 
      margin-top: 1rem; 
    }

    .mynavbar .navbar-nav .nav-link:hover {
      background-color: #e3ece0;
    }

    .mynavbar .dropdown-menu {
      text-align: center;
      border-radius: 10px;
      border: none;
      margin-bottom: 5px;
      width:auto;
    }

  }
  
 /* Animation for dropdown menu */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply custom animation to the dropdown */
.custom-animation {
  animation-name: slideIn; 
  animation-duration: 0.3s;
  animation-timing-function: ease; 
  animation-fill-mode: forwards;
}
 
.logo-nav {
  max-height: 60px; /* Adjust the value to match your desired maximum height */
}




/*side bar*/


.sidebar {
  background-color: transparent;
  position: sticky;
  top: 200px;
  z-index: 100;
  padding: 10px;
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  }
  

.sidebar-item {
  list-style: none;
  font-size: 16px;
}


.sidebar-item > a {
  text-decoration: none;
  line-height: 1em;
  letter-spacing: 1px;
  color: black;
  padding: 0px;
  display: block;
  font-family: 'Times New Roman', Times, serif;
} 


.sidebar-item > a::before {
  content: attr(data-text);
  color: transparent;
  position: absolute;
  line-height: inherit;
  letter-spacing: 1px;
  padding: 0px;
  width: 0%;
  height: 32px;
  overflow: hidden;
  transition: 0.5s;
  border-right: 10px solid var(--clr);
  -webkit-text-stroke: 10px var(#017709);
  display: block;
  margin-left: -15px;
} 

.sidebar-item > a:hover::before,
.sidebar-item > a.active::before {
  width: 95%;
  height: 32px;
  filter: drop-shadow(0px 0px 25px var(--clr));
  font-family: 'Times New Roman', Times, serif;
  text-decoration: none;
  line-height: inherit;
  letter-spacing: 1px;
  text-transform: none;
  color: var(--clr);
  padding: 0;
  margin-left: 0;
}





      
  
 /*general*/     

.text {
text-align:justify 
}


hr{
  height: 3px; /* Set the height of the decorative line */
  background-color: #445F3A; /* Set the line color */
  transform-origin: left;
  transition: transform 0.3s;
}
      
.w-80{
  width: 80%;
}

.w-85{
  width: 85%;
}

.w-60 {
  width: 60%
}

.w-65 {
  width: 65%
}

.w-70{
  width: 70%
}

.w-75{
  width: 75%
}

.w-95 {
  width:95%;
}

.w-90 {
  width:90%;
}



      
.caption {
  caption-side: top;
  font-style: italic;
  text-align: center;
  color: #445F3A;
  padding: 4px;
}

.table-caption{
  caption-side: top;
  font-style: italic;
  color: #445F3A;
  padding: 4px;
}




/*References*/

.btn-ref {
  background-color: #fff;   /* Text color for the button */
  border: 2px solid #547648;  /* Border color if needed */
  padding: 15px 25px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}


.ref-circle {
  width: 35px;
  height: 35px;
  background-color: #547648;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.ref-circle svg {
  width: 1.5em;
  height: 1.5em;
  fill: #ffff;
  transition: transform 0.3s ease;
}

.ref {
font-size: 1.7em;
font-weight: 500;
color: #547648;
display: inherit;
border-radius: 0;
background: none;
box-shadow: none;
border-style: none;
margin-bottom: 0;
margin-top: 0;
line-height: 1.5;
}

.rotate-45 {
  transform: rotate(45deg);
}



/*IMG ANIMATIONS*/

@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Adjust the vertical distance as needed */
  }
}


  
.custom-links {
  text-decoration: underline;
  font-weight: bold;
  color: #71963F;
  box-shadow: #004812;
  transition: 0.3s ease-out;
}

.custom-links:hover{
  color: #0B3D25;
}
/*PICTURE TOP*/
.team-picture {
  line-height: 0;
  position: relative;
}

.team-pic img {
  margin: 0;
  max-height: 96vh;
  object-fit: cover;
  width: 100%;
}
      
           



/*HEADINGS COLOR*/
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: #0B3D25;
}




/* FOOTER */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  color: #fff;
}


.footer-up {
  background-color: #7a5d4f;
}


.footer-bottom {
  background-color: #624b40;
}


.grey {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);    
}


.grey:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}
   
 
.social-footer {
      margin-top: 15px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
   
.social-footer a {
      color: #3d5534;
      transition: 0.3s;
      border-radius: 50%;
      width: 46px; /* Adjust icon width to make it larger */
      height: 46px; /* Adjust icon height to make it larger */
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #48623d;
      background-color: rgba(196, 215, 177, 0.786);
    }
   
.social-footer a:hover {
  color: #91B484;
  border-color: #91B484;
  background-color: #fff;
}

.social-footer svg {
  width: 25px; /* Adjust SVG icon width to fit within the circle */
  height: 25px; /* Adjust SVG icon height to fit within the circle */
}




/*NAVBAR*/

  .mynavbar {
    background-color: #0B3D25;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
  }

  .mynavbar .navbar-brand {
    font-size: 24px;
  }

  /* Apply CSS styles to the brand text */
.brand-text {
  font-size: 16px;
  color: #fff;
}

/* Use flexbox to arrange elements horizontally */
.brand-content {
  display: flex;
  align-items: center; /* Center elements vertically */
}

/* Add space between the logo and brand text */
.logo-nav {
  margin-right: 10px; /* Adjust the margin as needed */
}

  
  @media (max-width: 993px) {
   .mynavbar .navbar-brand  {
      padding-top: 0px; /* Adjust the padding value as needed */
    }
  }
 

  .mynavbar .navbar-nav .nav-item {
    margin-left: 1.5px;
    margin-right: 1.5px;
  }
  
  .mynavbar .navbar-nav .nav-link {
    color: #fff;
    padding: 5px 9px;
    transition: color 0.2s ease; 
  }

  .mynavbar .navbar-nav .nav-link:hover {
   color: #141C11; 
   background-color: #A7C39D;
   border-radius: 15px; 
  }

  .mynavbar .nav-link:focus {
   outline: none;
   color: #141C11; 
   background-color: #A7C39D;
   border-radius: 15px; 
  }

  .mynavbar .dropdown-menu {
    padding: 0.5rem;
    padding-left: 0.3rem;
    padding-right: 0rem ;
    margin-top: 0.30rem;
    background-color: #e3ece0;
    border: 1px solid #6d995d; 
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); 
    border-radius: 10px;
    width: 178px; /* Adjust the width as needed */
  }

  .mynavbar .dropdown-menu .dropdown-item {
    color: #141C11; 
    padding: 0.25rem;
    padding-right: 0rem;
    transition: opacity 0.3s ease;
    font-weight: normal;
  }
  
  .svg-menu{
    fill: #48623d;
    vertical-align: middle;
    margin-right: 8px;
  }

  .mynavbar .dropdown-menu .dropdown-item:hover {
    background-color: #e3ece0; 
    color: #6D995D;
    opacity: 1;
    font-weight: bold;
  }

  .mynavbar .dropdown-menu .dropdown-item:hover .svg-menu{
    fill:#6D995D;
  }


  /* Set initial background color and height for the navbar */
  .navbar-scroll {
    background-color: #0B3D25;
    height: 70px;
    transition: height 0.3s ease, opacity 0.3s ease;
  }
  
  /* Change opacity and height on the first 10px of scrolling */
  .navbar-scroll.scrolled {
    opacity: 0.8;
    height: 60px; 
  }
  


  /*MENU FOR MOBILE*/
  @media (max-width: 991.98px) {
    .mynavbar .navbar-collapse {
      background-color: #A7C39D;  
      border-radius: 15px;
      opacity: 1;
      box-shadow: 0 2px 4px #141C11; 
      margin-top: 1rem; 
    }

    .mynavbar .navbar-nav .nav-link:hover {
      background-color: #e3ece0;
    }

    .mynavbar .dropdown-menu {
      text-align: center;
      border-radius: 10px;
      border: none;
      margin-bottom: 5px;
      width:auto;
    }

  }
  
 /* Animation for dropdown menu */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply custom animation to the dropdown */
.custom-animation {
  animation-name: slideIn; 
  animation-duration: 0.3s;
  animation-timing-function: ease; 
  animation-fill-mode: forwards;
}
 
.logo-nav {
  max-height: 60px; /* Adjust the value to match your desired maximum height */
}




/*side bar*/


.sidebar {
  background-color: transparent;
  position: sticky;
  top: 200px;
  z-index: 100;
  padding: 10px;
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  }
  

.sidebar-item {
  list-style: none;
  font-size: 16px;
}


.sidebar-item > a {
  text-decoration: none;
  line-height: 1em;
  letter-spacing: 1px;
  color: black;
  padding: 0px;
  display: block;
  font-family: 'Times New Roman', Times, serif;
} 


.sidebar-item > a::before {
  content: attr(data-text);
  color: transparent;
  position: absolute;
  line-height: inherit;
  letter-spacing: 1px;
  padding: 0px;
  width: 0%;
  height: 32px;
  overflow: hidden;
  transition: 0.5s;
  border-right: 10px solid var(--clr);
  -webkit-text-stroke: 10px var(#017709);
  display: block;
  margin-left: -15px;
} 

.sidebar-item > a:hover::before,
.sidebar-item > a.active::before {
  width: 95%;
  height: 32px;
  filter: drop-shadow(0px 0px 25px var(--clr));
  font-family: 'Times New Roman', Times, serif;
  text-decoration: none;
  line-height: inherit;
  letter-spacing: 1px;
  text-transform: none;
  color: var(--clr);
  padding: 0;
  margin-left: 0;
}





      
  
 /*general*/     

.text {
text-align:justify 
}


hr{
  height: 3px; /* Set the height of the decorative line */
  background-color: #445F3A; /* Set the line color */
  transform-origin: left;
  transition: transform 0.3s;
}
      
.w-80{
  width: 80%;
}

.w-85{
  width: 85%;
}

.w-60 {
  width: 60%
}

.w-65 {
  width: 65%
}

.w-70{
  width: 70%
}

.w-75{
  width: 75%
}

.w-95 {
  width:95%;
}

.w-90 {
  width:90%;
}



      
.caption {
  caption-side: top;
  font-style: italic;
  text-align: center;
  color: #445F3A;
  padding: 4px;
}

.table-caption{
  caption-side: top;
  font-style: italic;
  color: #445F3A;
  padding: 4px;
}




/*References*/

.btn-ref {
  background-color: #fff;   /* Text color for the button */
  border: 2px solid #547648;  /* Border color if needed */
  padding: 15px 25px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}


.ref-circle {
  width: 35px;
  height: 35px;
  background-color: #547648;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.ref-circle svg {
  width: 1.5em;
  height: 1.5em;
  fill: #ffff;
  transition: transform 0.3s ease;
}

.ref {
font-size: 1.7em;
font-weight: 500;
color: #547648;
display: inherit;
border-radius: 0;
background: none;
box-shadow: none;
border-style: none;
margin-bottom: 0;
margin-top: 0;
line-height: 1.5;
}

.rotate-45 {
  transform: rotate(45deg);
}



/*IMG ANIMATIONS*/

@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Adjust the vertical distance as needed */
  }
}

.citation {
  font-weight: bold;
  color: #0B3D25;
  text-decoration: none;
}



.footer-link {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}


.footer-link:hover {
  color: #ccc;
}


.footer-up {
  background-color: #7a5d4f;
}


.footer-bottom {
  background-color: #624b40;
}


.img-min-size {
  min-width: 120px; /* Set minimum width */
}


.grey {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);    
}


.grey:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}
   
 
.social-footer {
      margin-top: 15px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
   
.social-footer a {
      color: #3d5534;
      transition: 0.3s;
      border-radius: 50%;
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #48623d;
      background-color: rgba(196, 215, 177, 0.786);
    }
   
.social-footer a:hover {
      color: #91B484;
      border-color: #91B484;
      background-color: #fff;
    }
   
.social-footer svg {
      width: 25px;
      height: 25px;
    }


.smaller-image1 {
  width: 1vw;
}