/* =========================================================
   KARANexTech - Public Site Stylesheet
   Brand colors extracted from company logo.
   ========================================================= */

:root{
  --brand-cyan: #17E2E2;
  --brand-cyan-dark: #0EC6C6;
  --brand-blue: #1565D8;
  --brand-blue-dark: #0D4AA8;
  --brand-navy: #0B1F3A;
  --brand-navy-2: #132A4D;
  --brand-light: #F4F8FB;
  --brand-gray: #5B6B7F;
  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(11, 31, 58, 0.08);
  --shadow-strong: 0 20px 45px rgba(11, 31, 58, 0.18);
}

body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--brand-navy);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--brand-blue); text-decoration: none; }
a:hover{ color: var(--brand-blue-dark); }

h1, h2, h3, h4, h5, h6{ font-weight: 700; color: var(--brand-navy); }

.site-main{ padding-top: 76px; }

/* ---------- Header / Nav ---------- */
.navbar{ padding-top: .7rem; padding-bottom: .7rem; }
.brand-logo{ height: 42px; width: auto; }
.navbar-nav .nav-link{
  color: var(--brand-navy);
  font-weight: 600;
  font-size: .95rem;
  padding: .5rem .9rem !important;
  border-radius: 8px;
  transition: all .2s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  color: var(--brand-blue-dark);
  background: rgba(23, 226, 226, .12);
}

.btn-brand-gradient{
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-blue));
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-brand-gradient:hover{
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(21, 101, 216, .3);
}
.btn-brand-outline{
  border: 2px solid var(--brand-blue);
  color: var(--brand-blue);
  font-weight: 600;
  border-radius: 8px;
  background: transparent;
}
.btn-brand-outline:hover{
  background: var(--brand-blue);
  color: #fff;
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-2) 60%, var(--brand-blue-dark) 100%);
  color: #fff;
  overflow: hidden;
}
.hero::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(23,226,226,.25), transparent 50%);
  pointer-events: none;
}
.hero-bg-image{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .22;
}
.hero .eyebrow{
  color: var(--brand-cyan);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
}
.hero h1{ color: #fff; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.15; }
.hero p.lead{ color: rgba(255,255,255,.82); font-size: 1.15rem; }

.tech-grid-overlay{
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}

/* ---------- Sections ---------- */
.section{ padding: 5rem 0; }
.section-light{ background: var(--brand-light); }
.section-dark{ background: var(--brand-navy); color: #fff; }
.section-dark h2, .section-dark h3{ color: #fff; }

.section-eyebrow{
  color: var(--brand-blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
}
.section-title{ font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 1rem; }
.section-subtitle{ color: var(--brand-gray); max-width: 640px; }

/* ---------- Cards ---------- */
.card-tech{
  background: #fff;
  border: 1px solid rgba(11,31,58,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.card-tech:hover{ transform: translateY(-6px); box-shadow: var(--shadow-strong); }

.icon-badge{
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue));
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.service-card img, .project-card img, .article-card img{
  width: 100%; height: 200px; object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-body-pad{ padding: 1.5rem; }

.badge-brand{
  background: rgba(21,101,216,.1);
  color: var(--brand-blue-dark);
  font-weight: 600;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
}

/* ---------- Stats strip ---------- */
.stats-strip{
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-blue-dark));
  color: #fff;
}
.stat-number{ font-size: 2.4rem; font-weight: 800; color: var(--brand-cyan); }
.stat-label{ color: rgba(255,255,255,.75); font-size: .9rem; }

/* ---------- Banner (inner pages) ---------- */
.page-banner{
  position: relative;
  padding: 6rem 0 3.5rem;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.page-banner::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(11,31,58,.92), rgba(21,101,216,.75));
}
.page-banner .container{ position: relative; z-index: 1; }
.page-banner h1{ color: #fff; margin-bottom: .5rem; }
.breadcrumb-custom a{ color: rgba(255,255,255,.8); }
.breadcrumb-custom .active{ color: var(--brand-cyan); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--brand-navy); color: rgba(255,255,255,.85); }
.footer-logo-wrap{
  background: #fff;
  padding: .6rem 1rem;
  border-radius: 10px;
  line-height: 0;
}
.footer-logo{ height: 38px; width: auto; display: block; }
.footer-heading{ color: var(--brand-cyan); font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.footer-links li{ margin-bottom: .5rem; }
.footer-links a{ color: rgba(255,255,255,.7); font-size: .9rem; }
.footer-links a:hover{ color: var(--brand-cyan); }
.footer-divider{ border-color: rgba(255,255,255,.1); margin: 2rem 0 1.5rem; }
.text-light-50{ color: rgba(255,255,255,.6); }
.social-icons a{
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.social-icons a:hover{ background: var(--brand-cyan); color: var(--brand-navy); }

/* ---------- Forms ---------- */
.form-control, .form-select{
  border-radius: 8px;
  border: 1px solid rgba(11,31,58,.15);
  padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 .2rem rgba(23,226,226,.2);
}

/* ---------- Pagination ---------- */
.pagination .page-link{ color: var(--brand-blue); border-radius: 8px; margin: 0 .15rem; border: 1px solid rgba(11,31,58,.1); }
.pagination .page-item.active .page-link{ background: var(--brand-blue); border-color: var(--brand-blue); }

/* ---------- Misc ---------- */
.rounded-img{ border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.alert-brand{ background: rgba(23,226,226,.12); border: 1px solid rgba(23,226,226,.3); color: var(--brand-navy); border-radius: 10px; }

/* ---------- Floating social widget ---------- */
.floating-social-widget{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.floating-social-btn{
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(11,31,58,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: float-pulse 2.4s ease-in-out infinite;
}
.floating-social-btn:hover{
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 12px 28px rgba(11,31,58,.35);
}
.floating-social-btn.facebook{ background: #1877F2; }
.floating-social-btn.messenger{ background: linear-gradient(135deg, #00B2FF, #006AFF, #A033FF); }
.floating-social-btn.whatsapp{ background: #25D366; }
.floating-social-btn.viber{ background: #7360F2; }

@keyframes float-pulse{
  0%, 100% { box-shadow: 0 8px 20px rgba(11,31,58,.25), 0 0 0 0 rgba(255,255,255,.4); }
  50% { box-shadow: 0 8px 20px rgba(11,31,58,.25), 0 0 0 8px rgba(255,255,255,0); }
}

@media (max-width: 575px){
  .floating-social-widget{ right: 14px; bottom: 14px; gap: 10px; }
  .floating-social-btn{ width: 46px; height: 46px; font-size: 1.3rem; }
}

@media (max-width: 991px){
  .site-main{ padding-top: 68px; }
  .hero{ min-height: auto; padding: 5rem 0 3rem; }
}