:root{
  --navbar-height: 100px;
  --font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#index-content {
  width: 100%;
  font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
  color: darkgreen;
  margin: 0;
}

.index-title{
  color: darkgreen;;
}   
  
@media (min-width: 768px) {
  #side-page-wrapper {
    position: inherit;
    margin: 60px 10rem;
    padding: 0 40px;
  }
}

.img-cshadow {
  box-shadow: 0 4px 15px rgb(0 0 0 / 50%);
  max-width: 100%;
  height: auto;
}
.text-stroke{
  -webkit-text-stroke: .5px rgb(221, 231, 227);
  text-shadow: .5px .5px 0 rgb(240, 243, 242), 
                -.5px .5px 0 rgb(240, 243, 242), 
                .5px -.5px 0 rgb(240, 243, 242), 
                -.5px -.5px 0 rgb(240, 243, 242);
  color: rgb(1, 51, 32);
}

.bg-green{
  --bs-bg-opacity: 1;
  background-color: #006400 !important;
}

   /* this is needed to make the content scrollable on larger screens */
@media (min-width: 576px) {
  .h-sm-100 {
      height: 100%;
  }
}


#side-wrapper {
  width: 100%;
  font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
  margin: 0 0 0 0;
  background-size: cover;
  background-color: white;
  color: darkgreen;
}
#side-page-wrapper {
  padding: 10px;
  min-height: 568px;
  
}
@media (min-width: 768px) {
  #side-page-wrapper {
    position: inherit;
    margin: 20px;
    padding: 20px;
  }
}


#carousellibrary .carousel-item img {
  height: 100vh;
  overflow: hidden;
  width: 100%;
  object-fit: cover;
}



.navbar-green .navbar-nav .nav-link{
  color: #FFFFFF;
  text-shadow: 2px 2px 2px #025210;
  }

.navbar-green .navbar-nav .nav-link.active, .navbar-green .navbar-nav .nav-link.show {
  color: #024e02; /* override Bootstrap's active and show colors */
  text-shadow: 2px 2px 2px rgb(31, 95, 43,.7);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #024e02;
  transition: color 0.2s ease-in-out; /* add a smooth transition effect */
}

.navbar-scrolled .navbar-nav .nav-link.active, .navbar-scrolled .navbar-nav .nav-link.show {
  color: #ffffff; /* remove !important */
  transition: color 0.2s ease-in-out; /* add a smooth transition effect */
}



.navbar{
  transition: all 0.5s;
  font-size: medium;
  --navbar-height: calc(height + 2rem); /* adjust the navbar height calculation as needed */
}





.navbar-scrolled .navbar-nav .nav-link {
  position: relative; /* Ensure positioning context for ::after */
}

.navbar-scrolled .navbar-nav .nav-link.active::after,
.navbar-scrolled .navbar-nav .nav-link:hover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px; /* adjust the height of the line */
  background-color: #f6faf6; /* adjust the color of the line */
  bottom: 0;
  left: 0;
  transition: width 0.2s ease-in-out; /* add a smooth transition effect */
}

.navbar-scrolled .navbar-nav .nav-link:hover::after {
  width: 100%; /* Ensure it is full width on hover */
}

.navbar-scrolled .navbar-nav .nav-link.active::after {
  width: 100%; /* Ensure it is full width when active */
}

/* navbar effects */
.navbar-green .navbar-nav .nav-link:hover {
  position: relative;
}

.navbar-green .navbar-nav .nav-link:hover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px; /* adjust the height of the line */
  background-color: #024e02; /* adjust the color of the line */
  bottom: 0;
  left: 0;
  transition: width 0.2s ease-in-out; /* add a smooth transition effect */
}

.navbar-green .navbar-nav .nav-link:hover::after {
  width: 100%;
}


/* title bar css */

.title-bar{
  text-align: center;
  color: #024e02;
  margin: var(--navbar-height) 0 2rem 0; /* use the navbar height variable to set the margin */
}

.title-box{
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 15px rgb(0 0 0 / 10%);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  padding: 10px 10px;
  
}

.navbar-brand img{
  width: 275px;
}

@media (min-width: 876px) {
  .navbar-brand img{
    width: 275px / 2;
  }
}

.center-checkbox {
  text-align: center;
  vertical-align: middle;
}