/* HooskaiChamferedSquare */
@font-face {
font-family: 'Hooskai Chamfered Square';
src: url('https://api.rus2design.ru/files/fonts/HooskaiChamferedSquare.ttf');
}
/* Gotham Pro */
@font-face {
font-family: 'Gotham Pro';
src: url('https://api.rus2design.ru/files/fonts/GothamPro-BoldItalic.ttf');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Gotham Pro';
src: url('https://api.rus2design.ru/files/fonts/GothamPro-Italic.ttf');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Gotham Pro';
src: url('https://api.rus2design.ru/files/fonts/GothamPro-Medium.ttf');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gotham Pro';
src: url('https://api.rus2design.ru/files/fonts/GothamPro-BlackItalic.ttf');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Gotham Pro';
src: url('https://api.rus2design.ru/files/fonts/GothamPro-Bold.ttf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Gotham Pro Narrow';
src: url('https://api.rus2design.ru/files/fonts/GothamProNarrow-Bold.ttf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Gotham Pro Narrow';
src: url('https://api.rus2design.ru/files/fonts/GothamProNarrow-Medium.ttf');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gotham Pro';
src: url('https://api.rus2design.ru/files/fonts/GothamPro-LightItalic.ttf');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Gotham Pro';
src: url('https://api.rus2design.ru/files/fonts/GothamPro-Light.ttf');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Gotham Pro';
src: url('https://api.rus2design.ru/files/fonts/GothamPro-Black.ttf');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Gotham Pro';
src: url('https://api.rus2design.ru/files/fonts/GothamPro.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gotham Pro';
src: url('https://api.rus2design.ru/files/fonts/GothamPro-MediumItalic.ttf');
font-weight: 500;
font-style: italic;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: 'Gotham Pro', sans-serif;
font-size: 14px;
line-height: 140%;
color: #000;
overflow-x: hidden;
background: #fff;
}
body::-webkit-scrollbar {
display: none;
}
a {
color: unset;
text-decoration: none !important;
}
li {
list-style-type: none;
}
img {
object-fit: cover;
vertical-align: middle;
border-style: none;
}
input[type=checkbox] {
visibility: hidden;
}
.container {
max-width: 1470px;
padding: 0 25px;
width: 100%;
position: relative;
margin: 0px auto;
@media(max-width:480px){
padding: 0 12px;
}
}
// drop-down
.dropbtn {
background-color: transparent;
transition: .25s ease all;
// padding: 16px;
color: black;
font-size: 16px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
svg {
transition: .25s ease all;
}
}
/* The container
- needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background: linear-gradient(94deg, #CBD0FF 0%, #E2EDFF 42.19%, #F3F7FF 100%);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 12PX;
overflow: hidden;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
// .dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn svg {
transform: rotate(45deg);
}
// header
.header {
position: relative;
width: 100%;
z-index: 150;
transition: .25s ease all;
backdrop-filter: blur(0);
background: linear-gradient(94deg, #CBD0FF 0%, #E2EDFF 42.19%, #F3F7FF 100%);
top: 0;
&.scrolled {
// backdrop-filter: blur(5px);
// box-shadow: 0px 8px 8px rgba(162, 160, 160, 0.1);
}
@media(max-width:992px){
background: transparent;
position: fixed;
}
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
transition: 0.25s ease all;
&.scrolled2 {
// padding:12px 0 ;
}
.header-links {
display: flex;
// align-items: center;
justify-content: space-between;
width: 100%;
gap: 12px;
@media (max-width: 992px) {
display: none;
}
._item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
max-width: 110px;
.pic {
display: flex;
position: relative;
box-shadow: 4px 4px 14px 0px rgba(0, 0, 0, 0.1);
border-radius: 12px;
overflow: hidden;
width: 100%;
img {
width: 100%;
}
}
p {
border-radius: 8px;
background: linear-gradient(
272deg,
rgba(255, 255, 255, 0.5) -65.15%,
rgba(255, 255, 255, 0) 86.4%
);
box-shadow: 4px 4px 14px 0px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(35px);
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 110%;
text-transform: uppercase;
width: 100%;
height: 2.33em;
display: flex;
justify-content: center;
align-items: center;
color: black;
}
}
.header-socials {
display: flex;
flex-direction: column;
gap: 12px;
a {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
// filter: drop-shadow(12px 5px 27px rgba(0, 0, 0, 0.19)) drop-shadow(46px 18px 50px rgba(0, 0, 0, 0.17)) drop-shadow(105px 41px 67px rgba(0, 0, 0, 0.10)) drop-shadow(186px 73px 80px rgba(0, 0, 0, 0.03)) drop-shadow(291px 113px 87px rgba(0, 0, 0, 0.00));
img {
width: 100%;
}
}
}
}
.__right {
justify-content: space-between;
align-items: center;
width: 100%;
display: none;
.regictration-btn {
color: #fff;
font-family: Gotham Pro;
font-size: clamp(13px, 0.8vw, 17px);
font-style: normal;
font-weight: 400;
line-height: normal;
display: flex;
width: 160px;
height: 49px;
padding: 24px 72px;
justify-content: center;
align-items: center;
border-radius: 40px;
border-radius: 40px;
background: rgba(158, 11, 55, 0.7);
box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.5) inset,
4px 4px 20px 0px rgba(223, 80, 23, 0.8);
@media (max-width: 992px) {
width: auto;
height: auto;
padding: 12px 32px;
}
&.hide {
@media (max-width: 480px) {
display: none;
}
}
}
.header-socials {
display: flex;
align-items: center;
gap: 20px;
a {
width: 60px;
img {
width: 100%;
}
}
}
@media (max-width: 992px) {
justify-content: space-between;
display: flex;
}
@media (max-width: 480px) {
justify-content: space-between;
width: 100%;
}
}
@media (max-width: 992px) {
justify-content: flex-end;
}
@media (max-width: 480px) {
justify-content: space-between;
}
}
/* BURGER */
.burger-block {
display: none;
@media (max-width:992px){
display: flex;
width: 50px;
height: 50px;
background: linear-gradient(94deg, #CBD0FF 0%, #E2EDFF 42.19%, #F3F7FF 100%);
border-radius: 18px;
padding: 11px 10px;
}
}
#nav-icon {
display: flex;
width: 60px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
// box-shadow: 4px 4px 10px 0px;
cursor: pointer;
z-index: 1000;
span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: black;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}
}
// #nav-icon:hover span{
// background: #FD4D00!important;
// }
#nav-icon span:nth-child(1) {
top: 2px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 13px;
}
#nav-icon span:nth-child(4) {
top: 24px;
}
#nav-icon.open span:nth-child(1) {
top: 2px;
width: 0%;
right: 1%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 14px;
width: 0%;
right: 1%;
}
/* ______ */
/* burger menu */
.burger__menu__container {
position: fixed;
top: 0;
width: 100%;
right: 0;
height: 100vh;
overflow: hidden;
padding: 0 6px 12px;
// background: rgba(34, 33, 33, 1);
// background: linear-gradient(94deg, #091928 0%, #42B5E7 54.17%, #112843 100%);
background: linear-gradient(94deg, #CBD0FF 0%, #E2EDFF 42.19%, #F3F7FF 100%);
backdrop-filter: blur(2px)!important;
-webkit-backdrop-filter: blur(2px);
box-shadow: 8px 8px 20px rgb(0 0 0 / 7%);
background-size: 200% 200%;
transition: all .7s ease;
z-index: 114;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateY(-100vh);
padding-top: 10vh;
// div {
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: flex-start;
// gap:24px;
// }
}
.header-links {
display: flex;
flex-wrap:wrap;
// align-items: center;
justify-content: space-evenly;
width: 100%;
gap: 6px;
// @media(max-width:992px){
// display: none;
// }
._item {
display: flex;
flex-direction: column;
align-items: center;
gap:8px;
max-width: 135px;
@media(max-width:380px){
max-width: 105px;
}
.pic {
display: flex;
position: relative;
box-shadow: 4px 4px 14px 0px rgba(0, 0, 0, 0.10);
border-radius: 24px;
overflow: hidden;
width: 100%;
img {
width: 100%;
}
}
p {
border-radius: 14px;
background: linear-gradient(272deg, rgba(255, 255, 255, 0.50) -65.15%, rgba(255, 255, 255, 0.00) 86.4%);
box-shadow: 4px 4px 14px 0px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(35px);
text-align: center;
font-size: clamp(16px,1.2vw,20px);
font-style: normal;
font-weight: 400;
line-height: 22px; /* 110% */
text-transform: uppercase;
width: 100%;
height: 38px;
display: flex;
justify-content: center;
align-items: center;
}
}
.header-socials {
display: flex;
flex-direction: column;
gap: 16px;
a {
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(12px 5px 27px rgba(0, 0, 0, 0.19)) drop-shadow(46px 18px 50px rgba(0, 0, 0, 0.17)) drop-shadow(105px 41px 67px rgba(0, 0, 0, 0.10)) drop-shadow(186px 73px 80px rgba(0, 0, 0, 0.03)) drop-shadow(291px 113px 87px rgba(0, 0, 0, 0.00));
}
}
}
.row {
flex-direction: row!important;
}
.top__contacts {
display: flex;
justify-content: center;
width: 100%;
ul {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
width: 80%;
font-style: normal;
font-size: 20px;
line-height: 24px;
text-align: center;
li a {
display: flex;
align-items: center;
gap: 12px;
svg path{
fill: #333333;
}
p {
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 23px;
white-space: nowrap;
}
}
}
}
._open_up {
transform: translateY(0);
}
.top__navigation__hidden {
display: flex;
flex-direction: column;
align-items: center;
}
.toplink_h {
padding: 8px;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 21px;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.hidden_catalog {
display: flex;
flex-direction: column;
align-items: center;
}
.hidden_catalog a {
padding: 8px;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 21px;
letter-spacing: 0.2em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 1rem;
}
/* */
// keyframes
.main-banner {
position: relative;
background: #09101A;
z-index: 1;
overflow: hidden;
.main-banner-element {
position: absolute;
img {
width: 100%;
height: 100%;
}
&.insta-left {
left: 0;
bottom: 12%;
transform: translateY(-15%);
width: calc(95% - 88vw);
z-index: 4;
img {
animation: toTheLeft 4s linear infinite;
}
}
&.insta-right {
right: 0;
top: 25%;
transform: translateY(-50%);
width: calc(95% - 88vw);
z-index: 4;
img {
animation: toTheRight 5s linear infinite;
}
}
&.main-banner-lady{
bottom: 0;
right: 0;
z-index: 2;
height: 100%;
width: 100%;
img {
width: unset!important;
object-fit: cover;
}
.section-benefits__video {
width: 100%;
height: 100%;
object-fit: cover;
@media(max-width:1024px){
object-position: left;
}
}
@media(max-width:1450px){
// right: -35vh;
}
}
}
.main-banner-wrap {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 5;
width: 100%;
height: 100vh;
max-height: 1020px;
padding-top: 100px;
.main-banner_left{
display: flex;
width: 50%;
.main-banner_left_text {
display: flex;
flex-direction: column;
.title-block {
display: flex;
flex-direction: column;
gap: 22px;
@media(max-width: 480px){
gap: 10px;
}
.above-title {
display: flex;
align-items: center;
gap: 12px;
.line {
position:relative;
width: fit-content;
height: 2px;
background: rgba(255, 255, 255, .8);
display: flex;
flex: 1;
&:before{
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M5 4.3L0 0.958548V9.04145L5 4.3Z' fill='white'/%3E%3C/svg%3E ");
width: 10px;
height: 10px;
top: 50%;
transform: translateY(-50%);
left: 0;
content: '';
display: flex;
}
}
p {
font-size: clamp(15px,1.8vw,31px);
font-style: normal;
font-weight: 100;
line-height: 110%;
text-transform: uppercase;
color: white;
span {
font-weight: 700;
}
}
}
h1 {
color: #FFF;
font-family: Hooskai Chamfered Square;
font-size: clamp(33px,4vw,72px);
font-style: normal;
font-weight: 700;
line-height: 110%;
text-transform: uppercase;
display: flex;
flex-direction: column;
p {
display: flex;
align-items: center;
gap: 6px;
span {
position:relative;
width: fit-content;
height: 2px;
background: rgba(255, 255, 255, .8);
display: flex;
flex: 1;
&:before{
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M5 4.3L10 0.958548V9.04145L5 4.3Z' fill='white'/%3E%3C/svg%3E ");
width: 10px;
height: 10px;
top: 50%;
transform: translateY(-50%);
right: 0;
content: '';
display: flex;
}
}
}
@media(max-width:480px){
letter-spacing: 2px;
// align-self: center;
}
}
.under-title {
p {
color: #fff;
font-size: clamp(15px,1.1vw,19.391px);
font-style: normal;
font-weight: 100;
line-height: 110%; /* 21.33px */
letter-spacing: 7.562px;
text-transform: uppercase;
span {
font-weight: 700;
}
}
}
.taglines-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
p {
color: #FFF;
font-size: clamp(20px,2.8vw,37px);
font-style: normal;
font-weight: 400;
text-transform: uppercase;
line-height: 1;
@media(min-width: 480px){
br {display: none;}
}
@media(max-width: 480px){
letter-spacing: 2px;
font-weight: 100;
line-height: 1.2;
}
}
}
}
.percents-block {
display: flex;
justify-content: space-between;
margin-top: clamp(24px,3.6vw,72px);
width: fit-content;
.percents-block-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
h3 {
color: #FFF;
font-size:clamp(20px,1.8vw,36px);
font-style: normal;
font-weight: 400;
line-height: 120%;
}
p {
color: #FFF;
text-align: center;
font-size: clamp(13px,.7vw,16px);
font-style: normal;
font-weight: 400;
line-height: 120%; /* 19.2px */
}
}
span {
position: relative;
width: 1px;
background-color: white;
margin-left: 42px;
margin-right: 42px;
@media(max-width:480px){
margin-left: 12px;
margin-right: 12px;
display: none;
}
}
@media(max-width:480px){
gap:23px;
}
}
.main-button-block {margin-top: clamp(44px,6.6vw,120px);}
@media(max-width:480px){
justify-content: space-between;
.bottom-part {
display: flex;
flex-direction: column-reverse;
align-items: center;
}
}
}
@media(max-width:768px){
width: 100%;
}
@media(max-width:480px){
height: 100%;
justify-content: center;
}
}
@media(max-width:480px){
align-items:flex-end;
padding-bottom: 5%;
padding-top: 135px;
}
}
}
.main-banner-vd {
position: absolute;
width:100%;
height:100%;
top: 0;
left: 0;
video {
object-fit: cover;
width: 100%;
height: 100%;
// @media(max-width:480px){
// object-position: -100vh;
// }
}
}
.main-bottom-block {
margin-top: clamp(44px,6.6vw,120px);
display: flex;
flex-direction: column;
gap: 36px;
.main-bottom-block-text {
display: flex;
flex-direction: column;
gap: 10px;
p {
color: #FFF;
font-family: Gotham Pro;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 110%; /* 22px */
text-transform: uppercase;
}
h3 {
color: #FFF;
font-family: Gotham Pro;
font-size: 31px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 34.1px */
text-transform: uppercase;
}
@media(max-width:480px){
align-items: center;
gap: 6px;
p {
font-size: 16px;
font-weight: 100;
}
h3{
font-size: 20px;
}
}
}
@media(max-width:480px){
flex-direction: column-reverse;
gap: 24px;
}
}
@media (max-width:480px){
.section-desctop__video {
display:none;
}
}
@media (min-width:480px){
.section-mobile__video {
display:none;
}
}
.button-block {
display: flex;
align-items: center;
.btn-get-style {
color: white;
gap: 42px;
max-width: 381px;
white-space: nowrap;
font-family: Gotham Pro;
font-size: clamp(12px, 1.6vw, 24px);
font-style: normal;
font-weight: 400;
line-height: normal;
display: flex;
padding: 24px 52px;
justify-content: center;
align-items: center;
border-radius: 50px;
background: linear-gradient(91deg, #8D00FF 0.18%, #CF3DFF 99.84%);
box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px rgba(89, 0, 164, 0.80);
svg{transition: .25s ease all;}
&:hover > svg{
transform: translateX(5px);
}
}
@media(max-width:480px){
justify-content: center;
.btn-get-style {
padding: 15px 16px;
width: 100%;
gap:20px;
width: 220px;
font-weight: 700;
text-transform: uppercase;
svg {
width: 33px;
}
}
}
}
.section-mini {
position: relative;
padding: 35px 0;
@media(max-width:480px) {
padding: 16px 0;
}
}
.section-center-header-middle{
display: flex;
align-items: center;
justify-content: center;
.section-center-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: fit-content;
gap: 14px;
position: relative;
h2{
color: #FFF;
font-family: Gotham Pro;
font-size: clamp(23px,1.8vw,36px);
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
span{
text-align: center;
font-family: Hooskai Chamfered Square;
font-size: clamp(27px,4.2vw,60px);
font-style: normal;
font-weight: 400;
line-height: normal;
background: linear-gradient(96deg, #00A1C9 0%, #78D1FF 48.01%, #E8F7FF 99.11%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
p {
width: 100%;
position: relative;
border-radius: 20px;
background: linear-gradient(181deg, rgba(3, 125, 155, 0.00) -88.87%, #037D9B 99.4%);
box-shadow: 0px 0px 13px 0px rgba(8, 212, 236, 0.70);
height: 2px;
display: flex;
align-items: center;
}
@media(max-width:480px){
h2 {
display: flex;
flex-direction: column;
align-items: center;
span {
margin-bottom: 12px;
}
}
p {
position: absolute;
bottom: 35%;
}
}
}
}
.section-header-bottom {
display: flex;
align-items: center;
justify-content: center;
.section-header-bottom-wrap {
display: flex;
flex-direction: column;
align-items: center;
h2 {
text-align: center;
font-size: clamp(25px,2.2vw,40px);
font-style: normal;
font-weight: 400;
line-height: 140%;
color: #646464;
// background: linear-gradient(96deg, #00A1C9 0%, #78D1FF 48.01%, #E8F7FF 99.11%);
// background-clip: text;
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
}
h3 {
color: #FFF;
text-align: center;
font-size: clamp(23px,1.5vw,30px);
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
}
}
}
.section-photostocks{
background: linear-gradient(85deg, #EEE 2.54%, #CFCFEE 11.54%, #8785F3 24.89%, #5C59F5 37.04%, #C89DFF 83.03%, #EEE 113.14%);
}
.section-photostocks-bckg {
position: absolute;
width: 100%;
height: 100%;
}
@media(min-width:1024px){
.breaking{
display: none;
}
}
.section-photostocks-wrap {
display: flex;
flex-direction: column;
gap: clamp(18px,1.7vw,32px);
p {
font-size:clamp(16px,1.6vw,24px);
color: white;
font-style: normal;
font-weight: 400;
line-height: 140%;
&.centered {
text-align: center;
}
&.uppertext{
white-space: nowrap;
text-transform: uppercase;
font-weight: 500;
span {
font-family: Hooskai Chamfered Square;
font-size:clamp(20px,1.8vw,30px);
}
@media(max-width:1024px){
white-space: unset;
}
}
}
.section-photostocks-wrap-items {
display: flex;
align-items: center;
justify-content: center;
gap:22px;
overflow: scroll;
padding: 12px 0;
.item {
display: flex;
width: 100%;
max-width: 225px;
border-radius: 12px;
padding: 0 12px 10px 0;
flex: 1 0 auto;
img {
width: 100%;
height: 100%;
filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.25));
}
}
&::-webkit-scrollbar {
display: none;
}
@media(max-width:1024px){
justify-content: flex-start;
}
@media(max-width:768px){
flex-wrap: wrap;
justify-content: center;
.item {
padding: 0;
flex: 1 0 45%;
img {
filter: unset;
}
}
}
}
@media(max-width:768px){
margin: 16px 0;
}
}
.process-block {
display: flex;
align-items: center;
height: 840px;
.left {
display: flex;
width: 50%;
flex: 1 0 auto;
max-width: 715px;
img {
width: 100%;
height: 100%;
}
@media(max-width:480px){
width: 100%;
}
}
.right {
display: flex;
flex-direction: column;
gap: 35px;
position: relative;
.process-item {
display: flex;
gap: 32px;
&:nth-child(1){transform: translateX(-17%);}
&:nth-child(2){transform: translateX(-5%);}
&:nth-child(3){transform: translateX(0);}
&:nth-child(4){transform: translateX(0);}
&:nth-child(5){transform: translateX(-5%);}
&:nth-child(6){transform: translateX(-17%);}
.icon {
width: 100%;
max-width: clamp(40px,4.8vw,90px);
height: clamp(40px,4.8vw,90px);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(86deg, #00A3FF 2.45%, #551CB2 98.15%);
box-shadow: 0px 0px 3px 6px rgba(255, 255, 255, 0.26) inset;
filter: drop-shadow(7px 7px 13px rgba(0, 0, 0, 0.15));
border-radius: 50%;
svg {
width: 50%;
}
}
.text {
display: flex;
flex-direction: column;
h4 {
font-size:clamp(16px,1.6vw,26px);
font-style: normal;
font-weight: 700;
line-height: 140%;
text-transform: uppercase;
color: #5F59CC;
// background: linear-gradient(96deg, #BC94FF 0%, #89BFFF 48.01%, #E8F7FF 99.11%);
// background-clip: text;
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
}
p {
color: #000;
font-family: Gotham Pro;
font-size: clamp(15px,0.9vw,17px);
font-style: normal;
font-weight: 100;
line-height: 120%;
}
}
}
}
@media(max-width:1200px){
height: 100%;
flex-direction: column;
.right {
gap: 20px;
.process-item {
gap: 20px;
&:nth-child(1){transform: unset;}
&:nth-child(2){transform: unset;}
&:nth-child(3){transform: unset;}
&:nth-child(4){transform: unset;}
&:nth-child(5){transform: unset;}
&:nth-child(6){transform: unset;}
}
}
}
@media(max-width:480px){
margin-top: 24px;
}
}
.gadget-girl-desc{
@media(max-width: 480px){
display: none;
}
}
.gadget-girl-mob{
@media(min-width: 481px){
display: none;
}
}
.section-ready-material {
position: relative;
padding: 40px 0;
background: linear-gradient(85deg, #EEE 0%, #C833ED 23.14%, #7B76DE 36.83%, #8DC3EA 75.19%, #EEE 97.55%);;
}
.ready-material-block{
display: flex;
justify-content: space-between;
gap: 1rem;
.left {
display: flex;
flex-direction: column;
width: 50%;
max-width: 580px;
.left-title {
display: flex;
flex-direction: column;
gap: 2px;
h4 {
color: #FFF;
font-size: clamp(29px,2.8vw,49px);
font-style: normal;
font-weight: 700;
line-height: 140%; /* 68.6px */
text-transform: uppercase;
}
p {
color: #FFF;
font-size: clamp(16px,1.2vw,20px);
font-style: normal;
font-weight: 700;
line-height: 140%; /* 28px */
text-transform: uppercase;
}
@media(max-width:480px){
text-align: center;
}
}
.left-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
margin-top: clamp(20px,1.6vw,33px);
.item {
display: flex;
width: 100%;
max-width: 268px;
border-radius: 12px;
padding: 0 12px 10px 0;
flex: 1 0 45%;
img {
width: 100%;
height: 100%;
filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.25));
}
}
@media(max-width:480px){
gap: 15px 20px;
.item {
max-width: 100%;
padding: 0;
}
}
}
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 50%;
.title-block {
display: flex;
flex-direction: column;
h4 {
color: #FFF;
font-size: clamp(29px,2.8vw,49px);
font-style: normal;
font-weight: 700;
line-height: 140%; /* 68.6px */
}
p {
color: #FFF;
font-size: clamp(20px,1.4vw,22px);
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
}
@media(max-width:480px){
text-align: center;
}
}
.right-button-block {
position: relative;
padding: 9px 24px;
width: 100%;
max-width: 380px;
display: flex;
align-items: center;
border-radius: 52px;
border: 2px solid #FFF;
box-shadow: 4px 4px 20px 0px rgba(255, 255, 255, 0.20);
p {
color: #FFF;
font-size: clamp(16px,1.2vw,20px);
font-style: normal;
font-weight: 700;
line-height: 140%; /* 28px */
text-transform: uppercase;
}
a {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 75px;
height: 75px;
border-radius: 50%;
right: 0;
background: linear-gradient(91deg, #8D00FF 0.18%, #CF3DFF 99.84%);
box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px rgba(89, 0, 164, 0.80);
transition: .3s ease-in-out all;
svg {
transition: .3s ease-in-out all;
}
}
&:hover a {
transform: translateX(5px);
box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.65) inset, 4px 4px 12px 2px rgba(89, 0, 164, 0.80);
}
&:hover a svg {
transform: scale(1.1);
}
@media(max-width:480px){
max-width: 100%;
padding: 5px 24px;
a {
width: 62px;
height: 62px;
}
}
}
}
@media(max-width:991px){
flex-direction: column;
.left {
width: 100%;
max-width: 100%;
}
.right{
width: 100%;
gap: 20px;
}
}
@media(max-width:480px) {
gap: 40px;
}
}
.section-resize{
margin-top: clamp(60px,8.5vw,150px);
}
.resize-block {
position: relative;
padding: 50px 80px 32px;
border-radius: 30px;
background: linear-gradient(94deg, #CBD0FF 0%, #E2EDFF 42.19%, #F3F7FF 100%);
box-shadow: 12px 7px 25px 0px rgba(0, 0, 0, 0.15);
display: flex;
justify-content: flex-end;
height: 792px;
.left {
width: 50%;
position: absolute;
left: 2%;
bottom: 0;
img {
width: 100%;
height: 100%;
}
@media(max-width:800px){
display: none;
}
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 50%;
@media(max-width:800px){
width: 100%;
gap: 20px;
}
.resize-header {
display: flex;
flex-direction: column;
gap: 10px;
@media(max-width:800px){
text-align: center;
gap: 20px;
}
h2 {
font-size: clamp(27px,2.5vw,40px);
font-style: normal;
font-weight: 700;
line-height: 24px;
color: #646464;
text-transform: uppercase;
// background: linear-gradient(94deg, #091928 0%, #003F88 100%);
// background-clip: text;
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
}
p {
color: #000;
font-family: Gotham Pro;
font-size:clamp(16px,1.2vw,20px);
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
span {
color: #F00;
font-weight: 700;
}
}
}
.resize-block-wrap {
display: flex;
width: 100%;
z-index: 3;
gap:12px;
margin-top: clamp(16px,1.8vw,32px);
@media(max-width:768px){
flex-direction: column;
align-items: center;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
gap: 6px;
.item-header {
display: flex;
align-items: center;
height: 44px;
p {
color: #646464;
text-align: center;
font-size: clamp(13px,0.8vw,16px);
font-style: normal;
font-weight: 700;
line-height: 140%; /* 22.4px */
text-transform: uppercase;
}
}
.item-pic{
position: relative;
overflow: hidden;
display: flex;
width: 100%;
flex: 1 0 auto;
.original-image,
.hover-image {
transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
}
.hover-image {
position: absolute;
top: 0;
left: 0;
transform: scale(0);
transform-origin: center center;
height: 100%;
width: 100%;
object-fit: contain;
border-radius: 12px;
}
img {
width: 100%;
object-fit: contain;
}
&:hover >.original-image {
transform: scale(0);
height: 0;
}
&:hover >.hover-image {
transform: scale(1);
height: 100%;
}
@media(max-width:800px){
height: 300px;
}
}
@media(max-width:768px){
width: 235px;
&:last-child{
display: none;
}
}
}
.mobile-stand {
display: flex;
width: 100%;
@media(min-width:801px){
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
// @media(max-width:480px){
// padding: 20px 16px;
// }
.many-bottom {
display: flex;
align-items: center;
align-self: flex-end;
p {
color: #646464;
text-align: center;
font-family: Gotham Pro;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 22.4px */
text-transform: uppercase;
}
@media(max-width:800px){
align-self: center;
}
}
}
@media(max-width:1400px){
height: 720px;
}
@media(max-width:1200px){
height: 620px;
}
@media(max-width:1024px){
height: 520px;
}
@media(max-width:800px){
height: 100%;
padding: 30px 6px 20px;
}
}
// ENDE
.opacity-picture {
opacity: 1!important;
}
.section2-button{
@media(max-width:768px){
margin-top: 1rem;
}
}
.covers-cards-wrap {
display: flex;
gap: 20px;
}
.avatars-block {
display: flex;
flex-direction: column;
gap: 32px;
.text-wrap {
flex-direction: column;
display: flex;
gap: clamp(12px,2vw,32px);
border-radius: 20px;
background: linear-gradient(94deg, #D9E1FF 0%, #F3F7FF 100%), #FAFAFA;
box-shadow: 12px 7px 25px 0px rgba(0, 0, 0, 0.15);
padding: clamp(12px,2vw,32px);
transition: 0.25s ease all;
h4 {
color: #303030;
font-size: clamp(18px,1.8vw,30px);
font-style: normal;
font-weight: 400;
line-height: 24px;
}
p {
color: #000;
font-size: clamp(14px,1.2vw,20px);
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
}
}
.icons-wrap{
display: flex;
align-items: center;
gap: 24px;
._icon {
max-width: 120px;
display: flex;
align-items: center;
img {
width: 100%;
height: 100%;
filter: drop-shadow( 4px 4px 10px rgba(0, 0, 0, 0.25););
}
}
.item{
display: flex;
align-items: center;
img {
width: 100%;
height: 100%;
filter: drop-shadow( 4px 4px 10px rgba(0, 0, 0, 0.25););
}
}
@media(max-width:480px){
flex-wrap: wrap;
justify-content: center;
._icon {
max-width: 65px;
}
}
}
&._half {
max-width: 50%;
.text-wrap {
min-height: 214px;
}
.icons-wrap {
flex-wrap: wrap;
justify-content: space-between;
align-items: unset;
height: 100%;
&.small-cards-wrap .item {
flex: 1 0 20%;
}
}
}
}
.buttons-block {
display: flex;
align-items: center;
gap: 20px;
overflow: scroll;
padding-bottom: 20px;
padding-right: 12px;
.switch__button,
.switch-resize {
max-width: 210px;
padding: 13px 36px;
border-radius: 12px;
border: 2px solid #FFF;
transition: .25s ease all;
cursor: pointer;
&.visible {
background: #FFF;
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
}
}
&::-webkit-scrollbar {
display: none;
}
}
p.context {
display: none;
&.visible {
display: block;
}
}
.section-posts-pictures {
position: relative;
display: flex;
width: 100%;
padding: 32px 0 0 0;
.__item__pic {
align-items: center;
width: 100%;
display: none;
position: relative;
&.visible {
display: flex;
}
img {
width: 100%;
height: 100%;
}
@media(max-width:480px){
height: 320px;
img{
object-position: 0;
transition: 0.25s ease all;
animation: postsMove 15s linear infinite;
&.reverse {
object-position: 100%;
animation: postsMoveRev 15s linear infinite;
}
}
}
}
}
.section-marquee {
display: flex;
flex-direction: column;
gap: 12px;
z-index: 1;
.sectionn-marquee-banner {
z-index: 3;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 590px;
padding: 32px 12px;
border-radius: 20px;
background: linear-gradient(94deg, #D9E1FF 0%, #F3F7FF 100%);
box-shadow: 12px 7px 25px 0px rgba(0, 0, 0, 0.43);
display: flex;
align-items: center;
justify-content: center;
.wrap {
display: flex;
flex-direction: column;
gap: clamp(16px,1.6vw,32px);
h3 {
color: #303030;
text-align: center;
font-family: Inter;
font-size: clamp(24px,2.2vw,40px);
font-style: normal;
font-weight: 500;
line-height: 37.968px; /* 94.921% */
}
}
@media(max-width:480px){
width: 96%;
.wrap{
width: 100%;
}
}
}
}
.marquee-block{
display: flex;
width: 100%;
align-items: center;
min-width: 0;
z-index: 2;
.marquee-slider-one{
display: flex;
.swiper-slide {
width: fit-content!important;
}
}
.marquee-slider-two{
display: flex;
.swiper-slide {
width: fit-content!important;
}
}
.item {
display: flex;
width: fit-content;
flex: 1 0 auto;
img {
width: 100%;
}
}
}
.section-header {
display: flex;
align-items: center;
justify-content: center;
h2 {
color: #303030;
font-size: clamp(25px,2.2vw,40px);
font-style: normal;
font-weight: 400;
line-height: 140%;
color: #646464;
// background: linear-gradient(96deg, #00A1C9 0%, #78D1FF 48.01%, #E8F7FF 99.11%);
// background-clip: text;
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
@media(max-width:480px){
text-align: center;
}
br {
@media(min-width:481px){
display: none;
}
}
}
&.faq-header {
margin-bottom: clamp(16px,2.2vw,32px);
}
}
/* ACCORDEON______________________________________*/
.section-faq-wrap {
display: flex;
flex-direction: column;
gap: 12px;
}
span {
cursor: pointer;
}
i {
cursor: pointer;
}
button {
background: transparent;
outline: none;
border: none;
transition: .3s ease;
}
.para-hide {
display: none;
}
button i {
font-size: 1rem;
transition: .3s ease;
}
.accordion {
border-radius: 10px;
transition: .3s ease!important;
&.shadow {
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.10);
background:#FFF;
}
}
button.btn-toggle-show {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
// background: linear-gradient(94deg, #D9E1FF 0%, #F3F7FF 100%);
background: linear-gradient(94deg, #CBD0FF 0%, #E2EDFF 42.19%, #F3F7FF 100%);
border-radius: 10px;
transition: .3s ease all;
gap: 0 12px;
&.active {
background: transparent !important;
transition: .3s ease all;
span {
text-shadow: 0px 0px 0.85px currentColor;
}
.icon__accordeon svg path {
fill: black;
}
}
@media(max-width:480px){
height: fit-content;
}
}
button.btn-toggle-show span {
font-style: normal;
font-weight: 400;
font-size: clamp(17px,0.9vw,18px);
line-height: 120%;
text-align: center;
color: #343434;
transition: .3s ease all;
@media(max-width:480px){
max-width: 250px;
text-align: left;
}
}
.p-1 {
padding: 1rem;
}
.accordion:last-child {
margin: 0;
}
.inner-content p {
color: #000;
font-size: clamp(15px,.9vw,17px);
font-style: normal;
font-weight: 400;
line-height: 140%;
@media(max-width:480px){
font-weight: 100;
}
}
.icon__accordeon {
transition: .3s ease!important;
&.rotate {
transform: rotate(90deg);;
}
}
.footer-map {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
gap: 8px;
a {
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
text-transform: uppercase;
}
}
}
footer {
padding: 72px 0;
.copyright {
display: flex;
align-items: center;
gap: 22px;
justify-content: center;
p {
color: #000;
font-family: Gotham Pro;
font-size: 11px;
font-style: normal;
font-weight: 100;
line-height: normal;
}
}
.pagelinks {
display: flex;
align-items: center;
justify-content: center;
.pagelink {
color: #000;
font-family: Gotham Pro;
font-size: 11px;
font-style: normal;
font-weight: 100;
line-height: normal;
}
}
@media(max-width:1024px){
padding: 24px 0;
}
}
// calc
.calcalator-page-style {
&.page-hidden{display: none;}
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
.calcularor-item {
display: flex;
flex-direction: column;
gap:20px;
align-items: center;
cursor: pointer;
.calc-image {
display: flex;
position: relative;
border-radius: 20px;
box-shadow: 12px 7px 25px 0px rgba(0, 0, 0, 0.15);
width: fit-content;
transition: all .3s ease;
// a {
// position: absolute;
// width: 100%;
// height: 100%;
// top: 0;
// left: 0;
// }
}
.calc-text {
display: flex;
align-items: center;
p {
color: #000;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 120% */
}
}
&:hover>.calc-image {
box-shadow: 6px 5px 15px 0px rgba(0, 0, 0, 0.5);
}
}
}
.progress-bar-for-calc {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
top: 0;
left: 2%;
width: 2px;
height: 100%;
background: linear-gradient(180deg, rgba(125, 125, 125, 0.00) 0%, #7D7D7D 47.92%, rgba(125, 125, 125, 0.00) 100%);
.item {
width: 15px;
height: 15px;
background: #7D7D7D;
border-radius: 50%;
transition: .3s ease all;
&.active {
width: 25px;
height: 25px;
background:linear-gradient(91deg, #8D00FF 0.18%, #CF3DFF 99.84%);
box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.5) inset, 4px 4px 20px rgba(89, 0, 164, 0.8);
}
}
}
.w940 {
max-width: 940px;
}
.w700 {
max-width: 700px;
}
.w580 {
max-width: 580px;
}
.w1300{
max-width: 1300px;
}
.w1180{
max-width: 1180px;
}
.section-poly {
padding: 72px 0 150px 0;
position: relative;
}
.section-poly-bckg {
position: absolute;
top: 5%;
left: 10%;
@media(max-width:1400px){
left: -20%;
}
}
.item-poly {
border-radius: 20px;
background: linear-gradient(319deg, rgba(0, 163, 255, 0.40) -9.86%, rgba(235, 235, 235, 0.00) 100%), #FFF;
box-shadow: 14px 14px 20px 0px rgba(0, 0, 0, 0.07);
padding: 42px;
position: relative;
height: fit-content;
// width: 100%;
@media(max-width:480px){
padding: 20px;
}
}
.pic-d {
@media(max-width:480px){
display: none;
}
}
.pic-m {
@media(min-width:481px){
display: none;
}
}
.poly-header {
display: flex;
align-items: center;
justify-content: space-between;
h2 {
color: #5342D6;
font-family: Gotham Pro;
font-size:clamp(36px,3vw,52px);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 52px */
text-transform: uppercase;
}
.text-top {
padding-left: 12px;
border-left: solid 2px #D9D9D9;
color: #3B3B3B;
font-size: 16px;
font-style: italic;
font-weight: 400;
line-height: 120%;
letter-spacing: 0.96px;
}
}
.poly-text {
display: flex;
flex-direction: column;
gap: 52px;
.text-top {
padding-left: 12px;
border-left: solid 2px #D9D9D9;
color: #3B3B3B;
font-size: 16px;
font-style: italic;
font-weight: 400;
line-height: 120%; /* 19.2px */
letter-spacing: 0.96px;
}
.text-bottom {
color: #3B3B3B;
font-size: 17px;
font-style: normal;
font-weight: 100;
line-height: 160%; /* 27.2px */
}
}
.poly-btn{
display: flex;
align-items: center;
a {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
border-radius: 30px;
background: linear-gradient(87deg, #00A3FF 2.06%, rgba(85, 28, 178, 0.80) 97.33%);
width: 240px;
height: 54px;
p {
color: #FFF;
font-family: Gotham Pro;
font-size: 15px;
font-style: normal;
font-weight: 100;
line-height: normal;
span {
font-weight: 700
};
}
}
@media(max-width:480px){
position: absolute;
bottom: -3%;
}
}
.block-poly-1 {
display: flex;
flex-direction: column;
gap: 70px;
}
.poly-v-1 {
display: flex;
height: 568px;
.left {
width: 50%;
display: flex;
flex-direction: column;
gap: 20px;
.poly-header {
display: flex;
align-items: center;
h2 {
color: #5342D6;
font-family: Gotham Pro;
font-size:clamp(36px,3vw,52px);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 52px */
text-transform: uppercase;
}
}
.poly-pic {
position: relative;
width: 620px;
height: 400px;
transform: translateX(-35%);
z-index:2;
img {
width: 100%;
}
@media(max-width:480px){
width: 440px;
height: 340px;
transform: translateX(-23%);
}
}
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 32px 0;
}
@media(max-width:480px){
height: 100%;
flex-direction: column;
flex: 1 0 100%;
transform: translateX(5%);
}
}
.poly-row-1{
display: flex;
justify-content: space-between;
@media(max-width:480px){
flex-direction: column-reverse;
gap: 71px;
}
}
.poly-v-3 {
.right {
margin-top: 12px;
.poly-btn {
margin-top: 24px;
}
}
.poly-pic {
width:1100px;
height: 400px;
position: relative;
transform: translateX(-23%);
z-index:2;
img {
width:100%
}
}
@media(max-width:480px){
margin-right: -7%;
.poly-pic {
width: 393px;
height: 100%;
position: relative;
transform: translateX(-8%);
margin-top: 12px;
}
}
}
.poly-v-2 {
height: 785px;
transform: translate(-5%,-15%);
.right {
margin-top: 12px;
.poly-btn {
margin-top: 24px;
}
}
.poly-pic {
width:760px;
height: 440px;
position: relative;
transform: translate(0%,-23%);
img {
width:100%
}
@media(max-width: 480px){
width: 440px;
height: 350px;
position: relative;
transform: translate(-4%, 0%);
}
}
@media(max-width:1400px){
transform: translate(3%, -15%);
}
@media(max-width:480px){
transform: translate(0%, 0%);
height: fit-content;
margin-right: -7%;
}
}
.poly-v-4 {
height: 716px;
margin-left: auto;
margin-right: 0;
margin-top: 42px;
.right {
margin-top: 42px;
margin-bottom: 12px;
.poly-btn {
margin-top: 24px;
}
.poly-pic {
position: relative;
width: 1212px;
height: 434px;
transform: translate(-11%, -5%);
}
}
@media(max-width:480px){
height: fit-content;
.left .poly-header {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.right {
.poly-pic {
width: 350px;
height: 600px;
transform: translate(-5%, -5%);
img {
width: 100%;
}
}
}
}
}
.poly-row-2 {
margin-top: 80px;
display: flex;
justify-content: space-between;
@media(max-width:480px){
flex-direction: column-reverse;
gap: 42px;
}
}
.poly-v-5 {
height: 872px;
.right {
margin-top: 12px;
.poly-btn {
margin-top: 24px;
}
}
.poly-pic {
width:683px;
height: 452px;
position: relative;
transform: translate(-15%,-15%);
img {
width:100%
}
@media(max-width:480px){
width: 400px;
height: fit-content;
transform: translate(-15%, -2%);
}
}
@media(max-width:480px){
height: fit-content;
}
}
.poly-v-6 {
height: 700px;
margin-top: -2%;
.right {
margin-top: 12px;
.poly-btn {
margin-top: 24px;
}
}
.poly-pic {
width:760px;
height: 493px;
position: relative;
transform: translate(5%, -15%);
z-index:2;
img {
width:100%
}
@media(max-width:480px){
width: 240px;
height: 393px;
position: relative;
transform: translate(25%, -2%);
}
}
}
.poly-v-7 {
height: 680px;
margin-left: auto;
margin-right: 0;
margin-top: 42px;
.right {
margin-top: 42px;
.poly-btn {
margin-top: 24px;
}
.poly-pic {
position: relative;
width: 1170px;
height: 465px;
transform: translate(3%, 1%);
z-index:2;
img {
width: 100%;
}
}
}
@media(max-width:480px){
height: fit-content;
margin-right: -5%;
.left .poly-header{
flex-direction: column;
align-items: flex-start;
gap: 16px;
.text-top {
width: 60%;
}
}
.left .poly-pic {
width: 386px;
height: 417px;
transform: translate(0%, -15%);
z-index:2;
img {
width: 100%;
}
}
.right {
margin-bottom: 12px;
}
}
}
.poly-row-3{
margin-top: 80px;
display: flex;
justify-content: space-around;
@media(max-width:480px){
flex-direction: column;
margin-top: 42px;
gap: 62px;
}
}
.poly-v-8 {
height: 700px;
.right {
margin-top: 12px;
.poly-btn {
margin-top: 24px;
}
}
.poly-pic {
width:683px;
height: 452px;
position: relative;
transform: translate(-15%, -25%);
z-index:2;
img {
width:100%
}
@media(max-width:480px){
width: 423px;
transform: translate(-16%, 0%);
}
}
}
.poly-v-9 {
height: 700px;
margin-top: -3%;
.right {
margin-top: 12px;
.poly-btn {
margin-top: 24px;
}
}
.poly-pic {
width:608px;
height: 510px;
position: relative;
transform: translate(-5%, -20%);
z-index:2;
img {
width:100%
}
}
@media(max-width:480px){
height: fit-content;
.right {
margin-bottom: 16px;
}
.poly-pic {
width: 340px;
height: 277px;
position: relative;
transform: translate(10%, -58%);
}
}
}
.poly-v-10 {
margin-top: 90px;
margin-left: auto;
margin-right: 0;
display: flex;
height: 420px;
.left {
display: flex;
flex-direction: column;
width: 75%;
justify-content: space-between;
flex: 1 0 auto;
.poly-text .text-bottom {
max-width: 350px;
}
}
.right {
display: flex;
.poly-pic {
width: 700px;
height: 490px;
position: relative;
transform: translate(-35%, -20%);
z-index:2;
img {
width: 100%;
}
}
}
@media(max-width:480px){
height: fit-content;
.left {
width: 100%;
margin-bottom: 32px;
.poly-text .poly-pic {
width: 478px;
height: 638px;
transform: translate(-9%, 0%);
}
}
}
}
// contact us
.contact-us-block {
display: flex;
position: relative;
background: linear-gradient(90deg, #FFA462 0%, #B55550 13.08%, #8A2645 27.38%, #291725 84.9%, rgba(41, 23, 37, 0.00) 100%);
border-radius: 30px;
overflow: hidden;
padding: 50px;
.contact-us-block-bckg{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
img {
width: 100%;
height: 100%;
}
}
.contact-us-wrap {
z-index: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 55%;
gap:60px;
margin-bottom: 50px;
.contact-us-buttons {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 24px;
.contact-us-button {
display: flex;
align-items: center;
a{
border-radius: 50px;
border: 2px solid #FFF;
box-shadow: 4px 4px 20px 0px rgba(255, 255, 255, 0.20);
padding: 10px 40px;
display: flex;
align-items: center;
width: 327px;
position: relative;
transition: 0.1s ease-in-out all;
p {
color: #FFF;
text-align: center;
font-family: Gotham Pro;
font-size: clamp(14px, 1vw, 19px);
font-style: normal;
font-weight: 700;
line-height: 140%;
text-transform: uppercase;
}
i {
position: absolute;
right: 0;
width: 75px;
height: 75px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s ease-in-out all;
&.wu {
background: linear-gradient(0deg, #20B038 0%, #60D66A 100%);
box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px #60D66A;
}
&.tg {
background: linear-gradient(60deg, #006EAC 18.07%, #41B4F2 98.77%);
box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px #41B4F2;
}
@media(max-width:480px){
width: 63px;
height: 63px;
svg {
width: 56%;
}
}
}
&.w-u:hover {
box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.20) inset, 4px 4px 12px 0px #60D66A;
border: 2px solid #60D66A;
}
&.t-g:hover {
box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.20) inset, 4px 4px 12px 0px #41B4F2;
border: 2px solid #41B4F2;
}
&:hover >i {
transform: translateX(5px);
}
}
}
}
@media(max-width:991px){
width: 100%;
.contact-us-buttons {
flex-direction: column;
gap: 32px;
}
}
}
}
.in-block-header {
display: flex;
align-items: center;
h2 {
color: #FFF;
font-family: Gotham Pro;
font-size: clamp(32px,2.6vw,50px);
font-style: normal;
font-weight: 700;
line-height: 110%;
text-transform: uppercase;
@media(max-width:480px){
text-align: center;
}
@media(min-width:481px){
br {
display: none;
}
}
}
}
// contact us