* { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background: #f5f6fa;
      color: #2c3e50;
      overflow-x: hidden;
    }

a {
	color: #1D74A6;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #1D74A6;
}

hr {
	display: none;
}

img {
  max-width: 100%; /* Ensures the image never exceeds the width of its parent container */
  height: auto;    /* Automatically adjusts the height to maintain the aspect ratio */
  display: block;  /* Removes extra space below the image */
}

    /* ===== HEADER ===== */
    header {
      background-color: #2c3e50;
      color: white;
      position: relative;
      z-index: 1000;
    }

    .header-top {
      display: flex;
      justify-content: flex-end;
      padding: 5px 20px;
      font-size: 0.9em;
      background-color: #34495e;
    }

    .header-main {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
      position: relative;
    }

    .logo {
      position: absolute;
      left: 20px;
      font-size: 1.8em;
      color: #f1c40f;
    }

    .company-name {
      font-size: 1.8em;
      font-weight: bold;
      text-align: center;
    }

    .burger, .side-burger {
      display: none;
      font-size: 26px;
      cursor: pointer;
      color: white;
      transition: transform 0.3s ease;
    }

    .burger:hover, .side-burger:hover {
      transform: rotate(90deg);
    }

    .burger {
      position: absolute;
      right: 20px;
    }

    .side-burger {
      position: absolute;
      left: 20px;
    }

    /* ===== NAVIGATION ===== */
    nav {
      background-color: #1a252f;
      display: flex;
      justify-content: center;
      gap: 40px;
      padding: 12px 0;
      transition: all 0.3s ease;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    nav a:hover {
      color: #f1c40f;
    }

    /* ===== MAIN CONTENT ===== */
    .container {
      display: flex;
      flex: 1;
      padding: 20px;
      gap: 20px;
      transition: all 0.3s ease;
    }

    aside, main {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    aside {
      width: 20%;
    }

    .right-column {
      width: 20%;
    }

    main {
      flex: 1;
      text-align: left;
      li {
        margin-left: 10px;
      }

    }

    h2 {
      margin-top: 0;
      color: #2c3e50;
    }

    /* ===== FOOTER ===== */
    footer {
      background-color: #2c3e50;
      color: white;
      text-align: center;
      padding: 15px;
      font-size: 0.9em;
    }

    /* ===== MOBILE MENU (NAV) ===== */
    @media (max-width: 900px) {
      .container {
        flex-direction: column;
      }

      aside, .right-column {
        display: none;
      }

      .burger, .side-burger {
        display: block;
      }

      nav {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.4s ease;
      }

      nav.show {
        max-height: 300px;
        opacity: 1;
      }
    }

    /* ===== SIDE PANEL (NEWS + PROJECTS) ===== */
    .side-panel {
      position: fixed;
      top: 0;
      left: -100%;
      width: 280px;
      height: 100%;
      background: #fff;
      box-shadow: 2px 0 10px rgba(0,0,0,0.3);
      padding: 20px;
      overflow-y: auto;
      transition: left 0.4s ease;
      z-index: 2000;
    }

    .side-panel.show {
      left: 0;
    }

    .side-panel h2 {
      margin-top: 0;
      color: #1a252f;
    }

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.4);
      display: none;
      z-index: 1500;
    }

    .overlay.show {
      display: block;
    }