.process-flow-container,
.process-flow-tab-content {
--container-padding: 100px;
--step-padding: 30px;
--step-content-gap: 10px;
--step-font-size-num: 48px;
--step-font-size: 24px;
--step-content-category-font-size: max(16px, min(28px, calc(28 / 1920 * 100vw)));
--step-content-category-font-weight: 600;
--step-content-tagline-font-size: max(24px, min(56px, calc(56 / 1920 * 100vw)));
--step-content-tagline-width: max(345px, min(552px, calc(552 / 1920 * 100vw)));
--step-content-tagline-font-weight: 800;
--step-tab-active-title-text-color: var(--Dark-Blue, #020938);
--step-tab-active-title-font-weight: 600;
--step-tab-active-title-font-size: 24px;
--step-tab-default-title-text-color: var(--Main-Green, #76BC21);
--step-tab-default-title-font-weight: 500;
--step-tab-default-title-font-size: 24px;
--step-tab-default-bg-color: #F5FFEF;
--step-tab-active-bg-color: white;
--step-tab-active-box-shadow: -10px 10px 60px 0px #0000001A;
--cicle-size: calc(0.5 * (var(--tabs_container-width) - 2 * var(--container-padding)) + var(--intersection-width));
--first-cicle-gap: 48px;
--second-cicle-bg-color: #DCF2C6;
--slide-bullet-point-font-size: 24px;
--slider-margin-top: 20px;
--slider-margin-bottom: 20px;
--slider-height: 376px;
font-family: "Manrope", sans-serif;
--step-width: 220px;
--step-height: calc((180 / 220) * var(--step-width));
--intersection-width: 3vw;
}
@media(min-width: 1920px) {
.process-flow-container,
.process-flow-tab-content {
--tabs_container-width: 1920px;
--tabs_container-height: calc(193px + 140px);
--intersection-width: calc(0.07 * var(--tabs_container-width));
}
}
@media(max-width: 1919px) {
.process-flow-container,
.process-flow-tab-content {
--tabs_container-width: 100vw;
--tabs_container-height: calc(((193 + 100) / 1920) * 100vw);
--step-width: calc(1 / 10 * var(--tabs_container-width));
--step-font-size-num: 22px;
--step-tab-active-title-font-size: 16px;
--step-tab-default-title-font-size: 16px;
}
}
@media(max-width: 1400px) {
.process-flow-container,
.process-flow-tab-content {
--step-font-size-num: 20px;
--step-tab-active-title-font-size: 14px;
--step-tab-default-title-font-size: 14px;
--slide-bullet-point-font-size: 20px;
--step-content-gap: 5px;
}
}
@media(max-width: 1100px) {
.process-flow-container,
.process-flow-tab-content {
--step-font-size-num: 20px;
--step-tab-active-title-font-size: 14px;
--step-tab-default-title-font-size: 14px;
--slide-bullet-point-font-size: 16px;
--step-content-gap: 0px;
--slider-height: 250px;
}
}
@media(min-width: 992px) {
.process-flow-container,
.process-flow-tab-content
{
--second-cicle-padding: 40px;
}
.process-flow-container.mobile {
display: none !important;
}
}
@media(max-width: 991px) {
.process-flow-container,
.process-flow-tab-content {
--tabs_container-width: 100vw;
--tabs_container-height: 100vw;
--cicle-size: var(--tabs_container-width);
--slider-height: 50vw;
--slide-bullet-point-font-size: 15px;
--slider-margin-top: 40px;
--slider-margin-bottom: 40px;
--step-width: 32vw;
--step-tab-active-title-font-size: 16px;
--step-tab-default-title-font-size: 16px;
--step-content-tagline-font-size: 24px;
--slide-bullet-point-font-size: 16px;
--step-content-tagline-width: 80%;
--intersection-width: 50px;
--slide-bullet-point-font-size: 14px;
--second-cicle-padding: 20px;
}
.process-flow-container.desktop {
display: none !important;
}
.process-flow-container.mobile {
padding-bottom: 20px !important;
margin-bottom: 20px !important;
background: linear-gradient(to bottom, transparent 50%, var(--Main-Green, #76BC21) 50%, var(--Main-Green, #76BC21) 51%, transparent 51%);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 1px; }
.process-flow-tab-content {
max-width: 100vw !important;
}
.process-flow-tab-content .slider_wrapper {
position: relative !important;
margin-top: calc(-1 * var(--intersection-width));
padding: 0 20px !important;
}
.process-flow-container .step, .process-flow-container .step * {
top: unset !important;
}
.process-flow-container .swiper-pagination-bullet {
transition: all 0.3s ease-in-out;
width: 7px;
height: 7px;
}
.process-flow-container .swiper-pagination-bullet-active {
width: 37.33px;
height: 7px;
border-radius: 10px;
background: var(--Main-Green, #76BC21);
}
}
.process-flow-container.desktop {
position: relative;
width: var(--tabs_container-width);
height: var(--tabs_container-height);
background-image: url(https://tankopetfood.com/wp-content/themes/tanko/assets/curve.png);
aspect-ratio: 1920/293;
background-size: 100%;
background-position: bottom;
background-repeat: no-repeat;
display: flex;
flex-direction: row;
justify-content: space-around;
margin-bottom: var(--step-height);
}
.process-flow-container .step {
position: relative;
cursor: pointer;
text-align: center;
background-color: var(--step-tab-default-bg-color);
aspect-ratio: 2 / 1;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--step-padding);
gap: var(--step-content-gap);
width: var(--step-width);
height: var(--step-height);
}
.process-flow-container .step,
.process-flow-container .step * {
transition: all 0.3s ease-in-out;
}
.process-flow-container .step.step-1,
.process-flow-container .step.step-7 {
top: calc(0.65 * var(--tabs_container-height));
}
.process-flow-container .step.step-2,
.process-flow-container .step.step-6 {
top: calc(0.4 * var(--tabs_container-height));
}
.process-flow-container .step.step-3,
.process-flow-container .step.step-5 {
top: calc(0.23 * var(--tabs_container-height));
}
.process-flow-container .step.step-4 {
top: calc(0.15 * var(--tabs_container-height));
}
.process-flow-container .step .step-number {
font-size: var(--step-font-size-num); color: var(--e-global-color-primary);
font-weight: 800;
}
.process-flow-container .step .step-title {
font-size: var(--step-tab-default-title-font-size);
font-weight: var(--step-tab-default-title-font-weight);
color: var(--step-tab-default-title-text-color);
}
.process-flow-tab-content {
position: relative;
max-width: calc(100vw - 2 * var(--container-padding));
margin: auto;
}
.process-flow-tab-content .image_wrapper,
.process-flow-tab-content .slider_wrapper {
aspect-ratio: 1;
border-radius: 100%;
overflow: hidden;
width: var(--cicle-size);
left: 0;
}
.process-flow-tab-content .slider_wrapper {
position: absolute;
top: 0;
right: 0;
margin-right: 0;
}
.process-flow-tab-content .image_wrapper {
background-size: cover;
background-position: center;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
color: white;
gap: var(--first-cicle-gap);
}
.process-flow-tab-content .image_wrapper .category {
font-size: var(--step-content-category-font-size);
font-weight: var(--step-content-category-font-weight);
background-color: #FFFFFF4D;
padding: 6px 16px;
border-radius: 50px;
text-align: center;
}
.process-flow-tab-content .image_wrapper .tagline {
width: var(--step-content-tagline-width);
font-size: var(--step-content-tagline-font-size);
font-weight: var(--step-content-tagline-font-weight);
text-align: center;
}
.process-flow-tab-content .slider_wrapper {
background-color: var(--second-cicle-bg-color);
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 55px;
}
.process-flow-tab-content .slider_wrapper .slider .slide {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
transition: all 0.5s ease-in-out;
padding-left: var(--second-cicle-padding) !important;
padding-right: var(--second-cicle-padding) !important;
}
.process-flow-tab-content .slider_wrapper .slider .slide:not(.swiper-slide-active) {
opacity: 0;
}
.process-flow-tab-content .slider_wrapper .slider {
margin-top: var(--slider-margin-top);
margin-bottom: var(--slider-margin-bottom);
height: var(--slider-height);
}
.process-flow-tab-content .slider_wrapper .swiper-pagination-bullet {
transition: width 0.2s;
}
.process-flow-tab-content .slider_wrapper .swiper-pagination-bullet-active {
background: black;
}
.process-flow-tab-content .slider_wrapper .swiper-pagination-bullet {
width: 9px;
height: 9px;
}
.process-flow-tab-content .slider_wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 48px;
border-radius: 4px;
}
.process-flow-tab-content .slider_wrapper .navigation {
height: 48px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
}
.process-flow-tab-content .slider_wrapper .navigation .swiper-button-prev,
.process-flow-tab-content .slider_wrapper .navigation .swiper-rtl .swiper-button-next,
.process-flow-tab-content .slider_wrapper .navigation .swiper-button-next,
.process-flow-tab-content .slider_wrapper .navigation .swiper-button-prev {
position: relative;
left: unset;
right: unset;
top: unset;
margin-top: 0;
}
.process-flow-tab-content .swiper-button-prev:after,
.process-flow-tab-content .swiper-button-next:after {
background-image: url(//tankopetfood.com/wp-content/themes/tanko/assets/arrow-right.png);
background-size: contain;
width: 24px;
height: 24px;
content: " ";
color: black;
display: inline-block;
}
.process-flow-tab-content .swiper-button-prev:after {
transform: rotate(180deg);
}
.process-flow-tab-content .slider_wrapper .swiper-pagination {
position: relative;
bottom: unset;
top: unset;
margin-top: 10px;
}
.process-flow-tab-content .slider_wrapper .slider .slide,
.process-flow-tab-content .slider_wrapper .slider .slide ul,
.process-flow-tab-content .slider_wrapper .slider .slide ul li {
padding-left: 0;
list-style: none;
text-align: center;
font-family: Manrope, sans-serif;
font-size: var(--slide-bullet-point-font-size);
}
.process-flow-tab-content .slider_wrapper .slider .slide ul li:not(:last-child):after {
content: "•";
color: var(--e-global-color-primary);
font-size: var(--slide-bullet-point-font-size);
padding-left: 0.5em;
display: block;
}
@media (max-width: 768px) {
.process-flow-container {
height: auto;
background-size: contain;
}
.step {
position: relative;
margin: 20px auto;
left: auto;
top: auto;
}
}
#private_label_carousel-0:not(:checked)~.content.tab-0 {
display: none;
}
#private_label_carousel-0:checked~.process-flow-container [for="private_label_carousel-0"] {
background-color: var(--step-tab-active-bg-color);
box-shadow: var(--step-tab-active-box-shadow);
}
#private_label_carousel-0:checked~.process-flow-container [for="private_label_carousel-0"] .step-title {
color: var(--step-tab-active-title-text-color);
font-weight: var(--step-tab-active-title-font-weight);
font-size: var(--step-tab-active-title-font-size);
}
#private_label_carousel-1:not(:checked)~.content.tab-1 {
display: none;
}
#private_label_carousel-1:checked~.process-flow-container [for="private_label_carousel-1"] {
background-color: var(--step-tab-active-bg-color);
box-shadow: var(--step-tab-active-box-shadow);
}
#private_label_carousel-1:checked~.process-flow-container [for="private_label_carousel-1"] .step-title {
color: var(--step-tab-active-title-text-color);
font-weight: var(--step-tab-active-title-font-weight);
font-size: var(--step-tab-active-title-font-size);
}
#private_label_carousel-2:not(:checked)~.content.tab-2 {
display: none;
}
#private_label_carousel-2:checked~.process-flow-container [for="private_label_carousel-2"] {
background-color: var(--step-tab-active-bg-color);
box-shadow: var(--step-tab-active-box-shadow);
}
#private_label_carousel-2:checked~.process-flow-container [for="private_label_carousel-2"] .step-title {
color: var(--step-tab-active-title-text-color);
font-weight: var(--step-tab-active-title-font-weight);
font-size: var(--step-tab-active-title-font-size);
}
#private_label_carousel-3:not(:checked)~.content.tab-3 {
display: none;
}
#private_label_carousel-3:checked~.process-flow-container [for="private_label_carousel-3"] {
background-color: var(--step-tab-active-bg-color);
box-shadow: var(--step-tab-active-box-shadow);
}
#private_label_carousel-3:checked~.process-flow-container [for="private_label_carousel-3"] .step-title {
color: var(--step-tab-active-title-text-color);
font-weight: var(--step-tab-active-title-font-weight);
font-size: var(--step-tab-active-title-font-size);
}
#private_label_carousel-4:not(:checked)~.content.tab-4 {
display: none;
}
#private_label_carousel-4:checked~.process-flow-container [for="private_label_carousel-4"] {
background-color: var(--step-tab-active-bg-color);
box-shadow: var(--step-tab-active-box-shadow);
}
#private_label_carousel-4:checked~.process-flow-container [for="private_label_carousel-4"] .step-title {
color: var(--step-tab-active-title-text-color);
font-weight: var(--step-tab-active-title-font-weight);
font-size: var(--step-tab-active-title-font-size);
}
#private_label_carousel-5:not(:checked)~.content.tab-5 {
display: none;
}
#private_label_carousel-5:checked~.process-flow-container [for="private_label_carousel-5"] {
background-color: var(--step-tab-active-bg-color);
box-shadow: var(--step-tab-active-box-shadow);
}
#private_label_carousel-5:checked~.process-flow-container [for="private_label_carousel-5"] .step-title {
color: var(--step-tab-active-title-text-color);
font-weight: var(--step-tab-active-title-font-weight);
font-size: var(--step-tab-active-title-font-size);
}
#private_label_carousel-6:not(:checked)~.content.tab-6 {
display: none;
}
#private_label_carousel-6:checked~.process-flow-container [for="private_label_carousel-6"] {
background-color: var(--step-tab-active-bg-color);
box-shadow: var(--step-tab-active-box-shadow);
}
#private_label_carousel-6:checked~.process-flow-container [for="private_label_carousel-6"] .step-title {
color: var(--step-tab-active-title-text-color);
font-weight: var(--step-tab-active-title-font-weight);
font-size: var(--step-tab-active-title-font-size);
}