:root {
      --primary: rgb(9, 99, 154);
      --secondary: #1d3557;
      --dark: #212529;
      --light: #f8f9fa;
      --gray: #6c757d;
    }

    body { 
      background-color: var(--light); 
      font-family: 'Times New Roman', Times, serif; 
      margin:0; 
      padding:0; 
      color: var(--dark);
    }

    .container { max-width: 1200px; margin: auto; padding: 20px; }

    /* Banner */
    /* section.banner {
      width: 100%;
      padding: 80px 20px;
      text-align: center;
      color: white;
      border-radius: 8px;
      margin-bottom: 40px;
      text-align: center;
      background-repeat: no-repeat;
      background-size: cover;
    } */

    .banner h1 {
      color: #1d3557;
      font-size: 4rem;
      margin: 0;
      /* text-shadow: 0 3px 6px rgba(0,0,0,0.6); */
      text-align: center;
      margin-top: 50px;
      margin-bottom: 60px;
    }

    /* Description + image section */
    .desc-section {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }

    .desc-text { flex: 1; min-width: 280px; padding: 20px; }
    .desc-text .subtitle { font-size: 1.3rem; margin-bottom: 15px; color: var(--secondary); }
    .desc-text .description { font-size: 1.1rem; line-height: 1.6; }

    .desc-image { flex: 1; width: 300px; text-align: center; }
    .desc-image img { width: 250px; border-radius: 300px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

    /* Table */
    .projects-table { 
      width:100%; border-collapse:collapse; background:white; 
      border-radius:8px; overflow:hidden; margin-top:30px; 
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .projects-table th { background: var(--secondary); color:white; padding:12px; text-align:left; }
    .projects-table td { padding:12px; border-bottom:1px solid #eee; }
    .projects-table tr:hover { background:#f9f9f9; }
    .technology { background:var(--primary); color:white; padding:4px 10px; border-radius:12px; margin:2px; display:inline-block; font-size:0.85rem; }
    .buy-link a { background:#4caf50; color:white; padding:6px 12px; border-radius:4px; text-decoration:none; }
    .buy-link a:hover { background:#388e3c; }
    .rate { font-weight:bold; color:#f57c00; }

    footer { text-align:center; margin-top:40px; color:var(--gray); padding:20px; }

    /* Responsive */
    @media(max-width:768px){
      .desc-section { flex-direction: column; text-align: center; }
      .desc-image { margin-top: 20px; }
    }