/* Start custom CSS for html, class: .elementor-element-7cb9362 */.creative-poster-hero{
background:#04111d;
padding:140px 7%;
min-height:100vh;
overflow:hidden;
position:relative;
}
.poster-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}
/* TAG */
.poster-tag{
display:inline-block;
padding:12px 22px;
border-radius:50px;
background:rgba(255,86,86,.08);
border:1px solid rgba(255,86,86,.15);
color:#ff5656;
font-size:12px;
font-weight:700;
letter-spacing:2px;
margin-bottom:25px;
}
/* TITLE */
.poster-title{
display:flex;
flex-direction:column;
font-size:88px;
font-weight:800;
line-height:.92;
margin-bottom:30px;
}
.poster-title span{
color:white;
}
.gradient-word{
background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
/* DESC */
.poster-desc{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
margin-bottom:40px;
max-width:650px;
}
/* BUTTONS */
.poster-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.poster-btn{
padding:18px 34px;
border-radius:60px;
font-weight:700;
text-decoration:none;
transition:.4s;
}
.primary-btn{
background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);
color:#fff !important;
}
.secondary-btn{
border:1px solid rgba(255,255,255,.15);
color:#fff;
}
.poster-btn:hover{
transform:translateY(-5px);
}
/* POSTER WALL */
.poster-wall{
height:700px;
position:relative;
overflow:hidden;
display:flex;
gap:25px;
justify-content:center;
}
.marquee{
display:flex;
flex-direction:column;
gap:25px;
}
.marquee-one{
animation:posterMoveUp 18s linear infinite;
}
.marquee-two{
animation:posterMoveDown 18s linear infinite;
}
.poster-card{
width:230px;
height:260px;
border-radius:30px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(20px);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:34px;
font-weight:800;
line-height:1.1;
color:white;
position:relative;
overflow:hidden;
transition:.4s;
}
.poster-card:before{
content:'';
position:absolute;
top:-100%;
left:-100%;
width:200%;
height:200%;
background:linear-gradient(
45deg,
transparent,
rgba(255,255,255,.08),
transparent
);
transform:rotate(25deg);
animation:shinePoster 5s infinite;
}
.poster-card:hover{
transform:scale(1.05);
}
/* ANIMATIONS */
@keyframes posterMoveUp{
100%{
transform:translateY(-250px);
}
}
@keyframes posterMoveDown{
100%{
transform:translateY(250px);
}
}
@keyframes shinePoster{
100%{
transform:
translate(100%,100%)
rotate(25deg);
}
}
/* TABLET */
@media(max-width:991px){
.poster-grid{
grid-template-columns:1fr;
gap:60px;
}
.poster-title{
font-size:56px;
}
.poster-wall{
height:500px;
}
}
/* MOBILE */
@media(max-width:576px){
.creative-poster-hero{
padding:90px 20px;
}
.poster-title{
font-size:42px;
}
.poster-buttons{
flex-direction:column;
}
.poster-btn{
width:100%;
text-align:center;
}
.poster-wall{
height:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}
.marquee{
animation:none;
gap:15px;
}
.poster-card{
width:100%;
height:160px;
font-size:20px;
border-radius:20px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-66f1b6c */.impact-wall{
padding:160px 7%;
background:#030c15;
position:relative;
overflow:hidden;
}
/* MOVING WORDS */
.impact-bg{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
}
.impact-track{
position:absolute;
top:50%;
white-space:nowrap;
font-size:180px;
font-weight:900;
color:rgba(255,255,255,.03);
display:flex;
gap:120px;
animation:impactMove 30s linear infinite;
transform:translateY(-50%);
}
.impact-content{
position:relative;
z-index:2;
text-align:center;
max-width:900px;
margin:auto;
margin-bottom:120px;
}
.impact-tag{
display:inline-block;
padding:12px 20px;
border-radius:50px;
background:rgba(255,86,86,.08);
border:1px solid rgba(255,86,86,.15);
color:#ff5656;
font-size:12px;
font-weight:700;
letter-spacing:2px;
margin-bottom:25px;
}
.impact-content h2{
font-size:80px;
line-height:.95;
color:white;
margin-bottom:25px;
}
.impact-content h2 span{
display:block;
background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.impact-content p{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
}
/* PILLARS */
.impact-pillars{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
position:relative;
z-index:2;
}
.pillar{
height:420px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:30px;
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:35px;
overflow:hidden;
}
.pillar-light{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:3px;
height:100%;
background:linear-gradient(
180deg,
#ff5656,
transparent
);
animation:pillarGlow 4s infinite;
}
.pillar:nth-child(2) .pillar-light{
animation-delay:1s;
}
.pillar:nth-child(3) .pillar-light{
animation-delay:2s;
}
.pillar:nth-child(4) .pillar-light{
animation-delay:3s;
}
.pillar h3{
font-size:34px;
color:white;
margin-bottom:15px;
position:relative;
z-index:2;
}
.pillar p{
font-size:16px;
line-height:1.8;
color:#cfd8e3;
position:relative;
z-index:2;
}
/* ANIMATION */
@keyframes impactMove{
100%{
transform:
translateX(-50%)
translateY(-50%);
}
}
@keyframes pillarGlow{
50%{
opacity:1;
box-shadow:
0 0 30px #ff5656;
}
}
/* TABLET */
@media(max-width:991px){
.impact-content h2{
font-size:54px;
}
.impact-pillars{
grid-template-columns:1fr 1fr;
}
}
/* MOBILE */
@media(max-width:576px){
.impact-wall{
padding:90px 20px;
}
.impact-content h2{
font-size:38px;
}
.impact-track{
font-size:70px;
}
.impact-pillars{
grid-template-columns:1fr;
}
.pillar{
height:260px;
}
.pillar h3{
font-size:26px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7e4c470 */.transformation-lab{
padding:160px 7%;
background:#04111d;
position:relative;
overflow:hidden;
}
.lab-header{
text-align:center;
max-width:850px;
margin:auto;
margin-bottom:100px;
}
.lab-tag{
display:inline-block;
padding:12px 20px;
border-radius:50px;
background:rgba(255,86,86,.08);
border:1px solid rgba(255,86,86,.15);
color:#ff5656;
font-size:12px;
letter-spacing:2px;
font-weight:700;
margin-bottom:25px;
}
.lab-header h2{
font-size:76px;
line-height:.95;
color:white;
margin-bottom:25px;
}
.lab-header p{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
}
.scanner-system{
position:relative;
display:flex;
flex-direction:column;
gap:30px;
}
.transform-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
position:relative;
padding:40px;
border:1px solid rgba(255,255,255,.08);
border-radius:30px;
background:rgba(255,255,255,.03);
overflow:hidden;
}
.before-side{
opacity:.35;
}
.before-side span{
color:#888;
font-size:12px;
letter-spacing:2px;
}
.before-side h3{
font-size:36px;
color:white;
margin-top:10px;
}
.after-side{
text-align:right;
}
.after-side span{
color:#ff5656;
font-size:12px;
letter-spacing:2px;
}
.after-side h3{
font-size:36px;
margin-top:10px;
background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.scan-beam{
position:absolute;
left:0;
top:0;
width:100%;
height:120px;
background:linear-gradient(
180deg,
transparent,
rgba(255,86,86,.12),
transparent
);
animation:scannerMove 8s linear infinite;
z-index:2;
pointer-events:none;
}
@keyframes scannerMove{
100%{
transform:translateY(900px);
}
}
@media(max-width:767px){
.transformation-lab{
padding:90px 20px;
}
.lab-header h2{
font-size:40px;
}
.transform-row{
grid-template-columns:1fr;
gap:20px;
padding:25px;
}
.after-side{
text-align:left;
}
.before-side h3,
.after-side h3{
font-size:24px;
}
.scan-beam{
display:none;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-120887b */.creative-ecosystem{
padding:160px 7%;
background:#030c15;
overflow:hidden;
position:relative;
}
.ecosystem-header{
text-align:center;
max-width:850px;
margin:auto;
margin-bottom:120px;
}
.eco-tag{
display:inline-block;
padding:12px 20px;
border-radius:50px;
background:rgba(255,86,86,.08);
border:1px solid rgba(255,86,86,.15);
color:#ff5656;
font-size:12px;
letter-spacing:2px;
font-weight:700;
margin-bottom:25px;
}
.ecosystem-header h2{
font-size:76px;
line-height:.95;
color:white;
margin-bottom:25px;
}
.ecosystem-header p{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
}
.ecosystem-system{
position:relative;
height:900px;
max-width:1000px;
margin:auto;
}
/* CORE */
.brand-core{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:260px;
height:260px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
z-index:10;
}
.core-glow{
position:absolute;
inset:0;
border-radius:50%;
background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);
filter:blur(30px);
opacity:.5;
animation:corePulse 4s infinite;
}
.core-content{
position:relative;
z-index:2;
width:180px;
height:180px;
border-radius:50%;
background:#081420;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:22px;
font-weight:800;
color:white;
}
/* MODULES */
.eco-module{
position:absolute;
padding:18px 24px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:60px;
color:white;
font-weight:700;
backdrop-filter:blur(20px);
animation:moduleFloat 6s infinite ease-in-out;
}
.m1{top:0;left:50%;transform:translateX(-50%);}
.m2{top:15%;right:5%;}
.m3{top:45%;right:0;}
.m4{bottom:15%;right:5%;}
.m5{bottom:0;left:50%;transform:translateX(-50%);}
.m6{bottom:15%;left:5%;}
.m7{top:45%;left:0;}
.m8{top:15%;left:5%;}
.m2{animation-delay:1s;}
.m3{animation-delay:2s;}
.m4{animation-delay:3s;}
.m5{animation-delay:4s;}
.m6{animation-delay:5s;}
.m7{animation-delay:6s;}
.m8{animation-delay:7s;}
/* CONNECTIONS */
.connection{
position:absolute;
left:50%;
top:50%;
width:2px;
height:350px;
background:linear-gradient(
180deg,
transparent,
rgba(255,86,86,.5),
transparent
);
animation:flowLine 3s infinite;
}
.connection2{
transform:rotate(45deg);
}
.connection3{
transform:rotate(90deg);
}
.connection4{
transform:rotate(135deg);
}
/* ANIMATIONS */
@keyframes corePulse{
50%{
transform:scale(1.15);
opacity:.8;
}
}
@keyframes moduleFloat{
50%{
transform:translateY(-10px);
}
}
@keyframes flowLine{
50%{
box-shadow:
0 0 25px #ff5656;
}
}
/* MOBILE */
@media(max-width:767px){
.creative-ecosystem{
padding:90px 20px;
}
.ecosystem-header h2{
font-size:40px;
}
.ecosystem-system{
height:auto;
display:flex;
flex-direction:column;
gap:15px;
}
.brand-core{
position:relative;
left:auto;
top:auto;
transform:none;
margin:auto;
margin-bottom:30px;
}
.connection{
display:none;
}
.eco-module{
position:relative;
top:auto!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
transform:none!important;
width:100%;
text-align:center;
animation:none;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c0d400a */.creative-launchpad{
position:relative;
padding:160px 7%;
background:#030c15;
overflow:hidden;
}
/* BACKGROUND */
.launch-overlay{
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 20%, rgba(255,86,86,.08), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(255,63,132,.08), transparent 40%);
animation:backgroundPulse 10s ease-in-out infinite;
}
/* HEADER */
.launch-header{
position:relative;
z-index:2;
max-width:900px;
margin:auto;
text-align:center;
margin-bottom:100px;
}
.launch-tag{
display:inline-block;
padding:12px 20px;
border-radius:50px;
background:rgba(255,86,86,.08);
border:1px solid rgba(255,86,86,.15);
color:#ff5656;
font-size:12px;
font-weight:700;
letter-spacing:2px;
margin-bottom:25px;
}
.launch-header h2{
font-size:82px;
line-height:.92;
color:white;
margin-bottom:25px;
animation:drawReveal 1.2s ease;
}
.launch-header p{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
max-width:800px;
margin:auto;
}
/* LAYOUT */
.launch-layout{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.1fr .9fr;
gap:60px;
align-items:center;
}
/* CREATIVE BOARD */
.creative-board{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}
.note{
background:#fff8d8;
padding:25px;
border-radius:20px;
position:relative;
box-shadow:
0 20px 50px rgba(0,0,0,.15);
animation:floatNote 6s ease-in-out infinite;
}
.note:nth-child(2){
animation-delay:1s;
}
.note:nth-child(3){
animation-delay:2s;
}
.note:nth-child(4){
animation-delay:3s;
}
.note:nth-child(5){
animation-delay:4s;
grid-column:span 2;
}
.note-label{
font-size:11px;
letter-spacing:2px;
font-weight:700;
color:#ff5656;
margin-bottom:15px;
}
.note h3{
font-size:22px;
line-height:1.3;
color:#111;
margin-bottom:12px;
}
.note p{
font-size:15px;
line-height:1.8;
color:#444;
}
/* CTA */
.launch-cta{
position:relative;
text-align:center;
}
.launch-circle{
width:260px;
height:260px;
margin:auto;
border-radius:50%;
background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
font-size:32px;
font-weight:800;
line-height:1.1;
color:white;
position:relative;
z-index:2;
box-shadow:
0 0 80px rgba(255,86,86,.45);
animation:launchPulse 5s infinite;
}
.spotlight{
position:absolute;
width:500px;
height:500px;
left:50%;
top:-120px;
transform:translateX(-50%);
background:
radial-gradient(circle,
rgba(255,255,255,.12),
transparent 70%);
animation:spotlightMove 8s ease-in-out infinite;
}
.launch-cta h3{
font-size:58px;
line-height:.95;
color:white;
margin:40px 0 20px;
}
.launch-cta p{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
margin-bottom:35px;
}
.launch-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:20px 40px;
border-radius:60px;
background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);
text-decoration:none;
font-weight:700;
color:white !important;
transition:.4s;
}
.launch-btn:hover{
transform:translateY(-6px);
}
/* ANIMATIONS */
@keyframes floatNote{
50%{
transform:
translateY(-12px)
rotate(1deg);
}
}
@keyframes launchPulse{
50%{
transform:scale(1.08);
box-shadow:
0 0 120px rgba(255,86,86,.7);
}
}
@keyframes spotlightMove{
50%{
transform:
translateX(-50%)
translateY(20px);
}
}
@keyframes backgroundPulse{
50%{
opacity:.6;
}
}
@keyframes drawReveal{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* TABLET */
@media(max-width:991px){
.launch-layout{
grid-template-columns:1fr;
}
.launch-header h2{
font-size:56px;
}
.launch-cta h3{
font-size:42px;
}
}
/* MOBILE */
@media(max-width:576px){
.creative-launchpad{
padding:90px 20px;
}
.launch-header h2{
font-size:40px;
}
.launch-header p{
font-size:16px;
}
.creative-board{
grid-template-columns:1fr;
}
.note:nth-child(5){
grid-column:auto;
}
.launch-circle{
width:200px;
height:200px;
font-size:24px;
}
.launch-cta h3{
font-size:34px;
}
.launch-btn{
width:100%;
}
}/* End custom CSS */