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

body {
	font-family: Montserrat, Ariel, sans-serif;
	line-height: 1.6em;
	font-size: 1.1em;
	color: #333;
	overflow-x: hidden;
	font-weight: 400;
}

.summary-box,
.tldr-summary { background-color: #f5f5f5; padding: 1.5em; border-left: 4px solid #333; margin-bottom: 2em; }
.summary-box p,
.tldr-summary p { margin: 0; line-height: 1.6; }


.hamburger { position: absolute; right: 40px; top: 40px; width: 40px; z-index: 100; }
.hamburger:hover { cursor: pointer; }
#hamburger_menu { display: none; list-style-type: none; border: solid 2px #333; border-radius: 10px; z-index: 100; position: absolute; right: 80px; top: 80px; width: 75%; max-width: 600px; background: #fff; padding: 20px; }
#hamburger_menu li:before { content: "\21D2"; color: #333; font-weight: bold; font-size: 1em; margin-right: .25em; }
#hamburger_menu li { text-align: left; margin-bottom: 1em; color: #333; }
#hamburger_menu li a { text-align: left; text-decoration: none; color: #333; }
#hamburger_menu li.active a { color: green; font-weight: bold; }
#hamburger_menu li.active:before { color: green; }

.signature { font-size: .8em; text-align: right; line-height: 1.1em; display: flex; justify-content: space-between; }
.signature>div:first-of-type { text-align: left; }

article { width: 96%; max-width: 1200px; margin: 3em auto; }
article h2,
article p,
article div { margin-bottom: .5em; }
article h2 { margin-top: 1em; }
footer { width: 100%; background: #0d537d; color: #fff; text-align: center; padding: 30px; }
footer a { color: #f0f8ff; }
article section img { float: left; margin: 0 2em 2em 0; border-radius: 10px; }
article>img { display: block; width: 100%; max-width: 1024px; margin: auto; height: auto; border-radius: 10px; }
article .tags { float: right; font-size: .8em; }
article .tags span { margin-left: 1em; }

section.links { background: #000; color: #fff; padding: 3em; text-align: center; }
section.links a { color: #fff; text-decoration: none; }
section.links p { margin-bottom: .5em; }
section.links p:after { content: '\269B'; display: block; }

.two_col_wrapper { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; }
.two_col { flex: 1 1 400px; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; }
.two_col_wrapper img { width:100%; max-height:300px; object-fit:cover; }
.two_col h3 { margin-top: 2em; }

.contact_extra { padding: 20px; border-radius: 1em; background-color: #efefef; width: 90%; max-width: 600px; margin: 3em auto; color: #333; }
.contact_extra h2 { margin-top: 3em; }

.find_me { display: flex; }
.find_me>a { display: inline-block; width: 50px; margin-right: 2em; }
.find_me>a svg { display: block; width: 50px; height: auto; }

footer .find_me { display: block; text-align: center; margin-top: 3em }
footer .find_me>a { display: inline-block; width: 50px; text-align: center; margin-top: 1em; }
footer .find_me>a svg { display: block; width: 50px; height: auto; margin: auto; }


.bold { font-weight: bold; }
.block { position: relative; display: block; float: none; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.font_larger { font-size: 1.2em; }
.link { color: #333; text-decoration: underline; }
.pointer:hover { cursor: pointer; }

.copyright { margin: 3em auto 1em auto; font-size: .9em; }

.hero {
	/*min-height: 100vh;*/
	background: #0d537d;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: white;
}

.about_me a,
.about_me_para a { color: #555; }

.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
	opacity: 0.3;
}

.hero-content {
	z-index: 1;
	max-width: 800px;
	padding: 2rem;
	animation: fadeInUp 1s ease-out;
}

.hero h1 {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: clamp(2.2rem, 4vw, 3.2rem);
	font-weight: 700;
	margin-bottom: 1rem;
	background: linear-gradient(45deg, #fff, #f0f0f0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero .subtitle {
	font-size: clamp(1.2rem, 3vw, 1.5rem);
	margin-bottom: 2rem;
	opacity: 0.9;
	color: #fff;
}


.about_me_para p { margin-bottom: 2rem; text-align: left; font-weight: normal; }
.about_me { width: 80%; margin: auto; }
.about_me p { margin-bottom: 2rem; text-align: center; }

.submit-btn,
.cta-button {
	display: inline-block;
	padding: 1rem 2rem;
	color: rgb(38, 93, 127);
	background: rgba(255, 255, 255, 0.8);
	border: 2px solid rgba(255, 255, 255, 0.3);
	text-decoration: none;
	border-radius: 50px;
	font-weight: 600;
	font-size: 1.1rem;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.back-to-top {
	position: fixed;
	bottom: 4em;
	right: 1em;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
    border: 2px solid rgb(38, 93, 127);
    color: rgb(38, 93, 127);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	font-size: 20px;
	line-height: 1;
}


#portfolio_button.cta-button {
	border: 2px solid rgb(38, 93, 127);
	color: rgb(38, 93, 127);
}

.back-to-top:hover,
#portfolio_button:hover {
	color: #333;
	border-color: #333;
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.submit-btn:hover,
.cta-button:hover {
	background: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	color: #fff;
}








.floating-elements {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.floating-element {
	position: absolute;
	opacity: 0.1;
	animation: float 6s ease-in-out infinite;
}

.floating-element:nth-child(1) {
	top: 20%;
	left: 10%;
	animation-delay: 0s;
}

.floating-element:nth-child(2) {
	top: 60%;
	right: 10%;
	animation-delay: 2s;
}

.floating-element:nth-child(3) {
	bottom: 20%;
	left: 20%;
	animation-delay: 4s;
}

.section {
	padding: 5rem 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.expertise {
	background: #f8fafc;
}

.expertise h2 {
	text-align: center;
	margin-bottom: 1.5em;
}

.skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.skill-card {
	background: white;
	padding: 2rem;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	border: 1px solid #e2e8f0;
}

.skill-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.skill-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #667eea, #764ba2);
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	color: white;
	font-size: 1.5rem;
	float: left;
	margin-right: 1em;
}

.skill-card h3 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: #2d3748;
}

.skill-card p { clear: both; }

.portfolio {
	background: white;
}

.portfolio h2 {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 3rem;
	color: #2d3748;
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 2rem;
}

.project-card {
	background: linear-gradient(135deg, #91c4e0 0%, #bbd8e796 100%);
	border-radius: 20px;
	padding: 2rem;
	color: #222;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.project-card>div { margin-top: 1rem; }
.project-card>div>span:first-of-type { margin-right: 0.5rem; }
.project-card>div>span { background: rgba(255,255,255,0.2); padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.9rem; }
.project-card p { margin-bottom: 1.5em; }

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

.project-card:hover {
	transform: scale(1.05);
}

.contact {
	background: #2d3748;
	color: white;
	text-align: center;
	margin-bottom: 4em;
}

.contact h2 {
	font-size: 2.5rem;
	margin-bottom: 2rem;
}

.contact-form {
	max-width: 600px;
	margin: 0 auto;
}

.form-group {
	margin-bottom: 1.5rem;
	text-align: left;
}

.form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.form-group input,
.form-group textarea {
	width: 100%;
	padding: 1rem;
	border: none;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	color: white;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
	color: rgba(255, 255, 255, 0.7);
}


span.formula { display: inline-block; margin-left: 1em; background-color: yellow; color: #222; padding: 5px; }

div.captcha label { display: inline-block; margin-left: 1em; }

.p_relative { position: relative; }       
.align_center { text-align: center; }
.align_right { text-align: right; }
.hide { display: none; }
.opacity8 { opacity: 0.8; }
.opacity9 { opacity: 0.9; }

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

@keyframes float {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
}

@media (max-width: 768px) {
	
	body { font-size: 1em; line-height: 1.6em; }
	h1, h2, h3, h4, h5, h6 { line-height: 1.8em; }
	section { padding: 0 10px 0 10px; }
	section.call-to-action { padding: 0; }
	.hero h1 { margin-top: 50px; }
	.hamburger { right: 20px; top: 20px; }
	#hamburger_menu { right: 60px; top: 60px; }
	.section { padding: 3rem 1rem; }
	.hero .about_me { width: 100%; }
	.hero .about_me p { white-space: normal; }
	
	.signature { display: flex; flex-direction: column-reverse; }
	
	article section img { display: block; float: none; margin: auto auto 2em auto; width: 96%; height: auto; }
	
	.skills-grid,
	.project-grid {
		grid-template-columns: 1fr;
	}
}

.scroll-indicator {
	text-align: center;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	animation: bounce 2s infinite;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	40% {
		transform: translateX(-50%) translateY(-10px);
	}
	60% {
		transform: translateX(-50%) translateY(-5px);
	}
}