/* Small reset */
*,
::before,
::after {
  box-sizing: border-box;
}

/* Global image styles */
img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: attr(width) / attr(height);
}

.centered-image-container {
  display: flex;
  /* Use flexbox for easy centering */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically if needed */
  margin: 0px 0;
  /* Adjust spacing around the image as needed */
}

.centered-image {
  width: 30px;
  /* Default size */
  height: auto;
  /* Let height adjust automatically */
  object-fit: contain;
  /* Ensure image is not stretched */
}

/* Example Media Queries for responsive image sizing */
@media (max-width: 992px) {
  /* Large devices (large desktops, 992px and up) */
  .centered-image {
    width: 40px;
    height: auto;
  }
}

@media (max-width: 768px) {
  /* Medium devices (tablets, 768px and up) */
  .centered-image {
    width: 30px;
    height: auto;
  }
}

@media (max-width: 576px) {
  /* Small devices (landscape phones, 576px and up) */
  .centered-image {
    width: 20px;
    height: auto;
  }
}

.bgpic {
  position: relative;
  width: 100%;
  color: rgba(0, 0, 0, 1);
  /* Set the text color with full opacity */
  background-image: url("{% static bg_images.0 %}");
  /* Set the background image */
  background-size: cover;
  background-position: center;
}




.bgpic>* {
  position: relative;
  /* Ensure content is stacked on top of the background image */
  z-index: 1;
  /* Ensure content is stacked on top of the background image */
}

.bgpic p {
  opacity: 1;
  /* Set the opacity to 1 for text elements */
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
  /* Add a text shadow for contrast */
  font-size: 100%;
  /* Set font size to 100% of the parent container */
}


.bgpic::before {
  content: "";
  /* Create a pseudo-element */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  /* Set the background color with 50% opacity */
  z-index: 1;
  /* Ensure the pseudo-element is behind the content */
}

.bgpicvs::before {
  content: "";
  /* Create a pseudo-element */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(255, 255, 255, 0.7); */
  /* Set the background color with 50% opacity */
  z-index: 0;
  /* Ensure the pseudo-element is behind the content */
}


.whitetext {
  color: #f8f9fc;
}


.dashed-line {
  border: 3px dashed blue;
  /* Set the border color to blue OR  rgb(30, 255, 0);   */
  padding: 10px;
  /* Add padding */

  /* Adjust the width based on content */
}


.hr-container {
  position: relative;
  text-align: center;
  margin-top: 20px;
  /* Adjust the margin as needed */
}

.tag-container {
  position: relative;
  text-align: justify;
  padding: 5px;
  /*  margin-top: 50px;Adjust the margin as needed */
}

.hr-line {
  border: none;
  border-top: 1px solid #ccc;
  /* Style the horizontal rule */
  width: 100%;
  /* Set the width of the horizontal rule */
}

.hr-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f8f9fc;
  /* Ensure text is visible on top of the rule */
  padding: 0 10px;
  /* Optional: Add padding to the text */
  color: #ccc;
  font-size: 0.6em;
}

/* Specific styling for accordion cards */
.accordion-card .card-body {
  max-height: 100px;
  /* Initial height */
  overflow: hidden;
  position: relative;
}

.accordion-card .collapse:not(.show) .card-body {
  max-height: 100px;
  /* Initial height */
}

.accordion-card .collapse.show .card-body {
  max-height: none;
  /* Set max height to none when expanded */
}


.nav-tabs {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  /* Prevent tabs from wrapping to the next line */
  overflow: hidden;
  /* Hide any overflow */
}

.nav-item {

  /* Distribute available space evenly among tabs */
  flex-shrink: 0;
  /* Prevent tabs from shrinking */
  text-align: center;
  /* Center the content inside each tab */
}

.nav-link {
  padding: 5px 10px;
  /* Adjust padding for better spacing */
}

.nav-link.middle {
  padding: 5px;
  /* Smaller padding for the middle tab */
}

/* Optional: Add styles to make active tab more prominent */
.nav-link.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* Adjust the width of the middle tab */
#tabMiddle {
  width: 30px;
  /* Set a specific width for the middle tab */
}

/* Ensure the middle tab takes minimal space */
#tabMiddle a {
  padding: 0;
  /* Remove padding */
  margin-right: 0;
  /* Remove right margin */
}

/* Adjust the width of the first and last tabs */
#tab1 a,
#tab2 a {
  flex-grow: 1;
  /* Let them grow to fill remaining space */
}

/* Ensure the middle tab does not grow */
.nav-item#tabMiddle {
  flex-grow: 0;
}