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