/* * {
     border:1px solid red ;
     padding:10px;
     margin:5px;
     box-sizing: border-box;
 }
  */

 * {
     box-sizing: border-box;
 }
 
  :root {
     --bg:rgb(213, 224, 236);
     --navbar:rgb(32,35,38);
     --button-text:rgb(235,235,230);
     --accent:rgb(200,140,90);
     --hover:rgb(120,165,255);
     --content-bg:rgb(255, 255, 255);
     --text-muted:rgb(91, 91, 91);
     --dark-grey:rgb(69, 69, 69);
     --light-grey:rgb(124, 124, 124);

     --light-blue:rgb(120,165,255);


       /* ===== Content Box Colors ===== */

      /* Blue */
      --box-blue-bg: rgb(230, 242, 255);
      --box-blue-border: rgb(40, 95, 170);
      --box-blue-title: rgb(25, 70, 140);

      /* Orange */
      --box-orange-bg: rgb(255, 244, 230);
      --box-orange-border: rgb(180, 95, 25);
      --box-orange-title: rgb(150, 70, 15);

      /* Grey */
      --box-grey-bg: rgb(245, 245, 245);
      --box-grey-border: rgb(100, 100, 100);
      --box-grey-title: rgb(70, 70, 70);
 }
 /* color theme options */
 
 /* current      --bg:rgb(213, 224, 236);
     --navbar:rgb(32,35,38);
     --text:rgb(235,235,230);
     --accent:rgb(200,140,90);
     --hover:rgb(120,165,255);
 */ /* 1      --bg:rgb(18,18,20);
     --navbar:rgb(26,26,30);
     --text:rgb(230,230,235);
     --accent:rgb(90,140,,255);
     --hover: rgb(120,165,255);
     muted text: rgb(150,150,160);
 */ /* 2 -- like this one! orangce     --bg:rgb(22,24,26);
     --navbar:rgb(32,35,38);
     --text:rgb(235,235,230);
     --accent:rgb(200,140,90);
     --hover:rgb(120,165,255);
         muted text: rgb(160,160,150) */ /* 3 -- mint     --bg:rgb(14,18,24);
     --navbar:rgb(22,28,36);
     --text:rgb(225,230,235);
     --accent:rgb(90,220,180);
     --hover:rgb(120,165,255);
         muted text: rgb(140,150,165) */ /* #localstorage.getItem("Theme") */ /* .light {
     --bg:rgb(248,249,251);
     --navbar:rgb(235,237,240);
     --text:rgb(28,30,34);
     --accent:rgb(70,110,220);
     --hover:rgb(90,130,240);
 }
 */ 
 body,html {
  border: none;
  padding: 0;
  margin:0;
  padding:0;
  background-color: var(--bg);
 }

 html {
  font-size: 16px;
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  /* scrollbar-gutter: stable; // not supported for very old browsers */
}

body {
  font-size: clamp(16px, 1.1vw, 18px);
  counter-reset: section;
  /* display: flex;
  flex-direction: column; */
  background-image: url("/assets/images/background.png");
  background-size:auto;
  background-position: center; 
  /* background-repeat: no-repeat;  */

  min-height: 100vh;
}


 .custom-button-holder {
     display: flex;
     /* display: inline-block;
 */     /* width: 100%;
 */     margin:5px;
 }
 custom-button {
     display: block;
     float: right;
     flex:1;
 }

 div.top_nav_section {
     position: sticky;
     top:0;
     /* display: flex;*/
    background-color: var(--navbar);
    padding:0;
    margin:0;
    /* border:none; */
    display:block;

 }

 /* =========================
   HEADER STRUCTURE
========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ===== Brand Bar ===== */
/* check flex: 1 1 0% */
/* grow shrink prefer */

.brand-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--navbar);
  padding: 0.6rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.brand-left {
  /* remove link styles */
  text-decoration: none;
  color: inherit;

  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  min-width: 240px;
  width:40%;
}

.brand-logo {
  height: 40px;
}

.brand-name {
  color: var(--button-text);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 1px;
}

/* ===== Search ===== */

.brand-center {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

/* Outer wrapper controls visual state */
.search-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 220px;              /* compact default */
  max-width: 420px;          /* desktop cap */
  min-width: 160px;
  width: 100%;

  padding: 8px 14px;
  border-radius: 30px;

  background-color: rgba(255, 255, 255, 0.12); /* muted */
  border: 1px solid rgba(255, 255, 255, 0.15);

  transition: 
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Focus state (when input is active) */
/* .search-wrapper:focus-within {
  background-color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
} */

/* Expand on focus */
.search-wrapper:focus-within {
  width: 380px;
  background-color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* Icon */
.search-icon {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.25s ease;
}

/* Icon becomes darker on focus */
.search-wrapper:focus-within .search-icon {
  color: #555;
}

/* Input */
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.95rem;
  color: white;
}

/* Input text changes on focus */
.search-wrapper:focus-within .search-input {
  color: #222;
}

/* Placeholder styling */
.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-wrapper:focus-within .search-input::placeholder {
  color: #888;
}


/* ===== Donate Button ===== */
.brand-right {
  white-space: nowrap;
}

.donate-button {
  background-color: var(--accent);
  color: white;
  padding: 8px 14px;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.donate-button:hover {
  background-color: var(--hover);
  transform: translateY(-2px);
}

/* ===== Main Nav Bar ===== */

 header {
     /* position:sticky; */
     top:0;
    padding:0;
    margin:0;
    z-index: 1;
    /* border:none; */
 }

 my-navbar {
    display: flex;
    padding:0;
    margin:0;
    width:100%;
    justify-content: center;
    /* border:none; */
    /* float: right; */
 }

 my-navbar ul {
    float:right;
 }

   my-navbar.primary{
    /* background-color: transparent;
     */
     background-color: var(--navbar);
 }

 my-navbar.secondary{
    background-color: #414141;
 }

 my-navbar.secondary ul li a{
     height:30px;
     padding:4px 8px;
     /* margin:4px;
 */     min-width:60px;
     font-size:16px;
     /* border: solid black 1px; */
 }

 my-navbar nav { 
     padding:0;
     margin:0;
 }
 my-navbar nav ul {
     list-style-type: none;
     display: flex;
     flex-wrap: wrap;
     margin:0;
     padding:0;
     /* border:none; */
 }
 my-navbar nav ul li {
     float:left;
     margin:0;
     padding:0;
     border:none;
 }
 my-navbar nav ul li a {
   display: block;
   color: var(--button-text);
   background-color: var(--accent);
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   margin:1px;
   border:none;
 }

 my-navbar nav ul li a:hover {
   background-color: var(--hover);
   text-decoration-color: var(--button-text);
   text-decoration-thickness: 2px;
   text-decoration:underline;
 }
 my-navbar nav ul li a.active{
     background-color: var(--hover);
 }
 side-nav {
     position: sticky;
     top:50px;
     /* display:inline-block;
 */     overflow-y: scroll;
     height: 100vh;
     background-color: black;
     width:150px;
     margin:0;
     padding:0;
 }
 side-nav ul {
     list-style-type: none;
     /* display: flex;
 */         margin: 5px 5px;
     margin:0;
     padding:0;
 }
 side-nav ul li {
     /* float:left */     display:flex;
     /* height: 60px;
 */         /* min-width:100px;
     max-width:50vw;
 */     padding:0;
     margin:0;
     }
 side-nav ul li a {
   /* display: block; */  
    color: rgb(0, 0, 0);
   background-color: rgb(190, 190, 190);
   text-align: center;
   /* padding: 14px 16px; */   
   text-decoration: none;
   flex:1;
   height:25px;
   padding:0;
   margin:0;
 }
 side-nav ul li a:hover {
   background-color: #f0e2e2;
 }
 .soft {
     border-radius: 5px;
 }

 


 /* Body text + headings */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lexend", system-ui, sans-serif;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  scroll-margin-top: 155px;
}


/* Buttons, nav links, interactive text */
button,
nav a,
.custom-button-holder,
my-navbar {
  font-family: "Nunito", system-ui, sans-serif;
}

.my-h1 {
  border-bottom: 2px solid var(--accent);
}

.table-of-contents {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1.5rem;
  padding-bottom: 0;
}
/* .table-of-contents {
  background: #f8f8f8;
  padding: 15px;
  border-left: 4px solid #333;
  margin: 40px 0;
} */
.table-of-contents h2 {
  margin-top:0;
  border-bottom:solid var(--dark-grey)
}

.table-of-contents a {
  text-decoration: none;
  color: #222;
}

.table-of-contents a:hover {
  text-decoration: underline;
  color: var(--accent)
}

.table-of-contents h1 {
  margin-top: 0;
  border-bottom: 2px solid var(--dark-grey);
}

.table-of-contents ul {
  list-style: none;
  padding-left: 0;
}

.table-of-contents li {
  margin: 6px 0;
}

.table-of-contents ul ul {
  padding-left: 20px;
  font-size: 0.95rem;
  opacity: 0.9;
}





/*
  h1's --> h4's header section, html base
*/
h1 { 
  margin-top: 0;
  font-size: clamp(32px, 4vw, 44px); 
}

h2 { 
  font-size: clamp(24px, 3vw, 32px);
 }

h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

.underline {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
}

h2.underline, h2.numbered {
  counter-reset: subsection;
  /* margin:0px; */
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: clamp(22px, 3vw, 30px);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
}

 h2.numbered::before {
   counter-increment: section;
   
   content: counter(section) "." counter(subsection) " ";
 }

 h3.numbered {
  counter-reset: subsubsection;
}

h3.numbered::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

 h4.numbered::before {
  counter-increment: subsubsection;
  content: counter(section) "." counter(subsection) "." counter(subsubsection) " ";
}

h3 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

h4 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

h5 {
  font-size: 1.1rem;
  margin-top: 2rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--dark-grey);
}

h6 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--light-grey);
}

section {
  padding: 0rem;
}
/* section:nth-of-type(even) {
  background: #fafafa;
} */

section p,
section ul {
  margin-bottom: 1rem;
}

 span {
    border:none;
 }
 .italic-bold {
    font-style: italic;
    font-weight: bold;
    margin:0px;
    padding:0px;
    background-color: none;
 }

/* =========================
   CONTENT BOX BASE
========================= */

.content-box {
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 1.5rem;
  border-left: 6px solid;
  border-radius: 10px;
  background: white;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);

  transition: box-shadow 0.2s ease, transform 0.2s ease;

}
/* .content-box:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
} */

/* Title line (strong as first child) */
.content-box > strong:first-child {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* blue */
.content-box--blue, .key-idea {
  background: var(--box-blue-bg);
  border-color: var(--box-blue-border);
}

.content-box--blue, .key-idea > strong:first-child {
  color: var(--box-blue-title);
}

/* orange */
.content-box--orange, .important-note {
  background: var(--box-orange-bg);
  border-color: var(--box-orange-border);
}

.content-box--orange, .important-note > strong:first-child {
  color: var(--box-orange-title);
}

/* grey */
.content-box--grey, .example {
  background: var(--box-grey-bg);
  border-color: var(--box-grey-border);
}

.content-box--grey, .example > strong:first-child {
  color: var(--box-grey-title);
}

/* content box lists */
.content-box ul {
  margin: 0.75rem 0 0 0;
  padding-left: 1.2rem; /* smaller indent */
  list-style-type: none; 
  margin-left: 0px;
  overflow-wrap: break-word;
}

.content-box li {
  margin-bottom: 0.4rem;
}

.indented-list {
  list-style: none;
  margin-left: 1.5rem;
}


/* =========================
   HOVER TERM
========================= */

.hover-term {
  position: relative;
    display: inline-block;

  cursor: help;

  border-bottom: 2px dotted var(--accent);
  padding-bottom: 1px;

  transition: 
    color 0.2s ease,
    border-color 0.2s ease;
}

/* Hover feedback */
.hover-term:hover {
  color: var(--accent);
  border-color: var(--hover);
}

/* =========================
   HOVER INFO TOOLTIP
========================= */

.hover-info {
  position: absolute;

  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  max-width: 400px;
  white-space: normal;
  overflow-wrap: break-word;

  background: #222;
  color: white;

  padding: 10px 12px;
  border-radius: 8px;

  font-size: 0.9rem;
  line-height: 1.4;

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;

  box-shadow: 0 8px 18px rgba(0,0,0,0.25);

  z-index: 20;
}

/* Show tooltip */
.hover-term:hover .hover-info {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hover-term:hover {
  background: rgba(120,165,255,0.08);
  border-radius: 3px;
}

.hover-info::after {
  content: "";

  position: absolute;
  top: 100%;
  left: 50%;

  transform: translateX(-50%);

  border-width: 6px;
  border-style: solid;

  border-color: #222 transparent transparent transparent;
}

/* =========================
   BLOCKQUOTE
========================= */

blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--text-muted);
  font-style: italic;
  font-weight: bold;
}



 .chatgpt {
    border: solid 7px rgb(78, 246, 0);
    border-radius: 5px;
 }

 .under_construction {
    border: solid 7px rgb(0, 185, 246);
    border-radius: 5px;
 }
 .under_construction::before {
  content: "To-do";
 }

 sub-topics {
     display: block;
 }

  /* .main-screen {
     display:flex;
     flex-direction: column;
     margin:auto;
     width:70%; 
     max-width:900px;
     padding-top:2vh;
     padding-bottom:2vh;
     flex:1;
 } */

 .main-screen {
  display: grid;
  /* grid-template-columns: 240px 1fr; */
grid-template-columns: 220px minmax(0, 820px);
gap: 50px;
  /* gap: 40px; */

  margin: auto;
  max-width: 1200px;

  /* padding-top: 2vh;
  padding-bottom: 2vh; */
}

.main-screen.home {
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
    grid-template-columns: 1fr;
}

/* =========================
   SIDEBAR TOC
========================= */
#toc-sidebar-title {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  margin-left: 1rem;
}

#toc-sidebar {
  backdrop-filter: blur(4px);

  padding-top: 1rem;
  /* background-color: red; */
  min-height: 10px;

  position: sticky;
  top: 140px;

  align-self: start;

  min-width: 200px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;

  padding-right: 10px;
  font-size: 0.9rem;
    scroll-behavior: smooth;

}

/* Firefox */
#toc-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(255,255,255,0.08);
}

/* Chrome / Edge / Safari */
#toc-sidebar::-webkit-scrollbar {
  width: 8px;
}

#toc-sidebar::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}

#toc-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 10px;
}

#toc-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: var(--hover);
}

#toc-sidebar ul {
  list-style: none;
  padding-left: 0;
}

#toc-sidebar li {
  margin-bottom: 6px;
}

#toc-sidebar a {
  text-decoration: none;
  color: var(--text-muted);
  display: block;
  padding: 3px 0;
}

#toc-sidebar a:hover {
  color: var(--accent);
}

#toc-sidebar a.active {
  color: var(--accent);
  font-weight: 600;
  border-left: 3px solid var(--accent);
  padding-left: 8px;
}

 .main-content {
     /* display:inline-block; */
     display: block;
     /* border: solid 5px; */
     border-radius: 20px;
     margin: auto;
     padding: 1rem;
     margin: 1rem;
     /* width: */     
     /* width:100%; */
     min-width:0;
     background-color: var(--content-bg) ;
     box-shadow: 0 15px 40px rgba(0,0,0,0.08);
     /* max-width: 80% */ 
    }


  @media (max-width: 768px){
    .brand-bar {
      flex-wrap: wrap;
      gap: 10px;
      padding: 0.6rem .5rem;
    }

    .brand-center {
      order: 3;
      width: 100%;
      justify-content: flex-end;
      padding-right: 0;
    }

    .search-wrapper {
      width: 100%;
      max-width: 100%;
    }

    .search-wrapper:focus-within {
      width: 100%;
    }

    .main-screen {
        width:100%;
        margin:0px;
        padding:0px;
        grid-template-columns: 1fr;
    } 

      #toc-sidebar {
        display:none;
      }

    .main-content {
        width:100%;
        margin:0px;
        border-radius: 0px;
    } 

    h2, h3, h3 ~ p, h4 {
        margin-left:0px;
    }

 }





























 /* ===== HERO SECTION ===== */
.landing-page-hero-wrapper {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 110px);
}

.hero {
  flex:1;
  width: 100%;
  background: url("../images/background.png") center center / cover no-repeat;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

    z-index: 0;
  border:none;
  margin:0px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 40, 0.65); /* dark overlay */
}

.hero-overlay {
  position: relative;
  text-align: center;
  color: white;
  z-index: 2;
  padding: 20px;
  border:none;
}

.hero-logo {
  width: 120px;
  margin-bottom: 20px;
   border:none;
}

.hero-title {
  font-size: clamp(30px, 3vw, 40px);
  margin-bottom: 10px;
   border:none;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 400;
   border:none;
   background-color: transparent;
}

#rotating-word {
  color: rgb(200, 140, 90); /* your accent */
  font-weight: bold;
  transition: opacity 0.5s ease;
  background-color: transparent;
}


/* ===== Scroll Indicator ===== */

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  z-index: 2;
}

.scroll-indicator a {
  color: white;
  text-decoration: none;
  margin:0;
  padding:0;
}

.scroll-indicator p {
  color: white;
  font-size: 1rem;
  margin:0;
  padding:0;
}

.scroll-text {
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-bottom: 5px;
  opacity: 0.8;
}

.scroll-icon {
  font-size: 48px;  /* makes it bigger */
  cursor: pointer;
  animation: bounce 2s infinite;
}

/* Subtle bounce animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}




/* ===== FOOTER ===== */

.site-footer {
  background-color: #0f1a2b; /* deep navy */
  color: #e0e6f0;
  padding-top: 60px;
  margin-top: 80px;
  margin:0px;
  width:100%;
}

.footer-container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* gap: 40px; */
  gap: 3vw;
}

.footer-column {
  flex: 1;
  min-width: 220px;
}

.footer-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: white;
}

.footer-tagline {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
}

.footer-column h4 {
  margin-bottom: 15px;
  font-size: 1rem;
  letter-spacing: 1px;
  color: rgb(200, 140, 90); /* accent */
  margin:0px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  text-decoration: none;
  color: #cdd6e5;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: rgb(200, 140, 90);
}

.footer-bottom {
  text-align: center;
  padding: 25px 0;
  margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ---- Tool Tip ------ */
/* Tooltip wrapper */
.tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted #555;
}

/* Hidden tooltip text */
.tooltip-text {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  background-color: #222;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  width: 220px;
  font-size: 0.9rem;
  line-height: 1.4;
  
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

/* Show on hover */
.tooltip:hover .tooltip-text {
  opacity: 1;
}

/* Small arrow */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  
  border-width: 6px;
  border-style: solid;
  border-color: #222 transparent transparent transparent;
}

/* icons */
.info-icon {
  font-size: 10px;
}


/* note box */
.reference-box {
  background: #f5f5f5;
  padding: 1rem;
  border-left: 4px solid #444;
  margin: 1.5rem 0;
  border-radius: 10px;
}


/* cards */

.card-section {
  margin-top: 3rem;
}

.card-section h2 {
  margin-bottom: 1.5rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 1.5rem;
  padding-top:1rem;
  border-radius: 14px;

  background: white;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);

  text-decoration: none;
  color: var(--dark-grey);

  transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.1);
}

.card h3 {
  margin-top:1rem;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}

.card p {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.85;
}

.card-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.card-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
  letter-spacing: 0.4px;
  transition: transform 0.25s ease;
}

.card:hover .card-link {
  transform: translateX(4px);
}









/* hamburger */
.hamburger {
  display: none;
  background: var(--navbar);
  color: white;
  border: none;
  font-size: 22px;
  padding: 8px 14px;
  cursor: pointer;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--navbar);
}

.mobile-nav.open {
  display: flex;
}

.accordion-header {

  width: 100%;
  text-align: left;

  background: #333;
  color: white;

  border: none;
  padding: 14px;

  font-size: 16px;
  cursor: pointer;
}

.accordion-body {
  display: none;
}

.accordion-body.open {
  display: block;
}

@media (max-width: 768px){

  /* hide desktop navbars */
  .desktop-nav {
    display:none;
  }

  /* show hamburger */
  .hamburger {
    display: block;
    width: 100%;
    background: var(--navbar);
    color: white;
    border: none;
    font-size: 26px;
    padding: 10px 16px;
  }

  /* mobile nav container */
  .mobile-nav {
    display: none;
    flex-direction: column;
    background: var(--navbar);
  }

  .mobile-single {
    display:block;
    padding:14px 18px;
    color:white;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }

  .mobile-nav.open {
    display: flex;
  }

  /* change nav styling for mobile */
  my-navbar nav ul {
    flex-direction: column;
  }

  my-navbar nav ul li a {
    background: none;
    padding: 12px 18px;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

}

.accordion-header::after {
  content: "▾";
  float: right;
  transition: transform 0.2s;
}

.accordion-header.open::after {
  transform: rotate(180deg);
}