/* General Page Styles */

.shortcode-wrapper {
  margin: 25px;
  padding: 25px;
  display: flex; /* Enable flexbox layout */
  background-color: #f9f9f9; /* Wrapper background */
  flex-direction: column; /* Align items in a row (default, but explicit here) */
  gap: 20px; /* Space between the fixed and flexible containers */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
}

.flex-container {
  flex: 1; /* Takes up the remaining space */
  height: 100%; /* Full height of the parent */
  background-color: #f9f9f9; /* Example background color for the flexible container */
  display: flex; /* Use flexbox for child alignment */
}

.fixed-container {
  width: 300px; /* Fixed width for the container */
  height: 100%; /* Full height of the parent */
  color: white; /* Text color inside the fixed container */
  display: flex; /* Use flexbox to align content */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
}

/* Client List Container */
.client-list-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  align-items: center; /* Center content vertically */
  text-align: center;
}

/* Client Cards Grid */
.client-cards {
  display: grid;
  /*grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));*/
  gap: 20px;
  margin-top: 20px;
  align-items: center; /* Center content vertically */
}

/* Individual Client Card */
.client-card {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.client-card p {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.client-card .view-group-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #31ad84;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.client-card .view-group-link:hover {
  background-color: #043d60;
}

/* Hover Effect for Client Card */
.client-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .client-cards {
      grid-template-columns: 1fr;
  }

  .client-card {
      padding: 10px;
  }
}

.client-group-container {
  background-color: #f9f9f9; /* Light background */
  padding: 20px; /* Spacing inside the container */
  border: 1px solid #ddd; /* Light border */
  border-radius: 8px; /* Rounded corners */
  text-align: center; /* Center the text */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  max-width: 400px; /* Limit width for readability */
  margin: 20px auto; /* Center the container horizontally */
}

.client-group-container h2 {
  font-size: 1.5em; /* Larger title font size */
  color: #333; /* Darker text color */
  margin-bottom: 10px; /* Space below the title */
}

.client-group-container p {
  font-size: 1em; /* Normal text size */
  color: #555; /* Gray text color */
  margin-bottom: 20px; /* Space below the paragraph */
}

.client-group-container .group-name {
  font-weight: bold; /* Emphasize the group name */
  color: #0073aa; /* Use a primary color for emphasis */
}

.group-button {
  display: inline-block; /* Make the button inline but block-like */
  padding: 10px 20px; /* Button padding */
  background-color: #31AD84; /* Primary background color */
  color: #fff; /* White text */
  text-decoration: none; /* Remove underline */
  border-radius: 5px; /* Rounded corners */
  font-size: 1em; /* Normal button font size */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
}

.group-button:hover {
    color: #fff;
  background-color: #043D60; /* Darker background on hover */
  transform: translateY(-2px); /* Slight lift on hover */
}

.dynamic-content {
  margin-top: 25px;
  margin-bottom: 50px;
  padding: 20px !important;
  background-color: #f9f9f9 !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
  animation: slideIn 1s ease forwards;
}

.dynamic-content.visible {
  opacity: 1;
  transform: translateY(0); /* Slide up to its original position */
}

@keyframes slideIn {
  from {
      transform: translateY(-100%);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}

/* Box Container Styles */
.box-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
}

.box {
  display: block;
  width: 45%;
  padding: 20px;
  background-color: #31ad84;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.box:hover {
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  background-color: #043d60;
}

/* Responsive Design */
@media (max-width: 768px) {
  .box-container {
      flex-direction: column;
      gap: 10px;
  }

  .box {
      width: 100%;
  }
}

html {
  scroll-behavior: smooth;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0073aa;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.button:hover {
  background-color: #005177;
}

.header-menu {
  display: flex;
  justify-content: flex-end; /* Align the menu to the right of the header */
  align-items: center;
  gap: 20px; /* Space between menu items */
  padding-right: 30px; /* Adjust spacing from the right edge */
}

.hamburger-icon {
  display: none;
}

/* Menu List */
.header-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* Align items horizontally */
  gap: 20px; /* Space between items */
}

.header-menu li {
  position: relative;
}

.header-menu a {
  display: inline-block;
  padding: 10px 25px; /* Add spacing inside the box */
  color: white;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.1s ease; /* Smooth hover effect */
  border-bottom: 3px solid transparent; /* Reserve space for hover line */
}

.header-menu a:hover {
  border-bottom-color: #31ad84; /* Green underline on hover */
  transform: scale(1.05);
}
/* Submenu Styles */
.header-menu .submenu {
  display: none; /* Hide submenu by default */
  position: absolute;
  top: 100%; /* Position below the parent menu item */
  left: 0;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow */
  padding: 10px 0;
  z-index: 1000;
  min-width: 200px; /* Ensure a consistent width */
}

/* Parent menu item with a submenu */
.header-menu .has-submenu {
  position: relative; /* Ensures submenu is positioned relative to this item */
}

/* Show Submenu on Hover */
.header-menu .has-submenu:hover .submenu {
  display: block; /* Display submenu when hovering over the parent */
}

.header-menu .has-submenu a {
  color: white;
}

.header-menu .submenu li {
  padding: 0;
  margin: 0;
}

.header-menu .submenu a {
  display: block;
  padding: 10px 15px; /* Add spacing for submenu items */
  color: #333;
  font-size: 0.9em;
  text-decoration: none;
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 0; /* No rounded corners for submenu links */
  border: none; /* Remove underline reservation */
}

.header-menu .submenu a:hover {
  color: #31ad84;
}

@media (max-width: 1025px) {
  .header-menu {
    position: relative;
    display: flex;
    justify-content: flex-end; /* Align hamburger icon to the right */
    align-items: center;
    padding: 0;
  }

  .hamburger-icon {
    display: block; /* Show only on mobile */
    cursor: pointer;
    font-size: 1.5em;
    margin: 10px;
    color: white;
  }

  .header-menu ul {
    display: none; /* Initially hide the menu */
    flex-direction: column; /* Stack items vertically */
    position: absolute;
    top: 100%; /* Position below the hamburger icon */
    right: 0;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 35%;
    padding: 10px 0;
    z-index: 1000;
  }

  .header-menu ul.show-menu {
    display: flex; /* Show menu when toggled */
  }

  .header-menu li {
      width: 35%; /* Full-width items */
      text-align: center; /* Center align text */
  }

  .header-menu a {
      display: block;
      padding: 15px;
      font-size: 1.2em;
      background-color: transparent;
      text-decoration: none;
      color: #333;
  }

  .header-menu a:hover {
      color: #31ad84;
      border: none; /* Remove underline reservation */
      transform: scale(1.0);
  }

  /* Hide the submenu on mobile until parent is clicked */
  .header-menu .submenu {
      display: none;
      position: static; /* Align in flow of the menu */
      background: none;
      box-shadow: none;
  }

  .header-menu .has-submenu.open .submenu {
      display: block; /* Show submenu when parent is clicked */
  }

  .header-menu .has-submenu a {
    color: #333;
  }
}

/* Mobile styles */
@media (max-width: 768px) {
  .header-menu ul {
      width: 100%;
  }

  .header-menu .has-submenu a {
    color: #333;
  }
}