@charset "UTF-8";
/* CSS Document */

/* Colors
background: #23395d; drk blue    
#E1E2E4 blue grey
*/

/* Copyright at bottom*/
div#copyright{
  margin-top: 50px;
  margin-left: 0px;
}

/*Moble Menu Color */

div.project .detail-content {
  background: #E1E2E4;    
}

.main-menu {
  font-family: 'Roboto', sans-serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Roboto', sans-serif;
}

h2, .h2 {
  font-size: 22px !important;
}

.affix {
  position: fixed;
  top: 0;
  z-index: 1030;
}

/* Filter */
.btn {
  border: none;
  border-radius: 0px;
  margin-bottom: 10px;
  padding: 6px 6px;
}

/* Filter Buttons */
.filter-button {
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  color: #c1764e;                 /* tan text */
  background-color: transparent;  /* no background by default */
  border: 1px solid #c1764e;      /* subtle outline for consistent width */
  width: 100px;                   /* make all buttons same width */
  margin: 5px;
  transition: all 0.2s ease-in-out;
}

/* Hover effect: darken text slightly */
.filter-button:hover {
  color: #a65d35 !important;      /* darker tan */
  background-color: #fdf7f4;      /* very light tan background (optional) */
  border-color: #a65d35;
}

/* Active or clicked (selected) state */
.filter-button.active,
.filter-button:active {
  background-color: #c1764e !important; /* tan background */
  color: #fff !important;               /* white text */
  border-color: #c1764e !important;
}

.port-image
{
  width: 100%;
}

/* Resume */

a#resume-btn.btn.btn-default.btn-block {
  color: #fff !important;
  background-color: #656970 !important;
}

a#resume-btn.btn.btn-default.btn-block:hover {
  background-color: #fff !important;
  color: #23395d !important;
}

.project .title {
  margin-bottom: 10px;
}

/* Contact */
.form-control {
  border-radius: 0px;
  border: 1px solid #ababab;
  color: #CCCCCC !important;
}

.control-group.error .form-control {
  border-bottom-color: #c0392b;
}

.vertical-align {
  display: flex;
  align-items: center;
}

.thumbnail {
  transition: filter 0.3s ease;
}

.thumbnail:hover {
  filter: brightness(70%);
}

.btn.active {
  background-color: #6c757d;
  color: white;
}

.filtered-out {
  display: none !important;
}

.navbar-toggler {
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-nav .nav-link {
  color: #333;
  font-weight: 500;
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
  color: #333;
  font-weight: bold;
}

.navbar-nav .nav-link.active {
  color: #fff !important;
  background-color: #c1764e !important;
  border-radius: 0.25rem;
}

.navbar .fw-bold {
  color: #333;
}