.policy-grid {
  display: grid;
  grid-template-columns: 225px 1fr; /* Fixed side panel width and flexible main content */
  grid-template-areas: 
    "sidePanel mainPanel"; /* Define named grid areas for easier control */
  grid-auto-rows: auto;
  height: auto;
  gap: var(--margin-xs);
  margin-left: 4px;
  margin-top: 4px;
}

.policy-side-panel {
  grid-area: sidePanel; /* Assign this element to the 'sidePanel' area */
  position: sticky; 
  top:0;
  width: 230px;                /* Fixed width for the side panel */
  height: calc(100vh - 60px);  /* Full height minus header */
  overflow-y: hidden;          /* Hide vertical scrollbar by default */
  overflow-x: hidden;          /* Prevents horizontal scrolling */
  padding-right: 10px;         /* Padding for readability */
  box-sizing: border-box;
  transition: all 0.3s ease;   /* Smooth transition for all changes */
  border-radius: 10px;
  background: #F5F5F3;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.policy-main-panel {
    grid-area: mainPanel; /* Assign to named grid area 'mainPanel' */
	border-radius: 10px;
	height: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; /* Smooth transition for resizing */
    box-sizing: border-box; /* Ensure padding is included in width calculations */
	padding-bottom: 40px; /* Add extra space inside at the bottom */
	padding-left: 25px;
}

.policy-panel-sections{
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: flex-start; /* Vertically centers content within each section */
justify-content: flex-start;
margin-left:var(--margin-xs);
gap:var(--margin-xs);
margin-bottom:16px;
}

.policy-section-name { 
color: var(--pure-black); 
font-size: var(--font-size-h5); 
font-weight:var(--font-weight-semibold); 
font-family: var(--font-family-montserrat);
}

.policy-panel-sections a {
color: var(--pure-black-less-opacity); 
text-decoration: none;
width:90%;
font-size: var(--font-size-h6); 
font-weight:var(--font-weight-medium); 
font-family: var(--font-family-base);
margin-left:var(--margin-lg);
padding:4px;
}


.policy-panel-sections a:hover{
width: 90%;
text-decoration: none;
background-color: #f0f0f0;
border-radius: 8px;
}

.policy-side-panel-active-link {
width: 90%;
text-decoration: none;
background-color: var(--gmail-next-more-light-blue);
border-radius: 8px;
    /* Optionally, you can add more styling to match your hover state */
}

.top-margin {
margin-top:var(--margin-xxl);
}


.policy-side-panel:hover {
  overflow-y: auto;            /* Show vertical scrollbar on hover */
}

.gicon {
  width: 24px;            /* Set the size */
  height: 24px;
  fill: #007bff;          /* Set the color */
  vertical-align: middle; /* Align icon with text */    /* Add space between the icon and the text */
}

/* ✅ Large Desktops (1920px and above) */
@media (min-width: 1920px) {

  .policy-panel-sections a {
      font-size: var(--font-size-h5); /* Increase font size */
  }

  .policy-main-panel {
      padding-left: 35px; /* Increase left padding */
      padding-bottom: 60px; /* More space inside */
  }

}

/* ✅ Standard Laptops (1280px - 1536px) */
@media (max-width: 1280px) {
  .policy-grid {
      grid-template-columns: 200px 1fr; /* Reduce side panel width */
  }

  .policy-side-panel {
      width: 200px;
      height: calc(100vh - 70px);
  }

  .policy-panel-sections a {
      font-size: var(--font-size-h6); /* Reduce text size */
      margin-left: var(--margin-md); /* Adjust margin */
  }

  .policy-main-panel {
      padding-left: 20px; /* Reduce padding */
      padding-bottom: 50px;
  }
}

/* ✅ Small Laptops (1024px - 1280px) */
@media (max-width: 1024px) {
  .policy-grid {
      grid-template-columns: 180px 1fr; /* Narrower side panel */
      gap: var(--margin-xs);
  }

  .policy-side-panel {
      width: 180px;
      height: calc(100vh - 60px);
  }

  .policy-panel-sections a {
      font-size: calc(var(--font-size-h6) * 0.9); /* Slightly smaller */
      margin-left: var(--margin-sm);
  }

  .policy-main-panel {
      padding-left: 10px; /* Less padding */
      padding-bottom: 40px;
  }
}