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

html{
scroll-behavior:smooth;
}

body{

background:#08111f;

color:white;

line-height:1.6;

}

header{
position:sticky;
top:0;
z-index:1000;
}

nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 8%;

background:rgba(16,26,45,0.95);

backdrop-filter:blur(8px);

box-shadow:0 4px 20px rgba(0,0,0,0.2);

}

.logo{

font-size:30px;

font-weight:bold;

color:#00c3ff;

}

.menu-toggle{

display:none;

background:none;

border:none;

cursor:pointer;

padding:6px;

}

.menu-toggle span{
	display:block;

width:24px;

height:2px;

background:white;

margin:4px 0;

transition:0.3s;

}

nav ul{

display:flex;

list-style:none;

}

nav li{

margin-left:20px;

}

a{

text-decoration:none;

color:white;

transition:color 0.3s ease, transform 0.3s ease;

}

a:hover{

color:#00c3ff;

}

a:focus-visible,
button:focus-visible{
outline:3px solid #f8fafc;
outline-offset:4px;
}

nav a[aria-current="page"]{
color:#00c3ff;
}

.hero{

height:60vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:20px;

}

.hero-content{

max-width:900px;

width:100%;

margin:0 auto;
	display:flex;

flex-direction:column;

align-items:center;

}

.hero h1{

font-size:70px;

letter-spacing:1px;

text-shadow:0 6px 24px rgba(0,0,0,0.25);

}

.hero span{

color:#00c3ff;

}

.hero h2{

margin-top:20px;

color:#cbd5e1;

font-size:28px;

font-weight:600;

}

.hero p{

margin-top:30px;

line-height:1.8;

color:#94a3b8;

font-size:20px;

max-width:760px;

}

.buttons{

margin-top:40px;
	display:flex;

justify-content:center;

flex-wrap:wrap;

gap:16px;

}

.buttons a{

padding:15px 30px;

background:#00c3ff;

color:black;

margin:10px;

border-radius:30px;

display:inline-block;

font-weight:bold;

transition:all 0.3s ease;

box-shadow:0 6px 18px rgba(0,195,255,0.2);

}

.buttons a:hover{

background:white;

transform:translateY(-3px);

box-shadow:0 10px 24px rgba(255,255,255,0.15);

}

.skills{

padding:28px 5% 36px;

text-align:center;
	display:flex;

flex-direction:column;

align-items:center;

margin-bottom:4px;

}

.training-row{
	display:flex;
	justify-content:center;
	gap:24px;
	flex-wrap:wrap;
	width:100%;
	max-width:1120px;
	margin:0 auto;
}

.training-row .training-side{
	flex:1 1 320px;
	max-width:460px;
	min-width:280px;
	padding:24px 20px 30px;
	margin-bottom:0;
}

.skills h2{

margin-bottom:40px;

font-size:34px;

color:#f8fafc;

}

.hero-section{

padding-top:60px;

padding-bottom:40px;

}

.hero-section h1{

font-size:48px;

margin-bottom:20px;

}

.hero-section p{

max-width:800px;

margin:0 auto;

font-size:18px;

color:#cbd5e1;

}

.training-card{

min-height:170px;

padding:24px 20px;

position:relative;

overflow:hidden;

}

.training-card::before{

content:"";

position:absolute;

top:0;
	left:0;
	width:100%;
	height:4px;
	background:linear-gradient(90deg, #00c3ff, #38bdf8);

}

.training-card h3{

font-size:22px;

margin-bottom:8px;

color:#ffffff;

}

.training-card p{

font-size:15px;

color:#cbd5e1;

}

.training-card a,
.certificate-button{

color:#00c3ff;

font-weight:bold;

margin-top:8px;

}

.training-card a:hover,
.certificate-button:hover{

color:#ffffff;

}

.certificate-button{
background:none;
border:0;
cursor:pointer;
font:inherit;
}


.cards{

display:flex;

justify-content:center;

align-items:stretch;

gap:20px;

flex-wrap:wrap;

margin-top:30px;

max-width:1100px;

width:100%;

}

.card{

background:linear-gradient(135deg, #101a2d 0%, #16253f 100%);

padding:20px;

margin:10px;

width:180px;

border-radius:12px;

transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

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

box-shadow:0 4px 16px rgba(0,0,0,0.15);
	display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

min-height:110px;

line-height:1.5;

position:relative;

overflow:hidden;

}

.card::before{

content:"";

position:absolute;
	top:0;
	left:0;
	width:100%;
	height:4px;
	background:linear-gradient(90deg, #00c3ff, #38bdf8);

}

.card h3,
.card p,
.card a,
.card button{

margin:0;

width:100%;

}

.card a{

margin-top:6px;

}

.section-copy{
max-width:800px;
margin:auto;
line-height:1.8;
color:#94a3b8;
font-size:18px;
}

.section-copy.narrow{
max-width:650px;
color:#cbd5e1;
}

.contact-cards{
max-width:700px;
gap:30px;
}

.contact-card{
width:260px;
min-height:160px;
}

.card:hover{

transform:translateY(-8px);

box-shadow:0 12px 28px rgba(0,195,255,0.15);

border-color:rgba(0,195,255,0.4);

}

footer{

text-align:center;

padding:30px;

background:#101a2d;

margin-top:50px;

box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);

}

.modal{
	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:2000;
	padding:20px;
}

.modal.is-open{
display:flex;
}

.modal-content{
	position:relative;
	max-width:700px;
	width:100%;
	background:#0f172a;
	border-radius:12px;
	padding:20px;
	box-shadow:0 20px 50px rgba(0,0,0,0.35);
}

.modal-content img{
	width:100%;
	max-height:75vh;
	object-fit:contain;
	display:block;
	border-radius:8px;
}

.modal-caption{
	margin-top:12px;
	text-align:center;
	font-weight:600;
	color:#e2e8f0;
}

.modal-close{
	position:absolute;
	top:10px;
	right:10px;
	border:none;
	background:#00c3ff;
	color:#08111f;
	width:36px;
	height:36px;
	border-radius:50%;
	font-size:22px;
	cursor:pointer;
}

@media(max-width:768px){

nav{

flex-wrap:wrap;

justify-content:space-between;

align-items:center;

gap:10px;

}

.logo{

width:auto;

text-align:left;

}

.menu-toggle{

display:block;

}

nav ul{

display:none;

flex-direction:column;

align-items:center;

width:100%;

gap:8px;

padding-top:10px;

}

nav ul.active{

display:flex;

}

nav li{

margin-left:0;

}

.hero h1{

font-size:45px;

}

.hero-section h1,
.skills h1,
.about-header h1{
font-size:38px;
}

.hero{
height:auto;
min-height:65vh;
}

.skills{
padding-left:20px;
padding-right:20px;
}

.card,
.contact-card{
width:min(100%, 320px);
margin:6px;
}

}

/* ===== About PAGE ===== */

.about-header{

padding:60px 20px;

text-align:center;

background:#08111f;

}

.about-header h1{

font-size:60px;

letter-spacing:1px;

}

.about-header span{

color:#00c3ff;

}

.about-header p{

margin-top:20px;

font-size:24px;

color:#94a3b8;

}

.about-profile{

text-align:center;

max-width:900px;

margin:0 auto;

padding:20px;

}

.profile-pic img{

width:220px;

height:220px;

border-radius:50%;

object-fit:cover;

border:5px solid #00c3ff;

box-shadow:0 0 25px rgba(0,195,255,.5);

margin-bottom:20px;

}

.about-profile h2{

font-size:42px;

margin-bottom:10px;

color:#ffffff;

}

.about-profile h3{

color:#00c3ff;

margin-bottom:15px;

font-weight:normal;

}

.about-profile p{

color:#94a3b8;

line-height:1.8;

font-size:18px;

max-width:800px;

margin:0 auto 20px;

}



/* ===== CERTIFICATES PAGE ===== */

.skills h1{

    font-size:50px;

    margin-bottom:20px;

    text-align:center;

}

.skills p{

    text-align:center;

    max-width:900px;

    margin:auto;

    line-height:1.8;

    color:#94a3b8;

}

.card h3{

    margin-bottom:10px;

    font-size:24px;

    font-weight:600;

}

.card p{

    margin:0;

    font-size:15px;

    color:#94a3b8;

}

/* =====================Smooth Scroll===================== */

html{

scroll-behavior:smooth;

}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto;
}

*{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
}
}