.image-circle-border {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 10px solid lightgray;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }

  .image-circle-border-top {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 40px solid var(--bs-primary);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }
  
  .speech-bubble {
    position: relative;
    background: var(--bs-primary); /* bg-primary color */
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
  }
  
  .speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -20px; /* Adjust based on position */
    right: 75px; /* Move the spout to the left */
    border-width: 10px;
    border-style: solid;
    border-color: var(--bs-primary) transparent transparent transparent;
  }
  
  .speech-bubble-secondary {
    position: relative;
    background: #9FA6B2; /* bg-primary color */
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .speech-bubble-secondary::before {
    content: '';
    position: absolute;
    bottom: -20px; /* Adjust based on position */
    right: 75px; /* Move the spout to the left */
    border-width: 10px;
    border-style: solid;
    border-color: #9FA6B2 transparent transparent transparent;
  }

/* Dark theme styles */
[data-bs-theme="dark"] .speech-bubble {
    background: var(--bs-secondary-bg);
    color: #ffffff; /* Set text color to white for dark theme */
    border-color: #ffffff; /* Light border for dark theme */
  }
  
/* Dark theme spout styles */
[data-bs-theme="dark"] .speech-bubble::before {
border-color: var(--bs-secondary-bg) transparent transparent transparent;
}
  
/* Dark theme link styles */
[data-bs-theme="dark"] .speech-bubble a {
color: #ffffff; /* Set link color to white for dark theme */
}



    .image-circle-border-agent {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border: 10px solid var(--bs-primary-bg-subtle);
        height: 130px;
        width: 130px;
        border-radius: 50%;
      }

    .team-bubble {
    position: relative;
    background: var(--bs-primary-bg-subtle);  
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    color: #000000; /* Set text color to black for speech-bubble */
    border: 3px solid #333333; /* Dark thin border */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 3D effect */
  }

  .team-bubble::before {
    content: '';
    position: absolute;
    bottom: -20px; /* Adjust based on position */
    right: 75px; /* Move the spout to the left */
    border-width: 10px;
    border-style: solid;
    border-color: var(--bs-primary-bg-subtle) transparent transparent transparent;
}


/* Dark theme link styles */
[data-bs-theme="dark"] .speech-bubble a {
  color: #ffffff; /* Set link color to white for dark theme */
}

.agent-bubble {
  position: relative;
  background: var(--bs-primary); /* bg-primary color */
  color: white;
  border-radius: 30px; /* half the height for perfect circle corners */
  display: flex;
}

.agent-bubble a {
  color: white;
}

.card-title {
  white-space: normal; /* Allow the text to wrap */
  word-wrap: break-word; /* Ensure long words break correctly */
  max-width: 100%; 
  overflow-wrap: break-word; /* Handle long words breaking */
}

.agent-bubble .card-title {
  color: white;
}

.agent-bubble::before {
  content: '';
  position: absolute;
  bottom: -29px; /* Adjust based on position */
  right: 75px; /* Move the spout to the left */
  border-width: 15px;
  border-style: solid;
  border-color: var(--bs-primary) transparent transparent transparent;
}

input[type="checkbox"].select-checkbox { 
  border-radius: 50%; 
  border: 2px solid; 
  width: 25px; 
  height: 25px; 
  box-shadow: 3px 3px 5px #888888;
}    

.badge {
  white-space: normal; /* Allow the text to wrap */
  word-wrap: break-word; /* Ensure long words break correctly */
  display: inline-block; /* Ensure the badge respects the container's width */
  max-width: 100%; /* Adjust the max width as needed */
  overflow-wrap: break-word; /* Handle long words breaking */
}


.hover-animate { transition: color 0.3s ease-in-out, transform 0.3s ease-in-out; } 
.hover-animate:hover { transform: scale(1.1); z-index:999 }


.agent-item-bubble {
  position: relative;
  background: var(--bs-tertiary); /* bg-primary color */

  border-radius: 10px; /* half the height for perfect circle corners */
  display: flex;
}

.agent-item-bubble::before {
  content: '';
  position: absolute;
  bottom: -29px; /* Adjust based on position */
  right: 75px; /* Move the spout to the left */
  border-width: 15px;
  border-style: solid;
  border-color: var(--bs-tertiary-bg) transparent transparent transparent;
}

.media-bubble-red {
  position: relative;
  background: var(--bs-danger); /* bg-primary color */
  color: white;
  border-radius: 30px; /* half the height for perfect circle corners */
  display: flex;
}

.media-bubble-red::before {
  content: '';
  position: absolute;
  bottom: -29px; /* Adjust based on position */
  right: 75px; /* Move the spout to the left */
  border-width: 15px;
  border-style: solid;
  border-color: var(--bs-danger) transparent transparent transparent;
}

.media-bubble {
  position: relative;
  background: #333333; /* bg-primary color */
  color: white;
  border-radius: 30px; /* half the height for perfect circle corners */
  display: flex;
}

.media-bubble::before {
  content: '';
  position: absolute;
  bottom: -29px; /* Adjust based on position */
  right: 75px; /* Move the spout to the left */
  border-width: 15px;
  border-style: solid;
  border-color: #333333 transparent transparent transparent;
}


.splash-2-bubble {
  position: relative;
  background: var(--bs-tertiary); /* bg-primary color */
  color: black;
  border-radius: 30px; /* half the height for perfect circle corners */
  display: flex;
}

.splash-2-bubble::before {
  content: '';
  position: absolute;
  bottom: -29px; /* Adjust based on position */
  right: 75px; /* Move the spout to the left */
  border-width: 15px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}


.splash-3-bubble {
  position: relative;
  background: var(--bs-tertiary); /* bg-primary color */
  color: black;
  border-radius: 30px; /* half the height for perfect circle corners */
  display: flex;
}

.splash-3-bubble::before {
  content: '';
  position: absolute;
  bottom: -29px; /* Adjust based on position */
  right: 75px; /* Move the spout to the left */
  border-width: 15px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}

.row {
  margin: 0px !important;
}

.card .card-img-top{
  max-height: 250px;
  object-fit: contain;
}

.g-recaptcha{
  transform:scale(0.77);
  -webkit-transform:scale(0.77);
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
  }

  .card-title {
    word-wrap: break-word;
    white-space: normal;
  }