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

.layout{

max-width:1500px;

margin:auto;

padding:40px;

display:grid;

grid-template-columns:
360px 1fr;

gap:32px;

}
main{
min-width:0;
}

aside{
min-width:0;
}



/* =====================
GLASS
===================== */

.glass{

background:rgba(15,23,42,.55);

/*backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);*/

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

box-shadow:var(--shadow);

}

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

.sidebar{

padding:35px;

border-radius:36px;

position:sticky;

top:30px;

height:fit-content;

}

.avatar{

width:170px;
height:170px;

margin:auto;

}

.avatar img{

width:100%;
height:100%;

object-fit:cover;

border-radius:50%;

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

}

.sidebar h1{

font-size:28px;

font-weight:800;

margin-top:25px;

text-align:center;

}

.role{

display:block;

text-align:center;

margin-top:12px;

color:var(--primary-light);

}

.socials{

display:flex;

justify-content:center;

gap:12px;

margin:25px 0;

}

.socials a{

width:46px;
height:46px;

display:flex;

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

text-decoration:none;

background:#131d31;

border-radius:14px;

color:white;

transition:.3s;

}

.socials a:hover{

transform:translateY(-4px);

background:var(--primary);

}

.contact-list{

margin-top:20px;

display:flex;

flex-direction:column;

gap:20px;

}

.contact-list span{

font-size:13px;

color:var(--text-light);

}

.contact-list p{

font-weight:600;

}

.sidebar .btn-primary {
	width: 100%;
    margin-top: 20px;
}

/* =====================
MAIN
===================== */

main{

display:flex;

flex-direction:column;

gap:30px;

}

/* =====================
TOPBAR
===================== */

.topbar{

padding:20px 35px;

border-radius:24px;

position:relative;

z-index:99991;

display:flex;

align-items:center;

justify-content:space-between;

}

.topbar nav{

display:flex;

align-items:center;

gap:40px;

}

.theme-toggle{

margin-right:0;

flex-shrink:0;

}

.topbar a{

text-decoration:none;

color:var(--text-light);

cursor:pointer;

transition:.3s;

}

.topbar a:hover,
.topbar .active{

color:white;

}

/* EXTRA UX IMPROVEMENT */
.topbar nav a.active{

color:#4f7cff;

}

.topbar nav a.active::after{

width:100%;

}


/* ====================
MENU TOGGLE
==================== */

.menu-toggle{

display:none;

width:50px;
height:50px;

border:none;

background:#131d31;

border-radius:14px;

cursor:pointer;

}

.menu-toggle span{

display:block;

height:2px;

background:white;

margin:7px 10px;

}

/* ====================
THEME BUTTON
==================== */

.theme-toggle{

width:48px;
height:48px;

border:none;

cursor:pointer;

border-radius:14px;

background:#131d31;

color:white;

margin-right:auto;

}

.mobile-overlay{

position:fixed;

inset:0;

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

backdrop-filter:blur(4px);

opacity:0;
visibility:hidden;

transition:.3s;

z-index:99990;

}

.mobile-overlay.active{

opacity:1;
visibility:visible;

}

body.menu-open{

overflow:hidden;

}

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

.footer{

margin-top:80px;

padding-top:40px;

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

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer h4{

margin-bottom:20px;

}

.footer p,
.footer li{

color:var(--text-light);

}

.footer ul{

list-style:none;

}

.footer li{

margin-bottom:10px;

}

.footer a{

text-decoration:none;

color:inherit;

transition:.3s;

}

.footer a:hover{

color:white;

}

.copyright{

margin-top:40px;

padding:30px 0 40px 0;

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

text-align:center;

color:var(--text-light);

}


/* light mode */

body.light-mode{

background:#f5f5f5;
color:#111827;

}

.light-mode .sidebar,
.light-mode .content,
.light-mode .section,
.light-mode .card,
.light-mode .glass,
.light-mode .panel{

background:#ffffff;

border-color:
rgba(0,0,0,.08);

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

}

.light-mode .service-card,
.light-mode .portfolio-card,
.light-mode .timeline-card,
.light-mode .award-card,
.light-mode .cert-card,
.light-mode .radial-card,
.light-mode .blog-card,
.light-mode .testimonial,
.light-mode .contact-card,
.light-mode .author-box,
.light-mode .toc,
.light-mode .project-modal-content{

background:#fff;

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

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

}

.light-mode .sidebar{

background:#fff;

border-right:
1px solid rgba(0,0,0,.08);

}

.light-mode .topbar{

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

border-bottom:
1px solid rgba(0,0,0,.08);

}

.light-mode h1,
.light-mode h2,
.light-mode h3,
.light-mode h4,
.light-mode h5,
.light-mode h6{

color:#111827;

}

.light-mode h1,
.light-mode h2,
.light-mode h3,
.light-mode h4,
.light-mode h5,
.light-mode h6{

color:#111827;

}

.light-mode p,
.light-mode li,
.light-mode span{

color:#4b5563;

}

.light-mode a{

color:#111827;
transition: all .3s;

}

.light-mode a:hover{

color:#4f7cff;

}

.light-mode .nav-link{

color:#374151;

}

.light-mode .nav-link.active{

color:#4f7cff;

}

.light-mode input,
.light-mode textarea,
.light-mode select{

background:#fff !important;

color:#111827!important;

border:
1px solid rgba(0,0,0,.12)!important;

}

.light-mode input::placeholder,
.light-mode textarea::placeholder{

color:#9ca3af;

}

.light-mode .btn-primary{

background:#4f7cff;

color:#fff;

&:hover {
	color: #fff;
}

}

.light-mode .btn-secondary{

background:#fff;

color:#111827;

border:
1px solid rgba(0,0,0,.12);

}

.light-mode .timeline::before{

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

}

.light-mode .toc a{

color:#374151;

}

.light-mode .toc a:hover{

color:#4f7cff;

}

.light-mode .project-modal{

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

}

.light-mode .project-modal-content{

background:#fff;

}

.light-mode footer{

background:transparent;

border-top:0
}

.light-mode .blur-1{

background:#245dff;

}

.light-mode .blur-2{

background:#00b8ff;

}

.light-mode .service-card,
.light-mode .portfolio-card,
.light-mode .timeline-card,
.light-mode .award-card,
.light-mode .cert-card{

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

backdrop-filter:
blur(20px);

}

.light-mode .eyebrow, .light-mode .role {
	color: #7ea1ff;
}

body.light-mode .service-card, body.light-mode .testimonial, body.light-mode .stats div, body.light-mode .client-grid span {
    background: white;
}

.light-mode .socials {
	a {
		background: #f5f5f5;

		&:hover {
			color: #fff;
			background: #4f7cff;
		}
	}
}

.light-mode .bar {
	background: #f5f5f5;
}

.light-mode .blog-filter button {
	background: #fff;
	color: #111827;

	&:hover {
		color: #4f7cff;
	}

	&.active:hover {
		color: #fff;
	}
}

.light-mode .blog-card {
	.blog-link, .blog-link span {
		color:#111827;
	}

	&:hover {
		.blog-link, .blog-link span {
			color: #4f7cff;
		}
	}
}

/* ==========================
PORTFOLIO LIGHT MODE
========================== */

.light-mode .portfolio-filter button{

background:#ffffff;

color:#111827;

box-shadow:
0 4px 12px rgba(0,0,0,.04);

}

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

background:#4f7cff;

color:#fff;

border-color:#4f7cff;

}

.light-mode .featured-project{

background:#fff;

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

box-shadow:
0 12px 30px rgba(0,0,0,.05);

}

.light-mode .portfolio-overlay{

background:
linear-gradient(
180deg,
rgba(255,255,255,0),
rgba(255,255,255,.92)
);

}

.light-mode .portfolio-overlay h3{

color:#111827;

}

.light-mode .portfolio-overlay p{

color:#4b5563;

}

.light-mode .cursor-preview{

background:
linear-gradient(
135deg,
#4f7cff,
#3b82f6
);

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

color:#fff;

box-shadow:
0 10px 30px rgba(79,124,255,.25);

}

/* ==========================
PROJECT MODAL
========================== */

.light-mode .project-modal{

background:
rgba(15,23,42,.25);

backdrop-filter:
blur(12px);

}

.light-mode .modal-content{

background:#fff;

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

box-shadow:
0 20px 60px rgba(0,0,0,.12);

}

.light-mode .modal-header h2{

color:#111827;

}

.light-mode .modal-body p{

color:#4b5563;

}

.light-mode .modal-meta small{

color:#6b7280;

opacity:1;

}

.light-mode .modal-meta strong{

color:#111827;

}

.light-mode .modal-tech span{

background:#f8fafc;

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

color:#374151;

}

.light-mode .modal-category{

background:
rgba(79,124,255,.12);

color:#4f7cff;

}

.light-mode .modal-close{

background:#f3f4f6;

color:#111827;

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

}

.light-mode .modal-close:hover{

background:#4f7cff;

color:#fff;

border-color:#4f7cff;

}

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

.light-mode .portfolio-item{

box-shadow:
0 8px 24px rgba(0,0,0,.06);

}

.light-mode .portfolio-item img{

filter:none;

}

/* resume light mode */
.light-mode .circle {
	background: conic-gradient(#4f7cff calc(var(--percent) * 1%), #f5f5f5 0);

	& span {
		background: #fff;
	}
}

.light-mode .award-card p {
	color: #4b5563;
}

/* theme toggle */
.light-mode .theme-toggle, .light-mode .menu-toggle {
	background: #f5f5f5;
  	color: #111827;
}

.light-mode .menu-toggle span {
	background: #111827;
}