@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');

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

html {
    min-height: 100%;
}

body {
    font-family: 'Manrope', serif;
    font-size: 18px;
    line-height: 1.8;
    color: #444;
    background-color: #eff1ee;
    padding: 0;
    margin: 0 auto; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	width: 100%;
	z-index: 10;
}

img {
    max-width: 100%;
}

.navbar-brand img {
    height: 60px;
}

main {
    flex-grow: 1;
    margin-bottom: 100px;
}

#sidebar h2 {
	font-family: 'Rubik', sans-serif;
	font-size: 30px;
}

.section-divider {
    border-bottom: 1px solid rgba(51, 58, 48, 0.15);
    margin: 40px 0;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(22, 46, 16, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-link {
    display: inline-block;
    padding: 8px 16px;
    color: #444;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s;
	font-size: 16px;
}

.nav-link:hover {
    color: #4f9d2f;
}

.container {
    /* add the padding here */
    padding: 20px;
}

.container-bg {
    padding-top: 0; /* Increase top padding to prevent overlap */
}

.text-section {
  background-color: #ffffff; /* You can adjust the background color if needed */
  padding: 20px; /* Padding around the content */
  margin: 20px 0; /* Space above and below the section */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.text-section h2 {
  color: #4f9d2f; /* Main color for the heading */
  margin-bottom: 15px; /* Space below the heading */
  font-size: 28px; /* Font size for the heading */
}

.text-section p {
  color: #444; /* Paragraph text color */
  line-height: 1.6; /* Line height for readability */
  margin-bottom: 15px; /* Space between paragraphs */
}

.post-content {
    background-color: #ffffff; /* Background color */
    padding: 20px; /* Padding for inner content */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1); /* Simple shadow for depth */
}

.post-content h2 {
    color: #4f9d2f; /* Main color for headers */
    margin-bottom: 20px; /* Space out your headers from content */
}

.post-content p {
    color: #444; /* Dark gray color for paragraph */
    line-height: 1.6; /* Spacing between lines */
}

body > .container {
    /* add a white background to the main content area */
    background-color: #ffffff;
}

.custom-width {
  width: 75% !important; /* Adjust the value as needed */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', serif;
    margin-bottom: 20px;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
    margin-top: 40px;
}

p {
    margin-bottom: 20px;
}

.font-size-controls {
    display: flex;
    align-items: center;
    margin-bottom: -15px;
	margin-top: -10px;
}

.font-size-controls span {
    margin-right: 10px;
}

.font-size-controls button {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 30px;
    color: #444;
    transition: all 0.3s;
}

.font-size-controls button:hover {
    background-color: #4f9d2f;
    border-color: #4f9d2f;
    color: #fff;
}

footer {
    width: 100%;
    color: #fff;
	background-color: #333a30;
	font-size: 12px;
}

.footer-heading {
    font-size: 18px;
    margin-bottom: 15px;
}

.footer-description {
    font-size: 14px;
}

.footer-credits {
    margin-top: 20px;
}

.footer-links a {
    color: #fff;
    transition: color 0.3s ease; /* added this for a smoother hover effect */
}

.footer-links a:hover {
    color: #4f9d2f;
}

.image-attribution {
    font-style: italic;
    font-size: 12px;
    margin-top: -17px;
}

.plant-of-the-day {
    text-align: center;
}

.plant-of-the-day a {
    display: inline-block;
    color: #f15a47;
	font-size: 24px;
}

.plant-of-the-day a:hover {
    color: #f15a47;
}

.plant-of-the-day h1 {
    font-size: 24px;
    color: #4f9d2f;
    margin: 0 0 5px 0;
}

.plant-of-the-day h2 {
    font-size: 22px;
    color: #444;
    margin: 2px 0 5px 0;
}

.plant-of-the-day img {
    max-width: 250px;
    height: auto;
    margin-bottom: 5px;
}

.plant-of-the-day p {
    font-size: 16px;
    color: #444;
}

.cta-button {
    background-color: #f15a47;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 10px;
    display: inline-block;
    transition: all 0.3s;
}

.cta-button:hover {
    background-color: #d0331f;
    color: #fff;
}

#newsletter {
    padding: 20px;
    background-color: #eff1ee;
    text-align: center;
}

#newsletter h2 {
    font-size: 28px;
    color: #4f9d2f;
    margin: 5px 0 10px 0;
}

#newsletter p {
    margin-bottom: 20px;
}

#newsletter form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#newsletter input[type="email"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    color: #444;
	margin-top: 10px;
}

#newsletter input[type="submit"] {
    padding: 10px 10px;
    background-color: #4f9d2f;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}

#newsletter input[type="submit"]:hover {
    background-color: #4d7e39;
}

#st-1 {
    margin: 0 0 15px 5px;
}

#hero {
    background: url(../images/hero-image.jpg) no-repeat center center/cover;
    height: 400px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    text-align: left;
    padding: 75px 0 0 15px;
}
.hero-text {
    max-width: 300px;
}

#factsheet {
	position: relative;
	padding: 20px;
    margin: 40px 0;
	background-color: #f5f5f5;
}

#factsheet::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, rgba(79,157,47,1) 0%, rgba(255,255,255,0) 50%, rgba(79,157,47,1) 100%);
}

#factsheet::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, rgba(79,157,47,1) 0%, rgba(255,255,255,0) 50%, rgba(79,157,47,1) 100%);
}

/* Add this to your CSS file */

/* This styles the search form input */
#siq_searchForm .form-control {
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: all 0.3s;
}

/* This styles the search form button */
#siq_searchForm .btn-outline-success {
    border-color: #4f9d2f;
    color: #4f9d2f;
    transition: all 0.3s;
}

#siq_searchForm .btn-outline-success:hover {
    background-color: #4f9d2f;
    color: #fff;
}

#st-1 .st-btn[data-network='copy'] {
    background-color: #777 !important;
}

#hidden-heading {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* Explore Our Guides By Category */

.card-image {
    object-fit: cover;
    height: 200px;  /* Adjust the height as needed */
    width: 100%;
    overflow: hidden;
	background-blend-mode:overlay;
}

.card {
    flex: 0 0 auto;
    margin-right: 20px; /* Adds some horizontal spacing between cards */
}

.card-body {
    flex-grow: 1; /* Allows card-body to grow and consume available space */
    display: flex;
    flex-direction: column;
}

.card .button {
    margin-top: auto; /* Pushes button to bottom of card */
}

p.card-text {
    font-size: 12px;
}

#annuals-guides-overview {
  padding: 20px;
  background-color: #f8f9fa;
}

#annuals-guides-overview h2 {
  color: #343a40;
  font-size: 1.5rem;
}

.annual-guides-card {
  width: 18rem;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
  border-radius: .25rem;
  margin: 10 !important;
}

.annual-guides-card .card-img-top {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.annual-guides-card .card-body {
  padding: 15px;
}

.annual-guides-card .card-title {
  font-size: 1.25rem;
  color: #343a40;
}

.annual-guides-card .card-text {
  color: #6c757d;
  font-size: 1rem;
}


.secondlevel-item {
    display: flex;
    align-items: center;
    padding: 5px 20px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    border-radius: 5px;
}

.thumbnail-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px 10px 5px 0px;
}

.secondlevel-thumbnail {
    max-width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
}

.thumbnail-container h2 {
    margin: 0;
	font-size: 22px;
    color: #343a40;
    text-align: center;
}

.text-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-grow: 1; /* Allows the text container to grow and fill space */
}

.secondlevel-item p {
    margin: 0 10px;
    color: #6c757d;
    flex-grow: 1; /* Allows paragraph to grow and fill space */
}

.text-container .btn-primary {
    align-self: flex-start;
    margin-top: 10px;
	width: 175px;
}

.btn-primary:hover {
    background-color: #d0331f;
}

.breadcrumb {
    margin-top: -20px;
    z-index: 10;
    position: relative;
    padding: 0 0 0 10px;
    font-size: 15px;
	background-color: transparent;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: #6c757d;
  padding: 0 0.5rem;
}

.breadcrumb-item a {
  color: #007bff;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.card-link {
  text-decoration: none; /* remove the underline from links */
  color: inherit; /* make sure the text color remains the same */
  display: block; /* to make the whole area clickable */
}

.card-link:hover {
  transform: scale(1.02); /* slightly scale up the card */
  transition: transform 0.3s ease; /* make the scaling smooth */
  cursor: pointer;
}

.card-link .card {
  transition: box-shadow 0.3s ease; /* for the box-shadow transition */
}

.card-link:hover .card {
  box-shadow: 0px 4px 10px rgba(0,0,0,0.2); /* add a shadow on hover */
}

.card-container {
    display: flex;
    overflow-x: auto;
    padding: 20px 30px;
}

.card-container::-webkit-scrollbar {
    display: none;
}

.card-container .card {
    flex: 0 0 auto;
    margin-right: 16px;
	margin-left: 16px;
    /* Add other styles as needed */
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: white; /* or your preferred color */
    border: none;
    padding: 1em;
    border-radius: 0%; /* Change this to remove the circular border */
    cursor: pointer;
}

.scroll-left {
    left: -1em; /* adjust as needed */
}

.scroll-right {
    right: -1em; /* adjust as needed */
}

#guides-overview .card {
  height: 100%;
  display: flex;
  flex-direction: column;
   margin-bottom: 10px;
}

#guides-overview .card .card-img-top {
  height: 200px;
  object-fit: cover;
}

#helpful-tips {
	margin-top: 20px;
	font-size: 16px;
}

/* Native Plants Section */
#native-plants {
    margin-top: 40px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff;
    text-align: center;
    overflow: hidden;
    padding: 0;
    height: 0;
    padding-bottom: 63.1%;  /* Adjust this value to suit your needs */
    box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
}

#native-plants .hero-image {
    background-size: cover;
    padding: 75px 0;
    text-align: center;
}

#native-plants .hero-text {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    color: #fff;
    line-height: 1.8;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
}

#native-plants h2 {
    font-family: 'Manrope', sans-serif;
    font-size: 36px;
    margin-bottom: 20px;
    color: #fff;
}

#native-plants p {
    margin-bottom: 20px;
    color: #fff;
}

#native-plants .btn {
    background-color: #f15a47;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

#native-plants .btn:hover {
    background-color: #d0331f;
    color: #fff;
}

#native-plants > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    #main-left > section:last-child {
        margin-bottom: 50px; /* Adjust as needed */
    }
	
	.navbar-brand img {
        max-width: 100px; /* Adjust as needed */
        height: auto;
        object-fit: contain;
    }
	
	 #sidebar {
        border-top: 2px solid #4f9d2f;
        padding-top: 20px;
        margin-top: 50px;
    }
	
	.secondlevel-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .text-container {
        flex-direction: row;
        align-items: center;
    }

    .btn-primary {
        margin-top: 0;
        margin-left: 10px;
	}
}