.elementor-widget-cve-carousel-vertical,
.elementor-widget-cve-carousel-vertical > .elementor-widget-container {
overflow: visible !important;
}
.cve-carousel,
.cve-carousel * {
box-sizing: border-box;
}
.cve-carousel {
--cve-section-height: 70vh;
--cve-stage-height: 280vh;
--cve-mobile-section-height: 56vh;
--cve-mobile-stage-height: 224vh;
--cve-sticky-top: 0px;
--cve-content-width: 920px;
--cve-dots-offset: 34px;
--cve-text-color: #fff;
--cve-dot-color: rgba(255, 255, 255, .38);
--cve-dot-active-color: #fff;
position: relative;
width: 100%;
height: var(--cve-stage-height);
min-height: var(--cve-section-height);
isolation: isolate;
overflow: visible;
font-size: 0;
}
.cve-carousel--fullwidth {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.cve-carousel__viewport {
position: sticky;
top: var(--cve-sticky-top);
width: 100%;
height: var(--cve-section-height);
min-height: var(--cve-section-height);
overflow: hidden;
background: var(--cve-current-bg, #222);
color: var(--cve-text-color, #fff);
transition: background-color .45s ease;
}
.cve-carousel__section {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 100%;
display: flex;
align-items: stretch;
justify-content: center;
overflow: hidden;
z-index: 1;
margin: 0;
padding: 0;
background: var(--cve-bg, #222);
color: var(--cve-text-color, #fff);
opacity: 0;
visibility: hidden;
transform: translateY(28px);
pointer-events: none;
transition:
opacity .48s ease,
transform .48s ease,
visibility .48s ease;
}
.cve-carousel__section.is-active {
z-index: 2;
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.cve-carousel__panel {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: clamp(36px, 6vw, 92px) clamp(22px, 7vw, 120px);
background: transparent;
color: inherit;
text-align: center;
}
.cve-carousel__text {
position: relative;
z-index: 1;
width: min(var(--cve-slide-content-width, var(--cve-content-width)), 100%);
margin: 0 auto;
color: currentColor;
font-size: clamp(36px, 6vw, 96px);
line-height: .98;
letter-spacing: -0.055em;
font-weight: 500;
}
.cve-carousel__text > *:first-child {
margin-top: 0;
}
.cve-carousel__text > *:last-child {
margin-bottom: 0;
}
.cve-carousel__text p {
margin: 0 0 .55em;
}
.cve-carousel__text a {
color: currentColor;
text-decoration-thickness: .06em;
text-underline-offset: .12em;
}
.cve-carousel__dots {
position: absolute;
top: 50%;
z-index: 20;
display: flex;
flex-direction: column;
gap: 14px;
opacity: 0;
transform: translateY(-50%);
pointer-events: none;
transition: opacity .25s ease;
}
.cve-carousel--dots-right .cve-carousel__dots {
right: var(--cve-dots-offset);
}
.cve-carousel--dots-left .cve-carousel__dots {
left: var(--cve-dots-offset);
}
.cve-carousel__dots.is-visible {
opacity: 1;
pointer-events: auto;
}
.cve-carousel__dot {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
cursor: pointer;
background: var(--cve-dot-color) !important;
box-shadow: none !important;
outline: none;
transition: width .25s ease, height .25s ease, background .25s ease, transform .25s ease;
appearance: none;
}
.cve-carousel__dot:hover {
transform: scale(1.18);
background: var(--cve-dot-active-color) !important;
}
.cve-carousel__dot:focus,
.cve-carousel__dot:active {
background: var(--cve-dot-color) !important;
box-shadow: none !important;
outline: none;
}
.cve-carousel__dot.is-active,
.cve-carousel__dot.is-active:hover,
.cve-carousel__dot.is-active:focus,
.cve-carousel__dot.is-active:active {
width: 12px;
height: 34px;
background: var(--cve-dot-active-color) !important;
}
@media (max-width: 767px) {
.cve-carousel {
height: var(--cve-mobile-stage-height);
min-height: var(--cve-mobile-section-height);
}
.cve-carousel__viewport {
height: var(--cve-mobile-section-height);
min-height: var(--cve-mobile-section-height);
}
}
@media (max-width: 900px) {
.cve-carousel__panel {
padding: 44px 22px;
}
.cve-carousel__text {
font-size: clamp(34px, 11vw, 68px);
letter-spacing: -0.045em;
}
.cve-carousel__dots {
gap: 10px;
}
.cve-carousel--dots-right .cve-carousel__dots {
right: 14px;
}
.cve-carousel--dots-left .cve-carousel__dots {
left: 14px;
}
.cve-carousel__dot {
width: 9px;
height: 9px;
}
.cve-carousel__dot.is-active {
width: 9px;
height: 28px;
}
}
@media (max-width: 640px) {
.cve-carousel__panel {
padding: 38px 20px;
}
.cve-carousel__text {
font-size: clamp(30px, 12vw, 54px);
line-height: 1.04;
}
}