:root{
      --left-grad: #0463BA;
      --right-grad: #001D38;
      --btn-brown: #9c6a22; /* button color close to design */
      --muted: rgba(255,255,255,0.85);
      --muted-2: rgba(255,255,255,0.75);
      --small: 13px;
      --max-width: 1150px;
    }

  
   
    /* Footer container */
    .site-footer{
      background: linear-gradient(90deg,var(--left-grad) 0%,var(--right-grad) 100%);
      color: white;
      padding: 48px 20px 22px; /* top + bottom spacing */
      border-top: 6px solid rgba(255,255,255,0.03); /* subtle top line like the design */
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
    }

    .footer-inner{
      max-width: var(--max-width);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.1fr 1fr; /* left slightly wider */
      gap: 40px;
      align-items: start;
    }

    /* Left column (brand + lists) */
    .footer-left{padding-top:8px}
    .brand1{
      font-weight:800;
      letter-spacing:0.4px;
      margin: 0 0 28px 0;
      font-size: clamp(30px, 4.1vw, 44px); /* big title sized responsively */
      color: #ffffff;
    }

    /* Two lists under the brand: Legal and Services */
    .lists{
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 18px 48px;
      margin-top: 6px;
    }

    .list-block h4{
      margin:0 0 12px 0;
      font-size: 18px;
      font-weight:700;
    }
    .list-block ul{list-style:none; padding:0; margin:0}
    .list-block li{
      margin:8px 0;
      font-size: 14px;
      color: var(--muted-2);
      line-height:1.6;
    }

    /* Right column (newsletter + contact) */
    .footer-right{
      display:flex;
      flex-direction:column;
      gap: 24px;
      padding-top:6px;
    }

    .newsletter h3, .contact h3{margin:0 0 10px 0;font-size:18px;font-weight:700}
    .newsletter p{margin:0 0 14px 0;color:var(--muted-2);font-size:14px;max-width:380px}

    /* input + button row */
    .subscribe{
      display:flex; gap:12px; align-items:center;
    }
    .subscribe input[type="email"]{
      flex:1; padding:12px 18px; border-radius:999px; border: none; outline:none;
      background: rgba(255,255,255,0.92);
      font-size:14px; color:#1a1a1a; box-shadow: 0 4px 18px rgba(0,0,0,0.12);
      min-width: 220px;
    }
    .btn {
      padding:10px 18px; border-radius:999px; border:none; cursor:pointer; font-weight:700; white-space:nowrap;
      box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    }
    .btn-primary{background: var(--btn-brown); color: white;}
    .btn-primary:hover{filter:brightness(.95)}

    /* Contact block */
    .contact p{margin:6px 0;color:var(--muted-2);font-size:14px;line-height:1.5}
    .contact .bold{color:#ffffff;font-weight:700}

    /* Footer bottom copyright */
    .footer-bottom{
      margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.04);
      font-size:12px; color: rgba(255,255,255,0.85);
    }

    /* Make table-like spacing for lists to match alignment in image */
    .lists .list-block{min-width:0}

    /* small screens: stack everything */
    @media (max-width:900px){
      .footer-inner{grid-template-columns: 1fr;}
      .lists{grid-template-columns:1fr 1fr}
      .newsletter p{max-width:100%}
    }
    @media (max-width:520px){
      .lists{grid-template-columns:1fr}
      .subscribe{flex-direction:column;align-items:stretch}
      .subscribe input{width:100%}
      .btn{width:100%}
    }

@media (min-width: 321px) and (max-width: 540px) {
  /* Footer container */
  .site-footer {
    padding: 28px 14px 18px;
    text-align: center; /* default center alignment */
  }

  .footer-inner {
    grid-template-columns: 1fr; /* stack everything */
    gap: 24px;
    justify-items: center; /* center blocks horizontally */
  }

  /* Brand */
  .brand1 {
    font-size: 26px;
    margin-bottom: 16px;
    text-align: center;
  }

  /* Legal + Services lists */
  .lists {
    display: flex;
    flex-direction: column;
    align-items: center; /* center horizontally */
    gap: 20px;
    margin-top: 8px;
  }

  .list-block {
    text-align: center;
  }

  .list-block h4 {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .list-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .list-block li {
    font-size: 13px;
    margin: 6px 0;
    color: var(--muted-2);
  }

  /* Newsletter */
  .newsletter h3 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .newsletter p {
    font-size: 13px;
    margin-bottom: 10px;
    color: var(--muted-2);
  }

  .subscribe {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
  }

  .subscribe input[type="email"] {
    width: 100%;
    max-width: 320px;
  }

  .btn {
    width: 100%;
    max-width: 320px;
  }

  /* Contact block */
  .contact {
    text-align: center;
  }
  .contact p {
    font-size: 13px;
    line-height: 1.5;
  }
  .contact .bold {
    font-size: 14px;
  }

  /* Footer bottom */
  .footer-bottom {
    margin-top: 20px;
    padding-top: 12px;
    font-size: 11px;
    text-align: center;
  }
}