/* Custom Tech-Oriented Styles for Wellington Gwavava's Website */

/* --- 1. Global & Body Styles --- */
:root {
	--primary-bg: #1a1a2e; /* Deep dark blue/grey */
	--secondary-bg: #22223b; /* Slightly lighter dark blue/grey */
	--text-light: #e0e0e0; /* Light text for dark backgrounds */
	--text-dark: #333; /* Dark text for light backgrounds */
	--accent-blue: #00bcd4; /* Electric blue accent */
	--accent-purple: #8a2be2; /* Deep purple accent */
	--border-color: #3e3e60; /* Subtle border for dark theme */
	--card-bg: #2a2a4a; /* Card background */
	--footer-bg: #121221; /* Even darker footer */

	/* New Fonts for Tech Vibe */
	--heading-font: "Montserrat", sans-serif;
	--body-font: "Open Sans", sans-serif;
}

body {
	background-color: var(--primary-bg);
	color: var(--text-light);
	font-family: var(--body-font);
	/* Ensure existing Bootstrap margins don't push content too much */
}

/* --- 2. Navigation Bar --- */
#mainNav {
	background-color: var(--secondary-bg) !important;
	border-bottom: 1px solid var(--border-color);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

#mainNav .navbar-brand {
	color: var(--accent-blue) !important;
	font-family: var(--heading-font);
	font-weight: 700;
}

#mainNav .navbar-nav .nav-item .nav-link {
	color: var(--text-light) !important;
	font-family: var(--body-font);
	font-weight: 400;
	transition: color 0.3s ease;
}

#mainNav .navbar-nav .nav-item .nav-link:hover {
	color: var(--accent-blue) !important;
}

/* --- 3. Page Headers (Mastheads) --- */
.masthead {
	background-color: var(--secondary-bg) !important; /* Fallback */
	background-size: cover;
	background-position: center;
	position: relative;
	padding: 100px 0; /* Adjust padding as needed */
	margin-bottom: 50px; /* Space after header */
}

.masthead .overlay {
	background: rgba(0, 0, 0, 0.6); /* Darker overlay for text readability */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.masthead .page-heading,
.masthead .site-heading {
	position: relative;
	z-index: 2;
	color: #fff;
	text-align: center;
}

.masthead .page-heading h1,
.masthead .site-heading h1 {
	font-family: var(--heading-font);
	font-size: 3.5em; /* Larger, more impactful */
	font-weight: 700;
	text-shadow: 0 0 15px rgba(0, 255, 255, 0.7); /* Subtle glow effect */
}

.masthead .page-heading .subheading,
.masthead .site-heading .subheading {
	font-family: var(--body-font);
	font-size: 1.3em;
	font-weight: 300;
	color: #b0b0b0;
	margin-top: 10px;
}

/* --- 4. Main Content Area --- */
.container.main-content {
	background-color: var(--secondary-bg); /* Dark background for content */
	border-radius: 8px; /* Slightly rounded corners */
	padding: 40px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* More prominent shadow */
}

/* Headings within content */
.container.main-content h1,
.container.main-content h2,
.container.main-content h3 {
	color: var(--accent-blue); /* Headings stand out */
	font-family: var(--heading-font);
	font-weight: 600;
	text-shadow: 0 0 5px rgba(0, 255, 255, 0.3); /* Subtle glow */
}

/* Text within content */
.container.main-content p,
.container.main-content li,
.container.main-content a {
	color: var(--text-light); /* Light text on dark background */
}

.container.main-content a {
	color: var(--accent-blue);
	text-decoration: none;
	transition: color 0.3s ease;
}

.container.main-content a:hover {
	color: var(--accent-purple);
	text-decoration: underline;
}

/* Horizontal Rule */
hr {
	border-top: 1px solid var(--border-color);
	margin: 3em 0;
}

/* --- 5. Custom Sections Styling --- */

/* For your "Who Am I?" first paragraph */
#who-am-i p:first-of-type {
	font-size: 1.15em; /* Slightly larger for emphasis */
	line-height: 1.8;
}

/* Skills Section - Grid Layout with Cards */
.skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-top: 30px;
}

.skill-card {
	background-color: var(--card-bg);
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
	border: 1px solid var(--border-color);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.skill-card h3 {
	color: var(--accent-purple); /* Sub-headings for skills */
	font-size: 1.25em;
	margin-top: 0;
	margin-bottom: 10px;
	text-shadow: none; /* Remove glow for smaller headings */
}

.skill-card ul {
	list-style: none;
	padding-left: 0;
}

.skill-card li {
	margin-bottom: 5px;
	color: var(--text-light);
}

/* Project Items */
.project-item {
	background-color: var(--card-bg);
	padding: 15px 20px;
	border-radius: 8px;
	margin-bottom: 15px;
	border: 1px solid var(--border-color);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.project-item h3 {
	color: var(--accent-blue);
	font-size: 1.3em;
	margin-bottom: 5px;
	text-shadow: none;
}
.project-item p {
	font-size: 0.95em;
}

/* Buttons */
.btn-tech {
	display: inline-block;
	background-color: var(--accent-blue);
	color: #fff !important; /* Ensure text is white */
	padding: 10px 25px;
	border-radius: 5px;
	text-decoration: none !important;
	font-weight: 600;
	transition: background-color 0.3s ease, transform 0.2s ease;
	border: none;
	cursor: pointer;
	font-family: var(--body-font);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.btn-tech:hover {
	background-color: var(--accent-purple);
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* --- 6. Footer --- */
footer {
	background-color: var(--footer-bg);
	color: #aaa;
	border-top: 1px solid var(--border-color);
	padding: 30px 0;
	font-size: 0.85em;
}

footer .list-inline-item .fa-stack .fa-circle {
	color: var(--secondary-bg) !important; /* Darker circle for social icons */
}

footer .list-inline-item a .fa-stack-1x {
	color: var(--accent-blue) !important; /* Accent color for icons */
	transition: color 0.3s ease;
}

footer .list-inline-item a:hover .fa-stack-1x {
	color: var(--accent-purple) !important;
}

/* --- 7. Responsive Adjustments --- */
@media (max-width: 768px) {
	.masthead .page-heading h1,
	.masthead .site-heading h1 {
		font-size: 2.5em;
	}
	.masthead .page-heading .subheading,
	.masthead .site-heading .subheading {
		font-size: 1em;
	}
	.container.main-content {
		padding: 20px;
	}
	.skills-grid {
		grid-template-columns: 1fr; /* Stack skills on smaller screens */
	}
	.header-intro p {
		font-size: 1em;
	}
}
/* Custom Tech-Oriented Styles for Wellington Gwavava's Website */

/* ... (previous custom-tech.css content remains the same) ... */

/* --- New: Full Screen Header for index.html --- */
.masthead.full-screen {
	height: 100vh; /* Make it take up full viewport height */
	min-height: 500px; /* Ensure it's not too small on tiny screens */
	display: flex; /* Use flexbox for vertical centering */
	align-items: center; /* Center content vertically */
	justify-content: center; /* Center content horizontally */
	position: relative;
	margin-bottom: 0; /* Remove margin to connect seamlessly with content */
}

.masthead.full-screen .page-heading {
	margin-top: 0; /* Adjust heading margin for vertical centering */
	margin-bottom: 0;
}

/* Scroll Down Arrow */
.scroll-down {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5; /* Ensure it's above the overlay */
	font-size: 2.5em;
	color: rgba(255, 255, 255, 0.7);
	animation: bounce 2s infinite; /* Simple bounce animation */
	text-decoration: none !important;
}

.scroll-down:hover {
	color: var(--accent-blue) !important;
}

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

/* --- New: Scroll To Top Button --- */
#scroll-to-top {
	display: none; /* Hidden by default */
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 100; /* High z-index to be on top */
	background-color: var(--accent-blue);
	color: white;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	text-align: center;
	line-height: 50px;
	font-size: 1.8em;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
	border: none; /* Remove border */
	text-decoration: none; /* Remove underline */
}

#scroll-to-top:hover {
	background-color: var(--accent-purple);
	transform: translateY(-3px);
}
#scroll-to-top i {
	color: white; /* Ensure icon is white */
}

/* Adjust main content container margin-top if header is full-screen */
.container.main-content {
	margin-top: 0; /* Remove top margin so it sits right below the full-screen header */
}

/* ... (rest of your custom-tech.css content) ... */