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