body{
    background-color: grey;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: aliceblue;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: start;
    gap: 20px;
    padding: 12px 0;
}

.site-nav .nav-brand {
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 1px;
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: default;
}

.site-nav .nav-brand:hover {
    transform: scale(1.05) rotate(-1deg);
    color: black;
}

.site-nav .nav-toggle {
    display: none;
    background: transparent;
    border: none;
    width: 36px;
    height: 24px;
    position: relative;
    cursor: pointer;
}

.site-nav .nav-toggle span {
    display: block;
    height: 3px;
    background: aliceblue;
    margin: 4px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.site-nav .nav-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-nav .nav-toggle.open span:nth-child(2) {
    opacity: 0;
}
.site-nav .nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav .nav-links {
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    gap: 18px;
    align-items: center;
}

.site-nav .nav-links li {
    position: relative;
}

.site-nav .nav-link {
    color: #e0e0e0;
    text-decoration: none;
    padding: 6px 4px;
    transition: color 0.25s ease, transform 0.25s ease;
    display: inline-block;
}

.site-nav .nav-link::after {
    content: '';
    height: 3px;
    width: 0%;
    position: absolute;
    left: 0;
    bottom: -6px;
    background: linear-gradient(90deg, cornflowerblue, black);
    transition: width 0.28s cubic-bezier(.2,.9,.2,1);
    border-radius: 2px;
}

.site-nav .nav-link:hover {
    color: cornflowerblue;
    transform: translateY(-2px);
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after {
    width: 100%;
}

.site-nav .nav-link.active {
    color: black;
}

@media (max-width: 800px) {
    .site-nav .nav-toggle { display: block; }
    .site-nav .nav-links { display: none; position: absolute; right: 20px; top: 56px; background: darkgrey; padding: 12px; border: 1px solid darkgrey; grid-auto-flow: row; gap: 8px; border-radius: 6px; }
    .site-nav .nav-links.show { display: grid; }
}

.site-nav .nav-links li:active .nav-link { transform: translateY(0); }

#about-section {
    position: absolute;
    text-align: left;
    margin-top: 50px;
    font-size: 20px;
    max-width:40%;
    left: 10px;
    display: inline-block;
}
#about-section-dos {
    position: absolute;
    text-align: right;
    margin-top: 50px;
    font-size: 20px;
    max-width:40%;
    right: 10px;
    display: inline-block;
}

#qna{
    font-size: 20px;
    padding: 100px;
    position: absolute;
    display: block;
    top: 1200px
}

footer {
    text-align: center;
    padding:20px;
    background-color: darkgrey;
    position: fixed;
    bottom: 0;
    align-items: center;
    right: 0;
    left: 0;
}

img{
    width: 32.5%;
    height: auto;
    border-radius: 10px;
}

@media (max-width: 600px){
    img{
        width: 100%;
        height: auto;
        border-radius: 10px;

    }
}

@media (max-width: 800px){
    img{
        width: 49%;
        height: auto;
        border-radius: 10px;

    }
}

.review {
    position: absolute;
    border-radius: 5px;
    top: 2100px;
}

input, textarea, .field-input, .field, select, button, option {
    color: black;
}

:root{
--bg:#0f1724;
--card:#0b1220;
--accent:#7c5cff;
--accent-2:#00d4ff;
--muted:rgba(255,255,255,0.6);
--glass:rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
body{
margin:0;
font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
background: radial-gradient(1000px 600px at 10% 10%, rgba(124,92,255,0.08), transparent),
radial-gradient(900px 500px at 90% 90%, rgba(0,212,255,0.03), transparent),
var(--bg);
color:#e6eef8;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

.page-bg{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 80px)}
.contact-wrapper{width:100%;max-width:980px;position:relative}

.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:28px 28px 18px;box-shadow:0 10px 30px rgba(2,6,23,0.7);overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.card-hero{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.card-hero h1{margin:0;font-size:22px;letter-spacing:-0.2px}
.muted{color:var(--muted);margin:0;font-size:13px}

.inspired{font-size:12px;color:rgba(255,255,255,0.6);margin:2px 0 0}
.inspired a{color:var(--accent-2);text-decoration:none;border-bottom:1px dashed rgba(255,255,255,0.06);padding-bottom:1px}
.inspired a:hover{color:var(--accent);border-bottom-color:transparent}

.contact-form{display:block}
.row{display:flex;gap:16px}
.row.small-gutter{gap:12px;align-items:center}

.field{position:relative;flex:1;display:block}
.field.full{width:100%}
.field input,.field textarea{width:100%;background:transparent;border:0;padding:18px 12px 8px 12px;color:inherit;font-size:15px;outline:none;resize:vertical}
.field textarea{padding-top:14px}
.field .label{position:absolute;left:12px;top:14px;transform-origin:left top;color:var(--muted);transition:all .18s cubic-bezier(.2,.9,.2,1);pointer-events:none}
.field.focused .label, .field input:focus + .label, .field textarea:focus + .label{top:6px;transform:scale(.86);color:var(--accent)}
.input-border{position:absolute;left:8px;right:8px;bottom:8px;height:1px;background:linear-gradient(90deg,var(--muted),transparent);border-radius:2px;transition:all .22s}
.field.focused .input-border{background:linear-gradient(90deg,var(--accent),var(--accent-2));height:2px}

.checkbox{display:flex;align-items:center;gap:10px;color:var(--muted);}
.checkbox input{width:16px;height:16px}
.select select{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 10px;border-radius:8px;color:inherit}

.actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:12px}
.btn{border:0;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#021025;box-shadow:0 6px 18px rgba(124,92,255,0.14), 0 1px 0 rgba(255,255,255,0.02)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}

.status{margin-top:12px;min-height:28px;font-weight:600}
.status.sending{color:var(--muted)}
.status.error{color:#ff7b7b}
.status.success{color:#7ef6c2}

.floating-shapes{position:absolute;inset:0;pointer-events:none}
.shape{position:absolute;border-radius:50%;filter:blur(26px);opacity:0.8}
.s1{width:220px;height:220px;left:-60px;top:-60px;background:linear-gradient(135deg,var(--accent),transparent)}
.s2{width:140px;height:140px;right:-40px;top:20%;background:linear-gradient(135deg,var(--accent-2),transparent)}
.s3{width:90px;height:90px;right:10%;bottom:-30px;background:linear-gradient(135deg,#ff8fb0,transparent)}

@media (max-width:720px){
.row{flex-direction:column}
.actions{justify-content:stretch}
.card{padding:20px}
}

.card{transform:translateY(6px);opacity:0;animation:pop .6s .06s forwards cubic-bezier(.2,.9,.2,1)}
@keyframes pop{to{transform:none;opacity:1}}