body {
      font-family: Arial, sans-serif;
      margin: 0;
      background: #f9f9f9;
      color: #333;
      margin-bottom:40px;
    }
    header {
      background: #0066cc;
      color: white;
      padding: 20px;
      text-align: left;
      max-width: 1200px;
      max-height:60px;
    }
    header h1 { margin: 0; font-size: 28px; }
    header p { margin: 5px 0 0; font-size: 16px; }

    .search-bar {
      margin: 15px auto;
      max-width: 600px;
      display: flex;
    }
    .search-bar input {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 6px 0 0 6px;
    }
    .search-bar button {
      background: #004d99;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 0 6px 6px 0;
      cursor: pointer;
    }
    .search-bar button:hover {
      background: #003366;
    }

    .container {
      display: flex;
      max-width: 1200px;
      min-height: calc(100vh - 180px);
//      max-height: calc(100vh - 180px);
      padding: 20px 20px;
      gap: 20px;
    text-align: left;
    background: #f0f4ff;
    overflow:auto;
    }
    .main {
      flex: 3;
      background: #f5faff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      text-align: left;
    }
    .sidebar {
      flex: 1;
    }
    section {
       
      margin-bottom: 20px;
      
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    h2 {
      font-size: 22px;
      border-bottom: 2px solid #ddd;
      padding-bottom: 5px;
      margin-bottom: 15px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    
    h2 { color: #0066cc; }
    .articles { margin-top: 20px; }
    .article { padding: 10px; border-bottom: 1px solid #ddd; }
    .article:last-child { border-bottom: none; }    
    .categories {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 15px;
      padding:10px 20px 10px 20px ;
    }
    .category {
      background: #f1f5ff;
      padding: 15px;
      border-radius: 8px;
      text-align: center;
      font-weight: bold;
      color: #0066cc;
      transition: 0.3s;
      text-decoration: none;
      display: block;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      margin-bottom:10px;
    }
    .category:hover {
      background: #0066cc;
      color: white;
      cursor: pointer;
    }
    .article-preview {
      margin-bottom: 15px;
    }
    .article-preview h3 {
      margin: 0;
      font-size: 18px;
    }
    .article-preview small {
      color: #777;
    }
    .quick-links {
      background: white;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      margin-bottom: 20px;
             max-height: 255px;
             overflow:auto;
    }
    .quick-links ul {
      list-style: none;
      padding: 0;
    }
    .quick-links li {
      margin: 8px 0;
    }
    .quick-links a {
      text-decoration: none;
      color: #0066cc;
    }
    .quick-links a:hover {
      text-decoration: underline;
    }
    .latest-articles-sidebar {
      background: white;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
       min-height: calc(100vh - 475px);

       overflow:auto;
    }
    .latest-articles-sidebar h3 {
      margin-top: 0;
    }
    footer {
      position:fixed;  
      bottom:0px;
      width:100%;
      background: #333;
      color: white;
      padding: 15px 20px 15px 20px;
      text-align: center;
      margin-top: 30px;
      max-width: 1200px;
    }