a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    font-family: "Poppins", sans-serif;

}

.vision-wrapper {
  background: linear-gradient(126deg, rgba(0, 28, 125, 1) 0%, rgba(4, 82, 156, 1) 44%, rgba(0, 28, 125, 1) 100%) ;
  line-height: 1.5;
  padding: 80px 0;
  overflow: hidden;
}

.vision-wrapper .cards {
  display: flex;
  min-height: auto; /* Changed from 100dvh for internal section */
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.vision-title{
      font-family: "Bricolage Grotesque", sans-serif;
}

.vision-wrapper h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 800;
  margin: 0;
}

.vision-wrapper h3 {
  font-size: 0.9rem; /* Slightly larger for readability */
  font-weight: 400;
  margin-bottom: 1rem;
}

.vision-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.vision-wrapper .border-outer,
.vision-wrapper .border-inner {
  clip-path: polygon(
    var(--corner-size) 0%,
    calc(100% - var(--corner-size)) 0%,
    100% var(--corner-size),
    100% calc(100% - var(--corner-size)),
    calc(100% - var(--corner-size)) 100%,
    var(--corner-size) 100%,
    0% calc(100% - var(--corner-size)),
    0% var(--corner-size)
  );
}

.vision-wrapper .border-outer {
  background: #fff;
  padding: var(--border-width);
  display: flex;
  flex-direction: column;
}

.vision-wrapper .border-inner {
  flex-grow: 1;
    background: #fff;
}
.vision-list-points{
  color: #fff;
}
.text-vision{
  color: #fff !important;
  font-size: 40px !important;
}
.texts-vision::before, .texts-vision::after {
    
    background: #fff;
}

.texts-vision{
  color: #fff;
}

.vision-wrapper .card {
  --corner-size: 1.75rem;
  --border-width: 1px;
  --image-column-width: 14rem;
  --content-width: 19rem;
  display: grid;
  position: relative;
  grid-template-columns: var(--image-column-width) calc(2 * var(--corner-size));
  transition: grid-template-columns 450ms ease 50ms;
  height: 28rem;
  overflow: clip;
}

.vision-wrapper .card > * {
  min-width: 0;
  grid-row: 1;
}

.vision-wrapper .card-background {
  grid-column: 1 / -1;
}

.vision-wrapper .card-background img {
  height: 100%;
  object-fit: cover;
  width: calc(var(--image-column-width) + var(--corner-size));
}

.vision-wrapper .card-content {
  grid-column: 2;
  position: relative;
}

.vision-wrapper .card-content-layout {
  display: flex;
  gap: 2rem;
  position: absolute;
  top: var(--corner-size);
  left: var(--corner-size);
  height: calc(100% - 6rem);
  width: var(--content-width);
  translate: -1rem 0;
  transition: translate 450ms;
}

.vision-wrapper .card-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vision-wrapper h2.vertical-title {
  writing-mode: vertical-lr;
  color: #000;
}

.vision-wrapper .toggle {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1rem;
  cursor: pointer;
}

.vision-wrapper .toggle input {
  display: none;
}

.vision-wrapper .toggle svg {
  transition: rotate 250ms;
  color: #000;
}

.vision-wrapper .card:has(input:checked) {
  grid-template-columns: var(--image-column-width) var(--content-width);
}

.vision-wrapper .card:has(input:checked) .card-content-layout {
  translate: -4rem 0;
}

.vision-wrapper input:checked + svg {
  rotate: 45deg;
}

/* Specific styling for the copy inside the expanded card */
.vision-wrapper .card-copy h2 {
  font-size: 1.8rem;
  color: #000;
  margin-bottom: 0.5rem;
}

.vision-wrapper .card-copy p {
  font-size: 14px;
  color: #000;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .vision-wrapper .cards {
    gap: 1.5rem;
  }
     .vision-wrapper .card {
        height: 24rem;
        --content-width: 16rem;
        --image-column-width: 7rem;
    }
  .vision-wrapper .card-copy h2 {
    font-size: 16px;
  }
  .vision-wrapper .card-copy p{
    font-size: 12px;
  }
  
}
 .card {
         --bs-card-bg: none !important;
         --bs-card-border-color:none !important
 }