.col-content-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
.card-content a {
	text-decoration: none;
}
.card-content h3 {
	font-weight:600;
}

.col-item {
  align-self: stretch;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
  overflow: hidden;
	padding: 40px 30px;
  position: relative;
  gap: 24px;
	transition: flex 0.2s ease-in-out;
  visibility: hidden;
}

.col-item .hover-img,
.col-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
}


.col-item .overlay {
  background-color: #E1EFFD;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: opacity 0.2s ease-in-out;
}

.col-item .overlay, .col-item .card-content {
	cursor:pointer;
}

.col-item.active {
background: var(--Light-Gradient, linear-gradient(122deg, #FFF 2.05%, #E1EFFD 94.81%));
}

.col-item.active .overlay {
  opacity: 0;
}

.col-item .hover-img {
  height: auto;
  width: 100%;
  z-index: 1;
}

.col-item .col-item-inner {
  z-index: 10;
}

.col-item .caret {
  margin-left: auto;
  transition: all 0.2s ease-in-out;
  z-index: 10;
}

.col-item.active .caret {
  transform: rotate(180deg);
}

.colSection-4 .col-item {
    flex-basis: 20%; 
}
.colSection-3 .col-item {
    flex-basis: 25%; 
}
.colSection-2 .col-item {
    flex-basis: 33%; 
}
.colSection-1 .col-item {
    flex-basis: 80%; 
}

.col-item p {
	margin: auto auto 30px auto;
  width: 100%;
}
  
.col-content-wrapper .col-item p:last-child {
  margin-bottom: 0px;
}

/* Hide all card content paragraphs by default */
.card-content p {
   opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.5s ease;
}

/* Only show paragraphs inside active cards */
.col-item.active .card-content p {
 opacity: 1;
	max-height:300px;
}

@media (min-width: 1401px) {
  .col-item {
    min-height: 390px;
  }
  .col-item.active {
    flex-grow: 1;
  }
}

@media (max-width: 1400px) {
  .colSection-4 .col-item {
    flex-basis: 45%;
  }
	
		.col-item .caret {
		transform:rotate(90deg);
	}
	.col-item.active .caret {
		transform:rotate(270deg);
	}
	
	
}

@media screen and (max-width: 769px) {
	.col-item {
		flex-basis: 100% !important;
    padding: 20px;
	}
  .col-title h3 span {
    color: var(--White, #FFF);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}