/* Smooth scrolling in anchor links */
html {
    scroll-behavior: smooth;
    font-size: 18px;
}

@media (max-width: 991.98px) {
    /* Font size larger on mobile */
    html {
        font-size: 20px;
    }

    .card-body {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Smaller bullet point left padding */
ol, ul {
    padding-left: 1.1rem;
}

/* Adding some space for list items like the original design */
.panel-body ul li { /* Targeting ul li within panel-body */
    margin-bottom: 10px;
}

/* Bootstrap 5 specific panel styling adjustments */
.panel-primary { /* Customizing Bootstrap 5 card for panel-primary look */
    border: 1px solid #4682B4; /* Adjust border color to match original panel-primary */
}

.panel-heading { /* Customizing Bootstrap 5 card-header for panel-heading look */
    background-color:rgb(73, 145, 240); /* Light gray background */
    border-bottom: 1px solid #4682B4; /* Blue border at the bottom */
    padding: 10px 15px; /* Consistent padding */
    font-weight: bold; /* Bold text */
    color: white;
    border-top-left-radius: calc(0.375rem - 1px); /* Match Bootstrap 5 card border-radius */
    border-top-right-radius: calc(0.375rem - 1px); /* Match Bootstrap 5 card border-radius */
}

.panel-title { /* Customizing Bootstrap 5 card-title for panel-title look */
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.2em; /* Equivalent to 16px, or adjust to desired size */
    color: inherit;
}

.card-body {
    color: black;
}

.major-row {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Center card titles with large text */
.major-title {
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    font-size: 1.7rem;
    text-wrap: balance;
}

/* Dark blue text for subheadings */
.sub-header {
    color: DarkSlateBlue;
    font-weight:bold;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* 900px width for content */
.limit-width {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

A:link {
  text-decoration: none;
}

A:hover {
  text-decoration: underline;
  color: blue;
}

A:visited {
  text-decoration: none;
}

A:active {
  text-decoration: none;
}