/* 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); } } }