.vermeg-solutions-filter-right {
width: 70%;
display: flex;
padding: var(--spacing-xl, 32px) 0px;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-3xl, 48px);
flex: 1 0 0;
}
.storiethumbtitle {
color: var(--neutrals-neutral-950, #14142A);
font-family: "Figtree", serif;
font-size: var(--typography-size-p3, 16px);
font-style: normal;
font-weight: 600;
line-height: var(--typography-line-height-p3, 24px);
}
.solution-category-ctgs {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.vermeg-solutions-filter-left {
width: 30%;
}
.vermeg-solutions-filter-right {
width: 70%;
}
.vermeg-solutions-filter {
display: flex;
flex-direction: row;
}
.solution-category-title {
border-bottom: 1px solid var(--primary-primary-default, #ED1B2F);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--dropshadow-blur-2md, 24px);
align-self: stretch;
margin-bottom: var(--spacing-lg, 24px);
} .csrsection {
max-width: var(--global-site-width);
margin: 0 auto;
gap: var(--spacing-lg, 24px);
display: flex;
flex-direction: column;
padding: var(--spacing-4xl, 64px) var(--spacing-xl, 32px);
}
.csrOverlay {
background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 18.65%, rgba(0, 0, 0, 0.64) 41.76%);
width: 100%;
height: 100%;
position: absolute;
}
.csrheader {
margin-bottom: 66px;
}
.ze-vermeg-csr {
overflow: hidden;
position: relative;
}
.csrcontent {
display: flex;
flex-direction: row;
align-items: center;
justify-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 0px var(--spacing-lg, 24px);
}
.borderbottom {
border-bottom: 1px solid var(--Neutrals-neutral-100-White, #FFF);
width: 100%;
padding-bottom: var(--spacing-md, 16px);
}
.csrcards.csrinner {
min-height: 320px;
display: flex;
min-width: 318px;
padding: var(--spacing-lg, 24px);
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-md, 16px);
flex: 1 1 calc(33.333% - 24px);
cursor: pointer;
}
.csrcards.csrinner.active {
box-sizing: border-box;
border-radius: 0px var(--spacing-lg, 24px);
border: 1px solid var(--neutrals-neutral-100-white, #fff);
background: var(--overlay-light-60, rgba(255, 255, 255, 0.10));
}
.csrsection .csrheader .p2.regular {
max-width: 64%;
}
.csr-card-bg iframe.wsce-background-video {
max-width: none;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 130vw;
min-width: 110vh;
height: 150vh;
min-height: 80vh;
z-index: -1 }
.csrcards .csr-card-bg iframe {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.csrcards.active .csr-card-bg iframe {
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
.csrcards.csrinner:hover .redhover h6,
.csrcards.active .bold.white h6.zd-heading-title,
.csrcards.active .redhover h6,
.csrcards.active h6 {
color: var(--primary-primary-default, #ED1B2F);
}
.csrbtn {
display: flex;
flex-direction: column;
flex-basis: fit-content;
align-items: flex-end;
}
@media only screen and (max-width: 1200px) {
.ze-accordions .ze-accordion-icon {
top: 15px !important;
}
} @media only screen and (max-width: 768px) {
.csr-card-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
.csr-card-bg iframe.wsce-background-video {
width: 470vh;
height: 300vh;
}
.ze-accordions details {
padding: 0 !important;
}
} @media only screen and (min-width: 769px) and (max-width: 1200px) {
.csr-card-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
.csr-card-bg iframe.wsce-background-video {
width: 430vh;
height: 200vh;
}
}
@media only screen and (min-width: 1201px) and (max-width: 1360px) {
.csr-card-bg iframe.wsce-background-video {
width: 305vh;
}
}
@media only screen and (min-width: 1361px) and (max-width: 1460px) {}  @keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} .ze-accordions {
display: flex;
flex-direction: row;
justify-items: flex-start;
white-space: nowrap;
align-items: flex-start;
align-content: flex-start;
gap: 0px var(--spacing-lg, 24px);
flex-wrap: wrap;
}
.ze-accordion .acc-image {
display: none;
}
.acc-bloc {
width: 31%;
height: 480px;
}
.ze-accordions-pictures {
width: 50%;
margin-right: 24px;
}
.ze-accordions-picture img.d-img {
height: 100%;
}
.ze-accordions-contents {
width: 48%;
margin: 24px 0;
}
.ze-accordions-contents details[open] summary {
margin-bottom: 24px;
}
.featuresheader {
display: flex;
height: 100%;
min-width: 100%;
flex-direction: column;
justify-content: space-between; width: 100%;
}
.ze-accordions-picture {
display: none;
animation: fadeIn ease .6s;
-webkit-animation: fadeIn ease .6s;
-moz-animation: fadeIn ease .6s;
-o-animation: fadeIn ease .6s;
-ms-animation: fadeIn ease .6s;
}
.ze-accordions-picture {
border-radius: 0px var(--radius-13md, 40px);
box-shadow: var(--spacing-3xs, 2px) var(--dropshadow-positioning-sm, 8px) var(--dropshadow-blur-2xs-2, 10px) 0px var(--opacity-dark-4, rgba(0, 0, 0, 0.04));
overflow: hidden;
}
.ze-accordions-picture.open {
animation: fadeIn ease .6s;
-webkit-animation: fadeIn ease .6s;
-moz-animation: fadeIn ease .6s;
-o-animation: fadeIn ease .6s;
-ms-animation: fadeIn ease .6s;
display: block;
}
.ze-accordions-picture.open,
.ze-accordions-picture.open * {
height: 100%;
}
.acc-left,
.acc-right {
border-top: 1px solid #D9DBE9;
}
.ze-accordions details {
border-bottom: 1px solid #D9DBE9;
padding: 24px 0px;
transition: all 0.4s;
display: flex;
padding: var(--spacing-md, 16px);
flex-direction: column;
height: 100%;
justify-items: center;
justify-content: center;
}
.ze-accordions details summary::-webkit-details-marker,
.ze-accordions details summary::marker {
display: none
}
.ze-accordions details summary .ze-accordion-icon:after {
content: " ";
background-image: url(//www.vermeg.com/wp-content/uploads/2025/01/Plus.png);
display: inline-block;
position: absolute;
width: 22px;
height: 22px;
transition: all 0.4s;
}
.ze-accordions .ze-accordion-icon {
position: absolute;
top: 5px;
right: 0px;
}
.ze-accordions details[open] summary .ze-accordion-icon:after {
content: " ";
background-image: url(//www.vermeg.com/wp-content/uploads/2025/01/Minus.png);
transition: all 0.4s;
}
.ze-accordions details[open] .acc-contents {
max-height: 100%;
}
.ze-accordions details .acc-contents {
width: 90%;
max-height: 0;
overflow: hidden;
transition: 0.5s ease;
}
.ze-accordions details.open .acc-contents {
max-height: 100%;
}
.ze-accordions .acc-contents {
white-space: normal;
}
.ze-accordions details .acc-title:hover p {
color: var(--primary-primary-default, #ED1B2F);
}
.ze-accordions details[open] .acc-title p {
color: var(--primary-primary-default, #ED1B2F);
}
.ze-accordions details summary {
width: 100%;
cursor: pointer;
list-style: none;
position: relative;
transition: all 0.4s;
}
.ze-accordions.featuressection.mob {
display: none;
}
.ze-accordions li {
color: var(--neutrals-neutral-850, #2D2A3E);
font-family: "Figtree", serif;
font-size: var(--typography-size-p3, 16px);
font-style: normal;
font-weight: 400;
line-height: var(--typography-line-height-p3, 24px);
padding-top: var(--spacing-md, 16px);
}
@media only screen and (max-width: 1024px) {
.ze-accordion .acc-image {
display: block;
}
.ze-accordion .acc-image img {
border-radius: 0px var(--radius-13md, 40px);
max-height: 600px;
width: 100%;
object-fit: cover;
object-position: top;
}
.ze-accordions {
flex-direction: column;
}
.ze-accordions .acc-bloc {
width: 100%;
height: 100%;
}
.acc-picture-mob {
display: flex;
justify-content: center;
align-items: center;
align-self: stretch;
border-radius: 0px var(--radius-13md, 40px);
overflow: hidden;
}
.acc-title {
padding: var(--spacing-md, 12px);
}
.acc-content {
padding: var(--spacing-md, 12px) 0;
}
.acc-content ul {
padding: 0px 0px 0px 24px;
list-style: outside;
}
.acc-bloc.acc-center {
display: none
}
.ze-accordions.featuressection.mob {
display: block;
}
.featuresheader-mob {
width: 100%;
}
.ze-accordions {
white-space: normal;
}
.ze-accordions-contents {
width: 100%;
}
.ze-accordions details .acc-contents {
width: 100%;
margin: 0px
}
.ze-accordions-contents details[open] {
padding: 24px 0px 0px 0px;
}
.ze-accordions {
border-top: 1px solid #D0D5DD;
border-bottom: 1px solid #D0D5DD;
}
.ze-accordions-contents {
margin: 0px;
}
} .timeline {
display: flex;
align-items: flex-start;
align-content: flex-start;
gap: 0px var(--spacing-xl, 32px);
align-self: stretch;
flex-wrap: nowrap;
}
.timeline-pictures,
.timeline-details {
width: 48%;
}
.timeline-dots {
position: relative;
display: flex;
width: 32px;
height: 434px;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
margin-top: var(--spacing-sm, 12px);
}
.timeline-dot {
width: 16px;
height: 16px;
background-color: var(--neutrals-neutral-500, #D9DBE9);
border-radius: 50%;
cursor: pointer;
z-index: 1;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.timeline-dot.active {
background-color: var(--primary-primary-default, #ED1B2F);
}
.timeline-dot:hover {
background-color: #555;
border-color: #555;
}
.timeline-indicator {
position: absolute;
left: 5.5px;
width: 22px;
height: 22px;
border-radius: 50%;
transition: top 0.3s ease;
border: 1px solid var(--primary-primary-default, #ED1B2F);
}
.timeline-picture {
display: none;
animation: fadeIn ease .6s;
-webkit-animation: fadeIn ease .6s;
-moz-animation: fadeIn ease .6s;
-o-animation: fadeIn ease .6s;
-ms-animation: fadeIn ease .6s;
}
.timeline-picture.active {
display: block;
animation: fadeIn ease .6s;
-webkit-animation: fadeIn ease .6s;
-moz-animation: fadeIn ease .6s;
-o-animation: fadeIn ease .6s;
-ms-animation: fadeIn ease .6s;
border-radius: 0px var(--radius-13md, 40px);
overflow: hidden;
}
.timeline-dots::before {
content: "";
position: absolute;
top: 0;
left: 16px;
width: 1px;
height: 100%;
background-color: #D9DBE9;
z-index: 0;
}
.timeline-content {
padding: var(--spacing-md, 16px) 0px;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-md, 16px);
flex: 1 0 0;
display: none;
animation: fadeIn ease .6s;
-webkit-animation: fadeIn ease .6s;
-moz-animation: fadeIn ease .6s;
-o-animation: fadeIn ease .6s;
-ms-animation: fadeIn ease .6s;
}
.timeline-content.active {
display: flex;
}
.timeline-content h3 {
margin: 0 0 10px;
font-size: 18px;
color: #333;
}
.timeline-content p {
margin: 0;
font-size: 14px;
color: #555;
}
@media (max-width: 480px) {
.ze-accordion .acc-image img {
max-height: 200px;
object-position: top;
}
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
.ze-accordion .acc-image img {
max-height: 350px;
object-position: top;
}
.timeline {
display: flex;
padding: var(--spacing-4xl, 48px) var(--spacing-xl, 24px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--spacing-2xl, 32px);
align-self: stretch;
}
.timeline-pictures,
.timeline-details {
width: 100%;
}
.timeline-dots {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: auto;
}
.timeline-indicator {
position: absolute;
top: -3px;
width: 22px;
height: 22px;
left: 0;
transition: left 0.3s ease;
}
.timeline-dots::before {
content: "";
top: 8px;
width: 92%;
height: 1px;
}
.timeline-content {
flex: 1;
width: 100%;
}
.timeline-picture.active {
border-radius: 0px 23.728px;
}
}  .storiessection-mob {
display: none;
}
.storiessection {
display: flex;
height: 666px;
align-items: flex-start;
gap: var(--spacing-lg, 24px);
align-self: stretch;
}
.playerStories {
width: 75%;
}
.storiePlayer {
position: relative;
overflow: hidden;
display: flex;
width: 100%;
height: 558px;
justify-content: center;
align-items: center;
}
.storie-bg iframe {
width: 100%;
height: 100%;
border: 0;
position: absolute;
top: 0;
left: 0;
border-radius: 0px var(--radius-13md, 40px) 0px 0px;
}
.navStories {
display: flex;
align-items: flex-start;
gap: 20.667px;
height: 608px;
flex-direction: column;
border-radius: 0px var(--radius-11md, 30px);
}
.nav-swiper-storie {
width: 100%;
position: relative;
top: 25px;
left: 10px;
}
.nav-swiper-storie .swiper-pagination.swiper-paginations {
display: flex;
align-items: flex-start;
gap: var(--spacing-md, 16px);
width: 100%;
}
div.storie-prev.swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 46px) !important;
left: auto !important;
width: 36px;
height: 36px;
background: var(--opacity-light-30, rgba(255, 255, 255, 0.30));
top: 6px;
}
div.storie-next.swiper-button-next {
border-radius: 0px var(--radius-3md, 10px) 0 0;
}
div.storie-prev.swiper-button-prev {
border-radius: 0px 0px 0px var(--radius-3md, 10px);
}
div.storie-next.swiper-button-next {
width: 36px;
height: 36px;
background: var(--neutrals-neutral-100-white, #FFF);
top: 6px;
}
div.storie-prev.swiper-button-prev:after {
content: ' ';
background-image: url(//www.vermeg.com/wp-content/uploads/2025/01/Arrow_Down_LG.svg);
background-repeat: no-repeat;
background-position: center;
width: 36px;
height: 36px;
}
div.storie-next.swiper-button-next:after {
content: ' ';
background-image: url(//www.vermeg.com/wp-content/uploads/2025/01/Arrow_Up_LG.svg);
background-repeat: no-repeat;
background-position: center;
width: 36px;
height: 36px;
}
.nav-swiper-storie span.swiper-pagination-bullet {
width: 16px;
height: 4px;
border-radius: var(--radius-3sm, 6px);
background: var(--opacity-light-30, rgba(255, 255, 255, 0.30));
}
.nav-swiper-storie span.swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 48px;
background: var(--neutrals-neutral-100-white, #FFF);
}
.storiesPlayer {
display: flex;
width: 100%;
min-width: 366px;
flex-direction: column;
align-items: flex-start;
display: none;
border-radius: 0px var(--radius-13md, 40px);
background: var(--neutrals-neutral-400, #EFF0F6);
overflow: hidden;
}
.storiesPlayer.active {
display: block;
animation: fadeIn ease .6s;
-webkit-animation: fadeIn ease .6s;
-moz-animation: fadeIn ease .6s;
-o-animation: fadeIn ease .6s;
-ms-animation: fadeIn ease .6s;
}
.storiesDetails {
display: flex;
padding: var(--spacing-lg, 24px);
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-2xs, 4px);
align-self: stretch;
}
.storiesthumbs {
border-radius: 0px var(--radius-11md, 30px);
background: var(--Neutrals-neutral-100-White, #FFF);
overflow: hidden;
cursor: pointer;
}
.storiesgallery {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-2xs, 4px);
}
.storiethumbtitle {
display: flex;
padding: var(--spacing-sm, 12px) var(--spacing-lg, 24px);
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-2xs, 4px);
width: 100%;
z-index: 2;
background-color: #fff;
}
.storiethumb {
width: 314px;
height: 176.625px;
}
.storieplaybtn {
display: flex;
width: 100%;
padding: var(--spacing-md, 16px) var(--spacing-lg, 24px) var(--spacing-2xs, 4px) var(--spacing-lg, 24px);
flex-direction: column;
align-items: flex-start;
position: absolute;
z-index: 1;
bottom: 0px;
opacity: 0;
transition: 0.5s ease-in-out;
background: var(--gradient-light-upward, linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 81.25%));
text-align: center;
font-family: "Figtree", serif;
font-size: var(--typography-size-p3, 14px);
font-style: normal;
font-weight: 600;
line-height: var(--typography-line-height-p3, 21px); }
.storieplaybtn::before {
content: ' ';
background-image: url(//www.vermeg.com/wp-content/uploads/2025/01/play-1.svg);
background-repeat: no-repeat;
background-position: center;
width: 16px;
height: 16px;
position: absolute;
}
.storieplaybtn span {
padding-left: var(--spacing-lg, 24px);
}
.storiesthumbs:hover .storieplaybtn {
bottom: 43px;
opacity: 1;
transition: 0.5s ease-in-out;
}
.storiebgThumb {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
@media (max-width: 769px) {
.storiessection {
display: none;
}
.storiessection-mob {
display: block;
padding: var(--spacing-xl, 24px) var(--spacing-xl, 24px);
}
.navStories {
width: 100%;
}
.playerStories {
display: none;
}
.storiethumb {
width: 100%;
height: 177.575px;
}
.nav-swiper-storie.mob {
width: 100%;
position: relative;
top: 57px;
left: 10px;
}
div.storie-prev.swiper-button-prev.mob:after {
background-image: url(//www.vermeg.com/wp-content/uploads/2025/01/Arrow_Left_LG-1.svg);
}
div.storie-next.swiper-button-next.mob {
border-radius: 0px var(--radius-3md, 10px) 0 0;
}
div.storie-prev.swiper-button-prev.mob {
border-radius: 0px 0px 0px var(--radius-3md, 10px);
}
div.storie-next.swiper-button-next.mob:after {
background-image: url(//www.vermeg.com/wp-content/uploads/2025/01/Arrow_Right_LG-2.svg);
}
div.storie-prev.mob.swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 46px) !important;
}
div.storie-prev.mob.swiper-button-prev,
div.storie-next.mob.swiper-button-next {
top: -10px;
}
}