.toggle-box {
    display: none;
}

.toggle-box+label {
    cursor: pointer;
    font-weight: 600;
    line-height: 18px;
    margin-bottom: 6px;
    margin-top: 7px;
    display: flex;
    -webkit-tap-highlight-color: transparent;
}

.toggle-box+label .icon {
    font-size: 20px;
    display: none;
}

.toggle-box:not(:checked)+label .icon:first-child {
    display: inline-block; /* Display plus icon when not checked */
}

.toggle-box:checked+label .icon:last-child {
    display: inline-block; /* Display minus icon when checked */
}

.toggle-text {
    display: none;
}

.toggle-box:checked+label~.toggle-text {
    display: block;
}

/* .img-fluid {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    filter: brightness(.9) contrast(1);
    background: #e3e3e3;
    width: -webkit-fill-available
}


[data-bs-theme=dark]{
  .img-fluid {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    filter: brightness(.9) contrast(1);
    background: #445562;
    width: -webkit-fill-available
}
} */

[data-bs-theme=dark]{
  .bi-caret-left-fill,.bi-caret-right-fill {
    color: #dee2e6;
  }
}

[data-bs-theme=dark]
.scrolltxts2{
    color: #dee2e6;
}

  /* show scrolltxt element only on desktop devices */
  @media (min-width: 768px) {
    .scrolltxts2 {
      display: block;
      margin-top: 25px;
      font-weight: 500;
      color: black;
      margin-left: 400px;
    }

    .gtsim span {
      width: 20px;
      height: 20px;
      display: block;
      border-right: 2px solid var(--color-default);
      border-bottom: 2px solid var(--color-default);
      transform: rotate(45deg);
      margin: -10px;
      animation: animate 2s infinite;
    }

    .gtsim span:nth-child(2) {
      animation-delay: -.2s;
    }

    .gtsim span:nth-child(3) {
      animation-delay: -.4s;
    }

    @keyframes animate {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
        transform: rotate(45deg) translate(10px, 10px);
      }
      100% {
        opacity: 0;
      }
    }
  }
  
  /* hide scrolltxt element on mobile devices */
  @media (max-width: 767px) {
    .scrolltxts2 {
      display: none;
      margin-top: 25px;
      font-weight: 500;
      color: black;
      margin-left: 400px;
    }
  }