@media (max-width: 600px) {
	.star-rating {
		min-width: 90px;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-top: 4px;
		margin-bottom: 0;
	}
	.skill-label {
		margin-bottom: 0;
	}
}
/* --- TRUE MOBILE RESPONSIVENESS FOR INDEX.HTML --- */
@media (max-width: 900px) {
	.page-layout {
		display: flex;
		flex-direction: column;
		width: 100vw;
		min-width: 0;
	}
	.side-banner {
		display: none !important;
	}
	.main-content {
		max-width: 100vw;
		padding: 0 10px;
	}
	.hero {
		flex-direction: column;
		gap: 30px;
		align-items: center;
		justify-content: center;
		padding: 40px 0 30px;
		min-height: unset;
	}
	.hero-text, .about-preview {
		width: 100%;
		max-width: 100%;
		text-align: center;
	}
	.profile-wrapper img {
		width: 180px;
		max-width: 60vw;
	}
}

@media (max-width: 600px) {
	.main-content {
		padding: 0 4vw;
	}
	.hero {
		gap: 15px;
		padding: 25px 0 15px;
	}
	.profile-wrapper img {
		width: 120px;
		max-width: 90vw;
	}
	.hero-text p, .about-preview p {
		font-size: 0.95rem;
	}
}

@media (max-width: 400px) {
	.main-content {
		padding: 0 2vw;
	}
	.hero-text .section-title, .about-preview .section-title {
		font-size: 1.1rem;
		padding: 4px 2px;
	}
	.profile-wrapper img {
		width: 90px;
	}
}
@media (max-width: 410px) {
	body .about {
		padding: 6px 0 4px 0 !important;
		background: #02131a !important;
	}
	body .about .section-title {
		font-size: 0.9rem !important;
		margin-bottom: 3px !important;
		padding: 3px 2px !important;
		line-height: 1.1 !important;
	}
	body .about p {
		font-size: 0.7rem !important;
		max-width: 100vw !important;
		padding: 0 1px !important;
		line-height: 1.2 !important;
		background: #02131a !important;
	}
}
@media (max-width: 410px) {
	.about {
		padding: 8px 0 6px 0 !important;
	}
	.about .section-title {
		font-size: 0.92rem !important;
		margin-bottom: 5px !important;
		padding: 4px 4px !important;
		line-height: 1.1 !important;
	}
	.about p {
		font-size: 0.72rem !important;
		max-width: 100vw !important;
		padding: 0 1px !important;
		line-height: 1.3 !important;
	}
}
@media (max-width: 410px) {
	.about {
		padding: 10px 0 8px 0;
	}
	.about .section-title {
		font-size: 0.95rem;
		margin-bottom: 7px;
		padding: 5px 6px;
		line-height: 1.1;
	}
	.about p {
		font-size: 0.75rem;
		max-width: 100vw;
		padding: 0 2px;
		line-height: 1.4;
	}
}
/* DEMO REEL (ABOUT PAGE) */
.demo-reel {
	padding: 40px 20px;
	text-align: center;
}
.reel-container {
	max-width: 1000px;
	margin: 30px auto;
}
.video-placeholder {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #111827;
	border: 3px solid cyan;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 0 30px rgba(0,255,255,0.3);
}
.video-placeholder video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.play-btn {
	width: 80px;
	height: 80px;
	background: rgba(0,255,255,0.2);
	border: 3px solid cyan;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	color: cyan;
	cursor: pointer;
	transition: 0.3s;
	text-shadow: 0 0 10px cyan;
}
.play-btn:hover {
	background: cyan;
	color: #111827;
	box-shadow: 0 0 25px cyan;
}
.video-overlay p {
	color: cyan;
	font-size: 2rem;
	font-weight: 700;
	text-shadow: 0 0 10px cyan;
}
@media (max-width: 600px) {
	.demo-reel {
		padding: 50px 15px;
	}
	.play-btn {
		width: 60px;
		height: 60px;
		font-size: 1.8rem;
	}
	.video-overlay p {
		font-size: 1.3rem;
	}
}

/* ================= SKILLS ================= */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    justify-items: center;
    max-width: 500px;
    margin: 0 auto;
}

.skill-card.neon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 120px;
    border: 3px solid #00ffff;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(0, 255, 255, 0.1);
    background: rgba(0, 255, 255, 0.05);
    color: #00ffff;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.skill-card.neon-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.9), 0 0 50px rgba(0, 255, 255, 0.4);
    background: rgba(0, 255, 255, 0.15);
}

.skill-logo {
    margin-bottom: 8px;
}

.skill-logo img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.skill-label {
    margin-bottom: 5px;
    font-size: 13px;
}

.star-rating {
    display: flex;
    gap: 3px;
}

.star {
    font-size: 14px;
    color: #333;
}

.star.filled {
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
}

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

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

img{
max-width:100%;
display:block;
}

html, body{
overflow-x:hidden;
}

/* ================= BODY ================= */

body{
background-color:#020817;

background-image:
linear-gradient(rgba(0,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,255,0.05) 1px, transparent 1px);

background-size:40px 40px;
color:white;
}

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

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:#050910;
border-bottom:1px solid cyan;
flex-wrap:wrap;
gap:10px;
}

.brand{
display:flex;
align-items:center;
gap:12px;
}

.brand-logo{
height:42px;
width:42px;
border-radius:50%;
object-fit:cover;
filter:
drop-shadow(0 0 6px cyan)
drop-shadow(0 0 12px rgba(0,255,255,0.6));
}

.logo{
color:cyan;
letter-spacing:3px;
text-shadow:
0 0 6px cyan,
0 0 18px rgba(0,255,255,0.6);
}

/* ================= NAV ================= */

.nav-buttons{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

.nav-btn{
text-decoration:none;
color:white;
padding:10px 25px;
border:2px solid cyan;
border-radius:6px;
background:rgba(0,255,255,0.05);
font-weight:bold;
letter-spacing:1px;
transition:0.3s;
min-width:110px;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}

.nav-btn:hover{
background:cyan;
color:black;
transform:translateY(-4px);
box-shadow:
0 0 10px cyan,
0 0 20px cyan,
0 0 40px cyan;
}

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

.page-layout{
display:grid;
grid-template-columns:300px 1fr 300px;
width:100%;
min-height:calc(100vh - 80px);
}

/* SIDE BANNERS */

.side-banner{
display: flex;
justify-content: center;
align-items: stretch;
border-left: 2px solid cyan;
border-right: 2px solid cyan;
background: rgba(0,255,255,0.05);
box-shadow: 0 0 10px cyan, 0 0 25px rgba(0,255,255,0.3);
overflow: hidden;
width: 300px;
min-width: 300px;
max-width: 300px;
height: 100vh;
min-height: 100vh;
}

.side-banner img{
width: 100%;
height: 100%;
aspect-ratio: 3 / 4;
min-height: 100%;
max-height: 100vh;
object-fit: cover;
object-position: center;
}

.right-banner img{ object-position:15% center; }
.left-banner img{ object-position:80% center; }

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

.main-content {
	width: 100%;
	max-width: 100vw;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.main-content {
		padding: 0 16px;
	}
}

@media (max-width: 600px) {
	.main-content {
		padding: 0 6px;
	}
}

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

.hero{
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
padding:100px 0 80px;
min-height:60vh;
}

.hero-text{
flex:1;
max-width:500px;
}

.hero-text p{
color:#b5c3d6;
font-size:26px;
font-weight:500;
letter-spacing:0.5px;
text-shadow:0 0 10px rgba(0,255,255,0.4);
}

.hero-text .section-title{
font-size:clamp(42px,8vw,80px);
margin-bottom:25px;
line-height:1.15;
text-shadow:
0 0 15px cyan,
0 0 35px rgba(0,255,255,0.7),
0 0 50px rgba(0,255,255,0.4);
}

/* ABOUT PREVIEW (in hero) */
.about-preview{
margin-top:30px;
text-align:left;
}

.about-preview .section-title{
font-size:1.5rem;
margin-bottom:15px;
padding:8px 20px;
}

.about-preview p{
color:#b5c3d6;
font-size:1rem;
line-height:1.6;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
}

.hero-image{
flex:1;
display:flex;
justify-content:center;
}

/* PROFILE */

.profile-wrapper{
position:relative;
transition:0.4s;
}

.profile-wrapper:hover{
transform:translateY(-10px) scale(1.05);
}

.profile-wrapper img{
width:350px;
border-radius:16px;
border:3px solid cyan;
box-shadow:
0 0 20px cyan,
0 0 40px rgba(0,255,255,0.7),
0 0 60px rgba(0,255,255,0.4);
}

/* BUBBLES */

.bubble{
position:absolute;
background:rgba(0,255,255,0.12);
border:2px solid cyan;
padding:18px 40px;
border-radius:25px;
font-size:22px;
font-weight:bold;
min-width:300px;
opacity:0;
transform:scale(0.9);
transition:0.4s;
pointer-events:none;
}

.profile-wrapper:hover .bubble{
opacity:1;
transform:scale(1);
}

.bubble1{ top:-90px; left:-160px; }
.bubble2{ top:-90px; right:-160px; }
.bubble3{ top:50%; left:-260px; transform:translateY(-50%); }
.bubble4{ bottom:-70px; right:-160px; }

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

.section-title{
margin:40px auto 20px;
padding:10px 24px;
border-radius:8px;
background:rgba(0,255,255,0.07);
border:2px solid rgba(0,255,255,0.6);
color:cyan;
text-align:center;
width:fit-content;
}

/* ABOUT */


/* ABOUT SECTION - Responsive */
.about {
	text-align: center;
	padding: 50px 0 40px 0;
}
.about .section-title {
	font-size: 2rem;
	color: cyan;
	font-family: 'Orbitron', 'Montserrat', 'Arial Black', 'Arial', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
	text-shadow: 0 0 10px cyan, 0 0 20px #00ffff;
	margin-bottom: 20px;
}
.about p {
	font-size: 1rem;
	color: #b5eaff;
	line-height: 1.6;
	font-family: 'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
	max-width: 700px;
	margin: 0 auto;
	font-weight: 400;
	letter-spacing: 0.5px;
}

@media (max-width: 900px) {
	.about {
		padding: 30px 0 20px 0;
	}
	.about .section-title {
		font-size: 1.3rem;
		margin-bottom: 12px;
		padding: 7px 10px;
	}
	.about p {
		font-size: 0.95rem;
		max-width: 95vw;
	}
}

@media (max-width: 600px) {
	.about {
		padding: 15px 0 10px 0;
	}
	.about .section-title {
		font-size: 1.05rem;
		margin-bottom: 7px;
		padding: 5px 6px;
	}
	.about p {
		font-size: 0.8rem;
		max-width: 99vw;
		padding: 0 5px;
	}
}

@media (max-width: 410px) {
	.about {
		padding: 6px 0 4px 0;
	}
	.about .section-title {
		font-size: 0.9rem;
		margin-bottom: 3px;
		padding: 3px 2px;
		line-height: 1.1;
	}
	.about p {
		font-size: 0.7rem;
		max-width: 100vw;
		padding: 0 1px;
		line-height: 1.2;
	}
}

@media (max-width: 900px) {
	.about {
		padding: 35px 0 25px 0;
	}
	.about .section-title {
		font-size: 1.5rem;
		margin-bottom: 15px;
		padding: 8px 16px;
	}
	.about p {
		font-size: 0.95rem;
		max-width: 95vw;
	}
}

@media (max-width: 600px) {
	.about {
		padding: 20px 0 15px 0;
	}
	.about .section-title {
		font-size: 1.1rem;
		margin-bottom: 10px;
		padding: 7px 10px;
	}
	.about p {
		font-size: 0.85rem;
		max-width: 99vw;
		padding: 0 5px;
	}
}

/* ================= CARDS ================= */

.video-container,
.project-container{
display:flex;
gap:30px;
flex-wrap:wrap;
justify-content:center;
}

.tools-container{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
gap:20px;
justify-content:center;
width:min(100%, max-content);
margin:0 auto;
}

@media(min-width:1300px){
.tools-container{
grid-template-columns:repeat(4, minmax(250px, 1fr));
}
}

/* TOOLS GRID (BOX AESTHETIC) */

.tools-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:15px;
justify-content:center;
max-width:500px;
margin:15px auto;
}

.tool-box{
background:#111827;
border:2px solid cyan;
border-radius:10px;
padding:18px 15px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
transition:0.3s;
cursor:default;
}

.tool-box:hover{
transform:translateY(-5px);
box-shadow:0 0 15px cyan, 0 0 30px rgba(0,255,255,0.4);
background:rgba(0,255,255,0.1);
}

.tool-icon{
font-size:24px;
color:cyan;
font-weight:bold;
text-shadow:0 0 10px cyan;
}

.tool-name{
color:#b5eaff;
font-size:12px;
font-weight:bold;
text-align:center;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
}

/* VIDEO */

.video-card{
background:#111827;
padding:15px;
border-radius:10px;
width:280px;
border:2px solid cyan;
transition:0.3s;
}

.video-card:hover{
transform:translateY(-5px);
box-shadow:0 0 10px cyan;
}

.video-card video{
width:100%;
border-radius:8px;
}

/* PROJECT */

.project-card{
background:#111827;
padding:20px;
width:280px;
border-radius:10px;
border:2px solid cyan;
transition:0.3s;
}

.project-card a{
text-decoration:none;
color:inherit;
display:block;
}

.project-card:hover{
transform:translateY(-5px);
box-shadow:0 0 15px cyan, 0 0 30px rgba(0,255,255,0.4);
}

.project-card h3{
color:cyan;
margin-bottom:12px;
font-size:1.2rem;
font-family:'Orbitron', 'Montserrat', 'Arial Black', 'Arial', sans-serif;
text-shadow:0 0 8px cyan;
}

.project-card p{
color:#b5eaff;
font-size:0.9rem;
line-height:1.5;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
}

/* PROJECT PAGE */

.big-project{
width:100%;
max-width:700px;
margin:auto;
padding:20px;
}

.big-project ul{
margin-top:12px;
padding-left:20px;
color:#b5eaff;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
}

.big-project li{
margin-bottom:6px;
}

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

.contact{
text-align:center;
padding:50px 0 40px 0;
}

.contact-intro{
max-width:700px;
margin:0 auto 30px;
font-size:1rem;
color:#b5eaff;
line-height:1.6;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
font-weight:400;
letter-spacing:0.5px;
}

.contact-form{
max-width:500px;
margin:0 auto 30px;
display:flex;
flex-direction:column;
gap:12px;
}

.contact-form input,
.contact-form textarea{
padding:12px;
border-radius:6px;
border:2px solid cyan;
background:rgba(0,255,255,0.05);
color:white;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
font-size:0.9rem;
transition:0.3s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
color:#88c8d4;
font-style:italic;
}

.contact-form input:focus,
.contact-form textarea:focus{
background:rgba(0,255,255,0.1);
box-shadow:0 0 10px cyan;
outline:none;
}

.contact-form button{
padding:12px 24px;
border:none;
border-radius:6px;
background:cyan;
color:#020817;
cursor:pointer;
font-weight:bold;
font-size:0.9rem;
transition:0.3s;
text-transform:uppercase;
letter-spacing:1px;
}

.contact-form button:hover{
background:#00ffff;
transform:translateY(-2px);
box-shadow:0 0 15px cyan;
}

/* SUCCESS POPUP */
.popup-overlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
justify-content:center;
align-items:center;
z-index:1000;
}

.popup-content{
background:#111827;
border:2px solid cyan;
border-radius:15px;
padding:40px;
text-align:center;
max-width:400px;
animation:popIn 0.3s ease;
}

@keyframes popIn{
from{transform:scale(0.8);opacity:0;}
to{transform:scale(1);opacity:1;}
}

.popup-icon{
font-size:50px;
color:cyan;
margin-bottom:15px;
text-shadow:0 0 20px cyan;
}

.popup-content h3{
color:cyan;
font-size:24px;
margin-bottom:10px;
}

.popup-content p{
color:#ccc;
font-size:16px;
margin-bottom:25px;
}

.popup-close{
background:cyan;
color:black;
border:none;
padding:12px 40px;
border-radius:6px;
font-weight:bold;
cursor:pointer;
font-size:16px;
transition:0.3s;
}

.popup-close:hover{
box-shadow:0 0 15px cyan;
transform:translateY(-2px);
}

/* CONTACT INFO */

.contact-info{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:20px;
max-width:700px;
margin:30px auto;
}

.info-box{
background:rgba(0,255,255,0.08);
padding:20px;
border-radius:10px;
border:2px solid cyan;
transition:0.3s;
}

.info-box:hover{
background:rgba(0,255,255,0.15);
border-color:cyan;
box-shadow:0 0 15px cyan, 0 0 30px rgba(0,255,255,0.3);
transform:translateY(-3px);
}

.info-box h3{
color:cyan;
margin-bottom:10px;
font-size:1rem;
font-family:'Orbitron', 'Montserrat', 'Arial Black', 'Arial', sans-serif;
text-shadow:0 0 8px cyan;
}

.info-box p{
color:#b5eaff;
font-size:0.9rem;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
}

/* SOCIAL LINKS */

.social-links{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
margin:30px 0;
}

.social-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 20px;
border:2px solid cyan;
border-radius:6px;
background:rgba(0,255,255,0.05);
color:#b5eaff;
text-decoration:none;
font-weight:bold;
font-size:0.9rem;
transition:0.3s;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
}

.social-btn:hover{
background:cyan;
color:#020817;
transform:translateY(-5px);
box-shadow:0 0 20px cyan, 0 0 40px rgba(0,255,255,0.4);
}

/* CTA SECTION */

.cta-section{
background:rgba(0,255,255,0.1);
border:2px solid cyan;
padding:30px;
border-radius:10px;
margin:30px 0 0;
box-shadow:0 0 15px cyan, 0 0 30px rgba(0,255,255,0.2);
}

.cta-section h3{
color:cyan;
font-family:'Orbitron', 'Montserrat', 'Arial Black', 'Arial', sans-serif;
font-size:1.3rem;
text-shadow:0 0 8px cyan;
margin-bottom:12px;
}

.cta-section p{
color:#b5eaff;
font-size:0.95rem;
line-height:1.6;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
}

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

footer{
text-align:center;
padding:30px;
background:#050910;
margin-top:60px;
border-top:1px solid cyan;
}

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

/* REMOVE SIDE BANNERS */
@media(max-width:1200px){
.page-layout{
grid-template-columns:1fr;
}
.side-banner{
	display: none !important;
}
}

/* TABLET */
@media(max-width:900px){

.hero{
flex-direction:column;
text-align:center;
gap:40px;
justify-content:center;
align-items:center;
}

.hero-text{
width:100%;
}

.hero-image{
order:-1;
width:100%;
}

.profile-wrapper img{
width:220px;
}

.section-title{
margin:60px auto 30px !important;
padding:8px 16px;
font-size:clamp(16px, 5vw, 24px);
}

/* disable bubbles */
.bubble{
display:none;
}

}

/* MOBILE */
@media(max-width:600px){

header{
flex-direction:column;
align-items:center;
text-align:center;
padding:12px;
gap:8px;
}

.brand{
width:100%;
justify-content:center;
gap:8px;
}

.logo{
font-size:clamp(14px, 4vw, 20px);
letter-spacing:1px;
}

.nav-buttons{
gap:8px;
width:100%;
justify-content:center;
flex-wrap:wrap;
}

.nav-btn{
padding:6px 10px;
font-size:12px;
min-width:90px;
}

.main-content{
padding:0 15px;
}

.hero{
padding:40px 0 40px;
gap:20px;
}

.hero-text{
width:100%;
text-align:center;
}

.hero-text p{
font-size:16px;
}

.section-title{
margin:40px auto 20px !important;
padding:8px 16px;
font-size:clamp(16px, 5vw, 24px);
}

.about{
padding:30px 0;
}

.about p{
font-size:14px;
}

.video-card,
.project-card{
width:100%;
max-width:350px;
margin:0 auto;
padding:10px;
}

.demoreel-card{
padding:15px;
margin:0 auto;
}

.demoreel-card video{
height:200px;
}

.contact-form input,
.contact-form textarea{
padding:10px;
font-size:14px;
}

.contact-form button{
padding:10px;
font-size:14px;
}

.contact-info{
grid-template-columns:1fr;
gap:15px;
}

.info-box{
padding:20px;
}

.social-links{
gap:10px;
}

.social-btn{
padding:10px 18px;
font-size:12px;
}

.cta-section{
padding:25px;
margin:30px 0 0;
}

.cta-section h3{
font-size:18px;
margin-bottom:10px;
}

.cta-section p{
font-size:14px;
}

}

/* EXTRA SMALL SCREENS (375px) */
@media(max-width:375px){

header{
padding:10px;
gap:5px;
}

.brand-logo{
height:36px;
width:36px;
}

.logo{
font-size:14px;
letter-spacing:1px;
}

.nav-btn{
padding:6px 8px;
font-size:11px;
min-width:80px;
}

.main-content{
padding:0 12px;
}

.profile-wrapper img{
width:180px;
}

.hero{
padding:30px 0 30px;
gap:15px;
}

.hero-text p{
font-size:14px;
}

.video-card,
.project-card{
max-width:100%;
}

.contact-form input,
.contact-form textarea{
font-size:14px;
padding:8px;
}

.contact-form button{
font-size:12px;
padding:9px;
}

.social-btn{
padding:8px 14px;
font-size:11px;
}

.cta-section{
padding:18px;
}

.cta-section h3{
font-size:16px;
}

}

/* iPhone 14/14 Pro (390px) */
@media(max-width:390px){

header{
padding:10px 8px;
gap:6px;
}

.brand-logo{
height:38px;
width:38px;
}

.logo{
font-size:15px;
letter-spacing:1px;
}

.nav-buttons{
gap:6px;
}

.nav-btn{
padding:7px 9px;
font-size:11px;
min-width:85px;
}

.main-content{
padding:0 12px;
}

.profile-wrapper img{
width:190px;
}

.hero{
padding:35px 0 30px;
gap:18px;
}

.hero-text p{
font-size:14px;
}

.section-title{
margin:35px auto 18px !important;
padding:8px 14px;
font-size:clamp(17px, 5vw, 22px);
}

.about{
padding:25px 0;
}

.about p{
font-size:13px;
}

.video-card,
.project-card{
max-width:100%;
padding:10px;
}

.demoreel-card{
padding:12px;
}

.demoreel-card video{
height:210px;
}

.contact-form input,
.contact-form textarea{
font-size:13px;
padding:9px;
}

.contact-form button{
font-size:12px;
padding:9px;
}

.contact-info{
gap:12px;
}

.info-box{
padding:15px;
}

.social-btn{
padding:9px 16px;
font-size:11px;
}

.cta-section{
padding:20px;
margin:25px 0 0;
}

.cta-section h3{
font-size:17px;
margin-bottom:8px;
}

.cta-section p{
font-size:13px;
}

}

/* Samsung Galaxy S24 / Generic 360px */
@media(max-width:360px){

header{
padding:8px 6px;
gap:5px;
}

.brand-logo{
height:34px;
width:34px;
}

.logo{
font-size:13px;
letter-spacing:1px;
}

.nav-buttons{
gap:5px;
}

.nav-btn{
padding:6px 8px;
font-size:10px;
min-width:75px;
}

.main-content{
padding:0 10px;
}

.profile-wrapper img{
width:170px;
}

.hero{
padding:30px 0 25px;
gap:15px;
}

.hero-text p{
font-size:13px;
}

.section-title{
margin:30px auto 15px !important;
padding:7px 12px;
font-size:clamp(15px, 5vw, 20px);
}

.about{
padding:20px 0;
}

.about p{
font-size:12px;
}

.video-card,
.project-card{
max-width:100%;
padding:8px;
}

.demoreel-card{
padding:10px;
}

.demoreel-card video{
height:190px;
}

.contact-form input,
.contact-form textarea{
font-size:12px;
padding:8px;
}

.contact-form button{
font-size:11px;
padding:8px;
}

.contact-info{
gap:10px;
}

.info-box{
padding:12px;
}

.social-btn{
padding:8px 14px;
font-size:10px;
}

.cta-section{
padding:15px;
margin:20px 0 0;
}

.cta-section h3{
font-size:15px;
margin-bottom:6px;
}

.cta-section p{
font-size:12px;
}

}

/* ================= DEMOREEL FIX ================= */

.demoreel-container{
display:flex;
justify-content:center;
align-items:center;
width:100%;
}

.demoreel-card{
width:100%;
max-width:900px;
margin:auto;
background:#111827;
padding:25px;
border-radius:12px;
border:2px solid cyan;
text-align:center;
transition:0.3s;
box-shadow:0 0 20px cyan, 0 0 40px rgba(0,255,255,0.3);
}

.demoreel-card:hover{
transform:translateY(-5px);
box-shadow:0 0 25px cyan, 0 0 50px rgba(0,255,255,0.5);
}

.demoreel-card video{
width:100%;
max-width:1200px;
height:600px;
object-fit:cover;
border-radius:10px;
border:2px solid cyan;
}

.demoreel-card p{
color:#b5eaff;
font-size:1rem;
margin-top:12px;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
}

/* TABLET */
@media(max-width:900px){
.demoreel-card video{
height:350px;
}

.video-container,
.project-container{
justify-content:center;
}
}

/* MOBILE */
@media(max-width:600px){
.demoreel-card{
max-width:100%;
padding:15px;
}

.demoreel-card video{
height:220px;
}

/* ================= SKILLS SECTION - 2 COLUMN GRID ================= */
.skills-section {
	padding: 50px 20px;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}

.skills-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
	margin-top: 30px;
	justify-items: center;
}

.skill-card {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 1;
	background: linear-gradient(145deg, #1a1f2e, #151a26);
	padding: 25px 20px;
	border-radius: 8px;
	border: 3px solid #00ffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
	transition: all 0.3s ease;
	box-shadow: 0 0 12px rgba(0,255,255,0.2);
}

.skill-card:hover {
	transform: scale(1.05);
	border-color: #00ffff;
	box-shadow: 0 0 25px rgba(0, 255, 255, 0.3), 0 8px 32px rgba(0, 0, 0, 0.4);
}

.skill-logo {
	width: 70px;
	height: 70px;
	background: #0d1117;
	border: 2px solid #3a4050;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.skill-logo img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.skill-label {
	font-size: 1.2rem;
	font-weight: 600;
	color: #e0e6ed;
	font-family: 'Segoe UI', 'Montserrat', sans-serif;
	text-align: center;
}

.star-rating {
	display: flex;
	gap: 8px;
}

.star {
	font-size: 1.4rem;
	color: #3a4050;
}

.star.filled {
	color: #ffd700;
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* Mobile responsive - 1 column */
@media(max-width:600px){
	.skills-section {
		padding: 30px 15px;
		max-width: 100%;
	}
    
	.skills-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
    
	.skill-card {
		max-width: 280px;
		aspect-ratio: 1;
		padding: 28px 15px 28px 15px;
		gap: 12px;
	}
	.skill-card.neon-card {
		padding-top: 32px;
		padding-bottom: 32px;
	}
    
	.skill-logo {
		width: 55px;
		height: 55px;
	}
    
	.skill-logo img {
		width: 38px;
		height: 38px;
	}
    
	.skill-label {
		font-size: 1rem;
	}
    
	.star-rating {
		gap: 2px;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 8px;
		overflow: visible;
		white-space: normal;
	}
	.skill-card.neon-card {
		min-height: 170px;
	}
	.star {
		font-size: 1.1rem;
	}
}
	}
	
	.skill-logo img {
		width: 28px;
		height: 28px;
	}



.tools-grid{
grid-template-columns:repeat(3, 1fr);
gap:10px;
max-width:320px;
}

.tool-box{
padding:15px 10px;
}

.tool-icon{
font-size:22px;
}

.tool-name{
font-size:11px;
}


/* ================= ACHIEVEMENTS / CERTIFICATIONS ================= */

.achievements{
text-align:center;
padding:50px 0 40px 0;
}

.certificates-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
	max-width: 1400px;
	margin: 30px auto;
	padding: 0 20px;
}

@media (max-width: 900px) {
	.certificates-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
		max-width: 700px;
		padding: 0 8px;
	}
}

@media (max-width: 600px) {
	.certificates-grid {
		grid-template-columns: 1fr;
		gap: 12px;
		max-width: 98vw;
		padding: 0 2vw;
	}
	.certificate-card {
		min-width: 0;
		width: 100%;
		padding: 10px 6px;
		box-sizing: border-box;
	}
	.certificate-card img {
		height: 120px;
		max-width: 100%;
		object-fit: contain;
	}
	.certificate-card h3 {
		font-size: 1rem;
	}
	.certificate-card p, .cert-date {
		font-size: 0.85rem;
	}
}

.certificate-card{
padding:20px;
background:#111827;
border:2px solid cyan;
border-radius:10px;
transition:0.3s;
min-width:280px;
}

.certificate-card:hover{
transform:translateY(-5px);
box-shadow:0 0 15px cyan, 0 0 30px rgba(0,255,255,0.4);
}

.certificate-card img{
width:100%;
height:180px;
object-fit:contain;
border-radius:6px;
border:2px solid cyan;
background:#0a0f1a;
}

.certificate-card h3{
font-size:1.2rem;
color:cyan;
font-family:'Orbitron', 'Montserrat', 'Arial Black', 'Arial', sans-serif;
text-shadow:0 0 8px cyan;
margin:12px 0 8px;
}

.certificate-card p{
font-size:0.9rem;
color:#b5eaff;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
}

.cert-date{
font-size:0.85rem;
color:#88c8d4;
display:block;
margin-top:8px;
}

.cert-date{
font-size:1rem;
color:#88c8d4;
font-family:'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
}

.carousel-btn{
font-size:40px;
width:70px;
height:70px;
background:rgba(0,255,255,0.1);
border:2px solid cyan;
border-radius:50%;
color:cyan;
cursor:pointer;
transition:0.3s;
}

.carousel-btn:hover{
background:cyan;
color:#020817;
box-shadow:0 0 20px cyan;
}

.dot{
width:18px;
height:18px;
}


.certificates-carousel{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
margin:30px auto;
max-width:100%;
}

.certificates-wrapper{
display:flex;
overflow:hidden;
width:100%;
max-width:400px;
scroll-behavior:smooth;
}

.certificate-card{
/* Removed min-width and display:none from carousel version to allow grid display */
flex-direction:column;
align-items:center;
padding:20px;
background:#111827;
border-radius:12px;
border:1px solid cyan;
transition:0.3s;
}

/* Removed .certificate-card.active display:flex; for grid version */

.certificate-card img{
width:100%;
max-width:350px;
height:220px;
object-fit:cover;
border-radius:8px;
margin-bottom:15px;
border:2px solid cyan;
}

.certificate-card h3{
color:cyan;
margin-bottom:8px;
font-size:18px;
}

.certificate-card p{
color:#ccc;
font-size:14px;
margin-bottom:5px;
}

.cert-date{
color:#666;
font-size:12px;
}

.carousel-btn{
background:rgba(0,255,255,0.1);
border:2px solid cyan;
color:cyan;
font-size:24px;
width:45px;
height:45px;
border-radius:50%;
cursor:pointer;
transition:0.3s;
display:flex;
align-items:center;
justify-content:center;
}

.carousel-btn:hover{
background:cyan;
color:black;
box-shadow:0 0 15px cyan;
}

.carousel-dots{
display:flex;
justify-content:center;
gap:10px;
margin-top:20px;
}

.dot{
width:12px;
height:12px;
border-radius:50%;
background:rgba(0,255,255,0.3);
cursor:pointer;
transition:0.3s;
}

.dot.active{
background:cyan;
box-shadow:0 0 10px cyan;
}

/* Responsive */

@media (max-width: 900px) {
	.certificates-wrapper {
		max-width: 100%;
	}
	.certificate-card {
		padding: 10px;
	}
	.certificate-card img {
		max-width: 100%;
		height: auto;
	}
}

@media (max-width: 600px) {
	.certificates-carousel {
		gap: 10px;
	}
	.carousel-btn {
		width: 35px;
		height: 35px;
		font-size: 18px;
	}
	.certificate-card {
		padding: 8px;
	}
	.certificate-card img {
		max-width: 100%;
		height: auto;
	}
	.certificate-card h3 {
		font-size: 16px;
	}
	.certificate-card p {
		font-size: 13px;
	}
}


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

/* Smooth fade-in on load */
.hero-text,
.hero-image {
    animation: fadeUp 1s ease forwards;
    opacity: 0;
}

.hero-image {
    animation-delay: 0.3s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Typing effect for intro text */
#typing-text {
    border-right: 3px solid cyan;
    white-space: pre-line;
    display: inline;
    animation: blink 0.8s infinite;
}

@keyframes blink {
    50% { border-color: transparent }
}


/* ================= PROJECT CARD UPGRADE ================= */

.project-card {
    position: relative;
    overflow: hidden;
}

/* glowing hover overlay */
.project-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(0,255,255,0.2), transparent);
    opacity: 0;
    transition: 0.4s;
}

.project-card:hover::before {
    opacity: 1;
}

/* subtle scale */
.project-card:hover {
    transform: translateY(-8px) scale(1.02);
}


/* ================= TOOL BOX ENHANCEMENT ================= */

.tool-box {
    position: relative;
    overflow: hidden;
}

.tool-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0,255,255,0.2), transparent 70%);
    opacity: 0;
    transition: 0.4s;
}

.tool-box:hover::after {
    opacity: 1;
}


/* ================= CTA GLOW PULSE ================= */

.cta-section {
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0,255,255,0.2), transparent 70%);
    animation: pulseGlow 6s linear infinite;
}

@keyframes pulseGlow {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


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

.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: 0.6s ease;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}


/* ================= BUTTON IMPROVEMENTS ================= */

.nav-btn {
    position: relative;
    overflow: hidden;
}

.nav-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, cyan, transparent);
    opacity: 0;
    transition: 0.3s;
}

.nav-btn:hover::after {
    opacity: 0.3;
}


/* ================= SMOOTH SCROLL ================= */

html {
    scroll-behavior: smooth;
}


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

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #020817;
}

::-webkit-scrollbar-thumb {
    background: cyan;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00ffff;
}


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

footer p {
    color: #88c8d4;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

footer {
    box-shadow: 0 0 15px rgba(0,255,255,0.2);
}


/* ================= IMAGE HOVER GLOW ================= */

.profile-wrapper img {
    transition: 0.4s;
}

.profile-wrapper:hover img {
    box-shadow:
    0 0 25px cyan,
    0 0 50px rgba(0,255,255,0.7),
    0 0 80px rgba(0,255,255,0.5);
}


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

@media(max-width:600px){

.hero-text p {
    white-space: normal;
    border-right: none;
    animation: none;
    width: 100%;
}

}

/* Beautiful Skills Page Enhancements */
 .skills-glow-title {
     font-size: 2.5rem;
     color: cyan;
     letter-spacing: 2px;
     text-shadow: 0 0 18px #00ffff, 0 0 40px #00ffff99;
     animation: glowPulse 2.5s infinite alternate;
 }
 @keyframes glowPulse {
     0% { text-shadow: 0 0 18px #00ffff, 0 0 40px #00ffff99; }
     100% { text-shadow: 0 0 32px #00ffff, 0 0 80px #00ffffcc; }
 }
 .skills-intro {
     color: #b5eaff;
     font-size: 1.1rem;
     margin-bottom: 18px;
     text-align: center;
     font-family: 'Fira Mono', 'Montserrat', 'Courier New', Courier, monospace;
     letter-spacing: 0.5px;
     opacity: 0.85;
 }
 .skills-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 32px 40px;
     max-width: 900px;
     margin: 0 auto;
     justify-items: center;
 }
 .skills-grid.fade-in {
     opacity: 0;
     transform: translateY(40px);
     transition: 0.8s cubic-bezier(.4,2,.3,1);
 }
 .skills-grid.fade-in.show {
     opacity: 1;
     transform: translateY(0);
 }
 .skill-card.neon-card {
     position: relative;
     overflow: visible;
     width: 370px;
     min-width: 320px;
     max-width: 100%;
     background: linear-gradient(135deg, #0a0f1a 60%, #0ff2 100%);
     border: 2.5px solid #00ffff;
     box-shadow: 0 0 18px #00ffff33, 0 0 40px #00ffff22;
     transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
     z-index: 1;
     padding: 28px 0 18px 0;
 }
 .skill-card.neon-card:hover {
     box-shadow: 0 0 40px #00ffffcc, 0 0 80px #00ffff99;
     border-color: #00ffff;
     transform: scale(1.07) rotate(-1deg);
 }
 .skill-card.neon-card::after {
     content: "";
     position: absolute;
     inset: -8px;
     border-radius: 16px;
     background: radial-gradient(circle, #00ffff33 0%, transparent 80%);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.4s;
     z-index: 0;
 }
 .skill-card.neon-card:hover::after {
     opacity: 1;
 }
 .skill-logo {
     box-shadow: 0 0 12px #00ffff44;
     background: #0d1117;
     border: 2px solid #00ffff44;
     border-radius: 16px;
     margin-bottom: 10px;
     transition: box-shadow 0.3s, border-color 0.3s;
 }
 .skill-card.neon-card:hover .skill-logo {
     box-shadow: 0 0 24px #00ffffcc, 0 0 40px #00ffff99;
     border-color: #00ffff;
 }
 .star-rating {
     margin-top: 8px;
     gap: 5px;
 }
 .star {
     font-size: 1.3rem;
     color: #3a4050;
     filter: drop-shadow(0 0 2px #00ffff44);
     transition: color 0.3s, text-shadow 0.3s;
 }
 .star.filled {
     color: #ffd700;
     text-shadow: 0 0 10px #ffd70099, 0 0 18px #00ffff44;
 }
 .skill-label {
     font-size: 1.1rem;
     color: #e0e6ed;
     font-family: 'Orbitron', 'Montserrat', 'Arial Black', 'Arial', sans-serif;
     letter-spacing: 1px;
     margin-bottom: 2px;
     text-shadow: 0 0 6px #00ffff33;
 }
 .skill-logo img {
     width: 70px;
     height: 70px;
     object-fit: contain;
 }
 .skill-logo {
     width: 90px;
     height: 90px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 10px;
     box-shadow: 0 0 12px #00ffff44;
     background: #0d1117;
     border: 2px solid #00ffff44;
     border-radius: 16px;
     transition: box-shadow 0.3s, border-color 0.3s;
 }
 @media (max-width: 1100px) {
     .skills-grid {
         grid-template-columns: 1fr;
         max-width: 500px;
     }
     .skill-card.neon-card {
         width: 100%;
         min-width: 0;
     }
 }
 @media (max-width: 600px) {
     .skills-glow-title { font-size: 1.5rem; }
     .skills-intro { font-size: 0.95rem; }
     .skill-label { font-size: 1rem; }
     .star { font-size: 1.1rem; }
     .skills-grid { gap: 18px; }
     .skill-card.neon-card { padding: 18px 0 12px 0; }
 }