/* 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: #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; color: black; 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(94deg, #E3D9FF 0%, #FEF3FF 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, #E3D9FF 0%, #FEF3FF 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, #E3D9FF 0%, #FEF3FF 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, #E3D9FF 0%, #FEF3FF 100%); backdrop-filter: blur(2px)!important; -webkit-backdrop-filter: blur(2px); box-shadow: 8px 8px 20px rgb(0 0 0 / 7%); background-size: 200% 200%; transition: all .7s ease; z-index: 114; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-100vh); padding-top: 10vh; // div { // display: flex; // flex-direction: column; // align-items: center; // justify-content: flex-start; // gap:24px; // } } .header-links { display: flex; flex-wrap:wrap; // align-items: center; justify-content: space-evenly; width: 100%; gap: 6px; // @media(max-width:992px){ // display: none; // } ._item { display: flex; flex-direction: column; align-items: center; gap:8px; max-width: 135px; @media(max-width:380px){ max-width: 105px; } .pic { display: flex; position: relative; box-shadow: 4px 4px 14px 0px rgba(0, 0, 0, 0.10); border-radius: 24px; overflow: hidden; width: 100%; img { width: 100%; } } p { border-radius: 14px; background: linear-gradient(272deg, rgba(255, 255, 255, 0.50) -65.15%, rgba(255, 255, 255, 0.00) 86.4%); box-shadow: 4px 4px 14px 0px rgba(0, 0, 0, 0.10); backdrop-filter: blur(35px); text-align: center; font-size: clamp(16px,1.2vw,20px); font-style: normal; font-weight: 400; line-height: 22px; /* 110% */ text-transform: uppercase; width: 100%; height: 38px; display: flex; justify-content: center; align-items: center; } } .header-socials { display: flex; flex-direction: column; gap: 16px; a { display: flex; align-items: center; justify-content: center; filter: drop-shadow(12px 5px 27px rgba(0, 0, 0, 0.19)) drop-shadow(46px 18px 50px rgba(0, 0, 0, 0.17)) drop-shadow(105px 41px 67px rgba(0, 0, 0, 0.10)) drop-shadow(186px 73px 80px rgba(0, 0, 0, 0.03)) drop-shadow(291px 113px 87px rgba(0, 0, 0, 0.00)); } } } .row { flex-direction: row!important; } .top__contacts { display: flex; justify-content: center; width: 100%; ul { display: flex; flex-direction: column; gap: 1rem; align-items: center; width: 80%; font-style: normal; font-size: 20px; line-height: 24px; text-align: center; li a { display: flex; align-items: center; gap: 12px; svg path{ fill: #333333; } p { font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; white-space: nowrap; } } } } ._open_up { transform: translateY(0); } .top__navigation__hidden { display: flex; flex-direction: column; align-items: center; } .toplink_h { padding: 8px; font-style: normal; font-weight: 400; font-size: 18px; line-height: 21px; letter-spacing: 0.2em; text-transform: uppercase; } .hidden_catalog { display: flex; flex-direction: column; align-items: center; } .hidden_catalog a { padding: 8px; font-style: normal; font-weight: 400; font-size: 18px; line-height: 21px; letter-spacing: 0.2em; text-transform: uppercase; display: flex; align-items: center; gap: 1rem; } /* */ // keyframes @keyframes toTheLeft { 0% { transform: 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; background: #09101A; 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: center; z-index: 3; width: 100%; height: 100vh; max-height: 1020px; padding-top: 100px; .main-banner_left{ display: flex; width: 53%; @media(max-width:480px) { height: 100%; } .main-banner_left_text { display: flex; flex-direction: column; .title-block { display: flex; flex-direction: column; gap: 26px; h1 { color: #FFF; font-size: clamp(38px,4vw,72px); font-style: normal; font-weight: 700; line-height: 110%; text-transform: uppercase; } .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: 100; text-transform: uppercase; } .taglines-wrap-spec { font-weight: 700; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 17px; overflow: hidden; width: 260px; height: 58px; margin: 0 12px; box-shadow: 2px 2px 16px 0px #3ED7FF; transition: box-shadow 0.3s ease-in-out; animation: shadowChange 5.5s infinite alternate ease-in-out; // background: linear-gradient(16deg, #BD485B, #4FC4E3); &::before { position: absolute; display: block; content: ''; width:100%; height:100%; top:0; left:0; background-image: url("data:image/svg+xml,%3Csvg width='260' height='58' viewBox='0 0 260 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='258' height='56' rx='16' stroke='url(%23paint0_linear_321_966)' stroke-width='2'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_321_966' x1='281.361' y1='10.3111' x2='8.40112' y2='53.2029' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%234FC4E3'/%3E%3Cstop offset='1' stop-color='%23BD485B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } p { top: 2px; left: 2px; height: calc(100% - 2px * 2); width: calc(100% - 2px * 2); border-radius: 15px; display: flex; align-items: center; justify-content: center; background: transparent; // background: #09101A; padding: 14px 16px; position: absolute; z-index: 1; } @media(max-width:480px){ width: 134px; height: 30px; margin: 0 3px; border-radius: 8px; } } @media(max-width:1300px){ gap: 20px 12px; } @media(max-width:480px){ gap: 2px 4px; } } @media(max-width:480px){ gap: 15px; } } .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,36px); font-style: normal; font-weight: 400; line-height: 120%; text-transform: uppercase; } p { color: #FFF; text-align: center; font-size: clamp(13px,.7vw,16px); font-style: normal; font-weight: 100; line-height: 120%; /* 19.2px */ } } span { position: relative; width: 1px; // height: 100%; background-color: white; margin-left: 42px; margin-right: 42px; @media(max-width:480px){ margin-left: 12px; margin-right: 12px; display: none; } } @media(max-width:480px){ gap: 30px; } } .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){ align-items:flex-end; padding-bottom: 5%; padding-top: 130px; } } } .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: 700; line-height: normal; display: flex; padding: 24px 52px; justify-content: center; align-items: center; border-radius: 40px; 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: 20px 16px; width: 100%; gap:20px; width: 220px; svg { width: 33px; } } } } .section-mini { position: relative; padding: 35px 0; @media(max-width:480px) { padding: 16px 0; } } .section-2 { position: relative; overflow: hidden; padding: 72px 0; .section-2-inner { display: flex; align-items: center; justify-content: center; position: relative; z-index: 5; .section2-price-area { background: linear-gradient(91deg, #8D00FF 0.18%, #CF3DFF 99.84%); -webkit-background-clip: text; /* For Safari/Chrome/iOS */ background-clip: text; color: transparent; position: absolute; font-size: clamp(13px,1.2vw,26px); text-transform: uppercase; opacity:0; font-weight:700; } #section2avatarPrice { top: 10%; left: 13%; @media(max-width:480px){ left: 15%; top: 0; } } #section2highlightsPrice { bottom: 20%; left: 11%; @media(max-width:1024px){ left: 12%; } @media(max-width:768px){ left: 10%; bottom: 15%; } @media(max-width:480px){ bottom: 10%; } } #section2storyPrice{ top: 1%; right: 4%; @media(max-width:768px){ right: 0; } @media(max-width:480px){ top:-5%; } } #section2postsPrice { bottom: 45%; right: 10%; @media(max-width:1024px){ right: 15%; } @media(max-width:768px){ right: 10%; bottom: 10%; } @media(max-width:480px){ right: 5%; bottom: 8%; } } picture img { width: 100%; height: 100%; z-index: 6; } #section2avatar { top: 15%; left: 7%; @media(max-width:1400px){ top: 17%; left: 5%; } @media(max-width:1200px){ left: 0; } } #section2highlights { bottom: 32%; left: 14%; @media(max-width:1400px){left: 12%;} @media(max-width:1200px){ left: 7%; } } #section2posts { bottom: 30%; right: 14%; @media(max-width:1400px){right: 12%;} @media(max-width:1200px){right: 7%;} } #section2story { top: 33%; right: 7%; @media(max-width:1400px){right: 5%;} @media(max-width:1200px){right: 0;} } .section2-hover-area { position: absolute; width: 150px; height: 150px; z-index: 10; cursor: url("/wp-content/themes/insta-creat/src-insta/section-2/custom-cursor.svg"), auto; @media(max-width:480px){ width: 60px; height: 60px; } } #section2avatarpic{ position: absolute; top: 2%; left: 5%; max-width: 134px; max-height: 134px; display: flex; opacity: 0; transition: .4s ease all; z-index: 3; img { width: 100%; height: 100%; } @media(max-width:1200px) { max-width: 115px; left: 0; } @media(max-width:1024px) { max-width: 100px; } @media(max-width:1024px) { max-width: 60px; } @media(max-width:480px) { max-width: 40px; } @media(max-width:380px) { max-width: 35px; } } #section2highlightspic { position: absolute; max-width: 420px; max-height: 365px; bottom: 20%; left: 0; display: flex; opacity: 0; transition: .4s ease all; z-index: 3; img { width: 100%; height: 100%; } @media(max-width:1200px) { max-width: 360px; } @media(max-width:1024px) { max-width: 280px; } @media(max-width:768px){ max-width: 150px; } @media(max-width:480px){ max-width: 120px; } @media(max-width:380px){ max-width: 110px; } } #section2storypic{ position: absolute; display: flex; opacity: 0; transition: .4s ease all; z-index: -1; max-width: 190px; max-height: 290px; top: 5%; right: 6%; img { width: 100%; height: 100%; } @media(max-width:1200px) { max-width: 170px; right: 1%; } @media(max-width:1024px) { max-width: 140px; } @media(max-width:768px){ max-width: 100px; } @media(max-width:480px){ max-width: 55px; } @media(max-width:380px){ max-width: 45px; } } #section2postspic { position: absolute; max-width:380px; max-height: 340px; bottom: 0; right: 0; display: flex; opacity: 0; transition: .4s ease all; z-index: -1; img { width: 100%; height: 100%; } @media(max-width:1200px){ max-width: 250px; bottom: 2%; right: 0; } @media(max-width:1024px){ max-width: 220px; bottom: 15%; right: -7px; } @media(max-width:768px){ max-width: 175px; max-height: 300px; bottom: 12%; right: -2%; } @media(max-width:480px){ max-width: 100px; } } } @media(max-width:480px) { display: none; } } .opacity-picture { opacity: 1!important; } .section2-button{ @media(max-width:768px){ margin-top: 1rem; } } .section-2-mobile{ position: relative; img { width:100%; height:100%; } @media(min-width:480px){ display:none; } } .double-wrap { display:flex; align-items: center; gap: 20px; .avatars-block { width: 50%; } @media(max-width:1200px){ flex-direction: column; .avatars-block { width: 100%; } } } .avatars-block { display: flex; flex-direction: column; gap: 32px; @media(max-width:480px){ gap: 20px; } .text-wrap { flex-direction: column; display: flex; gap: clamp(20px,2vw,32px); border-radius: 20px; background: linear-gradient(94deg, #E3D9FF 0%, #FEF3FF 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(21px,1.8vw,30px); font-style: normal; font-weight: 700; line-height: 24px; } p { color: #000; font-size: clamp(16px,1.2vw,20px); font-style: normal; font-weight: 100; line-height: 140%; /* 28px */ } } .icons-wrap{ display: flex; align-items: center; gap: 24px; justify-content: center; ._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);); } &.hide{ @media(max-width:480px){ display: none; } } } @media(max-width:480px){ // flex-wrap: wrap; justify-content: space-between; gap: 9px; margin-bottom: 24px; ._icon { max-width: 78px; } } } } .buttons-block { display: flex; align-items: center; gap: 20px; overflow: scroll; padding-bottom: 20px; padding-right: 12px; .switch__button, .switch-resize { min-width: 210px ; padding: 13px 20px; border-radius: 12px; border: 2px solid #FFF; transition: .25s ease all; cursor: pointer; color: #303030; font-family: Gotham Pro; font-size: 20px; font-style: normal; font-weight: 100; line-height: 24px; text-align: center; &.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%; } 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; } } } } .section-photostocks{ background: url(../src-insta/license-bckg.png); background-size: cover; background-repeat: no-repeat; background-position:center center; } .section-photostocks-bckg { position: absolute; width: 100%; height: 100%; } .section-photostocks-wrap { display: flex; flex-direction: column; gap: clamp(18px,1.7vw,32px); p { color: #FFF; font-size:clamp(18px,1.6vw,24px); font-style: normal; font-weight: 400; line-height: 140%; } .section-photostocks-wrap-items { display: flex; align-items: center; justify-content: center; gap:22px; overflow: scroll; .item { display: flex; width: 100%; max-width: 225px; border-radius: 12px; padding: 0 22px 20px 0; flex: 1 0 auto; img { width: 100%; height: 100%; filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.25)); } @media(max-width:480px){ padding: 0; width: 45%; } } &::-webkit-scrollbar { display: none; } @media(max-width:1024px){ justify-content: flex-start; } @media(max-width:480px){ flex-wrap: wrap; overflow: hidden; } } @media(max-width:768px){ margin: 16px 0; } } .resize-block { position: relative; padding: 50px 80px; border-radius: 30px; background: linear-gradient(94deg, #E3D9FF 0%, #FEF3FF 100%); box-shadow: 12px 7px 25px 0px rgba(0, 0, 0, 0.15); display: flex; height: 800px; ._left{ position: absolute; height: 110%; top: -5%; left: -8%; z-index: 0; img { width:100%; height: 100%; }} .resize-block-wrap { display: flex; justify-content: flex-end; width: 100%; z-index: 3; ._right { display: flex; flex-direction: column; width: 50%; justify-content: space-between; height: 85%; ._top { display: flex; flex-direction: column; gap: clamp(16px,1.8vw,32px); p{ color: #000; font-size: clamp(16px,1.2vw,20px); font-style: normal; font-weight: 100; line-height: 140%; text-transform: math-auto; span { color: #F00; font-weight: 700; } } .resize-buttons-block { // @media(max-width:902px){justify-content: center;} @media(max-width:480px){ flex-direction: column; .switch-resize { padding: 8px 20px; } } } } .resize-content { display: none; .__item { display: flex; flex: 1 0 auto; position:relative; overflow: hidden; width: 50%; .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%; } } &.visible { display: flex; height: 100%; padding-top:52px; @media(max-width:480px){ min-height: 270px; } } &.resize-content-2 { position:relative; } &.resize-content-2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='47' viewBox='0 0 86 47' fill='none'%3E%3Cpath d='M42.581 0.845807C56.4527 0.668313 73.1481 12.5314 80.9469 26.2045C80.9964 25.8374 81.0343 25.4875 81.1009 25.1321C81.4486 23.0393 84.6176 23.1673 84.4528 25.3594C84.2686 27.7638 84.1537 30.1401 84.0846 32.5226C84.1261 32.9767 84.1964 33.4253 84.2551 33.891C84.7556 35.5841 85.1355 37.2704 85.286 38.9257C85.3854 39.9201 84.805 40.552 84.1138 40.7579C84.1273 41.1427 84.1237 41.516 84.1371 41.9009C84.1966 43.4692 82.0676 43.8738 81.1641 42.8831C77.0214 38.3356 72.8841 33.8168 68.7414 29.2692C67.258 27.6586 69.8523 25.4667 71.3357 27.0774C74.4441 30.4952 77.5525 33.9131 80.6725 37.3138C80.667 36.1078 80.6615 34.9018 80.6847 33.6904C75.3197 18.3924 55.3464 2.21973 40.0698 3.94579C19.9347 6.22264 6.4254 28.2371 2.14835 45.8146C1.95683 46.611 0.580966 46.3509 0.721135 45.5195C3.71693 26.2185 20.7251 1.125 42.5755 0.817041L42.581 0.845807Z' fill='%23646464'/%3E%3C/svg%3E"); background-repeat:no-repeat; position: absolute; content:''; display: block; width: 72.657px; height: 66.736px; left: 52%; top: 5%; transform: translateX(-50%); background-size: contain; @media(max-width:480px){ top:10%; } } } } } @media(max-width:1300px){ height: 100%; padding: 20px 13px 20px 40px; .resize-block-wrap ._right { width: 60%; .resize-content .__item { flex:unset; } } } @media(max-width:902px){ ._left { display: none; } .resize-block-wrap ._right { width: 100%; .resize-content { justify-content: space-around; } } } } // .image-container:hover .original-image { // transform: translateY(-100%); // height: 0; // } // .image-container:hover .hover-image { // transform: translateY(0); // height: 100%; // } .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, #E3D9FF 0%, #FEF3FF 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(8px,1.6vw,32px); h3 { color: #303030; 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%; } } } .section-header { display: flex; align-items: center; justify-content: center; h2 { color: #303030; font-size: clamp(24px,2.2vw,40px); font-style: normal; font-weight: 700; line-height: 140%; /* 56px */ @media(max-width: 480px){ max-width: 302px; text-align: center; } } &.faq-header { margin-bottom: clamp(16px,2.2vw,32px); } } /* ACCORDEON______________________________________*/ .section-faq-wrap { display: flex; flex-direction: column; gap: 12px; } span { cursor: pointer; } i { cursor: pointer; } button { background: transparent; outline: none; border: none; transition: .3s ease; } .para-hide { display: none; } button i { font-size: 1rem; transition: .3s ease; } .accordion { border-radius: 10px; background: white; transition: .3s ease!important; &.shadow { box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.10); } } button.btn-toggle-show { display: flex; align-items: center; justify-content: space-between; width: 100%; background: linear-gradient(91deg, #E3D9FF 0.18%, #FEF3FF 99.84%); border-radius: 10px; transition: .3s ease all; gap: 0 12px; &.active { background: white !important; transition: .3s ease all; span { text-shadow: 0px 0px 0.85px currentColor; } } @media(max-width:480px){ height: fit-content; } } button.btn-toggle-show span { font-style: normal; font-weight: 400; font-size: clamp(16px,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: 1.2rem; } .accordion:last-child { margin: 0; } .inner-content p { color: #000; font-size: clamp(15px,.9vw,17px); font-style: normal; font-weight: 100; line-height: 140%; } .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: 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; } } // 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 .price-button { display:flex; align-items: center; a { display: flex; align-items: center; justify-content: center; width: 240px; height: 54px; border-radius: 30px; // background: linear-gradient(96deg, #67D1F2 0%, #ADE3FF 48.01%, #E8F7FF 99.11%); background: linear-gradient(91deg, #8D00FF 0.18%, #CF3DFF 99.84%); gap: 15px; color: white; p{ // color: #061827!important; font-size: 15px; font-weight: 100; color: white!important; span { font-size: 24px; font-weight: 400; line-height: normal; } } } }