/* new button-primary */

.btn-primary {
  background-color: #518947; /* Green brand color */
  color: white; /* White text color */
  font-family: 'Roboto', sans-serif; /* Roboto font */
  font-size: 16px; /* Adjust font size as needed */
  padding: 10px 20px; /* Padding for button size */
  border: none; /* No border for a modern look */
  border-radius: 5px; /* Slightly rounded corners */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for depth */
  cursor: pointer; /* Cursor changes to hand on hover */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Adding a slight box-shadow for depth */
}

.btn-primary:hover {
  background-color: #9c573e; /* Slightly darker shade on hover */
  color: #ffe; /* Brighter text on hover for contrast */
}

/* new button secondary */

.btn-secondary {
  background-color: #0472b1; /* Inverted background color */
  color: white; /* White text color */
  font-family: 'Roboto', sans-serif; /* Roboto font */
  font-size: 16px; /* Adjust font size as needed */
  padding: 10px 20px; /* Padding for button size */
  border: none; /* No border for a modern look */
  border-radius: 5px; /* Slightly rounded corners */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for depth */
  cursor: pointer; /* Cursor changes to hand on hover */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Adding a slight box-shadow for depth */
}

.btn-secondary:hover {
  background-color: #9c573e; /* Primary color for hover */
  color: #ffe; /* Brighter text on hover for contrast */
}

/* new button teritary */

.btn-tertiary {
  background-color: #8e6a3d; /* Default background color */
  color: white; /* White text color */
  font-family: 'Roboto', sans-serif; /* Consistent font family */
  font-size: 16px; /* Standard font size */
  padding: 10px 20px; /* Comfortable padding */
  border: none; /* No border for a sleek look */
  border-radius: 5px; /* Slightly rounded corners */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle text shadow for depth */
  cursor: pointer; /* Hand cursor on hover */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Light box-shadow for a 3D effect */
}

.btn-tertiary:hover {
  background-color: #9c573e; /* Hover background color */
  color: #ffe; /* Brighter text color on hover for better contrast */
  /* Additional hover effects like text-shadow or box-shadow can be added here if desired */
}


/* Warning button - Keep default bootstrap color but make the other changes */
.btn-warning {
  /* Retain the default Bootstrap warning color */
  /* No explicit background-color set to keep the default one */

  color: white; /* White text color */
  font-family: 'Roboto', sans-serif; /* Consistent font family */
  font-size: 16px; /* Standard font size */
  padding: 10px 20px; /* Comfortable padding */
  border: none; /* No border for a sleek look */
  border-radius: 5px; /* Slightly rounded corners */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle text shadow for depth */
  cursor: pointer; /* Hand cursor on hover */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Light box-shadow for a 3D effect */
}

.btn-warning:hover {
  /* Hover effects can be customized as needed */
  /* For example, slightly darken the background color on hover */
  filter: brightness(90%);
}

/* Danger button - Keep default bootstrap color but make the other changes */
.btn-danger {
  /* Retain the default Bootstrap danger color */
  /* No explicit background-color set to keep the default one */

  color: white; /* White text color for contrast */
  font-family: 'Roboto', sans-serif; /* Consistent font family across buttons */
  font-size: 16px; /* Standard font size */
  padding: 10px 20px; /* Comfortable padding for better user interaction */
  border: none; /* No border for a modern, sleek look */
  border-radius: 5px; /* Slightly rounded corners for a softer appearance */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle text shadow for depth */
  cursor: pointer; /* Cursor changes to hand on hover for better UX */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Light box-shadow for a subtle 3D effect */
}

.btn-danger:hover {
  /* Hover effects can be customized as needed */
  /* For example, slightly darken the background color on hover */
  filter: brightness(90%);
}



  /* custom button for hero header, soon all buttons like this */
.btn-custom {
  background-color: #518947; /* green  background  #9c573e*/
  color: white; /* White text color */
  font-family: 'Roboto', sans-serif; /* Roboto font */
  font-size: 16px; /* Adjust font size as needed */
  padding: 10px 20px; /* Padding for button size */
  border: none; /* No border for a modern look */
  border-radius: 5px; /* Slightly rounded corners */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for depth */
  cursor: pointer; /* Cursor changes to hand on hover */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */

  margin-right: 5px; /* Adjust spacing between icon and text */
  /* Adding a slight box-shadow for depth */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.btn-custom:hover {
  background-color: #9c573e; /* red on hover #518947*/
  color: #ffe; /* Brighter text on hover for contrast */
  /* You can also adjust text-shadow or box-shadow here if needed */
}
/* Footer image */
/* Marked ready for deployment */

.footer-overlay {
  background-color: rgba(81, 137, 71, 0.05); /* Green with opacity */
  padding: 20px; /* Adjust padding as needed */
  border-radius: 10px; /* Optional, for rounded corners */
}

/* Footer styling */

/* Footer column styling */
.footer-column {
  background-color: rgba(0, 0, 0, 0.3); /* Black with increased opacity */
  color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px); /* Frosted glass effect */
}

.footer-column h6 {
  font-family: 'Lobster', cursive; /* Apply the Lobster font */
  font-size: 1.5rem;
  font-weight: bold; /* Increase font weight */
  text-shadow: 8px 8px 10px rgba(0, 0, 0, 0.99); /* Significant shadow */
  margin-bottom: 10px;
}

.footer-column p {
  font-size: 1rem;
  font-weight: bold; /* Increase font weight */
  text-shadow: 5px 5px 7px rgba(0, 0, 0, 0.7); /* Significant shadow */
}

/* Adjustments for mobile view */
@media (max-width: 768px) {
  .footer-column {
    width: 100%; /* Full width on smaller screens */
  }
}
  /* Header navbar and hero joined image */
  
  .header-container {
  position: relative;
}

.navbar {
  position: absolute;
  width: 100%;
  top: 0;
}

.hero-section {
  padding-top: 60px; /* Adjust this value based on the navbar's height */
}


/* Shadow and bold the header items for readability */

.navbar-light .navbar-nav .nav-link {
  color: white; /* Change text color to white */
  text-shadow: 3px 3px 5px black; /* Add text shadow */
  font-weight: 750; /* Increase font weight, adjust as necessary */
}


/* Navbar collapse (hamburger) scroll bar to accomodate all the nav items */

/* Custom CSS */
@media (max-width: 992px) { /* Adjust the breakpoint as needed */
  .navbar-collapse {
    max-height: 70vh; /* Adjust based on your needs and screen size */
    overflow-y: auto; /* Enables vertical scrolling */
  }
}

/* Reduce padding between links in hamburger */
@media (max-width: 992px) { /* Adjust the breakpoint as needed */
  .navbar-nav .nav-link {
    padding-top: 4px; /* Reduce the top padding */
    padding-bottom: 4px; /* Reduce the bottom padding */
  }
}

/* black transparent hamburger menu for readability */

@media (max-width: 992px) { /* Adjust the breakpoint as needed */
  #navbarSupportedContent {
    background-color: rgba(0, 0, 0, 0.2); /* Black with reduced opacity */
    padding: 10px; /* Optional: adds some padding inside the menu */
    border-radius: 15px; /* Rounds the corners of the menu */
  }
}

/* Navitem dropdown, used in user menu dropdown, styled like hamburger, 
 	transparent black */
 	
.nav-item.dropdown .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    border-radius: 15px; /* Rounded corners */
    padding: 10px; /* Padding inside the dropdown */
    color: #fff; /* Text color */
    border: none; /* Removing the default border */
}

.nav-item.dropdown .dropdown-menu .dropdown-item {
    color: white; /* Change text color to white */
    text-shadow: 3px 3px 5px black; /* Add text shadow */
    font-weight: 750; /* Increase font weight */
}

.nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Slight highlight on hover */

}

/* Make sure navbar is ontop of hero text */
.navbar {
  position: relative; /* if not already positioned */
  z-index: 1000; /* high value to ensure it's on top */
}


/* Custom hero text, used for headers in views, prints in center of hero */

.custom-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px; /* Adjust as needed */
  background-size: cover;
  background-position: center;
  
  /* Make sure hero us underneath hamburger nav */
  position: relative; /* if needed */
  z-index: 1; /* lower value than navbar */
}

.custom-hero-text {
  text-align: center;
  color: white;
  font-weight: 750; /* Increase font weight, adjust as necessary */
  text-shadow: 13px 13px 15px rgba(0, 0, 0, 0.7);
  font-size: 4rem; /* Adjust the font size as needed */

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Adjust as necessary */
  
  /* make buttons below the h1 header tag */
   flex-direction: column; /* Stack h1 and buttons vertically */
  align-items: center; /* Align items to the center */
  padding: 40px; /* Increase padding */
  gap: 0px; /* Space between h1 and button group */
}

.custom-hero-text h1 {
  text-align: center;
  color: white; /* Matches the dropdown link color */
  font-weight: 750; /* To make it heavyweight */
  text-shadow: 8px 8px 10px rgba(0, 0, 0, 0.99); /* Shadow effect similar to dropdown links */
  font-size: 3rem; /* You can adjust the font size as needed */
  
  /* Shadowed box around content */
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black background */
  padding: 40px; /* Padding around text */
  border-radius: 20px; /* Rounded corners */
  box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.3); /* Softer and more spread shadow */
  backdrop-filter: blur(2px); /* Frosted glass effect */
  
  font-family: 'Lobster', cursive; /* This applies the Lobster font */
}


/* Media query for medium screens (e.g., 768px) and above */
@media (min-width: 768px) {
  .custom-hero-text h1 {
    font-size: 4rem; /* Larger font size for medium screens and above */
  }
}
/* Custom buttons in the hero */

.button-group {
  display: flex;
  justify-content: center; /* Center buttons horizontally */
  flex-wrap: wrap; /* Wrap buttons to new line if many */
  gap: 10px; /* Space between buttons */
  
    /* Shadowed box around content */
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black background */
  padding: 20px; /* Padding around text */
  border-radius: 20px; /* Rounded corners */
  box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.3); /* Softer and more spread shadow */
  backdrop-filter: blur(2px); /* Frosted glass effect */
  
 
}


.custom-hero-buttons button {
  /* Example Styles */
  background-color: #007bff; /* Blue background */
  color: white; /* White text */
  border: none; /* No border */
  padding: 10px 20px; /* Padding around the text */
  border-radius: 5px; /* Rounded corners */
  font-size: 1rem; /* Font size */
  cursor: pointer; /* Pointer cursor on hover */
  margin: 5px; /* Margin around buttons */
  /* Add other styles as needed */
  
  /* stack buttons */
  display: flex;
  justify-content: center; /* Center buttons horizontally */
  flex-wrap: wrap; /* Wrap buttons to a new line if needed */
  gap: 10px; /* Space between individual buttons */
  
   box-shadow: 10px 10px 15px 10px rgba(0, 0, 0, 0.5); /* Softer and more spread shadow */
    text-shadow: 13px 13px 15px rgba(0, 0, 0, 0.7);
}

.custom-hero .btn {
  box-shadow: 10px 10px 15px 10px rgba(0, 0, 0, 0.5); /* Softer and more spread shadow */
    text-shadow: 13px 13px 15px rgba(0, 0, 0, 0.7);
}



/* New rules */

.section-card-container {
  display: flex;
  justify-content: space-between; /* Space evenly across the row */
  flex-wrap: wrap; /* Wrap items if they don't fit */
  gap: 20px; /* Space between items */
  padding: 10px;
}

.section-card {
  background-color: rgba(255, 255, 255, 0.40); /* Black with increased opacity */
  color: black;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  flex: 1 1 30%; /* Allow flexibility for resizing */
  max-width: 30%; /* Ensure cards do not exceed 30% of the row */
  min-width: 280px; /* Minimum width for smaller cards */
  backdrop-filter: blur(2px); /* Frosted glass effect */
}

@media (max-width: 768px) {
  .section-card-container {
    flex-direction: column; /* Stack cards vertically on smaller screens */
    align-items: center;
  }

  .section-card {
    max-width: 100%; /* Allow full width for mobile */
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


body{
  background-color: #f6fbf7;
}

.card {
  background-color: rgba(255, 255, 255, 0.40); /* Black with increased opacity */
  color: black;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  flex: 1 1 30%; /* Allow flexibility for resizing */
 
  min-width: 280px; /* Minimum width for smaller cards */
  backdrop-filter: blur(2px); /* Frosted glass effect */
}


.widget {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.widget:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.chart-container {
  max-width: 250px;
  margin: 0 auto;
}