@font-face { font-family: 'Sangha'; src: url('../fonts/sangha.ttf'); } @font-face { font-family: 'Nasalization'; src: url('../fonts/Nasalization.woff2'); } @font-face { font-family: 'AmadeusAP'; src: url('../fonts/AmadeusAP.ttf'); } @font-face { font-family: 'Hooskai Chamfered Square'; src: url('../fonts/HooskaiChamferedSquare.ttf'); } /* HooskaiChamferedSquare */ @font-face { font-family: 'HooskaiChamferedSquare'; 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: #171422; } 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; color: white; transition: .25s ease all; // padding: 16px; 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(90deg, #9E0B37 0.98%, #FFC531 72.22%, #9E0B37 99.95%);; 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(90deg, #9E0B37 0.98%, #FFC531 72.22%, #9E0B37 99.95%); 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(90deg, #9E0B37 -9.67%, #FFC531 115.9%); 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(90deg, #9E0B37 0.98%, #FFC531 72.22%, #9E0B37 99.95%); 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: translateX(0); } 50% { transform: translateX(-18%); } 100% { transform: translateX(0); } } @keyframes toTheBottom { 0% { transform: translateY(0); } 50% { transform: translateY(15%); } 100% { transform: translateY(0); } } @keyframes toTheRight { 0% { transform: translateX(0); } 50% { transform: translateX(16%); } 100% { transform: translateX(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%; } } @keyframes shadowChange { 0% { box-shadow: 2px 2px 16px 0px #3ED7FF; } 100% { box-shadow: 2px 2px 16px 0px #BD485B; } } @media (max-width:480px){ .section-desctop__video { display:none; } } @media (min-width:480px){ .section-mobile__video { display:none; } } .main-banner { position: relative; z-index: 1; overflow: hidden; .main-banner-element { position: absolute; display: none; img { width: 100%; height: 100%; } &.insta-left { left: 0; top: 15%; transform: translateY(-15%); width: calc(95% - 88vw); img { animation: toTheLeft 4s linear infinite; } } &.insta-bottom { bottom: 0; left: 35%; transform: translateX(-35%); width: calc(95% - 80vw); img { animation: toTheBottom 5s linear infinite; } } &.insta-right { right: 0; top: 50%; transform: translateY(-50%); width: calc(95% - 88vw); img { animation: toTheRight 3s linear infinite; } } &.main-banner-lady{ bottom: 0; right: 0; z-index: 2; height: 100%; img { width: unset!important; object-fit: cover; } @media(max-width:1450px){ right: -35vh; } } } .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-banner-wrap { position: relative; display: flex; justify-content: space-between; align-items: flex-end; z-index: 3; width: 100%; min-height: 100vh; max-height: 1000px; padding-bottom: 100px; .main-banner_left{ display: flex; width: 53%; height: 80%; @media(max-width:480px) { height: 90%; padding-top: 65px; } @media(max-width:380px) { height: 85%; } .main-banner_left_text { display: flex; flex-direction: column; transition: .3s ease all; .top-part { display: flex; flex-direction: column; height: 100%; justify-content: space-between; transition: .3s ease all; gap: 12px; .main-title { display: flex; gap: 4px; flex-direction: column; h1 { color: #FFF; font-family: Gotham Pro; font-size:clamp(50px,3.8vw,72px); font-style: normal; font-weight: 400; line-height: 110%; /* 79.2px */ text-transform: uppercase; } h2 { color: #FFF; font-family: Gotham Pro; font-size:clamp(43px,3.6vw,72px); font-style: italic; font-weight: 100; line-height: 110%; /* 79.2px */ text-transform: uppercase; min-height: 79.5px; } @media(max-width:480px){ align-items: center; } } } .title-block { position: relative; display: flex; padding-left: 24px; margin-bottom: 155px; &::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='90' viewBox='0 0 8 90' fill='none'%3E%3Cpath d='M4 0.0816948L0.0816948 4L4 7.91831L7.91831 4L4 0.0816948ZM4 89.9183L7.9183 86L4 82.0817L0.0816913 86L4 89.9183ZM3.32133 4L3.32133 86L4.67867 86L4.67867 4L3.32133 4Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; top: 0; left: 0; position: absolute; display: flex; content: ''; width: 100%; height: 100%; } p { color: #FFF; font-family: Gotham Pro; font-size: 18px; font-style: normal; font-weight: 100; line-height: 140%; span { font-size: 24px; font-weight: 700; text-transform: uppercase; } } @media(max-width:768px){ display: none; } } .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(22px, 1.8vw, 30px); font-style: normal; font-weight: 500; line-height: 120%; } p { color: #FFF; text-align: center; font-size: clamp(12px,.7vw,16px); font-style: normal; font-weight: 100; line-height: 120%; /* 19.2px */ @media(max-width:480px){ br { display: none; } } } } 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; display: none; } } @media(max-width:480px){ gap: 10px; } } .main-button-block {margin-top: clamp(24px, 4vw, 70px);} @media(max-width:480px){ justify-content: space-between; .bottom-part { display: flex; flex-direction: column-reverse; align-items: center; } } } @media(max-width:1024px){ width: 100%; } } @media(max-width:480px){ align-items:flex-end; padding-bottom: 5%; } .small-banner { position: absolute; width: 100%; max-width: 406px; padding: 24px 43px; border-radius: 28.333px; background: linear-gradient(263deg, rgba(254, 192, 83, 0.14) 1.73%, rgba(254, 192, 83, 0.00) 83.84%), #343140; right: 0; bottom: 10%; display: flex; flex-direction: column; gap: 16px; h3 { color: #FFF; font-family: Gotham Pro; font-size: 23.333px; font-style: normal; font-weight: 100; line-height: 120%; /* 28px */ letter-spacing: -0.467px; span { font-style: italic; font-weight: 700; } } a{ display: flex; align-items: center; justify-content: space-between; border-radius: 16.667px; background: #FFF; padding: 10px 26px; p{ color: #343140; font-family: Gotham Pro; font-size: 16.667px; font-style: normal; font-weight: 100; line-height: 120%; span { font-weight: 700; } } } @media(max-width: 1024px){ display: none; } } } } .button-block { display: flex; align-items: center; .btn-get-style { display: flex; align-items: center; gap: 42px; max-width: 381px; white-space:nowrap; color: #FFF; font-family: Gotham Pro; font-size: clamp(15px,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: 51px; background: var(--Linear, linear-gradient(91deg, #DF5017 -4.25%, #F9CB74 108.11%)); box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px #DF5017; svg{transition: .25s ease all;} &:hover > svg{ transform: translateX(5px); } } @media(max-width:480px){ justify-content: center; .btn-get-style { padding: 16px 11px; gap: 20px; width: 220px; svg { width:32px; } } } } .section-mini { position: relative; padding: 35px 0; @media(max-width:480px) { padding: 16px 0; } } .slider_menu_wrapper { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; min-width: 0px; overflow-x: hidden; margin: 0 auto; } .slider_menu { width: 100%; max-width: 500px; padding-top: 50px; padding-bottom: 50px; min-width: 0px; overflow: visible!important; @media(max-width:1400px){ max-width: 350px; } @media(max-width:480px){ max-width: 300px; } .swiper-slide { // width: fit-content!important; // img { // width: 100%; // } .item { position: relative; border-radius: 30px; overflow: hidden; width: 100%; height: 900px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 40px; z-index: 1; @media(max-width:1400px){height: 650px;} @media(max-width:480px){height: 553px;} .pseudoit { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(270deg, rgba(23, 20, 34, 0.40) 0%, rgba(23, 20, 34, 0.70) 100%); // background: rgba(23, 20, 34, 0.80); opacity: 1; transition: .3s ease all; } .image-bckg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; img { width: 100%; } } .stuff { display: flex; flex-direction: column; gap: 8px; z-index: 1; h2 { color: #FFF; text-align: center; font-size: clamp(30px,3vw,60px); font-style: normal; font-weight: 700; line-height: 110%; /* 66px */ text-transform: uppercase; } .stuff-button { display: flex; align-items: center; justify-content: center; a { display: flex; align-items: center; gap: 20px; border-radius: 50px; padding: 24px; width: 100%; max-width: 259px; font-family: Gotham Pro; font-size: clamp(15px,1.2vw,20px); font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; @media(max-width:480px){ padding: 14px; max-width: 220px; svg { width: 30px; } } } } } } } } // .swiper-slide-prev .pseudoit { // background: linear-gradient(270deg, rgba(23, 20, 34, 0.20) 0%, rgba(23, 20, 34, 0.60) 100%)!important; // } // .swiper-slide-next .pseudoit { // background: linear-gradient(270deg, rgba(23, 20, 34, 0.20) 0%, rgba(23, 20, 34, 0.60) 100%)!important; // } .activeSlide .item .pseudoit { opacity: 0!important; } .insta-colors{ 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); color: #FFF; } .vk-colors { background: linear-gradient(267deg, #007BD5 -7.12%, #1961B5 61.68%); box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px #1961B5; } .banners-header { font-family: Hooskai Chamfered Square; background: linear-gradient(96deg, #00A1C9 0%, #78D1FF 48.01%, #E8F7FF 99.11%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-mask-image: linear-gradient(96deg, #00A1C9 0%, #78D1FF 48.01%, #E8F7FF 99.11%); mask-composite: exclude; color: transparent; } .banners-colors{ color: #061827; 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 path { fill:#061827; } } .polyg { font-family: Hooskai Chamfered Square; font-size: clamp(30px,2.5vw,47px)!important; } .polyg-colors{ 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); } .package { font-family: 'Sangha'; background: linear-gradient(93deg, #FF7286 2.67%, #FFF 81.43%); font-size: clamp(32px,4.2vw,80px)!important; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: none!important; } .package-colors { background: linear-gradient(93deg, #FF7286 2.67%, #FFF 81.43%); box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px rgba(255, 255, 255, 0.80); color: #061827; svg path { fill:#061827; } } .websites { font-family: 'Nasalization'; } .websites-colors { background: linear-gradient(135deg, #fc377e 0%, #0a154e 100%); box-shadow: inset 4px 4px 6px 0 rgba(255, 255, 255, 0.5), 4px 4px 20px 0 rgba(252, 55, 126, 0.5); color: #fff; svg path { fill:#fff; } } .presentations { color: #FFF; text-align: center; font-family: Gotham Pro; font-size: 60px; font-style: normal; font-weight: 700; line-height: 110%; /* 66px */ text-transform: uppercase; } .presentations-colors { background: linear-gradient(91deg, #DF5017 -4.25%, #F9CB74 108.11%); box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px rgba(255, 255, 255, 0.80); color: white; svg path { fill:white; } } .swiper-button-prev.slider_menu-prev { width: 110px; height: 110px; left: -10%!important; &::after{ content: ''!important; width: 110px!important; height: 110px!important; background-image: url(../src/slides/ar-left.png); background-size: cover; } @media(max-width:1400px){ width: 90px; height: 90px; &::after{ width: 90px!important; height: 90px!important; } } @media(max-width:480px){ width: 60px; height: 60px; &::after{ width: 60px!important; height: 60px!important; } } } .swiper-button-next.slider_menu-next { width: 110px; height: 110px; right: -10%!important; &::after{ content: ''!important; width: 110px!important; height: 110px!important; background-image: url(../src/slides/ar-right.png); background-size: cover; } @media(max-width:1400px){ width: 90px; height: 90px; &::after{ width: 90px!important; height: 90px!important; } } @media(max-width:480px){ width: 60px; height: 60px; &::after{ width: 60px!important; height: 60px!important; } } } // new .section-about { position: relative; } .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; } } } } .about-block{ position: relative; display: flex; padding: 50px; border-radius: 30px; background: linear-gradient(90deg, #8A2645 0%, #291725 75.74%, rgba(41, 23, 37, 0.00) 100.35%); overflow: hidden; height: 515px; .about-block-bckg{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ''; display: flex; img { width: 100%; height: 100%; @media(max-width:480px){ object-fit: contain; object-position: bottom right; } } } .about-wrap{ display: flex; z-index: 1; .about-wrap-text { display: flex; flex-direction: column; gap:42px; width: 75%; .text-block { display: flex; flex-direction: column; gap: 1rem; position: relative; padding-left: 24px; p { color: #FFF; font-family: Gotham Pro; font-size:clamp(16px,1.4vw,22px); font-style: normal; font-weight: 400; line-height: 140%; /* 30.8px */ } &::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='142' viewBox='0 0 8 142' fill='none'%3E%3Cpath d='M4 0.0816948L0.0816948 4L4 7.91831L7.91831 4L4 0.0816948ZM3.99999 141.918L7.9183 138L3.99999 134.082L0.081689 138L3.99999 141.918ZM3.32133 4L3.32132 138L4.67866 138L4.67867 4L3.32133 4Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; top: 0; left: 0; position: absolute; display: flex; content: ''; width: 100%; height: 100%; } } .text-button { display: flex; align-items: center; a { display: flex; align-items: center; position: relative; width: 100%; max-width: 263px; padding: 10px 30px; border-radius: 50px; border: 2px solid #FFF; box-shadow: 4px 4px 10px 0px rgba(255, 255, 255, 0.20); 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%; /* 26.6px */ text-transform: uppercase; } i { position: absolute; right:0; width: 75px; height: 75px; border-radius: 50px; background: linear-gradient(91deg, #DF5017 -4.25%, #F9CB74 108.11%); box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px #DF5017; display: flex; align-items: center; justify-content: center; transition: 0.3s ease-in-out all; @media(max-width:480px){ width: 63px; height: 63px; } } &:hover >i { transform: translateX(5px); } } } } } @media(max-width:480px){ height: fit-content; padding: 20px; .about-wrap{ .about-wrap-text{ width: 100%; } } } } // new // marquee .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(123deg, #8A2645 4.42%, rgba(138, 38, 69, 0.19) 32.59%, rgba(138, 38, 69, 0.00) 52.74%), #282533; 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(8px,1.6vw,32px); h3 { color: white; text-align: center; // font-family: Inter; font-size: clamp(25px,2.2vw,40px); font-style: normal; font-weight: 500; line-height: 37.968px; /* 94.921% */ } } @media(max-width:480px){ width: 100%; max-width: 260px; padding: 26px 20px; .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; // max-height:315px; border-radius:20px; overflow: hidden; picture { display: block; img { width: 100%; @media(max-width:480px){ height:50vw; } } } @media(max-width:480px){ max-height:280px; } } } .marquee-slider-two{ display: flex; .swiper-slide { width: fit-content!important; // max-height:315px; border-radius:20px; overflow: hidden; picture { display: block; img { width: 100%; @media(max-width:480px){ height:50vw; } } } @media(max-width:480px){ max-height:280px; } } } .item { display: flex; width: fit-content; flex: 1 0 auto; img { width: 100%; } } } // marquee // 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; } } } } // contact us // promo .section-promos-phone { position:absolute; width: 55vw; left: 0; z-index: 2; max-width: 1020px; img { width: 100%; } @media(max-width:1440px){ left: -10%; bottom: 0; } @media(max-width:1300px){ display: none; } @media(max-width:480px){ display:block; width: 77vw; left: -15%; bottom: 26%; } } .section-promos-header{ display: flex; align-items: center; margin-bottom: clamp(32px, 2.6vw, 50px); h2 { font-family: Gotham Pro; font-size: clamp(32px, 2.6vw, 50px); font-style: normal; font-weight: 700; line-height: 110%; /* 55px */ text-transform: uppercase; background: linear-gradient(91deg, #DF5017 0%, #F9CB74 73.52%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } .promos-wrap { position: relative; display: flex; flex-direction: column; z-index: 1; .promos-wrap-header{ display: flex; flex-direction: column; width: 76%; align-items: flex-end; margin-bottom: clamp(24px,2.4vw,42px); .header-wrap { display: flex; flex-direction: column; align-items: flex-end; width: fit-content; p { font-family: Gotham Pro; font-size: clamp(36px,4vw,80px); font-style: normal; font-weight: 500; line-height: 110%; /* 88px */ text-transform: uppercase; background: linear-gradient(91deg, #DF5017 0%, #F9CB74 73.52%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } h2 { color: #FFF; font-family: AmadeusAP; font-size: clamp(52px, 7vw, 135px); font-style: normal; font-weight: 400; line-height: 78%; margin-top: clamp(-22px, 2.6vw, -52px); margin-right: -60px; @media(max-width:480px){ margin-right: 0; line-height: 121%; } } } @media(max-width:480px){ width: 85%; } } } .promo-text-line-col { display: flex; flex-direction: column; gap: clamp(24px,2.4vw,42px); } .promo-text-line{ display: flex; align-items: center; gap: 20px; width: 85%; p { color: #FFF; font-family: Gotham Pro; font-size: clamp(16px,1.6vw,30px); font-style: normal; font-weight: 400; line-height: 110%; /* 33px */ text-transform: uppercase; white-space: nowrap; position: relative; } .text-box { width: 425px; flex: 1 0 auto; } .text-box-1 { width: 166px; flex: 1 0 auto; &:before { position: absolute; content: ''; width: 24%; right: -13%; top: 50%; transform: translateY(-50%); height: 3px; background: #F9CB74; border-radius: 25px; } } .text-box-2{ width: 166px; flex: 1 0 auto; } .short-line { width: 100%; max-width: 187px; height: 3px; background: #F9CB74; border-radius: 25px; } .endless-line { height: 3px; border-radius: 25px; background: linear-gradient(to right, #DF5017, #F9CB74); width: 100%; left: 0; } @media(max-width:480px){ display: none; } } .promo-text-line-col-mobile { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; p { color: #FFF; font-family: Gotham Pro; font-size: 18px; font-style: normal; font-weight: 400; line-height: 110%; /* 33px */ text-transform: uppercase; white-space: nowrap; position: relative; display: flex; align-items: center; gap:12px; width: 100%; padding-right: 12px; text-align: end; span { height: 2px; border-radius: 25px; background: linear-gradient(to right, #DF5017, #F9CB74); width: 100%; left: 0; } } @media(min-width:481px){ display: none; } } .promo-slider-block{ display: flex; width: 100%; align-items: center; min-width: 0; z-index: 2; padding: 42px 0; .promo-slider{ display: flex; .swiper-slide { width: fit-content!important; max-width: 290px; // max-height:315px; border-radius:20px; overflow: hidden; picture { display: block; img { width: 100%; @media(max-width:480px){ height:20vw; } } } @media(max-width:480px){ max-height:280px; } @media(max-width:480px){ border-radius: 6.414px; } } } @media(max-width:480px){ padding: 12px 0; } } .promo-bottom { display: flex; align-items: center; justify-content: flex-end; gap: 32px; @media(max-width:1300px){ flex-direction: column; } @media(max-width:1300px){ gap: unset; margin-top:20px; } .promo-bottom-price { display: flex; align-items: center; p { color: #FFF; font-family: AmadeusAP; font-size: clamp(42px,4.5vw,84px); font-style: normal; font-weight: 400; line-height: 110%; span { font-size: clamp(62px,6.2vw,119px); } } } } //promo // promo2 .section-promo-2 { position: relative; } .promo-2-header { display: flex; align-items: center; justify-content: center; h2 { text-align: center; font-size: clamp(29px,2.1vw,40px); font-style: normal; font-weight: 700; line-height: 110%; /* 44px */ text-transform: uppercase; } } .promo-2-wrap { display: flex; justify-content: space-between; margin-top: clamp(28px,1.8vw,35px); ._buttons { display: flex; flex-direction: column; width: 33%; gap: 40px; } ._pictures { display: flex; width: 65%; .__item__pic{ display: none; width: 100%; &.active { display: flex; } img { width: 100%; object-fit:contain; } } } @media(max-width:1024px){ flex-direction: column; ._buttons { width: 100%; } ._pictures{ width: 100%; } } @media(max-width:480px){ ._pictures { display: none; } } } .down-descr { display: flex; p { color: #FFF; font-family: Gotham Pro; font-size: 16px; font-style: normal; font-weight: 400; line-height: 140%; } } /* 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: 30px; transition: all .3s ease!important; &._spec { background: linear-gradient(154deg, #FFA462 0%, #B45350 21.79%, #8A2645 48.93%, #291725 84.55%); } &.shadow { box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.10); // background: linear-gradient(154deg, #FFA462 0%, #B45350 21.79%, #8A2645 48.93%, #291725 84.55%); transition: .3s ease all; background: linear-gradient(90deg, #8A2645 0%, #291725 73.92%); } &.shadow._spec{ background: linear-gradient(154deg, #FFA462 0%, #B45350 21.79%, #8A2645 48.93%, #291725 84.55%)!important; } } button.btn-toggle-show-2 { display: flex; align-items: center; // justify-content: space-between; width: 100%; // background: linear-gradient(94deg, #D9E1FF 0%, #F3F7FF 100%); background: linear-gradient(90deg, #8A2645 0%, #291725 73.92%); border-radius: 10px; transition: .3s ease all; gap: 0 12px; .icon__accordeon { position: relative; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(148deg, #FFF 30.8%, #C1C0C4 57.13%, #86848D 72.92%, #343140 82.7%), #004294; box-shadow: -4px -4px 6px 0px rgba(255, 255, 255, 0.50) inset; filter: drop-shadow(-3px -3px 18px rgba(255, 255, 255, 0.78)) drop-shadow(7px 7px 20px rgba(0, 0, 0, 0.60)); display: flex; align-items: center; justify-content: center; &:before { position: absolute; width: 16px; height: 16px; display: flex; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 18L10 2' stroke='%23282828' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M18 10L2 10' stroke='%23282828' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: contain; content: ''; } &.rotate { &:before { background-image: url("data:image/svg+xml,%3Csvg width='20' height='4' viewBox='0 0 20 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 2.00024L2 2.00025' stroke='%23282828' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); } } } &.active { background: transparent !important; transition: .3s ease all; span { text-shadow: 0px 0px 0.85px currentColor; // color: #343434; } } @media(max-width:480px){ height: 68px; } &._spec { background: linear-gradient(154deg, #FFA462 0%, #B45350 21.79%, #8A2645 48.93%, #291725 84.55%); } } button.btn-toggle-show-2 span { color: #FFF; font-family: Gotham Pro; font-size: clamp(25px,1.6vw,30px); font-style: normal; font-weight: 700; line-height: 110%; /* 33px */ text-transform: uppercase; transition: .3s ease all; @media(max-width:480px){ // max-width: 250px; // text-align: left; } } .p-1 { padding: 32px 50px; @media(max-width:480px){ padding: 40px 20px; } } .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; } } .inner-content ul { display: flex; flex-direction: column; gap: 16px; li { color: #FFF; font-family: Gotham Pro; font-size: clamp(17px,1.2vw,22px); font-style: normal; font-weight: 400; line-height: 120%; /* 26.4px */ list-style-type:disc; span { font-size: 16px; font-weight: 100; } } } .promo-btn { display: flex; width: 260px; padding: 15px 17px; justify-content: center; align-items: center; gap: 15px; border-radius: 30px; background: linear-gradient(91deg, #DF5017 -4.25%, #F9CB74 108.11%); margin-top: clamp(40px,3.8vw,70px); p { color: #FFF; font-family: Gotham Pro; font-size: 24px; font-style: normal; font-weight: 400; line-height: normal; white-space: nowrap; span { color: #FFF; font-family: Gotham Pro; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; } } &.promo-btn-premium{ background: linear-gradient(139deg, #FFF 35.28%, #C1C0C4 65.97%, #86848D 84.39%, #343140 95.79%); box-shadow: -4px -4px 6px 0px rgba(255, 255, 255, 0.50) inset, -3px -3px 18px 0px rgba(255, 255, 255, 0.78), 10px 10px 25px 0px rgba(0, 0, 0, 0.50); p { color:#282828; span { color: #282828; } } svg path { fill: #282828; } } @media(max-width:480px){ margin-left: auto; margin-right: auto; } } .promo-2-mobile-picture { display: none; img {width: 100%;} @media(min-width:480px){ display: none!important; } &.active { display: flex; } } .promo-2-button-block { justify-content: center; margin-top: 42px; @media(max-width:480px){ margin-top: 30px; } } // promo2 // promo3 .section-promo-3-wrap { display: flex; flex-direction: column; } .promo-3-top-pic{ width: 100%; img { width: 100%; } @media(max-width:480px) { display: none; } } .promo-3-top-pic-mob { width: 100%; img { width: 100%; } @media(min-width:481px) { display: none; } } .promo-slider-block-3 { display: flex; width: 100%; align-items: center; min-width: 0; z-index: 2; padding: 42px 0; .promo-slider-3{ display: flex; .swiper-slide { width: fit-content!important; // max-height:315px; border-radius:20px; overflow: hidden; picture { display: block; img { width: 100%; @media(max-width:480px){ height:50vw; } } } @media(max-width:480px){ max-height:280px; } } } } // promo3 //order .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: Gotham Pro; font-size: clamp(24px,2.7vw,50px); font-style: normal; font-weight: 700; line-height: 110%; text-transform: uppercase; background: linear-gradient(91deg, #DF5017 0%, #F9CB74 73.52%); 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; } } } .process-block { display: flex; align-items: center; height: 800px; .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: 28px; position: relative; margin-top: -9%; .process-item { display: flex; gap: 32px; &:nth-child(1){transform: translateX(-17%);} &:nth-child(2){transform: translateX(-3%);} &:nth-child(3){transform: translateX(3%);} &:nth-child(4){transform: translateX(3%);} &:nth-child(5){transform: translateX(-2%);} &: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(204deg, #FFA462 6.62%, #B45350 45.17%, #8A2645 70.56%, #291725 91.85%); ; 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:white; 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:1440px){ gap: 40px; } } @media(max-width:1200px){ height: 100%; flex-direction: column; .right { gap: 20px; margin-top: unset; .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; } } //order //articles .articles-block{ display: flex; gap: 20px; justify-content: space-between; .articles-col{ display: flex; flex-direction: column; gap: 20px; justify-content: space-between; width: 100%; max-width: 460px; .section-promos-header{ margin-bottom: unset; } .article { position: relative; border-radius: 30px; overflow: hidden; padding: 30px 13px; display: flex; flex-direction: column; z-index: 1; height: 416px; justify-content: flex-end; ._bckg{ position: absolute; width: 100%; height: 100%; top: 0; left:0; z-index: -1; img { width: 100%; height: 100%; } } .article-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: 100%; position: relative; transition: 0.1s ease-in-out all; h4 { color: #FFF; text-align: center; font-family: Gotham Pro; font-size: clamp(12px, 1vw, 19px); font-style: normal; font-weight: 700; line-height: 140%; text-transform: uppercase; span { color: #FFF; text-align: center; font-family: Gotham Pro; font-size: clamp(17px, 1.4vw, 28px); font-style: normal; font-weight: 700; line-height: 140%; /* 39.2px */ text-transform: none; } } 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; &.u { background: linear-gradient(91deg, #DF5017 -4.25%, #F9CB74 108.11%); box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px #DF5017; } @media(max-width:480px){ width: 63px; height: 63px; svg { width: 56%; } } } &:hover >i { transform: translateX(5px); } } } } .article-small { position: relative; border-radius: 30px; overflow: hidden; padding: 30px 13px; display: flex; flex-direction: column; z-index: 1; height: 256px; justify-content: flex-end; ._bckg{ position: absolute; width: 100%; height: 100%; top: 0; left:0; z-index: -1; img { width: 100%; height: 100%; } } .article-button { display: flex; align-items: center; a{ border-radius: 50px; padding: 10px 40px; display: flex; align-items: center; flex-direction: column; width: 100%; position: relative; transition: 0.1s ease-in-out all; h4 { color: #FFF; text-align: center; font-family: Gotham Pro; font-size: clamp(12px, 1vw, 19px); font-style: normal; font-weight: 700; line-height: 140%; text-transform: uppercase; } i { position: relative; // width: 75px; display: flex; align-items: center; justify-content: center; transition: 0.3s ease-in-out all; @media(max-width:480px){ // width: 63px; // height: 63px; svg { width: 56%; } } } &:hover >i { transform: scale(1.1); } } } } } @media(max-width:1200px){ flex-direction: column; align-items: center; .articles-col{ max-width: 760px; } } } //articles // seo .slider_seo-next.swiper-button-next, .slider_seo-prev.swiper-button-prev{ color: white!important; &::after{ font-size: 18px!important; } } .slider_seo-prev.swiper-button-prev{ left: 0!important; } .slider_seo-next.swiper-button-next{ right: 0!important; } .seo-slider-block { display: flex; width: 100%; align-items: center; min-width: 0; z-index: 2; padding: 42px 0; position: relative; .seo-slider { display: flex; align-items: center; width: 96%; a { display: flex; flex-direction: column; align-items: center; padding: 10px 26px 20px; border-radius: 16px; border: 1px solid #FFF; h3 { color: #FFF; text-align: center; font-family: Gotham Pro; font-size: clamp(12px, 1vw, 19px); font-style: normal; font-weight: 400; line-height: 140%; /* 26.6px */ } } @media(max-width:1200px){ width: 85%; } } } // seo .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: 12px 0; .copyright { display: flex; align-items: center; gap: 22px; justify-content: center; p { // color: #000; font-family: Gotham Pro; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; } } .pagelinks { display: flex; align-items: center; justify-content: center; .pagelink { color: #000; font-family: Gotham Pro; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; } } @media(max-width:1024px){ padding: 24px 0; } } // promotions .promotion-banner{ margin-top:-3px; position: relative; background: linear-gradient(123deg, #8A2645 4.42%, rgba(138, 38, 69, 0.19) 32.59%, rgba(138, 38, 69, 0) 52.74%), linear-gradient(90deg, #282533 67.64%, rgba(40, 37, 51, 0) 100%); } .promotion-banner-bckg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; img { width: 100%; height: 100%; @media(max-width: 480px){ object-position: 60%; } } } .promotion-banner-wrap { position: relative; width: 100%; height: 100vh; max-height: 601px; display: flex; align-items: center; z-index: 2; .promotion-banner-title { display: flex; flex-direction: column; width: 340px; gap: 7px; h1 { font-size: clamp(42px, 3.7vw, 72px); font-style: normal; font-weight: 500; line-height: 110%; text-transform: uppercase; } .line { position: relative; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.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; } } @media(max-width:480px){ width: fit-content; } } } .promo-icons-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding-right: 9%; margin-top: clamp(12px,1.8vw,30px); .promo-icon { display: flex; align-items: center; width: 100%; max-width: 100px; img { width: 100%; } } @media(max-width:480px){ gap:4px; padding-right: unset; .promo-icon { max-width: 35px; } } } .promo-pictures-wrap { display: flex; align-items: center; gap: 10px; margin-top: clamp(12px,1.2vw,20px); .promo-pic { display: flex; align-items: center; img { width: 100%; } } @media(max-width:480px){ gap: 5px; } } .promo-bottom-margin { margin-top:clamp(32px,2.6vw,48px); gap: 32px!important; } .promo-bottom-element { display: flex; align-items: center; width: 340px; padding: 9px 31px; position: relative; border-radius: 50px; border: 2px solid #FFF; // box-shadow: 4px 4px 20px 0px rgba(255, 255, 255, 0.80); .__left { display: flex; flex-direction: column; align-items: center; h2 { color: #FFF; text-align: center; font-family: "Gotham Pro"; font-size: 30px; font-style: normal; font-weight: 400; line-height: 140%; /* 42px */ text-transform: uppercase; } p { color: #FFF; font-family: "Gotham Pro"; font-size: 19px; font-style: normal; font-weight: 400; line-height: 140%; text-transform: uppercase; } } .__right { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; right: -4px; // gap:12px; // top: 50%; // transform: translateY(-50%); width: 89px; height: 89px; box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset; background: linear-gradient(91deg, #DF5017 -4.25%, #F9CB74 108.11%); border-radius: 50%; padding-top: 15px; filter: drop-shadow(4px 4px 20px #DF5017); p { span { text-align: center; font-family: "Gotham Pro"; font-size: 62px; font-style: normal; font-weight: 400; // line-height: 140%; text-transform: uppercase; } color: #FFF; text-align: center; font-family: "Gotham Pro"; font-size: 16px; font-style: normal; font-weight: 400; // line-height: 140%; /* 22.4px */ text-transform: uppercase; } } } .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%; } video { object-fit: cover; width: 100%; height: 100%; } @media(max-width:480px){ height: 520px; img{ object-position: 0; transition: 0.25s ease all; animation: postsMove 23s linear infinite; &.reverse { object-position: 100%; animation: postsMoveRev 23s linear infinite; } } video { object-position: 0; transition: 0.25s ease all; animation: postsMove 23s linear infinite; } } } } .val-block { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(24px,3.3vw,62px); gap:20px; @media(max-width:768px) { flex-direction: column; gap:25px } } .validity-wrap { display: flex; align-items: center; width: 460px; padding: 13px 23px; position: relative; border-radius: 50px; border: 2px solid #FFF; flex: 1 0 auto; .validity-wrap-title { display: flex; align-items: center; p{ color: #FFF; font-family: "Gotham Pro"; font-size: 19px; font-style: normal; font-weight: 400; line-height: 140%; text-transform: uppercase; text-align: center; span { font-size: 30px; } } } .date { position: absolute; right: -1%; width: 230px; height: 89px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50px; background: linear-gradient(92deg, #8A2645 0%, #291725 100%); box-shadow: 4px 4px 6px 0px rgba(255, 255, 255, 0.50) inset, 4px 4px 20px 0px #8A2645; padding-top: 15px; p { span { font-size: 62px; } color: #FFF; text-align: center; font-family: "Gotham Pro"; font-size: 19px; font-style: normal; font-weight: 400; line-height: 140%; text-transform: uppercase; } } @media(max-width:480px){ width: 300px; align-self: center; .validity-wrap-title p { font-size: 13px; span { font-size: 22px; } } .date { width: 140px; height: 70px; p span { font-size: 32px; } } } &.validity-wrap-right{ align-self: flex-end; } } .validity-desc { display: flex; align-items: center; max-width: 940px; p { color: #FFF; font-family: "Gotham Pro"; font-size: clamp(15px,1.3vw,21px); font-style: normal; font-weight: 400; line-height: 140%; @media(max-width:480px){ text-align:center; } } } .promo-btn-block { justify-content: center; } .section-promotion1-phone { bottom: unset!importnant; top: 10%; } .section-faq-wrap-promo { gap:30px; } // promotions // single-article-seo .single-hero{ margin-top: -3px; position: relative; background: linear-gradient(123deg, #8A2645 4.42%, rgba(138, 38, 69, 0.19) 32.59%, rgba(138, 38, 69, 0) 52.74%), linear-gradient(90deg, #282533 67.64%, rgba(40, 37, 51, 0) 100%); } .hero-image-block { position:absolute; width:100%; height:100%; display:flex; .promotion-banner-bckg { position:absolute; display: flex; width:100%; top:0; left:0; height:100%; z-index:2; img { width:100%; height:100%; } } .promotion-banner-picture{ position:relative; display: flex; width:57%; margin-left:auto; margin-right:0; img { width:100%; height:100%; position:absolute; } @media(max-width:480px){ display:none; } } } .single-hero-wrap { position: relative; width: 100%; height: 100vh; max-height: 601px; display: flex; align-items: center; z-index: 3; .single-hero-title{ display: flex; flex-direction: column; width: 60%; gap: 7px; h1 { font-size: clamp(24px, 2.7vw, 52px); font-style: normal; font-weight: 500; line-height: 110%; text-transform: uppercase; } .line { position: relative; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.8); display: flex; &: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; } } @media(max-width:1400px){ width: 50%; } @media(max-width:480px){ width: 100%; } } @media(max-width:480px){ max-height:301px; } } .single-content { position: relative; } .single-contetn-wrap { display:flex; flex-direction: column; margin: clamp(32px,5.2vw,102px) auto; p { padding: clamp(7px,1.2vw,21px) 0; font-size:clamp(16px,1.2vw,22px); font-weight:100; line-height:140%; } ul { padding-inline-start: 40px!important; li { list-style-type: inherit; font-size:clamp(16px,1.2vw,22px); font-weight:100; line-height:140%; } } ol { padding-inline-start: 40px!important; li { list-style-type: inherit; font-size:clamp(16px,1.2vw,22px); margin-bottom:clamp(6px,.6vw,12px); font-weight:100; line-height:140%; &:last-child{ margin-bottom: unset; } } } } .single-button { margin-top:clamp(1rem,2vw,2.5rem); justify-content: center; } // single-article-seo /* promotion */ .promotion__section { position: relative; height: 601px; padding: 0; } .promotion__title { position: relative; top: -360px; padding-left: 250px; text-transform: uppercase; font-size: 72px; font-weight: 500; line-height: 79.2px; } .promotion__title::after { position: absolute; content: url(../images/Line1.svg); left: 250px; bottom: -41px; } /* presentation */ .presentation__section { padding: 100px 0 28px; } .presentation__container { position: relative; display: flex; flex-direction: column; } .presentation__title_main { width: fit-content; background: rgb(223, 80, 23); background: linear-gradient( 100deg, rgba(223, 80, 23, 1) 0%, rgba(249, 203, 116, 1) 50% ); margin-bottom: 10px; font-size: 80px; line-height: 88px; letter-spacing: 0.8px; font-weight: 500; text-transform: uppercase; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .presentation__descr { padding-left: 240px; margin-bottom: 30px; font-size: 40px; font-weight: 400; line-height: 44px; letter-spacing: 4.6px; text-transform: uppercase; background-image: url(../promotion-3/Line2.svg); background-repeat: no-repeat; background-position: left center; } .presentation__descr_bold { font-weight: 700; } .presentation__descr_cost { position: absolute; top: 49px; padding-left: 20px; font-family: AmadeusAP; font-size: 83.99px; line-height: 92.39px; letter-spacing: -0.4px; text-transform: lowercase; } .presentation__descr_cost-big { font-size: 119.27px; line-height: 131.2px; } .presentation__date { position: relative; align-self: flex-end; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 459px; height: 92px; padding: 0 244px 7px 26px; color: var(--white); border: 2px solid var(--white); border-radius: 50px; font-size: 19px; text-transform: uppercase; } .presentation__date_left-top { font-size: 30px; } .presentation__date_right { position: absolute; display: flex; gap: 10px; align-items: baseline; padding-top: 37px; padding-left: 35px; width: 268px; height: 140px; right: -26px; top: -22px; background-image: url(../images/button-background.webp); background-repeat: no-repeat; background-position: center center; background-size: 101%; } .presentation__date_right-big { font-size: 62px; font-weight: 500; line-height: 68px; } .presentation__block { position: relative; display: flex; justify-content: flex-end; height: 555px; } .presentation__figure { position: absolute; left: 0; width: 1180px; } .presentation__title { position: relative; left: 0; width: 340px; margin-right: 120px; padding-top: 182px; text-align: right; font-size: 40px; font-weight: 500; line-height: 120%; text-transform: uppercase; } .presentation__title::after { position: absolute; content: url(../images/Line3.svg); right: -370px; top: 185px; } @media (max-width: 940px) { .presentation__title_main { font-size: 35px; line-height: 50px; margin-bottom: 20px; } .presentation__descr { font-size: 20px; margin-bottom: 25px; padding-left: 145px; line-height: 12px; letter-spacing: 2.6px; } } @media (max-width: 765px) { .presentation__title_main { font-size: 30px; align-self: center; } .presentation__descr { padding-left: 0; margin-bottom: 70px; align-self: center; background-image: none; font-size: 16px; letter-spacing: 0.5px; } .presentation__descr_cost { display: block; width: 103px; font-size: 17px; top: 55px; right: auto; left: auto; padding: 0; margin-left: 76px; } .presentation__descr_cost-big { font-size: 30px; } } @media (max-width: 480px) { .presentation__title { position: static; } } .desctop { @media(max-width:480px){ display: none!important; } } .mobile { @media(min-width:481px){ display: none!important; } } .promo-3-single-pic { display:flex; justify-content: flex-end; margin-bottom: -6%; img { width: 100%; max-width: 1670px; } } .promo-3-single-big-pic img{ width: 100%; }