/* ===== Base ===== */
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#ffffff;color:#253853;}
.container{max-width:1200px;margin:auto;padding:40px 20px;}
h1{font-size:42px;margin:0 0 10px;color:#0b2545;}
h2{font-size:28px;margin-top:50px;color:#192635;border-bottom:2px solid #e6ecf5;padding-bottom:10px;}
h3{font-size:22px;margin:0 0 10px;color:#192635;}
p{font-size:17px;line-height:1.7;color:#24364f;margin:0 0 14px;}
.section-intro{max-width:980px;margin-bottom:10px;}

/* ===== Hero ===== */
.hero{
  background:#192635; /* RGB(25,38,53) */
  color:white;
  padding:70px 20px 50px;
  text-align:center;
}
.hero h1{color:white;}
.hero p{color:#e3edf7;font-size:20px;max-width:980px;margin:10px auto 0;}

/* ===== Category Nav Pills (clickable) ===== */
.pill-row{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.22);
  color:#ffffff;text-decoration:none;
  transition:0.2s;
}
.pill:hover{background:rgba(255,255,255,0.20);transform:translateY(-1px);}
.pill:focus{outline:2px solid rgba(255,255,255,0.35);outline-offset:2px;}
.pill-dot{width:8px;height:8px;border-radius:50%;background:#ffffff;opacity:.85;}

/* ===== Layout blocks ===== */
.block{
  border:1px solid #e3eaf3;border-radius:10px;padding:22px;background:#ffffff;margin-top:18px;
}
.block.soft{background:#f7faff;}
.block-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;}
.block-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#516a86;}
.block-actions{display:flex;gap:10px;flex-wrap:wrap;}
.small-link{
  font-size:13px;text-decoration:none;color:#0b3d91;border-bottom:1px solid rgba(11,61,145,0.25);
}
.small-link:hover{border-bottom-color:rgba(11,61,145,0.6);}

/* ===== Cards ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:18px;}
.card{
  border:1px solid #e3eaf3;border-radius:10px;padding:20px;background:#f7faff;
  transition:0.25s;
}
.card:hover{box-shadow:0 10px 28px rgba(25,38,53,0.12);transform:translateY(-2px);}
.card-title{font-size:18px;font-weight:800;margin:0 0 8px;color:#192635;}
.card p{font-size:15px;line-height:1.65;color:#2a3e57;margin:0 0 10px;}
.list{margin:0;padding-left:18px;display:grid;gap:8px;}
.list li{font-size:14px;line-height:1.55;color:#2a3e57;}

/* ===== Anchor spacing (prevents hero covering) ===== */
.anchor{scroll-margin-top:90px;}

/* ===== Notice ===== */
.notice{
  border:1px solid #e3eaf3;border-radius:10px;padding:16px;background:#ffffff;margin-top:24px;
}
.notice strong{color:#192635;}
.notice p{font-size:14px;margin:0;color:#2a3e57;opacity:.95;}

/* ===== Responsive ===== */
@media (max-width:720px){
  .hero{padding:58px 18px 42px;}
  h1{font-size:34px;}
  h2{font-size:24px;}
}
html, body, #container
{
   width: 100%;
   height: 100%;
}
body
{
   background-color: #F4F7FB;
   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_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_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_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_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_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_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_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_Text7 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text7 div
{
   text-align: left;
}
#wb_Line1
{
   font-size: 0;
}
#Line1
{
   border-width: 0;
   height: 9px;
   width: 1273px;
}