@charset "UTF-8";
:root{
      --brand:#fbdc05;
      --brand2:#145a95;
      --ink:#0b1a2b;
      --text:#343a40;
      --muted:#51667d;
      --radius:18px;
      --radius2:26px;
      --shadow:0 18px 50px rgba(0,0,0,.14);
      --shadow2:0 12px 30px rgba(20,90,149,.18);
      --max:1120px;
      --font:Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji", ui-sans-serif,system-ui,-apple-system,Segoe UI;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:var(--font);color:var(--text);background:#fff;overflow-x:hidden}
    .stage{
      min-height:100vh;position:relative;      
      background-size:cover;background-position:center;background-attachment:fixed;
    }
    .stage:before{content:"";position:absolute;inset:0;pointer-events:none;
      background:
        radial-gradient(1000px 700px at 15% 10%, rgba(20,90,149,.22), transparent 60%),
        radial-gradient(900px 600px at 90% 15%, rgba(251,220,5,.22), transparent 60%),
        radial-gradient(1200px 900px at 50% 100%, rgba(20,90,149,.12), transparent 65%);
      mix-blend-mode:multiply;
    }
    .topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(255,255,255,.86);border-bottom:1px solid rgba(20,90,149,.10)}
    .wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
    .topbar .inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
    .brandbox{display:flex;align-items:center;gap:10px;min-width:240px}
    .brandtxt b{display:block;line-height:1.1}
    .brandtxt span{font-size:12px;color:var(--muted)}
    .nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .nav a{font-size:13px;color:var(--muted);padding:8px 10px;border-radius:999px;border:1px solid rgba(20,90,149,.12);background:rgba(255,255,255,.7);text-decoration:none; font-weight: 600}
    .nav a:hover{border-color:rgba(20,90,149,.30);color:var(--text);box-shadow:0 10px 18px rgba(20,90,149,.10)}
    .ctaRow{display:flex;gap:10px;align-items:center}
    .btn{cursor:pointer;border:0;border-radius:999px;padding:10px 14px;font-weight:850;color:var(--ink); font-family:var(--font);
      background:linear-gradient(135deg,var(--brand),#ffe95c);box-shadow:0 14px 28px rgba(251,220,5,.28);
      transition:transform .12s ease;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none}
    .btn:hover{transform:translateY(-1px)}
    .btn.ghost{color:var(--brand2);background:rgba(20,90,149,.08);border:1px solid rgba(20,90,149,.20);box-shadow:none}
    .btn.ghost:hover{background:rgba(20,90,149,.12);border-color:rgba(20,90,149,.35)}
    .layout{position:relative;z-index:1;display:grid;grid-template-columns:340px minmax(0,1fr) 340px;gap:16px;max-width:1400px;margin:0 auto;padding:18px 16px 40px}
    .side{position:sticky;top:88px;align-self:start;height:calc(100vh - 108px);border-radius:var(--radius2);overflow:hidden;box-shadow:var(--shadow);
      border:1px solid rgba(20,90,149,.12);background:rgba(255,255,255,.85);display:flex;flex-direction:column}
    .side .img{height:58%;min-height:220px;background-size:cover;background-position:center;position:relative}
    .side .img:after{content:"";position:absolute;inset:0;}
    .side .body{padding:16px;display:flex;flex-direction:column;gap:10px;overflow:auto;-webkit-overflow-scrolling:touch}
    .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;border:1px solid rgba(20,90,149,.15);background:rgba(255,255,255,.75);color:var(--muted);font-size:12px;width:fit-content}
    .pill b{color:var(--text)}
    .side h3{margin:2px 0 0;font-size:16px;letter-spacing:-.2px}
    .side p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
    .list{margin:0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.65}
    .list li{margin:6px 0}
    .hl{color:var(--brand2);font-weight:900}
    .hl2{color:var(--ink);font-weight:900}
    .center{min-height:100vh}
    .centerCard{border-radius:var(--radius2);border:1px solid rgba(20,90,149,.12);background:rgba(255,255,255,.90);box-shadow:var(--shadow2);overflow:hidden}
    .heroCenter{padding:22px 22px 16px;background:
      radial-gradient(700px 420px at 15% 0%, rgba(20,90,149,.14), transparent 62%),
      radial-gradient(700px 420px at 90% 0%, rgba(251,220,5,.18), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
      border-bottom:1px solid rgba(20,90,149,.10)}
    h1{margin:10px 0 10px;font-size:34px;letter-spacing:-0.7px;line-height:1.1;color:var(--ink)}
    .sub{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.7}
    .countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;max-width:520px;}
    .countBox{border-radius:16px;padding: 20px 25px 20px 25px;background:rgba(20,90,149,.06);border:1px solid rgba(20,90,149,.12);text-align:center}
    .countNum{font-size:22px;font-weight:1000;color:var(--brand2)}
    .countLbl{font-size:11px;color:var(--muted);margin-top:4px}
    .content{padding:18px 22px 26px}
    section{padding:12px 0 18px}
    .sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 0 12px}
    h2{margin:0;font-size:18px;letter-spacing:-.2px;color:var(--ink)}
    .sectionHead p{margin:0;font-size:12px;color:var(--muted)}
    .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .card{border-radius:var(--radius);border:1px solid rgba(20,90,149,.12);background:#fff;box-shadow:0 12px 24px rgba(20,90,149,.06);padding:16px}
    .card h4{margin:0 0 8px;font-size:14px;color:var(--ink)}
    .card p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
    .tag{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:7px 10px;border-radius:999px;border:1px solid rgba(20,90,149,.12);background:rgba(20,90,149,.06);color:var(--muted);font-size:12px;width:fit-content}
    .dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 8px 16px rgba(20,90,149,.18);display:inline-block}
    .offerBox{border-radius:var(--radius);border:1px solid rgba(20,90,149,.12);background:radial-gradient(500px 260px at 100% 0%, rgba(251,220,5,.16), transparent 60%), #fff;box-shadow:0 12px 24px rgba(20,90,149,.08);padding:16px}
    .offerTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
    .badge{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:rgba(20,90,149,.08);border:1px solid rgba(20,90,149,.16);color:var(--brand2);font-size:12px;font-weight:900}
    .badge.primary{background:rgba(251,220,5,.30);border-color:rgba(251,220,5,.50);color:var(--ink)}
	.whyGrid{
	  display:grid;
	  grid-template-columns:repeat(2,minmax(0,1fr));
	  gap:16px;
	}
	
	.whyCard{
	  padding:0;
	  overflow:hidden;
	  border-radius:24px;
	  border:1px solid rgba(20,90,149,.10);
	  background:#fff;
	  box-shadow:0 12px 28px rgba(20,90,149,.06);
	  display:flex;
	  flex-direction:column;
	}
	
	.whyCard .thumb{
	  width:100%;
	  overflow:hidden;
	  background:#f5f7fb;
	}
	
	.whyCard .thumb img{
	  display:block;
	  width:100%;
	  height:auto;
	  max-width:100%;
	}
	
	.whyCard .content{
	  padding:10px;
	  display:flex;
	  flex-direction:column;
	  gap:12px;
	}
	
	.whyCard h4{
	  margin:0;
	  font-size:18px;
	  line-height:1.4;
	  font-weight:800;
	}
	
	.whyCard p{
	  margin:0;	  
	  line-height:1.8;
	  color:var(--muted);
	}
	
	.whyCard .tag{
	  margin-top:auto;
	  display:inline-flex;
	  align-items:center;
	  gap:8px;
	  width:fit-content;
	  padding:10px 16px;
	  border-radius:999px;
	  border:1px solid rgba(20,90,149,.12);
	  background:#f4f7fb;
	  color:#5f7085;
	  font-size:14px;
	}
	
	.whyCard .dot{
	  width:10px;
	  height:10px;
	  border-radius:50%;
	  background:#b7aa29;
	  display:inline-block;
	}
	
	@media (max-width: 767px){
	  .whyGrid{
	    grid-template-columns:1fr;
	  }
	}
	.products{
	  display:grid;
	  grid-template-columns:repeat(2,minmax(0,1fr));
	  gap:20px;
	}
	
	.product{
	  background:#fff;
	  border:1px solid rgba(20,90,149,.12);
	  border-radius:var(--radius);
	  overflow:hidden;
	  display:flex;
	  flex-direction:column;
	  box-shadow:0 12px 24px rgba(20,90,149,.06);
	}
	
	.product .thumb{
	  width:100%;
	  max-width:100%;
	  overflow:hidden;
	  background:#f5f7fb;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	}
	
	.product .thumb img{
	  display:block;
	  width:100%;
	  height:auto;
	  max-width:100%;
	  object-fit:contain;
	}
	

	
	.product .body{
	  padding:12px;
	  display:flex;
	  flex-direction:column;
	  gap:10px;
	}
	
	.product .tag{
	  display:inline-block;
	  font-size:12px;
	  font-weight:700;
	  color:#5b6470;
	  background:#f3f4f6;
	  padding:6px 10px;
	  border-radius:999px;
	  width:fit-content;
	}
	
	.product .product-title{
	  font-size:18px;
	  line-height:1.4;
	  color:var(--ink);
	  font-weight:800;
	}
	
	.product .body p{
	  margin:0;
	  font-size:13px;
	  color:var(--muted);
	  line-height:1.55;
	}
	
	.product .meta{
	  display:flex;
	  align-items:center;
	  justify-content:space-between;
	  gap:10px;
	  margin-top:10px;
	  flex-wrap:wrap;
	}
	
	.product .small{
	  font-size:13px;
	  color:var(--muted);
	}
	
	.product .btn.ghost{
	  display:inline-flex;
	  align-items:center;
	  justify-content:center;
	  gap:8px;
	  padding:12px 18px;
	  min-height:44px;
	  border-radius:999px;
	  border:1px solid #c7d7ea;
	  background:linear-gradient(180deg, #ffffff 0%, #eef5fc 100%);
	  color:#145a95;
	  font-size:16px;
	  font-weight:700;
	  line-height:1;
	  text-decoration:none;
	  box-shadow:0 6px 14px rgba(20,90,149,.10);
	  transition:all .25s ease;
	}
	
	.product .btn.ghost:hover{
	  transform:translateY(-2px);
	  border-color:#145a95;
	  background:linear-gradient(180deg, #145a95 0%, #0f4a7c 100%);
	  color:#fff;
	  box-shadow:0 10px 22px rgba(20,90,149,.22);
	}
	
	.product .btn.ghost:active{
	  transform:translateY(0);
	  box-shadow:0 4px 10px rgba(20,90,149,.18);
	}
	
	.product .btn.ghost:focus-visible{
	  outline:none;
	  box-shadow:0 0 0 4px rgba(20,90,149,.18);
	}
	
	.miniGrid{
	  display:grid;
	  grid-template-columns:repeat(2,minmax(0,1fr));
	  gap:16px;
	}
	
	.miniCard{
	  position:relative;
	  display:flex;
	  flex-direction:column;
	  background:#fff;
	  border:1px solid rgba(20,90,149,.12);
	  border-radius:24px;
	  overflow:hidden;
	  box-shadow:0 12px 28px rgba(20,90,149,.06);
	}
	
	.miniCard .thumb{
	  width:100%;
	  overflow:hidden;
	  background:#eef4fb;
	}
	
	.miniCard .thumb img{
	  display:block;
	  width:100%;
	  height:auto;
	  max-width:100%;
	}
	
	.miniCard .content{
	  position:relative;
	  padding:12px 10px 10px;
	  display:flex;
	  flex-direction:column;	 
	  min-height:200px;
	  background:
	    radial-gradient(220px 120px at 10% 100%, rgba(89,159,255,.10), transparent 60%),
	    radial-gradient(240px 140px at 100% 100%, rgba(255,191,0,.08), transparent 60%),
	    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	}
	
	.miniCard h4{
	  margin:0;	  
	  line-height:1.35;
	  font-weight:800;
	  color:var(--ink);
	}
	
	.miniCard ol,
	.miniCard ul{
	  margin:0;
	  padding-left:22px;
	}
	
	.miniCard ol li,
	.miniCard ul li{	  	  
	  line-height:1.75;
	  color:var(--muted);
	}
	
	.miniCard p{font-size: 13px; line-height:1.75;}
	
	.miniCard .prizeList li{
	  color:#e53935;
	  font-weight:500;
	}
	
	.miniBtn{
	  margin-top:auto;
	  display:inline-flex;
	  align-items:center;
	  justify-content:center;
	  width:fit-content;
	  min-height:48px;
	  padding:12px 22px;
	  border-radius:999px;
	  text-decoration:none;
	  font-size:16px;
	  font-weight:800;
	  color:#145a95;
	  background:linear-gradient(180deg, #ffffff 0%, #edf5fd 100%);
	  border:1px solid #bdd2e7;
	  box-shadow:0 8px 18px rgba(20,90,149,.10);
	  transition:all .25s ease;
	}
	
	.miniBtn:hover{
	  transform:translateY(-2px);
	  color:#fff;
	  background:linear-gradient(135deg, #145a95 0%, #1f6fb3 100%);
	  border-color:#145a95;
	  box-shadow:0 12px 24px rgba(20,90,149,.20);
	}
	
	@media (max-width: 767px){
	  .miniGrid{
	    grid-template-columns:1fr;
	  }
	
	  .miniCard .content{
	    min-height:auto;
	  }
	}
	
	.miniCard:first-child .content{
	  background:
	    radial-gradient(240px 140px at 0% 100%, rgba(80,145,255,.14), transparent 60%),
	    radial-gradient(240px 140px at 100% 100%, rgba(165,120,255,.10), transparent 60%),
	    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
	}
	
	.miniCard:last-child .content{
	  background:
	    radial-gradient(240px 140px at 0% 100%, rgba(255,170,120,.16), transparent 60%),
	    radial-gradient(240px 140px at 100% 100%, rgba(255,220,120,.14), transparent 60%),
	    linear-gradient(180deg, #fffdfb 0%, #fff8f3 100%);
	}
	
	@media (max-width: 991px){
	  .products{
	    grid-template-columns:repeat(2,minmax(0,1fr));
	  }
	}
	
	@media (max-width: 640px){
	  .products{
	    grid-template-columns:1fr;
	  }
	}
    .small{font-size:12px;color:var(--muted)}
    .formCard{border-radius:var(--radius2);border:1px solid rgba(20,90,149,.12);background:#fff;box-shadow:0 12px 28px rgba(20,90,149,.08);padding:16px}
    label{display:block;font-size:12px;color:var(--muted);margin:10px 0 6px}
    input,select,textarea{width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(20,90,149,.18);background:#fff;color:var(--ink);outline:none;font-size:14px}
    textarea{min-height:98px;resize:vertical}
    input:focus,select:focus,textarea:focus{border-color:rgba(20,90,149,.42);box-shadow:0 0 0 3px rgba(20,90,149,.10)}
    .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .formActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
    .msg{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.5}
    .msg.ok{color:#0f8a4b;font-weight:800}
    .msg.err{color:#d43b3b;font-weight:800}
    .footer{margin-top:16px;padding-top:14px;border-top:1px solid rgba(20,90,149,.10);color:var(--muted);font-size:12px;line-height:1.6}
    .floating{position:fixed;right:14px;bottom:14px;z-index:60;display:flex;flex-direction:column;gap:10px}
    .fab{width:35px;height:38px;padding: 10px 0px 0px 10px;border-radius:16px;border:1px solid rgba(20,90,149,.18);background:rgba(255,255,255,.88);box-shadow:0 16px 30px rgba(20,90,149,.14);display:grid;place-items:center;cursor:pointer;user-select:none;text-decoration:none;color:inherit}
    .fab:hover{border-color:rgba(20,90,149,.35);transform:translateY(-1px)}
    @media (max-width:1200px){.layout{grid-template-columns:300px minmax(0,1fr) 300px}}
    @media (max-width:980px){
      .nav{display:none}
      .layout{grid-template-columns:1fr;max-width:var(--max)}
      .side{position:relative;top:auto;height:auto}
      .side .body{overflow:visible}
      .products{grid-template-columns:1fr 1fr}
    }
    @media (max-width:640px){
      h1{font-size:28px}
      .grid2{grid-template-columns:1fr}
      .row2{grid-template-columns:1fr}
      .products{grid-template-columns:1fr}
      .topbar .inner{align-items:flex-start}
      .brandbox{min-width:unset}
    }
  /* Fix: force hide when [hidden] */
.menuOverlay[hidden],
.mobileMenu[hidden]{
  display: none !important;
}

/* ===== Hamburger + Drawer ===== */
.hamburger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border: 1px solid rgba(20,90,149,.18);
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 20px rgba(20,90,149,.10);
  cursor:pointer;
  padding:10px;
}
.hamburger span{
  display:block;
  height:2px;
  background: var(--brand2);
  border-radius: 99px;
  margin: 6px 0;
}

/* ===== Fix: show hamburger on mobile + keep header CTA visible ===== */
@media (max-width: 980px){
  .hamburger{
    display: inline-flex !important;
    align-items:center;
    justify-content:center;
    flex: 0 0 auto;
  }
  .topbar .inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .ctaRow--mobile{
    display:flex !important;
    gap:8px;
    flex: 0 0 auto;
  }
  .nav{ display:none !important; }
  .btn--compact{
    padding: 9px 10px;
    font-size: 13px;
  }
}
@media (max-width: 420px){
  #btnQuote{ display:none !important; }
}
.heroImageBanner.fullBleed{
  width:100%;
  padding:0;
  margin:0;
}

.heroImageBanner.fullBleed .heroImageLink{
  display:block;
  width:100%;
}

.heroImageBanner.fullBleed img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
.heroCenter{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.heroCenter .pill,
.heroCenter h1,
.heroCenter .sub{
  text-align: center;
}

.heroCenter .countdown{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin: 0 auto;
}

.heroCenter .countBox{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.heroCenter .formActions{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin: 14px auto 0;
}

.heroCenter .formActions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.corlor-red{color:red !important}
.corlor-blue{color:blue !important}
.corlor-yellow{color:yellow !important}
.corlor-orange{color:orange !important}
.corlor-green{color:green !important}
.corlor-logo {color: #f3aa04 !important;}