/* style.css */
body {
    padding: 0;
    margin: 0;
}

.parent {
    display: grid;
    height: 100vh;
    grid-template-rows: 250px 90px 90px 1fr 150px;

      /* 
       Lowering to 18% keeps the sidebar under 230px 
       until the screen is quite wide. 
    */
    grid-template-columns: 1fr clamp(200px, 18%, 350px); 
    
    gap: 0px;
}
    
.header {
     grid-column: span 2 / span 2;
    
}

.nav {
    grid-column: span 2 / span 2;
    grid-row-start: 2;
    background: #145832;
    background: linear-gradient(180deg, rgba(20, 88, 50, 1) 0%, rgba(36, 219, 166, 1) 50%, rgba(247, 247, 247, 1) 100%);
    
    /* ADD THESE TWO LINES */
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagetitle {
    grid-column: span 2 / span 2;
    grid-row-start: 3;
    display: flex;
    background: linear-gradient(90deg, rgba(247, 247, 247, 1) 0%, rgba(242, 220, 175, 1) 100%) !important;
    justify-content: center;
    align-items: center;
}

.main {
    grid-row-start: 4;
    background: linear-gradient(90deg, rgba(247, 247, 247, 1) 0%, rgba(242, 220, 175, 1) 100%) !important;
    background-repeat: no-repeat;
    
    padding-left:20px;
    padding-right:20px;
    
}

.sidebar_right {
   grid-row-start: 4;
    grid-column-start: 2;
    background-color: #5c5;
    padding: 15px 15px;
    
    /* REMOVE display: grid and row-gap */
    /* ADD these lines instead: */
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    gap: 15px;              /* Forces the gap between every child element */

}

.footer {
    grid-column: span 2 / span 2;
    background-color: #0BDA51; /* ====== Required for Member Section ====== */
    
}