.page-homepage .header:not(.fixed) {
background-color: transparent;
}
.page-homepage .container {
width: 100%;
max-width: 1392px;
padding: 0 16px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
.page-new-homepage .header:not(.fixed) {
background-color: transparent;
}
.page-new-homepage .container {
width: 100%;
max-width: 1392px;
padding: 0 16px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
.container.container-homepage-hero {
max-width: 1312px;
}
.button {
display: inline-flex;
height: 54px;
background-color: #F0A93B;
border-radius: 8px;
padding: 0 30px;
box-sizing: border-box;
font-size: 14px;
font-weight: 700;
align-items: center;
border: none;
color: #fff;
text-transform: uppercase;
box-shadow: 0 14px 34px rgba(240, 169, 59, 0.3);
text-decoration: none;
outline: none;
cursor: pointer;
text-align: center;
justify-content: center;
transition: 0.3s;
}
.button.button-icon {
padding-left: 16px;
padding-right: 16px;
justify-content: center;
text-align: center;
gap: 10px;
}
.button.button-icon span {
text-align: left;
}
.button.button-icon svg {
width: 20px;
height: 20px;
}
.button:hover {
background-color: #FEB645;
}
.homepage-hero {
overflow: hidden;
}
.homepage-hero-inner {
position: relative;
}
.homepage-hero-container {
position: relative;
min-height: min(100dvh, 1000px);
}
.homepage-hero-circle {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 718px;
height: 718px;
display: flex;
align-items: center;
justify-content: center;
display: none !important;
}
.homepage-hero-circle svg {
width: 100%;
height: 100%;
}
@-webkit-keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.homepage-hero-arrows {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1090px;
height: 1090px;
display: flex;
align-items: center;
justify-content: center;
}
.homepage-hero-arrows img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.homepage-hero-content {
max-width: 540px;
width: 100%;
box-sizing: border-box;
margin: auto;
text-align: center;
position: relative;
z-index: 1;
}
.homepage-hero-content.z-index {
z-index: 8;
}
.homepage-hero-content-overlay {
position: absolute;
top: 0;
right: 0;
width: 0;
height: calc(100% + 50px);
background-color: #000;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 10%);
transition: 0.85s ease-out;
}
.homepage-hero-title {
font-size: 40px;
font-weight: 700;
color: #313C4E;
line-height: 1.35;
transition: 0.85s ease-out;
}
.homepage-hero-title span {
color: #2B5DA2;
}
.homepage-hero-text {
color: #62738D;
font-size: 16px;
line-height: 1.5;
margin-top: 15px;
transition: 0.85s ease-out;
}
.homepage-hero-button {
margin-top: 40px;
transition: 0.85s ease-out;
}
.homepage-hero-cards {
will-change: transform;
}
.homepage-hero-cards-content {
box-shadow: -2px 2px 4px rgba(43, 93, 162, 0.0784313725), 4px 4px 6px rgba(43, 93, 162, 0.0588235294);
display: flex;
flex-direction: column;
justify-content: center;
background-color: #F3F4F7;
border-radius: 15px;
padding: 20px;
box-sizing: border-box;
text-decoration: none;
transition: 0.4s ease-out;
}
.homepage-hero-cards-content::after {
content: "";
width: 50px;
height: 50px;
display: block;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: -18px;
right: -18px;
z-index: 2;
}
.homepage-hero-cards-content:hover .homepage-hero-cards-arrow {
opacity: 1;
visibility: visible;
pointer-events: auto;
position: static;
}
.homepage-hero-cards-content:hover .homepage-hero-cards-icon {
opacity: 0;
visibility: hidden;
pointer-events: none;
position: absolute;
}
.homepage-hero-cards-item-inner {
transform-style: preserve-3d;
transition: 0.4s ease-out;
text-decoration: none;
cursor: default;
-webkit-tap-highlight-color: transparent;
}
.homepage-hero-cards-content-wrapper {
transition: 0.6s ease-in-out;
transform-style: preserve-3d;
}
.homepage-hero-cards-content-front {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.homepage-hero-cards-header {
display: flex;
align-items: center;
}
.homepage-hero-cards-icon {
margin-right: 9px;
position: relative;
flex-shrink: 0;
}
.homepage-hero-cards-icon::after {
content: "";
display: block;
width: calc(100% + 8px);
height: calc(100% + 8px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-6deg);
background-color: #fff;
z-index: 1;
border-radius: 7px;
}
.homepage-hero-cards-icon-wrapper {
position: relative;
z-index: 2;
background-color: #EEEFF2;
display: flex;
width: 52px;
height: 52px;
align-items: center;
justify-content: center;
border-radius: 7px;
}
.homepage-hero-cards-icon-wrapper img {
width: 24px;
height: 24px;
-o-object-fit: contain;
object-fit: contain;
}
.homepage-hero-cards-title {
font-size: 18px;
font-weight: 700;
color: #313C4E;
line-height: 1.2;
flex-grow: 1;
}
.homepage-hero-cards-title span {
color: #2B5DA2;
background-color: #fff;
padding-left: 5px;
padding-right: 5px;
border-radius: 4px;
}
.homepage-hero-cards-arrow {
transition: 0.4s ease-out;
position: absolute;
top: -16px;
right: -16px;
z-index: 6;
width: 40px;
height: 40px;
background-color: #F3F4F7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #2B5DA2;
}
.homepage-hero-cards-arrow img {
width: 20px;
height: 20px;
-o-object-fit: contain;
object-fit: contain;
}
.homepage-hero-cards-arrow svg {
width: 20px;
height: 20px;
-o-object-fit: contain;
object-fit: contain;
}
.homepage-hero-cards-arrow:hover {
background-color: #2B5DA2;
color: #fff;
}
.homepage-hero-cards-body {
margin-top: 10px;
}
.homepage-hero-cards-text {
font-size: 14px;
color: #65738B;
line-height: 1.35;
}
.homepage-hero-row {
display: flex;
gap: 16px;
justify-content: space-between;
align-items: flex-end;
}
.mobile-fixed-block-button {
flex-grow: 1;
}
.mobile-fixed-block-button .button {
width: 100%;
}
.trustpilot {
display: flex;
align-items: center;
gap: 12px;
}
.trustpilot-fixed {
z-index: 10;
position: fixed;
left: calc((100vw - 1360px) / 2);
bottom: 60px;
}
.trustpilot svg {
flex-shrink: 0;
width: 32px;
height: 32px;
}
.trustpilot-text {
max-width: 240px;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
.trustpilot-text a {
color: #2B5DA2;
text-decoration: none;
}
.video-fixed {
z-index: 10;
position: fixed;
right: calc((100vw - 1360px) / 2);
bottom: 30px;
}
.video-text {
text-align: center;
margin-bottom: 10px;
font-size: 18px;
font-weight: 700;
color: #313C4E;
}
.video-link {
display: flex;
position: relative;
}
.video-link img {
width: 250px;
height: 137px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 14px;
}
.video-link svg {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
.homepage-hero-cards-content-back {
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 4;
background-color: #313C4E;
}
.homepage-hero-cards-content-back .homepage-hero-cards-title {
color: #fff;
}
.homepage-hero-cards-content-back .homepage-hero-cards-title span {
color: #fff;
background-color: #2B5DA2;
}
.homepage-hero-cards-content-back .homepage-hero-cards-text {
color: #fff;
}
.homepage-hero-row {
display: none;
}
.mobile-fixed-block-button {
display: none;
}
}
@media (min-width: 960px) {
.homepage-hero {
min-height: 100dvh;
}
.homepage-hero-container {
display: flex;
}
.homepage-hero-circle {
display: none;
}
.homepage-hero-content:not(.active) .homepage-hero-content-overlay {
width: calc(100% + 170px);
}
.homepage-hero-content:not(.active) .homepage-hero-title {
transform: translate(-100px, -4px);
}
.homepage-hero-content:not(.active) .homepage-hero-text {
transform: translate(-100px, 8px);
}
.homepage-hero-content:not(.active) .homepage-hero-button {
transform: translate(-70px, 8px);
}
.homepage-hero-cards {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 6;
}
.homepage-hero-cards-item {
position: absolute;
width: 295px;
}
.homepage-hero-cards-item:hover {
height: auto !important;
}
.homepage-hero-cards-item.homepage-hero-cards-item-1 {
top: 16%;
left: 8%;
}
.homepage-hero-cards-item.homepage-hero-cards-item-2 {
top: 16%;
right: 8%;
}
.homepage-hero-cards-item.homepage-hero-cards-item-3 {
top: 54%;
right: 2%;
}
.homepage-hero-cards-item.homepage-hero-cards-item-4 {
top: 80%;
left: calc(50% - 142px);
}
.homepage-hero-cards-item.homepage-hero-cards-item-5 {
top: 54%;
left: 2%;
}
.homepage-hero-cards-item:not(.visible).homepage-hero-cards-item-1 .homepage-hero-cards-arrow,
.homepage-hero-cards-item:not(.visible).homepage-hero-cards-item-1 .homepage-hero-cards-item-inner {
transform: rotate(-22deg) translate(-164px, -8px);
opacity: 0;
pointer-events: none;
}
.homepage-hero-cards-item:not(.visible).homepage-hero-cards-item-2 .homepage-hero-cards-arrow,
.homepage-hero-cards-item:not(.visible).homepage-hero-cards-item-2 .homepage-hero-cards-item-inner {
transform: rotate(28deg) translate(115px, -104px);
opacity: 0;
pointer-events: none;
}
.homepage-hero-cards-item:not(.visible).homepage-hero-cards-item-3 .homepage-hero-cards-arrow,
.homepage-hero-cards-item:not(.visible).homepage-hero-cards-item-3 .homepage-hero-cards-item-inner {
transform: rotate(-26deg) translate(159px, 140px);
opacity: 0;
pointer-events: none;
}
.homepage-hero-cards-item:not(.visible).homepage-hero-cards-item-4 .homepage-hero-cards-arrow,
.homepage-hero-cards-item:not(.visible).homepage-hero-cards-item-4 .homepage-hero-cards-item-inner {
transform: rotate(-10deg) translate(-13px, 160px);
opacity: 0;
pointer-events: none;
}
.homepage-hero-cards-item:not(.visible).homepage-hero-cards-item-5 .homepage-hero-cards-arrow,
.homepage-hero-cards-item:not(.visible).homepage-hero-cards-item-5 .homepage-hero-cards-item-inner {
transform: rotate(29deg) translate(-71px, -28px);
opacity: 0;
}
.homepage-hero-cards-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.homepage-hero-cards-item-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.homepage-hero-cards-item-inner:hover .homepage-hero-cards-content-wrapper {
transform: rotateY(180deg);
}
.homepage-hero-cards-item-inner.active .homepage-hero-cards-content-wrapper {
transform: rotateY(180deg);
}
.homepage-hero-cards-content-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
@media (max-width: 1900px) {
.video-link img {
width: 210px;
height: 112px;
}
}
@media (max-width: 1439.98px) {
.homepage-hero-container {
min-height: min(100dvh, 900px);
}
.homepage-hero-circle {
width: 638px;
height: 638px;
}
.homepage-hero-arrows {
width: 800px;
height: 800px;
}
}
@media (max-width: 1400px) {
.trustpilot-fixed {
position: absolute;
left: 0;
bottom: 40px;
}
.video-fixed {
position: absolute;
right: 0;
bottom: 40px;
}
}
@media (max-width: 1023.98px) {
.trustpilot-fixed {
display: none;
}
.video-fixed {
display: none;
}
}
@media (max-width: 959.98px) {
.homepage-hero-container {
min-height: calc(100dvh - 100px);
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 56px;
box-sizing: border-box;
}
.homepage-hero-circle {
top: 0;
transform: translate(-50%, -200px);
}
.homepage-hero-arrows {
display: none;
}
.homepage-hero-content {
z-index: 4;
}
.homepage-hero-cards {
margin-top: 50px;
position: relative;
z-index: 6;
padding-bottom: 110px;
}
.homepage-hero-cards-item {
flex-basis: calc((100% - 20px) / 3);
}
.homepage-hero-cards-item.homepage-hero-cards-item-3,
.homepage-hero-cards-item.homepage-hero-cards-item-4 {
flex-basis: calc((100% - 10px) / 2);
}
.homepage-hero-cards-content {
margin-left: auto;
margin-right: auto;
height: auto !important;
}
.homepage-hero-cards-item-inner {
transition: 0.4s ease-out;
height: auto !important;
}
}
@media (max-width: 767.98px) {
.homepage-hero-title {
font-size: 28px;
}
.homepage-hero-text {
font-size: 14px;
}
.homepage-hero-button {
margin-top: 30px;
}
.homepage-hero-button .button {
width: 100%;
padding-left: 8px;
padding-right: 8px;
max-width: 330px;
}
.homepage-hero-cards {
padding-left: 16px;
padding-right: 16px;
}
.homepage-hero-cards-item {
position: relative;
}
.homepage-hero-cards-item:not(:last-child) {
margin-bottom: 25px;
}
.homepage-hero-cards-content-front {
border-radius: 14px 14px 0 0;
padding-bottom: 10px;
}
.homepage-hero-cards-content-back {
position: relative;
border-radius: 0 0 14px 14px;
padding-top: 10px;
}
.homepage-hero-cards-content-back::before {
content: "";
width: calc(100% - 32px);
background-color: #CFD2D9;
height: 1px;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
transition: 0.3s;
}
.homepage-hero-cards-content-back::after {
display: none;
}
.homepage-hero-cards-content-back .homepage-hero-cards-header {
display: none;
}
.homepage-hero-cards-content-back .homepage-hero-cards-body {
margin-top: 0;
}
.homepage-hero-cards-title {
font-size: 16px;
}
.homepage-hero-cards-text {
font-size: 13px;
}
.mobile-fixed-block {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
padding: 15px;
box-sizing: border-box;
background-color: #fff;
box-shadow: -2px -5px 4px 0 rgba(43, 93, 162, 0.08);
display: flex;
gap: 16px;
justify-content: space-between;
align-items: center;
transition: 0.3s;
}
.mobile-fixed-block:not(.active) {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.mobile-fixed-block .video {
flex-shrink: 0;
}
.mobile-fixed-block .video-link img {
width: 100px;
height: 54px;
}
.mobile-fixed-block .video-text {
display: none;
}
.mobile-fixed-block .trustpilot {
display: none;
}
.trustpilot-fixed {
display: flex;
position: static;
margin-bottom: 0 !important;
}
.trustpilot svg {
width: 24px;
height: 24px;
}
.trustpilot {
margin-bottom: 16px;
}
.trustpilot-text {
font-size: 14px;
max-width: 160px;
}
.video-fixed {
display: block;
position: static;
}
.video-text {
font-size: 14px;
}
.video-link img {
width: 110px;
height: 66px;
border-radius: 9px;
}
.video-link svg {
width: 24px;
height: 24px;
}
}
@media (min-width: 768px) and (max-width: 959.98px) {
.homepage-hero-cards {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.homepage-hero-cards-content::after {
display: none;
}
.homepage-hero-cards-content-back {
display: none;
}
.homepage-hero-cards-arrow {
display: none;
}
}
@media (min-width: 960px) and (max-width: 1439.98px) {
.homepage-hero-cards-item.homepage-hero-cards-item-1 {
top: 16%;
left: 10%;
}
.homepage-hero-cards-item.homepage-hero-cards-item-2 {
top: 16%;
right: 10%;
}
.homepage-hero-cards-item.homepage-hero-cards-item-3 {
top: 56%;
right: 5%;
}
.homepage-hero-cards-item.homepage-hero-cards-item-4 {
top: 73%;
}
.homepage-hero-cards-item.homepage-hero-cards-item-5 {
top: 56%;
left: 5%;
}
}
@media (min-width: 960px) and (max-width: 1150px) {
.homepage-hero-cards-item.homepage-hero-cards-item-1 {
top: 16%;
left: 6%;
}
.homepage-hero-cards-item.homepage-hero-cards-item-2 {
top: 16%;
right: 6%;
}
.homepage-hero-cards-item.homepage-hero-cards-item-3 {
top: 60%;
right: 0%;
}
.homepage-hero-cards-item.homepage-hero-cards-item-5 {
top: 60%;
left: 0%;
}
}
@media(min-width: 768px) {
.homepage-hero-title {
margin-left: auto;
margin-right: auto;
}
.homepage-hero-text {
max-width: 440px;
margin-left: auto;
margin-right: auto; 
}  
}
@media(min-width: 1360px) {
.homepage-hero-title {
max-width: 440px;
}
}
@media(max-width: 1359px) {
.homepage-hero-title {
font-size: 30px;
}
}
@media(max-width: 1280px) {
.homepage-hero-title {
font-size: 26px;
}
}
@media(min-width: 768px) and (max-width: 1359px) {
.homepage-hero-title {
max-width: 330px;
}
.homepage-hero-text {
font-size: 14px;
max-width: 400px;
}
.homepage-hero-button {
margin-top: 20px;
}
.homepage-hero-button .button {
font-size: 13px;
padding-left: 20px;
padding-right: 20px;
height: 44px;
}
}