/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 12 2026 | 01:25:24 */



      /* ===============================
   Global Styles and Variables
================================== */
:root {
  --bg-dark: #252D33;
  --nav-bg: #163948;
  --tile-bg: #163948;
  --heading-color: #C9BB8B;
  --text-color: #ACB99F;
  --accent-teal: #637F7B;
  --hover-light: #ACB99F;
  --font-body: 'Roboto', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-nav: 'Bitter', serif;
}

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

body {
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  color: var(--text-color);
  line-height: 1.6;
	text-decoration: none;
}

/* ===============================
   Navigation Bar
================================== */
.navbar {
  position: sticky;
  top: 0;
  background-color: var(--nav-bg);
  z-index: 1000;
  padding: 0.75rem 0;
}

.nav-links {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 2rem;
  font-family: var(--font-nav);
}

.nav-links a {
  text-decoration: none;
  color: var(--heading-color);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.nav-links a:hover {
  background-color: var(--accent-teal);
}

/* ===============================
   Hero Section
================================== */
/* Dark overlay on the video */
#hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}


.hero-overlay {
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--heading-color);
  padding: 1rem 2rem;
  background-color: rgba(22, 57, 72, 0.95);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 2;
}





/* Darken the video with a full overlay */
#hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.40); /* 45% black overlay */
  z-index: 1; /* Between video (z-index 0) and overlay (z-index 2) */
}

.hero-overlay h1 {
  font-family: var(--font-heading);
  font-size: 4rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.hero-overlay p {
  font-size: 1.5rem;
}

.fade-bottom {
  position: absolute;
  bottom: 0;
  height: 150px;
  width: 100%;
  background: linear-gradient(to top, var(--bg-dark), transparent);
  z-index: 1;
}

/* ===============================
   Tile Structure
================================== */
.tiles {
  padding: 3rem 2rem;
}

.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--tile-bg);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  transition: transform 0.3s ease;
}


.tile:hover {
  transform: scale(1.02);
}

.tile h2 {
  font-family: var(--font-heading);
  color: var(--heading-color);
  margin-bottom: 1rem;
  font-weight: bold; /* Add this line */
}
.tile h1 {
  font-weight: bold; /* Add this line */
}

.tile p {
  color: var(--text-color);
}

.tile-spacer {
  height: 2rem;
}

/* Row Layout for paired tiles */
.tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.tile-row .tile {
  flex: 1 1 48%;
}


/* ===============================
   Buttons
================================== */
.tile-button {
  align-self: flex-start;       /* bottom left inside flex column */
  background-color: var(--accent-teal);
  color: #3a3a3a;               /* consistent dark gray */
  font-weight: bold;
  padding: 0.5rem 1.25rem;      /* fixed padding for consistent size */
  border-radius: 10px;
  margin-top: 1rem;
  text-decoration: none;        /* no underline */
  min-width: 120px;             /* consistent button width */
  text-align: center;
  transition: background-color 0.3s ease;
}

.tile-button:hover {
  background-color: var(--hover-light);
  color: #3a3a3a;              /* keep dark gray on hover */
  text-decoration: none;
}


/* ===============================
   About Me
================================== */
.about-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.about-image {
  width: 200px;
  border-radius: 12px;
  flex-shrink: 0;
}

.about-text {
  flex: 1;
  min-width: 250px;
}

p.about-me-text1 {
  text-indent: 40px;
}

p.about-me-text2 {
  text-indent: 40px;
}


/* ===============================
   Project Vault
================================== */
.project-vault-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
}

.project-photo-grid img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-photo-grid a:hover img {
  transform: scale(1.03);
}

/* Project Vault specific styling */
.project-vault-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
}

.project-photo-grid img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-photo-grid a:hover img {
  transform: scale(1.03);
}




/* ===============================
   Blog Preview
================================== */
.blog-preview .post {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  transition: background-color 0.3s ease;
	text-decoration: none;
}

.blog-preview .post:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.blog-preview h3 {
  color: var(--heading-color);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
	text-decoration: none;
}

.blog-preview .meta {
  font-size: 0.875rem;
  color: var(--text-color);
}
.blog-preview a {
  color: var(--text-color);
  text-decoration: none;
}

.blog-preview a:hover {
  color: var(--heading-color); /* Optional: use accent color on hover */
  text-decoration: none;
}

/* ===============================
   Gallery
================================== */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  max-width: 700px; /* Optional: limit width */
  justify-content: flex-start; /* left align */
}

.gallery-grid img {
  width: calc(15% - 0.5rem); /* Smaller than before */
  max-width: 100px;          /* Cap maximum size */
  border-radius: 6px;
  object-fit: cover;
}

/* ===============================
   Responsive Design
================================== */

@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid img {
    width: calc(33.33% - 0.5rem);
  }
	
}

.home-footer {
		text-align: center; 
		padding: 2rem 0; 
		color: var(--text-color); 
		font-size: 0.9rem;"
	}

.tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tile-link .post {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1rem;
  transition: background-color 0.3s ease;
}

.tile-link:hover .post {
  background-color: rgba(255, 255, 255, 0.1);
}

.tile-link:hover h3 {
  color: var(--heading-color);
}


.tile-button,
.tile-button:link,
.tile-button:visited,
.tile-button:hover,
.tile-button:focus,
.tile-button:active {
  color: #3a3a3a !important;       /* force dark gray font color */
  text-decoration: none !important; /* remove underline */
  outline: none;                   /* optional: remove focus outline */
  border: none;                   /* if any border color is applied */
  background-color: var(--accent-teal);
}

.tile-button:hover,
.tile-button:focus,
.tile-button:active {
  background-color: var(--hover-light);
  color: #3a3a3a !important;
  text-decoration: none !important;
}