body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
      background-color: #ffffff;
      color: #333;
    }

    header {
      color: #fff;
      max-width: 1200px;
      margin: 0 auto;
    }

    a,
    a:visited {
      color: #156082;
    }

    nav {
      background-color: #E6F0F5;
      padding: 10px;
      text-align: center;
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    }

    nav a {
      margin: 0 15px;
      font-size: clamp(1rem, 1.8vw, 1.4rem);
      margin: 0 6px;
      text-decoration: none;
      color: #156082;
      font-weight: bold;
      padding: 8px 12px;
      border-radius: 6px;
      transition: background-color 0.3s, box-shadow 0.3s;
    }

    nav a:hover, nav a.active {
      background-color: #156082;
      color: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 
    }

    h1 {
      font-size: clamp(1.2rem, 4vw, 2.0rem);
      margin-bottom: 0.5em;
    }

    h2 {
      font-size: clamp(1rem, 3vw, 1.6rem);
      margin-bottom: 0.5em;
    }


    h3 {
      font-size: clamp(0.8rem, 3vw, 1.4rem);
      margin-bottom: 0.5em;
    }

    p {
      font-size: clamp(0.6rem, 2vw, 1rem);
    }

    .main {
      display: flex;
      max-width: 1200px;
      margin: 20px auto;
      padding: 0 20px;
    }

    .content {
      flex: 3;
      padding-right: 20px;
    }

    .sidebar {
      flex: 1;
      background-color: #F4F9FB;
      padding: 20px;
      border-left: 1px solid #ccc;
    }

    .section-box {
      border: 1px solid #ccc;
      padding: 15px;
      margin-bottom: 20px;
      background-color: #fff;
    }

    .main-image img {
      max-width: 100%;
      height: auto;
      margin-bottom: 15px;
    }

    footer {
      background-color: #CFCFCF;
      color: #fff;
      text-align: center;
      padding: 20px;
      font-size: 1em;
      margin-top: 40px;
    }

    .sidebar h3 {
      margin-top: 0;
      border-bottom: 2px solid #ccc;

    }

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

    .sidebar ul li {
      font-size: clamp(0.6em, 3vw, 1.2rem);
      margin-bottom: 10px;
    }

    .sidebar ul li a {
      text-decoration: none;
      color: #003366;
    }

    .sidebar ul li a:hover {
      text-decoration: underline;
    }

    h3.section-title {
      border-bottom: 2px solid #ccc;
      padding-bottom: 5px;
      margin-bottom: 10px;
    }

    .tContent {
      display: none;
      margin-top: 10px;
    }

    .tButton {
      background-color: transparent; 
      border: none; 
      outline: none;
      box-shadow: none;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 0;
      color: #333333;
      font-size: clamp(1rem, 2vw, 1.4rem);
      cursor: pointer;
    }

    .tButton:hover {
      color: #156082;
    }

    .tButton.expanded {
      color: #156082 !important; 
    }

    #backToTop {
      display: none;
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 99;
      font-size: 16px;
      border: none;
      outline: none;
      background-color: #156082;
      color: white;
      cursor: pointer;
      padding: 10px 15px;
      border-radius: 4px;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
      transition: opacity 0.3s ease;
      font-size: clamp(0.8rem, 3vw, 1.4rem);
    }

    #backToTop:hover {
      background-color: #0055aa;
    }