.cta-rotator {
	position: relative;
	overflow: hidden;
	padding: 80px var(--sideGap);
	background: linear-gradient(0deg,rgba(245, 245, 247, 1) calc(100% - 200px), rgba(0, 0, 0, 0) 100%);
	
	&::after {
		content: '';
		width: 100%;
		aspect-ratio: 1864 / 659;
		position: absolute;
		background-color: rgba(26, 94, 141, 0.08);
		z-index: -1;
		top: 0;
		border-radius: 50%;
		transform-origin: top center;
		transform: translateX(-50%) scale(1.3);
		left: 50%;
	}
	
	& .centered-text-raw {
		max-width: 818px;
		padding-left: 30px;
		padding-right: 30px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	& .cta-rotator-wrapper {
		padding: 64px 24px;
		padding-bottom: 24px;
		display: flex;
		gap: 80px;
		align-items: center;
		
		@media (max-width: 991px) {
			padding-left: 0;
			padding-right: 0;
            padding-top: 0;
			flex-direction: column;
		}
		
		& img {
			width: 100%;
			height: auto;
			border-radius: 16px;
			border: 1px solid #E5E5E9;
			box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08), 0 1px 3px -1px rgba(0, 0, 0, 0.08);
		}

        &.cta-rotator-remove-boxshadow img {
            box-shadow: none;
            border: none;
        }
		
		& img,
		& .cta-list {
			max-width: calc(50% - 40px);
			@media (max-width: 991px) {
				max-width: 100%
			}
		}
		
		& .cta-list {
			
			display: flex;
			flex-direction: column;
			gap: 32px;

            h2 {
                max-width: 94%;
            }
			
			.cta-item {
				padding-left: 24px;
				position: relative;
				cursor: pointer;
				
				&::after,
				&::before {
					top: 0;
					left: 0;
					height: 100%;
					content: '';
					position: absolute;
					height: 100%;
					width: 4px;
					border-radius: 4px;
					background-color: #E7E7E7;
				}
				
				&::after {
					background-color: #771A77;
					height: 0;
				}
				
				& h3 {
					font-size: 24px;
					color: #343A40;
					font-style: normal;
					font-weight: 700;
					line-height: 130%;
					margin-bottom: 0;
					transition: all 0.25s;
				}
				& .content {
                    display: none;
				}
				& p { margin-bottom: 21px; }
				
				&.active {
                    cursor: default;
					& h3 {
                        margin-bottom: 12px;

						@media (min-width: 991px) {
							font-size: 28px;
							margin-bottom: 9px;
						}
					}
					& .content {
                        display: block;
					}
					&:hover::after {
						animation-play-state: paused;
					}
					
					&:after {
						animation: grow linear 8s;
						animation-play-state: var(--animation-play-state, paused);
					}
					
				}
			}
		}
	}

    & .chip-above-title {
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.80);
        box-shadow: 0 0 12px 0 rgba(116, 39, 107, 0.08);
        width: fit-content;
        display: inline-block;
        padding: 7px 16px;
        border-radius: 12px;
        margin-bottom: 20px;

        & span {
            color: #771A77;
            font-family: Roboto;
            font-size: 17px;
            font-style: normal;
            font-weight: 400;
            line-height: 125%;
            letter-spacing: 0.085px;
            background: linear-gradient(88deg, rgba(119, 26, 119, 0.70) 0%, rgba(119, 26, 119, 0.60) 33%, rgba(119, 26, 119, 0.40) 49.03%, rgba(119, 26, 119, 0.60) 67.42%, #771A77 98.06%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            & strong {
                background: linear-gradient(88deg, rgba(119, 26, 119, 0.70) 0%, rgba(119, 26, 119, 0.60) 33%, rgba(119, 26, 119, 0.40) 49.03%, rgba(119, 26, 119, 0.60) 67.42%, #771A77 98.06%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-family: Roboto;
                font-size: 17px;
                font-style: normal;
                font-weight: 700;
                line-height: 125%;
                letter-spacing: 0.085px;
            }
        }
    }

    & .cta-list .chip-above-title {
        transform: translateY(30px);
    }
}

@keyframes grow {
	from { height: 0 }
	to { height: 100% }
}