*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#080808;
color:#ffffff;
overflow-x:hidden;
cursor:none;
}

/* Cursor */

.cursor{
position:fixed;
width:18px;
height:18px;
border-radius:50%;
background:#4f8cff;
pointer-events:none;
transform:translate(-50%,-50%);
box-shadow:
0 0 20px #4f8cff,
0 0 40px #4f8cff,
0 0 70px #4f8cff;
z-index:99999;
transition:.05s;
}

/* Navbar */

header{

position:fixed;

top:0;

left:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 8%;

backdrop-filter:blur(15px);

background:rgba(0,0,0,.25);

z-index:999;

}

.logo{

font-size:32px;

font-weight:800;

letter-spacing:3px;

}

nav{

display:flex;

gap:40px;

}

nav a{

color:white;

text-decoration:none;

transition:.3s;

}

nav a:hover{

color:#4f8cff;

}

/* Hero */

.hero{

height:100vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

padding:0 8%;

position:relative;

}

.hero::before{

content:"";

position:absolute;

left:-200px;

top:-200px;

width:500px;

height:500px;

background:#d4af37;

filter:blur(200px);

opacity:.3;

border-radius:50%;

}

.hero::after{

content:"";

position:absolute;

right:-150px;

bottom:-150px;

width:450px;

height:450px;

background:#ffffff;

filter:blur(180px);

opacity:.25;

border-radius:50%;

}

.hero-left h3{

font-size:24px;

color:#4f8cff;

}

.hero-left h1{

font-size:90px;

margin:15px 0;

}

.hero-left h2{

font-size:42px;

margin-bottom:20px;

}

.hero-left p{

max-width:550px;

line-height:1.8;

color:#bbb;

}

.buttons{

display:flex;

gap:20px;

margin-top:40px;

}

.btn{

padding:16px 35px;

background:#d4af37;

color:white;

text-decoration:none;

border-radius:50px;

transition:.3s;

}

.btn:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(37,99,235,.4);

}

.btn2{

padding:16px 35px;

border:1px solid rgba(255,255,255,.2);

border-radius:50px;

text-decoration:none;

color:white;

transition:.3s;

}

.btn2:hover{

background:white;

color:black;

}

/* =========================
3D PREMIUM CUBE
========================= */


.scene{

width:450px;
height:450px;

perspective:1600px;

margin:auto;

}



.cube{

width:100%;
height:100%;

position:relative;

transform-style:preserve-3d;

animation:rotateCube 18s linear infinite;

}



.face{

position:absolute;

width:450px;
height:450px;


display:flex;

align-items:center;
justify-content:center;


overflow:hidden;


border-radius:25px;


background:#111;


border:
2px solid rgba(212,175,55,.5);


box-shadow:

0 0 40px rgba(212,175,55,.3),
inset 0 0 30px rgba(255,255,255,.1);


}



.face img{


width:100%;

height:100%;


object-fit:fill;


display:block;


}



/* Cube Faces */


.front{

transform:
translateZ(225px);

}



.back{

transform:
rotateY(180deg)
translateZ(225px);

}



.left{

transform:
rotateY(-90deg)
translateZ(225px);

}



.right{

transform:
rotateY(90deg)
translateZ(225px);

}



.top{

transform:
rotateX(90deg)
translateZ(225px);

}



.bottom{

transform:
rotateX(-90deg)
translateZ(225px);

}




@keyframes rotateCube{


0%{

transform:
rotateX(-15deg)
rotateY(0deg);

}


25%{

transform:
rotateX(10deg)
rotateY(90deg);

}


50%{

transform:
rotateX(-10deg)
rotateY(180deg);

}


75%{

transform:
rotateX(15deg)
rotateY(270deg);

}


100%{

transform:
rotateX(-15deg)
rotateY(360deg);

}


}



@keyframes floatCube{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-25px);

}


}

/* Sections */

section{

padding:120px 8%;

}

h2{

font-size:50px;

margin-bottom:30px;

}

.grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

}

.card{

overflow:hidden;

border-radius:20px;

background:#111827;

transition:.4s;

}

.card img{

width:100%;

display:block;

transition:.5s;

}

.card:hover img{

transform:scale(1.1);

}

.card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(0,0,0,.4);

}

/* Responsive */

@media(max-width:900px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:150px;

height:auto;

}

.scene{

margin-top:60px;

width:280px;

height:280px;

}

.face{

position:absolute;

width:450px;

height:450px;

overflow:hidden;

border-radius:25px;

display:flex;

align-items:center;

justify-content:center;

}

.front{

transform:translateZ(225px);

}


.back{

transform:rotateY(180deg) translateZ(225px);

}


.left{

transform:rotateY(-90deg) translateZ(225px);

}


.right{

transform:rotateY(90deg) translateZ(225px);

}

.grid{

grid-template-columns:1fr;

}

nav{

display:none;

}

.hero-left h1{

font-size:60px;

}

}
.cursor{

position:fixed;

width:18px;

height:18px;

background:#d4af37;

border-radius:50%;

pointer-events:none;

transform:translate(-50%,-50%);

box-shadow:
0 0 20px #d4af37,
0 0 40px #d4af37,
0 0 80px #d4af37;

z-index:999999;

}

.cursor-hover{

width:60px;

height:60px;

background:rgba(59,130,246,.2);

border:2px solid #d4af37;

}

.trail{

position:fixed;

width:8px;

height:8px;

background:#60a5fa;

border-radius:50%;

pointer-events:none;

animation:trail .6s linear forwards;

}

@keyframes trail{

0%{

opacity:1;

transform:scale(1);

}

100%{

opacity:0;

transform:scale(0);

}
}
/* =========================
BACKGROUND EFFECTS
========================= */


.mouse-spotlight{

position:fixed;

width:350px;

height:350px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(59,130,246,.25),
transparent 70%
);

pointer-events:none;

transform:translate(-50%,-50%);

z-index:-1;

}




.aurora{

position:fixed;

width:700px;

height:700px;

background:

linear-gradient(
45deg,
#2563eb,
#ffffff,
#06b6d4
);

filter:blur(180px);

opacity:.18;

animation:
auroraMove 15s infinite alternate;

z-index:-2;

}



@keyframes auroraMove{

0%{

transform:
translate(-200px,-100px)
rotate(0deg);

}

100%{

transform:
translate(300px,200px)
rotate(180deg);

}

}





.floating-container{

position:fixed;

inset:0;

pointer-events:none;

z-index:-1;

overflow:hidden;

}



.floating-box{

position:absolute;

border:

1px solid
rgba(255,255,255,.12);


background:

rgba(255,255,255,.04);


backdrop-filter:
blur(10px);


border-radius:20px;


animation:
floatBox infinite ease-in-out;


}



@keyframes floatBox{


0%{

transform:
translateY(0)
rotate(0deg);

}



50%{

transform:
translateY(-120px)
rotate(180deg);

}



100%{

transform:
translateY(0)
rotate(360deg);

}


}




.scroll-progress{

position:fixed;

top:0;

left:0;

height:4px;

background:#d4af37;

width:0%;

z-index:99999;

box-shadow:
0 0 20px #d4af37;

}
/* =================================
PREMIUM LOADER
================================= */


.loader-screen{

position:fixed;

inset:0;

background:#050816;

display:flex;

align-items:center;

justify-content:center;

z-index:999999;

transition:1s ease;

}



.loader-content{

text-align:center;

}



.loader-logo{

font-size:60px;

font-weight:900;

letter-spacing:5px;

animation:
logoPulse 2s infinite;

}



.loader-logo span{

color:#d4af37;

}



.loader-circle{

margin:40px auto;

width:120px;

height:120px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}



.loader-ring{

width:90px;

height:90px;

border-radius:50%;

border:

4px solid transparent;


border-top-color:#d4af37;

border-right-color:#ffffff;


animation:

spinLoader 1s linear infinite;


box-shadow:

0 0 40px #d4af37;

}



.loader-text{

color:#aaa;

font-size:18px;

letter-spacing:2px;

}



.loader-percent{

font-size:40px;

font-weight:800;

margin-top:15px;

color:#d4af37;

}



@keyframes spinLoader{

to{

transform:rotate(360deg);

}

}



@keyframes logoPulse{


0%,100%{

transform:scale(1);

text-shadow:
0 0 20px #d4af37;

}



50%{

transform:scale(1.08);

text-shadow:
0 0 60px #d4af37;

}


}
/* =================================
ADVANCED ANIMATIONS
================================= */


.hidden{

opacity:0;

transform:
translateY(80px)
scale(.95);

transition:
1s ease;

}



.show{

opacity:1;

transform:
translateY(0)
scale(1);

}




.text-letter{

display:inline-block;

opacity:0;

animation:
letterShow .5s forwards;

}



@keyframes letterShow{

from{

opacity:0;

transform:
translateY(40px)
rotateX(90deg);

}


to{

opacity:1;

transform:
translateY(0)
rotateX(0);

}

}





.btn,
.btn2{

transition:
transform .25s ease;

}





.floating-globe{

position:fixed;

right:80px;

bottom:100px;

width:120px;

height:120px;

border-radius:50%;

background:

radial-gradient(
circle at 30% 30%,
#60a5fa,
#2563eb,
#020617
);


box-shadow:

0 0 60px
rgba(59,130,246,.7);


opacity:.45;

z-index:-1;


}



/* Mobile */

@media(max-width:900px){

.floating-globe{

display:none;

}

}
/* ==========================
   LUXURY WORK SECTION
========================== */


.work-title{

text-align:center;

font-size:70px;

letter-spacing:5px;

}


.work-title span{

color:#d4af37;

text-shadow:
0 0 30px #d4af37;

}



.work-container{


display:grid;

grid-template-columns:
repeat(3,1fr);

gap:50px;

margin-top:80px;


}



.work-card{


position:relative;

background:

rgba(255,255,255,.05);


border:

1px solid rgba(212,175,55,.3);


border-radius:30px;


padding:20px;


overflow:hidden;


backdrop-filter:blur(20px);


transition:.6s;


}



.work-card:hover{


transform:

translateY(-25px)
rotateX(8deg);


border-color:#d4af37;


box-shadow:

0 30px 80px
rgba(212,175,55,.35);


}




.work-card img{


width:100%;

height:260px;

object-fit:cover;

border-radius:20px;


transition:.6s;


}




.work-card:hover img{


transform:

scale(1.1);


}





.work-info{


padding:25px;


}



.work-info h3{


font-size:28px;


color:white;


}



.work-info p{


color:#aaa;


margin:15px 0;


}



.work-info a{


color:#d4af37;

text-decoration:none;

font-weight:700;


}



/* Floating Shapes */


.shape{


position:absolute;

z-index:-1;


}




.circle{


width:150px;

height:150px;

border-radius:50%;

background:#d4af37;

filter:blur(80px);

top:-50px;

right:-50px;

animation:
floatShape 6s infinite;


}



.diamond{


width:120px;

height:120px;

background:#fff;

transform:rotate(45deg);

filter:blur(60px);

bottom:-40px;

left:-40px;


animation:
floatShape 8s infinite;


}




.triangle{


width:0;

height:0;

border-left:
80px solid transparent;

border-right:
80px solid transparent;

border-bottom:
140px solid #d4af37;

filter:blur(50px);

right:-50px;

bottom:-50px;


animation:
floatShape 7s infinite;


}





@keyframes floatShape{


0%,100%{

transform:
translateY(0)
rotate(0);

}


50%{

transform:
translateY(-40px)
rotate(180deg);

}


}




@media(max-width:900px){


.work-container{

grid-template-columns:1fr;

}


}
/* ===========================
   HERO TITLE ANIMATION
=========================== */

.hero-title{
    display:flex;
    gap:6px;
    font-size:96px;
    font-weight:900;
    line-height:1;
    margin:20px 0;
}

.hero-title span{
    display:inline-block;
    opacity:0;
    transform:translateY(80px) rotate(10deg);
    animation:titleReveal .8s forwards;
    color:#fff;
    text-shadow:
    0 0 10px rgba(255,255,255,.3),
    0 0 20px rgba(212,175,55,.25);
}

.hero-title span:nth-child(1){animation-delay:.1s;}
.hero-title span:nth-child(2){animation-delay:.2s;}
.hero-title span:nth-child(3){animation-delay:.3s;}
.hero-title span:nth-child(4){animation-delay:.4s;}
.hero-title span:nth-child(5){animation-delay:.5s;}
.hero-title span:nth-child(6){animation-delay:.6s;}
.hero-title span:nth-child(7){animation-delay:.7s;}

@keyframes titleReveal{

0%{

opacity:0;
transform:translateY(80px) scale(.7);
filter:blur(10px);

}

100%{

opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);

}

}

/* Subtitle */

.hero-subtitle{

display:flex;
gap:15px;
font-size:42px;
font-weight:700;
margin-bottom:20px;
flex-wrap:wrap;

}

.hero-subtitle span{

opacity:0;
transform:translateX(-60px);
animation:subtitleReveal .7s forwards;

}

.hero-subtitle span:nth-child(1){animation-delay:.9s;}
.hero-subtitle span:nth-child(2){animation-delay:1.1s;}
.hero-subtitle span:nth-child(3){animation-delay:1.3s;}

@keyframes subtitleReveal{

to{

opacity:1;
transform:translateX(0);

}

}

/* Hello */

.hero-small{

opacity:0;

animation:hello 1s forwards;

animation-delay:.2s;

color:#d4af37;

}

@keyframes hello{

to{

opacity:1;

}

}

/* Floating Title */

.hero-title{

animation:floating 5s ease-in-out infinite 2s;

}

@keyframes floating{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}
/*==============================
SCROLL ANIMATION
==============================*/

.reveal{

opacity:0;

transform:translateY(80px);

transition:

1s cubic-bezier(.17,.67,.35,1);

}


.reveal.active{

opacity:1;

transform:translateY(0);

}



/* Left */

.reveal-left{

opacity:0;

transform:translateX(-120px);

transition:1s;

}


.reveal-left.active{

opacity:1;

transform:translateX(0);

}



/* Right */

.reveal-right{

opacity:0;

transform:translateX(120px);

transition:1s;

}


.reveal-right.active{

opacity:1;

transform:translateX(0);

}



/* Up */

.reveal-up{

opacity:0;

transform:translateY(60px);

transition:1s;

}


.reveal-up.active{

opacity:1;

transform:translateY(0);

}



/* Cards Animation */

.project-card{

opacity:0;

transform:

translateY(80px)
scale(.85)
rotateX(25deg);

transition:1s;

}


.project-card.active{

opacity:1;

transform:

translateY(0)
scale(1)
rotateX(0);

}



/* About Floating */

.about-card{

animation:

floating 5s ease-in-out infinite;

}


@keyframes floating{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-15px);

}

100%{

transform:
translateY(0);

}

}
.reveal,
.reveal-left,
.reveal-right{

opacity:1 !important;
transform:none !important;

}
/* ===========================
ABOUT
=========================== */

.about{

min-height:100vh;

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

padding:120px 8%;

}

.about-left h2{

font-size:70px;

margin-bottom:25px;

color:#fff;

}

.about-left p{

font-size:20px;

line-height:2;

color:#bdbdbd;

max-width:650px;

}

.about-card{

width:420px;

height:520px;

background:rgba(255,255,255,.05);

border:1px solid rgba(212,175,55,.4);

border-radius:30px;

overflow:hidden;

backdrop-filter:blur(20px);

box-shadow:0 0 40px rgba(212,175,55,.2);

animation:floating 6s infinite ease-in-out;

}

.about-card img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

@media(max-width:900px){

.about{

grid-template-columns:1fr;

text-align:center;

}

.about-card{

width:300px;

height:380px;

margin:auto;

}

}
#about{

display:flex;
justify-content:space-between;
align-items:center;

padding:120px 8%;

min-height:100vh;

}

.about-left{

width:45%;

}

.about-left h2{

font-size:60px;

color:#fff;

margin-bottom:20px;

}

.about-left p{

font-size:18px;

line-height:1.8;

color:#bdbdbd;

margin-bottom:35px;

}

.about-info{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.about-info div{

background:#111;

padding:20px;

border:1px solid #d4af37;

border-radius:15px;

color:white;

transition:.4s;

}

.about-info div:hover{

transform:translateY(-10px);

box-shadow:0 0 30px #d4af37;

}
.about-right{
    display:flex;
    justify-content:center;
    align-items:center;
}

.about-slider{

    width:520px;
    height:620px;

    position:relative;
    overflow:hidden;

    border-radius:25px;
    border:2px solid #d4af37;

}

.about-slider img{

    position:absolute;

    width:100%;
    height:100%;

    top:0;

    object-fit:cover;

    left:100%;

    transition:left .9s ease;

}

.about-slider img.active{

    left:0;

}

.about-slider img.prev{

    left:-100%;

}
/* LEFT */

.from-left{

transform:translateX(-120px);

}

.from-left.show{

opacity:1;

transform:translateX(0);

}

/* RIGHT */

.from-right{

transform:translateX(120px);

}

.from-right.show{

opacity:1;

transform:translateX(0);

}

/* TOP */

.from-top{

transform:translateY(-120px);

}

.from-top.show{

opacity:1;

transform:translateY(0);

}

/* BOTTOM */

.from-bottom{

transform:translateY(120px);

}

.from-bottom.show{

opacity:1;

transform:translateY(0);

}

/* ZOOM */

.zoom{

transform:scale(.5);

}

.zoom.show{

opacity:1;

transform:scale(1);

}

/* ROTATE */

.rotate{

transform:rotate(-20deg) scale(.7);

}

.rotate.show{

opacity:1;

transform:rotate(0deg) scale(1);

}
.work-card::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:70%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transition:1s;

}

.work-card:hover::before{

left:150%;

}
.hero-title span{

display:inline-block;

animation:wave 3s infinite;

}

.hero-title span:nth-child(1){animation-delay:.1s;}
.hero-title span:nth-child(2){animation-delay:.2s;}
.hero-title span:nth-child(3){animation-delay:.3s;}
.hero-title span:nth-child(4){animation-delay:.4s;}
.hero-title span:nth-child(5){animation-delay:.5s;}
.hero-title span:nth-child(6){animation-delay:.6s;}
.hero-title span:nth-child(7){animation-delay:.7s;}

@keyframes wave{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}
.about-left h2,
.about-left p,
.work-card,
.hero-title span{

transition:.35s;

}

.about-left h2:hover,
.about-left p:hover,
.hero-title span:hover{

color:#d4af37;

transform:translateY(-8px) scale(1.05);

text-shadow:

0 0 30px #d4af37,

0 0 60px #d4af37;

}
.hero-title{
    display:flex;
    gap:8px;
    font-size:96px;
    font-weight:900;
    margin:20px 0;
    perspective:1000px;
}

.hero-title span{

    display:inline-block;

    opacity:0;

    animation:
    crazyEntry 1s forwards;

    animation-delay:calc(var(--i) * .15s);

}

.hero-title span:nth-child(1){ color:#fff; }
.hero-title span:nth-child(2){ color:#d4af37; }
.hero-title span:nth-child(3){ color:#fff; }
.hero-title span:nth-child(4){ color:#d4af37; }
.hero-title span:nth-child(5){ color:#fff; }
.hero-title span:nth-child(6){ color:#d4af37; }
.hero-title span:nth-child(7){ color:#fff; }

@keyframes crazyEntry{

0%{

opacity:0;

transform:
translate(
calc((random - .5)*400px),
calc((random - .5)*400px)
)
rotate(720deg)
scale(.2);

filter:blur(20px);

}

20%{

opacity:1;

}

70%{

transform:
translateY(-15px)
rotate(-15deg)
scale(1.15);

}

100%{

opacity:1;

transform:
translate(0,0)
rotate(0)
scale(1);

}

}
/* ==========================
   MY WORK
========================== */

#projects{
    padding:120px 8%;
    position:relative;
    overflow:hidden;
}

.work-title{
    text-align:center;
    font-size:80px;
    font-weight:900;
    margin-bottom:70px;
}

.work-title span{
    color:#d4af37;
}
/* SLIDES */

.project-window{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

    padding:60px;

    opacity:0;

    transform:translateX(120px);

    transition:1s cubic-bezier(.16,1,.3,1);

    pointer-events:none;

}

/* ACTIVE */

.project-window.active{

    opacity:1;

    transform:translateX(0);

    pointer-events:auto;

}

/* LEFT */

.project-content{

    width:38%;

}

.project-number{

    color:#d4af37;

    font-size:20px;

    letter-spacing:8px;

    display:block;

    margin-bottom:20px;

}

.project-content h3{

    font-size:70px;

    line-height:1;

    font-weight:900;

    margin-bottom:25px;

}

.project-content p{

    color:#9d9d9d;

    font-size:19px;

    line-height:1.8;

    margin-bottom:35px;

}

.project-tech{

    color:#d4af37;

    margin-bottom:35px;

}

.project-content a{

    display:inline-block;

    padding:18px 40px;

    border:2px solid #d4af37;

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    transition:.4s;

}

.project-content a:hover{

    background:#d4af37;

    color:#000;

}

/* =================================
   FINAL PROJECT WINDOW FIX
================================= */


.project-slider{

    position:relative;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:80px;
}



.project-window{

    position:relative !important;

    width:100%;
    min-height:75vh;

    display:flex;

    align-items:center;
    justify-content:space-between;

    padding:60px;

    border-radius:45px;


    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.12),
    rgba(255,255,255,.03)
    );


    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(25px);


    opacity:1 !important;

    transform:none !important;

}



/* image box */

.project-preview{

    width:50%;

    height:450px;

    border-radius:35px;

    overflow:hidden;

    background:#000;

}



/* content */

.project-content{

    width:40%;

}



.project-content h3{

    font-size:55px;

    color:white;

}



.project-content p{

    color:#aaa;

    font-size:18px;

    line-height:1.7;

}


.project-number{

    color:#d4af37;

    font-size:22px;

}



.project-tech{

    color:#d4af37;

    margin:25px 0;

}



@media(max-width:900px){

.project-window{

    flex-direction:column;

    gap:40px;

}


.project-content,
.project-preview{

    width:100%;

}


.project-preview{

    height:300px;

}

}
/* ==========================
   PROJECT SPACING FIX
========================== */

.project-slider{

    gap:35px;

}


.project-window{

    min-height:520px;

    padding:40px;

    border-radius:35px;

}


.project-preview{

    width:48%;

    height:380px;

}


.project-content{

    width:45%;

}


.project-content h3{

    font-size:45px;

    margin:15px 0;

}


.project-content p{

    font-size:16px;

    line-height:1.5;

}


.project-tech{

    margin:15px 0;

}


/* Mobile */

@media(max-width:900px){

.project-slider{

    gap:30px;

}


.project-window{

    min-height:auto;

    padding:25px;

}

.project-preview{

    height:280px;

}

}
/* =========================
PROJECT SHOWCASE SLIDER
========================= */


#projects{

min-height:100vh;
padding:120px 8%;

}


.showcase{

display:flex;

align-items:center;

justify-content:space-between;

gap:80px;

}



.showcase-info{

width:40%;

}



#project-number{

color:#d4af37;

font-size:22px;

letter-spacing:5px;

}



.showcase-info h3{

font-size:60px;

margin:25px 0;

font-weight:900;

}



.showcase-info p{

color:#aaa;

font-size:18px;

line-height:1.7;

}



#project-tech{

color:#d4af37;

margin:25px 0;

}



.showcase-info a{

display:inline-block;

padding:15px 35px;

background:white;

color:black;

border-radius:50px;

text-decoration:none;

}



.showcase-image{

width:55%;

height:500px;

overflow:hidden;

border-radius:30px;

}



.showcase-image img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

animation:imageMove 1s;

}



@keyframes imageMove{


0%{

opacity:0;

transform:translateX(80px) scale(.9);

}


100%{

opacity:1;

transform:translateX(0) scale(1);

}


}


@media(max-width:900px){

.showcase{

flex-direction:column;

}


.showcase-info,
.showcase-image{

width:100%;

}


.showcase-image{

height:350px;

}

}
/* ==========================
   MY WORK SECTION
========================== */

#projects{
    padding:120px 8%;
    position:relative;
}

.work-title{
    text-align:center;
    font-size:80px;
    font-weight:900;
    margin-bottom:80px;
}

.work-title span{
    color:#d4af37;
    text-shadow:0 0 30px rgba(212,175,55,.5);
}

/* MAIN WRAPPER */

.project-slider{

    width:100%;
    max-width:1500px;
    margin:auto;

    display:flex;
    flex-direction:column;

    gap:80px;
}

/* PROJECT CARD */

.project-window{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:80px;

    min-height:500px;

    padding:40px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.08);

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.01)
    );

    overflow:hidden;
}

/* LEFT SIDE */

.project-content{

    width:40%;
}

.project-number{

    display:block;

    color:#d4af37;

    font-size:20px;

    letter-spacing:8px;

    margin-bottom:20px;
}

.project-content h3{

    font-size:58px;

    line-height:1.1;

    margin-bottom:20px;

    font-weight:900;
}

.project-content p{

    color:#9c9c9c;

    font-size:18px;

    line-height:1.8;

    margin-bottom:25px;
}

.project-tech{

    color:#d4af37;

    font-size:16px;

    font-weight:600;
}
/* ==========================
   RIGHT IMAGE
========================== */

.project-preview{

    width:60%;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

/* GOLD LINE */

.project-preview::before{

    content:"";

    position:absolute;

    width:105%;

    height:105%;

    border:1px solid rgba(212,175,55,.35);

    border-radius:35px;

    pointer-events:none;

}


/* FLOAT */

@keyframes imageFloat{

    0%{

        transform:
        rotate(-8deg)
        translateY(0px);

    }

    50%{

        transform:
        rotate(-8deg)
        translateY(-10px);

    }

    100%{

        transform:
        rotate(-8deg)
        translateY(0px);

    }

}

.project-preview{

    position:relative;

}

.project-preview img.active{

    opacity:1;

    transform:rotate(-8deg) scale(1);

}
.project-preview{

    position:relative;

    overflow:hidden;

}
/* ===========================
PROJECT IMAGE SLIDER
=========================== */

.project-preview{

    position:relative;

    width:60%;

    height:420px;

    overflow:hidden;

}

.project-preview img{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:30px;

    border:2px solid #d4af37;

    opacity:0;

    transform:
    translateX(80px)
    rotate(-8deg)
    scale(.95);

    transition:1s;

}

.project-preview img.active{

    opacity:1;

    transform:
    translateX(0)
    rotate(-8deg)
    scale(1);

}
.project-preview img{
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);
}
.project-preview img.active{
    opacity:1;
    transform:rotate(-8deg) scale(1);
}

.project-preview img{
    opacity:0;
    transform:rotate(-8deg) scale(1.08);
}
.project-window:hover img.active{
    transform:rotate(-8deg) scale(1.05);
}
.project-preview img{
    box-shadow:
    0 35px 90px rgba(0,0,0,.55);
}
.project-window{
    transition:.5s;
}

.project-window:hover{
    transform:translateY(-10px);
}
#contact{

    padding:120px 8%;

    background:#050505;

}


.contact-title{

    text-align:center;

    margin-bottom:70px;

}


.small-text{

    color:#d4af37;

    letter-spacing:3px;

}


.contact-title h2{

    font-size:50px;

}


.contact-title span{

    color:#d4af37;

}



.contact-container{

    display:flex;

    gap:60px;

    justify-content:center;

}



.contact-info{

    width:40%;

}



.contact-card{

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,.15);

    padding:25px;

    border-radius:20px;

    margin-bottom:20px;

    backdrop-filter:blur(10px);

}



.contact-card h3{

    margin-bottom:10px;

    color:#d4af37;

}




.whatsapp-btn{

    display:inline-block;

    padding:15px 30px;

    border-radius:50px;

    background:#25D366;

    color:white;

    text-decoration:none;

    margin-top:20px;

}




.contact-form{

    width:45%;

    background:rgba(255,255,255,.05);

    padding:35px;

    border-radius:25px;

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

}



.contact-form input,
.contact-form select,
.contact-form textarea{


    width:100%;

    padding:16px;

    margin-bottom:18px;

    background:#111;

    border:1px solid #333;

    color:white;

    border-radius:12px;


}



.contact-form textarea{

    height:130px;

    resize:none;

}



.contact-form button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:50px;

    background:#d4af37;

    color:black;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}



.contact-form button:hover{

    transform:translateY(-5px);

    box-shadow:0 0 30px #d4af37;

}





@media(max-width:900px){


.contact-container{

    flex-direction:column;

}


.contact-info,
.contact-form{

    width:100%;

}


}
#why{

    padding:120px 8%;

    background:#050505;

}


.why-title{

    text-align:center;

    margin-bottom:70px;

}


.why-title p{

    color:#d4af37;

    letter-spacing:3px;

}


.why-title h2{

    font-size:50px;

}


.why-title span{

    color:#d4af37;

}



.why-title h3{

    color:#aaa;

    font-weight:400;

}



.why-container{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.why-card{

    padding:30px;

    border-radius:25px;

    background:
    rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    transition:.4s;

}



.why-card:hover{

    transform:translateY(-10px);

    border-color:#d4af37;

}



.number{

    font-size:40px;

    color:#d4af37;

    font-weight:bold;

}



.why-card h3{

    margin:20px 0 10px;

}



.why-card p{

    color:#aaa;

    line-height:1.6;

}



@media(max-width:900px){

    .why-container{

        grid-template-columns:1fr;

    }

}
#footer{

    padding:70px 8% 30px;

    background:#020202;

    border-top:1px solid rgba(255,255,255,.1);

}



.footer-container{

    display:flex;

    justify-content:space-between;

    gap:40px;

}



.footer-brand h2{

    font-size:30px;

}


.footer-brand span{

    color:#d4af37;

}


.footer-brand p{

    color:#999;

    max-width:350px;

    line-height:1.6;

}




.footer-links,
.footer-social{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.footer-links h3,
.footer-social h3{

    color:#d4af37;

    margin-bottom:10px;

}



.footer-links a,
.footer-social a{

    color:#aaa;

    text-decoration:none;

    transition:.3s;

}



.footer-links a:hover,
.footer-social a:hover{

    color:#d4af37;

    transform:translateX(5px);

}



.footer-bottom{

    margin-top:50px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.1);

    text-align:center;

    color:#777;

}



@media(max-width:900px){


.footer-container{

    flex-direction:column;

}


}
/* ==========================
MOBILE RESPONSIVE FINAL
========================== */

@media(max-width:900px){


body{
    overflow-x:hidden;
}


/* Navbar */

header{

    padding:20px 5%;

}


.logo{

    font-size:25px;

}


nav{

    display:none;

}



/* HERO */


.hero{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    text-align:center;

    padding:120px 5% 50px;

    gap:60px;

}



.hero-left h3{

    font-size:18px;

}


.hero-left h1{

    font-size:55px;

    margin:15px 0;

}


.hero-left h2{

    font-size:30px;

}



.hero-left p{

    font-size:15px;

}



/* Buttons */


.buttons{

    justify-content:center;

    flex-wrap:wrap;

}



/* CUBE */


.hero-right{

    width:100%;

}


.scene{

    width:280px;

    height:280px;

    perspective:900px;

}



.face{

    width:280px;

    height:280px;

}


.front{

    transform:
    translateZ(140px);

}


.back{

    transform:
    rotateY(180deg)
    translateZ(140px);

}


.left{

    transform:
    rotateY(-90deg)
    translateZ(140px);

}


.right{

    transform:
    rotateY(90deg)
    translateZ(140px);

}


.top{

    transform:
    rotateX(90deg)
    translateZ(140px);

}


.bottom{

    transform:
    rotateX(-90deg)
    translateZ(140px);

}



/* SECTIONS */


section{

    padding:80px 5%;

}


h2{

    font-size:38px;

}


/* PROJECT */


.project-window{

    display:flex;

    flex-direction:column;

}


.project-content{

    text-align:center;

}


.project-preview img{

    width:100%;

}



/* WHY */


.why-container{

    grid-template-columns:1fr;

}



/* CONTACT */


.contact-container{

    display:flex;

    flex-direction:column;

}


.contact-form{

    width:100%;

}



/* FOOTER */


.footer-container{

    flex-direction:column;

    text-align:center;

}


.footer-links,
.footer-social{

    align-items:center;

}


.footer-brand p{

    margin:auto;

}
/* =========================
FINAL MOBILE FIX
========================= */

@media(max-width:900px){


/* HERO */

.hero{

height:auto;
min-height:100vh;
display:flex;
flex-direction:column;
padding:120px 20px 60px;
overflow:hidden;

}


.hero-left{

width:100%;
text-align:center;

}


.hero-left h1{

font-size:55px;

}


.hero-left h2{

font-size:32px;

}


.hero-right{

width:100%;
display:flex;
justify-content:center;

}



/* CUBE */

.scene{

width:260px;
height:260px;

}


.face{

width:260px;
height:260px;

}


.front{

transform:translateZ(130px);

}


.back{

transform:rotateY(180deg) translateZ(130px);

}


.left{

transform:rotateY(-90deg) translateZ(130px);

}


.right{

transform:rotateY(90deg) translateZ(130px);

}


.top{

transform:rotateX(90deg) translateZ(130px);

}


.bottom{

transform:rotateX(-90deg) translateZ(130px);

}



/* ABOUT */

#about{

display:flex;
flex-direction:column;
gap:40px;

}


.about-left,
.about-right{

width:100%;

}


.about-right img{

width:100%;
height:auto;
object-fit:contain;

}



/* MY WORK */

#projects{

padding:80px 20px;

}


.work-title{

font-size:45px;
text-align:center;

}



.project-window{

width:100%;
height:auto;

display:flex;
flex-direction:column;

padding:25px;

}


.project-content{

width:100%;
text-align:left;

}


.project-content h3{

font-size:32px;

}


.project-content p{

font-size:15px;
line-height:1.6;

}


.project-preview{

width:100%;
height:auto;

margin-top:30px;

}


.project-preview img{

width:100%;
height:auto;

object-fit:contain;

}




}


}