*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: Arial, Helvetica, sans-serif;
    }
    body{
      background:linear-gradient(135deg,#eef2f3,#d9e2ec,#eef2f3);
      background-size:400% 400%;
      animation:bgMove 12s ease infinite;
      color:#333;
    }
    @keyframes bgMove{
      0%{background-position:0% 50%;}
      50%{background-position:100% 50%;}
      100%{background-position:0% 50%;}
    }
    header{
      background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
      color:#fff;
      padding:35px 20px;
      text-align:center;
      animation: slideDown 1s ease;
    }
    header h1{
      font-size:32px;
    }
    header p{
      margin-top:8px;
      font-size:16px;
      opacity:0.9;
    }
    @keyframes slideDown{
      from{transform:translateY(-40px); opacity:0;}
      to{transform:translateY(0); opacity:1;}
    }
    .container{
      max-width:1100px;
      margin:50px auto;
      padding:0 20px;
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
      gap:30px;
    }
    .assignment{
      background:#fff;
      padding:22px;
      border-radius:12px;
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
      transition:transform 0.4s ease, box-shadow 0.4s ease;
      animation: fadeUp 0.8s ease forwards;
      opacity:0;
      position:relative;
    }
    .assignment:nth-child(1){animation-delay:0.2s;}
    .assignment:nth-child(2){animation-delay:0.4s;}
    .assignment:nth-child(3){animation-delay:0.6s;}
    .assignment:nth-child(4){animation-delay:0.8s;}
    .assignment:nth-child(5){animation-delay:1s;}
    .assignment:nth-child(6){animation-delay:1.2s;}
    .assignment:nth-child(7){animation-delay:1.4s;}
    .assignment:nth-child(8){animation-delay:1.6s;}
    .assignment:nth-child(9){animation-delay:1.8s;}
    .assignment:nth-child(10){animation-delay:2s;}
    @keyframes fadeUp{
      from{transform:translateY(30px); opacity:0;}
      to{transform:translateY(0); opacity:1;}
    }
    .assignment:hover{
      transform:translateY(-10px);
      box-shadow:0 20px 40px rgba(0,0,0,0.18);
    }
    .card-img{
      width:100%;
      height:180px;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:15px;
    }
    .card-img img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform 0.5s ease;
    }
    .assignment:hover .card-img img{
      transform:scale(1.08);
    }
    .assignment h2{
      font-size:21px;
      margin-bottom:10px;
      color:#203a43;
    }
    .assignment p{
      font-size:15px;
      margin-bottom:16px;
      line-height:1.5;
    }
    .btn-group{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      padding:10px 22px;
      border-radius:30px;
      font-size:14px;
      font-weight:600;
      letter-spacing:0.3px;
      position:relative;
      overflow:hidden;
      transition:transform 0.3s ease, box-shadow 0.3s ease;
    }
    .btn.primary{
      background:linear-gradient(135deg,#203a43,#2c5364);
      color:#fff;
      box-shadow:0 6px 15px rgba(32,58,67,0.35);
    }
    .btn.secondary{
      background:#fff;
      color:#203a43;
      border:2px solid #203a43;
    }
    .btn::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
      transform:translateX(-100%);
      transition:transform 0.6s ease;
    }
    .btn:hover::before{
      transform:translateX(100%);
    }
    .btn:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 22px rgba(32,58,67,0.45);
    }
    .btn.secondary:hover{
      background:#203a43;
      color:#fff;
    }
    .btn:active{
      transform:scale(0.96);
    }
    footer{
      text-align:center;
      padding:18px;
      background:#fff;
      font-size:14px;
      animation: fadeUp 1s ease;
    }
    @media(max-width:900px){
      header h1{font-size:26px;}
      .container{gap:20px;}
    }
    @media(max-width:600px){
      header{padding:25px 15px;}
      header h1{font-size:22px;}
      header p{font-size:14px;}
      .container{
        margin:30px auto;
        grid-template-columns:1fr;
      }
      .assignment{
        padding:18px;
      }
      .assignment h2{font-size:19px;}
      .assignment p{font-size:14px;}
      .btn{
        padding:8px 14px;
        font-size:13px;
      }
    }