/* =========================================================
   VAAN Technologies — Design Tokens
   Primary:   #0A3D91 (Deep Blue)
   Secondary: #00AEEF (Sky Blue)
   Accent:    #FF9800 (Orange)
   Background:#F8FAFC
   Text:      #212529
   ========================================================= */
:root{
  --primary:#0A3D91;
  --primary-dark:#072a66;
  --secondary:#00AEEF;
  --accent:#FF9800;
  --bg:#F8FAFC;
  --text:#212529;
  --muted:#6C7A89;
  --white:#ffffff;
  --radius:10px;
  --shadow:0 10px 30px rgba(10,61,145,0.08);
  --font-head:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{box-sizing:border-box;}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head); font-weight:700; color:var(--primary-dark);}
a{text-decoration:none; color:var(--primary);}
a:hover{color:var(--secondary);}
section{padding:80px 0;}
.section-tight{padding:50px 0;}

/* ---------- Top bar ---------- */
.topbar{background:var(--primary-dark); color:#dce8fa; font-size:.85rem; padding:8px 0;}
.topbar a{color:#dce8fa; margin-right:22px;}
.topbar a:hover{color:var(--accent);}
.topbar-tag{color:#a9c4ec; white-space:nowrap;}
.topbar-portal-link{
  color:#fff !important; font-weight:600; margin-right:0 !important; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; padding:4px 14px; border-radius:20px;
  background:rgba(255,255,255,.12); transition:.2s;
}
.topbar-portal-link:hover{background:rgba(255,255,255,.22); color:#fff !important;}

/* ---------- Navbar ---------- */
.navbar-main{background:var(--white); box-shadow:0 2px 12px rgba(10,61,145,0.08); padding:14px 0;}
.navbar-brand{display:flex; align-items:center; gap:10px; font-family:var(--font-head);}
.navbar-brand .brand-mark svg{width:30px; height:28px; display:block;}
.navbar-brand .brand-text{display:flex; flex-direction:column; line-height:1;}
.navbar-brand .brand-text strong{font-size:1.25rem; font-weight:800; color:#0c1b33; letter-spacing:.3px;}
.navbar-brand .brand-text small{font-size:.6rem; font-weight:600; letter-spacing:2.5px; color:var(--muted); margin-top:2px;}
.navbar-logo{height:42px; width:auto; object-fit:contain;}
.navbar-nav .nav-link{font-weight:600; color:var(--text); margin:0 2px; padding:8px 12px !important; border-radius:30px; border:1px solid transparent; transition:.2s; white-space:nowrap;}
.navbar-nav .nav-link:hover{color:var(--primary); background:#f4f8fd;}
.navbar-nav .nav-link.active{color:var(--primary); background:#f4f8fd; border-color:#dde8f7;}
.btn-cta{
  background:var(--accent); color:#fff !important; font-weight:600;
  padding:10px 24px; border-radius:50px; transition:.25s;
}
.btn-cta:hover{background:#e68900; transform:translateY(-2px);}
.btn-outline-brand{
  border:2px solid var(--white); color:var(--white); font-weight:600;
  padding:10px 26px; border-radius:50px; transition:.25s;
}
.btn-outline-brand:hover{background:var(--white); color:var(--primary);}
.btn-primary-brand{
  background:var(--secondary); color:#fff; font-weight:600;
  padding:10px 26px; border-radius:50px; border:none; transition:.25s;
}
.btn-primary-brand:hover{background:#0092c9; color:#fff;}

/* ---------- Mega Menu ---------- */
.mega-menu-parent{position:static;}
.mega-menu{
  width:100%; left:0; right:0; top:100%; border:none; border-radius:0 0 14px 14px;
  box-shadow:0 20px 40px rgba(10,61,145,.12); padding:30px 0; margin-top:0;
}
.mega-menu-grid{
  max-width:1200px; margin:0 auto; padding:0 24px; display:grid;
  grid-template-columns:repeat(4, 1fr) 260px; gap:28px; align-items:start;
}
.mega-menu-col-title{
  font-weight:700; color:var(--primary-dark); font-size:.85rem; text-transform:uppercase;
  letter-spacing:.4px; margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.mega-menu-col-title i{color:var(--secondary);}
.mega-menu-col a{display:block; color:var(--text); font-size:.88rem; padding:6px 0; text-decoration:none;}
.mega-menu-col a:hover{color:var(--secondary); padding-left:4px;}
.mega-menu-cta{
  background:linear-gradient(135deg, #f3e8ff 0%, #fff1e6 100%); border-radius:16px; padding:22px;
}
.mega-menu-cta h6{margin-bottom:6px; font-size:.95rem;}
@media(max-width:1199px){
  .mega-menu-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:auto;}
  .mega-menu-cta{grid-column:span 2;}
}
@media(max-width:991px){
  .mega-menu{position:static; box-shadow:none; padding:10px 0;}
  .mega-menu-grid{grid-template-columns:1fr; padding:0 12px;}
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(120deg, var(--primary) 0%, #0d4bb0 55%, var(--secondary) 130%);
  color:#fff; padding:110px 0 90px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(255,152,0,.28) 0%, transparent 70%);
}
.hero h1{color:#fff; font-size:2.75rem; font-weight:800; line-height:1.2;}
.hero p.lead{color:#dce8fa; font-size:1.15rem; max-width:640px;}
.hero-stats{margin-top:50px;}
.hero-stats .stat-num{font-family:var(--font-head); font-weight:800; font-size:2rem; color:var(--accent);}
.hero-stats .stat-label{color:#cfe0f7; font-size:.85rem; text-transform:uppercase; letter-spacing:.5px;}

/* ---------- Light hero (modern centered style) ---------- */
.hero-light{
  padding:110px 0 70px; text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,174,239,.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(255,152,0,.08) 0%, transparent 45%),
    #ffffff;
}
.hero-light-title{font-size:2.9rem; font-weight:800; line-height:1.2; color:#0c1b33; max-width:820px; margin:0 auto;}
.badge-live-dot{
  display:inline-flex; align-items:center; gap:8px; border:1px solid #e2e8f2; border-radius:30px;
  padding:8px 18px; font-size:.78rem; font-weight:700; letter-spacing:.6px; color:#5b6b82; background:#fff;
}
.badge-live-dot .dot{width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:dotPulse 1.8s infinite;}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.5);}
  70%{box-shadow:0 0 0 8px rgba(34,197,94,0);}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
}
.gradient-text{
  background:linear-gradient(90deg, var(--primary), var(--secondary) 55%, var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn-gradient{
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  color:#fff; font-weight:600; padding:12px 30px; border-radius:50px; border:none; transition:.25s;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.btn-gradient.btn-sm{padding:9px 20px; font-size:.88rem;}
.btn-gradient:hover{filter:brightness(1.08); color:#fff; transform:translateY(-2px);}
.btn-outline-brand-light{
  border:2px solid #dde3ea; color:var(--text); font-weight:600; padding:12px 28px; border-radius:50px; transition:.2s;
}
.btn-outline-brand-light:hover{border-color:var(--primary); color:var(--primary);}
.hero-stats-light .stat-num{font-family:var(--font-head); font-weight:800; font-size:1.7rem; color:var(--primary);}
.hero-stats-light .stat-label{color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.4px;}

/* ---------- Scrolling ticker bar ---------- */
.ticker-bar{background:#08213e; overflow:hidden; white-space:nowrap; padding:12px 0;}
.ticker-track{display:inline-flex; animation:tickerScroll 32s linear infinite;}
.ticker-bar:hover .ticker-track{animation-play-state:paused;}
.ticker-item{color:#cfe0f7; font-size:.85rem; font-weight:500; padding:0 40px; display:inline-flex; align-items:center; gap:8px;}
.ticker-item i{color:var(--accent);}
@keyframes tickerScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* ---------- Section heading ---------- */
.section-eyebrow{
  display:inline-block; color:var(--secondary); font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; font-size:.8rem; margin-bottom:10px;
}
.section-title{font-size:2rem; margin-bottom:14px;}
.section-sub{color:var(--muted); max-width:640px;}

/* ---------- Cards ---------- */
.service-card{
  background:#fff; border-radius:var(--radius); padding:32px 26px; height:100%;
  box-shadow:var(--shadow); transition:.25s; border-top:4px solid transparent;
}
.service-card:hover{transform:translateY(-6px); border-top-color:var(--accent);}
.service-card .card-image{
  width:100%; height:140px; object-fit:cover; border-radius:8px; margin-bottom:18px;
}
.service-card .icon-box{
  width:56px; height:56px; border-radius:14px; background:rgba(10,61,145,.08);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--primary); margin-bottom:18px;
}
.service-card h5{margin-bottom:10px; font-size:1.15rem;}
.service-card p{color:var(--muted); font-size:.93rem; margin-bottom:0;}
.service-card .badge-list span{
  display:inline-block; font-size:.72rem; background:#eef4fd; color:var(--primary);
  padding:3px 10px; border-radius:20px; margin:3px 4px 0 0;
}

.industry-card{
  background:#fff; border-radius:var(--radius); text-align:center; padding:30px 16px;
  box-shadow:var(--shadow); transition:.2s; height:100%;
}
.industry-card:hover{background:var(--primary); color:#fff;}
.industry-card:hover h6, .industry-card:hover i{color:#fff !important;}
.industry-card i{font-size:2rem; color:var(--secondary); margin-bottom:14px; display:block;}
.industry-card h6{font-weight:700; margin:0;}

.why-item{display:flex; gap:14px; align-items:flex-start; margin-bottom:22px;}
.why-item i{color:var(--accent); font-size:1.4rem; margin-top:2px;}
.why-item h6{margin-bottom:4px;}
.why-item p{color:var(--muted); font-size:.9rem; margin:0;}

.tech-badge{
  background:#fff; border-radius:10px; padding:18px 10px; text-align:center;
  box-shadow:var(--shadow); font-weight:600; color:var(--primary-dark); height:100%;
}

.portfolio-card{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#fff; height:100%;}
.portfolio-card img{width:100%; height:210px; object-fit:cover;}
.portfolio-card .body{padding:22px;}
.portfolio-card .tag{color:var(--secondary); font-weight:700; font-size:.75rem; text-transform:uppercase;}

.blog-card{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#fff; height:100%;}
.blog-card img{width:100%; height:190px; object-fit:cover;}
.blog-card .body{padding:20px;}
.blog-card .meta{color:var(--muted); font-size:.78rem;}

.testimonial-card{background:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); height:100%;}
.testimonial-card .stars{color:var(--accent);}
.testimonial-card .who{font-weight:700; margin-bottom:0;}
.testimonial-card .role{color:var(--muted); font-size:.82rem;}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  color:#fff; border-radius:var(--radius); padding:50px; margin-top:40px;
}
.cta-band h3{color:#fff; margin-bottom:6px;}
.cta-band p{color:#e4f2fd; margin-bottom:0;}

/* ---------- Department cards (Contact page) ---------- */
.dept-card{background:#fff; border-radius:16px; padding:26px; height:100%; box-shadow:var(--shadow); transition:.2s;}
.dept-card:hover{transform:translateY(-4px);}
.dept-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; margin-bottom:16px;
}
.tint-purple{background:#f3e8ff; color:#8b5cf6;}
.tint-teal{background:#e0f7f5; color:#0d9488;}
.tint-peach{background:#ffe9dc; color:#ea580c;}
.tint-pink{background:#fde2ea; color:#db2777;}
.dept-card h6{font-weight:700; margin-bottom:8px;}
.dept-link{color:var(--primary); font-weight:600; font-size:.85rem; display:inline-flex; align-items:center; gap:6px;}
.dept-link:hover{color:var(--secondary);}

/* ---------- Connect band + gradient border panel ---------- */
.connect-band{
  background:linear-gradient(120deg, #faf5ff 0%, #fff8f0 100%);
}
.gradient-border-panel{
  padding:2px; border-radius:18px;
  background:linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
}
.gradient-border-panel .contact-panel{border-radius:16px; margin:0; box-shadow:none;}
/* ---------- Terminal-style code card ---------- */
.code-card{background:#0d1117; border-radius:14px; overflow:hidden; box-shadow:0 20px 40px rgba(10,61,145,.18);}
.code-card-header{display:flex; align-items:center; gap:6px; padding:12px 16px; background:#161b22; border-bottom:1px solid #21262d;}
.code-card-header .dot{width:11px; height:11px; border-radius:50%; display:inline-block;}
.code-card-header .dot.red{background:#ff5f56;}
.code-card-header .dot.yellow{background:#ffbd2e;}
.code-card-header .dot.green{background:#27c93f;}
.code-card-filename{color:#8b949e; font-size:.78rem; margin-left:8px; font-family:monospace;}
.code-card-body{
  color:#c9d1d9; font-family:'Courier New',monospace; font-size:.82rem; line-height:1.7;
  padding:18px 16px; margin:0; white-space:pre-wrap; word-break:break-word;
}

.form-control, .form-select{
  border-radius:8px; border:1px solid #dde3ea; padding:12px 14px; font-size:.95rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--secondary); box-shadow:0 0 0 .2rem rgba(0,174,239,.15);
}
.form-label{font-weight:600; font-size:.88rem; margin-bottom:6px;}
.contact-panel{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:34px;}

/* ---------- Page header banner (inner pages) ---------- */
.page-banner{
  background:linear-gradient(120deg, var(--primary) 0%, #0d4bb0 100%);
  color:#fff; padding:60px 0; margin-bottom:10px;
}
.page-banner h1{color:#fff; font-size:2.1rem; margin-bottom:8px;}
.page-banner .breadcrumb{background:transparent; margin:0; padding:0;}
.page-banner .breadcrumb a{color:#cfe0f7;}
.page-banner .breadcrumb-item.active{color:#fff;}

/* ---------- Footer ---------- */
.site-footer{background:#08213e; color:#c7d6ea; padding:70px 0 24px; margin-top:40px;}
.site-footer h6{color:#fff; font-weight:700; margin-bottom:16px;}
.footer-brand{font-family:var(--font-head); font-weight:800; font-size:1.4rem; color:#fff; margin-bottom:14px;}
.footer-brand span{color:var(--accent);}
.footer-about{font-size:.88rem; color:#a9bcd6;}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{margin-bottom:10px; font-size:.9rem;}
.footer-links a{color:#a9bcd6;}
.footer-links a:hover{color:var(--secondary);}
.footer-contact li{display:flex; gap:8px; align-items:flex-start; color:#a9bcd6;}
.footer-divider{border-color:rgba(255,255,255,.1); margin:40px 0 18px;}
.footer-social a{
  display:inline-flex; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08);
  align-items:center; justify-content:center; margin-right:8px; color:#fff;
}
.footer-social a:hover{background:var(--accent);}
.small-text{font-size:.82rem; color:#8fa3c2;}

/* ---------- Floating buttons ---------- */
.whatsapp-float{
  position:fixed; bottom:26px; right:26px; width:58px; height:58px; background:#25D366;
  color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:999;
}
.back-to-top{
  position:fixed; bottom:26px; right:96px; width:44px; height:44px; background:var(--primary);
  color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.2); z-index:999; opacity:0; visibility:hidden; transition:.25s;
}
.back-to-top.show{opacity:1; visibility:visible;}

/* ---------- AI Chat Widget ---------- */
.ai-chat-float{
  position:fixed; bottom:96px; right:26px; width:58px; height:58px; background:var(--primary);
  color:#fff; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:999; cursor:pointer;
}
.ai-chat-float:hover{background:var(--primary-dark);}
.ai-chat-greeting{
  position:fixed; bottom:162px; right:26px; background:#fff; border-radius:14px 14px 4px 14px;
  padding:12px 16px; box-shadow:0 10px 30px rgba(0,0,0,.15); z-index:998; max-width:220px;
  animation:greetingIn .4s ease .6s both, greetingOut .4s ease 8s forwards;
}
.ai-chat-greeting.hidden{display:none;}
.ai-chat-greeting strong{display:block; font-size:.85rem;}
.ai-chat-greeting span{font-size:.8rem; color:var(--muted);}
@keyframes greetingIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
@keyframes greetingOut{to{opacity:0; visibility:hidden;}}
@media(max-width:576px){ .ai-chat-greeting{display:none;} }
.ai-chat-panel{
  position:fixed; bottom:96px; right:26px; width:340px; max-width:90vw; height:460px; max-height:70vh;
  background:#fff; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.25); z-index:1000;
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(20px); transition:.2s;
}
.ai-chat-panel.open{opacity:1; visibility:visible; transform:translateY(0);}
.ai-chat-header{
  background:linear-gradient(120deg, var(--primary), var(--secondary)); color:#fff; padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center;
}
.ai-chat-messages{flex:1; overflow-y:auto; padding:14px; background:#f8fafc;}
.ai-msg{max-width:85%; padding:10px 14px; border-radius:14px; margin-bottom:10px; font-size:.88rem; line-height:1.5;}
.ai-msg.from-bot{background:#eef4fd; color:var(--text); border-bottom-left-radius:4px;}
.ai-msg.from-user{background:var(--primary); color:#fff; margin-left:auto; border-bottom-right-radius:4px;}
.ai-msg.ai-typing{opacity:.6; font-style:italic;}
.ai-chat-input{display:flex; border-top:1px solid #eee; padding:10px;}
.ai-chat-input input{flex:1; border:1px solid #dde3ea; border-radius:20px; padding:8px 14px; font-size:.88rem; outline:none;}
.ai-chat-input button{background:var(--accent); color:#fff; border:none; width:38px; height:38px; border-radius:50%; margin-left:8px; flex-shrink:0;}
@media(max-width:576px){
  .ai-chat-panel{right:12px; bottom:170px; width:calc(100vw - 24px);}
  .ai-chat-float{right:12px;}
}

/* ---------- Misc ---------- */
.badge-soft{background:#eef4fd; color:var(--primary); font-weight:600; padding:6px 14px; border-radius:20px; font-size:.78rem;}
.timeline-dot{width:12px; height:12px; border-radius:50%; background:var(--accent); display:inline-block; margin-right:8px;}

/* ---------- Managed IT Support Hub (infographic-style showcase) ---------- */
.support-hub-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px;}
.support-hub-node{
  background:#fff; border-radius:50px; padding:12px 20px 12px 12px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:16px; transition:.2s; position:relative;
}
.support-hub-node:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(10,61,145,.12);}
.support-hub-icon{
  width:56px; height:56px; min-width:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; border:3px solid transparent;
}
.support-hub-icon.c-blue{background:#eaf1fb; color:var(--primary); border-color:var(--primary);}
.support-hub-icon.c-cyan{background:#e6f8fe; color:var(--secondary); border-color:var(--secondary);}
.support-hub-icon.c-purple{background:#f2ecfb; color:#6f42c1; border-color:#6f42c1;}
.support-hub-icon.c-green{background:#e9f7ef; color:#198754; border-color:#198754;}
.support-hub-icon.c-orange{background:#fff2e0; color:var(--accent); border-color:var(--accent);}
.support-hub-icon.c-red{background:#fbe9ea; color:#dc3545; border-color:#dc3545;}
.support-hub-text h6{margin:0 0 2px; font-size:.95rem; color:var(--primary-dark);}
.support-hub-text p{margin:0; font-size:.78rem; color:var(--muted); line-height:1.4;}
.support-hub-badge{
  margin-left:auto; flex-shrink:0; width:40px; height:40px; border-radius:50%; border:2px dashed #cbd8ea;
  display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; color:var(--muted);
}
@media(max-width:767px){
  .support-hub-grid{grid-template-columns:1fr;}
  .support-hub-node{border-radius:16px;}
}

/* ---------- Rich content (service detail, blog post) ---------- */
.service-full-desc h5, .blog-content h5{color:var(--primary); font-weight:700; margin-top:28px; margin-bottom:12px; font-size:1.1rem;}
.service-full-desc h5:first-child, .blog-content h5:first-child{margin-top:0;}
.service-full-desc p, .blog-content p{color:var(--text); margin-bottom:14px; line-height:1.75;}
.service-full-desc ul, .blog-content ul{padding-left:0; list-style:none; margin-bottom:18px;}
.service-full-desc ul li, .blog-content ul li{
  position:relative; padding:8px 0 8px 30px; border-bottom:1px solid #eef1f5; font-size:.95rem;
}
.service-full-desc ul li::before, .blog-content ul li::before{
  content:"\f26b"; font-family:"bootstrap-icons"; position:absolute; left:0; top:8px; color:var(--secondary);
}
.service-full-desc ul li:last-child, .blog-content ul li:last-child{border-bottom:none;}

@media(max-width:991px){
  .hero{padding:80px 0 60px;}
  .hero h1{font-size:2.1rem;}
  section{padding:56px 0;}
}