/* ==== COLOR TOKENS ==== */
:root{



  --accent:#2F6DF6;      /* small highlights (links etc.) */
  --text:#0E1220;        /* primary text */
  --muted:#5A6275;       /* secondary text */

  --brand_color:#123567;
  --ribbon_text:#FFFFFF;
  --drawer_color:#2a489b;

  --hero_bg:#0066CC;
  --hero_title:#FFFFFF;
  --hero_text:#FFFFFF;
  --hero_text_2:#baffac;
  --card_bg:#FFFFFF;
  --card_heading:#0066CC;
  --card_sub_heading:#000000;
  --card_text:#757575;
  --button_bg:#00AA33;
  --button_hover:#009912;
  --button_click:#00CC66;
  --button_text:#FFFFFF;
  --button_coming_soon_bg:#A6A6A6;
  --body_bg:#F1F1F1;
  --card_border:#E3F3F3;
  --card_border_hover:#1299CC;
  
  --header-h: 64px;


}

/* ==== GLOBAL ==== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--body_bg); color:var(--text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6;
}
a{color:inherit; text-decoration:none}
.link{color:var(--accent); text-decoration:underline}
.link:hover{opacity:.9}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* Keyboard-friendly focus */
:where(a,button,input,textarea):focus{outline:none}
:where(a,button,input,textarea):focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:8px}

/* ==== HEADER (Blue Ribbon) ==== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--brand_color); color:var(--ribbon_text);
}
.header-inner{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
}
.brand-logo{
  width:32px;
  height:32px;
  object-fit:contain;
  display:block;
}
.brand-text{
  font-size: 18px; 
  font-weight:700; 
  letter-spacing:.2px; 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.nav-links{
  display:flex; 
  align-items:center; 
  gap:3px
}
.nav-links a{
  color:#fff; 
  opacity:.95; 
  padding:15px 30px; 
  border-radius:3px
}
.nav-links a:hover{
  background:rgba(255,255,255,.12)
}
.nav-toggle{
  display:none;
  font-size:22px;
  background:transparent;
  border:0;
  color:#fff;
  cursor:pointer;
  padding:6px 15px;
}
.nav-toggle:hover{
  background:rgba(255,255,255,.12)
}














/* ==== HERO (Light Green) ==== */
.hero{background:var(--hero_bg); border-bottom:1px solid var(--border)}
.hero-inner{padding:24px 15px 24px; text-align:left}
.hero-title{color: var(--hero_title); font-size:27px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height:1.15; margin:0 0 10px}
.hero-tagline{color:var(--hero_text); font-size:15px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width:900px; margin:0 ; text-align: left;}
.hero-tagline-2{color:var(--hero_text_2); font-size:15px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width:900px; margin:0 ; text-align: left;}

/* ==== SECTIONS ==== */
.section{padding:56px 0; border-bottom:1px solid var(--border)}
.section-title{margin:0 0 18px; font-size:24px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}

/* ==== CARDS (Two Horizontal) ==== */
.grid{display:grid; gap:16px}
.cards-2{grid-template-columns:1fr 1fr}
.card{
  background:var(--card_bg);
  border:1px solid var(--card_border);
  border-radius:14px; padding:18px;
  display:flex; flex-direction:column; gap:10px;
  transition: all .3s ease-in-out;
}
.card-title{margin:0 0 4px; font-size:20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--card_heading);}
.card-subtitle{margin:0 0 4px; font-size:16px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--card_sub_heading);}
.card-desc{margin:0; color:var(--card_text)}

.card:hover{
  border-color: var(--card_border_hover);
}


.meta{list-style:none; padding:0; margin:4px 0 0; display:flex; flex-wrap:wrap; gap:12px}
.meta li{display:flex; align-items:center; gap:8px}
.badge{
  display:inline-block; min-width:28px; padding:4px 8px; text-align:center;
  background:#fff; border:1px solid var(--border); border-radius:999px;
  font-weight:700; line-height:1;
}
.soon{margin-top:4px}
.chip{
  display:inline-block; padding:6px 10px; border:1px dashed var(--border);
  border-radius:999px; color:var(--muted); background:transparent; font-weight:600;
}

.button_a{
  background: var(--button_bg);
  color: var(--button_text);
  height: 45px;
  border-radius: 23px;
  width: auto;
  margin: 12px;
  border:none;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: all 0.1s ease-in-out;
}

.button_a:hover{
  background-color: var(--button_hover);
}

.button_a.clicked {
  background-color: var(--button_click);
  scale: 0.98; 
}
.button_a.afterclick {
  background-color: var(--button_hover);
  
}

.button_cs{
  background: var(--button_coming_soon_bg);
  color: var(--button_text);
  height: 45px;
  border-radius: 23px;
  width: auto;
  margin: 12px;
  border:none;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  font-weight: 600;

}




.banner-ad {
  width: 100%;
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically */
  margin: 12px auto;
  min-height: 50px;          /* ensures space is reserved */
  overflow: hidden;
}















/* ==== CONTACT ==== */
.contact-form{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px;
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
input, textarea{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:12px;
  background:#fff; color:var(--text);
}
input:focus-visible, textarea:focus-visible{border-color:var(--accent)}
.btn{
  appearance:none; border:1px solid var(--border); background: var(--button_bg); color:var(--button_text);
  padding:10px 36px; border-radius:10px; cursor:pointer; font-weight:600;
}
.btn:hover{filter:brightness(0.98)}

/* ==== FOOTER (Blue) ==== */
.site-footer{background:var(--brand_color); color:#fff}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px; height:64px}
.footer-links a{color:#fff; text-decoration:underline}

/* ==== RESPONSIVE ==== */
@media (max-width: 900px){
  .cards-2{grid-template-columns:1fr}
  .hero-title{font-size:27px}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed; right:0; top:64px;
    max-width: 320px;
    display:none;
    flex-direction:column;
    gap:8px;
    background:var(--drawer_color);
    padding:12px 6px;
    border-bottom:1px solid rgba(255,255,255,.2);
    transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
    will-change: max-height, opacity, transform;
  }
  .nav-links a{
    padding:10px 30px;
    border-radius:3px
  }

}