/*!
 * Start Bootstrap - Resume v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/resume)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-resume/blob/master/LICENSE)
 */
body {
  font-family: 'Open Sans', serif;
  padding-top: 54px;
  color: #868e96; }

@media (min-width: 992px) {
  body {
    padding-top: 0;
    padding-left: 17rem; } }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Saira Extra Condensed', serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #13294B; }

h1 {
  font-size: 6rem;
  line-height: 5.5rem; }

h2 {
  font-size: 3.5rem; }

.subheading {
  text-transform: uppercase;
  font-weight: 500;
  font-family: 'Saira Extra Condensed', serif;
  font-size: 1.35rem; }

.list-social-icons a {
  color: #868e96; }
  .list-social-icons a:hover {
    color: #FF5F05; }
  .list-social-icons a .fa-lg {
    font-size: 1.75rem; }

.list-icons {
  font-size: 3rem; }
  .list-icons .list-inline-item i:hover {
    color: #FF5F05; }

#sideNav .navbar-nav .nav-item .nav-link {
  font-weight: 600;
  text-transform: uppercase; }


@media (min-width: 992px) {
  #sideNav {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 17rem;
    height: 100vh; }
    #sideNav .navbar-brand {
      display: flex;
      margin: auto auto 0;
      padding: 0.5rem; }
      #sideNav .navbar-brand .img-profile {
        max-width: 10rem;
        max-height: 10rem;
        border: 0.5rem solid #FF5F05; }
    #sideNav .navbar-collapse {
      display: flex;
      align-items: flex-start;
      flex-grow: 0;
      width: 100%;
      margin-bottom: auto; }
      #sideNav .navbar-collapse .navbar-nav {
        flex-direction: column;
        width: 100%; }
        #sideNav .navbar-collapse .navbar-nav .nav-item {
          display: block; }
          #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
            display: block;}
          #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
            display: block; color: #C84113;} 
          #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link.active {
            display: block; color: #FF5F05;} }            
          

section.resume-section {
  border-bottom: 1px solid #dee2e6;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important; }
  section.resume-section .resume-item .resume-date {
    min-width: none; }

@media (min-width: 768px) {
  section.resume-section {
    min-height: 100vh; }
    section.resume-section .resume-item .resume-date {
      min-width: 18rem; } }

@media (min-width: 992px) {
  section.resume-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; } }

.bg-primary {
  background-color: #13294B !important; }

.text-primary {
  color: #FF5F05 !important; }

a {
  color: #FF5F05; }
  a:hover, a:focus, a:active {
    color: #C84113; }


/* Container for each project */
.project-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.6;
  height: 100%; /* Ensure equal height for all items  */
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Ensure two equal-width columns */
  gap: 20px; /* Space between items */
  justify-content: center; /* Center the grid */
}

/* Ensure both elements have the same height and are centered */
.projects-grid img, .projects-grid .carousel {
  height: 100%; /* Set height to match the grid cell */
  object-fit: cover; /* Ensure the image covers the area */
  aspect-ratio: 1.6; /* Make sure the image takes the full width */
}

/* Center the last item if there's an odd number of projects */
.projects-grid > .project-container:nth-last-child(1):nth-child(odd) {
  grid-column: span 2; /* Span across both columns */
  justify-self: center; /* Center the item */
  height: 50%;}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: 0.5s ease;
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s ease;
}

.project-text {
  color: black;
  font-size: 1.2rem;
  text-align: center;
  padding: 20px;
}

/* Hover effect */
.project-container:hover .project-image {
  filter: blur(2px);
}

.project-container:hover .project-overlay {
  opacity: 1;
}

/* Center grid items */
.container .row {
  justify-content: center;
}

.aspect-ratio-img {
  width: 100%; /* Set the width you want */
  height: auto; /* Adjust height proportionally */
  max-width: 100%; /* Optional: set a max-width if needed */
  object-fit: cover; /* Adjusts the image to cover the element */
}

/* Set a fixed height for the carousel based on the largest image */
#LRICarousel .carousel-inner {
  height: 600px; /* Adjust this height based on the tallest image */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Center images within the carousel */
#LRICarousel .carousel-item img {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  object-fit: contain; /* Ensures the entire image fits within the container */
  display: block;
}

/* Change the color of the carousel control arrows */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(100%);
}

.custom-icon {
  width: 45px;
  height: 45px;
  vertical-align: center; /* Aligns with the other icons */
  fill: currentColor;
}
  .custom-icon:hover {
  color: #FF5F05; /* Example hover color */
  }


.flex { display: flex; }
.mr { margin-right: 1em; 
color:#FF5F05}

.lang-switcher {
  color: inherit; /* Make PT the same color as the rest of the text */
  text-decoration: none;
}

.lang-switcher:hover {
  color: #C84113; /* Highlight PT when hovered */
  text-decoration: none; /* Ensure no underline on hover */
}

.lang-text {
  font-weight: 600; /* Adjust to match the rest of the navbar text */
  font-family: inherit; /* Inherit the same font family */
}