:root{
    --brand:#101b2c; --brand-600:#1a2b46;
    --teal:#24a7ad; --teal-700:#178f93;
    --ink:#0f172a; --muted:#64748b; --soft:#f3f5f7; --card:#ffffff;
    --yellow: #ffc20b;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{ margin:0; font-family:"Roboto", sans-serif; color:var(--ink); background:#fff}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  p { line-height: 20px;}
 
  .fw-500 { font-weight: 500;}

  .pt-0 { padding-top: 0;}
  .pb-0 { padding-bottom: 0 !important;}  
  .p-2 { padding: .5em !important;} 
  .mt-0 { margin-top: 0;}
  .mt-1 { margin-top: .5em;}
  .mt-2 { margin-top: 1.0em !important;}
  .mt-3 { margin-top: 1.5em !important;}

  .mb-2 { margin-bottom: 1.0em !important;}
  .mb-3 { margin-bottom: 1.5em !important;}
  .mb-4 { margin-bottom: 2.0em !important;}
  .mb-5 { margin-bottom: 2.5em !important;}
  .mb-1 { margin-bottom: .5em;}
  .mb-0 { margin-bottom: 0;}

  .text-14 { font-size:14px}
  .text-15 { font-size:15px}

  .pera-li ul {margin-bottom: 30px;}
  .pera-li ul li { margin-bottom: 8px;}

  .container{max-width:1180px;margin:0 auto;padding:0 20px}
  header{position:sticky;top:0;z-index:50;background:#fff;backdrop-filter:blur(10px);border-bottom:0px solid #e5e7eb; box-shadow: 0px 0px 6px #dbdbdb;}
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px; }

  .brand{display:flex; flex-flow: column;}
  .brand span.tagline{ font-size: 10px; }
  .brand img{height:44px;width:auto}

  .menu { display:flex; align-items:center; gap:1rem}
  .menu a { font-weight: 600;  padding: 8px 8px; border-radius: 10px; }
  .menu a.active{background:#e5f0f0; color: var(--teal-700); border:1px solid  var(--teal-700)}
  .nav-toggle { display: none; background: none; border: none; font-size: 2rem; cursor: pointer; color: #101b2c; }
  
  .menu-inner a { font-weight: 600; padding: 8px 8px; border-radius: 10px; }

  .btn-hover-teel:hover { background: var(--teal-700) !important; }

  .btn{display:inline-flex;align-items:center;gap:.5rem;border:0;cursor:pointer;font-weight:700;color:#fff;background:#364a6a;border-radius:14px;padding:0.65rem 1rem;box-shadow:0 12px 24px rgba(2,6,23,.12);transition:background .18s,transform .12s,box-shadow .18s}
  .btn:hover{background:var(--brand-600);transform:translateY(-1px);box-shadow:0 18px 36px rgba(2,6,23,.18)}  
  .btn.android {background-color: black; cursor: pointer;}
  .btn.android:hover {background-color: black;transform:translateY(-1px)}
  .btn.alt{background:var(--teal);box-shadow:0 12px 24px rgba(23,143,147,.18)}
  .btn.alt:hover{background:var(--teal-700); color: #fff;}
  .hero{color:#fff;background:linear-gradient(135deg,var(--brand) 0%,#162742 55%,var(--teal-700) 120%);padding:80px 0}
  .hero-inner{display:grid;grid-template-columns:1.0fr 1.0fr;gap:48px}
  .banner-img { background: url(images/board-img.jpg) no-repeat bottom; height: 100%; width: 100%; background-size: cover; border-radius: 10px;}

  .spinner {
    border: 2px solid #f3f3f3; /* Light grey */
    border-top: 2px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 14px;
    height: 14px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  
  .eyebrow{display:inline-flex;gap:.5rem;font-size:.8rem;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);padding:.35rem .6rem;border-radius:999px}
  .lead{max-width:62ch; margin-bottom: 1.0em;}
  .cta{display:flex;gap:.8rem;margin-top:2rem;flex-wrap:wrap}
  .kpis{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
  .kpi{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);padding:6px 12px;border-radius:12px;font-size:.92rem}
  section{padding:90px 0; scroll-margin-top: 50px;}
  .section-title{text-align:center;width: 70%; margin: 0 auto 18px;}
  .section-title h2{margin:0;color: #176c78}
  
  
  .muted{color:var(--muted)}
  .stars { color: var(--yellow); font-size: 18px;}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .card{background:var(--card);border:1px solid #e5e7eb;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(2,6,23,.06);transition:transform .18s,box-shadow .18s,border-color .18s}
  .card ul { margin-bottom: 0; }
  .card ul li { margin-bottom: 6px; }
  .card:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(2,6,23,.10);border-color:#dbeafe}
  .icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#e0f7f8;color:var(--teal)}
  footer{background:var(--brand);color:#fff;padding:28px 0;}
  footer h4 {font-size: 20px; margin-top: 15px; font-weight: 500;}
  
  .foot{ display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr; gap:22px}
  footer a{  margin-bottom: 7px; display: inline-block; color: #ccc; }
  footer a:hover{ color: #fff; }

  .copyrightbg { background: #2d3a4d; padding: 10px 0; color: var(--soft); text-align: center; font-size: 14px;}

  .field-style { width: 100%;padding:12px 14px;border-radius:12px;border:1px solid #b0c2db; font-family:"Roboto", sans-serif; font-size: 14px; }
  .field-style-textarea { width: 100%;padding:12px 14px;border-radius:12px;border:1px solid #b0c2db; font-family:"Roboto", sans-serif; font-size: 14px;  }
  .form-group {
    display: inline-block;
    width: 49.5%;
    vertical-align: top;
    margin-bottom: 15px;
  }
  .form-group.full {
    width: 100%;
  }

  /* FAQ */
  .faq{display:grid;grid-template-columns:1fr 1fr;gap:16px; align-items: start;}
  details{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px}
   
  .contact-grid { display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
  
  details summary { list-style: none; }
  details summary::-webkit-details-marker {  display: none; }
  details summary::marker { display: none; }
  details summary { padding-left: 20px; position: relative; }
  details summary::before { content: "▶"; position: absolute;left: 0; top: 0; font-size: 14px; transition: transform 0.2s ease; color: var(--teal-700); }
  /* rotate arrow when open */
  details[open] summary::before { transform: rotate(90deg); }


  /* see more */
  .align-items-start { align-items: start;}
  .see-more-text { height: 155px;  overflow: hidden;  transition: height 0.3s ease; /* Smooth transition */ }
  .see-more { color: #24a7ad; cursor: pointer; font-weight: 500; display: inline-block; margin-top: 10px; font-size: 14px;}


  /*notification message */
  #form-notification { font-family: "Roboto", sans-serif; position: fixed; top: 20px; right: 20px;  background: #d4edda;  
    color: #155724; padding: 12px 18px; border-radius: 6px; font-size: 12px; border: 1px solid #c3e6cb; box-shadow: 0px 4px 10px rgba(0,0,0,0.15);
    z-index: 9999; max-width: 400px; text-align: left; opacity: 0; transform: translateX(120%); transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
  #form-notification .head{ font-size: 14px; font-weight: 500; margin-bottom: 2px;}
  #form-notification.show { opacity: 1; transform: translateX(0); /* slide in */ }
  #form-notification.error {  background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
  .error-text { color: red; font-size: 14px; font-family:"Roboto", sans-serif; }


  #goTopBtn { display: none; position: fixed; bottom: 20px;right: 20px; z-index: 1000;font-size: 18px; background: var(--teal); color: #fff; border: none;
  outline: none; padding: 7px 11px; border-radius: 10px; cursor: pointer; transition: opacity 0.3s ease; }
  #goTopBtn:hover { background: var(--teal-700); }



ul.footer-address { font-size:15px; padding-left: 25px; }
ul.footer-address li:first-child{ border-bottom: 1px solid #3d5170 !important; padding: 0px 0 14px 0; }

.address-grid {display:grid;grid-template-columns:1fr 2fr; gap:16px; align-items: start;}


/* Mobile styles */
@media (max-width:980px) {
  .hero-inner{grid-template-columns:1fr}

  .banner-img {  height: 300px; }

  .menu-inner { display: flex !important; }
  
  .menu { display: none; flex-direction: column; gap: 0; background: #101b2c; position: absolute; top: 70px; right: 0; width: 100%; text-align: center; padding: 1rem 0; }
  .menu.show { display: flex; border-bottom: 1px solid var(--muted); box-shadow: 0px 3px 3px #ccc; }
  .nav-toggle { display: block; }
  .menu a { color: white; padding: 0.5rem; display: block; width: calc(100% - 30px); text-align: left; }
  .menu a.active { border:0px solid  var(--teal-700)}

  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  
  .address-grid {grid-template-columns:1fr;     gap: 0px;}

}
  
@media (max-width:767px){
  .mt-3 { margin-top: 1em !important;}
  .mb-3 { margin-bottom: 1em !important;}
 
  .hero { padding: 60px 0; }

  .contact-grid { grid-template-columns:1fr;}
  .section-title{width: 100%;}
  section{padding:60px 0; }
 
  footer h4 { margin-top: 0px; margin-bottom: 10px;}
  .foot { grid-template-columns: 1fr 1fr 1fr;}
  .foot > div:first-child { grid-column: 1 / -1; }
}
  

@media (max-width:620px) { 
  #form-notification {
    font-size: 14px;
    padding: 12px 18px;
    width: 95%;
  }
  .form-group { width: 100%;margin-bottom: 5px;}
  .faq{grid-template-columns:1fr}
  .grid-3{ grid-template-columns:1fr}
}

@media (max-width:520px) {
  .foot { grid-template-columns: 1fr; }
}