1524 lines
26 KiB
CSS
1524 lines
26 KiB
CSS
html,
|
|
body,
|
|
* {
|
|
cursor: url("../img/Cursorpointer.png") 16 16, auto !important;
|
|
}
|
|
|
|
a:hover,
|
|
button:hover,
|
|
input[type="submit"]:hover,
|
|
input[type="button"]:hover,
|
|
[role="button"]:hover,
|
|
label:hover,
|
|
summary:hover {
|
|
cursor: url("../img/Cursorhover.png") 16 16, pointer !important;
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: 'Adieu-Regular';
|
|
src: url(../fonts/Adieu-Regular.ttf);
|
|
}
|
|
@font-face {
|
|
font-family: 'Aktiv-Grotesk-Ex';
|
|
src: url(../fonts/Aktiv-Grotesk-Ex.ttf);
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: 'Aktiv-Grotesk-Ex-Bold';
|
|
src: url(../fonts/Aktiv-Grotesk-Ex-XBold.ttf);
|
|
}
|
|
|
|
|
|
/* Base CSS */
|
|
a:focus {
|
|
outline: 0 solid
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0 0 15px;
|
|
color: #F5F5F5;
|
|
}
|
|
|
|
|
|
body {
|
|
color: #F5F5F5;
|
|
font-weight: 400;
|
|
background-color: #121212;
|
|
font-family: 'Aktiv-Grotesk-Ex';
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.selector-for-some-widget {
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
ul{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
a, button, input, textarea{
|
|
outline: none !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.container{
|
|
max-width: 1250px;
|
|
}
|
|
|
|
|
|
|
|
/*------------ Header Area Start ----------*/
|
|
|
|
header {
|
|
padding-top: 70px;
|
|
padding-bottom: 50px;
|
|
}
|
|
header {
|
|
position: sticky;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
}
|
|
.header-wrapper {
|
|
padding: 0 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 170px;
|
|
}
|
|
.site-logo a {
|
|
display: inline-block;
|
|
}
|
|
.site-logo {
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
}
|
|
.header-wrapper a {
|
|
text-decoration: none;
|
|
transition: .3s;
|
|
font-size: 16px;
|
|
color: #D9D9D9;
|
|
display: inline-block;
|
|
padding: 2px 30px;
|
|
}
|
|
.header-wrapper a:hover{
|
|
color: #4050FF;
|
|
}
|
|
.mobile-nav{
|
|
display: none;
|
|
}
|
|
.logo-sm img {
|
|
width: 100px;
|
|
}
|
|
|
|
.sticky {mix-blend-mode: difference;}
|
|
|
|
/*------------ Header Area End ----------*/
|
|
|
|
|
|
|
|
|
|
/*------------ Hero Area Start ----------*/
|
|
.hero-area {
|
|
position: relative;
|
|
}
|
|
.hero-area .container{
|
|
padding: 0px;
|
|
}
|
|
.hero-video {
|
|
width: 100%;
|
|
height: 900px;
|
|
object-fit: cover;
|
|
}
|
|
.project-video{
|
|
display: block;
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
.slide-menu {
|
|
display: none;
|
|
}
|
|
.lets-talk-btn {
|
|
position: absolute;
|
|
left: 35px;
|
|
bottom: 50px;
|
|
z-index: 1;
|
|
display: inline-block;
|
|
color: #f5f5f5;
|
|
padding: 0px 0;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
transition: .3s;
|
|
text-transform: uppercase;
|
|
font-size: 13.70px;
|
|
}
|
|
.lets-talk-btn:hover{
|
|
color: #fff;
|
|
}
|
|
.language-action {
|
|
position: absolute;
|
|
bottom: 50px;
|
|
right: 35px;
|
|
z-index: 2;
|
|
display: inline-block;
|
|
}
|
|
.language-action ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.language-action ul li {
|
|
display: block;
|
|
margin: 2px 0;
|
|
}
|
|
.language-action li button {
|
|
border: none;
|
|
background: transparent;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 15px;
|
|
color: #f5f5f5;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
}
|
|
.language-action li button:hover{
|
|
color: #fff;
|
|
}
|
|
.language-action li.active button{
|
|
color: #fff;
|
|
}
|
|
/*------------ Header Area End ----------*/
|
|
|
|
|
|
|
|
|
|
|
|
/*------------ Showcase Area Start ----------*/
|
|
|
|
.showcase-area {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: auto;
|
|
padding-top: 150px;
|
|
padding-bottom: 150px;
|
|
transition: .3s;
|
|
}
|
|
.card-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 400px;
|
|
overflow: hidden;
|
|
}
|
|
.card {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
width: 260px;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
|
|
}
|
|
.card img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.section-title {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
}
|
|
.section-title h2 {
|
|
font-size: 64px;
|
|
line-height: 110%;
|
|
font-weight: normal;
|
|
}
|
|
.section-title h2 span {
|
|
color: #FFDFF0;
|
|
}
|
|
.section-title h2 b {
|
|
font-weight: unset;
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.showcase-title{
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
margin-bottom: 50px;
|
|
}
|
|
.bottom-title {
|
|
text-align: center;
|
|
}
|
|
|
|
.bottom-title h4 {
|
|
font-size: 40px;
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.bottom-title h4 span{
|
|
font-family: 'Aktiv-Grotesk-Ex';
|
|
|
|
}
|
|
.bottom-title{
|
|
margin-top: 100px;
|
|
}
|
|
.common-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0 15px;
|
|
color: #FFDFF0;
|
|
font-size: 24px;
|
|
transition: .3s;
|
|
text-decoration: none;
|
|
font-family: 'Aktiv-Grotesk-Ex';
|
|
justify-content: center;
|
|
}
|
|
.common-btn:hover{
|
|
color: #fff
|
|
}
|
|
.common-btn span {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
border-radius: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(255, 223, 240, 0.1);
|
|
transition: .3s;
|
|
transform: rotate(0deg);
|
|
position: relative;
|
|
|
|
}
|
|
a.common-btn:hover span {
|
|
transform: rotate(45deg);
|
|
}
|
|
.btn-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.showcase-slider {
|
|
margin: 0 auto;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
|
|
.slider-wrap {
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
.showcase-item{
|
|
position: relative;
|
|
transition: .3s;
|
|
width: 255px;
|
|
object-fit: cover;
|
|
height: 400px;
|
|
transform-origin: center bottom;
|
|
margin: 40px 0;
|
|
}
|
|
.showcase-item img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
height: 100%;
|
|
position: relative;
|
|
transition: .3s;
|
|
}
|
|
.showcase-item:nth-child(3){
|
|
width: 340px;
|
|
height: 440px;
|
|
z-index: 5;
|
|
transform: rotate(-1.85deg);
|
|
}
|
|
.showcase-item:nth-child(1) {
|
|
transform: rotate(3.44deg);
|
|
margin-right: -40px;
|
|
}
|
|
.showcase-item:nth-child(2) {
|
|
transform: rotate(-4.78deg);
|
|
margin-right: -80px;
|
|
}
|
|
.showcase-item:nth-child(4) {
|
|
transform: rotate(1.70deg);
|
|
margin-left: -30px;
|
|
z-index: 2;
|
|
height: 360px;
|
|
}
|
|
.showcase-item:nth-child(5) {
|
|
transform: rotate(-7.75deg);
|
|
margin-left: -40px;
|
|
z-index: 1;
|
|
height: 390px;
|
|
}
|
|
|
|
.showcase-gellary-wrap{
|
|
display: none
|
|
}
|
|
|
|
/*------------ Showcase Area End ----------*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*------------ Brief Area Start ----------*/
|
|
.brief-area{
|
|
padding: 150px 0;
|
|
background: linear-gradient(100deg, rgba(255, 255, 255, 1) 0%, rgba(251, 224, 238, 1) 100%);background: linear-gradient(135deg, #ffffff 0%, #fdf0f5 100%);
|
|
overflow: hidden;
|
|
padding-bottom: 100px;
|
|
}
|
|
.brief-title{
|
|
margin-bottom: 80px;
|
|
}
|
|
.brief-title h2 {
|
|
font-size: 40px;
|
|
color: #000;
|
|
}
|
|
.brief-title h2 b{
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.for-mobile{
|
|
display: none;
|
|
}
|
|
|
|
/*------------ Brief Area End ----------*/
|
|
|
|
|
|
|
|
|
|
|
|
/*------------ Brand Area Start ----------*/
|
|
.brand-slider-area {
|
|
padding: 150px 0;
|
|
background: #F5F5F5;
|
|
}
|
|
.infinite-slider {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
.slider-track {
|
|
display: flex;
|
|
width: max-content;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.brand-logo {
|
|
flex: 0 0 auto;
|
|
padding: 0 50px;
|
|
justify-content: center;
|
|
}
|
|
.brand-logo img {
|
|
max-height: 60px;
|
|
display: block;
|
|
filter: grayscale(100%) brightness(1);
|
|
transition: .2s ease;
|
|
transform: scale(1);
|
|
}
|
|
.brand-logo img:hover {
|
|
transform: scale(1.1);
|
|
filter: none;
|
|
}
|
|
.min-h img{
|
|
max-height: 42px;
|
|
}
|
|
.max-h img{
|
|
max-height: 70px;
|
|
}
|
|
|
|
.logo-squre img{
|
|
max-height: 84px;
|
|
}
|
|
|
|
|
|
.shk-vrtx-wrap-91A {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
height: 1.2em;
|
|
position: relative;
|
|
}
|
|
|
|
.shk-vrtx-track-91A {
|
|
display: block;
|
|
will-change: transform;
|
|
color: #FF3AD1;
|
|
}
|
|
|
|
.shk-vrtx-item-91A {
|
|
display: block;
|
|
line-height: 1.2em;
|
|
}
|
|
/*------------ Brand Area End ----------*/
|
|
|
|
|
|
|
|
|
|
/*------------ CTA Area Start ----------*/
|
|
.cta-area{
|
|
padding: 100px 0;
|
|
background-color: #000000;
|
|
}
|
|
.cta-area .container{
|
|
max-width: 1250px;
|
|
}
|
|
.cta-btn {
|
|
text-align: end;
|
|
}
|
|
.cta-content h2 {
|
|
margin: 0;
|
|
font-size: 40px;
|
|
line-height: 130%;
|
|
}
|
|
.cta-content h2 span {
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
/*------------ CTA Area End ----------*/
|
|
|
|
|
|
|
|
/*------------ Footer Area Start ----------*/
|
|
footer {
|
|
padding-top: 100px;
|
|
padding-bottom: 20px;
|
|
position: relative;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
#footer-img {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: block;
|
|
overflow: visible;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
footer h4 {
|
|
font-size: 20px;
|
|
color: #FFDFF0;
|
|
display: block;
|
|
margin-bottom: 25px;
|
|
}
|
|
.social-links ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30px;
|
|
}
|
|
.social-links ul li a{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: #f5f5f5;
|
|
color: #121212;
|
|
transition: .3s;
|
|
border-radius: 100%;
|
|
}
|
|
.social-links ul li img {
|
|
width: 25px;
|
|
transition: .3s;
|
|
}
|
|
|
|
.social-links li a:hover {
|
|
background-color: #FFDFF0;
|
|
}
|
|
.footer-info ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.footer-info ul li {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.footer-info ul li a {
|
|
color: #fff;
|
|
font-size: 22px;
|
|
font-family: 'Adieu-Regular';
|
|
line-height: 100%;
|
|
}
|
|
.footer-info p {
|
|
font-size: 22px;
|
|
line-height: 140%;
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.footer-love {
|
|
margin-top: 100px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
.footer-love img {
|
|
width: 200px;
|
|
}
|
|
|
|
.copyright-wrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 24px;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.copyright-wrap p {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
color: #F5F5F5;
|
|
font-family: 'Aktiv-Grotesk-Ex';
|
|
}
|
|
.sticky .header-wrapper a {
|
|
filter: brightness(0.6);
|
|
}
|
|
|
|
|
|
/*------------ Footer Area End ----------*/
|
|
|
|
|
|
/*------------ Projects Area Start ----------*/
|
|
.projects-area {
|
|
background: #000;
|
|
padding-bottom: 100px;
|
|
padding-top: 50px;
|
|
}
|
|
.single-project {
|
|
margin-bottom: 30px;
|
|
}
|
|
.project-info h2 {
|
|
font-size: 40px;
|
|
margin: 0;
|
|
}
|
|
.project-info {
|
|
margin-bottom: 50px;
|
|
}
|
|
.subtitle {
|
|
text-align: right;
|
|
}
|
|
.client-info h4 {
|
|
color: #FFDFF0;
|
|
font-size: 16px;
|
|
letter-spacing: .2px;
|
|
line-height: 110%;
|
|
margin-bottom: 5px;
|
|
}
|
|
.client-info{
|
|
margin-bottom: 20px;
|
|
}
|
|
.project-details h4 {
|
|
color: #FFDFF0;
|
|
font-size: 16px;
|
|
letter-spacing: .2px;
|
|
line-height: 110%;
|
|
margin-bottom: 10px;
|
|
}
|
|
.project-details p {
|
|
margin-bottom: 8px;
|
|
line-height: 100%;
|
|
color: #F5F5F5;
|
|
}
|
|
.description-text p {
|
|
line-height: 130%;
|
|
color: #F5F5F5;
|
|
}
|
|
.project-content {
|
|
padding-top: 50px;
|
|
padding-bottom: 70px;
|
|
}
|
|
/*------------ Projects Area End ----------*/
|
|
|
|
|
|
|
|
|
|
|
|
/*------------ Portfolio Area Start ----------*/
|
|
.portfolio-area {
|
|
padding: 100px 0;
|
|
background: #000;
|
|
}
|
|
.portfolio-title {
|
|
max-width: 830px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
.portfolio-title h2 {
|
|
font-size: 40px;
|
|
line-height: 130%;
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.portfolio-title .description {
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
}
|
|
.portfolio-title .description p {
|
|
font-size: 20px;
|
|
}
|
|
.portfolio-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 25px;
|
|
}
|
|
|
|
.portfolio-filter button {
|
|
border: 1px solid #F5F5F5;
|
|
transition: .3s;
|
|
border-radius: 60px;
|
|
background: transparent;
|
|
color: #F5F5F5;
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
padding-bottom: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.portfolio-filter button:hover{
|
|
background-color: #4050FF;
|
|
border-color: #4050FF;
|
|
}
|
|
.portfolio-filter button.active{
|
|
background-color: #4050FF;
|
|
border-color: #4050FF;
|
|
}
|
|
|
|
|
|
.portfolio-projects {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0 50px;
|
|
}
|
|
.project-card {
|
|
margin-top: 100px;
|
|
}
|
|
.portfolio-info {
|
|
margin-top: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
}
|
|
.portfolio-info h4 {
|
|
font-size: 24px;
|
|
margin: 0;
|
|
line-height: 110%;
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.portfolio-info span {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.project-card img {
|
|
max-height: 680px;
|
|
object-fit: cover;
|
|
transition: .3s;
|
|
position: relative;
|
|
transform: scale(1);
|
|
}
|
|
.project-card:hover img {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.project-card {
|
|
transition: all 0.4s ease;
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.project-card.hide {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
pointer-events: none;
|
|
position: absolute;
|
|
}
|
|
|
|
.portfolio-projects {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.project-card.hide {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
pointer-events: none;
|
|
width: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
.project-card {
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.terms-area {
|
|
padding-top: 60px;
|
|
padding-bottom: 100px;
|
|
color: #000;
|
|
background-image: linear-gradient(to left top, #fbe0ef, #f7e5f3, #f5e9f5, #f3edf6, #f3f1f6, #f4f3f6, #f5f5f7, #f7f7f7, #f9f9f9, #fbfbfb, #fdfdfd, #ffffff);
|
|
}
|
|
.content-block h2 {
|
|
font-size: 40px;
|
|
color: #000;
|
|
line-height: 130%;
|
|
font-family: 'Adieu-Regular';
|
|
margin-bottom: 20px;
|
|
}
|
|
.content-block h4 {
|
|
color: #000;
|
|
font-size: 20px;
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.terms-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.content-block {
|
|
margin-bottom: 30px;
|
|
}
|
|
/*------------ Portfolio Area End ----------*/
|
|
|
|
|
|
|
|
|
|
/*------------ Contact Area Start ----------*/
|
|
.contact-area{
|
|
padding: 100px 0;
|
|
background-image: linear-gradient(to left top, #fbe0ef, #f7e5f3, #f5e9f5, #f3edf6, #f3f1f6, #f4f3f6, #f5f5f7, #f7f7f7, #f9f9f9, #fbfbfb, #fdfdfd, #ffffff);
|
|
}
|
|
.contact-wrapper {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
.contact-title {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
.contact-title h2 {
|
|
color: #000;
|
|
font-size: 40px;
|
|
line-height: 130%;
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.contact-title p {
|
|
font-size: 20px;
|
|
color: #000;
|
|
}
|
|
.single-item {
|
|
width: 100%;
|
|
margin-bottom: 25px;
|
|
}
|
|
.single-item input {
|
|
height: 60px;
|
|
padding: 10px 0;
|
|
border: none;
|
|
border-bottom: 1px solid #4050FF;
|
|
background: transparent;
|
|
width: 100%;
|
|
color: #000;
|
|
}
|
|
.single-item input::placeholder{
|
|
color: #747474;
|
|
opacity: 1;
|
|
}
|
|
|
|
.single-item textarea {
|
|
height: 60px;
|
|
padding: 10px 0;
|
|
border: none;
|
|
border-bottom: 1px solid #4050FF;
|
|
background: transparent;
|
|
width: 100%;
|
|
color: #000;
|
|
}
|
|
.single-item textarea::placeholder{
|
|
color: #747474;
|
|
opacity: 1;
|
|
}
|
|
.btn__primary{
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0 15px;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 20px;
|
|
color: #4050FF;
|
|
}
|
|
.btn__primary span {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #E6E2F6;
|
|
border-radius: 100%;
|
|
transition: .3s;
|
|
transform: rotate(0deg);
|
|
font-family: 'Aktiv-Grotesk-Ex';
|
|
}
|
|
.btn__primary img {
|
|
position: relative;
|
|
top: 1px;
|
|
width: 12px;
|
|
}
|
|
.btn__primary:hover span{
|
|
transform: rotate(45deg);
|
|
}
|
|
.submit-btn{
|
|
margin-top: 70px;
|
|
text-align: center;
|
|
}
|
|
.contact-note-area {
|
|
padding: 50px 0;
|
|
background: #2B35FF;
|
|
text-align: center;
|
|
}
|
|
.note-text h2 {
|
|
font-size: 40px;
|
|
line-height: 130%;
|
|
font-family: 'Adieu-Regular';
|
|
font-weight: normal;
|
|
}
|
|
.note-text {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
.back-home {
|
|
text-align: center;
|
|
}
|
|
/*------------ Contact Area End ----------*/
|
|
|
|
|
|
|
|
|
|
/*------------ About Area End ----------*/
|
|
.about-area {
|
|
background: #f5f5f5;
|
|
padding-top: 100px;
|
|
padding-bottom: 30px;
|
|
overflow: hidden;
|
|
background-image: linear-gradient(to left top, #fae9f2, #f9eff7, #faf5fb, #fcfafe, #ffffff);
|
|
}
|
|
.about-title-wrap {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
margin-bottom: 50px;
|
|
}
|
|
.about-title-wrap h2 {
|
|
color: #000;
|
|
font-size: 40px;
|
|
line-height: 130%;
|
|
}
|
|
.about-title-wrap h2 .pink-text{
|
|
color: #FF3AD1;
|
|
}
|
|
.about-title-wrap h2 span{
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.team-slider {
|
|
display: flex;
|
|
width: max-content;
|
|
cursor: grab;
|
|
padding: 50px 0;
|
|
}
|
|
.card-thumb img {
|
|
min-height: 425px;
|
|
object-fit: cover;
|
|
}
|
|
.team-card {
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
background: #FFDFF0;
|
|
position: relative;
|
|
max-width: 350px;
|
|
|
|
/* subtle base tilt */
|
|
transform: rotate(-1deg);
|
|
|
|
/* 3D support */
|
|
transform-style: preserve-3d;
|
|
perspective: 1000px;
|
|
will-change: transform;
|
|
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease-out; /* faster return to normal */
|
|
}
|
|
.team-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0 16px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.team-info h4 {
|
|
color: #4050FF;
|
|
font-size: 24px;
|
|
margin: 0;
|
|
}
|
|
|
|
.team-info span {
|
|
color: #4050FF;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
}
|
|
.team-card:nth-child(even) {
|
|
background: #4050FF;
|
|
transform: rotate(2deg);
|
|
|
|
}
|
|
.team-card:nth-child(even) .team-info h4 {
|
|
color: #fff;
|
|
}
|
|
.team-card:nth-child(even) .team-info span {
|
|
color: #fff;
|
|
}
|
|
.team-card:nth-child(4) {
|
|
position: relative;
|
|
top: -10px;
|
|
}
|
|
|
|
.team-slider {
|
|
display: flex;
|
|
width: max-content;
|
|
cursor: grab;
|
|
}
|
|
|
|
.team-track {
|
|
display: flex;
|
|
gap: 0 10px;
|
|
}
|
|
|
|
section.working-together-area {
|
|
background: #060606;
|
|
padding: 100px 0;
|
|
}
|
|
.together-content .common-btn {
|
|
margin-top: 40px;
|
|
}
|
|
.common-btn span img {
|
|
position: relative;
|
|
width: 10px;
|
|
}
|
|
.together-content {
|
|
padding-left: 35px;
|
|
}
|
|
.creative-area {
|
|
padding: 100px 0;
|
|
background: #4050FF;
|
|
text-align: center;
|
|
}
|
|
.creative-area h2 {
|
|
margin: 0;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
gap: 50px;
|
|
font-size: 40px;
|
|
}
|
|
.creative-area h2 span{
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
|
|
|
|
.ct-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ct-viewport {
|
|
height: 1.2em; /* shows only one line */
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.ct-vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ct-vertical span {
|
|
height: 1.2em;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.brand-area-two{
|
|
padding: 120px 0;
|
|
background-image: linear-gradient(to right bottom, #f5f5f5, #f5f4f6, #f6f2f7, #f8f1f6, #faeff5);
|
|
}
|
|
|
|
|
|
/*------- Inspiration Area Start -------*/
|
|
.inspiration-area {
|
|
position: relative;
|
|
transition: .3s;
|
|
background-color: #FFFFFF;
|
|
padding: 100px 0;
|
|
}
|
|
.inspiration-title h2 {
|
|
text-align: center;
|
|
color: #000;
|
|
font-size: 40px;
|
|
line-height: 130%;
|
|
display: inline-block;
|
|
z-index: 0;
|
|
position: relative;
|
|
}
|
|
.inspiration-title h2 b{
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.inspiration-title {
|
|
text-align: center;
|
|
position: absolute;
|
|
display: inline-block;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 0;
|
|
}
|
|
.inspiration-wrapper{
|
|
max-width: 1400px;
|
|
height: 1060px;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
|
|
.flip-card {
|
|
width: 300px;
|
|
height:360px;
|
|
perspective: 1000px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: .3s ease;
|
|
}
|
|
|
|
.flip-card-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.6s;
|
|
transform-style: preserve-3d;
|
|
position: relative;
|
|
}
|
|
|
|
.flip-card.active .flip-card-inner {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
|
|
.flip-card-front,
|
|
.flip-card-back {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
}
|
|
.flip-card-front{
|
|
background-color: #4050FF;
|
|
padding: 15px;
|
|
border-radius: 15px;
|
|
}
|
|
/* Front */
|
|
.flip-card-front img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
/* Back */
|
|
.flip-card-back {
|
|
background: #4050FF;
|
|
color: #fff;
|
|
transform: rotateY(180deg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 30px;
|
|
flex-direction: column;
|
|
}
|
|
.flip-card-back p {
|
|
font-size: 20px;
|
|
line-height: 140%;
|
|
margin: 0;
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.flip-card.card__1 {
|
|
transform: translate(-50%, -50%) rotate(-14deg);
|
|
left: 29%;
|
|
top: 42%;
|
|
z-index: 3;
|
|
}
|
|
.flip-card.card__2 {
|
|
transform: translate(-50%, -50%) rotate(-14deg);
|
|
left: 43%;
|
|
top: 54%;
|
|
z-index: 3;
|
|
}
|
|
.flip-card.card__3 {
|
|
transform: translate(-50%, -50%) rotate(-29deg);
|
|
left: 38%;
|
|
top: 65%;
|
|
z-index: 1;
|
|
}
|
|
.flip-card.card__4 {
|
|
top: 30%;
|
|
transform: translate(-50%, -50%) rotate(-12deg);
|
|
left: 43%;
|
|
}
|
|
.flip-card.card__5 {
|
|
top: 67%;
|
|
transform: translate(-50%, -50%) rotate(15deg);
|
|
left: 58%;
|
|
}
|
|
.flip-card.card__6 {
|
|
transform: translate(-50%, -50%) rotate(11deg);
|
|
left: unset;
|
|
right: 17%;
|
|
top: 35%;
|
|
z-index: 0;
|
|
}
|
|
|
|
.flip-card.card__7 {
|
|
transform: translate(-50%, -50%) rotate(20deg);
|
|
left: unset;
|
|
right: 5%;
|
|
top: 48%;
|
|
z-index: 3;
|
|
}
|
|
.flip-card.card__8 {
|
|
transform: translate(-50%, -50%) rotate(41deg);
|
|
left: unset;
|
|
right: 20%;
|
|
top: 61%;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
.inspiration-area:hover .flip-card.card__1 {
|
|
left: 16%;
|
|
top: 25%;
|
|
transform: translate(-50%, -50%) rotate(6deg);
|
|
}
|
|
.inspiration-area:hover .flip-card.card__2 {
|
|
left: 20%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) rotate(-2deg);
|
|
}
|
|
|
|
.inspiration-area:hover .flip-card.card__3 {
|
|
transform: translate(-50%, -50%) rotate(-29deg);
|
|
left: 18%;
|
|
top: 75%;
|
|
}
|
|
.inspiration-area:hover .flip-card.card__4 {
|
|
left: 48%;
|
|
top: 16%;
|
|
transform: translate(-50%, -50%) rotate(10deg);
|
|
}
|
|
.inspiration-area:hover .flip-card.card__5 {
|
|
top: 84%;
|
|
transform: translate(-50%, -50%) rotate(-15deg);
|
|
left: 55%;
|
|
}
|
|
.inspiration-area:hover .flip-card.card__6 {
|
|
transform: translate(-50%, -50%) rotate(-6deg);
|
|
left: unset;
|
|
right: 3%;
|
|
top: 25%;
|
|
}
|
|
.inspiration-area:hover .flip-card.card__7 {
|
|
transform: translate(-50%, -50%) rotate(3deg);
|
|
left: unset;
|
|
right: -8%;
|
|
top: 55%;
|
|
}
|
|
.inspiration-area:hover .flip-card.card__8 {
|
|
transform: translate(-50%, -50%) rotate(10deg);
|
|
left: unset;
|
|
right: 2%;
|
|
top: 86%;
|
|
}
|
|
|
|
|
|
|
|
|
|
.card__normal .flip-card-front{
|
|
background-color: #FFDFF0;
|
|
}
|
|
.card__normal .flip-card-back{
|
|
background-color: #FFDFF0;
|
|
}
|
|
.card__normal .flip-card-back{
|
|
color: #4050FF;
|
|
}
|
|
/*------- Inspiration Area End -------*/
|
|
|
|
|
|
.awards-wrap {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 30px 60px;
|
|
justify-items: center;
|
|
text-align: center;
|
|
margin-top: 150px;
|
|
}
|
|
.awards-wrap img {
|
|
max-height: 110px;
|
|
flex-shrink: 0;
|
|
transform-style: preserve-3d;
|
|
will-change: transform;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
.awards-wrap img:nth-child(odd) {
|
|
transform: rotate(15deg);
|
|
}
|
|
.awards-wrap img:nth-child(even) {
|
|
transform: rotate(-15deg);
|
|
}
|
|
|
|
|
|
|
|
|
|
.branding-section {
|
|
text-align: center;
|
|
padding: 100px 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.subtitle {
|
|
margin-bottom: 40px;
|
|
color: #A7A7A7;
|
|
}
|
|
|
|
.branding-list h2 {
|
|
font-size: 40px;
|
|
margin: 10px 0;
|
|
cursor: pointer;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.branding-list h2:hover {
|
|
color: #4c5cff;
|
|
}
|
|
|
|
/* Floating image */
|
|
.hover-image {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 999;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.hover-image img {
|
|
width: 440px;
|
|
height: 300px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.branding-area {
|
|
padding: 100px 0;
|
|
position: relative;
|
|
background-image: linear-gradient(to left top, #f9f2f6, #faf5f9, #fbf9fb, #fdfcfd, #ffffff);
|
|
}
|
|
.branding-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.branding-list {
|
|
text-align: center;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.branding-list h2 {
|
|
font-size: 55px;
|
|
color: #121212;
|
|
line-height: 110%;
|
|
.together-content h2 {
|
|
font-size: 40px;
|
|
}
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 0 80px;
|
|
letter-spacing: .5px;
|
|
}
|
|
.branding-super-wrapper h2 {
|
|
font-size: 64px;
|
|
color: #4050FF;
|
|
text-align: center;
|
|
}
|
|
.branding-area-two .branding-list{
|
|
gap: 40px 0;
|
|
position: relative;
|
|
}
|
|
.with-btn {
|
|
position: relative;
|
|
}
|
|
.faling-btn {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding:5px 20px;
|
|
gap: 0 20px;
|
|
z-index: 1;
|
|
}
|
|
.faling-btn a {
|
|
display: inline-block;
|
|
padding: 8px 14px;
|
|
border: 1px solid #4050FF;
|
|
border-radius: 50px;
|
|
font-size: 14px;
|
|
position: relative;
|
|
transition: .3s;
|
|
color: #4050FF;
|
|
}
|
|
.faling-btn a:hover{
|
|
background-color: #4050FF;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.ct-falling-btn-wrap a {
|
|
display: inline-block;
|
|
position: relative;
|
|
opacity: 0;
|
|
transform: translateY(-200px) rotate(0deg);
|
|
}
|
|
.branding-about-area{
|
|
padding-bottom: 150px;
|
|
}
|
|
|
|
|
|
|
|
.stack-section {
|
|
height: 500vh; /* This controls the "length" of the scroll animation */
|
|
background: #111;
|
|
}
|
|
|
|
.stack-container {
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card {
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 450px;
|
|
will-change: transform;
|
|
/* Add slight rotation like your screenshot */
|
|
}
|
|
|
|
.card img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
|
|
|
|
.branding-area.branding-home{
|
|
background: #F5F5F5 !important;
|
|
}
|
|
|
|
.together-content h2 {
|
|
font-size: 40px;
|
|
}
|
|
.together-content h2 span{
|
|
font-family: 'Adieu-Regular';
|
|
}
|
|
.ct-wrap i {
|
|
font-style: normal;
|
|
}
|
|
.ct-wrap h4 {
|
|
display: none;
|
|
}
|
|
.inspire-title h2 {
|
|
font-size: 26px;
|
|
color: #121212;
|
|
text-align: center;
|
|
}
|
|
.inspiration-mobile-wrapper{
|
|
display: none;
|
|
}
|
|
|
|
|
|
.awards-wrap {
|
|
opacity: 0;
|
|
transform: translateY(50px);
|
|
}
|
|
.showcase-item {
|
|
opacity: 0;
|
|
transform: translateY(60px);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.showcase-item {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.showcase-item img {
|
|
display: block;
|
|
width: 100%;
|
|
transition: transform 0.2s ease;
|
|
will-change: transform;
|
|
}
|
|
|
|
|
|
.showcase-title .shk-vrtx-wrap-91A{
|
|
margin-bottom: -10px;
|
|
} |