/* Global page scaling */

html{
zoom:90%;
}



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

.home-page body{
align:center;
height:100vh;

.home-page .background:linear-gradient(
135deg,
#021b34,
#062a4f,
#021b34
);

color:white;
overflow:hidden;

}


/* HERO SECTION */

.home-page .hero{
margin-top:-30px;
height:100vh;

display:flex;
flex-direction:column;
justify-content:center;
justify-content:center;   /* vertical center */
align-items:center;

padding:0px 30%;

}


.home-page .hero-content{
max-width:650px;
}

	
.home-page .role{
text-align:center;
letter-spacing:4px;
color:#4cc9ff;
align-item:center;
margin-bottom:10px;
font-size:29px;
text-align:center;
}


.home-page .hero h1{
align:center;
font-size:65px;
text-align:center;
margin:10px 0;

font-weight:700;

}


.home-page .hero h3{
text-align:center;
align-item:center;
font-weight:500;
font-size:23px;
margin-top:20px;
margin-bottom:30px;

color:#dbeafe;

}


.home-page .intro{

line-height:1.6;
font-size:22px;

color:#cbd5e1;

}
.hero-text-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
max-width:900px;
margin:auto;
}

.hero-text-row p{
flex:1;
margin:0;
}


/* Neon Resume Button */

.resume-btn{
display:inline-block;
margin-top:20px;
float:right;

padding:12px 30px;
font-weight:600;
text-decoration:none;
color:#00f7ff;

border:2px solid #00f7ff;
border-radius:25px;

background:transparent;

transition:0.3s ease;
}

/* Neon glow hover */

.resume-btn:hover{
background:#00f7ff;
color:#001a33;

box-shadow:
0 0 5px #00f7ff,
0 0 15px #00f7ff,
0 0 30px #00f7ff;

transform:translateY(-2px);
}

/* Click animation */

.resume-btn:active{
transform:scale(0.95);
}
/* grid lines */

/* graph style */

.home-page .line-white{
fill:none;
stroke:white;
stroke-width:3;

stroke-dasharray:1000;
stroke-dashoffset:1000;

animation:drawLine 3s ease forwards;
}

.home-page .line-blue{
fill:none;
stroke:#4fc3f7;
stroke-width:3;

stroke-dasharray:1000;
stroke-dashoffset:1000;

animation:drawLine 3s ease forwards;
animation-delay:0.5s;
}

/* animation */

@keyframes drawLine{
to{
stroke-dashoffset:0;
}
}

/* NAVBAR */

.home-page .bottom-navbar{

position:fixed;

bottom:0;

left:0;

width:100%;

display:flex;

justify-content:center;

gap:45px;

padding:18px;

background:rgba(5,15,40,0.9);

backdrop-filter:blur(8px);

border-top:1px solid rgba(0,200,255,0.2);

}


/* NAV LINKS */

.home-page .bottom-navbar a{

color:white;

text-decoration:none;

font-weight:800;

padding:8px 16px;

transition:0.3s;

}

/* GLOW EFFECT */

.home-page .bottom-navbar a:hover{

color:#00d4ff;

text-shadow:0 0 10px #00d4ff;

}

.home-page .chart svg{
width:100%;
height:200px;
background:none;
shape-rendering:geometricPrecision;
}

.home-page .chart svg *{
vector-effect:non-scaling-stroke;
}
.home-page .chart svg line{
display:none;
}

/* Dropdown container */
.dropdown{
position: relative;
}

/* Dropdown list */
.dropdown-menu{
display: none;

position: absolute;

/* open upward */
bottom: 35px;
left: 50%;
transform: translateX(-50%);

background: #0a1f3c;
border-radius: 8px;

min-width: 200px;
padding: 10px 0;

list-style: none;

box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* Dropdown items */
.dropdown-menu li a{
display: block;
padding: 10px 18px;

color: white;
text-decoration: none;
font-size: 14px;
}

/* Hover effect */
.dropdown-menu li a:hover{
background: #102d55;
}

/* Show dropdown */
.dropdown:hover .dropdown-menu{
display: block;
}





















/*ABOUT SECTION*/
/* ABOUT SECTION */


.about-section{
min-height:100vh;
background:#061a36;

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

padding:60px 8%;
}

/* CONTAINER */

.about-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;

max-width:1400px;
width:100%;

align-items:center;
}

/* IMAGE SIDE */

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

.about-image img{
width:110%;
max-width:430px;
height:auto;

border-radius:12px;

box-shadow:0 30px 70px rgba(0,0,0,0.6);
}

/* TEXT SIDE */

.about-content{
color:white;
max-width:600px;
}

.about-content h1{
font-size:40px;
margin-bottom:20px;
}

.about-content p{
line-height:1.8;
color:#c6d2ff;
font-size:18px;
margin-bottom:18px;
}

/* CAREER BOX */

.career-box{
margin-top:20px;

padding:16px;

background:rgba(255,255,255,0.12);

border-radius:8px;

border:1px solid rgba(255,255,255,0.25);

color:white;
}

/* MOBILE */

@media(max-width:900px){

.about-container{
grid-template-columns:1fr;
text-align:center;
}

.about-image img{
max-width:300px;
}

}














/* RESET */


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

body{

font-family:Arial, Helvetica, sans-serif;
color:white;

}



/* SECTION */

.skills-section{
padding:80px 10%;
text-align:center;
}



/* TITLE BOX */

.skills-title{

position:relative;

display:inline-block;

padding:20px 60px;

border-radius:12px;
margin-top:-5px;
margin-bottom:90px;

border:1px solid rgba(0,200,255,0.4);

overflow:hidden;

}


/* TEXT */

.title-text{

font-size:38px;

font-weight:bold;

position:relative;

z-index:2;

}



/* ROTATING LIGHT */

.skills-title::before{

content:"";

position:absolute;

width:200%;
height:200%;

background:conic-gradient(
transparent 0deg,
transparent 270deg,
#00c6ff 280deg,
transparent 290deg
);

top:-50%;
left:-50%;

animation:rotateBorder 4s linear infinite;

z-index:0;

}



/* INNER BACKGROUND */

.skills-title::after{

content:"";

position:absolute;

inset:3px;

background:#061a36;

border-radius:10px;

z-index:1;

}



/* ROTATION */

@keyframes rotateBorder{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}



/* GRID */

.skills-container{

display:grid;

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

gap:25px;

}



/* SKILL CARD */

.skill-card{

background:rgba(255,255,255,0.05);

border-radius:12px;

padding:20px;

border:1px solid rgba(255,255,255,0.15);

transition:0.3s;

}



/* HOVER */

.skill-card:hover{

transform:translateY(-8px);

box-shadow:
0 0 15px rgba(0,200,255,0.4),
0 0 30px rgba(0,200,255,0.2);

border:1px solid rgba(0,200,255,0.6);

}



/* ICON */

.icon-circle{

width:60px;
height:60px;

margin:auto;
margin-bottom:15px;

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

border-radius:50%;

background:linear-gradient(135deg,#00c6ff,#0072ff);

font-size:24px;

box-shadow:0 0 12px rgba(0,200,255,0.4);

}



/* TEXT */

.skill-card h3{
margin-bottom:10px;
}

.skill-card p{
color:#c7d4ff;
font-size:16px;
}



/* MOBILE */

@media(max-width:900px){

.skills-container{
grid-template-columns:1fr;
}

}





















/*technical.css*/
/* RESET */

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

/* BACKGROUND */

 body .technical-page{

color:white;

background:linear-gradient(
135deg,
#020617,
#051a35,
#0a2a55
);

}

/* SECTION */

.technical-section{

padding:80px 8%;

}

/* TITLE */

 .technical-page .title{

font-size:50px;

margin-bottom:70px;

}

/* LAYOUT */

.technical-page .technical-container{

display:grid;

grid-template-columns:1.35fr 0.9fr;

gap:10px;

align-items:center;

}
/* CHART */

.technical-page .chart{

position:relative;

padding-left:10px;

}

/* GRID LINES */

.technical-page .chart::before{

content:"";

position:absolute;

left:90px;
right:10px;
width:700px;
top:0;
bottom:45px;

background:repeating-linear-gradient(

to right,

rgba(255,255,255,0.05) 0px,
rgba(255,255,255,0.05) 1px,
transparent 1px,
transparent 90px

);

}

/* ROW */
.technical-page .chart-row{
height:26px;
width:80%;
display:flex;

align-items:center;

margin-bottom:18px;

}

/* LABEL */

.technical-page .skill{

width:90px;

color:#cbd5ff;

font-size:17px;

}

/* BAR BACKGROUND */

 .technical-page .bar-bg{

flex:1;

background:rgba(255,255,255,0.15);

border-radius:5px;

overflow:hidden;

}

/* BAR */

.technical-page .bar{
border-radius:5px;

animation:grow 2s ease forwards;

}

/* ANIMATION */

@keyframes grow{

from{
width:0;
}

}

/* BARS STYLE */

.technical-page .python{

width:10px;
height:24px;

background:linear-gradient(90deg,#00e5ff,#1e90ff);

animation-delay:0.2s;
width:94%;

}

.technical-page .sql{

height:24px;

background:linear-gradient(90deg,#18dbff,#3d98ff);

animation-delay:0.4s;
width:93%;

}

.technical-page .powerbi{

height:24px;

background:linear-gradient(90deg,#33d4ff,#59a9ff);

animation-delay:0.6s;
width:90%;

}

.technical-page .excel{

height:24px;

background:linear-gradient(90deg,#4ccfff,#70b4ff);

animation-delay:0.8s;
width:88%;

}

.technical-page .tableau{

height:24px;

background:linear-gradient(90deg,#68c9ff,#86c0ff);

animation-delay:1s;
width:60%;

}

.technical-page .pandas{

height:24px;

background:linear-gradient(90deg,#84d2ff,#9fcaff);

animation-delay:1.2s;
width:70%;

}

/* AXIS */

.technical-page .axis{

display:flex;

justify-content:space-between;

margin-left:90px;

margin-top:10px;

font-size:12px;
max-width:62%;
color:#9fb8ff;

}

/* RIGHT SIDE */

.technical-page .skills-info{

display:flex;
flex-direction:column;

gap:22px;

max-width:500px;


}

/* BOX */

.technical-page .info-box{

margin-left:-95px;
background:rgba(255,255,255,0.05);

padding:26px;

border-radius:12px;

border:1px solid rgba(255,255,255,0.08);

transition:0.3s;

}

/* HOVER EFFECT */

.technical-page .info-box:hover{

transform:translateY(-5px);

box-shadow:0 0 20px rgba(0,200,255,0.35);

}

/* TEXT */

.technical-page .info-box h3{
font-size: 22px;
margin-bottom:8px;

}

.technical-page .info-box p{

color:#cbd5ff;
font-size: 20px;
line-height:1.6;

}














/*project1*/

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;   /* prevents scrolling */
}



/* DARK BACKGROUND */

body{

color:white;

background:linear-gradient(
135deg,
#020617,
#051a35,
#0a2a55
);

}

/* SECTION */

.project-section{

padding:80px 10%;

}

/* TITLE */

.project-title{

font-size:40px;
margin-top:-35px;
margin-bottom:15px;

}

/* LAYOUT */

.project-container{

display:grid;

grid-template-columns:1fr 1.2fr;

gap:60px;

align-items:center;

}

/* IMAGE */

.project-image{

position:relative;

}

.project-image img{

width:100%;

border-radius:12px;

box-shadow:0 0 25px rgba(0,200,255,0.3);
transition:0.4s ease;

}

/* Hover effect */

.project-image img:hover{

transform:scale(1.05);

box-shadow:0 0 40px rgba(0,200,255,0.7);

}

/* GITHUB BUTTON */

.github-btn{

position:absolute;

bottom:20px;

left:20px;

background:linear-gradient(
90deg,
#00e5ff,
#1e90ff
);

color:white;

padding:12px 20px;

border-radius:8px;

text-decoration:none;

font-weight:bold;

transition:0.3s;

}

/* BUTTON HOVER */

.github-btn:hover{

box-shadow:0 0 20px rgba(0,200,255,0.8);

transform:scale(1.05);

}

/* TEXT SIDE */

.project-content h3{

margin-top:20px;

margin-bottom:8px;

font-size:20px;

color:#FFFFFF;

}

.project-content p{

line-height:1.6;

color:#cbd5ff;

}

.project-content ul{

margin-left:20px;

color:#cbd5ff;

margin-top:10px;

}

.project-content li{

margin-bottom:8px;

}









/*car*/
/* =============================== */
/* CAR PROJECT SECTION */
/* =============================== */

.car-project{

padding:60px 10%;

background:linear-gradient(
135deg,
#020617,
#051a35,
#0a2a55
);

color:white;

min-height:100vh;

}


/* TITLE */

.car-title{

font-size:42px;

margin-bottom:60px;

font-weight:700;

}


/* LAYOUT */

.car-container{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:0px;


margin-left:10px;



align-items:center;

}


/* IMAGE */

.car-image{

position:relative;

display:flex;

justify-content:flex-start;;

}


.car-image img{

width:540px;

max-width:100%;

border-radius:14px;

box-shadow:0 0 35px rgba(0,200,255,0.35);

transition:0.4s;

}


.car-image img:hover{

transform:scale(1.05);

box-shadow:0 0 45px rgba(0,200,255,0.7);

}


/* BUTTON */

.car-btn{

position:absolute;

bottom:25px;

left:25px;

background:linear-gradient(
90deg,
#00e5ff,
#1e90ff
);

color:white;

padding:12px 24px;

border-radius:8px;

text-decoration:none;

font-weight:bold;

transition:0.3s;

}


.car-btn:hover{

box-shadow:0 0 20px rgba(0,200,255,0.8);

transform:scale(1.05);

}


/* TEXT */

.car-content h3{

margin-top:18px;

margin-left:-60px;


margin-bottom:8px;

font-size:20px;

color:#FFFFFF;

}


.car-content p{

line-height:1.6;
margin-left:-60px;

color:#cbd5ff;

}


.car-content ul{

margin-left:-60px;

margin-top:10px;

color:#cbd5ff;

}


.car-content li{
margin-left:20px;

margin-bottom:8px;

}

















/* ================= */
/* HEART PROJECT */
/* ================= */

.heart-project{

padding:60px 10%;

background:linear-gradient(
135deg,
#020617,
#051a35,
#0a2a55
);

color:white;

}


.heart-title{

font-size:42px;

margin-bottom:40px;

font-weight:700;

}


.heart-container{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:70px;

align-items:center;

}


/* IMAGE */

.heart-image{

position:relative;

display:flex;

justify-content:flex-start;

}


.heart-image img{

width:510px;

border-radius:14px;

box-shadow:0 0 35px rgba(0,255,200,0.4);

transition:0.4s;

}


.heart-image img:hover{

transform:scale(1.05);

box-shadow:0 0 45px rgba(0,255,200,0.7);

}


/* BUTTON */

.heart-btn{

position:absolute;

bottom:10px;

left:25px;

background:linear-gradient(
90deg,
#00e5ff,
#1e90ff
);

color:white;

padding:12px 24px;

border-radius:8px;

text-decoration:none;

font-weight:bold;

transition:0.3s;

}


.heart-btn:hover{

box-shadow:0 0 20px rgba(0,200,255,0.8);

transform:scale(1.05);

}


/* TEXT */

.heart-content h3{
margin-left:-120px;

margin-top:18px;

margin-bottom:8px;

font-size:20px;

color:#FFFFFF;

}


.heart-content p{
margin-left:-120px;

line-height:1.6;

color:#cbd5ff;

}


.heart-content ul{

margin-left:-120px;

margin-top:10px;

color:#cbd5ff;

}


.heart-content li{

margin-bottom:8px;


}





















/* ============================= */
/* EDUCATION SECTION */
/* ============================= */

.education-section{

padding:80px 10%;

background:linear-gradient(
135deg,
#020617,
#051a35,
#0a2a55
);
min-height:100vh;
color:white;

}

.edu-title{

font-size:38px;

margin-bottom:40px;

}


/* layout */

.edu-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

}


/* EXPERIENCE BOX */

.exp-card{

padding:25px;


border-radius:20px;

border:2px solid rgba(0,200,255,0.5);   /* thin neon border */

background:
rgba(255,255,255,0.02);

transition:0.3s;

margin-bottom:20px;

}


/* glow on hover */

.exp-card:hover{

box-shadow:0 0 15px rgba(0,200,255,0.6);

transform:translateY(-3px);

}


/* headings */

.experience h3,
.education h3{

margin-bottom:15px;
margin-top:25px;

font-size:20px;

color:#FFFFFF;

}


/* certification list */

.cert-list{

margin-top:20px;

}


.cert-list li{

margin-bottom:15px;

}

.education p{
color:#cbd5ff;
margin-top:15px;
}



/* certification links */

.cert-list a{

color:#cbd5ff;

text-decoration:none;

border-bottom:1px dotted rgba(0,200,255,0.6);

transition:0.3s;

}


.cert-list a:hover{

color:#00e5ff;

border-bottom:1px solid #00e5ff;

}













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

.contact-section{
min-height:100vh;

padding:120px 10%;
display: flex;
align-items: center;

background:
linear-gradient(
rgba(50,6,50,0.70),
rgba(2,6,50,0.70)
),

url("images/contact-bg.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

color:white;

}


/* GRID LAYOUT */

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:190px;

align-items:center;

}


/* TITLE */

.contact-title{

font-size:72px;

font-weight:700;

position:relative;

margin-bottom:20px;

}


/* SOFT BLUE GLOW */

.contact-title::before{

content:"";

position:absolute;

width:420px;

height:420px;

left:-120px;

top:-120px;

background:radial-gradient(
circle,
rgba(70,130,255,0.5),
rgba(0,0,0,0) 70%
);

filter:blur(60px);

z-index:-1;

}


/* TEXT */

.contact-intro{

color:#cbd5ff;

max-width:420px;

line-height:1.6;

}


/* CONTACT ITEMS */

.contact-item{

margin-bottom:25px;

}

.contact-item h3{

font-size:22px;

color:#FFFFFF;

margin-bottom:6px;

}

.contact-item p{

font-size:20px;

color:#00e5ff;

margin-bottom:6px;

}



/* LINKS */

.contact-item a{

color:#00e5ff;

text-decoration:none;

}

.contact-item a:hover{

text-decoration:underline;

}


/* NEON BOX */

.availability-box{

margin-top:30px;

padding:20px;

border-radius:10px;

border:1px solid #00e5ff;

background:rgba(255,255,255,0.03);

box-shadow:0 0 15px rgba(0,229,255,0.4);

font-weight:500;

}




























/* ===== PAGE NAVIGATION CONTAINER ===== */

.page-navigation{
position: fixed;
bottom: 20px;
left: 0;
width: 100%;

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

padding: 0 120px;
box-sizing: border-box;
z-index: 1000;
}


/* ===== BUTTON STYLE ===== */

.nav-btn{
text-decoration: none;
padding: 12px 28px;
font-size: 15px;
font-weight: 500;
color: white;

border-radius: 8px;

/* light transparent background */
background: rgba(255,255,255,0.08);

border: 1px solid rgba(255,255,255,0.15);

backdrop-filter: blur(6px);

transition: all 0.3s ease;
}


/* ===== HOVER EFFECT ===== */

.nav-btn:hover{
background: rgba(255,255,255,0.15);
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}


/* ===== CLICK EFFECT ===== */

.nav-btn:active{
background: #0f766e;
transform: scale(0.95);
box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}