:root{
    --bg: #ffffff;
    --text: #0b1320;
    --muted: #6b7280;
    --primary: #0549ac; /* brand blue */
    --accent: #d8a428;   /* gold accent */
    --card: #f6f8fb;
    --ring: rgba(2,83,147,0.15);
    --shadow: 0 10px 30px rgba(2,83,147,0.08);
    --radius: 16px;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
a{color:var(--primary); text-decoration:none}
img{max-width:100%; height:auto}
.container{width:min(1120px, 92vw); margin-inline:auto}
.btn{display:inline-flex; letter-spacing: 1px;align-items:center; justify-content:center; gap:.6rem; padding:.9rem 2rem; border-radius:10px; font-weight:600; border:1px solid transparent; transition:.2s ease; cursor:pointer}
.btn-primary{background:var(--primary); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 40px rgba(2,83,147,.18)}
.btn-ghost{background:#fff; border-color:#e5e7eb; color:var(--text)}
.badge{display:inline-block; padding:.35rem .65rem; border-radius:999px; background:rgba(2,83,147,.08); color:var(--primary); font-weight:600; font-size:.82rem}
header{position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.8); border-bottom:1px solid #eef2f7; z-index:50}
.nav{display:flex; align-items:center; justify-content:space-between; padding:0.7rem 0}
.nav a.logo{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px; color:var(--text)}
.logo > span{ font-size: 30px;}
.nav .links{display:flex; align-items:center; gap: 1.6rem}
.nav .links > a{ letter-spacing: 0.3px; font-size: 17px;padding:5px 0px; border-bottom:2px solid transparent;transition: color 0.5s,border-color 0.5s;}
.nav .links > a:hover{ color:#0152cc !important;border-bottom:2px solid #0152cc;}
.mobile-toggle{display:none}

.primary-color{ color : var(--primary)}

.hero{display:grid; gap:48px; align-items:center; padding:72px 0px}
.hero h1{font-size:clamp(2.1rem, 3vw + 1rem, 3.4rem); line-height:1.1; margin:0 0 18px; letter-spacing:-.02em}
.hero p{color:var(--muted); font-size:1.1rem; margin:0 0 28px}
.hero .card{background:var(--card); border:1px solid #e7eef7; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.hero .chat{background:#0f172a; color:#e5e7eb; border-radius:14px; padding:18px; aspect-ratio:16/11; display:flex; flex-direction:column; gap:12px}
.bubble{max-width:86% !important; padding:12px 14px !important; border-radius:14px !important; font-size:.98rem; line-height:1.35; box-shadow:0 2px 8px rgba(0,0,0,.12) !important;}
.bubble.user{align-self:flex-end; background:rgb(40 106 191); color:#e8f1fa}
.bubble.bot{align-self:flex-start; background:#111827; color:#e5e7eb; border:1px solid #ffffff2e}

section{padding:84px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px}
.section-head h2{font-size:clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem); margin:0}
.section-head p{color:var(--muted); max-width:720px; margin:0}


.service-item{border:1px solid #dcdcdc;border-radius: 10px;padding: 25px 30px 20px;width: 100%;margin-bottom: 20px;display:flex;flex-direction: column;justify-content: center;gap:15px;min-height: 240px;}
.service-itemicon{height: 60px;width: 60px;border-radius: 10px;display: flex;align-items: center;justify-content: center;}
.service-itemtitle{font-weight: bold;font-size: 20px;color: black;}
.service-itemdesc{font-size: 15px;color: #5c5c5c;}

.whyus-item{background:#29345b;border: 1px solid #ffffff29;border-radius: 10px;padding: 35px 30px 30px;width: 100%;margin-bottom: 20px;display:flex;flex-direction: column;align-items: center;justify-content: center;gap:10px;min-height: 300px;}
.whyus-itemicon{height: 50px;width: 50px;border-radius: 30px;display: flex;align-items: center;justify-content: center;background:linear-gradient(135deg, #00ffed, #8500ff);}
.whyus-itemtitle{font-weight: bold;font-size: 25px;color: #03c7e6;text-align: center;}
.whyus-itemtitle2{font-weight: bold;font-size: 18px;color: white;text-align: center;}
.whyus-itemdesc{font-size: 13px;color: #ececec;text-align: center;}


.feature{background:#fff; border:1px solid #e9eef5; padding:22px; border-radius:var(--radius); box-shadow:var(--shadow); height: 100%;}
.feature h3{margin:12px 0 8px}
.feature p{margin:0; color:var(--muted)}
.icon{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(2,83,147,.08);}

.why{display:grid; gap:24px}
.bullets{display:grid; gap:12px;margin-top: 35px;padding-left:1rem;}
.bullets li{list-style:none; display:flex; align-items:flex-start; gap:10px; background:#fff; border:1px solid #dee1e6; padding:14px 16px; border-radius:12px}
.bullets svg{flex-shrink:0}
.whyus-img{ border-radius: 20px;margin-top:30px;}

blockquote{margin:0; padding:20px; border-left:4px solid var(--primary); background:#fbfdff; border-radius:12px; box-shadow:var(--shadow)}
blockquote p{margin:0 0 6px}
blockquote cite{font-style:normal; color:var(--muted); font-size:.95rem}

.faq{display:grid; gap:12px}
details{background:#fff; border:1px solid #dee1e6; border-radius:12px; padding:14px 16px}
summary{cursor:pointer; font-weight:600}
details[open]{box-shadow:var(--shadow)}

.cta{background:linear-gradient(138deg, #d4eaff, #eec0ff)}
.cta .panel{display:grid; gap:28px; align-items:center; background:#fff; border:1px solid #e9eef5; border-radius:24px; padding:28px; box-shadow:var(--shadow)}

footer{padding:40px 0; color:var(--muted); border-top:1px solid #eef2f7}

/* Responsive */
@media (max-width: 980px){
    .hero{padding:60px 0 20px}
}
@media (max-width: 640px){
    .nav .links{display:none}
    .mobile-toggle{display:inline-flex; border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:.55rem .7rem}
}

/* tiny helpers for contact layout - non-invasive */
#contact .col-md-5 { padding-top:6px; }
.contactinfo > p{ margin-top: 20px;margin-bottom: 20px;}
.contact-badge{display:flex;flex-direction:row;align-items:center;margin-bottom: 15px;padding: 20px;background-color: #fcfcfe;border-radius: 10px;border:1px solid #0f172914;}
.contact-icon{ height: 50px;width: 50px;border-radius: 10px;background-color: var(--primary) ;display: flex;align-items: center;justify-content: center;margin-right: 18px;}
#contact form .form-control { border-radius:8px; }
#contact_message::placeholder{color: #acacac;}