/* assets/css/style.css */
:root {--error-bg: linear-gradient(135deg, #F0F7FF 0%, #E0F2FE 50%, #F8FCFF 100%);
--glass-bg: rgba(255, 255, 255, 0.75);
--glass-border: rgba(186, 230, 253, 0.8);
  /* Soft Light Sky Blue Palette */
  --bg-body: #F0F7FF;          /* Soft light sky blue primary background */
  --bg-card-surface: #E0F2FE;   /* Slightly deeper light sky blue for card surfaces/sections */
  --bg-slate-dark: #0F172A;     /* Rich navy/slate for footer & contrast */
  
  --color-sky-brand: #0284C7;   /* Vibrant sky blue brand color */
  --color-sky-hover: #0369A1;   /* Deeper sky blue hover state */
  --color-sky-light: #38BDF8;   /* Bright accent sky blue */
  
  --text-slate-dark: #0F172A;
  --text-slate-medium: #334155;
  --text-muted: #64748B;
  --border-subtle: #BAE6FD;     /* Harmonized light sky blue border */
}

body {
  background-color: var(--bg-body);
  color: var(--text-slate-medium);
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .brand-text {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-slate-dark);
}

/* Background & Helpers */
.bg-body { background-color: var(--bg-body); }
.bg-card-surface { background-color: var(--bg-card-surface); }
.bg-slate-dark { background-color: var(--bg-slate-dark); }
.bg-sky-brand { background-color: var(--color-sky-brand); }

.text-slate-dark { color: var(--text-slate-dark) !important; }
.text-slate-medium { color: var(--text-slate-medium) !important; }
.text-blue-accent { color: var(--color-sky-brand) !important; }
.text-sky-light { color: var(--color-sky-light) !important; }
.border-subtle { border-color: var(--border-subtle) !important; }

.extra-small { font-size: 0.75rem; }
.py-6 { padding-top: 5rem; padding-bottom: 5rem; }
.max-w-700 { max-width: 700px; }
.max-w-600 { max-width: 600px; }

/* Buttons */
.btn-sky {
  background-color: var(--color-sky-brand);
  color: #FFFFFF !important;
  border: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-sky:hover {
  background-color: var(--color-sky-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.btn-outline-slate {
  background-color: transparent;
  border: 1px solid var(--text-slate-dark);
  color: var(--text-slate-dark) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline-slate:hover {
  background-color: var(--text-slate-dark);
  color: #FFFFFF !important;
}

.badge-pill-light {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.25);
  border-radius: 50px;
  color: var(--color-sky-hover);
  font-size: 0.85rem;
  font-weight: 600;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-sky-brand);
  border-radius: 50%;
  margin-right: 8px;
}

.gradient-text {
    color: #0077C8;
}

/* Navigation */
.navbar {
  padding: 16px 0;
  background: rgba(240, 247, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}

.navbar-brand .brand-text {
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1.25rem;
}

.navbar-menu {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.navbar-menu .nav-link {
  color: var(--text-slate-medium);
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar-menu .nav-link:hover,
.navbar-menu .nav-link.active {
  color: var(--color-sky-brand);
}

/* Icon Box */
.icon-box {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-sky-soft {
  background: rgba(2, 132, 199, 0.12);
}

.icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Service & Industry Cards */
.service-card, .industry-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover, .industry-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(2, 132, 199, 0.12) !important;
}

/* Form Inputs */
.form-input {
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  color: var(--text-slate-dark);
  padding: 12px 16px;
}

.form-input:focus {
  border-color: var(--color-sky-brand);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18);
}

/* Footer Links */
.footer-links a, .legal-links a {
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover, .legal-links a:hover {
  color: #FFFFFF;
}

.footer-links li {
  margin-bottom: 10px;
}
/* ======================================================
   ERROR PAGE
====================================================== */

.error-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#F0F7FF 0%,#E0F2FE 50%,#F8FCFF 100%);
    overflow:hidden;
    position:relative;
    padding:30px;
}

.error-page::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    top:-250px;
    right:-250px;
    background:radial-gradient(circle,rgba(2,132,199,.18),transparent 70%);
    animation:float1 14s ease-in-out infinite;
}

.error-page::after{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    bottom:-220px;
    left:-220px;
    background:radial-gradient(circle,rgba(56,189,248,.18),transparent 70%);
    animation:float2 16s ease-in-out infinite;
}

.error-card{
    position:relative;
    z-index:10;
    width:100%;
    max-width:620px;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px);
    border:1px solid rgba(186,230,253,.8);
    border-radius:22px;
    padding:50px;
    text-align:center;
    box-shadow:0 20px 60px rgba(15,23,42,.12);
}

.error-card h1{
    font-size:34px;
    margin-bottom:20px;
    color:#DC2626;
}

.error-card p{
    color:#334155;
    font-size:17px;
    line-height:1.8;
    margin-bottom:30px;
}

.error-btn{
    display:inline-block;
    padding:15px 34px;
    border-radius:12px;
    background:#0284C7;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.error-btn:hover{
    background:#0369A1;
    color:#fff;
    transform:translateY(-2px);
}

@keyframes float1{
    50%{
        transform:translate(-40px,35px);
    }
}

@keyframes float2{
    50%{
        transform:translate(35px,-35px);
    }
}
/* ===========================
   HERO IMAGE CARD
=========================== */

.hero-image-card{
    background: rgba(255,255,255,.82) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:1px solid rgba(255,255,255,.45) !important;
    border-radius:28px !important;

    box-shadow:
        0 20px 60px rgba(15,23,42,.12),
        0 8px 24px rgba(2,132,199,.08);

    transition:all .35s ease;
}

.hero-image-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 30px 80px rgba(15,23,42,.16),
        0 10px 30px rgba(2,132,199,.10);
}

/* ===========================
   HERO BACKGROUND
=========================== */

.hero-section{
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.20), transparent 35%),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,.15), transparent 30%),
        linear-gradient(135deg,#5EB8F5 0%,#7BC5F7 50%,#9BD7FA 100%);
}