@charset "UTF-8";

:root {
--bg-page-color: #08083B;
--color: #FFFFFF;
--color-purple: #8460E6;
--color-header-title: #3A64F8;
--color-footer-title-hover: #3A64F8;
--color-action-button: #FFDE70;
--color-action: #E23A8D;
--color-bg-sector: #E9EFFF;
--font-family-roboto: Roboto, sans-serif;
--font-family-montserrat: Montserrat;
--bp-mobile-sm: 320px;
--bp-mobile-md: 800px;
--bp-tablet: 1024px;
--bp-desktop: 1440px;
}
body {
background-color: #fefefe;
margin: 0;
font-family: var(--font-family-roboto);
font-weight: 400;
font-size: 1.25rem;
min-width: var(--bp-mobile-sm);
position: relative;
}
a {
color: inherit;
text-decoration: none;
z-index: 1;
}
a:hover {
text-decoration: none;
} * {
padding: 0px;
margin: 0px;
border: none;
}
*,
*::before,
*::after {
box-sizing: border-box;
} a:link, a:visited {
text-decoration: none;
} aside, nav, footer, header, section, main {
display: block;
}
h1, h2, h3, h4, h5, h6, p {
font-size: inherit;
font-weight: inherit;
z-index: 1;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-montserrat);
}
h1, .h1 {
font-weight: 900;
font-size: clamp(2.125rem, 1.5625rem + 2.5vw, 3.75rem);
}
h2, .h2 {
font-weight: 900;
font-size: clamp(1.625rem, 1.1923076923rem + 1.9230769231vw, 2.875rem);
}
h3, .h3 {
font-weight: 800;
font-size: 2.125rem;
}
h4, .h4 {
font-weight: 700;
font-size: clamp(1.25rem, 1.0336538462rem + 0.9615384615vw, 1.875rem);
}
h5, .h5 {
font-weight: 700;
font-size: clamp(1.125rem, 0.9519230769rem + 0.7692307692vw, 1.625rem);
}
h6, .h6 {
font-weight: 700;
font-size: 1.25rem;
}
ul, ul li {
list-style: none;
z-index: 1;
}
img {
vertical-align: top;
z-index: 1;
position: relative;
}
img, svg {
max-width: 100%;
height: auto;
}
address {
font-style: normal;
} input, textarea, button, select {
font-family: inherit;
font-size: inherit;
color: inherit;
background-color: transparent;
z-index: 1;
position: relative;
}
input::-ms-clear {
display: none;
}
button, input[type=submit] {
display: inline-block;
box-shadow: none;
background-color: transparent;
background: none;
cursor: pointer;
font-family: var(--font-family-montserrat);
font-weight: 700;
font-size: 1.25rem;
z-index: 1;
position: relative;
}
input:focus, input:active,
button:focus, button:active {
outline: none;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
label {
cursor: pointer;
z-index: 1;
position: relative;
}
legend {
display: block;
}
input[type=file] {
max-width: 100%;
}
.content h2 {
margin-block: 2rem;
font-size: 1.25rem;
font-weight: 700;
}
.content h3 {
margin-block: 1rem;
font-size: 1.125rem;
font-weight: 700;
}
.content a {
color: #1E40AF;
text-decoration: underline;
}
.content p {
margin-block: 1rem;
font-size: 1rem;
font-weight: 400;
}
.content li {
font-size: 1rem;
font-weight: 400;
list-style: inside;
list-style-position: outside;
margin-left: 1.5rem;
}
.content img {
width: 100%;
max-width: 37.5rem;
margin: 0 auto;
margin-block: 2rem;
display: block;
border-radius: 1rem;
}
.content hr {
border: none;
height: 0.125rem;
background: linear-gradient(to right, transparent, #666, transparent);
margin: 1.875rem 0;
}
.content blockquote {
width: 100%;
max-width: 37.5rem;
margin: 0 auto;
background: var(--color);
border-radius: 1rem;
padding: 2.5rem 2rem;
box-shadow: 1px 4px 75px 0px rgba(8, 8, 59, 0.1019607843);
text-align: center;
font-size: 1.125rem;
}
.content blockquote p {
margin-bottom: 1.5rem;
margin-top: 0;
font-weight: 500;
}
.content blockquote footer {
border-top: 1px solid var(--bg-page-color);
padding-top: 1.5rem;
font-weight: 300;
}
.background {
width: 100%;
z-index: 0;
position: absolute;
display: flex;
justify-content: center;
overflow: hidden;
}
#background {
min-width: 62.5rem;
width: 100rem;
margin: 0 auto;
}
#background .hover-stroke:hover {
stroke: url(#square-stroke-hover);
transition: stroke 3s ease;
}
.smooth-scrolling {
scroll-behavior: auto !important;
}
html {
scroll-behavior: auto;
}
.smooth-scrolling * {
scroll-behavior: auto !important;
}
.container {
max-width: 76rem;
margin: 0 auto;
width: 100%;
padding-inline: 1.5em;
}
@media (max-width: 800px) {
.container {
padding-inline: 0.5em;
}
}
.container > * {
position: relative;
z-index: 1;
}
.white-box {
width: 100%;
position: relative;
z-index: 1;
border: 1px solid var(--color);
border-radius: 1rem;
padding: 1.5em 2em;
box-shadow: 1px 0.3em 5em 0px rgba(8, 8, 59, 0.1019607843);
margin-top: 2.5em;
background: rgba(233, 239, 255, 0.1019607843);
backdrop-filter: blur(2px);
pointer-events: none;
}
@media (max-width: 800px) {
.white-box {
padding: 0.5em;
}
}
.white-box * {
pointer-events: all;
}
.hero {
text-align: center;
}
.hero .container {
padding-bottom: 6.25rem;
}
.hero .container nav {
font-size: 1.125rem;
font-weight: 400;
position: relative;
font-style: normal;
margin-top: 3rem;
}
.hero .container nav ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.hero .container nav ol li {
display: flex;
align-items: center;
}
.hero .container nav ol li:not(:last-child)::after {
content: "/";
margin: 0 8px;
color: #adb5bd;
}
.hero .container nav ol li:not(.active):hover {
text-shadow: 0.5px 0 currentColor;
}
.hero .container h1 {
margin-top: 1.8em;
position: relative;
width: max-content;
max-width: 100%;
margin-inline: auto;
}
.hero .container p {
font-size: clamp(1rem, 0.9134615385rem + 0.3846153846vw, 1.25rem);
margin-top: 0.5em;
position: relative;
width: max-content;
max-width: 50rem;
width: 100%;
margin-inline: auto;
}
.hero .container h2 {
font-size: clamp(1.25rem, 1.0336538462rem + 0.9615384615vw, 1.875rem);
font-weight: 800;
color: var(--color-action);
position: relative;
width: max-content;
max-width: 100%;
margin-inline: auto;
margin-top: 1rem;
margin-bottom: 2rem;
}
.hero .container button {
margin-top: 3.75rem;
margin-bottom: 2rem;
position: relative;
width: max-content;
margin-inline: auto;
}
.hero .container svg {
margin-top: 0.8em;
stroke: var(--bg-page-color);
cursor: pointer;
position: relative;
width: max-content;
margin-inline: auto;
}
.hero .container svg:hover {
stroke: var(--color-header-title);
}
@media (max-width: 800px) {
.hero .container svg {
display: none;
}
}
.start {
margin-top: 6.25rem;
position: relative;
z-index: 2;
}
.start .container {
border-top: 1px solid var(--bg-page-color);
padding-block: 6.25rem;
text-align: center;
}
.start .container h4 {
margin-bottom: 1rem;
}
.start .container p {
font-weight: 400;
margin-bottom: 2rem;
}
.main_button {
background-color: var(--color-action-button);
border-radius: 0.8em;
color: var(--bg-page-color);
font-weight: 700;
font-size: 1.25rem;
font-family: var(--font-family-roboto);
padding: 0.6em 1.2em;
}
.main_button:hover {
background-color: var(--bg-page-color);
color: var(--color);
} .header {
background: var(--color);
color: var(--bg-page-color);
position: relative;
z-index: 1000;
border-bottom: 1px solid var(--color-bg-sector); }
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
height: 6.875rem;
}
.header__right {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
gap: 2rem;
align-items: center;
}
.header .desktop-nav {
display: block; }
.header .desktop-nav .menu-arrow {
margin-right: 1.5rem;
}
.header .desktop-nav .menu-arrow::before {
content: "⯆";
position: absolute;
right: -1.5rem;
height: 100%;
display: flex;
align-items: center;
cursor: pointer;
transition: transform 0.3s;
}
.header .desktop-nav .menu-arrow:hover::before {
transform: rotate(60deg);
}
.header .desktop-nav > ul {
display: flex;
list-style: none;
gap: 2rem;
}
.header .desktop-nav > ul li {
position: relative;
}
.header .desktop-nav > ul li:hover {
color: var(--color-footer-title-hover);
}
.header .desktop-nav > ul li:hover > .desktop-nav__dropdown {
opacity: 1;
display: grid;
visibility: visible;
}
.header .desktop-nav__dropdown {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
position: absolute;
top: 100%;
left: 0;
margin-top: 2.8125rem;
padding: 1rem 0;
background: var(--color);
border-radius: 0.25rem;
width: max-content;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
border: 1px solid var(--bg-page-color);
}
.header .desktop-nav__dropdown li {
position: relative;
width: 100%;
color: var(--bg-page-color);
padding-left: 1rem;
padding-right: 2rem;
cursor: pointer;
}
.header .desktop-nav__dropdown li > a {
padding: 0.25rem 0.5rem;
font-size: 1rem;
}
.header .desktop-nav__dropdown li:has(.dropdown)::after {
content: "⯈";
position: absolute;
right: 1rem;
}
.header .desktop-nav__dropdown li ul {
position: absolute;
opacity: 0;
visibility: hidden;
}
.header .desktop-nav__dropdown li:hover {
color: var(--color-footer-title-hover);
}
.header .desktop-nav__dropdown li:hover ul {
opacity: 1;
visibility: visible;
left: calc(100% + 0.3125rem);
transform: translateX(0.625rem);
top: 0;
padding: 1rem 1.5rem;
background: var(--color);
border-radius: 0.25rem;
transition: all 0.3s ease;
border: 1px solid var(--bg-page-color);
width: max-content;
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
max-width: 31.875rem;
}
.header .desktop-nav__dropdown li:hover ul::before {
content: ".";
height: 100%;
width: 1rem;
position: absolute;
left: -1rem;
top: 0;
}
.header .desktop-nav__dropdown li:hover ul > li {
max-width: 13.4375rem;
font-size: 1rem;
font-weight: 400;
}
.header .desktop-nav__dropdown li:hover ul > li > a {
padding: unset;
}
.header .desktop-nav__dropdown li:hover ul > li > a:hover {
text-decoration: underline;
}
.header .desktop-nav__dropdown li:hover ul > li > a > p {
padding-top: 0.5rem;
max-width: 12.5rem;
font-size: 0.875rem;
font-weight: 300;
}
.header .desktop-nav__lang {
margin-right: 1.875rem;
}
@media (max-width: 1024px) {
.header .desktop-nav__lang {
margin-right: unset;
}
}
.header .desktop-nav__lang .desktop-nav__dropdown {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.25rem;
right: -1.5rem;
left: unset;
}
@media (max-width: 800px) {
.header .desktop-nav__lang .desktop-nav__dropdown {
left: 10px;
position: fixed;
top: 65px;
width: calc(100vw - 40px);
}
}
@media (max-width: 1024px) {
.header .desktop-nav__menu {
display: none;
}
}
@media (max-width: 800px) {
.header__btn {
display: none;
}
} .burger-btn {
display: none;
width: 1.875rem;
height: 1.875rem;
cursor: pointer;
position: relative;
z-index: 1001;
}
@media (max-width: 1024px) {
.burger-btn {
display: block;
}
}
.burger-btn span {
display: block;
width: 100%;
height: 0.1875rem;
background: var(--bg-page-color);
margin: 0.375rem 0;
transition: all 0.3s ease;
transform-origin: center;
}
.burger-btn:hover span {
background: var(--color-footer-title-hover);
} input#burger-toggle[type=checkbox] {
display: none;
}
#burger-toggle:checked + .header .burger-btn span:nth-child(1) {
transform: rotate(45deg) translate(7px, 6px);
}
#burger-toggle:checked + .header .burger-btn span:nth-child(2) {
opacity: 0;
}
#burger-toggle:checked + .header .burger-btn span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
#burger-toggle:checked ~ .overlay {
opacity: 1;
visibility: visible;
}
#burger-toggle:checked ~ .mobile-nav {
opacity: 1;
visibility: visible;
} .mobile-nav {
position: fixed;
top: 6.875rem;
right: 0;
width: 25rem;
max-width: 100%;
height: calc(100vh - 6.875rem);
background: var(--color);
transition: right 0.3s ease;
overflow-y: auto;
z-index: 999;
opacity: 0;
visibility: hidden;
}
.mobile-nav > ul {
list-style: none;
}
.mobile-nav > ul > li:hover .mobile-submenu {
max-height: 31.25rem;
}
.mobile-nav > ul > li > a {
display: block;
padding: 0.9375rem 1.25rem;
color: #333;
text-decoration: none;
border-bottom: 1px solid #eee;
transition: background-color 0.3s;
}
.mobile-nav > ul > li > a:hover {
background-color: #f5f5f5;
}
.mobile-nav > a {
position: absolute;
bottom: 0;
margin: 1rem;
left: 0;
right: 0;
text-align: center;
display: none;
}
@media (max-width: 800px) {
.mobile-nav > a {
display: block;
}
} .overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 998;
} .mobile-submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: #f9f9f9;
}
.mobile-submenu a {
padding: 12px 40px;
font-size: 14px;
border-bottom: 1px solid #ddd;
}
.mobile-submenu .mobile-submenu a {
padding-left: 60px;
background: #f0f0f0;
}
.main_numbers {
z-index: 1;
position: relative;
}
.main_numbers .container {
margin-top: unset;
}
.main_numbers .container h2 {
text-align: center;
}
.main_numbers__grid {
display: grid;
background: var(--color-header-title);
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
gap: 1px;
margin-top: 1.5rem;
}
@media (max-width: 800px) {
.main_numbers__grid {
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr;
}
}
.main_numbers__grid-item {
padding: 1rem 1.5rem;
background: #fff;
text-align: left;
}
@media (max-width: 800px) {
.main_numbers__grid-item {
display: flex;
justify-content: center;
flex-direction: column;
}
}
.main_numbers__grid-item strong {
font-size: clamp(7.5rem, 8.7980769231rem + -5.7692307692vw, 3.75rem);
font-family: var(--font-family-montserrat);
font-weight: 900;
line-height: 5.625rem;
float: left;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
color: var(--color-bg-sector);
filter: drop-shadow(1px 4px 7.6px rgba(8, 8, 59, 0.2509803922));
text-shadow: -1px -1px 0 var(--color-header-title), 1px -1px 0 var(--color-header-title), -1px 1px 0 var(--color-header-title), 1px 1px 0 var(--color-header-title);
}
.main_numbers__grid-item:not(.item-1) p {
font-size: 1.125rem;
font-weight: 500;
margin-top: 5rem;
max-width: 15rem;
margin-left: auto;
}
@media (max-width: 800px) {
.main_numbers__grid-item:not(.item-1) p {
margin-left: unset;
}
}
.main_numbers__grid-item.item-1 {
grid-column: 1/3; grid-row: 1; color: var(--color-header-title);
}
@media (max-width: 800px) {
.main_numbers__grid-item.item-1 {
grid-column: 1;
}
}
.main_for {
z-index: 1;
position: relative;
margin-top: 6.25rem;
}
.main_for .container h2 {
text-align: center;
}
.main_for .article {
background: linear-gradient(90deg, #E9EFFF 0%, #FFFFFF 100%);
border: 0;
align-items: center;
}
.main_for .article h3 {
text-align: right;
}
.main_for .article a {
background-color: unset;
margin-left: auto;
padding: 0;
}
.main_for .article img {
width: 450px;
height: auto;
}
.main_for .article:nth-child(odd) {
background: linear-gradient(-90deg, #E9EFFF 0%, #FFFFFF 100%);
}
.main_for .article:nth-child(odd) h3 {
text-align: left;
}
.main_for .article:nth-child(odd) a {
background-color: unset;
margin-left: unset;
}
.main_how {
z-index: 1;
position: relative;
margin-top: 6.25rem;
}
.main_how .container h2 {
text-align: center;
z-index: 2;
position: relative;
}
.main_how .container h3 {
margin-top: 2.5rem;
}
.main_how__brands {
padding-inline: 0;
background: rgba(255, 255, 255, 0.4705882353);
}
.main_how__brands p {
width: 100%;
text-align: center;
margin: 1.5rem auto;
}
.main_how__brands-scroll {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-content: center;
align-items: center;
}
.main_how__brands-list {
border-block: 2px solid var(--color-bg-sector);
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -ms-overflow-style: none; }
.main_how__brands-list::-webkit-scrollbar {
display: none; }
.main_how__brands-list a {
min-width: 5rem;
}
.main_how__brands-list a svg {
width: 5rem;
height: 5rem;
display: block;
transform: scale(1.5);
}
.main_how__brands-list a path {
box-shadow: 1px 4px 25px 0px rgba(8, 8, 59, 0.1019607843);
}
.main_how__brands-center {
margin: 0 auto;
width: max-content;
margin-block: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
padding: 2rem;
}
.main_how .tools__list {
grid-template-columns: repeat(auto-fill, minmax(17.25rem, 1fr));
gap: 1rem;
}
.main_how .tools__list-item {
padding: 1.5rem;
margin-top: unset;
}
.main_how .tools__list-title {
min-height: unset;
}
.main_how .tools__pagination {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
margin-top: 2.5rem;
}
.main_how .tools__pagination > a {
cursor: pointer;
}
.main_how .tools__pagination > a path {
fill: var(--bg-page-color);
}
.main_how .tools__pagination > a:hover {
color: var(--color-header-title);
}
.main_how .tools__pagination > a:hover path {
fill: var(--color-header-title);
}
.main_how .tools__pagination .disable svg {
cursor: unset;
}
.main_how .tools__pagination .disable svg:hover path {
fill: var(--color-bg-sector);
}
.main_how .tools__pagination .disable svg path {
fill: var(--color-bg-sector);
}
.main_advantage {
z-index: 1;
position: relative;
margin-top: 6.25rem;
padding-bottom: 6.25rem;
background: linear-gradient(0deg, var(--color-bg-sector) 0%, var(--color) 100%);
}
.main_advantage .container h2 {
text-align: center;
}
.main_advantage__list {
display: flex;
gap: 2rem;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
overflow-x: auto;
width: 100%;
scrollbar-width: none; -ms-overflow-style: none; }
.main_advantage__list::-webkit-scrollbar {
display: none; }
.main_advantage__list-item {
text-align: center;
min-width: 17.5rem;
box-shadow: unset;
}
.main_advantage__list-item h3 {
margin-top: 2rem;
margin-bottom: 1rem;
color: var(--color-action);
}
.main_advantage__list-item p {
text-align: left;
font-size: 1.125rem;
font-weight: 300;
}
.main_integration {
z-index: 1;
position: relative;
padding-bottom: 6.25rem;
background-color: var(--color-bg-sector);
}
.main_integration__block {
margin-top: 3.75rem;
background: linear-gradient(-90deg, var(--color-bg-sector) 0%, var(--color) 100%);
border: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
gap: 5rem;
align-items: center;
justify-content: space-around;
}
@media (max-width: 800px) {
.main_integration__block {
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr;
flex-direction: column;
flex-direction: column;
gap: 1rem;
}
}
.main_integration__block-left p {
margin-bottom: 3.75rem;
}
@media (max-width: 800px) {
.main_integration__block-left {
text-align: center;
}
.main_integration__block-left p {
margin-bottom: 1rem;
}
}
.main_integration__block-right {
border-radius: 1rem;
height: 20.625rem;
width: 20rem;
min-width: 20rem;
border: 2px solid #f4f7ff;
overflow-y: auto;
transition: transform 0.5s ease-out; scrollbar-width: none; -ms-overflow-style: none; }
.main_integration__block-right::-webkit-scrollbar {
display: none; }
@media (max-width: 800px) {
.main_integration__block-right {
width: 100%;
border: 2px solid white;
}
}
.main_integration__block-scroll {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(5.3125rem, 1fr)); }
.main_integration__block-scroll a {
width: 5rem;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: row;
margin: 0.625rem;
overflow: hidden;
}
.main_integration__block-scroll a svg {
transform: scale(1.3);
}
.main_integration__block-scroll a:hover {
transform: scale(1.1);
}
.main_integration__block-scroll a.offset-down {
transform: translateY(50px);
}
.main_integration__block-scroll a.offset-down:hover {
transform: scale(1.1) translateY(55%);
}
.main_clients {
z-index: 1;
position: relative;
background: linear-gradient(180deg, var(--color-bg-sector) 0%, var(--color) 100%);
}
.main_clients h2 {
position: absolute;
top: 0;
}
.main_clients .container:nth-child(2) {
overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none; }
.main_clients .container:nth-child(2)::-webkit-scrollbar {
display: none; }
.main_clients__scroll {
overflow-x: auto;
}
.main_clients__list {
display: flex;
gap: 2rem;
padding-block: 3.75rem;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.main_clients__list-item {
min-width: 31.25rem;
display: grid;
gap: 1rem;
grid-template-rows: 4.375rem 3.375rem 1fr;
grid-template-columns: 8.75rem 1fr;
}
.main_clients__list-border {
grid-column: 1;
grid-row: 1/span 2;
padding: 0.25rem;
display: flex;
border: 1px solid var(--color-header-title);
border-radius: 0.5rem;
}
.main_clients__list-title {
color: var(--color-action);
border-bottom: 2px solid var(--color-action);
padding-bottom: 0.3125rem;
display: flex;
align-items: flex-end;
}
.main_clients__list-subtitle {
font-size: 0.875rem;
}
.main_clients__list-description {
grid-column: 1/span 2;
grid-row: 3;
font-size: 1rem;
font-weight: 300;
}
.main_clients .tools__pagination {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
margin-top: 2.5rem;
position: relative;
top: -3.75rem;
}
.main_clients .tools__pagination svg {
cursor: pointer;
}
.main_clients .tools__pagination svg:hover path {
fill: var(--color-header-title);
}
.main_clients .tools__pagination svg path {
fill: var(--bg-page-color);
}
.main_clients .tools__pagination .disable svg {
cursor: unset;
}
.main_clients .tools__pagination .disable svg:hover path {
fill: var(--color-bg-sector);
}
.main_clients .tools__pagination .disable svg path {
fill: var(--color-bg-sector);
}
.main_clients__btn {
text-align: right;
margin-top: 1.5rem;
position: relative;
top: -3.75rem;
}
.main_reviews {
margin-bottom: 6.25rem;
}
.main_reviews__action {
text-align: center;
grid-column: 2/span 2;
grid-row: 2;
}
.main_reviews__action * {
position: relative;
z-index: 3;
}
.main_reviews__action p {
margin-top: 1rem;
margin-bottom: 2rem;
}
@media (max-width: 76.4375rem) {
.main_reviews__action {
grid-column: 1/span 3;
grid-row: 3;
}
}
@media (max-width: 57.875rem) {
.main_reviews__action {
grid-column: 1/span 2;
}
}
@media (max-width: 800px) {
.main_reviews__action {
display: none;
}
}
.main_reviews__action-mobile {
display: none;
margin-top: 1.5rem;
}
@media (max-width: 800px) {
.main_reviews__action-mobile {
display: block;
}
}
.main_reviews__list {
display: grid;
gap: 1rem;
align-items: center;
justify-items: center;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
}
@media (max-width: 800px) {
.main_reviews__list {
display: flex;
width: 100%;
overflow: auto;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
padding-block: 4rem;
scrollbar-width: none; -ms-overflow-style: none; }
.main_reviews__list::-webkit-scrollbar {
display: none; }
}
.main_reviews__list-item {
z-index: 3;
position: relative;
width: 17.5rem;
margin-top: 0;
}
.main_reviews__list-item p {
font-size: 1rem;
font-weight: 300;
}
.blog__list-search {
width: 100%;
display: flex;
position: relative;
}
.blog__list-search input {
width: 100%;
padding: 1rem 2rem;
background: var(--color);
border-radius: 1rem;
box-shadow: 1px 4px 75px 0px rgba(8, 8, 59, 0.1019607843);
border: 1px solid var(--color-bg-sector);
font-weight: 300;
}
.blog__list-search input:hover, .blog__list-search input:focus {
border-color: var(--bg-page-color);
}
.blog__list-search button {
margin-left: -3.625rem;
padding-inline: 16px;
}
.blog__tags {
margin-top: 6.25rem;
display: block;
}
.blog__tags-list {
margin-top: 3.75rem;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 1rem 2rem;
justify-content: flex-start;
}
.blog__tags-list a {
padding: 0.5rem 1.5rem;
border-radius: 0.5rem;
border: 1px solid var(--color);
font-weight: 300;
text-align: center;
box-shadow: 1px 4px 75px 0px rgba(8, 8, 59, 0.1019607843);
white-space: nowrap;
flex-shrink: 0;
}
.blog__tags-list a:hover {
border-color: var(--color-header-title);
}
.blog__tags-list button {
border: 2px solid var(--color-action-button);
padding: 0.75rem 1.5rem;
font-weight: 500;
font-size: medium;
font-family: var(--font-family-roboto);
border-radius: 1rem;
}
.blog__tags-list button:hover {
background-color: var(--color-action-button);
color: var(--color);
}
.blog__pagination {
margin-top: 6.25rem;
margin-bottom: 6.25rem;
display: block;
}
.blog__pagination-list {
display: flex;
gap: 1rem;
justify-content: center;
}
.blog__pagination-list a {
font-family: var(--font-family-montserrat);
line-height: 2rem;
font-weight: 700;
padding-left: 0.5rem;
padding-right: 0.5rem;
border-radius: 0.5rem;
min-width: 2rem;
text-align: center;
border: 1px solid var(--color);
}
.blog__pagination-list a.active {
background-color: var(--color-action-button);
color: var(--color);
}
.blog__pagination-list a:hover {
border-color: var(--color-action-button);
}
.blog__pagination-list a.disable {
color: var(--color-bg-sector);
}
.blog__pagination-list a.disable:hover {
border-color: var(--color);
}
.article {
display: flex;
position: relative;
gap: 3rem;
flex-direction: row-reverse;
}
.article__left {
flex: 2;
order: 1;
}
.article__right {
flex: 3;
order: 2;
}
.article__img {
border: 1px solid var(--color-header-title);
border-radius: 1rem;
overflow: hidden;
}
.article__img img {
width: 100%;
}
.article__title {
color: var(--color-action);
}
.article__description {
margin-top: 1rem;
font-weight: 300;
}
.article__tags {
margin-top: 1rem;
color: var(--color-header-title);
font-weight: 300;
font-size: 1.125rem;
}
.article__tags a {
margin-right: 1.5rem;
line-height: 1.875rem;
}
.article__tags a:hover {
text-decoration: underline;
}
.article__button {
margin-top: 2rem;
}
.article__button a {
background: var(--color-action);
padding: 0.5rem 1rem;
border-radius: 0.5rem;
color: var(--color);
display: block;
width: fit-content;
margin-left: unset;
}
.article__button a:hover {
background-color: var(--bg-page-color);
}
.article:nth-child(even) {
flex-direction: row;
}
.article:nth-child(even) .article__button-read {
margin-left: auto;
}
@media (max-width: 800px) {
.article {
gap: 1rem;
flex-direction: column;
}
.article__button {
margin-top: 1rem;
}
.article__button a {
margin-left: auto;
}
.article:nth-child(even) {
flex-direction: column;
}
}
.topic .container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3.75rem;
align-items: start;
grid-template-areas: "article bar";
}
.topic .container main {
grid-area: article;
}
.topic .container main header {
padding-bottom: 2rem;
}
.topic .container main header img {
border-radius: 1rem;
width: 100%;
height: auto;
}
@media (max-width: 800px) {
.topic .container {
grid-template-columns: 1fr;
gap: 2.25rem;
grid-template-areas: "bar" "article";
}
}
.topic__content > * {
position: relative;
z-index: 4;
}
.topic__content-list {
display: none;
}
@media (max-width: 800px) {
.topic__content-list {
display: block;
}
}
.topic__content-list > h2 {
width: 100%;
text-align: center;
margin-block: 2.5rem;
}
.topic__content-list .article {
max-width: 15.625rem;
}
.topic__content-list .article__left {
flex: unset;
}
.topic__content-scroll {
width: calc(100vw - 3.4375rem);
overflow: auto;
display: flex;
gap: 0.5rem;
box-shadow: 1px 4px 75px 0px rgba(8, 8, 59, 0.1019607843);
scrollbar-width: none; -ms-overflow-style: none; }
.topic__content-scroll::-webkit-scrollbar {
display: none; }
.topic__content-scroll .article {
margin-top: 0;
min-width: 16.25rem;
}
.topic__sidebar {
height: 100%;
grid-area: bar;
position: relative;
z-index: 4 .topic__sidebar -sticky;
z-index-top: 0.5rem;
z-index-position: sticky;
}
.topic__sidebar-tags a {
font-size: 1.125rem;
font-weight: 300;
color: var(--color-header-title);
line-height: 1.875rem;
margin-right: 0.5rem;
}
.topic__sidebar-tags a:hover {
text-decoration: underline;
}
@media (max-width: 800px) {
.topic__sidebar-tags {
width: calc(100vw - 3.4375rem);
overflow: auto;
scrollbar-width: none; -ms-overflow-style: none; }
.topic__sidebar-tags::-webkit-scrollbar {
display: none; }
}
@media (max-width: 800px) {
.topic__sidebar-scroll {
width: max-content;
}
}
.topic__sidebar-toc h2 {
position: relative;
cursor: pointer;
}
.topic__sidebar-toc h2 svg {
position: absolute;
top: 0.3125rem;
right: 0;
transform: scaleY(1);
}
.topic__sidebar-toc ul {
margin-top: 1.5rem;
}
.topic__sidebar-toc li {
font-size: 1.125rem;
font-weight: 500;
margin-bottom: 1rem;
margin-top: 1rem;
}
.topic__sidebar-toc li.toc__level-2 {
font-weight: 400;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
margin-left: 1.5rem;
list-style: inside;
list-style-position: outside;
}
.topic__sidebar-toc li:hover {
text-shadow: 0.5px 0 currentColor;
}
.topic__sidebar-list {
margin-top: 5rem;
}
.topic__sidebar-list .article {
flex-direction: column;
margin-top: 1.5rem;
gap: 1rem;
}
.topic__sidebar-list .article__button {
margin-top: 1rem;
}
@media (max-width: 800px) {
.topic__sidebar-list {
display: none;
}
}
.next {
margin-block: 100px;
}
.next .container {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
gap: 5rem;
}
@media (max-width: 800px) {
.next .container {
flex-direction: column-reverse;
}
}
.next strong {
font-family: var(--font-family-montserrat);
font-weight: 700;
font-size: 1.25rem;
}
.next svg {
margin-top: 0.5rem;
}
.next h4 {
font-family: var(--font-family-roboto);
font-weight: 400;
font-size: 1.5rem;
margin-top: 1.5rem;
}
.next__right {
text-align: right;
}
.next__right-arrow {
width: max-content;
margin-left: auto;
text-align: left;
}
.next__left {
text-align: left;
}
.next__left-arrow {
width: max-content;
text-align: right;
}
.next a.disabled {
color: var(--color-bg-sector);
}
.next a.disabled svg {
fill: var(--color-bg-sector);
}
.next a:not(.disabled):hover {
color: var(--color-footer-title-hover);
}
.next a:not(.disabled):hover svg {
fill: var(--color-footer-title-hover);
}
.tools__tags {
overflow-x: auto;
width: 100%;
z-index: 1;
position: relative;
font-size: 0.75rem;
font-family: var(--font-family-montserrat);
font-weight: 700;
color: var(--color-header-title);
scrollbar-width: none; -ms-overflow-style: none; }
.tools__tags::-webkit-scrollbar {
display: none; }
.tools__tags-scroll {
width: max-content;
}
.tools__tags a {
background-color: var(--color);
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
display: inline-block;
white-space: nowrap;
}
.tools__tags a:hover {
background-color: var(--color-header-title);
color: var(--color);
}
.tools__group {
z-index: 1;
position: relative;
}
.tools__group:nth-child(odd) h2 {
text-align: right;
}
.tools__list {
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 1.5rem;
}
@media (max-width: 800px) {
.tools__list {
gap: 1rem;
}
}
.tools__list-title {
display: grid;
margin-bottom: 1rem;
color: var(--color-action);
grid-template-columns: 2.25rem 1fr;
gap: 1rem;
align-items: end;
}
.tools__list-title h6 {
border-bottom: 1px solid var(--color-action);
padding-bottom: 0.25rem;
min-height: 3em;
display: flex;
align-items: flex-end;
}
.tools__list-item {
border: 1px solid var(--color);
border-radius: 1rem;
padding: 1rem 2.25rem;
}
.tools__list-item:hover {
border-color: var(--color-action);
}
.tools__list-item p {
font-weight: 300;
font-size: 1rem;
}
@media (max-width: 800px) {
.tools__list-item {
padding: 1rem;
}
}
@media (max-width: 1024px) {
.tools__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 800px) {
.tools__list {
grid-template-columns: repeat(1, 1fr);
}
}
.tools__description {
margin-top: 6.25rem;
max-width: 50rem;
margin-inline: auto;
}
.tools__description h2 {
text-align: center;
}
.tool_hero .container > div {
width: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
gap: 2rem;
margin-top: 3.75rem;
}
.tool_hero .container > div > div {
width: 65%;
text-align: left;
}
.tool_hero .container > div > div > h1 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.tool_hero .container > div > div > h2 {
font-size: clamp(1.125rem, 1.0817307692rem + 0.1923076923vw, 1.25rem);
color: var(--bg-page-color);
margin-bottom: 2.5rem;
}
.tool_hero .container > div > div > span {
margin-bottom: 2.5rem;
display: block;
}
.tool_hero .container > div > div > p {
margin-bottom: 0.5rem;
line-height: 1.6em;
}
.tool_hero .container > div > div > p > svg {
margin: 0 1rem 0 0;
float: left;
stroke: var(--color-action);
}
.tool_hero .container > div > img {
width: calc(35% - 2rem);
}
@media (max-width: 1024px) {
.tool_hero .container > div {
flex-direction: row;
align-items: center;
}
.tool_hero .container > div > div {
max-width: 50%;
text-align: center;
}
.tool_hero .container > div > div > h2 {
text-align: center;
}
}
@media (max-width: 800px) {
.tool_hero .container > div {
flex-direction: column;
align-items: center;
text-align: center;
}
.tool_hero .container > div > div {
max-width: 100%;
}
.tool_hero .container > div > div > h2 {
text-align: center;
}
.tool_hero .container > div img {
max-width: 100%;
height: auto;
}
}
@media (max-width: 320px) {
.tool_hero .container > div {
gap: 1rem;
margin-top: 1.875rem;
}
}
.tool_intro {
margin-top: 7.5rem;
}
.tool_intro > .container {
text-align: center;
}
.tool_intro > .container > h2 {
margin-bottom: 3.75rem;
}
.tool_intro > .container > div {
display: flex;
justify-content: space-around;
align-items: center;
gap: 2.5rem;
padding: 1rem 2rem;
}
.tool_intro > .container > div > p {
max-width: 55%;
text-align: left;
}
.tool_intro > .container > ul {
width: 100%;
}
.tool_intro > .container > ul > li {
text-align: left;
margin-block: 1rem;
}
.tool_intro > .container > ul > li > b {
color: var(--color-action);
}
.tool_pain {
margin-top: 7.5rem;
}
.tool_pain > .container {
text-align: center;
}
.tool_pain > .container > h2 {
margin-bottom: 3.75rem;
}
.tool_pain > .container > div {
display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3.75rem; }
.tool_pain > .container > div > div {
text-align: left;
margin-top: 0;
padding-bottom: 5rem;
}
.tool_pain > .container > div > div > h3 {
color: var(--color-header-title);
font-weight: 700;
font-size: clamp(1.125rem, 0.9519230769rem + 0.7692307692vw, 1.625rem);
margin-bottom: 2rem;
}
.tool_pain > .container > div > div > p {
font-family: var(--font-family-montserrat);
font-weight: 400;
font-size: clamp(1rem, 0.8269230769rem + 0.7692307692vw, 1.5rem);
}
.tool_pain > .container > div .tool_pain__solution {
transform: translateY(-5rem);
background-color: var(--color);
}
.tool_pain > .container > div .tool_pain__solution > h3 {
color: var(--color-action);
}
.tool_solution {
margin-top: 7.5rem;
}
.tool_solution > .container {
text-align: center;
}
.tool_solution > .container > div {
display: flex;
gap: 3.75rem;
justify-content: space-evenly;
}
.tool_solution > .container > div > div {
text-align: left;
}
.tool_solution > .container > div > div > ul > li {
list-style: circle;
}
.tool_solution > .container > div > div > img {
max-width: 23.4375rem;
max-height: 12.5rem;
border: 1px solid var(--color-header-title);
border-radius: 1rem;
}
.tool_solution > .container > div > div > h3 {
color: var(--color-action);
font-weight: 700;
font-size: clamp(1.125rem, 0.9519230769rem + 0.7692307692vw, 1.625rem);
margin-bottom: 2rem;
}
.tool_solution > .container .tool_solution__b {
flex-direction: row-reverse;
}
.tool_ecosystem {
margin-top: 7.5rem;
}
.tool_ecosystem > .container {
text-align: center;
}
.tool_ecosystem > .container > h2 {
margin-bottom: 1.875rem;
}
.tool_ecosystem > .container > h5 {
margin-bottom: 1.875rem;
}
.tool_ecosystem > .container > div {
display: grid;
grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 0rem;
text-align: left;
}
.tool_ecosystem > .container > div > .t1 {
margin: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-width: 0;
box-shadow: -2px -3em 5em 0px rgba(8, 8, 59, 0.1019607843);
background-color: white;
z-index: 5;
}
.tool_ecosystem > .container > div > .t2 {
padding: 0px 0px 1.875rem 1.875rem;
position: relative;
}
.tool_ecosystem > .container > div > .t2 > .t2_corner {
position: absolute;
bottom: 0;
left: 0;
width: 1rem;
height: 1rem;
border-bottom-left-radius: 1rem;
overflow: hidden;
box-shadow: -4px 4px 0px 4px var(--color);
z-index: 5;
}
.tool_ecosystem > .container > div > .t2 > .t2_text {
margin-top: 0;
border-color: var(--color-action);
height: -webkit-fill-available;
}
.tool_ecosystem > .container > div > .eco {
margin: 0;
border-top-left-radius: 0;
border-width: 0;
grid-column: 1/span 2;
background-color: white;
}
.tool_example {
margin-top: 7.5rem;
}
.tool_example > .container {
text-align: center;
}
.tool_example > .container > h2 {
margin-bottom: 3.75rem;
}
.tool_example__slides {
margin-top: 2rem;
position: relative;
width: 100%;
aspect-ratio: 3/2;
}
.tool_example__slides > div {
border-radius: 1rem;
border: 1px solid var(--color-header-title);
overflow: hidden;
background-color: var(--color);
position: absolute;
aspect-ratio: 3/2;
}
.tool_example__slides > div > img {
aspect-ratio: 4/3;
width: -webkit-fill-available;
}
.tool_example__slides-backward {
width: 55%;
top: 0;
left: 0;
}
.tool_example__slides-forward {
width: 70%;
right: 0;
bottom: 0;
}
.tool_clients {
background: transparent;
margin-top: 6.25rem;
}
.tool_clients .main_clients__list-item {
box-shadow: 1px 0.3em 16px 0px rgba(8, 8, 59, 0.1019607843);
}
.tool_seo {
margin-bottom: 6.25rem;
}
.tool_seo .container {
border-top: 1px solid var(--bg-page-color);
}
.tool_seo .container > h4 {
margin-top: 6.25rem;
margin-bottom: 3.75rem;
}
.tool_seo__columns {
column-count: 2;
column-gap: 3.75rem;
}
.tool_seo__columns > p {
margin-block: 1rem;
}
.eco_svg > g.eco_svg__inout > text {
font-family: monospace;
font-size: clamp(1.875rem, 1.7668269231rem + 0.4807692308vw, 2.1875rem);
font-weight: 600;
fill: var(--bg-page-color);
}
.eco_svg > g.eco_svg__inout > rect {
width: 6.25rem;
height: 6.25rem;
fill: var(--color);
shape-rendering: crispEdges;
border-radius: 50%;
filter: drop-shadow(1px 4px 12.5px rgba(8, 8, 59, 0.1));
}
.eco_svg > g.eco_svg__path > line {
stroke: #3A64F8;
}
.eco_svg > g.eco_svg__path > g {
cursor: pointer;
}
.eco_svg > g.eco_svg__path > g > text {
font-size: 18px;
text-anchor: middle;
fill: var(--bg-page-color);
display: none;
z-index: 20;
}
.eco_svg > g.eco_svg__path > g > circle {
stroke: var(--color-header-title);
fill: var(--color);
transition: all 0.2s ease;
}
.eco_svg > g.eco_svg__path > g:hover > text {
display: block;
}
.eco_svg > g.eco_svg__path > g.eco_tool_active {
cursor: unset;
}
.eco_svg > g.eco_svg__path > g.eco_tool_active > text {
display: block;
font-size: 20px;
}
.eco_svg > g.eco_svg__path > g.eco_tool_active > circle {
fill: var(--color-action);
stroke: var(--color-action);
}
.legal {
margin-bottom: 6.25rem;
}
.legal .container {
grid-template-areas: "bar article";
grid-template-columns: 1fr 2fr;
}
@media (max-width: 800px) {
.legal .container {
grid-template-columns: 1fr;
gap: 2.25rem;
grid-template-areas: "bar" "article";
}
.legal .container .topic__sidebar-sticky:first-child {
display: none;
}
}
.legal nav:not(#topic_toc) {
margin-top: 0;
}
.manufacture_intro article {
background: linear-gradient(90deg, var(--color) 0%, var(--color-bg-sector) 100%);
flex-direction: row-reverse;
}
.manufacture_intro article .article__right {
display: flex;
align-items: center;
}
.manufacture_intro article .article__right p {
margin-top: unset;
font-weight: 400;
font-size: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
}
.manufacture_intro article .article__right p > strong {
font-weight: 700;
font-size: clamp(1.125rem, 0.9519230769rem + 0.7692307692vw, 1.625rem);
color: var(--color-action);
}
.manufacture_goal {
margin-block: 12.5rem;
}
.manufacture_goal h2 {
text-align: center;
}
.manufacture_goal h2 strong {
color: var(--color-action);
font-weight: 900;
font-size: clamp(3.75rem, 2.4519230769rem + 5.7692307692vw, 7.5rem);
}
.manufacture_blockers h2 {
color: var(--color-header-title);
text-align: center;
}
.manufacture_blockers .article {
background: linear-gradient(-90deg, var(--color) 0%, var(--color-bg-sector) 100%);
border: unset;
}
.manufacture_blockers .article:nth-child(even) {
background: linear-gradient(90deg, var(--color) 0%, var(--color-bg-sector) 100%);
}
.manufacture_blockers .article__img {
position: relative;
display: block;
overflow: hidden;
}
.manufacture_blockers .article__img-overlay {
position: absolute;
inset: 0; background: rgba(0, 0, 0, 0.25); display: grid; z-index: 1;
place-items: center;
padding: 0.5em; transition: opacity 0.2s ease;
pointer-events: none;
}
.manufacture_blockers .article__img-overlay > img {
width: clamp(64px, 25%, 220px); height: auto;
opacity: 0.5;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); }
.manufacture_blockers .article__right {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 2rem;
font-family: var(--font-family-montserrat);
}
.manufacture_blockers .article__right p {
font-size: clamp(1.125rem, 0.9951923077rem + 0.5769230769vw, 1.5rem);
font-weight: 400;
}
.manufacture_blockers .article__right > strong {
font-weight: 900;
font-size: clamp(3.75rem, 2.4519230769rem + 5.7692307692vw, 7.5rem);
color: transparent;
position: relative;
border: 1px solid;
padding-inline: 0.25rem;
background-clip: text;
background: linear-gradient(to bottom, var(--color-action) 30%, transparent 90%);
-webkit-background-clip: text;
-webkit-text-stroke: 1px transparent;
-webkit-text-fill-color: var(--color);
}
.manufacture_blockers .article__right span {
font-size: clamp(0.75rem, 0.7067307692rem + 0.1923076923vw, 0.875rem);
}
.manufacture_blockers .article:hover .article__img-overlay, .manufacture_blockers .article:nth-child(even):hover .article__img-overlay {
background: rgba(0, 0, 0, 0.45); }
.manufacture_blockers .article:hover .article__img-overlay > img, .manufacture_blockers .article:nth-child(even):hover .article__img-overlay > img {
opacity: 1;
}
.manufacture_video {
margin-block: 6.25rem;
}
.manufacture_video article {
background: linear-gradient(-90deg, var(--color) 0%, var(--color-bg-sector) 100%);
}
.manufacture_video article:nth-child(even) {
background: linear-gradient(-90deg, var(--color) 0%, var(--color-bg-sector) 100%);
}
.manufacture_video article iframe {
border-radius: 1rem;
}
.manufacture_video article strong {
font-weight: 700;
font-size: clamp(1.125rem, 0.9519230769rem + 0.7692307692vw, 1.625rem);
color: var(--color-action);
}
.manufacture_proccess {
margin-bottom: 6.25rem;
}
.manufacture_proccess .container h2 {
color: var(--color-header-title);
}
.manufacture_proccess .container p {
font-size: clamp(1rem, 0.9134615385rem + 0.3846153846vw, 1.25rem);
font-weight: 400;
}
.manufacture_proccess__timeline {
font-size: clamp(0.875rem, 0.7884615385rem + 0.3846153846vw, 1.125rem);
margin-top: 2rem;
display: grid;
grid-template-columns: calc(1.8em + 2px) 1px 40% 1px 30% 1px auto;
grid-template-rows: repeat(6, minmax(1.875rem, auto));
border-left: 1px dashed var(--color-header-title);
border-right: 1px dashed var(--color-header-title);
}
@media (max-width: 800px) {
.manufacture_proccess__timeline {
display: flex;
flex-direction: column;
gap: 1.5rem;
border: none;
position: relative;
}
.manufacture_proccess__timeline::before {
content: "";
position: absolute;
left: 1.25rem;
top: 0;
bottom: 0;
width: 1px;
border-left: 1px dashed var(--color-header-title);
z-index: 1;
}
}
.manufacture_proccess__timeline::after {
content: "";
grid-column: 6;
grid-row: 1/-1; border-left: 1px dashed var(--color-header-title);
}
@media (max-width: 800px) {
.manufacture_proccess__timeline::after {
display: none;
}
}
.manufacture_proccess__timeline::before {
content: "";
grid-column: 2;
grid-row: 1/-1; border-left: 1px dashed var(--color-header-title);
left: 0.9rem;
}
.manufacture_proccess__timeline-vline {
grid-row: 1/-1;
border-left: 1px dashed var(--color-header-title);
}
.manufacture_proccess__timeline-vline--mid {
grid-column: 4;
}
@media (max-width: 800px) {
.manufacture_proccess__timeline-vline {
display: none;
}
}
@media (max-width: 800px) {
.manufacture_proccess__timeline > div {
position: relative;
margin-left: 1.8rem;
}
}
.manufacture_proccess__timeline > div > div {
position: relative;
width: 100%;
height: auto;
padding: 0.9em;
border-radius: 0.9em;
border: 1px solid var(--color-header-title);
box-shadow: 1px 0.3em 5em 0px rgba(8, 8, 59, 0.1019607843);
}
@media (max-width: 800px) {
.manufacture_proccess__timeline > div > div {
padding: 1rem;
overflow: hidden;
}
}
.manufacture_proccess__timeline > div > div::after {
content: attr(data-content);
position: absolute;
top: 0%;
right: 0.25rem;
transform: translateY(-100%);
font-family: var(--font-family-montserrat);
font-size: clamp(1.125rem, 0.9519230769rem + 0.7692307692vw, 1.625rem);
font-weight: 700;
color: var(--color);
text-shadow: -1px -1px 0 var(--color-action), 1px -1px 0 var(--color-action), -1px 1px 0 var(--color-action), 1px 1px 0 var(--color-action);
}
@media (max-width: 800px) {
.manufacture_proccess__timeline > div > div::after {
bottom: -1.4em;
right: 0px;
top: unset;
margin: 0;
padding: 0;
}
}
.manufacture_proccess__timeline-registration {
grid-area: 2/1/3/2; display: flex;
align-items: flex-end;
}
@media (max-width: 800px) {
.manufacture_proccess__timeline-registration {
order: 1;
align-items: stretch;
}
}
.manufacture_proccess__timeline-registration > div::after {
left: 0.25rem;
right: unset;
}
@media (max-width: 800px) {
.manufacture_proccess__timeline-registration > div::after {
left: unset;
right: unset;
}
}
.manufacture_proccess__timeline-setup {
grid-area: 3/3/4/4; }
@media (max-width: 800px) {
.manufacture_proccess__timeline-setup {
order: 2;
}
}
.manufacture_proccess__timeline-proccess {
grid-area: 4/5/5/6; }
@media (max-width: 800px) {
.manufacture_proccess__timeline-proccess {
order: 3;
}
}
.manufacture_proccess__timeline-export {
grid-area: 5/6/7/8; }
@media (max-width: 800px) {
.manufacture_proccess__timeline-export {
order: 4;
}
}
.manufacture_proccess__legenda {
background-image: url("data:image/svg+xml,%3Csvg width='1219' height='16' viewBox='0 0 1219 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1218.21 8.70711C1218.6 8.31658 1218.6 7.68342 1218.21 7.29289L1211.84 0.928932C1211.45 0.538408 1210.82 0.538408 1210.43 0.928932C1210.04 1.31946 1210.04 1.95262 1210.43 2.34315L1216.09 8L1210.43 13.6569C1210.04 14.0474 1210.04 14.6805 1210.43 15.0711C1210.82 15.4616 1211.45 15.4616 1211.84 15.0711L1218.21 8.70711ZM1217.5 8V7L0.499878 7V8V9L1217.5 9V8Z' fill='url(%23paint0_linear_1668_16835)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1668_16835' x1='0.499878' y1='7.5' x2='1217.5' y2='7.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23223B92' stop-opacity='0'/%3E%3Cstop offset='0.173077' stop-color='%233A64F8' stop-opacity='0.75'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right top; overflow: hidden; width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-top: 1rem;
}
@media (max-width: 800px) {
.manufacture_proccess__legenda {
flex-direction: column-reverse;
background-image: none;
gap: 1rem;
}
}
.manufacture_proccess__legenda > div {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
justify-content: flex-end;
}
@media (max-width: 800px) {
.manufacture_proccess__legenda > div {
justify-content: flex-start;
}
.manufacture_proccess__legenda > div:first-child {
justify-content: center;
}
}
.manufacture_profit h2 {
text-align: center;
color: var(--color-header-title);
}
.manufacture_profit__list {
background: linear-gradient(0deg, var(--color) -20%, var(--color-bg-sector) 100%);
border: unset;
display: flex;
gap: 2rem;
flex-direction: column;
flex-wrap: nowrap;
}
.manufacture_profit__list-item {
border-radius: 1rem;
background-color: var(--color);
padding: 1rem 2rem;
display: flex;
justify-content: flex-start;
align-content: center;
align-items: center;
gap: 2rem;
position: relative;
font-family: var(--font-family-montserrat);
overflow: hidden;
}
.manufacture_profit__list-item > strong {
font-weight: 900;
font-size: clamp(2.875rem, 2.5721153846rem + 1.3461538462vw, 3.75rem);
color: var(--color-header-title);
}
.manufacture_profit__list-item > p {
font-weight: 400;
font-size: clamp(1.125rem, 0.9951923077rem + 0.5769230769vw, 1.5rem);
}
.manufacture_profit__list-wotermark {
position: absolute;
right: -0.25rem;
bottom: -0.3em;
font-weight: 900;
text-transform: uppercase;
font-size: clamp(2.1875rem, 1.6466346154rem + 2.4038461538vw, 3.75rem);
background-clip: text;
background: linear-gradient(to right, var(--color-action) 30%, transparent 150%);
-webkit-background-clip: text;
-webkit-text-stroke: 1px transparent;
-webkit-text-fill-color: transparent;
}
.manufacture_profit__list-wotermark::after {
content: attr(data-content);
position: absolute;
right: 0;
bottom: 0;
background-clip: text;
background: linear-gradient(to right, var(--color) 0%, var(--color-bg-sector) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.manufacture_free {
margin-top: 6.25rem;
}
.manufacture_free h2 {
text-align: center;
color: var(--color-header-title);
}
.manufacture_free p {
font-weight: 400;
font-size: clamp(0.875rem, 0.7451923077rem + 0.5769230769vw, 1.25rem);
margin-block: 1rem;
max-width: 50rem;
margin-inline: auto;
text-align: center;
}
.shop_hero .container > div {
width: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
margin-top: 3.75rem;
}
.shop_hero .container > div > div {
max-width: 30%;
}
.shop_hero .container > div > div > h2 {
font-size: clamp(1.125rem, 1.0817307692rem + 0.1923076923vw, 1.25rem);
text-align: right;
}
@media (max-width: 1024px) {
.shop_hero .container > div {
flex-direction: row;
align-items: center;
}
.shop_hero .container > div > div {
max-width: 50%;
text-align: center;
}
.shop_hero .container > div > div > h2 {
text-align: center;
}
}
@media (max-width: 800px) {
.shop_hero .container > div {
flex-direction: column;
align-items: center;
text-align: center;
}
.shop_hero .container > div > div {
max-width: 100%;
}
.shop_hero .container > div > div > h2 {
text-align: center;
}
.shop_hero .container > div img {
max-width: 100%;
height: auto;
}
}
@media (max-width: 320px) {
.shop_hero .container > div {
gap: 1rem;
margin-top: 1.875rem;
}
}
.shop_negative {
margin-top: 7.5rem;
}
.shop_negative h2 {
color: var(--color-header-title);
text-align: center;
}
.shop_negative__reasons {
display: flex;
gap: 1rem;
}
@media (max-width: 1024px) {
.shop_negative__reasons {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 800px) {
.shop_negative__reasons {
flex-direction: column;
align-items: stretch;
}
}
.shop_negative__reason {
position: relative;
flex: 1 1 calc(25% - 0.75rem);
padding: 0;
overflow: hidden;
border: 0;
}
@media (max-width: 1024px) {
.shop_negative__reason {
flex: 1 1 calc(50% - 0.75rem);
}
}
@media (max-width: 800px) {
.shop_negative__reason {
flex: 1 1 100%;
}
}
.shop_negative__reason > svg {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
width: 4em;
height: 4em;
}
@media (max-width: 1024px) {
.shop_negative__reason > svg {
width: 3em;
height: 3em;
}
}
@media (max-width: 800px) {
.shop_negative__reason > svg {
width: 2em;
height: 2em;
}
}
.shop_negative__reason > p {
z-index: 5;
position: relative;
padding: 1em 1em 3em 2em;
font-size: clamp(1.125rem, 0.9951923077rem + 0.5769230769vw, 1.5rem);
font-family: var(--font-family-montserrat);
}
.shop_negative__reason > strong {
transform: translateY(3.125rem);
display: block;
font-weight: 900;
font-size: clamp(3.75rem, 1.1538461538rem + 11.5384615385vw, 11.25rem);
font-family: var(--font-family-montserrat);
color: transparent;
position: absolute;
bottom: 0;
padding-left: 0.25rem;
border: 1px solid;
background-clip: text;
background: linear-gradient(to bottom, var(--color-action) 30%, transparent 90%);
-webkit-background-clip: text;
-webkit-text-stroke: 1px transparent;
-webkit-text-fill-color: #f2eff9;
}
@media (max-width: 1024px) {
.shop_negative__reason > strong {
transform: translateY(1.875rem);
}
}
@media (max-width: 800px) {
.shop_negative__reason > strong {
transform: translateY(0.625rem);
}
}
.shop_negative__result {
color: var(--color-purple);
text-align: center;
font-family: var(--font-family-montserrat);
font-size: clamp(1.25rem, 0.9903846154rem + 1.1538461538vw, 2rem);
font-weight: 800;
padding: 0.6em 0.3em;
margin-top: 3.75rem;
}
.shop_positive {
margin-top: 7.5rem;
}
.shop_positive h2 {
color: var(--color-header-title);
text-align: center;
margin-bottom: 3.75rem;
}
.shop_positive__reasons {
display: flex;
flex-direction: column;
gap: 2rem;
}
.shop_positive__reason {
position: relative;
padding: 0;
max-width: 750px;
width: 70%;
border: 0;
margin: 0;
}
.shop_positive__reason > svg {
position: absolute;
bottom: 0.9375rem;
right: 1rem;
width: 3em;
height: 3em;
}
.shop_positive__reason > p {
z-index: 5;
position: relative;
padding: 3em 5em 1em 4em;
font-size: clamp(1.125rem, 0.9951923077rem + 0.5769230769vw, 1.5rem);
font-family: var(--font-family-montserrat);
}
.shop_positive__reason > strong {
transform: translateX(2rem);
display: block;
font-weight: 900;
font-size: clamp(3.75rem, 2.4519230769rem + 5.7692307692vw, 7.5rem);
font-family: var(--font-family-montserrat);
color: transparent;
position: absolute;
bottom: 0;
padding-left: 0.25rem;
background-clip: text;
background: linear-gradient(to bottom, var(--color-action) 30%, transparent 90%);
-webkit-background-clip: text;
-webkit-text-stroke: 1px transparent;
-webkit-text-fill-color: #f2eff9;
}
.shop_positive__reason::after {
content: "";
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iNzEiIHZpZXdCb3g9IjAgMCA2NyA3MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuMTQzNzUgNDIuNTQ5OEwxNi41NTQ5IDYyLjU4NzdMMzYuNTkyOCA1MC4xNzY2IiBzdHJva2U9IiNFMjNBOEQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xNi41NTQ5IDYyLjU4NzhMMjIuNjU2NCAzNi42Mjg1QzI2Ljg2ODcgMTguNzA2OSA0NC44MTA3IDcuNTkzOTkgNjIuNzMyMyAxMS44MDYzTDY1Ljk3NzIgMTIuNTY5IiBzdHJva2U9IiNFMjNBOEQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
width: 70px;
height: 70px;
display: block;
position: absolute;
right: -5em;
bottom: 0;
background-repeat: no-repeat;
transform: scaleX(-1);
}
.shop_positive__reason:nth-child(even) {
margin-left: auto;
}
.shop_positive__reason:nth-child(even)::after {
right: unset;
left: -5em;
transform: scaleX(1);
}
.shop_positive__reason:last-child::after {
content: unset;
}
@media (max-width: 1024px) {
.shop_positive__reason {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.shop_positive__reason::after {
right: -3em;
}
.shop_positive__reason:nth-child(even) {
margin-left: auto;
margin-right: auto;
}
.shop_positive__reason:nth-child(even)::after {
left: -3em;
}
}
@media (max-width: 800px) {
.shop_positive__reason {
width: 100%;
}
.shop_positive__reason::after {
content: none;
}
.shop_positive__reason:nth-child(even) {
margin-left: 0;
}
.shop_positive__reason > p {
padding: 2em 2em 1em 2em;
}
}
.shop_positive__result {
color: var(--color-purple);
text-align: center;
font-family: var(--font-family-montserrat);
font-size: clamp(1.5rem, 1.0240384615rem + 2.1153846154vw, 2.875rem);
font-weight: 800;
padding: 0.6em 0.3em;
margin-top: 3.75rem;
}
.shop_integration {
margin-top: 7.5rem;
}
.shop_integration .container h2 {
color: var(--color-header-title);
text-align: center;
margin-bottom: 3.75rem;
}
.shop_integration .container > div {
width: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
margin-top: 3.75rem;
}
.shop_integration .container > div > div {
width: 50%;
margin-top: 0;
}
.shop_integration .container > div > div > p {
font-size: clamp(1rem, 0.9134615385rem + 0.3846153846vw, 1.25rem);
}
.shop_integration .container > div > div > p > b {
color: var(--color-action);
font-size: clamp(1.125rem, 0.9951923077rem + 0.5769230769vw, 1.5rem);
}
.shop_integration .container > div img {
max-width: 50%;
height: auto;
}
@media (max-width: 1024px) {
.shop_integration .container > div {
align-items: center;
}
.shop_integration .container > div > div {
width: 50%;
}
.shop_integration .container > div img {
max-width: 50%;
}
}
@media (max-width: 800px) {
.shop_integration .container > div {
flex-direction: column;
align-items: center;
text-align: center;
}
.shop_integration .container > div > div {
width: 100%;
}
.shop_integration .container > div img {
max-width: 100%;
margin-top: 1.5rem;
}
}
@media (max-width: 320px) {
.shop_integration .container > div {
gap: 1rem;
margin-top: 1.875rem;
}
.shop_integration .container > div > div > p {
font-size: clamp(0.875rem, 0.7884615385rem + 0.3846153846vw, 1.125rem);
}
}
.shop_enterprise {
margin-top: 7.5rem;
}
.shop_enterprise .container h2 {
color: var(--color-header-title);
text-align: center;
margin-bottom: 3.75rem;
}
.shop_enterprise .container > div {
width: 100%;
display: grid;
grid-template-areas: "a b b" "c d e";
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
}
.shop_enterprise .container > div > div {
margin-top: 0;
font-size: clamp(1rem, 0.9134615385rem + 0.3846153846vw, 1.25rem);
}
.shop_enterprise .container > div > div b {
color: var(--color-action);
font-size: clamp(1.0625rem, 0.9543269231rem + 0.4807692308vw, 1.375rem);
}
.shop_enterprise .container > div > div:not(.shop_enterprise__b) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 1rem;
text-align: center;
}
.shop_enterprise__b {
grid-area: b;
}
@media (max-width: 1024px) {
.shop_enterprise .container > div {
grid-template-areas: "b b" "a c" "d e";
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
}
}
@media (max-width: 800px) {
.shop_enterprise .container > div {
grid-template-areas: "b" "a" "c" "d" "e";
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
@media (max-width: 320px) {
.shop_enterprise .container > div {
gap: 1rem;
}
.shop_enterprise .container > div > div {
font-size: clamp(0.875rem, 0.7884615385rem + 0.3846153846vw, 1.125rem);
}
}
.main_how.shop_tools {
margin-top: 7.5rem;
}
.main_how.shop_tools .container h2 {
color: var(--color-header-title);
text-align: center;
}
.main_how.shop_tools .container .tools__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: 1.5rem;
}
.main_how.shop_tools .container .tools__list > a {
margin-top: 0;
}
.main_how.shop_tools .shop_tools__intro {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 3.75rem;
justify-content: space-between;
margin: 2.5rem 0;
}
.main_how.shop_tools .shop_tools__intro > div {
margin-top: 0;
font-size: clamp(1rem, 0.9134615385rem + 0.3846153846vw, 1.25rem);
}
.main_how.shop_tools .shop_tools__intro > div > b {
color: var(--color-action);
font-size: clamp(1.125rem, 0.9951923077rem + 0.5769230769vw, 1.5rem);
}
.main_how.shop_tools .shop_tools__intro > img {
width: 15em;
flex-shrink: 0;
}
@media (max-width: 1024px) {
.main_how.shop_tools .shop_tools__intro {
flex-direction: column;
text-align: center;
gap: 2rem;
}
.main_how.shop_tools .shop_tools__intro > img {
width: 12em;
}
}
@media (max-width: 800px) {
.main_how.shop_tools .shop_tools__intro {
gap: 1.5rem;
}
.main_how.shop_tools .shop_tools__intro > img {
width: 10em;
}
}
@media (max-width: 320px) {
.main_how.shop_tools .shop_tools__intro {
gap: 1rem;
}
.main_how.shop_tools .shop_tools__intro > div {
font-size: clamp(0.875rem, 0.7884615385rem + 0.3846153846vw, 1.125rem);
}
.main_how.shop_tools .shop_tools__intro > img {
width: 8em;
}
}
.shop_ai {
margin-top: 7.5rem;
}
.shop_ai .container h2 {
color: var(--color-header-title);
text-align: center;
margin-bottom: 3.75rem;
}
.shop_ai__intro {
display: flex;
gap: 3.75rem;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.shop_ai__intro > img {
max-width: 35%;
flex-shrink: 0;
}
.shop_ai__blocks {
flex: 1;
}
.shop_ai__blocks > div {
font-size: clamp(1rem, 0.9134615385rem + 0.3846153846vw, 1.25rem);
}
.shop_ai__blocks > div > b {
color: var(--color-action);
font-size: clamp(1.125rem, 0.9951923077rem + 0.5769230769vw, 1.5rem);
}
.shop_ai__blocks > div:first-child {
margin-top: 0;
}
.shop_ai__blocks > div:last-child {
margin-top: 2rem;
}
@media (max-width: 1024px) {
.shop_ai__intro {
flex-direction: column;
align-items: center;
text-align: center;
gap: 2rem;
}
.shop_ai__intro > img {
max-width: 60%;
}
.shop_ai__blocks > div {
text-align: left;
}
}
@media (max-width: 800px) {
.shop_ai__intro {
gap: 1.5rem;
}
.shop_ai__intro > img {
max-width: 70%;
}
.shop_ai__blocks > div {
font-size: clamp(0.875rem, 0.7884615385rem + 0.3846153846vw, 1.125rem);
}
}
@media (max-width: 320px) {
.shop_ai__intro {
gap: 1rem;
}
.shop_ai__intro > img {
max-width: 90%;
}
.shop_ai__blocks > div {
font-size: clamp(0.875rem, 0.8317307692rem + 0.1923076923vw, 1rem);
}
}
.shop_price {
margin-top: 7.5rem;
}
.shop_price .container h2 {
color: var(--color-header-title);
text-align: center;
margin-bottom: 3.75rem;
}
.shop_price .banner-container {
max-width: 900px;
margin: 0 auto;
color: var(--color);
text-align: right;
}
.shop_price .banner-container > a {
margin-top: 2.5rem;
display: block;
}
.shop_price .banner-container > a > button {
background-color: var(--color);
border: 1px solid var(--color-action-button);
font-size: clamp(1rem, 0.9134615385rem + 0.3846153846vw, 1.25rem);
font-family: var(--font-family-montserrat);
font-weight: 400;
}
.shop_price .banner-container > a > button:hover {
background-color: var(--color-action-button);
color: var(--color);
}
.shop_price .banner {
background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-header-title) 100%);
border-radius: 15px;
padding: 25px 40px;
position: relative;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.shop_price .banner::before {
content: "";
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
transform: rotate(45deg);
}
.shop_price .badge {
display: inline-block;
background-color: var(--color-action);
color: var(--color);
padding: 8px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
position: relative;
z-index: 2;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.shop_price .main-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 10px;
position: relative;
z-index: 2;
text-align: center;
}
.shop_price .subtitle {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 20px;
position: relative;
z-index: 2;
text-align: center;
}
.shop_price .savings {
text-align: center;
margin-bottom: 25px;
position: relative;
z-index: 2;
}
.shop_price .savings-text {
font-size: 2rem;
font-weight: 800;
color: var(--color-action-button);
margin-bottom: 5px;
}
.shop_price .savings-subtitle {
font-size: 0.9rem;
opacity: 0.8;
}
.shop_price .button-container {
text-align: center;
}
@media (max-width: 768px) {
.shop_price .banner {
padding: 20px 15px;
}
.shop_price .main-title {
font-size: 1.5rem;
}
.shop_price .savings-text {
font-size: 1.5rem;
}
}
.shop_price .decorative-elements {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
.shop_price .circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
}
.shop_price .circle:nth-child(1) {
width: 100px;
height: 100px;
top: 10%;
right: 10%;
animation: float 6s ease-in-out infinite;
}
.shop_price .circle:nth-child(2) {
width: 60px;
height: 60px;
bottom: 20%;
left: 5%;
animation: float 4s ease-in-out infinite reverse;
}
.shop_price .circle:nth-child(3) {
width: 80px;
height: 80px;
top: 60%;
right: 5%;
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.tarif {
margin-top: 6.25rem;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-bg-sector) 25%, var(--color-bg-sector) 75%, rgba(255, 255, 255, 0) 100%);
}
.tarif .container > h2 {
text-align: center;
}
.tarif__main {
margin-top: 3.75rem;
display: grid;
grid-template-columns: 1fr 4fr;
gap: 2rem;
}
.tarif__aside {
position: sticky;
top: 0;
height: min-content;
text-align: center;
font-size: clamp(0.875rem, 0.8317307692rem + 0.1923076923vw, 1rem);
padding-block: 1.875rem;
}
.tarif__aside > a {
font-weight: 300;
font-size: clamp(0.875rem, 0.8317307692rem + 0.1923076923vw, 1rem);
min-height: 4.6875rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
}
.tarif__aside > a:not(:last-child) {
border-bottom: 1px solid #e6e6e6;
cursor: pointer;
}
.tarif__aside > a:not(:last-child):hover, .tarif__aside > a:not(:last-child):active, .tarif__aside > a:not(:last-child):focus {
border: 1px solid var(--color-header-title);
border-radius: 8px;
color: var(--color-header-title);
cursor: pointer;
}
.tarif__aside > a select {
border: 1px solid var(--color-action-button);
margin-left: 0.5rem;
background-color: var(--color);
padding: 0.25rem;
border-radius: 0.5rem;
}
.tarif__list {
display: flex;
gap: 1rem;
max-width: 100%;
}
.tarif__list-item {
background-color: var(--color);
border-radius: 1rem;
padding: 1.875rem 1.25rem;
text-align: center;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
box-shadow: 1px 0.3em 5em 0px rgba(8, 8, 59, 0.1019607843);
}
.tarif__list-item > span {
line-height: 4.6875rem;
border-bottom: 1px solid var(--color-bg-sector);
font-size: clamp(0.875rem, 0.8317307692rem + 0.1923076923vw, 1rem);
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
}
.tarif__list-item > span:first-child {
color: var(--color-action);
font-family: var(--font-family-montserrat);
font-weight: 700;
font-size: clamp(1rem, 0.9134615385rem + 0.3846153846vw, 1.25rem);
}
.tarif__list-item > span > input {
margin-right: 0.5em;
border-radius: 0.5em;
width: 1.5em;
height: 1.5em;
cursor: pointer;
}
.tarif__list-item > b {
line-height: 4.5rem;
font-family: var(--font-family-montserrat);
font-weight: 700;
font-size: clamp(1.125rem, 0.9951923077rem + 0.5769230769vw, 1.5rem);
color: var(--color-header-title);
text-wrap-mode: nowrap;
}
.tarif__list-item > button {
margin-top: 2rem;
}
.tarif__list-item > a {
margin-top: 2rem;
}
.tarif__list-item:last-child {
background-color: var(--bg-page-color);
color: var(--color);
}
.tarif__about {
margin-top: 6.25rem;
}
.faq {
margin-block: 6.25rem;
}
.faq .container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4em;
}
.faq__list {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 1rem;
}
.faq__list-item {
margin-top: unset;
padding: 0.5em 1em;
}
.faq__list-item > h6 {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
padding: 0.5em 1em;
}
.faq__list-item > h6::after {
content: "+";
margin-left: auto;
transition: transform 0.3s ease;
}
.faq__list-item > h6:hover {
opacity: 0.8;
transition: opacity 0.2s ease;
}
.faq__list-item.faq-open > h6::after {
content: "−";
transform: rotate(180deg);
}
.faq__list-item > .content {
margin-top: 1rem;
padding: 0.5em 1em;
display: none;
}
.footer {
display: flex;
flex-direction: column;
width: 100%;
padding-top: 3.75rem;
gap: 1.875rem;
background-color: var(--bg-page-color);
color: var(--color);
position: relative;
}
.footer .background {
bottom: 100%;
}
.footer__link {
color: var(--color);
white-space: nowrap;
text-decoration: none;
width: fit-content;
align-self: flex-start;
}
.footer__link:hover {
text-decoration: underline;
}
.footer__link:hover {
text-shadow: 0.5px 0 currentColor;
text-decoration: none;
}
.footer__link--ghost {
position: relative;
display: inline-block;
}
.footer__link--ghost::before {
content: attr(data-text);
font-weight: 700;
visibility: hidden;
display: block;
height: 0;
overflow: hidden;
}
.footer__logo {
width: clamp(80px, 8vw, 220px);
height: auto;
}
.footer__main {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.footer__description {
gap: 2.5rem;
display: flex;
flex-direction: column;
}
.footer__description-container {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.footer__description-title {
gap: 0.625rem;
font-weight: 900;
font-size: 2.125rem;
line-height: 100%;
letter-spacing: 0;
}
.footer__description-text {
font-weight: 300;
font-size: 1rem;
line-height: 100%;
letter-spacing: 0;
width: 16.5rem;
word-wrap: normal;
white-space: normal;
line-height: 130%;
}
@media (max-width: 1024px) {
.footer__description-text {
width: auto;
}
}
.footer__icons {
display: flex;
flex-direction: row;
gap: 1.25rem;
align-items: center;
justify-content: flex-start;
}
.footer__icon {
display: inline-flex; transition: background-color 0.2s ease, color 0.2s ease;
color: var(--color);
background-color: var(--bg-page-color);
}
.footer__icon-svg {
width: 1.375rem;
height: 1.375rem;
fill: currentColor;
}
.footer__icon:hover {
background-color: var(--color);
color: var(--bg-page-color);
border-radius: 0.1875rem;
}
.footer__client-links {
display: flex;
flex-direction: row;
gap: 2.5rem;
}
@media (max-width: 1024px) {
.footer__client-links {
flex-direction: column;
}
}
.footer__client-group {
display: flex;
flex-direction: row;
gap: 2.5rem;
}
.footer__client-block {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer__client-title {
font-weight: 700;
font-size: 1.125rem;
line-height: 100%;
letter-spacing: 0;
width: fit-content;
align-self: flex-start;
}
.footer__client-title:hover {
color: var(--color-footer-title-hover);
text-decoration: none;
}
.footer__client-content {
font-weight: 400;
font-size: 1rem;
line-height: 100%;
letter-spacing: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer__legal-wrapper {
gap: 0.625rem;
display: flex;
flex-direction: row;
align-items: center;
}
.footer__legal-text {
font-weight: 400;
font-size: 1rem;
line-height: 100%;
letter-spacing: 0;
white-space: nowrap;
margin-right: 2rem;
display: flex;
}
.footer__copyright {
font-weight: 400;
font-size: 1rem;
line-height: 100%;
letter-spacing: 0;
font-size: 1.34rem;
align-items: start;
}
.footer__policy-links {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, auto);
column-gap: 1.5rem;
row-gap: 0.5rem;
font-weight: 400;
font-size: 1rem;
line-height: 100%;
letter-spacing: 0;
}
.footer__bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 1.875rem;
padding-bottom: 1.875rem;
margin-top: auto;
}
@media (max-width: 1440px) {
.footer__client-group {
flex-direction: column-reverse;
justify-content: flex-end;
gap: 2rem;
}
.footer__legal-text {
flex-direction: column;
}
.footer__policy-links {
grid-template-columns: repeat(2, auto);
}
}
@media (max-width: 1024px) {
.footer {
height: auto;
display: flex;
flex-direction: column;
padding-top: 2.5rem;
}
.footer__main {
flex-direction: column;
padding-right: 1.25rem;
padding-left: 1.25rem;
gap: 1.875rem;
}
.footer__icons {
justify-content: center;
padding-left: 0;
}
.footer__bottom {
padding-left: 1.25rem;
padding-right: 1.25rem;
gap: 1rem;
flex-direction: column;
}
.footer__policy-links {
grid-template-columns: repeat(1, auto);
row-gap: 1rem;
}
}
@media (max-width: 800px) {
.footer__bottom {
display: flex;
justify-content: start;
}
}
@media (max-width: 320px) {
.footer__bottom {
gap: 1.25rem;
font-size: 0.875rem;
}
.footer__policy-links {
display: flex;
flex-direction: column;
}
.footer__client-content {
font-size: 0.9375rem;
}
.footer__client-title {
font-size: 1rem;
}
}
@media (max-height: 2000px) {
footer > .background {
display: none;
}
}