@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');


*{

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

}


html{

scroll-behavior:smooth;

}


body{

font-family:'Poppins',sans-serif;

background:#050505;

color:white;

overflow-x:hidden;

}


::selection{

background:#d4af37;

color:#000;

}


a{

text-decoration:none;

color:white;

}


ul{

list-style:none;

}


img{

max-width:100%;

display:block;

}


button{

font-family:inherit;

cursor:pointer;

}





/* =====================
LOADER
===================== */


#loader{

position:fixed;

width:100%;

height:100vh;

background:#050505;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

transition:.8s;

}



.loader-logo{

font-size:45px;

font-weight:800;

letter-spacing:8px;

color:white;

animation:loaderAnim 1.5s infinite alternate;

}


.loader-logo span{

color:#d4af37;

}




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


.cursor{

width:20px;

height:20px;

background:#d4af37;

border-radius:50%;

position:fixed;

pointer-events:none;

z-index:9999;

mix-blend-mode:difference;

transition:.1s;

}



.cursor-blur{

width:300px;

height:300px;

background:#d4af37;

opacity:.15;

filter:blur(100px);

position:fixed;

pointer-events:none;

z-index:-1;

}





/* =====================
NAVBAR
===================== */


.navbar{

position:fixed;

top:25px;

left:50%;

transform:translateX(-50%);

width:90%;

height:80px;

padding:0 45px;

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

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

backdrop-filter:blur(8px);

border-radius:25px;

display:flex;

align-items:center;

justify-content:space-between;

z-index:1000;

transition:.5s;

}




.navbar:hover{

border-color:#d4af37;

}




.logo h2{

font-size:30px;

font-weight:800;

}


.logo span{

color:#d4af37;

}





.nav-links{

display:flex;

gap:40px;

}



.nav-links a{

position:relative;

font-size:15px;

font-weight:500;

color:#ddd;

transition:.4s;

}



.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:#d4af37;

transition:.4s;

}



.nav-links a:hover{

color:#d4af37;

}



.nav-links a:hover::after{

width:100%;

}





.nav-buttons{

display:flex;

align-items:center;

gap:20px;

}



.premium-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 35px;

border-radius:50px;

background:linear-gradient(135deg,#d4af37,#ffdf75);

color:#000;

font-weight:700;

transition:.4s;

border:none;

}



.premium-btn:hover{

transform:translateY(-5px);

box-shadow:

0 15px 40px rgba(212,175,55,.4);

}





.menu-btn{

display:none;

font-size:25px;

}




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


.hero{

height:100vh;

min-height:800px;

position:relative;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:0 10%;

overflow:hidden;

}




.hero-bg{

position:absolute;

inset:0;

background:

linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.9)
),

url("https://images.unsplash.com/photo-1518770660439-4636190af475?w=1920");

background-size:cover;

background-position:center;

animation:zoomBg 15s infinite alternate;

}




.hero-overlay{

position:absolute;

inset:0;

background:

radial-gradient(circle at center,

transparent,

#050505 80%);

}





.hero-content{

position:relative;

z-index:2;

max-width:1000px;

}





.premium-tag{

display:inline-flex;

gap:10px;

align-items:center;

padding:12px 25px;

border-radius:50px;

background:rgba(212,175,55,.1);

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

color:#d4af37;

margin-bottom:30px;

}




.hero h1{

font-size:85px;

line-height:1.1;

font-weight:800;

}



.hero h1 span{

display:block;

color:#d4af37;

}





.hero p{

font-size:20px;

color:#bbb;

max-width:750px;

margin:35px auto;

line-height:1.8;

}





.hero-buttons{

display:flex;

justify-content:center;

gap:25px;

margin-top:40px;

}





.primary-btn,
.secondary-btn{

padding:18px 45px;

border-radius:50px;

font-weight:700;

transition:.4s;

}



.primary-btn{

background:#d4af37;

color:#000;

}




.secondary-btn{

border:1px solid #d4af37;

color:#d4af37;

}




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

transform:translateY(-7px);

}





.hero-stats{

margin-top:80px;

display:flex;

justify-content:center;

gap:30px;

}



.hero-box{

padding:25px 45px;

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

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

backdrop-filter:blur(8px);

border-radius:20px;

}



.hero-box h2{

font-size:40px;

color:#d4af37;

}



.hero-box span{

color:#aaa;

font-size:14px;

}

/* =====================
SECTION GENERAL
===================== */


.section-head{

text-align:center;

max-width:850px;

margin:0 auto 80px;

}


.section-head.left{

text-align:left;

margin:0;

}



.section-head span{

color:#d4af37;

font-size:14px;

font-weight:700;

letter-spacing:4px;

}



.section-head h2{

font-size:55px;

line-height:1.2;

margin:20px 0;

font-weight:800;

}



.section-head p{

color:#aaa;

font-size:18px;

line-height:1.8;

}




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


.services{

padding:140px 8%;

}



.service-grid{

display:grid;

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

gap:35px;

}



.service-card{

position:relative;

padding:45px 35px;

background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(255,255,255,.02)

);

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

border-radius:30px;

overflow:hidden;

transition:.5s;

}



.service-card::before{

content:"";

position:absolute;

width:200px;

height:200px;

background:#d4af37;

filter:blur(100px);

opacity:0;

top:-50px;

right:-50px;

transition:.5s;

}



.service-card:hover::before{

opacity:.5;

}




.service-card:hover{

transform:

translateY(-15px);

border-color:#d4af37;

box-shadow:

0 30px 70px rgba(212,175,55,.15);

}





.service-icon{

width:80px;

height:80px;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

color:#d4af37;

background:rgba(212,175,55,.1);

border-radius:25px;

margin-bottom:30px;

transition:.5s;

}



.service-card:hover .service-icon{

transform:rotateY(180deg);

}





.service-card h3{

font-size:27px;

margin-bottom:20px;

}



.service-card p{

color:#aaa;

line-height:1.8;

margin-bottom:25px;

}



.service-card a{

color:#d4af37;

font-weight:600;

}




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


.about{

padding:140px 8%;

}



.about-container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

}



.about-image{

height:600px;

background:

linear-gradient(

45deg,

rgba(212,175,55,.2),

transparent

),

url("https://images.unsplash.com/photo-1553877522-43269d4ea984?w=900");

background-size:cover;

background-position:center;

border-radius:40px;

position:relative;

}



.floating-card{

position:absolute;

bottom:40px;

right:-40px;

padding:25px;

background:rgba(10,10,10,.8);

backdrop-filter:blur(8px);

border:1px solid #d4af37;

border-radius:20px;

display:flex;

gap:20px;

align-items:center;

}



.floating-card i{

font-size:35px;

color:#d4af37;

}




.about-content p{

color:#aaa;

line-height:1.9;

margin:20px 0;

}



.about-list{

margin:35px 0;

}



.about-list div{

margin:15px 0;

font-size:17px;

}



.about-list i{

color:#d4af37;

margin-right:15px;

}





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


.stats-section{

padding:100px 8%;

}



.stats-container{

display:grid;

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

gap:30px;

}



.stat-box{

padding:45px 25px;

text-align:center;

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

border-radius:25px;

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

transition:.4s;

}



.stat-box:hover{

transform:translateY(-10px);

border-color:#d4af37;

}




.stat-box i{

font-size:40px;

color:#d4af37;

}



.stat-box h2{

font-size:55px;

margin:20px 0;

}



.stat-box p{

color:#aaa;

}





/* =====================
WHY US
===================== */


.why-us{

padding:140px 8%;

}



.why-grid{

display:grid;

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

gap:30px;

}



.why-card{

padding:40px 30px;

background:

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

border-radius:25px;

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

transition:.4s;

}



.why-card:hover{

transform:translateY(-12px);

background:

rgba(212,175,55,.08);

}



.why-icon{

font-size:40px;

color:#d4af37;

margin-bottom:25px;

}



.why-card h3{

margin-bottom:15px;

font-size:23px;

}



.why-card p{

color:#aaa;

line-height:1.8;

}

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


.portfolio{

padding:140px 8%;

}



.portfolio-filter{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:60px;

}



.portfolio-filter button{

padding:14px 35px;

border-radius:50px;

background:transparent;

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

color:white;

transition:.4s;

}



.portfolio-filter button:hover,
.portfolio-filter button.active{

background:#d4af37;

color:#000;

border-color:#d4af37;

}





.portfolio-grid{

display:grid;

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

gap:35px;

}





.project-card{

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

border-radius:30px;

overflow:hidden;

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

transition:.5s;

}



.project-card:hover{

transform:

translateY(-15px);

border-color:#d4af37;

box-shadow:

0 30px 70px rgba(212,175,55,.2);

}



.project-image{

height:280px;

overflow:hidden;

}



.project-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.7s;

}



.project-card:hover img{

transform:scale(1.15);

}




.project-info{

padding:35px;

}



.project-info h3{

font-size:25px;

margin-bottom:10px;

}



.project-info p{

color:#aaa;

margin-bottom:20px;

}



.project-info a{

color:#d4af37;

font-weight:600;

}




/* =====================
TESTIMONIALS
===================== */


.testimonials{

padding:140px 8%;

}



.testimonial-grid{

display:grid;

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

gap:35px;

}



.testimonial-card{

padding:40px;

background:

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

border-radius:30px;

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

transition:.4s;

}



.testimonial-card:hover{

transform:translateY(-10px);

border-color:#d4af37;

}



.stars{

color:#d4af37;

font-size:22px;

margin-bottom:25px;

}



.testimonial-card p{

color:#ccc;

line-height:1.8;

font-size:16px;

}



.client{

display:flex;

align-items:center;

gap:15px;

margin-top:30px;

}



.avatar{

width:55px;

height:55px;

border-radius:50%;

background:#d4af37;

color:#000;

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

font-size:22px;

}



.client span{

color:#999;

font-size:14px;

}





/* =====================
FAQ
===================== */


.faq{

padding:140px 8%;

}



.faq-container{

max-width:900px;

margin:auto;

}



.faq-item{

background:

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

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

border-radius:20px;

margin-bottom:20px;

overflow:hidden;

}



.faq-question{

padding:30px;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

}



.faq-question h3{

font-size:20px;

}



.faq-question i{

color:#d4af37;

font-size:22px;

transition:.4s;

}



.faq-answer{

max-height:0;

overflow:hidden;

transition:.5s;

}



.faq-answer p{

padding:0 30px 30px;

color:#aaa;

line-height:1.8;

}





/* =====================
CTA
===================== */


.cta{

padding:80px 8%;

}



.cta-box{

padding:90px 40px;

text-align:center;

border-radius:40px;

background:

linear-gradient(

135deg,

rgba(212,175,55,.2),

rgba(255,255,255,.05)

);

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

}



.cta-box h2{

font-size:55px;

margin-bottom:25px;

}



.cta-box p{

color:#ccc;

margin-bottom:40px;

font-size:18px;

}






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


.contact{

padding:140px 8%;

}



.contact-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

}



.contact-info{

display:flex;

flex-direction:column;

gap:25px;

}



.contact-card{

display:flex;

align-items:center;

gap:25px;

padding:30px;

background:

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

border-radius:25px;

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

}



.contact-card i{

font-size:35px;

color:#d4af37;

}



.contact-card p{

color:#aaa;

}




.contact-form{

display:flex;

flex-direction:column;

gap:20px;

}



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

width:100%;

padding:20px;

background:

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

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

border-radius:15px;

color:white;

outline:none;

font-size:16px;

}



.contact-form textarea{

height:180px;

resize:none;

}




.contact-form input:focus,
.contact-form textarea:focus{

border-color:#d4af37;

}






/* =====================
MAP
===================== */


.map iframe{

width:100%;

height:400px;

border:0;

filter:grayscale(1);

}





/* =====================
WHATSAPP
===================== */


.whatsapp{

position:fixed;

right:30px;

bottom:30px;

width:65px;

height:65px;

background:#25d366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

z-index:999;

transition:.4s;

}



.whatsapp:hover{

transform:scale(1.1);

}

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


footer{

padding:80px 8% 30px;

background:#030303;

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

}



.footer-container{

display:grid;

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

gap:60px;

}



.footer-brand h2{

font-size:35px;

margin-bottom:20px;

}



.footer-brand span{

color:#d4af37;

}



.footer-brand p{

color:#999;

line-height:1.8;

}



.socials{

display:flex;

gap:15px;

margin-top:30px;

}



.socials a{

width:45px;

height:45px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

transition:.4s;

}



.socials a:hover{

background:#d4af37;

color:#000;

transform:translateY(-5px);

}





.footer-links{

display:flex;

flex-direction:column;

gap:15px;

}



.footer-links h3{

margin-bottom:15px;

font-size:22px;

}



.footer-links a{

color:#aaa;

transition:.3s;

}



.footer-links a:hover{

color:#d4af37;

padding-left:8px;

}





.copyright{

text-align:center;

margin-top:60px;

padding-top:30px;

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

color:#777;

}





/* =====================
SCROLL TOP
===================== */


.scroll-top{

position:fixed;

right:30px;

bottom:110px;

width:55px;

height:55px;

border-radius:50%;

border:none;

background:#d4af37;

color:#000;

font-size:20px;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:999;

}



.scroll-top.active{

opacity:1;

visibility:visible;

}



.scroll-top:hover{

transform:translateY(-5px);

}





/* =====================
ANIMATIONS
===================== */


@keyframes loaderAnim{

from{

opacity:.4;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}



@keyframes zoomBg{

from{

transform:scale(1);

}

to{

transform:scale(1.1);

}

}







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


@media(max-width:1100px){



.nav-links{

display:none;

}



.menu-btn{

display:block;

}



.hero h1{

font-size:60px;

}



.service-grid{

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

}



.stats-container{

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

}



.why-grid{

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

}



.portfolio-grid{

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

}



.testimonial-grid{

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

}



.about-container{

grid-template-columns:1fr;

}



.contact-container{

grid-template-columns:1fr;

}



.footer-container{

grid-template-columns:1fr 1fr;

}



}




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


@media(max-width:700px){



.navbar{

width:94%;

height:70px;

padding:0 20px;

}



.logo h2{

font-size:23px;

}



.premium-btn{

padding:12px 20px;

font-size:13px;

}




.hero{

padding:0 20px;

}



.hero h1{

font-size:42px;

}



.hero p{

font-size:16px;

}



.hero-buttons{

flex-direction:column;

}



.hero-buttons a{

width:100%;

}



.hero-stats{

flex-direction:column;

margin-top:50px;

}



.hero-box{

padding:20px;

}




.section-head h2{

font-size:35px;

}




.services,
.about,
.why-us,
.portfolio,
.testimonials,
.contact,
.faq{

padding:80px 5%;

}





.service-grid,
.stats-container,
.why-grid,
.portfolio-grid,
.testimonial-grid{

grid-template-columns:1fr;

}



.service-card{

padding:35px 25px;

}





.about-image{

height:400px;

}



.floating-card{

right:10px;

bottom:20px;

}



.cta-box h2{

font-size:35px;

}



.contact-card{

padding:20px;

}



.footer-container{

grid-template-columns:1fr;

}



.whatsapp{

width:55px;

height:55px;

font-size:28px;

right:20px;

bottom:20px;

}



}





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


.mobile-active{

display:flex!important;

position:absolute;

top:90px;

left:0;

width:100%;

background:#080808;

padding:30px;

border-radius:20px;

flex-direction:column;

gap:25px;

}