:root {
  --deep_black: #140f12;
  --forest_green: #4a5f4e;
  --translucent_forest_green: #2d5c2842;
  --lime_green_translucent: rgba(94, 255, 0, 0.1);
  --light_gray: #dcdede;
  --medium_light_gray: #aeafb2;
  --medium_gray: #a2a4a4;
  --dark_gray: #8f8f8f;
  --charcoal_gray: #646c64;
  --slate_gray: #545c5c;
  --black: #140f12;
  --highlight_blue: #3c74c0;
  --modern_dark_green: #2a3d2f; /* Dark, modern green */
  --modern_gray: #3b3b3b; /* Neutral gray */
  --modern_light_gray: #f2f2f2; /* Light gray for text */
}

body {
  background-color: var(--light_gray);
  margin: 0;
  padding: 0;
}

/* Grid Alignment */
.container-fluid .row {
  margin: 0 auto;
}

.col-md-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

a {
  color: var(--highlight_blue);
  font-family: 'Open Sans Condensed', sans-serif;
}


a:hover {
  color: var(--light_gray);
}

h3 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: var(--charcoal_gray);
  margin-bottom: 15px;
  text-align: center;
}

h4 {
  color: var(--highlight_blue);
  font-size: 22px;
  margin-bottom: 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  text-align: center;
}

a.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--black);
  color: #fff;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: bold;
  transition: background-color 0.3s ease;
  text-decoration: none;
  margin-top: 10px;
}

a.btn:hover {
  background-color: #555;
  color: #fff;
}

h1, h2, h3, h4, h5 {
  font-family: 'Oswald', sans-serif;
  color: var(--black);
}

p {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 16px;
  color: var(--slate_gray);
}

li {
  list-style-type: circle;
  color: var(--deep_black);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 16px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--deep_black);
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 45%;
  padding: 0;
}

#avatar-image {
  max-width: 350px;
  max-height: 250px;
  margin: 10px;
  border-radius: 50%;
  border: 2px solid var(--highlight_blue);
  box-shadow: 0 0 10px var(--translucent_forest_green), inset 0 0 5px var(--lime_green_translucent);
}

/* Styling for name and title under the photo */
.name-title {
  color: var(--soft_white);
  font-size: 2.2rem;
  font-weight: 600;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  text-align: center;
}

.role-title {
  color: var(--highlight_blue);
  font-size: 1.6rem;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  text-align: center;
  margin-top: 5px;
}

/* Container for the text section below the banner */
.text-section {
  padding: 40px 0;
  background-color: var(--modern_gray); /* Neutral gray background */
}


/* Text Overlay */
.banner-text-overlay {
  background-color: rgba(42, 61, 47, 0.3); /* Translucent dark green overlay */
  padding: 30px;
  border-radius: 15px; /* Rounded corners for a softer look */
  max-width: 80%; /* Restrict width for readability */
  margin: 0 auto; /* Center the box */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

/* Main Heading */
.banner-title {
  color: var(--modern_light_gray); /* Light gray text */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); /* Slightly darker shadow for contrast */
  font-size: 3rem; /* Larger font size */
  margin-bottom: 20px; /* Increase spacing */
  text-align: center; /* Center align */
  line-height: 1.2; /* Improved line height */
}

/* Subheading */
.banner-summary {
  font-size: 1.8rem; /* Larger font size */
  font-weight: 300;
  color: var(--modern_light_gray); /* Light gray subtext */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
  margin: 20px auto;
  text-align: center; /* Center align */
  line-height: 1.4; /* Improved line height */
}

.banner-subtext {
  color: var(--soft_white);
  font-size: 1.2rem;
  margin-top: 10px;
}

#nav-section {
  background-image: url(imgs/banner2.png);
  opacity: 0.9;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: var(--light_gray);
  border-bottom: 2px solid var(--forest_green);
  position: relative;
  z-index: 5;
}

.navbar-container {
  margin: 0 auto;
  padding: 10px 0;
}

.navbar {
  position: fixed;
  color: var(--medium_gray);
  top: 0;
  right:0;
  border-radius: 4px;
  width: 40%;
  z-index: 1000;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 5);
}

.nav-link-a {
  font-size: 1.6rem;
  color: var(--soft_white);
  padding: 15px 20px;
}

.navbar-container a:hover {
  color: var(--highlight_blue);
}

.portfolio-header {
  color: var(--modern_dark_green); /* Use the modern dark green color */
  font-size: 6rem; /* Larger font size */
  font-weight: bold; /* Make the text bolder */
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Add a subtle shadow for depth */
  display: inline-block; /* Fit the underline to the text width */
}

  /* Subheading */
.portfolio-subtext {
  font-size: 1.2rem; /* Keep the subtext font size */
  color: var(--slate_gray); /* Use a lighter gray for subtext */
  text-align: center;
  margin-bottom: 20px;
  max-width: 70%; /* Limit the width for better readability */
  margin: 0 auto; /* Center the subtext */
}

#port-section {
  padding: 40px 0;
}

#port-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 30px;
}

#port-summary h5 {
  color: var(--soft_white);
  margin-bottom: 30px;
  font-size: 1.2rem;
}

.row {
  margin: 0 -15px; /* Adjust for column padding */
}

.col-md-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 15px; /* Add space between columns */
  box-sizing: border-box; /* Ensure padding does not affect width */
}

/* Profile pane adjustments */
.profile-pane {
  background: linear-gradient(to bottom right, #f0f0f0, #d9d9d9);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 30px; /* Space below each profile pane */
  margin-left: auto; /* Align to the left */
  margin-right: auto; /* Align to the right */
  min-height: 620px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%; /* Ensure full width of the column */
}


/* Portfolio Project Panel Headings */
.profile-pane h3 {
  color: var(--modern_dark_green); /* Dark green text for the heading */
  padding-bottom: 10px;
  border-bottom: 2px solid var(--modern_dark_green); /* Subtle underline using the same dark green */
  text-align: center;
  margin-bottom: 20px; /* Ensure spacing below the heading */
  font-size: 1.8rem; /* Adjust font size for readability */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

.profile-pane p {
  color: var(--soft_white);
}

.profile-pane a {
  color: var(--highlight_blue);
  display: block;
  margin-top: 10px;
}

.profile-pane a:hover {
  text-decoration: underline;
}

figcaption {
  font-size: 14px;
  color: var(--charcoal_gray);
  margin-top: 10px;
  text-align: center;
}

/* Image Thumbnails */
#thumbnails {
  border-radius: 5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  height: auto;
}
a img {
  max-width: 100%; /* Ensure image fits within its container */
  max-height: 150px; /* Set a maximum height for images */
  width: auto; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  object-fit: contain; /* Ensure the whole image is visible without cropping */
}

#thumbnails:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Footer Icon Adjustments */
.brand-image {
  height: 40px;
  width: 40px;
  margin: 0 15px;
}

#trademark {
  display: flex;
  justify-content: center; /* Centers the content horizontally */
  align-items: center; /* Centers the content vertically */
  gap: 10px; /* Adds spacing between the elements */
  font-style: italic;
  font-size: 1rem;
  color: var(--forest_green);
  text-align: center;
  margin-top: 20px;
  padding: 10px 0; /* Adds some padding to ensure it has space */
}

.trademark-text {
  margin: 0 10px; /* Adds space around the text */
}

#contact-section {
  padding: 50px 0;
  background-image: linear-gradient(to top, var(--slate_gray), var(--dark_gray), var(--medium_gray), var(--medium_light_gray), var(--light_gray));
}

#contact-summary {
  font-size: 1.2rem;
  color: var(--light_gray);
  text-align: center;
  width: 60%;
  margin: 0 auto;
}

#contact-section h2 {
  font-size: 2.5rem;
  color: var(--soft_white);
  text-align: center;
}

/* Social and Contact Buttons Centering */
#icons-div {
  text-align: center;
}

.icon-buttons {
  display: inline-block;
  margin: 10px;
  color: var(--highlight_blue);
}

.icon-buttons:hover {
  color: var(--soft_white);
}

@-webkit-keyframes thumbFlash {
  from {
    border: 1px solid var(--light_gray);
    opacity: 0.4;
  }
  to {
    border: 3px solid var(--forest_green);
    opacity: 1.0;
    border-radius: 75%;
  }
}

@keyframes thumbFlash {
  from {
    border: 10% solid var(--light_gray);
    opacity: 0.4;
  }
  to {
    border: 50% solid var(--highlight_blue);
    opacity: 1.0;
    border-radius: 75%;
  }
}

@keyframes glow {
  0% {
    border-color: var(--slate_gray);
    box-shadow: 0 0 5px var(--highlight_blue), inset 0 0 1px var(--lime_green_translucent), 0 1px 0 var(--deep_black);
  }
  100% {
    border-color: var(--light_gray);
    box-shadow: 0 0 30px var(--highlight_blue), inset 0 0 4px var(--translucent_forest_green), 0 1px 0 var(--deep_black);
  }
}

@media screen and (max-width: 800px) {
  .nav-bar-sc {
    position: fixed;
    padding: 5px;
    border: 1px solid black;
    margin: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    top: 0;
    right: 0;
    z-index: 4;
    color: var(--light_gray);
    text-align: left;
  }
  .nav-bar-sc:hover {
    border: 1px solid var(--light_gray);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .profile-pane {
    margin-bottom: 30px; /* Maintain spacing on smaller screens */
  }
  #avatar-image {
    margin-top: 65px;
  }
  #port-summary h5 {
    width: 100%;
  }
  #skills-section {
    width: 100%;
  }
  #skills-description {
    width: 100%;
    padding: 10px;
  }
  div div p#contact-summary {
    width: 100%;
  }
  div div p#trademark {
    width: 100%;
  }
  #contact-section p, #port-summary {
    width: 100%;
  }
  #about-text {
    width: 100%;
    margin: 5px;
  }
  
  /* New Styles */
  .profile-pane {
    margin-bottom: 30px;
  }

  #thumbnails {
    margin-bottom: 20px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 20px;
  }

  /* Portfolio Section Heading */
  .portfolio-header {
    color: var(--modern_dark_green); /* Use the modern dark green color */
    font-size: 6rem; /* Larger font size */
    font-weight: bold; /* Make the text bolder */
    margin-bottom: 6rem;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Add a subtle shadow for depth */
    border-bottom: 3px solid var(--modern_dark_green); /* Add an underline */
    display: inline-block; /* Fit the underline to the text width */
  }

    /* Subheading */
  .portfolio-subtext {
    font-size: 1.2rem; /* Keep the subtext font size */
    color: var(--slate_gray); /* Use a lighter gray for subtext */
    text-align: center;
    margin-bottom: 20px;
    max-width: 70%; /* Limit the width for better readability */
    margin: 0 auto; /* Center the subtext */
  }
}