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

body{
background:#1a1a1a;
color:#FFF7ED;
}

nav{
position:fixed;
top:0;
right:0;
z-index:2000;
padding:20px;
}

.hamburger{
font-size:28px;
cursor:pointer;
}

.menu{
position:fixed;
top:0;
right:-260px;
width:260px;
height:100%;
background:rgba(26,26,26,0.95);
backdrop-filter:blur(20px);
transition:.4s;
padding-top:100px;
z-index:1500;
}

.menu a{
display:block;
padding:20px 40px;
text-decoration:none;
color:white;
}

.menu a:hover{
color:#F76707;
}

.menu.open{
right:0;
}



.hero h1,
.section-title,
.section-title span,
.engagement-card h3,
.strength-card h3{
    font-family: "DM Serif Display", serif;
    letter-spacing: 0.5px;
	font-weight: 400;
}
.section-title span{
	color:#cfcfcf !important;
}

/* HERO */

.hero{
height:100vh;
background:
linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.8)),
url("BG.jpg") top;
background-size:cover;
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 10%;
}

.hero-content{
max-width:650px;

display:flex;
align-items:center;
gap:25px;
margin-top:20px;
flex-wrap:wrap;
}
.contact-info{
display:flex;
align-items:center;
gap:22px;
flex-wrap:wrap;
margin-top:18px;
}

.contact-item{
display:flex;
align-items:center;
gap:8px;
color:#d1d5db;
font-size:14px;
}

.contact-icon{
width:18px;
height:18px;
stroke:#9CA3AF;
}

.email-item{
gap:6px;
}

.copy-btn{
position:relative;
background:none;
border:none;
cursor:pointer;
display:flex;
align-items:center;
color:#9CA3AF;
margin-left:4px;
}

.copy-icon{
width:16px;
height:16px;
stroke:#9CA3AF;
}

.copy-btn:hover .copy-icon{
stroke:#FF6A1A;
}


/* TOOLTIP */

.tooltip-text{
position:absolute;
bottom:125%;
left:50%;
transform:translateX(-50%);
background:#e4e4e4;
color:#111;
font-size:12px;
padding:4px 8px;
border-radius:4px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .2s;
}

.copy-btn:hover .tooltip-text{
opacity:1;
}

/* tooltip arrow */

.tooltip-text::after{
content:"";
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
border-width:5px;
border-style:solid;
border-color:#111 transparent transparent transparent;
}


.social-icon{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
background:#3b3b3b;
border-radius:50%;
color:#fff;
text-decoration:none;
font-size:14px;
}

.icon{
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
text-decoration:none;
font-size:18px;
background:#444;
color:white;
transition:.3s;
}

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

.icon.download{
background:#F76707;
}

.icon.linkedin{
background:#555;
}

.icon.email{
background:#555;
}
.hero h1{
font-size:48px;
margin-bottom:10px;
}

.hero h2{
color:#F76707;
margin-bottom:20px;
}

.resume-btn{
display:inline-block;
margin-top:20px;
background:#F76707;
padding:12px 26px;
border-radius:30px;
text-decoration:none;
color:white;
}
.engagements{
background:#1a1a1a;
color:#FFF7ED;
}

.section-title{
font-size:34px;
margin-bottom:10px;
}

.section-title span{
color:#FF6A1A;
}

.section-desc{
color:#cfcfcf;
max-width:650px;
margin-bottom:50px;
}

/* GRID */

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

/* CARD */

.engagement-card{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08);
border-radius:12px;
padding:28px;
transition:.3s;
backdrop-filter:blur(20px);
}

.engagement-card:hover{
transform:translateY(-6px);
border-color:#FF6A1A;
}

/* NUMBER */

.number{
font-size:28px;
font-weight:600;
color:#FF6A1A;
margin-bottom:10px;
}

/* TITLE */

.engagement-card h3{
font-size:20px;
margin-bottom:6px;
display:flex;
align-items:center;
gap:6px;
}

.external{
font-size:14px;
opacity:.7;
}

/* CLIENT */

.client{
color:#FF6A1A;
font-size:14px;
margin-bottom:12px;
}

/* DESCRIPTION */

.description{
color:#d6d6d6;
font-size:14px;
line-height:1.6;
margin-bottom:18px;
}

/* TAGS */

.tags{
display:flex;
gap:10px;
}

.tags span{
border:1px solid rgba(255,255,255,0.2);
padding:6px 12px;
border-radius:20px;
font-size:12px;
color:#d6d6d6;
}

.tags span:first-child{
border-color:#FF6A1A;
color:#FF6A1A;
}
/* SECTION */


.section-title{
font-size:32px;
color:#F76707;
margin-bottom:40px;
}

/* GRID */

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

/* CARD */

.card{
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
padding:25px;
transition:.4s;
}

.card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 20px 50px rgba(0,0,0,.4);
}

.card img{
width:100%;
border-radius:10px;
cursor:pointer;
margin-bottom:15px;
}

/* LIGHTBOX */

.lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
display:none;
align-items:center;
justify-content:center;
}

.lightbox img{
max-width:90%;
max-height:80%;
}

.lightbox.active{
display:flex;
}
.menu a{
display:flex;
align-items:center;
gap:14px;
padding:18px 35px;
text-decoration:none;
color:#FFF7ED;
font-size:16px;
transition:.3s;
}

.menu-icon{
width:20px;
height:20px;
stroke:#9CA3AF;
}

.menu a:hover .menu-icon{
stroke:#FF6A1A;
}

.menu a:hover{
color:#FF6A1A;
}
.menu-header{
padding:25px 35px;
border-bottom:1px solid rgba(255,255,255,0.1);
font-weight:600;
}

.menu-header span{
display:block;
font-size:13px;
color:#FF6A1A;
}




section{padding:80px 8%;}










.circle{

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

width:110px;
height:110px;

border:2px solid rgba(255,255,255,0.2);
border-radius:50%;

font-size:28px;
font-weight:600;

transition:0.4s;
}

.metric:hover .circle{
border-color:#ff7a18;
transform:scale(1.05);
}















.experience-section{
background:#1a1a1a;
color:#FFF7ED;
}

.experience-metrics{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
margin:60px 0;
gap:30px;
}

.metric{
text-align:center;
width:160px;
}

.circle{
width:110px;
height:110px;
border:2px solid rgba(255,255,255,0.2);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:38px;
color:#FF6A1A;
margin:auto;
margin-bottom:15px;
font-family:"DM Serif Display", serif;
}

.metric p{
font-size:13px;
color:#cfcfcf;
line-height:1.5;
}


/* EXPERIENCE CONTENT */

.experience-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
margin-top:60px;
}

/* SKILLS */

.skills h3, .tools h3{
font-family:"DM Serif Display", serif;
margin-bottom:20px;
}

.skill-tags{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.skill-tags span{
background:#e6e6e6;
color:#333;
padding:8px 16px;
border-radius:8px;
font-size:13px;
}

/* TOOLS */

.tools-content{
display:flex;
flex-direction:column;
gap:25px;
}

.tool-group h4{
color:#FF6A1A;
font-size:15px;
margin-bottom:8px;
}

.tool-group ul{
list-style:none;
padding:0;
}

.tool-group li{
font-size:14px;
color:#cfcfcf;
padding:4px 0;
line-height:1.6;
}




.section-title{
font-size:32px;
margin-bottom:40px;
}

.strengths-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.strength-card{
background:rgba(255,255,255,0.05);
padding:30px;

box-shadow:0 5px 20px rgba(0,0,0,0.05);
transition:0.3s ease;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
}

.strength-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,0.08);
border-color:#FF6A1A;
}

.strength-card h3{
font-size:20px;
margin-bottom:12px;
color:#FF6A1A;
}

.strength-card p{
font-size:14px;
line-height:1.6;
color:#d6d6d6	;
}

/* Responsive */

@media(max-width:900px){

.strengths-grid{
grid-template-columns:1fr;
}

}







.career-section{
color:#fff;
}

.career-timeline{

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

position:relative;
margin:150px 0;
}

.career-timeline::before{
content:"";
position:absolute;
top:6px;
left:0;
width:100%;
height:2px;
background:#444;
}

.career-item{
position:relative;
text-align:center;
cursor:pointer;
}

.career-dot{

width:14px;
height:14px;

background:#ff7a18;
border-radius:50%;

margin:auto;
position:relative;
z-index:2;
}

.career-year{
padding: 10px;
display:block;
margin-top:10px;
font-size:14px;
color:#ff7a18;
}

.career-info{

position:absolute;
bottom:100px;
left:50%;
transform:translateX(-50%);

width:240px;

background:#1a1a1a;
padding:18px;
border-radius:8px;

opacity:0;
visibility:hidden;

transition:0.3s ease;

box-shadow:0 10px 30px rgba(0,0,0,0.4);
z-index:1;
}
.career-item h3{
font-size:14px;
padding: 10px 20px}

.career-info h3{
font-size:16px;
margin-bottom:6px;
}

.career-info p{
font-size:13px;
color:#aaa;
line-height:1.5;
}

.career-item:hover .career-info{
opacity:1;
visibility:visible;
transform:translate(-50%,-10px);
}









/* BACK BUTTON */

#topBtn{
position:fixed;
bottom:30px;
right:30px;
background:#F76707;
color:white;
border:none;
padding:12px 16px;
border-radius:50%;
cursor:pointer;
display:none;
}

footer{
padding:30px;
text-align:center;
border-top:1px solid rgba(255,255,255,.1);
font-size: 12px;
}


@media (max-width:768px){

.experience-content{
grid-template-columns:1fr;
gap:40px;
}

.career-timeline{
flex-direction:column;
align-items:flex-start;
padding-left:30px;
}

.career-timeline::before{
left:6px;
top:0;
height:100%;
width:2px;
}

.career-item{
margin-bottom:40px;
text-align:left;
}

.career-dot{
position:absolute;
left:-30px;
top: 10px;
}

.career-year{
margin-left:2px;
margin-bottom:6px;
padding:0;
}
.career-item h3 {
    padding: 10px 0px;
}

.career-info{
position:relative;
opacity:1;
visibility:visible;
transform:none;
left: 6px;
background:none;
box-shadow:none;
padding:0;
margin-top:6px;
bottom: 1px !important;
width:auto;
}

/* disable hover behaviour */

.career-item:hover .career-info{
opacity:1;
transform:none;
}

.career-info h3{
font-size:16px;
}

.career-info p{
font-size:14px;
}

.career-timeline{
	margin:0;
}



}