:root {
      --dim-green: #3e5e4f;
      --dim-blue: #2b3e50;
      --light-gray: #f2f2f2;
      --white: #ffffff;
      --light-white: #cccccc;
	  --black: #000000;
	  --almost-black: #222222;
      --dark-bg: #1a1a1a;
      --dark-text: #e0e0e0;
      --dark-text-body: #aaaaaa;
      --dark-text-body2: #0E872C;
      --transition-speed: 0.3s;
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--light-gray);
      color: var(--dim-blue);
      transition: background-color var(--transition-speed), color var(--transition-speed);
    }

    body.dark {
      background-color: var(--dark-bg);
      color: var(--dark-text-body);
    }

	/* rk NEW */
    body.light {
      background-color: var(--light-gray);
      color: var(--dim-blue);
    }
 
	/* HOME LINK ONLY */
	.home_link {
        color: #BBBBBB; /* unvisited  link color */
        text-decoration: none; /* Removes the underline */
    }
    .home_link:visited  {
        color: #BBBBBB; /* visited  link color */
    }

    .home_link:hover  {
        color: #DDDDDD; /* hover  link color */
    }

    .home_link:active  {
        color: #BBBBBB; /* active  link color */
    }

    /* HEADER - NAVIGATION */
    header {
      background-color: var(--dim-green);
      padding: 0.5em 1.5em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--white);
    }

    header h1 {
      margin: 0;
      font-size: 1.5em;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 1em;
      margin: 0;
      padding: 0;
    }

    nav li {
      position: relative;
    }

    nav a {
      color: var(--white);
      text-decoration: none;
      font-weight: 500;
      padding: 0.4em 0.6em;
      display: block;
    }

    nav a:hover  {
        color: #BBBBBB; /* hover  link color */
    }
	
    nav li:hover > ul {
      display: block;
    }

    nav ul ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: var(--dim-blue);
      padding: 0;
      min-width: 150px;
      border-radius: 4px;
      z-index: 1000;
    }

    nav ul ul li {
      width: 100%;
    }

    nav ul ul a {
      padding: 0.5em 1em;
      color: var(--white);
    }

    /* THEME TOGGLE BUTTON */
    .toggle-btn {
      margin-left: 1em;
      background-color: var(--dim-blue);
      color: var(--white);
      border: none;
      padding: 0.4em 0.8em;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9em;
    }

    .toggle-btn:hover {
      background-color: #1d2c39;
    }

    /* HERO SECTION */
    .hero {
      height: 100px;
      background: linear-gradient(rgba(55,140,191,0.1), rgba(126,188,89,0.5));
	  background-position: center; 
      background-repeat: no-repeat;
      background-size: cover; 
	  display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #FFFFFF;
    }

	/* HERO - TITLE */
    .hero h2 {
      font-size: 2.2em;
      margin-bottom: 0.2em;
    }

	/* HERO - TAGLINE */
    .hero p {
      font-size: 1.1em;
      margin-bottom: -1.3em;
    }

    /* MAIN CONTENT */
    main {
      padding: 0 2rem 2rem 2rem;
      max-width: 85%;
      margin: 0 auto;
    }

    body.dark main a {
      color: var(--dark-text);
      margin: 0 0.5em;
    }

    body.dark main a:hover {
      text-decoration: underline;
      color: var(--white);
    }

    body.light main a {
      color: var(--black);
      margin: 0 0.5em;
    }

    body.light main a:hover {
      text-decoration: underline;
      color: var(--dim-blue);
    }

   /* CONTENT */
    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 1.5em 1em;	/* RK CHANGED FROM 2.5em to 1.5em */
    }

	/* CONTENT CARD BLOCKS */
    .card {
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin: 1em;
      max-width: 150px;	/* RK CHANGED FROM 300px */
      overflow: hidden;
      transition: transform 0.3s ease;
      /* RK NEW */
      display: flex;
      flex-direction: column; 
      justify-content: space-between;
    }

    .card:hover {
      transform: scale(1.05);
    }

    .card img {
      width: 100%;
      height: auto;
      display: block;
    }

    .card h3 {
      padding: 5px;
      margin: 0;
      color: var(--dim-green);
      /* RK NEW */
      position: relative;
      bottom: 0; 
      text-align: center;
    }

    body.dark .card {
      background-color: #333;
      color: var(--dark-text);
    }

    body.dark .card h3 {
      color: var(--dark-text);
    }

    /* FOOTER */
    footer {
      background-color: var(--dim-blue);
      color: var(--white);
      text-align: center;
      padding: 2em 1em;
      margin-top: 2em;
    }

    footer a {
      color: var(--white);
      margin: 0 0.5em;
    }

    footer a:hover {
      text-decoration: underline;
      color: var(--light-gray);
    }

	/* NAVIGATION MENU STACKING FOR SMALL SCREENS */
    @media (max-width: 768px) {
      nav ul {
        flex-direction: column;
        gap: 0;
      }

      nav li:hover > ul {
        position: static;
      }

      nav ul ul {
        position: static;
      }

      .content {
        flex-direction: column;
        align-items: center;
      }

      .toggle-btn {
        margin-top: 0.5em;
      }
    }