.centered-icon-container {
    display: block;
    width: fit-content;
    margin: auto;
    position: relative;
}

.icon-columns h2 {
    margin-bottom: -2rem;
    position: relative;
}

.centered-icon-container .icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--teal);
}

.centered-icon-container .icon svg{
	width: 120px;
}

.icon-column .icon path {
    fill: var(--gray);
}

.icon-column {
    position: relative;
	padding: 30px;
	text-align: center;
}

.icon-column::before {
	content: '';
    position: absolute;
    height: calc(100% - 85px - 15px);
    width: 25%;
    border: 5px solid var(--teal);
    left: 0;
    bottom: 0;
    z-index: 10;
	border-radius: 30px 0px 0px 30px;
	border-right: 0px;
}
.column-content p{
	text-align: center;
}
.icon-column::after {
	content: '';
    position: absolute;
    height: calc(100% - 85px - 15px);
    width: 25%;
    border: 5px solid var(--teal);
    right: 0;
    bottom: 0;
    z-index: 10;
	border-radius: 0px 30px 30px 0px;
	border-left: 0px;
}


.icon-column a.btn.btn-primary {
    font-size: 19px;
    border-radius: 30px;
	line-height: 1.2;
    width: fit-content;
    padding: 15px 30px;
    color: var(--cream);
    text-transform: uppercase;
    background: var(--navy);
    border: 0px;
    font-weight: bold;
    box-shadow: var(--drop);
    margin-top: 10px;
    transition: 800ms ease;
    position: relative;
    overflow: hidden/* Add a position to the parent container for proper icon positioning */;
}

.icon-column h3 {
    font-size: 28px;
    font-weight: bold;
}

.icon-column a.btn.btn-primary:hover {
	background: var(--purple);
	color:var(--cream);

}