/* HERO FLOAT */

@keyframes float{

0%{
transform:
translateY(0);
}

50%{
transform:
translateY(-10px);
}

100%{
transform:
translateY(0);
}

}



/* FADE DOWN */

@keyframes fadeDown{

from{

opacity:0;

transform:
translateY(-30px);

}

to{

opacity:1;

transform:
none;

}

}


.fade-down{

animation:
fadeDown .8s ease;

}



/* FADE UP */

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(50px);

}

to{

opacity:1;

transform:
none;

}

}


.fade-up{

animation:
fadeUp 1s ease;

}



/* IMAGE MOTION */

.right img{

animation:
float 6s ease infinite;

}



/* SERVICE CARD */

.card{

transition:
.45s;

}


.card:hover{

transform:
translateY(-10px);

box-shadow:
0 25px 60px
rgba(0,0,0,.12);

}



/* BUTTON */

/* ===================== */
/* PREMIUM BUTTON MOTION */
/* ===================== */

.hero-btn,
.button{

position:relative;

overflow:hidden;

transition:
transform .45s ease,
letter-spacing .45s ease,
box-shadow .45s ease;

}



.hero-btn:hover,
.button:hover{

transform:
translateY(-4px);

letter-spacing:1px;

box-shadow:
0 18px 40px
rgba(184,134,56,.22);

}



.hero-btn:active,
.button:active{

transform:
translateY(1px)
scale(.98);

}



/* REVEAL */

.reveal{

opacity:0;

transform:
translateY(60px);

animation:
show 1s forwards;

}


@keyframes show{

to{

opacity:1;

transform:none;

}

}



/* WHATSAPP */

.whatsapp{

animation:
pulse 2s infinite;

}


@keyframes pulse{

0%{

box-shadow:
0 0 0 0
rgba(34,197,94,.6);

}

70%{

box-shadow:
0 0 0 20px
rgba(34,197,94,0);

}

100%{

box-shadow:
0 0 0 0
rgba(34,197,94,0);

}

}



/* FEATURE BOX */

.features div{

transition:.4s;

}


.features div:hover{

transform:
translateY(-8px);

}



/* MOBILE */

@media(max-width:900px){

.right img{

animation:none;

}

}
/* ===================== */
/* PREMIUM NAVIGATION */
/* ===================== */

.premium-nav{

display:flex;

gap:36px;

align-items:center;

flex-wrap:wrap;

}

.premium-nav a{

text-decoration:none;

position:relative;

overflow:hidden;

padding:8px 0;

}

.premium-nav span{

display:inline-block;

color:#222;

font-size:14px;

letter-spacing:2px;

transition:
transform .35s,
color .35s;

}



.premium-nav a:hover span{

transform:
translateY(-3px)
scale(1.08);

color:#b88638;

}



.premium-nav a::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:2px;

background:#b88638;

transition:.4s;

}



.premium-nav a:hover::after{

width:100%;

}



/* CLICK FEEL */

.premium-nav a:active span{

transform:
scale(.92);

}



/* ===================== */
/* HEADER PREMIUM */
/* ===================== */

header{

backdrop-filter:
blur(12px);

transition:.4s;

}



header:hover{

transform:
translateY(2px);

}



/* ===================== */
/* SERVICE HOVER */
/* ===================== */

.card{

overflow:hidden;

}



.card img{

transition:
transform .9s;

}



.card:hover img{

transform:
scale(1.06);

}



.card:hover h3{

letter-spacing:1px;

}



/* ===================== */
/* HERO TEXT */
/* ===================== */

.left h1{

animation:
titleFloat 4s ease infinite;

}



@keyframes titleFloat{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-4px);

}

100%{

transform:
translateY(0);

}

}



/* ===================== */
/* SECTION REVEAL */
/* ===================== */

.services,
.why,
.contact{

transition:
1s;

}



.services:hover,
.why:hover,
.contact:hover{

transform:
translateY(-4px);

}



/* ===================== */
/* FOOTER */
/* ===================== */

footer{

opacity:.8;

transition:.4s;

}



footer:hover{

opacity:1;

letter-spacing:1px;

}



/* ===================== */
/* MOBILE */
/* ===================== */

@media(max-width:900px){

.premium-nav{

justify-content:center;

gap:18px;

}

.premium-nav span{

font-size:12px;

}

}

body::before{

content:"";

position:fixed;

width:700px;

height:700px;

top:-250px;

right:-250px;

background:

radial-gradient(
circle,

rgba(184,134,56,.08),

transparent

);

pointer-events:none;

animation:
float 16s ease infinite;

}

/* TEXT APPEAR */

.left p,
.tags,
.content p{

animation:
softFade 1.6s ease;

}


@keyframes softFade{

from{

opacity:0;

transform:
translateY(12px);

}

to{

opacity:1;

transform:none;

}

}

/* ===================== */
/* LUXURY HOVER SHIMMER */
/* ===================== */

.card{

position:relative;

overflow:hidden;

}



.card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.28),
transparent
);

transform:
skewX(-25deg);

transition:1s;

pointer-events:none;

}



.card:hover::before{

left:160%;

}