*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
font-family:'Poppins',sans-serif;
}

body{
background:#FAF7F2;
color:#1f2937;
overflow-x:hidden;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* Header */

header{
position:fixed;
top:0;
left:0;
width:100%;
background:rgba(255,255,255,0.9);
backdrop-filter:blur(10px);
z-index:1000;
box-shadow:0 2px 15px rgba(0,0,0,0.05);
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}

.logo{
font-size:30px;
font-weight:700;
color:#C8A97E;
}

nav ul{
display:flex;
list-style:none;
gap:30px;
}

nav ul li a{
text-decoration:none;
color:#333;
font-weight:500;
transition:.3s;
}

nav ul li a:hover{
color:#C8A97E;
}

.theme-btn{
width:45px;
height:45px;
border:none;
border-radius:50%;
background:#C8A97E;
color:#fff;
cursor:pointer;
font-size:18px;
}

body.dark-mode{
background:#111827;
color:white;
}

body.dark-mode header{
background:#1f2937;
}

body.dark-mode .about-box,
body.dark-mode .skill-card,
body.dark-mode .service-card,
body.dark-mode .portfolio-card,
body.dark-mode input,
body.dark-mode textarea{
background:#1f2937;
color:white;
}

body.dark-mode footer{
background:#000;
}

#preloader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#FAF7F2;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
transition:.8s;
}

.loader-logo img{
width:50px;
height:auto;
}

.logo img{
height:55px;
width:auto;
display:block;
}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.2);
}

100%{
transform:scale(1);
}

}

.loaded #preloader{
opacity:0;
visibility:hidden;
}

.cursor{
width:20px;
height:20px;
border:2px solid #C8A97E;
border-radius:50%;
position:fixed;
pointer-events:none;
transform:translate(-50%,-50%);
z-index:9999;
transition:transform .1s ease;
}

a:hover ~ .cursor{
transform:translate(-50%,-50%) scale(2);
}

.hero{
position:relative;
overflow:hidden;
}

.hero::before{
content:'';
position:absolute;
width:400px;
height:400px;
background:#E8D9C5;
filter:blur(150px);
top:-100px;
right:-100px;
opacity:.5;
z-index:-1;
}


.hire-btn{
background:#C8A97E;
color:#fff;
padding:12px 25px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.hire-btn:hover{
transform:translateY(-3px);
}




/* Hero */

.hero{
padding-top:150px;
padding-bottom:100px;
}

.hero-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}

.hero-text{
flex:1;
}

.tag{
display:inline-block;
background:#E8D9C5;
padding:10px 18px;
border-radius:50px;
font-size:14px;
margin-bottom:20px;
}

.hero-text h1{
font-size:60px;
line-height:1.2;
margin-bottom:20px;
}

.hero-text p{
font-size:18px;
line-height:1.8;
margin-bottom:30px;
color:#555;
}

.hero-buttons{
display:flex;
gap:15px;
}

.btn-primary,
.btn-secondary{

position:relative;
overflow:hidden;

padding:15px 35px;

border-radius:50px;

font-weight:600;

text-decoration:none;

transition:all .4s ease;

display:inline-block;

}

.typing-text{

font-size:24px;

font-weight:600;

margin:20px 0;

color:#C8A97E;

min-height:35px;

}


/*word-flow-effect*/

.typing-text span{

border-right:3px solid #C8A97E;

padding-right:5px;

animation:blink .8s infinite;

}

@keyframes blink{

50%{
border-color:transparent;
}

}



/* Primary Button */

.btn-primary{

background:#C8A97E;

color:white;

box-shadow:0 10px 25px rgba(200,169,126,.35);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 20px 35px rgba(200,169,126,.45);

}

/* Shine Effect */

.btn-primary::before{

content:'';

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.5),
transparent
);

transition:.8s;

}

.btn-primary:hover::before{

left:100%;

}

/* Secondary Button */

.btn-secondary{

border:2px solid #C8A97E;

color:#C8A97E;

background:transparent;

}

.btn-secondary:hover{

background:#C8A97E;

color:white;

transform:translateY(-5px);

box-shadow:0 15px 30px rgba(200,169,126,.35);

}


/* Resume-botten*/
.hero-buttons{

display:flex;

align-items:center;

gap:15px;

flex-wrap:wrap;

margin-top:20px;

}


.resume-btn{

display:flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:50px;

text-decoration:none;

font-weight:600;

background:#1f2937;

color:white;

transition:.4s;

}



.hero-image{
flex:1;
text-align:center;
}

.hero-image img{
width:420px;
height:420px;
object-fit:cover;
border-radius:50%;
border:10px solid #E8D9C5;
box-shadow:0 20px 50px rgba(0,0,0,0.1);
}

/* Sections */

section{
padding:100px 0;
}

.section-title{
font-size:40px;
text-align:center;
margin-bottom:60px;
position:relative;
}

.section-title::after{
content:'';
width:80px;
height:4px;
background:#C8A97E;
position:absolute;
bottom:-10px;
left:50%;
transform:translateX(-50%);
}

/* About */

.about-box{
background:white;
padding:50px;
border-radius:25px;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.about-box p{
line-height:1.8;
margin-bottom:20px;
}

.about-stats{
display:flex;
justify-content:space-between;
margin-top:40px;
}

.stat{
text-align:center;
}

.stat h3{
font-size:35px;
color:#C8A97E;
}

/* Animated Counter

.counter-section{

padding:70px 0;

background:white;

}

.counter-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.counter-box{

text-align:center;

padding:35px;

border-radius:20px;

background:#FAF7F2;

box-shadow:0 10px 20px rgba(0,0,0,.05);

transition:.4s;

}

.counter-box:hover{

transform:translateY(-10px);

}

.counter-box h2{

font-size:45px;

color:#C8A97E;

margin-bottom:10px;

}

.counter-box p{

font-weight:500;

} */

/* Skills */

.skills-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
align-content: center;
}

.skill-card{
background:white;
padding:25px;
border-radius:20px;
text-align:center;
align-items: center;
font-weight:600;
box-shadow:0 10px 20px rgba(0,0,0,0.05);
transition:.3s;
}

.skill-card:hover{
transform:translateY(-10px);
}

/* Services */

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.service-card{
background:white;
padding:40px;
border-radius:25px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:.3s;
}

.service-card:hover{
transform:translateY(-10px);
}

.service-card i{
font-size:40px;
color:#C8A97E;
margin-bottom:20px;
}

.service-card h3{
margin-bottom:15px;
}

/* Portfolio */

.portfolio-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

.portfolio-card{
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:.3s;
}

.portfolio-card:hover{
transform:translateY(-10px);
}

.portfolio-card img{
width:100%;
height:250px;
object-fit:cover;
}

.portfolio-card h3{
padding:20px;
}




/*Review-Section*/
.review-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}

.review-card{

background:white;

padding:30px;

border-radius:20px;

text-align:center;

box-shadow:0 10px 25px rgba(0,0,0,.05);

transition:.4s;

}

.review-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(200,169,126,.25);

}

.review-card p{

line-height:1.8;

margin-bottom:20px;

}

.review-card h4{

color:#C8A97E;

margin-bottom:10px;

}

/* Review Section Dark Mode */

body.dark-mode .review-card{

background:#1f2937;

color:white;

}

body.dark-mode .review-card p{

color:#e5e7eb;

}

body.dark-mode .review-card h3{

color:white;

}

body.dark-mode .review-card h4{

color:#C8A97E;

}



/* Contact */

.contact-form{
display:flex;
flex-direction:column;
gap:20px;
max-width:700px;
margin:auto;
}

.contact-form input,
.contact-form textarea{
padding:18px;
border:none;
border-radius:15px;
background:white;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.contact-form textarea{
height:180px;
resize:none;
}

.contact-form button{

position:relative;

overflow:hidden;

background:#C8A97E;

color:white;

border:none;

padding:18px;

border-radius:50px;

cursor:pointer;

font-size:16px;

font-weight:600;

transition:.4s;

min-width:220px;

}

.contact-form button:hover{

transform:translateY(-5px);

box-shadow:0 15px 30px rgba(200,169,126,.4);

}

.contact-form button i{

margin-right:8px;

}

.contact-info{
margin-top:40px;
text-align:center;
line-height:2;
}

/* Footer */

footer{
background:#1f2937;
color:white;
padding:50px 0;
text-align:center;
}

.socials{
margin-top:20px;
}

.socials a{
color:white;
font-size:22px;
margin:0 10px;
}

/* WhatsApp */

.whatsapp{
position:fixed;
bottom:25px;
right:25px;
background:#25D366;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:30px;
color:white;
text-decoration:none;
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

/* Responsive */

@media(max-width:768px){

.hero-content{
flex-direction:column-reverse;
text-align:center;
}

.hero-text h1{
font-size:40px;
}

.hero-image img{
width:280px;
height:280px;
}

nav{
display:none;
}

.about-stats{
flex-direction:column;
gap:25px;
}

.hero-buttons{
justify-content:center;
}

}

/* Scroll Animation */

.skill-card,
.service-card,
.portfolio-card,
.about-box{

opacity:0;
transform:translateY(40px);

transition:all .8s ease;

}

.skill-card.active,
.service-card.active,
.portfolio-card.active,
.about-box.active{

opacity:1;
transform:translateY(0);

}

/* Active Menu */

nav ul li a.active{

color:#C8A97E;

font-weight:700;

}

/* Hover Glow */

.skill-card:hover,
.service-card:hover,
.portfolio-card:hover{

box-shadow:0 20px 40px rgba(200,169,126,.25);

}

/* Image Zoom */

.portfolio-card{
overflow:hidden;
}

.portfolio-card img{

transition:.5s;

}

.portfolio-card:hover img{

transform:scale(1.08);

}

/* Hero Image Floating */

.hero-image img{

animation:float 4s ease-in-out infinite;

}

@keyframes float {

0%{
transform:translateY(0px);
}

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

100%{
transform:translateY(0px);
}

}


/* b2t */

#topBtn{

position:fixed;

bottom:100px;

right:25px;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,#C8A97E,#e0c39b);

color:white;

font-size:24px;

cursor:pointer;

display:none;

z-index:999;

box-shadow:
0 10px 25px rgba(200,169,126,.4);

transition:.4s;

animation:pulseTop 2s infinite;

}

#topBtn:hover{

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

}

#topBtn i{

font-size:20px;

}

@keyframes pulseTop{

0%{
box-shadow:0 0 0 0 rgba(200,169,126,.5);
}

70%{
box-shadow:0 0 0 15px rgba(200,169,126,0);
}

100%{
box-shadow:0 0 0 0 rgba(200,169,126,0);
}

}

.tooltip{

position:absolute;

right:50px;

background:#1f2937;

color:white;

padding:4px 7.5px;

border-radius:10px;

font-size:2px;

opacity:0;

transition:.3s;

white-space:nowrap;

}

#topBtn:hover .tooltip{

opacity:0;

}