/* Additional Styling */

.navbar {
    padding: 1rem; /* Maintain consistent padding */
    font-size: 1.2rem; /* Larger text */
}

/* Align the navigation items for larger screens */
.navbar-nav {
    margin-left: auto; /* Automatically align items to the right on larger screens */
}

/* Adjustments for mobile view */
@media (max-width: 991.98px) {
    .navbar-nav {
        margin-left: 0; /* Remove margin on smaller screens */
        text-align: center; /* Center items on smaller screens */
    }

    .nav-item {
        margin-left: 0; /* Reset margin between items */
        margin-bottom: 0.5rem; /* Space out items vertically */
    }
}

/* Optional: Larger brand/logo */
.navbar-brand {
    font-size: 1.5rem;
}

/* Style adjustments for nav links */
.nav-link {
    padding: 0.5rem 1rem;
}

/* Optional: Style for active link */
.nav-link.active {
    font-weight: bold;
    color: #ffc107;
}

body {
    font-family: Arial, sans-serif;
    padding-top: 56px; /* Height of the navbar to avoid content being hidden behind it */
}

#home {
  background-color: #f8f9fa; /* Light background color for contrast */
  padding: 2rem 0; /* Adjust padding as needed */
  padding-top: 100px; /* Adjust this value to control the space */
}

.home-section {
  padding-top: 100px;
  padding-bottom: 100px; /* Adjust this value to control the space */
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  overflow: hidden;
  background: #000; /* Background color behind the video */
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the container */
}

.project-image {
  width: 100%; /* Makes the image take the full width of its container */
  height: 200px; /* Set a fixed height for all project images */
  object-fit: cover; /* Ensures the image covers the area while maintaining aspect ratio */
  border-radius: 5px; /* Optional: for rounded corners */
}