/* ===================================
RESET
=================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

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

background:#F8F6F1;

color:#1D1D1D;

line-height:1.9;

overflow-x:hidden;

}

/* ===================================
VARIABLES
=================================== */

:root{

--background:#F8F6F1;

--surface:#FFFFFF;

--surface-2:#F2EEE6;

--gold:#B08D57;

--gold-light:#C9A66B;

--text:#1D1D1D;

--text-light:#6D6D6D;

--border:#E8E0D1;

}

/* ===================================
SCROLLBAR
=================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f3f3f3;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:20px;

}

/* ===================================
LAYOUT
=================================== */

.layout{

display:flex;

min-height:100vh;

}

/* ===================================
SIDEBAR
=================================== */

.sidebar{

position:fixed;

top:30px;

right:30px;

width:340px;

height:calc(100vh - 60px);

background:var(--surface);

border:1px solid var(--border);

border-radius:30px;

padding:35px;

display:flex;

flex-direction:column;

justify-content:space-between;

box-shadow:

0 10px 30px rgba(0,0,0,.03),

0 30px 60px rgba(0,0,0,.04);

}

/* ===================================
PROFILE
=================================== */

.sidebar-profile{

text-align:center;

}

.sidebar-profile img{

width:130px;

height:130px;

border-radius:50%;

object-fit:cover;

padding:4px;

border:2px solid var(--gold);

margin-bottom:20px;

}

.sidebar-profile h2{

font-size:1.4rem;

font-weight:700;

margin-bottom:5px;

}

.sidebar-profile p{

color:var(--gold);

font-weight:500;

}

/* ===================================
NAVIGATION
=================================== */

.sidebar-nav{

display:flex;

flex-direction:column;

gap:12px;

margin-top:35px;

}

.sidebar-nav a{

text-decoration:none;

color:var(--text);

padding:12px 15px;

border-radius:12px;

transition:.3s;

font-size:.95rem;

}

.sidebar-nav a:hover{

background:var(--surface-2);

color:var(--gold);

}

/* ===================================
SOCIALS
=================================== */

.social-links{

display:flex;

flex-wrap:wrap;

gap:10px;

justify-content:center;

}

.social-links a{

text-decoration:none;

padding:10px 16px;

border:1px solid var(--gold);

border-radius:12px;

color:var(--gold);

transition:.3s;

font-size:.85rem;

}

.social-links a:hover{

background:var(--gold);

color:white;

}

.large{

margin-top:30px;

justify-content:flex-start;

}

/* ===================================
COPYRIGHT
=================================== */

.copyright{

text-align:center;

margin-top:20px;

font-size:.85rem;

color:var(--text-light);

}

/* ===================================
CONTENT
=================================== */

.content{
width:100%;
margin-right:420px;
padding:0px 60px 60px;
}

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

.hero-section{
min-height:100vh;
display:flex;
align-items:center;
padding-top:0;
}

.hero-grid{

display:grid;

grid-template-columns:500px 1fr;

gap:80px;

align-items:center;

}

.hero-image img{

width:100%;

height:650px;

object-fit:cover;

border-radius:40px;

box-shadow:

0 20px 50px rgba(0,0,0,.08);

}

.welcome{

display:inline-block;

color:var(--gold);

margin-bottom:15px;

font-weight:600;

}

.hero-text h1{

font-size:4.5rem;

line-height:1.2;

margin-bottom:15px;

font-weight:800;

}

.hero-text h2{

font-size:1.5rem;

color:var(--gold);

margin-bottom:25px;

font-weight:500;

}

.hero-text p{

max-width:700px;

font-size:1.1rem;

color:var(--text-light);

margin-bottom:40px;

}

/* ===================================
BUTTONS
=================================== */

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.btn-primary{

background:var(--gold);

color:white;

padding:14px 30px;

border-radius:12px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

border:1px solid var(--gold);

color:var(--gold);

padding:14px 30px;

border-radius:12px;

text-decoration:none;

transition:.3s;

}

.btn-secondary:hover{

background:var(--gold);

color:white;

}

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

.section{

margin-bottom:120px;

}

.section-title{

font-size:2.6rem;

font-weight:700;

margin-bottom:40px;

position:relative;

}

.section-title::after{

content:"";

position:absolute;

bottom:-10px;

right:0;

width:80px;

height:2px;

background:var(--gold);

}

/* ===================================
CARD
=================================== */

.card{

background:white;

border:1px solid var(--border);

padding:50px;

border-radius:30px;

}

/* ===================================
INFO GRID
=================================== */

.info-grid{

display:grid;

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

gap:20px;

margin-top:40px;

}

.info-box{

background:var(--surface-2);

padding:25px;

border-radius:20px;

}

.info-box h4{

margin-bottom:10px;

color:var(--gold);

}

/* ===================================
TIMELINE
=================================== */

.timeline{

display:flex;

flex-direction:column;

gap:25px;

}

.timeline-item{

background:white;

padding:30px;

border-radius:20px;

border:1px solid var(--border);

}

.timeline-item h3{

color:var(--gold);

margin-bottom:10px;

}

/* ===================================
PROJECTS
=================================== */

.projects-grid{

display:grid;

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

gap:25px;

}

.project-card{

background:white;

padding:35px;

border-radius:25px;

border:1px solid var(--border);

transition:.3s;

}

.project-card:hover{

transform:translateY(-5px);

}

.project-card h3{

margin-bottom:10px;

color:var(--gold);

}

/* ===================================
DOCUMENTS
=================================== */

.documents-grid{

display:grid;

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

gap:20px;

}

.document-card{

display:block;

text-decoration:none;

background:white;

padding:35px;

border-radius:25px;

border:1px solid var(--border);

color:var(--text);

transition:.3s;

}

.document-card:hover{

border-color:var(--gold);

}

/* ===================================
SKILLS
=================================== */

.skills-grid{

display:grid;

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

gap:18px;

}

.skill{

padding:20px;

background:white;

border:1px solid var(--border);

border-radius:15px;

text-align:center;

font-weight:500;

transition:.3s;

}

.skill:hover{

background:var(--gold);

color:white;

}

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

footer{

padding:60px 0;

border-top:1px solid var(--border);

text-align:center;

color:var(--text-light);

}

/* ===================================
   ACTIVE MENU
=================================== */

.sidebar-nav a.active{

background:#F2EEE6;

color:var(--gold);

font-weight:600;

}

/* ===================================
   REVEAL EFFECT
=================================== */

.reveal{

opacity:0;

transform:translateY(30px);

transition:
opacity .8s ease,
transform .8s ease;

}

.revealed{

opacity:1;

transform:none;

}


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

.mobile-header{

display:none;

}

/* ===========================
   CLOSE BUTTON
=========================== */

.close-sidebar{

display:none;

}