.logo {
    color:                              #E0E0E0;
    font-size:                          26px;
    padding:                            10px;      
}

h2, h3, h4, h5 {
    color:                              #4C6A9A;
    margin-top:                         10px;
    margin-bottom:                      6px;
}

.card {
    color:                             #F0F0F0;
    font-family:                       "Nunito Sans", sans-serif;
    font-size:                         26px;
    padding:                           10px;
    text-align:                        center;
    width:                             100%;
}

.card img {
    width:                              100%;        /* Makes the placeholder fill the grid column */
    min-height:                         150px;  /* Forces a visible height */
    background:                         #222;   /* Gives it a dark grey box shape on your black page */
    border: 1px                         dashed #444; 
}

.card h3 {
    color:                             #C28840;
}

.card h4 {
    color:                             #4C6A9A;
    font-size:                         20px;
}

.card h5 {
    color:                             #A0A0A0;
}

.card ul li {
    color:                             #A0A0A0;
}

.footer {
    margin-top:                         10px;
    max-width:                          1440px;
    margin:                             0 auto;
    padding:                            30px;
    background-color:                   #111;
    color:                              #ccc;
    display:                            flex;
    justify-content:                    space-between;
    flex-wrap:                          wrap;
    font-family:                        'Michroma', sans-serif;
    grid-area:                          footer;
    width:                              100%;
}

.footer_section {
    min-width: 180px;
    margin-bottom: 20px;
}

.footer_section a {
    color: #ccc;
    text-decoration: none;
}

.footer_section a:hover {
    color: #fff;
}

.gradient-line {
  grid-area:                            line;   /* Locks it strictly to the second row slot */
  width:                                100%;                 
  max-width:                            1500px;           
  margin:                               10px auto; /* Centered, with small top/bottom breathing room */
  height:                               1px;                 
  background:                           linear-gradient(to right, #0072ff, #ffffff); 
  border:                               none;                
}

.nav_bar {
    background-color:                   #808080;
    color:                              #E0E0E0;
    display:                            flex;
    font-family:                        "Nunito Sans", sans-serif;
    font-size:                          22px;
    height:                             40px;
    justify-content:                    space-between;
    margin:                             5px 5px 10px 5px;    
    padding:                            5px 5px 10px 5px;
    width:                              100%;
}

.nav_bar ul {
    color:                              #000000;
    display:                            flex;
    gap:                                10px;
    height:                             20px;
    list-style:                         none;
    margin:                             0px;
    padding:                            10px 10px 10px 10px;
}

.nav_bar ul li a {
    color:                              #0F0F0F;
    margin:                             0;
    padding:                            10px 10px 10px 10px;
    text-decoration:                    none;
    transition:                         all 0.3s ease;
}

.nav_bar ul li a:visited {
    color:                              #0F0F0F;
}

.nav_bar ul li a:hover {
    background-color:                   #808080;
    border-radius:                      8px;
    color:                              #E0E0E0; /* or your preferred hover color */
    height:                             20px;
}

.nav_bar ul li a:active {
    color:                              #0F0F0F;
}

.page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;

    /* ✅ Fix scrollbar behavior */
    /* height: 100%;              /* or min-height: 100vh; */
    min-height:                         auto; /* 100vh; */
    overflow-y: auto;          /* only show when needed */

    grid-template-areas:
        "header header header"
        "line   line   line"
        "row1   row1   row1"
        "row2   row2   row2"
        "row3   row3   row3"
        "row4   row4   row4"
        "footer footer footer";
    row-gap: 0;
}

/*-------------------------------------------------------------------------------------*/

.row-container {
  grid-column:                          1 / -1; /* Spans across all 3 columns */
  grid-row:                             1;         /* Forces the logo to be the very first row */
  display:                              flex;
  flex-direction:                       row;
  align-items:                          center;
  gap:                                  20px;
}

.text-body {
    color:                              #B0B0B0;
    display:                            inline-block;
    font-family:                        "Nunito Sans", sans-serif;
    font-size:                          24px;    
    grid-column:                        1 / -1;
    max-width:                          1500px;
    overflow-y:                         scroll;
    height:                             80vh;
    scrollbar-gutter:                   stable;
    padding-right:                      5px;
}

.text-block h2 {
    color:                              #4C6A9A;
}

.text-body ol li h2 {
    color:                              #4C6A9A;
    font-family:                        "Nunito Sans", sans-serif;
    font-size:                          24px;     
}

.text-body ol li h3 {
    color:                              #806C00;
    font-size:                          24px;
}

.text-body ol li::marker {
    font-size:                          24px;      
    grid-column:                        1 / -1;    
}

.text-block {
    color:                              #B0B0B0;
    display:                            flex;
    flex-direction:                     column;                 /* Keeps paragraphs stacking vertically */
    font-family:                        "Nunito Sans", sans-serif;
    font-size:                          20px;
    justify-content:                    center;
    padding:                            10px;
} 

.text-block h2 a {
    color:                             #4C6A9A;
    font-size:                         26px;
    margin-bottom:                     8px;
}

.text-block p {
    margin-top:                        0px;
}

/* --- Row 1 Elements --- */

.img-left {
  grid-area: row1;
  grid-column: 1; /* Inside row1, stay in col 1 */
  justify-self: start; 
}

.text-right {
    background-color:                   #202020;
  grid-area: row1;
  grid-column: 2 / 4; /* Inside row1, span col 2 & 3 */
}

/* --- Row 2 Elements --- */

.text-left {
    background-color:                   #242424;     
    grid-area:                          row2;
    grid-column:                        1 / 3; /* Inside row2, span col 1 & 2 */
}

.text-left h2 {
    color:                              #4C6A9A;
}

.img-right {
  grid-area: row2;
  grid-column: 3; /* Inside row2, stay in col 3 */
  justify-self: end;
}

.img-right img {
    float:                           right;
}

/* --- Row 3 Elements --- */
.row3-img {
  grid-area: row3;
  grid-column: 1;
  justify-self: start;
}

.row3-text {
  grid-area: row3;
  grid-column: 2 / 4;
}

/* --- Row 4 Elements --- */

.row4-text {
  grid-area: row4;
  grid-column: 1 / 3;
}

.row4-img {
  grid-area: row4;
  grid-column: 3;
  justify-self: end;
}