/* 1. Use a more-intuitive box-sizing model, CSS Reset by Josh Comeau */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 4. Add accessible line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select, option {
    font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
    isolation: isolate;
}

:root{
    --bg:#0b1220; --card:#121b2e; --text:#e9eefc; --muted:#b9c3da;
    --accent:#4da3ff; --accent2:#6ee7ff; --line:#24314f;
    --radius:16px; --shadow: 0 10px 30px rgba(0,0,0,.35);
    --max:1100px;
    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

body{
    font-family:var(--font);
    background:radial-gradient(1200px 600px at 20% -10%, rgba(77,163,255,.25), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, rgba(110,231,255,.18), transparent 60%), var(--bg);
    color:var(--text);
    line-height:1.5}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:24px}
header{position:sticky;top:0;backdrop-filter: blur(10px); background:rgba(11,18,32,.65); border-bottom:1px solid rgba(255,255,255,.06); z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.logo {width:36px;
    height:36px;
    padding: 3px;
    border-radius:10px;
    background:#f0fafd;
    box-shadow: var(--shadow)
}
.logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.nav a{font-size:14px;color:var(--muted);text-decoration:none;padding:10px 8px;border-radius:10px}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.navlinks{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.btn{display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#00162b;
    font-weight:800;
    border:0;
    padding:12px 14px;
    border-radius:14px;
    text-decoration:none;
    box-shadow: var(--shadow)
}
.btn.secondary{background:transparent;
    color:var(--text);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:none
}
.btn.small{color: #00162b;
    background: #f0fafd;
    padding:10px 12px;
    border-radius:12px;
    font-size:14px
}
.hero{padding:56px 0 18px}
.grid{display:grid;gap:18px}
.heroGrid{grid-template-columns: 1.2fr .8fr}
.card{background:rgba(18,27,46,.82);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    padding:18px;
    box-shadow: var(--shadow)}
h1{font-size:44px;line-height:1.08;margin:0 0 12px}
h2{font-size:26px;margin:0 0 10px}
h3{font-size:18px;margin:0 0 8px}
p{margin:0 0 12px;color:var(--muted)}
.pillRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill{font-size:13px;color:var(--text);border:1px solid rgba(255,255,255,.14);
    padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.05)}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.two{grid-template-columns:1fr 1fr}
.three{grid-template-columns:1fr 1fr 1fr}
.list{display:flex;flex-direction:column;gap:10px}
.listItem{border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.muted{color:var(--muted)}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.kpi .box{padding:12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.kpi b{display:block;font-size:18px;color:var(--text)}
.section{padding:34px 0}
.servicearea {
    grid-template-columns: .8fr 1.2fr;
    gap: 12px;
    margin-top: 10px;
}
.servicearea img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.faq details{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    border-radius:14px;padding:12px 14px}
.faq summary{cursor:pointer;font-weight:700}
footer{padding:28px 0 42px;border-top:1px solid rgba(255,255,255,.08);margin-top:24px}
.fine{font-size:12px;color:rgba(233,238,252,.6)}
.application-form {
    max-width: 600px;

}


.header1 {
    width: 760px;

    margin: 0 auto;
}

.header1 h1 {
    max-width: 100%;
}
.formgrid {

}
.application-form label {


}

.inputstyle {
    color:var(--text);
    border:1px solid rgba(255,255,255,.18);
    border-radius: 10px !important;
}


.application-form label input {

    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color:var(--text);
    border:1px solid rgba(255,255,255,.18);
    border-radius: 10px !important;
    background-color: #222;


}
.application-form select,
.application-form textarea {
    width: 100%;
}

.thankyou {
    height: 100%;
}
@media (max-width: 900px){
    .heroGrid,.two,.three, .servicearea, .thankyou{grid-template-columns:1fr}
    h1{font-size:36px}
    header{position:relative}
}