:root{
      --bg:#192635;         /* site background (R:25 G:38 B:53) */
      --bg2:#0f1a26;
      --card:#ffffff;       /* form card */
      --text:#122033;       /* inside-card text */
      --muted:#5b6777;
      --line:#e6ecf5;
      --accent:#caa24a;
      --teal:#2a9d8f;
      --danger:#b42318;
      --ok:#0f5132;
      --radius:16px;
      --shadow:0 18px 45px rgba(0,0,0,.28);
    }

    *{box-sizing:border-box;margin:0;padding:0}

    body{
      font-family: Arial, Helvetica, sans-serif;
      background:
        radial-gradient(1200px 600px at 20% 0%, rgba(202,162,74,.18), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, rgba(42,157,143,.14), transparent 55%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
      color:#ffffff; /* ✅ make the black writing white (outside the card) */
      min-height:100vh;
    }

    .wrap{
      max-width:1100px;
      margin:0 auto;
      padding:34px 18px 70px;
      display:grid;
      grid-template-columns: 1fr 420px;
      gap:22px;
      align-items:start;
    }

    .hero{
      grid-column: 1 / -1;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      padding:22px;
      box-shadow: 0 10px 30px rgba(0,0,0,.18);
    }
    .hero h1{
      font-size:34px;
      letter-spacing:-.6px;
      margin-bottom:10px;
      color:#ffffff;
    }
    .hero p{
      color:rgba(255,255,255,.88);
      max-width:980px;
      line-height:1.55;
    }

    .card{
      background: var(--card);
      color: var(--text); /* keep form readable */
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
    }
    .card-head{
      padding:18px 18px 14px;
      border-bottom:1px solid var(--line);
      background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    }
    .card-head h2{
      font-size:18px;
      letter-spacing:-.2px;
      margin-bottom:4px;
      color:#0b2545;
    }
    .card-head p{ color: var(--muted); font-size:13.5px; }

    .card-body{ padding:18px; }

    .msg{
      display:none;
      padding:14px;
      border-radius: 14px;
      margin-bottom:14px;
      font-weight:800;
      line-height:1.35;
      font-size:14px;
    }
    .msg.ok{
      display:block;
      background:#d4f8d4;
      color: var(--ok);
      border:1px solid #badbcc;
    }
    .msg.err{
      display:block;
      background:#f8d7da;
      color:#721c24;
      border:1px solid #f5c6cb;
    }

    .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
    .field{ display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }

    .field label{
      font-weight:800;
      font-size:13.5px;
      color:#0b2545;
    }
    .req{ color: var(--danger); font-weight:900; margin-left:4px; }

    input, select, textarea{
      width:100%;
      border:2px solid #e3eaf3;
      border-radius: 12px;
      padding:12px;
      font-size:15px;
      outline:none;
      transition: .2s ease;
      font-family: inherit;
      background:#fff;
      color:#122033;
    }
    textarea{ min-height: 190px; resize: vertical; }

    input:focus, select:focus, textarea:focus{
      border-color: rgba(42,157,143,.9);
      box-shadow: 0 0 0 4px rgba(42,157,143,.12);
    }

    .hint{
      font-size:12.5px;
      color:#667388;
      margin-top:-6px;
    }

    .checks{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap:10px;
      margin-top:8px;
    }
    .check{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      border:1px solid #e6ecf5;
      border-radius:12px;
      background:#fff;
    }
    .check input{ width:auto; }
    .check span{ font-size:14px; color:#223247; }

    .upload{
      border:2px dashed #d7e1ee;
      background:#fbfdff;
      padding:14px;
      border-radius: 14px;
    }
    .upload strong{ color:#0b2545; }

    .actions{
      display:flex; gap:10px; flex-wrap:wrap;
      margin-top:14px;
    }
    .btn{
      border:none;
      border-radius: 12px;
      padding:14px 16px;
      font-weight:900;
      cursor:pointer;
      transition:.2s ease;
      font-size:15px;
    }
    .btn-primary{
      background: linear-gradient(135deg, var(--bg) 0%, #243a52 70%);
      color:#fff;
      flex: 1;
      border:1px solid rgba(25,38,53,.25);
    }
    .btn-primary:hover{
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(25,38,53,.22);
    }
    .btn-ghost{
      background:#fff;
      border:1px solid #dbe6f3;
      color:#0b2545;
    }
    .btn-ghost:hover{ background:#f6f9ff; }

    .side{
      position:sticky; top:18px;
      display:flex; flex-direction:column; gap:14px;
    }
    .side .box{
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      padding:16px;
    }
    .side h3{
      font-size:15px;
      margin-bottom:10px;
      letter-spacing:-.2px;
      color:#fff;
    }
    .side p, .side li{
      color: rgba(255,255,255,.88);
      font-size:13.5px;
      line-height:1.45;
    }
    .side ul{ margin-left:16px; display:grid; gap:6px; }

    .footer-note{
      grid-column: 1 / -1;
      margin-top:10px;
      color:rgba(255,255,255,.78);
      font-size:12.5px;
      line-height:1.45;
    }

    @media (max-width: 980px){
      .wrap{ grid-template-columns: 1fr; }
      .side{ position:static; }
    }
  html, body, #container
{
   width: 100%;
   height: 100%;
}
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#wb_Text1 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text1 div
{
   text-align: left;
}
#wb_Text3 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text3 div
{
   text-align: left;
}
#wb_Image1
{
   vertical-align: top;
}
#Image1
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text2 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text2 div
{
   text-align: left;
}
#wb_Text4 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text4 div
{
   text-align: left;
}
#wb_Extension2
{
   position: relative;
}
#Extension2
{
   overflow: hidden;
   background-color: #192635;
   text-align: center;
;
}
#Extension2 a
{
   display: inline-block;
   font-family: Times New Roman;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   color: #FFFFFF;
   padding: 8px 6px 8px 6px;
   text-align: center;
   text-decoration: none;
   transition: all 200ms ease-out;
}
#Extension2 .secondlevel
{
   display: inline-block;
   overflow: hidden;
   vertical-align: top;
}
#Extension2 .secondlevel .secondlevelbtn
{
   font-family: Times New Roman;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   border: none;
   outline: none;
   color: #FFFFFF;
   padding: 8px 6px 8px 6px;
   background-color: inherit;
   margin: 0;
   transition: all 200ms ease-out;
}
#Extension2 a:hover, #Extension2 .secondlevel:hover .secondlevelbtn 
{
   background-color: #C09244;
   color: #000000;
}
#Extension2 .secondlevel-content
{
   background-color: #C09244;
   display: none;
   left: 0;
   opacity: 0;
   position: absolute;
   transition: opacity 200ms ease-out;
   width: 100%;
   z-index: 1;
}
#Extension2 .secondlevel-content a
{
   display: inline-block;
   color: #000000;
   padding: 5px 10px 5px 10px;
   text-decoration: none;
}
#Extension2 .secondlevel-content a:hover 
{
   background-color: #F5F5F5;
   color: #454545;
}
#Extension2 .secondlevel:hover .secondlevel-content 
{
   display: block;
   opacity: 1;
}
#Extension2-align
{
   display:inline-block;
}
#wb_Text5 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text5 div
{
   text-align: left;
}
#wb_Image4
{
   vertical-align: top;
}
#Image4
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Shape1
{
   border-width: 0;
   vertical-align: top;
}
#wb_Text6 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text6 div
{
   text-align: left;
}
#wb_Line1
{
   font-size: 0;
}
#Line1
{
   border-width: 0;
   height: 9px;
   width: 1273px;
}