/* 
  Main Stylesheet for Portfolio Application
  ========================================
  
  Core styles for the portfolio website including global layout,
  background, typography, and component-specific styling.
*/

/* Global Layout & Background */
html, body {
  background: #000;                    /* Dark theme background */
  background-repeat: no-repeat;        /* Prevent background tiling */
  background-attachment: fixed;        /* Keep background fixed during scroll */
  min-height: 100vh;                   /* Ensure full viewport height */
  color: #fff;                         /* Default text color for dark theme */
}

/* Container Spacing - Prevents Footer Overlap */
.container, .main-content, main {
  padding-bottom: 120px;               /* Reduced bottom padding for fixed footer clearance */
  margin-bottom: 50px;                 /* Reduced margin for visual separation */
}

/* Card Grid Layout - Extra spacing for last row */
.row:last-child {
  margin-bottom: 80px;                 /* Reduced spacing for last row of cards */
}

/* Bootstrap Carousel Indicators - Custom Styling */
.carousel-indicators {
  list-style: none;                    /* Remove default list styling */
  margin: 0;                           /* Reset default margins */
  padding: 0;                          /* Reset default padding */
}

.carousel-indicators li {
  background-color: #fff;              /* White indicator dots */
  border-radius: 50%;                  /* Circular indicators */
  width: 12px;                         /* Fixed width for consistency */
  height: 12px;                        /* Fixed height for consistency */
  margin: 0 6px;                       /* Spacing between indicators */
  display: inline-block;               /* Horizontal layout */
  border: 1px solid #888;              /* Subtle border for definition */
  opacity: 0.7;                        /* Inactive state opacity */
  transition: opacity 0.2s;            /* Smooth hover/active transitions */
}

.carousel-indicators li.active {
  opacity: 1;                          /* Full opacity for active indicator */
  background-color: #fff;              /* Ensure active indicator is white */
}

/* Remove unwanted pseudo-elements from indicators */
.carousel-indicators li::marker, 
.carousel-indicators li::before, 
.carousel-indicators li::after {
  content: none !important;            /* Force removal of any pseudo-elements */
}