/*==================================================
LUNARIS V5
STYLE.CSS
PART 1
==================================================*/


:root{

    --black:#050505;
    --dark:#0b0b0f;

    --gold:#d7b15d;
    --gold-light:#f5d98b;

    --white:#ffffff;
    --gray:#a7a7a7;

    --container:1200px;

}


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    background:var(--black);

    color:var(--white);

    font-family:"Manrope",sans-serif;

    overflow-x:hidden;

}



.container{

    width:min(92%,var(--container));

    margin:auto;

}



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


header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:

    rgba(5,5,5,.65);

    backdrop-filter:blur(20px);

    border-bottom:

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

}



nav{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo{

    font-size:32px;

    font-weight:800;

    letter-spacing:8px;

}



.nav-links{

    display:flex;

    gap:35px;

    list-style:none;

}



.nav-links a{

    color:#aaa;

    transition:.3s;

}


.nav-links a:hover{

    color:var(--gold);

}



.nav-btn{

    padding:12px 25px;

    border-radius:50px;

    background:var(--gold);

    color:#000;

    font-weight:700;

}



/*=========================
HERO FIX
=========================*/


.hero{

position:relative;

overflow:hidden;

display:flex;

align-items:center;

min-height:100vh;

}



.hero-grid{

position:relative;

display:grid;

grid-template-columns:1fr;

align-items:center;

min-height:100vh;

}

.hero-left{

position:relative;

z-index:100;

}



.hero-tag{

display:inline-block;

padding:12px 22px;

border-radius:50px;

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

backdrop-filter:blur(20px);

color:#f5d98b;

border:1px solid rgba(245,217,139,.35);

text-shadow:0 0 15px rgba(0,0,0,.9);

}



.hero h1{
    color:#ffffff;
    position:relative;
    z-index:9999;
    text-shadow:
    0 0 15px rgba(0,0,0,.8),
    0 0 30px rgba(0,0,0,.6),
    0 0 50px rgba(0,0,0,.4);
}


.hero p{
    color:#ffffff;
    opacity:1;
    position:relative;
    z-index:9999;
    text-shadow:
    0 0 12px rgba(0,0,0,.8);
}


/*=========================
HERO BUTTONS FIX
=========================*/

.hero-buttons{
    display:flex;
    gap:20px;
    margin-top:35px;
}


.hero-buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    padding:16px 35px;

    border-radius:50px;

    font-weight:700;

    font-size:16px;

    transition:.3s;

}


/* Yellow Button */

.primary-btn{

    cursor:pointer;
outline:none;
user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
  background:
    linear-gradient(
    135deg,
    #d7b15d,
    #f5d98b
    );

    color:#000 !important;

    box-shadow:
    0 10px 30px
    rgba(215,177,93,.25);

}



/* View Portfolio Button */

.secondary-btn{

    background:

    rgba(255,255,255,.06);

    color:#ffffff !important;

    border:

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

    backdrop-filter:blur(10px);

}



.primary-btn:hover,
.secondary-btn:hover{

    transform:translateY(-5px);

}



.secondary-btn:hover{

    border-color:#d7b15d;

    color:#d7b15d !important;

}



/* Moon Area */


.hero-right{

position:absolute;

inset:0;

display:flex;

justify-content:center;

align-items:center;

z-index:0;

}

.hero-visual{

    width:100%;

    height:100%;

}


/*==================================================
LUNARIS V5
STYLE.CSS
PART 2
==================================================*/


/*=========================
HERO STATS
=========================*/



.hero-stats{

display:flex;

gap:40px;

margin-top:50px;

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

padding:20px 25px;

border-radius:20px;

backdrop-filter:blur(20px);

}


.hero-stats div{

text-align:left;

}



.hero-stats h2{

font-size:42px;

color:var(--gold);

margin-bottom:5px;

}



.hero-stats span{

color:var(--gray);

font-size:14px;

}




/*=========================
GENERAL SECTIONS
=========================*/


section{

padding:120px 0;

}



.section-header{

max-width:750px;

margin-bottom:70px;

}



.section-title{

font-size:

clamp(40px,5vw,70px);

line-height:1;

margin-bottom:20px;

}



.section-text{

color:var(--gray);

font-size:19px;

line-height:1.8;

}




/*=========================
SERVICES
=========================*/


.services-grid{

display:grid;

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

gap:30px;

}



.service-card{

position:relative;

padding:40px;

background:

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

border:

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

border-radius:30px;

overflow:hidden;

transition:.4s;

}



.service-card:hover{

transform:translateY(-12px);

border-color:

rgba(215,177,93,.5);

box-shadow:

0 20px 60px

rgba(215,177,93,.15);

}



.service-icon{

font-size:50px;

margin-bottom:25px;

}



.service-card h3{

font-size:28px;

margin-bottom:15px;

}



.service-card p{

color:var(--gray);

line-height:1.7;

}




/*=========================
PORTFOLIO
=========================*/


.portfolio-grid{

display:grid;

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

gap:35px;

}



.project-card{

background:

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

border:

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

border-radius:30px;

overflow:hidden;

transition:.4s;

}



.project-card:hover{

transform:translateY(-10px);

}



.project-image{

height:300px;

display:flex;

align-items:center;

justify-content:center;

font-size:90px;

background:

linear-gradient(

135deg,

#111,

#202020

);

}



.project-info{

padding:30px;

}



.project-info h3{

font-size:30px;

margin-bottom:15px;

}



.project-info p{

color:var(--gray);

line-height:1.7;

}




/*=========================
STATS SECTION
=========================*/


.stats{

display:grid;

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

gap:20px;

}



.stat{

padding:30px;

text-align:center;

}



.stat h2{

font-size:55px;

color:var(--gold);

}



.stat span{

color:var(--gray);

}
/*==================================================
LUNARIS V5
STYLE.CSS
PART 3
==================================================*/


/*=========================
CONTACT SECTION
=========================*/


.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}



.contact-card{

background:

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

border:

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

border-radius:30px;

padding:45px;

}



.contact-card h2{

font-size:

clamp(35px,4vw,55px);

line-height:1.1;

margin-bottom:20px;

}



.contact-card p{

color:var(--gray);

line-height:1.8;

font-size:18px;

}



/*=========================
CONTACT FORM
=========================*/


.contact-form{

display:flex;

flex-direction:column;

gap:18px;

}



.contact-form input,

.contact-form textarea{

width:100%;

padding:18px 20px;

border-radius:16px;

border:

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

background:#111;

color:white;

font-size:16px;

outline:none;

}



.contact-form input:focus,

.contact-form textarea:focus{

border-color:var(--gold);

}



.contact-form textarea{

height:160px;

resize:none;

}



.contact-form button{

padding:18px;

border:none;

border-radius:50px;

background:

linear-gradient(

135deg,

var(--gold),

var(--gold-light)

);

font-size:17px;

font-weight:700;

cursor:pointer;

}



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


footer{

padding:70px 0 40px;

border-top:

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

}



.footer-grid{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

}



.footer-logo{

font-size:35px;

font-weight:800;

letter-spacing:6px;

}



.footer-links{

display:flex;

gap:25px;

}



.footer-links a{

color:var(--gray);

transition:.3s;

}



.footer-links a:hover{

color:var(--gold);

}



.copyright{

text-align:center;

color:#666;

margin-top:35px;

font-size:14px;

}



/*=========================
SPACE EFFECTS
=========================*/


.space-particle{

position:absolute;

width:4px;

height:4px;

border-radius:50%;

background:

var(--gold-light);

opacity:.7;

animation:

floatParticle linear infinite;

}



@keyframes floatParticle{


0%{

transform:translateY(0);

opacity:0;

}


50%{

opacity:1;

}


100%{

transform:translateY(-200px);

opacity:0;

}


}



.meteor{

position:absolute;

width:120px;

height:2px;

background:

linear-gradient(

90deg,

transparent,

var(--gold-light)

);

transform:rotate(-35deg);

animation:

meteorMove linear forwards;

}



@keyframes meteorMove{


from{

transform:

translate(0,0)

rotate(-35deg);

opacity:1;

}


to{

transform:

translate(-400px,400px)

rotate(-35deg);

opacity:0;

}


}



/*=========================
CURSOR GLOW
=========================*/


.cursor-glow{

position:fixed;

width:180px;

height:180px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(215,177,93,.18),

transparent 70%

);

pointer-events:none;

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

z-index:-1;

}



/*=========================
RESPONSIVE
=========================*/


@media(max-width:1000px){


.hero-grid{

grid-template-columns:1fr;

}


.hero-right{

height:450px;

order:-1;

}



.services-grid{

grid-template-columns:1fr;

}



.portfolio-grid{

grid-template-columns:1fr;

}



.contact-grid{

grid-template-columns:1fr;

}



.stats{

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

}


}



@media(max-width:700px){


.nav-links{

display:none;

}



.logo{

font-size:25px;

}



.hero h1{

font-size:48px;

}



.hero p{

font-size:17px;

}



.hero-buttons{

flex-direction:column;

}



.hero-stats{

gap:20px;

flex-wrap:wrap;

}



.hero-stats h2{

font-size:32px;

}



.stats{

grid-template-columns:1fr;

}



.footer-grid{

flex-direction:column;

text-align:center;

}



.footer-links{

flex-wrap:wrap;

justify-content:center;

}


}



/*=========================
END STYLE V5
=========================*/
/*==================================================
LUNARIS V5
FINAL POLISH PATCH
==================================================*/


/* HERO PREMIUM ALIGNMENT */

.hero{

position:relative;

overflow:hidden;

}









.hero-visual{

position:relative;

}






/* HERO ANIMATION */

@keyframes heroFade{

from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}

}



/* CARD REVEAL */

.service-card,
.project-card,
.contact-card,
.stat{

opacity:0;

transform:translateY(40px);

transition:

opacity .8s ease,

transform .8s ease;

}



.show{

opacity:1;

transform:translateY(0);

}



/* PREMIUM GLASS EFFECT */

.service-card::before,
.project-card::before,
.contact-card::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle at top left,

rgba(215,177,93,.15),

transparent 40%

);

opacity:0;

transition:.4s;

}



.service-card:hover::before,
.project-card:hover::before,
.contact-card:hover::before{

opacity:1;

}



/* BUTTON RIPPLE */

.hero-buttons a{

position:relative;

overflow:hidden;

}




/* MOBILE MOON FIX */

@media(max-width:700px){

.hero-right{

height:350px;

}





}
/*==================================================
LUNARIS HERO TEXT VISIBILITY FIX
==================================================*/


.hero-left{

position:relative;

z-index:9999;

}



.hero h1{

color:#ffffff;

text-shadow:

0 5px 30px rgba(0,0,0,.8),

0 0 40px rgba(215,177,93,.25);

}



.hero h1 span{

color:#d7b15d;

}



.hero p{

color:#d0d0d0;

text-shadow:

0 3px 15px rgba(0,0,0,.8);

}



.hero-tag{
    position:relative;
    z-index:9999;
    color:#f0d07a;
}



.hero-buttons{

position:relative;

z-index:20;

}



.hero-stats{

background:

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

padding:20px;

border-radius:20px;

backdrop-filter:

blur(12px);

}



/* Moon should stay behind */





#moon-container canvas{

filter:

drop-shadow(

0 0 50px rgba(255,220,150,.25)

);

}
/*==================================================
LUNARIS HERO ANIMATION V2
==================================================*/


/* Initial State */




/* Timing */

.hero-tag{

animation-delay:.3s;

}


.hero h1{

animation-delay:.5s;

}


.hero p{

animation-delay:.7s;

}


.hero-buttons{

animation-delay:.9s;

}


.hero-stats{

animation-delay:1.1s;

}



/* Text Reveal */

@keyframes heroReveal{


from{

opacity:0;

transform:

translateY(50px);

filter:

blur(10px);

}


to{

opacity:1;

transform:

translateY(0);

filter:

blur(0);

}


}



/* Moon Entrance */

.hero-right{

opacity:0;

transform:

scale(.75)

translateX(80px);


animation:

moonReveal 2s ease forwards;

animation-delay:.5s;

}



@keyframes moonReveal{


0%{

opacity:0;

transform:

scale(.65)

translateX(120px);

filter:

brightness(.3);

}



60%{

opacity:1;

}



100%{

opacity:1;

transform:

scale(1)

translateX(0);

filter:

brightness(1);

}


}



/* Floating Moon */

#moon-container canvas{

animation:

moonFloat 8s ease-in-out infinite;

}



@keyframes moonFloat{


0%{

transform:

translateY(0);

}



50%{

transform:

translateY(-18px);

}



100%{

transform:

translateY(0);

}


}



/* Button Glow */

.primary-btn{

animation:

buttonGlow 3s infinite;

}



@keyframes buttonGlow{


0%{

box-shadow:

0 0 0 rgba(215,177,93,0);

}



50%{

box-shadow:

0 0 35px rgba(215,177,93,.45);

}



100%{

box-shadow:

0 0 0 rgba(215,177,93,0);

}


}



/* Mobile Optimization */

@media(max-width:700px){


.hero-right{

animation-delay:.3s;

}



.hero-left > *{

animation-duration:.8s;

}


}
/*==================================================
LUNARIS SCROLL EXPERIENCE V1
==================================================*/


/* Hidden Before Scroll */

.service-card,
.project-card,
.contact-card,
.stat,
.section-header{

opacity:0;

transform:

translateY(60px);

transition:

opacity .8s ease,

transform .8s ease;

}



/* Visible State */

.scroll-show{

opacity:1;

transform:

translateY(0);

}



/* Stagger Cards */

.service-card:nth-child(1),
.project-card:nth-child(1){

transition-delay:.1s;

}


.service-card:nth-child(2),
.project-card:nth-child(2){

transition-delay:.25s;

}


.service-card:nth-child(3),
.project-card:nth-child(3){

transition-delay:.4s;

}



/* Section Background Glow */

section{

position:relative;

}


section::before{

content:"";

position:absolute;

width:400px;

height:400px;

background:

radial-gradient(

circle,

rgba(215,177,93,.08),

transparent 70%

);

top:20%;

left:-200px;

pointer-events:none;

}



/* Card Premium Hover */

.service-card,
.project-card{

will-change:transform;

}



.service-card:hover,
.project-card:hover{

box-shadow:

0 25px 80px

rgba(0,0,0,.5),

0 0 30px

rgba(215,177,93,.12);

}



/* Smooth Section Movement */

.container{

animation:

none;

}


/* Contact Premium Glow */

.contact-card{

backdrop-filter:

blur(20px);

}



.contact-card:hover{

border-color:

rgba(215,177,93,.5);

}
/*==================================================
LUNARIS PORTFOLIO SHOWCASE V2
==================================================*/

.portfolio-grid{

display:grid;

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

gap:30px;

}


.project-card{

position:relative;

overflow:hidden;

background:

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

border:

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

border-radius:28px;

transition:.5s;

}



.project-card:hover{

transform:

translateY(-15px);

}



.project-image{

height:320px;

position:relative;

overflow:hidden;

}



.project-image::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

transparent,

rgba(0,0,0,.8)

);

}



.project-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}



.project-card:hover img{

transform:

scale(1.12);

}



.project-info{

position:relative;

padding:35px;

}



.project-info span{

color:#d7b15d;

font-size:13px;

letter-spacing:2px;

}



.project-info h3{

font-size:30px;

margin:15px 0;

}



.project-info p{

color:#aaa;

line-height:1.7;

}



/* Mobile */

@media(max-width:900px){

.portfolio-grid{

grid-template-columns:1fr;

}

}
/*================================
LUNARIS PROJECT IMAGE FIX
================================*/


.project-image{

height:320px;

display:flex;

align-items:center;

justify-content:center;

position:relative;

overflow:hidden;

background:

linear-gradient(
135deg,
#111111,
#1d1d25
);

}


/* Project Logo Style */

.project-logo{

font-size:80px;

font-weight:900;

color:#d7b15d;

text-shadow:

0 0 40px rgba(215,177,93,.5);

transition:.5s;

}


.project-card:hover .project-logo{

transform:

scale(1.2)

rotate(5deg);

}



/* Different Project Colors */


.ai-logo{

color:#38bdf8;

}



.store-logo{

color:#f5d98b;

}



.business-logo{

color:#ffffff;

}
/*================================
LUNARIS TRUST SECTION
================================*/


.trust-grid{

display:grid;

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

gap:30px;

}



.trust-card{

padding:40px;

background:

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

border:

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

border-radius:30px;

text-align:center;

transition:.4s;

}



.trust-card:hover{

transform:

translateY(-10px);

border-color:

rgba(215,177,93,.5);

}



.trust-number{

font-size:60px;

font-weight:800;

color:#d7b15d;

margin-bottom:15px;

}



.trust-card h3{

font-size:25px;

margin-bottom:15px;

}



.trust-card p{

color:#aaa;

line-height:1.7;

}



.testimonial{

margin-top:60px;

padding:45px;

border-radius:30px;

background:

linear-gradient(

135deg,

rgba(215,177,93,.12),

rgba(255,255,255,.04)

);

text-align:center;

}



.testimonial p{

font-size:25px;

line-height:1.6;

font-style:italic;

}



.testimonial h4{

margin-top:20px;

color:#d7b15d;

}



@media(max-width:900px){

.trust-grid{

grid-template-columns:1fr;

}

}

/*================================
LUNARIS ABOUT SECTION
================================*/


.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.about-content .section-title{

margin-bottom:25px;

}



.mission-box{

margin-top:35px;

padding:30px;

border-radius:25px;

background:

rgba(215,177,93,.08);

border:

1px solid rgba(215,177,93,.25);

}



.mission-box h3{

color:#d7b15d;

margin-bottom:15px;

font-size:25px;

}



.about-visual{

display:flex;

flex-direction:column;

gap:25px;

}



.vision-card{

padding:35px;

background:

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

border:

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

border-radius:30px;

transition:.4s;

}



.vision-card:hover{

transform:translateX(15px);

border-color:#d7b15d;

}



.vision-icon{

font-size:45px;

color:#d7b15d;

margin-bottom:15px;

}



.vision-card h3{

font-size:28px;

margin-bottom:10px;

}



.vision-card p{

color:#aaa;

}



@media(max-width:900px){

.about-grid{

grid-template-columns:1fr;

}

}

/*==================================================
LUNARIS FINAL ANIMATION PACK V1
==================================================*/


/* Smooth Entire Website */

html{

scroll-behavior:smooth;

}


body{

animation:

pageFade 1.2s ease;

}


@keyframes pageFade{

from{

opacity:0;

}

to{

opacity:1;

}

}




/* Navigation */

header{

transition:

.4s;

}


header:hover{

background:

rgba(8,8,12,.85);

}




/* Links */

a{

transition:

.35s;

text-decoration:none;

}




/* Gold Hover */

.nav-links a:hover,

.footer-links a:hover{

color:#d7b15d;

text-shadow:

0 0 15px rgba(215,177,93,.35);

}




/* Premium Cards */

.service-card,

.project-card,

.trust-card,

.vision-card,

.contact-card{

transition:

transform .45s ease,

box-shadow .45s ease,

border-color .45s ease;

}



.service-card:hover,

.project-card:hover,

.trust-card:hover,

.vision-card:hover,

.contact-card:hover{

transform:

translateY(-12px);

box-shadow:

0 25px 70px rgba(0,0,0,.45);

}




/* Floating Gold Glow */

body::before{

content:"";

position:fixed;

width:700px;

height:700px;

top:-250px;

right:-250px;

background:

radial-gradient(

circle,

rgba(215,177,93,.08),

transparent 70%

);

pointer-events:none;

z-index:-5;

animation:

glowMove 12s ease-in-out infinite;

}



@keyframes glowMove{

0%{

transform:translateY(0);

}

50%{

transform:translateY(60px);

}

100%{

transform:translateY(0);

}

}




/* Button Hover */

.primary-btn:hover{

transform:

translateY(-5px)

scale(1.03);

}



.secondary-btn:hover{

transform:

translateY(-5px);

}




/* Images */

.project-image img{

transition:

transform .8s ease;

}




/* Text Selection */

::selection{

background:#d7b15d;

color:#000;

}




/* Scroll Bar */

::-webkit-scrollbar{

width:10px;

}



::-webkit-scrollbar-track{

background:#0b0b0f;

}



::-webkit-scrollbar-thumb{

background:#d7b15d;

border-radius:30px;

}



::-webkit-scrollbar-thumb:hover{

background:#f5d98b;

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

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#050505;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

transition:opacity .9s ease,
visibility .9s ease;

}


#loader.hide{

opacity:0;

visibility:hidden;

}



.loader-moon{

width:130px;

height:130px;

border-radius:50%;

background:

radial-gradient(

circle at 35% 35%,

#ffffff,

#d8d8d8,

#8a8a8a

);

box-shadow:

0 0 80px rgba(255,230,170,.4);

animation:

loaderMoon 3s linear infinite;

}



@keyframes loaderMoon{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



#loader h1{

margin-top:35px;

font-size:50px;

letter-spacing:12px;

color:white;

}



#loader p{

margin-top:15px;

color:#d7b15d;

letter-spacing:4px;

font-size:15px;

}
/*==================================================
PREMIUM CURSOR
==================================================*/

body{
    cursor:auto;
}

.lux-cursor{

position:fixed;

width:10px;

height:10px;

background:#d7b15d;

border-radius:50%;

pointer-events:none;

z-index:999999;

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

box-shadow:0 0 15px rgba(215,177,93,.7);

}

.lux-ring{

position:fixed;

width:40px;

height:40px;

border:2px solid rgba(215,177,93,.45);

border-radius:50%;

pointer-events:none;

z-index:999998;

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

transition:

width .3s,

height .3s,

border-color .3s;

}

.cursor-hover{

width:70px;

height:70px;

border-color:#ffffff;

}
  /*==========================================
LUNARIS COMPACT PREMIUM LAYOUT
==========================================*/

section{
    padding:90px 0;
}

.section-header{
    max-width:650px;
    margin:0 auto 50px;
    text-align:center;
}

.section-title{
    font-size:clamp(36px,5vw,60px);
    margin-bottom:16px;
}

.section-text{
    max-width:620px;
    margin:auto;
    line-height:1.7;
}

.hero{
    min-height:90vh;
}

.hero p{
    max-width:520px;
    line-height:1.7;
}

.services-grid,
.portfolio-grid,
.trust-grid{
    gap:24px;
}

.service-card,
.project-card,
.trust-card{
    padding:30px;
}

.about-grid{
    gap:40px;
}

.contact-grid{
    gap:40px;
}

footer{
    padding:50px 0 25px;
}
/*==================================================
LUNARIS MOBILE MENU
==================================================*/

.menu-toggle{

display:none;

width:38px;

cursor:pointer;

z-index:9999;

}


.menu-toggle span{

display:block;

height:3px;

margin:7px 0;

background:#ffffff;

border-radius:20px;

transition:.4s;

}


@media(max-width:900px){

.menu-toggle{

display:block;

}


.nav-links{

position:fixed;

top:0;

right:-100%;

width:280px;

height:100vh;

background:#090909;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:35px;

transition:.45s;

box-shadow:

-20px 0 60px rgba(0,0,0,.55);

}


.nav-links.active{

right:0;

}


.nav-links a{

font-size:22px;

color:white;

}

}
#moon-container{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}



.hero{
    position:relative;
    z-index:2;
}
/*==============================
SERVICES V2
==============================*/

.services-grid{

display:grid;

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

gap:28px;

margin-top:60px;

}

.service-card{

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

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

border-radius:28px;

padding:35px;

transition:.4s;

backdrop-filter:blur(15px);

}

.service-card:hover{

transform:translateY(-12px);

border-color:#d7b15d;

box-shadow:0 25px 70px rgba(0,0,0,.35);

}

.service-icon{

font-size:55px;

margin-bottom:20px;

}

.service-card h3{

font-size:28px;

margin-bottom:15px;

color:#fff;

}

.service-card p{

color:#bdbdbd;

line-height:1.8;

}

@media(max-width:900px){

.services-grid{

grid-template-columns:1fr;

}

}
/*=========================
CONTACT V2
=========================*/

.contact-grid{

display:grid;

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

gap:25px;

margin-bottom:50px;

}

.contact-card{

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

padding:30px;

border-radius:25px;

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

transition:.4s;

text-align:center;

}

.contact-card:hover{

transform:translateY(-10px);

border-color:#d7b15d;

}

.contact-card h3{

margin-bottom:10px;

color:#d7b15d;

}

.contact-form{

display:flex;

flex-direction:column;

gap:20px;

max-width:700px;

margin:auto;

}

.contact-form input,

.contact-form textarea{

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

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

padding:18px;

border-radius:18px;

color:white;

font-size:16px;

outline:none;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:#d7b15d;

}

.contact-form button{

align-self:flex-start;

}

@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

.contact-form button{

width:100%;

}

}
/*==============================
FOOTER V2
==============================*/

.footer{

padding:70px 0 25px;

background:#050505;

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

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:40px;

margin-bottom:40px;

}

.footer-brand h2{

font-size:34px;

color:#d7b15d;

margin-bottom:18px;

}

.footer-brand p{

color:#bdbdbd;

line-height:1.8;

max-width:380px;

}

.footer-links h3,

.footer-contact h3{

margin-bottom:18px;

color:#ffffff;

}

.footer-links{

display:flex;

flex-direction:column;

gap:12px;

}

.footer-links a{

color:#bdbdbd;

transition:.3s;

}

.footer-links a:hover{

color:#d7b15d;

padding-left:6px;

}

.footer-contact p{

color:#bdbdbd;

margin-bottom:10px;

}

.footer-bottom{

text-align:center;

padding-top:25px;

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

color:#888;

font-size:14px;

}

@media(max-width:900px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-brand p{

margin:auto;

}

}
#moon-container{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

z-index:1;

overflow:visible;

}

#moon-container canvas{

width:100%!important;

height:100%!important;

display:block;

}
#moon-container canvas{
    width:100% !important;
    height:100% !important;
    display:block;
}
/*==================================================
LUNARIS V9 HERO LAYOUT
==================================================*/

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

}

.hero-grid{

position:relative;

display:flex;

align-items:center;

justify-content:flex-start;

min-height:100vh;

}

.hero-left{

position:relative;

z-index:20;

max-width:650px;

}

.hero-right{

position:absolute;

top:0;

right:0;

width:100%;

height:100%;

pointer-events:none;

z-index:1;

overflow:hidden;

}

#moon-container{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

#moon-container canvas{

position:absolute;

top:0;

left:0;

width:100%!important;

height:100%!important;

}

.hero h1{

position:relative;

z-index:30;

font-size:clamp(58px,7vw,95px);

line-height:.95;

}

.hero p{

position:relative;

z-index:30;

max-width:560px;

margin-top:25px;

line-height:1.8;

}

.hero-buttons{

position:relative;

z-index:30;

margin-top:35px;

}

.hero-stats{

position:relative;

z-index:30;

margin-top:45px;

}
/*=========================
EMAIL & PHONE LINK FIX
=========================*/

.contact-card a{

color:#ffffff;

text-decoration:none;

transition:.3s;

font-weight:500;

}

.contact-card a:hover{

color:#d7b15d;

}
/*====================================
REMOVE BUTTON TAP DOT
====================================*/

button,
a,
.primary-btn,
.secondary-btn{

outline:none !important;

-webkit-tap-highlight-color:transparent;

}

button:focus,
button:active,
a:focus,
a:active,
.primary-btn:focus,
.secondary-btn:focus{

outline:none !important;

box-shadow:none !important;

}
*{

-webkit-tap-highlight-color:transparent;

}
/*==================================
REMOVE BUTTON FOCUS COMPLETELY
==================================*/

button,
.primary-btn,
.secondary-btn{

outline:none !important;

border:none;

}

button:focus,
button:focus-visible,
button:active,
.primary-btn:focus,
.primary-btn:focus-visible,
.primary-btn:active,
.secondary-btn:focus,
.secondary-btn:focus-visible,
.secondary-btn:active{

outline:none !important;

box-shadow:none !important;

background-image:none !important;

}
@media (max-width:900px){

.lux-cursor,
.lux-ring,
.cursor-glow{

display:none !important;

}

}