/* 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: #fff;
overflow-x: hidden;
background: #0E2337;
}
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;
}
.eapps-instagram-feed-content{
.eapps-instagram-feed-header.es-header{
background: transparent!important;
color: white!important;
a {
color: white!important;
}
}
}
.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: white;
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, #091928 0%, #42B5E7 54.17%, #112843 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, #091928 0%, #42B5E7 54.17%, #112843 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: white;
}
}
.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, #091928 0%, #42B5E7 54.17%, #112843 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: white;
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%);
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
@keyframes toTheLeft {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-18%);
}
100% {
transform: translateY(0);
}
}
@keyframes toTheBottom {
0% {
transform: translateY(0);
}
50% {
transform: translateY(15%);
}
100% {
transform: translateY(0);
}
}
@keyframes toTheRight {
0% {
transform: translateY(0);
}
50% {
transform: translateY(16%);
}
100% {
transform: translateY(0);
}
}
@keyframes postsMove {
0% {
object-position: 0;
}
50% {
object-position: 100%;
}
100% {
object-position: 0;
}
}
@keyframes postsMoveRev {
0% {
object-position: 100%;
}
50% {
object-position: 0;
}
100% {
object-position: 100%;
}
}
.line-container {
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.8);
height: 5px;
display: flex;
align-items: center;
margin-bottom: 12px;
}
.line {
position:absolute;
width: 0;
height: 70%;
background: rgba(255, 255, 255, .8);
animation: fillAndFloat 12s infinite ease;
display: flex;
flex-direction: row;
border-radius: 20px
}
@keyframes fillAndFloat {
0% {
width: 0;
background: rgba(255, 255, 255, .6);
}
31% {
width: 100%;
}
56% {
}
57%{
width: 100%;
}
100% {
right: 0;
width: 0;
}
}
.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: 65%;
.main-banner_left_text {
display: flex;
flex-direction: column;
.title-block {
display: flex;
flex-direction: column;
gap: 26px;
@media(max-width: 480px){
gap: 10px;
}
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;
@media(max-width:480px){
letter-spacing: 2px;
align-self: center;
}
}
.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;
}
}
.taglines-wrap-spec {
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 17px;
overflow: hidden;
width: 260px;
height: 65px;
margin: 0 12px;
box-shadow: 2px 2px 16px 0px #3ED7FF;
background: linear-gradient(16deg, #1961B5, #4FC4E3);
p {
top: 2px;
left: 2px;
height: calc(100% - 2px * 2);
width: calc(100% - 2px * 2);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
background: #1961B5;
padding: 14px 16px;
position: absolute;
z-index: 1;
}
}
@media(max-width:1300px){
gap: 20px 12px;
}
@media(max-width:480px){
gap: 12px 4px;
}
}
}
.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;
height: 100%;
background-color: white;
margin-left: 42px;
margin-right: 42px;
@media(max-width:480px){
margin-left: 12px;
margin-right: 12px;
}
}
}
// .main-button-block {margin-top: clamp(44px,6.6vw,120px);}
@media(max-width:480px){
justify-content: space-between;
}
}
@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: #061827;
gap: 42px;
max-width: 381px;
white-space: nowrap;
font-family: Gotham Pro;
font-size: clamp(12px, 1.6vw, 20px);
font-style: normal;
font-weight: 700;
line-height: normal;
display: flex;
padding: 24px 32px;
justify-content: center;
align-items: center;
text-transform: uppercase;
border-radius: 50px;
background: linear-gradient(96deg, #67D1F2 0%, #ADE3FF 48.01%, #E8F7FF 99.11%);
box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px rgba(255, 255, 255, 0.80);
svg{
transition: .25s ease all;
width:50px;
}
&:hover > svg{
transform: translateX(5px);
}
}
@media(max-width:480px){
justify-content: center;
.btn-get-style {
padding: 20px 16px;
width: 100%;
gap:20px;
width: 220px;
font-weight: 700;
svg {
width: 33px;
}
}
}
}
.price-button {
display:flex;
align-items: center;
a {
display: flex;
align-items: center;
justify-content: center;
width: 240px;
height: 54px;
border-radius: 30px;
background: linear-gradient(96deg, #67D1F2 0%, #ADE3FF 48.01%, #E8F7FF 99.11%);
gap: 15px;
p{
color: #061827!important;
font-size: 15px;
font-weight: 100;
span {
font-size: 24px;
font-weight: 400;
line-height: normal;
}
}
}
}
.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%;
}
}
}
}
.banners-for-search{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: clamp(32px,4vw,70px);
@media(max-width:1400px){
gap: 12px 0;
}
// gap: 32px 20px;
.text-banner {
display: flex;
flex-direction: column;
width: 50%;
gap: 20px;
padding: 30px 0;
flex: 1;
.top-name {
display: flex;
position: relative;
max-width: 505px;
.first-block {
display: flex;
font-family: Gotham Pro;
font-size: clamp(23px,1.8vw,36px);
font-style: normal;
font-weight: 700;
line-height: 140%; /* 50.4px */
text-transform: uppercase;
background: linear-gradient(96deg, #BC94FF 0%, #89BFFF 48.01%, #E8F7FF 99.11%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.small-block {
position: absolute;
bottom: 10%;
right: 0;
width: fit-content;
@media(max-width:480px){
bottom: -10%;
}
}
}
.laser-line {
width: 100%;
position: relative;
border-radius: 20px;
background: linear-gradient(181deg, rgba(3, 125, 155, 0) -88.87%, #037D9B 99.4%);
box-shadow: 0px 0px 13px 0px rgba(8, 212, 236, 0.7);
height: 2px;
display: flex;
align-items: center;
}
.bottom-text {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 550px;
p{
color: #FFF;
font-family: Gotham Pro;
font-size: clamp(16px,1.2vw,20px);
font-style: normal;
font-weight: 400;
line-height: 140%;
}
@media(max-width:480px){display: none;}
}
}
.image-banner {
display: flex;
width: calc(50% - 10px);
img{
width: 100%;
height: 100%;
object-fit: contain;
}
@media(max-width:480px) {
display: none;
}
}
@media(max-width: 1024px){
flex-direction: column;
.text-banner{
width: 100%;
.bottom-text {
max-width: 100%;
}
}
.image-banner{
width: 100%;
}
}
}
.image-banner-mobile{
position: relative;
width: 100%;
img {
width: 100%;
object-fit: contain;
}
@media(min-width:480px){
display: none;
}
}
.bottom-text-mobile {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 550px;
p{
color: #FFF;
font-family: Gotham Pro;
font-size: clamp(16px,1.2vw,20px);
font-style: normal;
font-weight: 400;
line-height: 140%;
}
@media(min-width:480px){display: none;}
}
.banners-sliders-section{
overflow-x: hidden;
@media(max-width:768px){
display: none;
}
}
.banners-for-sites {
display: flex;
align-items: center;
margin-top: clamp(32px,4vw,70px);
justify-content: flex-end;
position: relative;
padding: 0 0 140px 0;
.image-block{
position: absolute;
left: -5%;
top: 0;
width: 65%;
img {
width: 100%;
height: 100%;
}
@media(max-width:1024px){
top: 20%;
}
@media(max-width:768px){
width: 100%;
}
@media(max-width:480px){
top: 0;
left: unset;
right: -10%;
width: 480px;
}
}
.text-banner {
display: flex;
flex-direction: column;
width: 50%;
gap: 20px;
// flex: 1;
.top-name {
display: flex;
position: relative;
// max-width: 505px;
.first-block {
display: flex;
font-family: Gotham Pro;
font-size: clamp(23px,1.8vw,36px);
font-style: normal;
font-weight: 700;
line-height: 140%; /* 50.4px */
text-transform: uppercase;
background: linear-gradient(96deg, #BC94FF 0%, #89BFFF 48.01%, #E8F7FF 99.11%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.small-block {
position: absolute;
bottom: 10%;
right: 8%;
width: fit-content;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 23.8px */
}
@media(max-width:1400px){
flex-direction: column;
.small-block {
position: relative;
bottom: 0;
right: 0;
br {
display: none;
}
}
}
}
.laser-line {
width: 100%;
position: relative;
border-radius: 20px;
background: linear-gradient(181deg, rgba(3, 125, 155, 0) -88.87%, #037D9B 99.4%);
box-shadow: 0px 0px 13px 0px rgba(8, 212, 236, 0.7);
height: 2px;
display: flex;
align-items: center;
}
.bottom-text {
display: flex;
flex-direction: column;
gap: 12px;
// max-width: 550px;
p{
color: #FFF;
font-family: Gotham Pro;
font-size: clamp(16px,1.2vw,20px);
font-style: normal;
font-weight: 400;
line-height: 140%;
}
ul {
display: flex;
flex-direction: column;
gap: 6px;
li {
position: relative;
font-size: clamp(16px,1.2vw,20px);
font-style: normal;
font-weight: 100;
line-height: 140%;
display: flex;
align-items: center;
padding-left: 32px;
&::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='23' viewBox='0 0 17 23' fill='none'%3E%3Cpath d='M8.5 0L11.2047 7.84072L17 11.5L11.2047 15.1593L8.5 23L5.79532 15.1593L0 11.5L5.79532 7.84072L8.5 0Z' fill='url(%23paint0_linear_664_1552)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_664_1552' x1='-0.857343' y1='28.1271' x2='22.6075' y2='17.4742' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23112843'/%3E%3Cstop offset='0.291667' stop-color='%23B6E0FF'/%3E%3Cstop offset='0.686218' stop-color='%2342B6E7'/%3E%3Cstop offset='1' stop-color='%23112843'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
width: 17px;
height: 23px;
display: flex;
align-items: center;
justify-content: center;
content: '';
position: absolute;
left: 0;
}
}
}
}
}
@media(max-width:768px){
flex-direction: column-reverse;
padding: 32px 0;
gap: 16px 0
;
.text-banner {
width: 100%;
gap: 4px;
.bottom-text{
display: none;
}
}
.image-block {
position: relative;
}
}
}
.bottom-text-m {
display: flex;
flex-direction: column;
gap: 12px;
@media(min-width:769px){display: none;}
// max-width: 550px;
.pics-m {
@media(min-width:481px){
display: none;
}
width: 100%;
position: relative;
img {
width: 100%;
}
}
p{
color: #FFF;
font-family: Gotham Pro;
font-size: clamp(16px,1.2vw,20px);
font-style: normal;
font-weight: 400;
line-height: 140%;
}
ul {
display: flex;
flex-direction: column;
gap: 6px;
li {
position: relative;
font-size: clamp(16px,1.2vw,20px);
font-style: normal;
font-weight: 100;
line-height: 140%;
display: flex;
align-items: center;
padding-left: 32px;
&::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='23' viewBox='0 0 17 23' fill='none'%3E%3Cpath d='M8.5 0L11.2047 7.84072L17 11.5L11.2047 15.1593L8.5 23L5.79532 15.1593L0 11.5L5.79532 7.84072L8.5 0Z' fill='url(%23paint0_linear_664_1552)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_664_1552' x1='-0.857343' y1='28.1271' x2='22.6075' y2='17.4742' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23112843'/%3E%3Cstop offset='0.291667' stop-color='%23B6E0FF'/%3E%3Cstop offset='0.686218' stop-color='%2342B6E7'/%3E%3Cstop offset='1' stop-color='%23112843'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
width: 17px;
height: 23px;
display: flex;
align-items: center;
justify-content: center;
content: '';
position: absolute;
left: 0;
}
}
}
}
.swiper-banners-wrap {
min-width: 0;
width: 100%;
.swiper-banners {
height: 100%;
display: flex;
.swiper-slide {
height: 100%;
border-radius: 20px;
overflow: hidden;
max-height: 330px ;
display: flex;
align-items: center;
img{
width: 100%;
height: 100%;
}
}
}
}
.letters-block {
display: flex;
align-items: center;
height: 455px;
@media(max-width:1024px){
height: 100%;
flex-direction: column;
}
.letters-text {
display: flex;
flex-direction: column;
width:42%;
gap: clamp(12px,1.1vw,20px);
padding: 30px 0;
flex: 1;
.top-name {
display: flex;
position: relative;
max-width: 505px;
.first-block {
display: flex;
font-family: Gotham Pro;
font-size: clamp(23px,1.8vw,36px);
font-style: normal;
font-weight: 700;
line-height: 140%; /* 50.4px */
text-transform: uppercase;
background: linear-gradient(96deg, #BC94FF 0%, #89BFFF 48.01%, #E8F7FF 99.11%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.small-block {
position: absolute;
bottom: 10%;
right: 0;
width: fit-content;
}
}
.laser-line {
width: 100%;
position: relative;
border-radius: 20px;
background: linear-gradient(181deg, rgba(3, 125, 155, 0) -88.87%, #037D9B 99.4%);
box-shadow: 0px 0px 13px 0px rgba(8, 212, 236, 0.7);
height: 2px;
display: flex;
align-items: center;
}
.bottom-text {
display: flex;
flex-direction: column;
gap: 12px;
p{
color: #FFF;
font-family: Gotham Pro;
font-size: clamp(16px,1.2vw,20px);
font-style: normal;
font-weight: 400;
line-height: 140%;
}
}
@media(max-width:1024px){
width: 100%;
}
}
.letters-pic {
width: 58%;
display: flex;
justify-content: center;
overflow: hidden;
height: 100%;
img {
width: 100%;
height: 100%;
}
@media(max-width:1024px){
width: 100%;
height: 455px;
}
@media(max-width:480px){
height: 330px;
}
}
}
.swiper-letters{
width: 100%;
max-width: 320px;
min-width: 0;
position: relative;
@media(max-width:480px){
max-width: 235px;
}
&::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(../src-banners/letters/letter1.png);
background-size: contain;
background-repeat: no-repeat;
z-index: 2;
}
.letter-core {
width: 80%;
height: 80%;
position: absolute;
background-color: #fff;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.swiper-slide {
z-index: -1!important;
transition: .3s ease all;
img {
z-index: -1!important;
transition: 1s ease all;
object-fit: contain;
}
}
.activeSlide{
z-index: 11!important;
img {
position: absolute;
right: -11%;
top: -4.5%;
z-index: 11;
transform: scale(0.6);
}
}
}
.swiper-button-prev.slider_letter-prev {
width: 60px;
left: -10%!important;
display: flex;
align-items: center;
justify-content: center;
&::after{
content: ''!important;
width: 60px!important;
height: 60px!important;
background-image: url(../src-banners/letters/ar-left.png);
background-size: contain;
}
@media(max-width:1400px){
width: 55px;
&::after{
width: 55px!important;
height: 55px!important;
}
}
@media(max-width:480px){
width: 60px;
height: 60px;
&::after{
width: 60px!important;
height: 60px!important;
}
}
}
.swiper-button-next.slider_letter-next {
width: 60px;
right: -10%!important;
display: flex;
align-items: center;
justify-content: center;
&::after{
content: ''!important;
width: 60px!important;
height: 60px!important;
background-image: url(../src-banners/letters/ar-right.png);
background-size: contain;
}
@media(max-width:1400px){
width: 55px;
&::after{
width: 55px!important;
height: 55px!important;
}
}
@media(max-width:480px){
width: 60px;
height: 60px;
&::after{
width: 60px!important;
height: 60px!important;
}
}
}
.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-family: Hooskai Chamfered Square;
font-size: clamp(24px,2.5vw,45px);
font-style: normal;
font-weight: 400;
line-height: 140%;
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-advices {
overflow-x:hidden;
}
.advices-wrap {
position: relative;
width: 100%;
height: 660px;
margin: 50px 0;
@media(max-width:1200px){
height: 550px;
margin: 50px 0 0 0;
}
@media(max-width:1024px){
height: 730px;
}
.advices-wrap-img {
position: absolute;
bottom: -5%;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 740px;
@media(max-width:1300px){
max-width: 38vw;
bottom: 20%;
}
img {
width: 100%;
height: 100%;
}
@media(max-width:1024px){
display: none;
}
}
@media(min-width:1024px){
.advices-wrap-img-mb-top,
.advices-wrap-img-mb-bottom {
display: none;
}
}
.advices-wrap-img-mb-top{
position: absolute;
left: -25px;
}
.advices-wrap-img-mb-bottom{
position: absolute;
right: -25px;
bottom: 0;
}
.item {
position: absolute;
p {
color: #FFF;
font-family: 'Gotham Pro';
font-size: clamp(15px,1.2vw,20px);
font-style: normal;
font-weight: 100;
line-height: 140%;
span {
font-weight: 700;
text-transform: uppercase;
font-size: clamp(16px,1.2vw,20px);
background: linear-gradient(96deg, #BC94FF 0%, #89BFFF 48.01%, #E8F7FF 99.11%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&:nth-child(4) {
max-width: 550px;
top: 0;
left: 0;
@media(max-width:1200px){
max-width: 350px;
left: 7%;
}
}
&:nth-child(5) {
max-width: 440px;
top: 0;
right: 18%;
text-align: end;
@media(max-width:1200px){
max-width: 350px;
top: 3%;
}
@media(max-width:1024px){
max-width: 220px;
top: 23%;
text-align: start;
right: unset;
left: 38%;
}
}
&:nth-child(6) {
max-width: 340px;
top: 33%;
right: 0;
text-align: end;
@media(max-height:1024px){
top: 39%;
}
@media(max-width:768px){
top: 43%;
right: unset;
text-align: start;
left: 0;
}
}
&:nth-child(7) {
max-width: 440px;
right: 0%;
text-align: end;
bottom: 20%;
@media(max-width:1024px){
bottom: 14%;
right: 15%;
}
@media(max-width:768px){
max-width: 270px;
right: unset;
left: 0;
text-align: start;
bottom: 12%;
}
}
&:nth-child(8) {
max-width: 380px;
bottom: 18%;
left: 0;
text-align: start;
@media(max-width:1200px){
bottom: 22%;
}
@media(max-width:1024px){
bottom: 30%;
}
@media(max-width:768px){
width: 220px;
bottom: 28%;
}
}
}
}
.section-photostocks{
background: linear-gradient(94deg, #00244F -6.17%, #A1D8FF 26.86%, #24BDFF 71.55%, #032A59 107.09%);
}
.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: #061827;
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(189deg, #091928 0.65%, #42B5E7 79.21%);
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;
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: #FFF;
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;
}
}
.resize-block {
position: relative;
padding: 50px 80px;
border-radius: 30px;
background: linear-gradient(94deg, #00244F 1.34%, #A1D8FF 26.09%, #24BDFF 64.53%, #032A59 97.98%);
display: flex;
flex-direction: column;
.resize-header {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 920px;
align-self: center;
h2 {
text-align: center;
font-family: Hooskai Chamfered Square;
font-size: clamp(27px,2.5vw,45px);
font-style: normal;
font-weight: 400;
line-height: 140%;
background: linear-gradient(94deg, #091928 0%, #003F88 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
color: #000;
text-align: center;
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;
}
.item {
display: flex;
img {
width: 100%;
height: 100%;
}
&:first-child{
@media(max-width:480px){
margin-right: -8%;
}
}
&:last-child{
@media(max-width:480px){
margin-left: -5%;
}
}
}
}
@media(max-width:480px){
padding: 20px 16px;
}
}
// 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-family: Hooskai Chamfered Square;
font-size: clamp(24px,2.2vw,40px);
font-style: normal;
font-weight: 400;
line-height: 140%;
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;
}
}
&.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: linear-gradient(96deg, #EAEAEA 0%, #D9F2FF 97.79%), #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(93deg, #A1D8FF 2.82%, #24BDFF 49.65%, #032A59 97.18%);
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: 68px;
}
}
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: white;
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: white;
font-family: Gotham Pro;
font-size: 11px;
font-style: normal;
font-weight: 100;
line-height: normal;
}
}
@media(max-width:1024px){
padding: 24px 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
// 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);
}
}
}