* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --yellow: #956E09;
    --blue: #2975A8;
    --teal: #025568;
    --sog_navy: #1E3A57;
    --unc-blue: #4B9CD3;

    --font-family-font: Montserrat;
    --font-size-lg: 1.25rem;
    --font-size-sm: 1rem;

    --black: #000000;
    --white: #FFFFFF;
}

.black-text {
    color: var(--Black, var(--black, #000));
}

.sog-navy-text {
    color: var(--sog_navy);
}   

.teal-text {
    color: var(--teal);
}

.blue-text {
    color: var(--blue);
}

.unc-blue-text {
    color: var(--unc-blue);
}

.gold-text {
    color: var(--yellow);
}

.white-text {
    color: var(--white, #FFF);
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    color: var(--Black, var(--black, #000));

    /* body */
    font-family: Montserrat;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6875rem;
}

.center-column {
    width: 90%;             
    max-width: 90rem;       
    /* margin: 0 auto; is added dynamically below to center this specific instance */
}

/* Centers the content inside the header and the main content wrapper */
.header-content, .main-content-area {
    margin-left: auto;
    margin-right: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

/* Styles for the main content area below the header */
.container.main-content-area {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligns main content to the top */
    min-height: calc(100vh - 80px); /* Adjust height for content below header (approx 80px tall) */
    background: var(--alabaster, #F9F9F9);
    padding-top: 2.5rem; 
}

.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.gap-125 { gap:1.25rem; }
.gap-15 { gap:1.5rem; }
.gap-2 { gap:2rem; }
.gap-25{ gap:2.5rem; }

.p-125 { padding:1.25rem; }
.p-15 { padding:1.5rem; }
.p-162 { padding:1.62rem; }
.p-25 { padding:2.5rem; }
.pl-25 { padding-left:2.5rem; }
.pr-25 { padding-right:2.5rem; }

.mb-075 { margin-bottom:0.75rem; }
.mb-125 { margin-bottom:1.25rem; }
.mb-2 { margin-bottom:2rem; }
.mb-25 { margin-bottom:2.5rem; }

.card1 {    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.card2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.card3 {
    padding:1.88rem;
}

.card4 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    gap: 2rem;
    margin-bottom: 2.5rem;
    padding: 2.5rem;
}

.white-bg {
    background: var(--white, #FFFFFF);
}

.rounded-corners {
    border-radius: 0.625rem; /* 10px rounded corners */
}

.vertical-center-container {
    height:5rem;
    width: 98.5vw;
    position: relative; 
    left: 50%;
    transform: translateX(-50%); 
    box-sizing: border-box; 

    display: flex;
    align-items: center;

    margin-bottom: 2.5rem;
}

/* The HR element style */
.centered-hr {
    border: none;
    border-top: 1px solid var(--light_gray, rgba(0, 0, 0, 0.10));
    margin: 0;
    width: 100%;
}

h3 {
    color: var(--teal);
    font-variant-numeric: lining-nums proportional-nums;

    /* H1 */
    font-family: "Roboto Slab";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.8125rem; /* 120.833% */
}

.golden-rule {
    border: none;
    background: var(--yellow);
    height: 0.0625rem;
    align-self:stretch;
}

.icon-and-text {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
}

.align-center {
    align-items: center;
}

.icon-and-text img {
    display: block;
}

.icon-and-text h4 {
    font-weight: 500;
}

.icon-and-text .bold {
    font-weight: 700;
}

.overview-bullets {
    display: flex;
    width: 90%;
    max-width: 63.375rem;
    padding: 0 2.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
}

@media screen and (max-width: 1024px) {
    .overview-bullets {
        padding: 0;
    }
}

.blue-border {
    border: 2px solid var(--blue);
}

.gold-border {
    border: 2px solid var(--yellow);
}

.two-col-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: row;
    gap: 2.5rem;
    width: 100%;

    align-items: start;
}

@media screen and (max-width: 1024px) {
    .two-col-container {
        grid-template-columns: 1fr;

        padding: 0;
    }
}

.timeline-item {
    padding: 1.88rem 0;
    border-bottom: 0.0625rem solid var(--sp-gray, #DBDADA);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.94rem;
}

.no-border {
    border: none;
    padding-bottom: 0;
}

.month-label {
    border-radius: 2097150rem;
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1.5625rem;
    padding: 0.1875rem 0.8125rem;
}

.captcha-container {
    display: inline-block;
}

.blue-border .month-label {
    border: 1px solid var(--blue);
    color: var(--blue);
    /* background: var(--blue); */
}

.gold-border .month-label {
    border: 1px solid var(--yellow);
    color: var(--yellow);
    /* background-color: var(--yellow); */
}

.call {
    border-radius: 0.375rem;
    border: 1px solid var(--light_gray, rgba(0, 0, 0, 0.10));

    display: flex;
    padding: 1.25rem 1rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.call-icon-and-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 0 0;
}

.contact-details { 
    border-radius: 0.625rem;
    border: 1px solid var(--light_gray, rgba(0, 0, 0, 0.10));

    display: flex;
    padding: 1.25rem;
    align-items: flex-start;
    gap: 1.25rem;
    flex: 1 0 0;
}

.contact-details a {
    color: var(--MPA-color-guide-Hyperlink-blue, #007FAE);
    font-weight: 500;
    text-decoration: none;
}

.contact-details span {
    font-weight: 500;
}