/* Overwriting Bootstrap Navbar Defaults */
  .navbar {
    background-color: rgba(37,57,42,0.8) !important; /* Transparent navbar */
    padding: 0; /* Adjust padding */
  }

  /* Navbar Links Styling */
  .navbar-nav .nav-link {
    color: white; !important; /* Green shade */
    font-weight: bold !important; /* Bold font */
     transition: color 0.3s ease, font-size 0.3s ease, margin-top 0.3s ease; /* Combine transitions */
  }

  /* Link Hover Effect */
  .navbar-nav .nav-link:hover {
    color: #218838 !important; /* Darker green on hover */
	font-size: 20px !important;
	margin-top: -4px !important;
  }

  /* Logo Styling */
  .logo {
    max-height: 250px; /* Adjust the size as needed */
  }

  /* Navbar Toggler Button (for mobile view) */
  .navbar-toggler-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 30 30\' width=\'30\' height=\'30\'%3E%3Cpath stroke=\'rgba%28255, 255, 255, 0.5%29\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 7h22M4 15h22M4 23h22\'/%3E%3C/svg%3E') !important;
  }

  /* Ensuring Navbar is Above the Hero Section */
  .hero-section {
    
  }
  p.h100px {
	  height: 100px; 
	  text-align: justify; 
  }
  
  .key-stats {
	  color: rgba(144, 238, 144, 1);
  }
  
  .facts-ul {
	  list-style-type: none;
	  padding-left: 0px;
  }
  .facts-ul li {
	  color: rgba(144, 238, 144, 1);
	  margin-bottom: 10px;
  }
  .facts-section img {
	  border: solid 4px rgb(88 100 88); 
	  border-radius: 4px;
  }
  
  .facts-ul li::before {
	  content: "•"; /* Insert content that looks like bullets */
	  padding-right: 8px;
	  color: orange; /* Or a color you prefer */
}
  .key-stats img {
	  border: solid 4px white; 
	  border-radius: 20px; 
	  margin-bottom: 10px;
  }
  .key-stats h3 {
	  color: white; 
  }

  /* Adjustments for Mobile Views */
@media (max-width: 991.98px) {
	.navbar-nav {
	  text-align: center;
	  width: 100%;
	}

	.navbar-nav .nav-link {
	  padding: 10px 0;
	}
	
	.strain-description {
		margin-top: 80px;
	}
	
	.strain-section {
		height: 30vh !important;
	}
	.white-heading {
		margin-bottom: unset !important;
		margin-top: 90px !important;
	}
	.strain-grid {
		margin-top: -60px !important;
	}
}

.color-white {
	color: white;
}

.hero-section {
	background-image: url('imgs/hero-img.webp');
	background-size: cover;
	background-position: center;
	height: 70vh;
}
.fun-fact h2 {
	background-color: #323232; 
	
}
.strain-section {
	background-image: url('imgs/strains.webp');
	background-size: cover;
	background-position: center;
	height: 70vh;
}
.survey-section {
	background-image: url('imgs/hero-survey.png');
	background-size: cover;
	background-position: center;
	height: 70vh; 
}
.retail-section {
	background-image: url('imgs/hero-retail.png');
	background-size: cover;
	background-position: center;
	height: 70vh;
}
.canopy-section {
	background-image: url('imgs/hero-canopy.webp');
	background-size: cover;
	background-position: center;
	height: 70vh;
}
.white-heading {
	color: white; 
	background-color: rgba(32,32,32,0.6);
	padding: 20px 40px;
	margin-bottom: 20px;
}

.hero-img {
	max-width: 480px;
	margin: 0 auto;
	top: 0px;
	
}

.strain-grid { margin-top: 20px; }

.cartoon-name, .strain-image { 
	border-radius: 12%; 
	padding: 20px; 
	border: solid 2px white;
	background-color: white;
	margin-top: 10px;
}
.page-divider {
	height: 10px;
	background-color: #27422d;
	margin-bottom; 20px;
}
.strain-description {
	
	background-color: rgba(32,32,32,0.2); 
	padding: 10px;
	color: white; 
	max-height: 300px;
	overflow-x: auto; 
	
}

body {
	background-color: #25392a;
}

.nav-logo {
	width: 240px;
	padding: 20px 10px;
}
.flip-card {
    background-color: transparent;
    perspective: 1000px;
    width: 100%;
    height: 300px;
	margin-top: 40px;
	margin-bottom: 40px;
}

.status-now {
	position: absolute; 
	right: 10px;
	bottom: 4%; 
	z-index: 200;
	width: 40px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
backface-visibility: hidden;
}

.flip-card-front {

display: flex;
justify-content: center;
align-items: center;
}

.flip-card-back {
background-color: #f8f9fa;
transform: rotateY(180deg);
display: flex;
justify-content: center;
align-items: center;
border-radius: 12%;
}

.strain-name {
max-width: 100%;
height: auto;
}

.strain-image {
max-width: 100%;
height: auto;
}

.strain-description h3 {
font-weight: bold;
color: #218838;
}

/* Hide scrollbars but still allow scrolling */
body {
  overflow: -moz-scrollbars-none;  /* For Firefox */
  -ms-overflow-style: none;        /* For Internet Explorer and Edge */
  scrollbar-width: none;           /* For Firefox */
}

body::-webkit-scrollbar {
  display: none;                   /* For Chrome, Safari, and Opera */
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
  height: 10px; /* Height for horizontal scrollbar if needed */
}

::-webkit-scrollbar-thumb {
  background-color: #218838; /* Green color for the scrollbar handle */
  border-radius: 10px; /* Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #1e7e34; /* Darker green on hover */
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Light background for the scrollbar track */
  border-radius: 10px; /* Rounded track corners */
}

/* Style for Firefox (scrollbar-color and scrollbar-width) */
* {
  scrollbar-width: thin;
  scrollbar-color: #218838 #f1f1f1;
}

@media (max-width: 576px) {
  /* Your styles for mobile devices go here */
}

/* Modal Customizations */
  .custom-modal {
    border-radius: 0px !important; /* Square off corners */
    overflow-y: auto; /* Enable scrollable content */
  }
  .modal-header, .modal-body {
	  background-color: rgba(37, 57, 42, 0.9); 
	  color: white; 
  }
   
  .modal-body p {
	  width: 100%; 
  }
  
  .text-right {
	  float: right; 
  }
  
  .btn-close {
	  position: absolute;
      top: 12px;
      right: 12px;
  }


  /* Make sure modal content fits well and is scrollable */
  .modal-body {
    max-height: 100vh;
    overflow-y: auto; /* Scrollable content inside modal */
  }
  .modal-content {
	  background-color: unset !important; 
  }

  /* Adjust modal size for larger screens */
  @media (min-width: 992px) {
    .modal-lg {
      max-width: 800px; /* Custom width for large modals */
    }
  }

  /* Button and form styling for clean appearance */
  .btn-primary {
    border-radius: 0px !important; /* Square button corners */
  }