.navbar-custom {
    box-shadow: 0 4px 6px rgba(154, 154, 154, 0.1);
    transition: background-color 0.3s ease;
}

/* Page-specific navbar colors */
.navbar-cv {
    background-color: #ff9428 !important; /* Orange */
}

.navbar-projects {
    background-color: #2ec410 !important; /* Green */
}

.navbar-services {
    background-color: #00ddff !important; /* Light Blue */
}

.navbar-blog {
    background-color: #9932CC !important; /* Purple */
}

.navbar-certificates {
    background-color: #808080 !important; /* Grey */
}

/* Default color for other pages */
.navbar-custom:not(.navbar-cv):not(.navbar-projects):not(.navbar-services):not(.navbar-blog):not(.navbar-certificates) {
    background-color: #ff9428;
}

.navbar-custom .nav-link {
  color: #000000; /* Change this to your desired text color */
}
.navbar-custom .nav-link:hover {
  color: #ffffff; /* Optional: Change color on hover */
}

.spacer {
      height: 30px; /* Reduced from 50px to 30px */
    }

.hspacer {
  margin-left: 10px;
  margin-right: 20px;
}

.current-navbar-page {
  background-color: #ffffff !important; /* Change this to your desired text color */
  border-radius: 8px;
}

.current-navbar-page .nav-link {
  color: #000000 !important;
}

.current-navbar-page .nav-link i {
  color: #ff8000 !important;
}

.cv-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: calc(100vh - 100px); /* Reduced from 200px to 100px */
  width: 100%;
  position: relative;
  padding-left: 5%;
  padding-right: 5%;
}

.home-background {
  background-image: url('img/background2.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
  min-height: 100vh; /* Changed from height to min-height */
  margin: 0;
  padding: 0;
}

/* Improved overlay effect that stays fixed during scrolling */
.home-background::before {
  content: "";
  position: fixed; /* Changed from absolute to fixed */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

/* Make sure content stays on top of the overlay */
.content-container {
  position: relative;
  z-index: 1;
  min-height: 100vh; /* Ensure content container is at least full viewport height */
}

/* Make sure all content is contained within and properly layered */
html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

/* Base font size adjustments for better mobile readability */
html {
  font-size: 16px; /* Base font size */
}

/* Responsive font scaling for better mobile experience */
@media (max-width: 576px) {
  html {
    font-size: 17px; /* Reduced from 18px for better balance */
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  html {
    font-size: 17px; /* Consistent with mobile for better readability */
  }
}

@media (min-width: 769px) {
  html {
    font-size: 18px; /* Slightly increased for better desktop readability */
  }
}

/* Enhanced desktop font scaling for large screens */
@media (min-width: 1200px) {
  html {
    font-size: 18px; /* Optimal base size for large screens */
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 19px; /* Better readability for extra large screens */
  }
}

@media (min-width: 1920px) {
  html {
    font-size: 20px; /* Optimal for ultra-wide monitors */
  }
}

/* Ensure minimum font sizes for better readability */
body {
  font-size: 1rem;
  min-height: 100vh;
}

p, li, span, div {
  font-size: inherit;
  line-height: 1.6;
}

/* Enhanced font sizes for better mobile experience */
@media (max-width: 768px) {
  .navbar-brand .h3 {
    font-size: 1.4rem !important;
  }
  
  .nav-link {
    font-size: 1.1rem !important;
  }
}

/* Desktop-specific navbar font size reductions for PC users */
@media (min-width: 992px) {
  .nav-link {
    font-size: 0.95rem !important;
  }
  
  .navbar-brand .h3 {
    font-size: 1.3rem !important;
  }
}

/* Large desktop screens - further navbar font optimization */
@media (min-width: 1200px) {
  .nav-link {
    font-size: 0.9rem !important;
  }
  
  .navbar-brand .h3 {
    font-size: 1.25rem !important;
  }
}

/* Ultra-wide screens - minimum navbar font sizes for readability */
@media (min-width: 1400px) {
  .nav-link {
    font-size: 0.95rem !important;
  }
  
  .navbar-brand .h3 {
    font-size: 1.3rem !important;
  }
}