@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root {
  --primary-color: #25ff48; /* Green color */
  --secondary-color: #1e993b; /* Darker green */
  --background-color: rgba(0, 0, 0, 0.8); /* Slightly transparent black */
  --text-color: #fff; /* White text */
  --highlight-color: #1edc3b; /* Highlight green */
  --nav-background: linear-gradient(to right, #0b0b0b, #000, #0b0b0b);
  --nav-box-shadow: rgba(0, 0, 0, 0.343);
  --header-background: rgba(0, 0, 0, 0.8);
  --header-box-shadow: rgba(0, 0, 0, 0.5);
  --footer-background: rgba(0, 0, 0, 0.8);
  --footer-box-shadow: rgba(0, 0, 0, 0.5);
  --album-background: rgba(0, 0, 0, 0.5);
  --album-box-shadow: rgba(0, 0, 0, 0.5);
  --modal-background: #111;
  --modal-box-shadow: rgba(0, 0, 0, 0.5);
  --modal-header-border: #333;
  --modal-footer-background: #000;
  --modal-footer-border: #1abc9c;
  --about-background: rgba(0, 0, 0, 0.8);
  --about-box-shadow: rgba(0, 0, 0, 0.5);
  --section-background: rgba(0, 0, 0, 0.538);
  --section-box-shadow: rgba(0, 0, 0, 0.5);
  --form-background: #181818;
  --form-border: #333;
  --form-placeholder: #777;
  --form-focus-background: #222;
  --form-focus-border: #25ff48;
  --form-hover-border: #25ff48;
  --form-hover-label: #25ff48;
  --form-focus-label: #25ff48;
  --footer-contact-link: #ecf0f1;
  --footer-contact-icon: #ecf0f1;
  --footer-contact-link-hover: #25ff48;
  --footer-contact-icon-hover: #25ff48;
  --sticky-footer-background: rgba(0, 0, 0, 0.8);
  --sticky-footer-box-shadow: rgba(0, 0, 0, 0.5);
  --flash-green: #25ff48;
  --flash-transition: color 0.5s;
  --form-group-hover-border: #25ff48;
  --form-group-focus-border: #25ff48;
  --form-group-focus-outline: none;
  --form-group-focus-label: #25ff48;
  --form-group-hover-label: #25ff48;
  --contact-form-background: #181818;
  --contact-form-border: #333;
  --contact-form-placeholder: #777;
  --contact-form-focus-background: #222;
  --contact-form-focus-border: #25ff48;
  --contact-form-focus-outline: none;
  --contact-form-select-height: 45px;
  --footer-contact-link: #ecf0f1;
  --footer-contact-link-hover: #25ff48;
  --footer-contact-icon: #ecf0f1;
  --footer-contact-icon-hover: #25ff48;
  --sticky-footer-social-icon: #ecf0f1;
  --sticky-footer-social-icon-hover: #25ff48;
  --sticky-footer-social-icon-transform: scale(1.1);
  --footer-contact-icon-display: none;
}

html {
  scroll-behavior: smooth; /* Ensure smooth scrolling */
}

body {
  background: linear-gradient(
    to bottom,
    #000000,
    #1a1a1a
  ); /* Gradient from black at the top to slightly less dark black at the bottom */
  color: var(--text-color);
  font-family: "Poppins", sans-serif; /* Change to Poppins font */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif; /* Change to Poppins font */
}

.card {
  background-color: #1c1c1c; /* Darker card background */
  border: 5px solid #1abc9c; /* Teal border with 5px width */
  border-radius: 10px;
  max-width: 100%; /* Set maximum width */
  margin: 20px auto; /* Center the card */
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow to card */
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px); /* Lift the card on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}

.card-password {
  background-color: #1c1c1c; /* Darker card background */
  border: 5px solid #e74c3c; /* Red border */
  border-radius: 10px;
  max-width: 100%; /* Set maximum width */
  margin: 20px auto; /* Center the card */
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow to card */
  transition: transform 0.3s, box-shadow 0.3s;
}

.card-password:hover {
  transform: translateY(-5px); /* Lift the card on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}

.card-header {
  background-color: #333; /* Dark grey background */
  color: #fff;
  border-bottom: 1px solid #1abc9c;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px 20px;
  font-weight: 700; /* Make the header bold */
}

.card-password-header {
  background-color: #333; /* Dark grey background */
  color: #fff;
  border-bottom: 1px solid #e74c3c;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px 20px;
  font-weight: 700; /* Make the header bold */
}

.card-body {
  background-color: #1c1c1c; /* Darker body background */
  color: #ecf0f1; /* Lighter text */
  padding: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.btn {
  height: 40px; /* Set a fixed height for all buttons */
  line-height: 40px; /* Center text vertically */
  border: 2px solid #1abc9c; /* Darker border around buttons */
  border-radius: 5px; /* Add border radius to buttons */
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.btn-primary {
  background-color: #16a085; /* Darker green button */
  border-color: #0e6655; /* Darker border */
  transition: background-color 0.3s, transform 0.3s;
  margin-top: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow to buttons */
}

.btn-primary:hover {
  background-color: #1abc9c; /* Teal on hover */
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}

nav {
  background: linear-gradient(to right, #0b0b0b, #000, #0b0b0b);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.343);
  border-top: 1px solid var(--primary-color); /* Add green border on top */
  position: fixed; /* Make the navbar fixed */
  top: 0; /* Position it at the top */
  width: 100%; /* Ensure it spans the full width */
  z-index: 1000; /* Ensure it is above other content */
  text-align: center; /* Center the navbar menu */
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block; /* Center the navbar menu */
}

nav ul li {
  display: inline; /* Display list items inline */
}

nav ul li a {
  display: inline-block;
  color: var(--primary-color); /* Always green */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: background-color 0.3s, border-bottom 0.3s;
}

nav ul li a:hover {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

nav ul li a.active::after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 10px;
  height: 10px;
  background-color: var(--primary-color); /* Green color */
  border-radius: 50%;
  margin-top: 5px;
}

.header-logo {
  width: 50%; /* Increase the image size to 3 times the current size */
  height: auto;
  transition: transform 0.3s; /* Add transition for hover effect */
}

.header-logo:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}

.header {
  background-color: var(
    --background-color
  ); /* Make the header background slightly transparent */
  padding: 1rem 0; /* Reduce padding to make the header narrower */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* Center content within the header */
  border-top: 1px solid var(--primary-color); /* Add 1px green border on top */
  border-bottom: 1px solid var(--primary-color); /* Add 1px green border on bottom */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add a shadow for depth */
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-left,
.header-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem; /* Reduce padding to move content closer to the edges */
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center; /* Center the image vertically and horizontally */
}

.header-left .social-icon,
.header-right a {
  color: var(--text-color); /* Icons are white by default */
}

.header-left .social-icon:hover,
.header-right a:hover {
  color: var(--primary-color); /* Turn green on hover */
  text-decoration: underline; /* Underline on hover */
  text-decoration-color: var(--primary-color); /* Green underline */
}

.header-right a {
  font-size: 1.33em; /* Reduce the size of the Webstore link to 2/3 of its current size */
  color: var(--text-color); /* Ensure the color is white by default */
}

.header-right a:hover {
  color: var(--primary-color); /* Turn green on hover */
  text-decoration: underline; /* Underline on hover */
  text-decoration-color: var(--primary-color); /* Green underline */
}

.header-icon {
  font-size: 2em; /* 3 times the current size */
  color: var(--text-color); /* Icons are white by default */
}

.header-icon:hover {
  color: var(--primary-color); /* Turn green on hover */
}

.footer {
  background: var(--background-color); /* Make the footer 30% transparent */
  padding: 20px 0;
  color: var(--text-color);
  position: relative;
  margin-top: auto;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.5); /* Add a shadow for depth */
  border-top: none; /* Remove top border */
  border-bottom: none; /* Remove bottom border */
  clear: both; /* Ensure footer is at the bottom */
}

.footer-brand {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.footer-social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.footer-social-icons .social-icon {
  font-size: 2rem;
  color: var(--text-color);
  transition: color 0.3s, transform 0.3s;
}

.footer-social-icons .social-icon:hover {
  color: var(--primary-color);
  transform: scale(1.1);
}

.created-by-link {
  color: var(--text-color);
  transition: color 0.3s;
}

.created-by-link:hover {
  color: var(--primary-color);
}

.theme-toggle-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.theme-toggle-btn:hover {
  background-color: var(--highlight-color);
  transform: scale(1.05);
}

#order .container {
  display: flex;
  flex-wrap: wrap;
}

#order .col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.order-underline {
  border: 0;
  height: 2px;
  background-color: var(--primary-color); /* Green color */
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

#order .social-icon {
  font-size: 2rem;
  color: var(--text-color);
  transition: color 0.3s, transform 0.3s;
}

#order .social-icon:hover {
  color: var(--primary-color);
  transform: scale(1.1);
}

#order h2 {
  text-align: center;
  /* text-decoration: underline; */ /* Remove underline */
  /* text-decoration-color: var(--primary-color); */ /* Remove underline color */
}

#order button {
  display: block;
  margin: 2rem auto; /* Center the button */
  padding: 0.5rem 1rem; /* Smaller padding */
  background-color: var(--primary-color); /* Green background */
  color: var(--text-color); /* White text */
  border: none;
  border-radius: 5px; /* Rounded corners */
  font-size: 1rem; /* Smaller font size */
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

#order button:hover {
  background-color: var(--secondary-color); /* Darker green on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
}

#order img {
  border-radius: 10px; /* Slightly curved edges */
}

#order .col-md-6:first-child {
  text-align: left; /* Align the first column to the left */
}

#order .song-number {
  color: var(--primary-color); /* Green color for song numbers */
}

#order {
  border-top: none; /* Remove green top border */
}

.gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 1rem; /* Add some space between images */
  animation: scrollGallery 20s linear infinite; /* Add auto-scrolling animation */
}

@keyframes scrollGallery {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.gallery-item {
  flex: 0 0 calc(33.333% - 1rem); /* Show 3 images at a time with some gap */
  margin: 0.5rem;
}

.gallery-caption {
  text-align: center;
}

section {
  /* Remove the 2px solid border */
  position: relative;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: none; /* Remove bottom border */
}
section:not(#contact):not(.footer):not(.sticky-footer):not(
    :last-of-type
  )::after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color),
    var(--primary-color)
  ); /* Gradient underline */
  border-radius: 5px;
}

section h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  color: var(--primary-color); /* Green text */
  text-align: center; /* Center the heading */
  width: 100%; /* Ensure the heading spans the full width */
}

section h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color),
    var(--primary-color)
  ); /* Gradient underline */
  border-radius: 5px;
}

#videos h2 {
  text-align: center;
}

#albums h2 {
  text-align: center;
}

#albums p {
  color: var(--primary-color); /* Green text */
  text-align: center; /* Center text */
}

#albums .row {
  margin-bottom: 2rem; /* Add space between rows */
}

.album {
  flex: 0 0 calc(50% - 1rem); /* Each album takes up 50% of the row minus the gap */
  max-width: calc(50% - 1rem);
  margin-bottom: 20px;
  background-color: rgba(
    0,
    0,
    0,
    0.5
  ); /* Dark background with more transparency */
  padding: 1rem;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add a shadow for depth */
  transition: transform 0.3s, box-shadow 0.3s, border 0.3s; /* Add transition for border */
  margin-right: 0.5rem; /* Add gap between album cards */
  margin-left: 0.5rem; /* Add gap between album cards */
}

.album:hover {
  transform: scale(1.05); /* Slightly enlarge on hover */
  box-shadow: 0 8px 16px rgba(var(--primary-color), 0.7); /* Green shadow on hover */
  border: 2px solid var(--primary-color); /* Green border on hover */
}

.album img {
  margin-bottom: 1rem; /* Add more gap between the image and the <p> element */
  border-radius: 10px; /* Rounded corners for the image */
  transition: transform 0.3s; /* Add transition for hover effect */
}

.album img:hover {
  transform: scale(1.05); /* Slightly enlarge on hover */
}

.album p:hover {
  text-decoration: underline; /* Underline on hover */
  text-decoration-color: var(--primary-color); /* Green underline */
}

.album:hover p {
  color: var(--primary-color); /* Green text on hover */
}

.album .card-title {
  color: var(--primary-color); /* Green text */
  margin-bottom: 1rem;
}

#news h2 {
  text-align: center; /* Center the heading */
}

.container-fluid h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  color: var(--primary-color); /* Green text */
  text-align: center; /* Center the heading */
  width: 100%; /* Ensure the heading spans the full width */
}

.container-fluid h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color),
    var(--primary-color)
  ); /* Gradient underline */
  border-radius: 5px;
}

.modal-content {
  background-color: #111;
  color: var(--text-color); /* Change text color to white */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--primary-color); /* Add green border */
}

.modal-header {
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: center; /* Center the title */
  font-size: 1.5em; /* Make the writing 1.5x larger */
}

.modal-header h5,
.shipping-title {
  text-align: center; /* Center the h5 element */
  width: 100%; /* Ensure it spans the full width */
  color: var(--primary-color); /* Change text color to green */
}

.modal-header .close {
  color: var(--primary-color);
}

.modal-body {
  text-align: center;
  font-size: 1.2rem; /* Increase font size */
}

.modal-body a {
  color: var(--primary-color); /* Change link color to green */
  text-decoration: underline; /* Underline links */
}

.modal-body a:hover {
  color: var(--highlight-color); /* Darker green on hover */
}

.modal-footer {
  display: flex;
  justify-content: center; /* Center the buttons */
  gap: 10px; /* Add space between buttons */
}

.modal-footer .btn-secondary {
  background-color: #000;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  padding: 10px 20px; /* Increase padding */
  border-radius: 5px; /* Rounded corners */
  font-size: 1rem; /* Increase font size */
  transition: background-color 0.3s, color 0.3s; /* Add transition */
}

.modal-footer .btn-secondary:hover {
  background-color: #1a1a1a;
  color: var(--text-color);
}

.modal-footer .btn-primary {
  background-color: var(--primary-color);
  border: none;
  color: #000;
  padding: 10px 20px; /* Increase padding */
  border-radius: 5px; /* Rounded corners */
  font-size: 1rem; /* Increase font size */
  transition: background-color 0.3s, transform 0.3s; /* Add transition */
}

.modal-footer .btn-primary:hover {
  background-color: var(--highlight-color);
  transform: scale(1.05); /* Slightly enlarge on hover */
  color: #000;
}

.modal-body img {
  border-radius: 10px;
  margin-bottom: 20px;
}

.modal-fullscreen .modal-dialog {
  max-width: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100vh;
  border-radius: 0;
}

.modal-fullscreen .modal-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.modal-fullscreen .modal-body img {
  max-height: 60vh;
  margin-bottom: 20px;
}

.modal-body .tracklist {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  color: var(--primary-color); /* Green text */
}

.modal-body .tracklist li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #333;
}

.modal-body .tracklist .song-number {
  color: var(--text-color); /* White text for song numbers */
}

.modal-body .tracklist .duration {
  color: #999; /* Light grey text for duration */
}

.modal-body .album-about {
  margin: 20px 0;
  color: var(--text-color); /* White text */
  font-size: 1rem; /* Increase font size */
  line-height: 1.6; /* Improve readability */
}

.modal-body .album-credits {
  margin: 20px 0;
  color: var(--primary-color); /* Green text */
  font-size: 0.9rem; /* Slightly smaller font size */
  line-height: 1.6; /* Improve readability */
}

#about {
  background-color: var(
    --background-color
  ); /* Dark background with transparency */
  padding: 2rem;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add a shadow for depth */
  color: var(--text-color); /* White text */
  margin-top: 2rem;
}

#about h2 {
  text-align: center;
  color: var(--primary-color); /* Green text */
  margin-bottom: 1rem;
}

#about p {
  line-height: 1.6; /* Improve readability */
  margin-bottom: 1rem;
}

#about img {
  border-radius: 10px; /* Rounded corners for the image */
  margin-bottom: 1rem;
}

#about .band-members {
  display: flex;
  justify-content: space-between; /* Distribute space evenly between items */
  flex-wrap: nowrap; /* Ensure all items are on the same row */
  margin-bottom: 2rem;
}

#about .band-member {
  flex: 1; /* Ensure all members take equal space */
  text-align: center;
  margin: 0 0.5rem; /* Add some margin between members */
}

#about .band-member img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

#about .band-member h4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.5rem;
  color: var(--primary-color); /* Green text */
  font-size: calc(
    1vw + 1vh + 0.5vmin
  ); /* Responsive font size based on viewport dimensions */
  width: 100%; /* Ensure the text spans the full width of the container */
  word-wrap: break-word; /* Ensure long words break to fit within the container */
}

#about .band-member h4 span {
  display: block;
}

#about .band-member p {
  margin-bottom: 0;
  font-size: calc(
    1vw + 1vh + 0.5vmin
  ); /* Responsive font size based on viewport dimensions */
  width: 100%; /* Ensure the text spans the full width of the container */
  word-wrap: break-word; /* Ensure long words break to fit within the container */
}

.explore-btn {
  background-color: var(--primary-color);
  color: #000;
  padding: 5px 15px; /* Smaller padding */
  border-radius: 5px;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s, transform 0.3s; /* Add transform transition */
  margin-top: 10px; /* Add some space above the button */
  font-size: 0.9rem; /* Smaller font size */
  font-weight: bold; /* Bold font */
  text-transform: uppercase; /* Uppercase text */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

.explore-btn:hover {
  background-color: var(--highlight-color);
  transform: translateY(-2px); /* Slightly lift the button on hover */
}

.modal-content-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  overflow-y: auto; /* Make the modal scrollable */
  max-height: 80vh; /* Limit the height of the modal */
  padding: 1rem; /* Add padding inside the modal */
}

.modal-image {
  flex: 0 0 33.333%; /* 1/3 of the modal width */
  max-width: 33.333%;
  padding-right: 1rem;
}

.modal-info {
  flex: 0 0 66.666%; /* 2/3 of the modal width */
  max-width: 66.666%;
  padding-left: 1rem;
}

.modal-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 1rem;
}

.tracklist {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--primary-color); /* Green text */
}

.tracklist li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #333;
}

.tracklist .song-number {
  color: var(--text-color); /* White text for song numbers */
}

.tracklist .duration {
  color: #999; /* Light grey text for duration */
}

.green-text {
  color: var(--primary-color); /* Green text */
}

.section-container {
  background-color: rgba(0, 0, 0, 0.538); /* Slightly transparent background */
  padding: 2rem;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add a shadow for depth */
  color: var(--text-color); /* White text */
  margin-bottom: 2rem; /* Add space between sections */
}

.section-container h2 {
  text-align: center;
  color: var(--primary-color); /* Green text */
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
  width: 100%; /* Ensure the heading spans the full width */
}

.section-container h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color),
    var(--primary-color)
  ); /* Gradient underline */
  border-radius: 5px;
}

.shadow-hover-btn {
  background-color: var(--primary-color);
  color: #000;
  padding: 5px 15px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s, transform 0.3s;
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-hover-btn:hover {
  background-color: var(--highlight-color);
  transform: translateY(-2px);
  box-shadow: 0 0 20px 5px rgba(var(--primary-color), 0.7); /* Green shadow on hover */
}

.embed-responsive-item {
  transition: box-shadow 0.3s;
}

.embed-responsive-item:hover {
  box-shadow: 0 0 20px 5px rgba(var(--primary-color), 0.7); /* Green shadow on hover */
}

.news-article {
  flex: 0 0 calc(50% - 1rem); /* Each article takes up 50% of the row minus the gap */
  max-width: calc(50% - 1rem);
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 0.5rem; /* Add gap between news articles */
  margin-left: 0.5rem; /* Add gap between news articles */
}

.news-article .card {
  background-color: var(
    --background-color
  ); /* Dark background with transparency */
  border: none;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add a shadow for depth */
  transition: transform 0.3s, box-shadow 0.3s, border 0.3s; /* Add transition for border */
  height: 100%; /* Make the card take the full height of the parent */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-article .card:hover {
  transform: scale(1.05); /* Slightly enlarge on hover */
  box-shadow: 0 8px 16px rgba(var(--primary-color), 0.7); /* Green shadow on hover */
  border: 2px solid var(--primary-color); /* Green border on hover */
}

.news-article .card-img-top {
  border-radius: 10px 10px 0 0; /* Rounded corners for the top image */
}

.news-article .card-title {
  color: var(--primary-color); /* Green text */
  margin-bottom: 1rem;
  text-align: center; /* Center the title */
}

.news-article .card-text {
  color: var(--text-color); /* White text */
  line-height: 1.6; /* Improve readability */
  text-align: center; /* Center the text */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--primary-color); /* Green color for the arrows */
  border-radius: 50%; /* Make the arrows circular */
  padding: 10px; /* Add some padding */
}

.navbar-toggler-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* Adjust icon size */
  color: var(--primary-color); /* Green color for the icon */
}

.navbar-toggler {
  margin: 0 auto; /* Center the button */
}

.sticky-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  background-color: var(
    --background-color
  ); /* Slightly transparent background */
  z-index: 1000; /* Ensure it is above other content */
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.5); /* Add a shadow for depth */
  display: block; /* Ensure it is initially visible */
}

.sticky-footer .footer-social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 10px 0;
}

.sticky-footer .social-icon {
  font-size: 1.5rem;
  color: var(--text-color);
  transition: color 0.3s, transform 0.3s;
}

.sticky-footer .social-icon:hover {
  color: var(--primary-color);
  transform: scale(1.1);
}

.flash-green {
  color: var(--primary-color) !important; /* Flash green */
  transition: color 0.5s; /* Smooth transition */
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--primary-color); /* Green border on hover */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary-color); /* Green border on focus */
  outline: none; /* Remove default outline */
}

.form-group input:focus + label,
.form-group select:focus + label,
.form-group textarea:focus + label,
.form-group input:hover + label,
.form-group select:hover + label,
.form-group textarea:hover + label {
  color: var(--primary-color); /* Green label on focus or hover */
}

#contact .form-group input,
#contact .form-group select,
#contact .form-group textarea {
  background-color: #181818; /* Dark background color */
  color: var(--text-color); /* White text */
  border: 1px solid #333; /* Border color */
  padding: 10px; /* Padding inside the elements */
  border-radius: 5px; /* Rounded corners */
  transition: border-color 0.3s, background-color 0.3s; /* Smooth transition */
}

#contact .form-group input::placeholder,
#contact .form-group select::placeholder,
#contact .form-group textarea::placeholder {
  color: #777; /* Placeholder text color */
}

#contact .form-group input:focus,
#contact .form-group select:focus,
#contact .form-group textarea:focus {
  background-color: #222; /* Slightly lighter background on focus */
  border-color: var(--primary-color); /* Green border on focus */
  outline: none; /* Remove default outline */
}

#contact .form-group select {
  height: 45px; /* Slightly increase the height */
}

.footer-contact-link {
  display: block;
  margin-bottom: 10px;
  color: var(--text-color);
  font-size: 1.2rem;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-contact-link:hover {
  color: var(--primary-color);
}

.no-underline {
  text-decoration: none; /* Remove underline */
}

.footer-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px; /* Match the gap with the social icons */
}

.footer-contact-link {
  display: inline-block; /* Ensure the link is inline with the icons */
  color: var(--text-color);
  font-size: 1.5rem; /* Match the size of the social icons */
  text-decoration: none;
  transition: color 0.3s;
}

.footer-contact-link:hover {
  color: var(--primary-color);
}

.footer-contact-icon {
  font-size: 2rem; /* Match the size of the social icons */
  color: var(--text-color);
  transition: color 0.3s;
}

.footer-contact-icon:hover {
  color: var(--primary-color);
}

.sticky-footer .social-icon {
  font-size: 1.5rem;
  color: var(--text-color);
  transition: color 0.3s, transform 0.3s;
}

.sticky-footer .social-icon:hover {
  color: var(--primary-color);
  transform: scale(1.1);
}

/* Remove email icon styles */
.footer-contact-icon {
  display: none;
}

.checkout-container {
  max-width: 700px;
  margin: 50px auto;
  padding: 30px;
  background-color: rgba(
    26,
    26,
    26,
    0.9
  ); /* Dark background with slight transparency */
  color: var(--text-color);
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); /* Stronger shadow for depth */
  text-align: center; /* Center the text */
}

.checkout-container h2 {
  font-size: 2em; /* Larger font size */
  margin-bottom: 30px;
  color: var(--primary-color); /* Green color */
}

.checkout-items {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.checkout-items li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #444; /* Darker border */
  transition: background-color 0.3s; /* Smooth transition */
}

.checkout-items li:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* Slightly lighter background on hover */
}

.checkout-items img {
  width: 60px; /* Larger image */
  height: auto;
  margin-right: 15px;
  border-radius: 5px; /* Rounded corners */
}

.total-price {
  font-size: 1.5em; /* Larger font size */
  margin-top: 20px;
  color: var(--primary-color); /* Green color */
}

.checkout-btn {
  display: block;
  width: 100%;
  padding: 15px;
  background-color: var(--primary-color);
  color: #000;
  border: none;
  border-radius: 10px;
  font-size: 1.5em; /* Larger font size */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
  margin-top: 20px;
}

.checkout-btn:hover {
  background-color: var(--highlight-color);
  transform: scale(1.05); /* Slightly enlarge on hover */
}

.checkout-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px;
  background-color: var(--background-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid var(--primary-color);
}

.checkout-header h1 {
  font-size: 2em;
  color: var(--primary-color);
  margin: 0;
}

/* Remove back-btn styles */