/* Define the custom color */
:root {
    --custom-dark-blue: #13274F;
  }
  
  #hero-section {
    /* Background Image Styling */
    background-image: url("vectorstock1.jpg"); /* Ensure this path is correct */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Keeps background fixed during scroll (if page was scrollable) */
    background-size: cover; /* Scales image to cover the entire area without distortion */
  
    /* Set default text color for contrast against background if needed */
    /* color: white; */ /* Uncomment if background is dark and text needs to be light */
  }
  
  /* Custom Link Styling */
  .custom-link-style {
    color: var(--custom-dark-blue); /* Use the custom color */
    font-size: 1.75rem; /* Approximation of 50px - Adjust as needed. Bootstrap fs-* classes cap out smaller */
    /* text-decoration: none; is default for .nav-link */
    /* Spacing is handled by Bootstrap margin utilities (me-4) in HTML */
  }
  
  .custom-link-style:hover {
      color: #0a1833; /* Slightly darker/different hover color */
  }
  
 /* Custom Heading Styling */
.custom-heading-style {
    color: var(--custom-dark-blue); /* Use the custom color */
    
    /* Responsive Font Size using clamp() */
    /* This provides fluid scaling between a minimum and maximum size */
    /* Format: clamp(MINIMUM_SIZE, PREFERRED_SCALING_SIZE, MAXIMUM_SIZE) */
    /* Adjust values as needed for your design */
    font-size: clamp(4rem, 5vw + 1rem, 7rem); /* Example values */
  
    /* Note: We keep the display-1 class in HTML for other responsive properties like line-height */
    /* The fw-bold class in HTML ensures the font weight remains bold */
  }
  
  /* Note: The original body overflow: hidden; is removed as it prevents scrolling and is generally bad practice.
     The flexbox layout vh-100 achieves the full-height feel for the initial view. */
  
  /* Note: The original .menu-container padding: 200px; and link margin-right: 100px; were very large.
     Bootstrap's padding (pt-4) and margin (me-4) utilities provide more conventional spacing.
     Adjust the font-size in .custom-link-style and spacing utilities (me-*) if larger values are strictly required. */
  
  /* Note: The original z-index: 10; is approximated with Bootstrap's z-1. Increase if necessary for specific overlap scenarios. */