/* =====================================================
   Template 14 — "Neo Minimal" (Cool Blue-Gray)
   Premium minimal on cool blue-gray canvas, deeper
   indigo accent. Tech / startups / corporate modern.
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --nm-ink: #141b2e;
    --nm-muted: #5f6b85;
    --nm-accent: #3454d1;
    --nm-accent-soft: #e2e9fb;
    --nm-line: #dbe1ee;
    --nm-bg: #e8edf6;
    --nm-surface: #f7f9fd;
    --nm-surface2: #eef2fa;
}

html { overflow-x: hidden; scroll-behavior: smooth; }
body {
    padding: 0; margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--nm-ink);
    background:
        radial-gradient(560px 320px at 50% -90px, rgba(52,84,209,.14), transparent 70%),
        radial-gradient(460px 320px at 100% 35%, rgba(52,84,209,.08), transparent 65%),
        radial-gradient(420px 300px at 0% 90%, rgba(96,125,220,.10), transparent 65%),
        var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: unset; }
div,h1,h2,h3,h4,p,i,a { position: relative; transition: 0.25s cubic-bezier(.2,.6,.3,1); }
form,input,textarea,select,button { font-family: 'Inter', sans-serif; }
input::placeholder { font-size: 12px; color: #8b96ad; }
::selection { background: rgba(52,84,209,.20); }

.alert { padding: 20px; width: fit-content; font-size: 13px; margin: 0 auto; font-weight: 500; border-radius: 12px; }
.danger { background: #fbe7ea; color: #c62f42; }
.info { background: var(--nm-accent-soft); color: var(--nm-accent); }
.success { background: #e1f4ea; color: #147a4a; }

/* ===== header card — cool slab with indigo glow ===== */
.card {
    width: 400px;
    margin: 24px auto 4px;
    padding: 0 0 30px;
    overflow: hidden;
    background: var(--nm-surface);
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.85);
    box-shadow:
        0 1px 2px rgba(20,27,46,.05),
        0 12px 32px rgba(20,27,46,.10),
        0 32px 64px rgba(52,84,209,.12);
}
.card_content {
    text-align: center;
    padding: 46px 20px 20px;
    background:
        radial-gradient(240px 120px at 50% 0%, rgba(52,84,209,.16), transparent 70%),
        linear-gradient(180deg, #eaf0fb 0%, var(--nm-surface) 80%);
}
.card_content img {
    max-width: 150px; height: 90px;
    background: #fff; border-radius: 18px; padding: 8px;
    border: 1px solid var(--nm-line);
    box-shadow: 0 2px 6px rgba(20,27,46,.06), 0 14px 28px rgba(52,84,209,.16);
}
.card_content2 { text-align: center; margin-top: 14px; padding: 0 16px; }
.card_content2 h2 {
    margin: 0 auto; font-size: 27px; font-weight: 800; letter-spacing: -1px;
    color: var(--nm-ink); line-height: 1.15;
    width: fit-content; padding-bottom: 2px;
}
.card_content2 h2::after {
    content: ''; display: block; width: 40px; height: 4px;
    background: linear-gradient(90deg, var(--nm-accent), #7d9bff);
    border-radius: 999px; margin: 10px auto 0;
}
.card_content2 p {
    margin: 10px auto 2px; font-size: 10.5px; font-weight: 700;
    letter-spacing: 2.4px; text-transform: uppercase; color: var(--nm-accent);
    background: var(--nm-accent-soft);
    width: fit-content; padding: 5px 14px; border-radius: 999px;
}

/* ===== quick links — cool pills ===== */
.dis_flex { text-align: center; padding: 0 14px; }
.dis_flex .link_btn {
    background: var(--nm-surface2);
    color: var(--nm-ink); margin: 4px 3px; border-radius: 999px;
    padding: 8px 16px; display: inline-block;
    font-size: 11px; font-weight: 600; letter-spacing: .2px;
    border: 1px solid var(--nm-line);
}
.dis_flex .link_btn:hover {
    background: var(--nm-accent); color: #fff; border-color: var(--nm-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(52,84,209,.30);
}

/* ===== contact details — icon tiles ===== */
.contact_details { padding: 6px 24px; }
.contact_details .contact_d {
    display: flex; align-items: center; margin: 8px 0; padding: 8px 10px;
    border-radius: 14px;
}
.contact_details .contact_d:hover { background: var(--nm-surface2); }
.contact_details .contact_d i {
    margin: 2px; background: var(--nm-accent-soft); color: var(--nm-accent);
    height: 17px; width: 16px; padding: 10px;
    border-radius: 12px; text-align: center;
    box-shadow: inset 0 0 0 1px rgba(52,84,209,.14);
}
.contact_details .contact_d p { margin: 4px 14px; font-size: 13px; font-weight: 500; line-height: 1.6; }

/* ===== whatsapp share ===== */
.dis_flex .share_wtsp { margin: 10px auto; text-align: center; }
.dis_flex .share_wtsp input {
    font-size: 13px; border: 1.5px solid var(--nm-line); padding: 10px 14px;
    outline: none; background: #fff; color: var(--nm-ink); border-radius: 12px;
    transition: 0.2s;
}
.dis_flex .share_wtsp input:focus { border-color: var(--nm-accent); box-shadow: 0 0 0 4px rgba(52,84,209,.14); }
.dis_flex .share_wtsp input[type=submit] {
    background: var(--nm-ink);
    color: #fff; font-size: 11px; font-weight: 700; border: none; cursor: pointer;
    letter-spacing: .3px;
}
.dis_flex .share_wtsp input[type=submit]:hover { background: var(--nm-accent); }

/* ===== buttons / social ===== */
.dis_flex .big_btns {
    background: var(--nm-ink); color: #fff; border-radius: 14px;
    font-size: 12px; font-weight: 600; padding: 13px;
    text-align: center; margin: 3px 8px; width: 120px; display: inline-block;
    box-shadow: 0 12px 26px rgba(20,27,46,.24);
}
.dis_flex .big_btns:hover {
    background: var(--nm-accent); transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(52,84,209,.36);
}
.dis_flex .social_med { padding: 2px; margin: 18px 0 26px; display: inline-block; }
.dis_flex .social_med i {
    font-size: 17px; width: 17px; text-align: center; border-radius: 12px; padding: 10px;
    box-shadow: 0 6px 14px rgba(20,27,46,.16);
}
.dis_flex .social_med a:hover i { transform: translateY(-3px); }

.fa-twitter { background: #1da1f2; color: #fff; }
.fa-facebook { background: #1877f2; color: #fff; }
.fa-linkedin { background: #0a66c2; color: #fff; }
.fa-youtube { background: #ff0000; color: #fff; }
.fa-pinterest { background: #cb2027; color: #fff; }
.fa-instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }

/* ===== QR — dashed frame ===== */
.qr_wrap { text-align: center; margin: 8px 0 2px; }
.qr_wrap img {
    border: 1.5px dashed #b9c8ec; border-radius: 18px; padding: 10px; background: #fff;
    box-shadow: 0 8px 20px rgba(52,84,209,.14);
}
.action_row { text-align: center; }

/* ===== sections — cool floating cards ===== */
.card2 {
    background: var(--nm-surface); width: 372px; margin: 14px auto;
    padding: 26px 22px; border-radius: 22px;
    border: 1px solid var(--nm-line);
    box-shadow: 0 1px 2px rgba(20,27,46,.04), 0 14px 30px rgba(20,27,46,.08);
}
.card2 h3 {
    text-align: center; font-size: 18px; color: var(--nm-ink);
    margin: 0 auto 16px; font-weight: 800; letter-spacing: -0.4px;
    width: fit-content;
}
.card2 h3::after {
    content: ''; display: block; width: 28px; height: 4px;
    background: linear-gradient(90deg, var(--nm-accent), #7d9bff);
    border-radius: 999px;
    margin: 8px auto 0;
}
.card2 form input, .card2 form textarea {
    width: -webkit-fill-available; font-size: 13px; border-radius: 12px;
    padding: 11px; border: 1.5px solid var(--nm-line); margin: 4px 0;
    resize: vertical; background: #fff; color: var(--nm-ink);
    transition: 0.2s;
}
.card2 form input:focus, .card2 form textarea:focus {
    border-color: var(--nm-accent); outline: none;
    box-shadow: 0 0 0 4px rgba(52,84,209,.12);
}
.card2 form input[type=submit] {
    color: #fff; background: var(--nm-ink);
    border: none; cursor: pointer; font-weight: 700; letter-spacing: .3px;
}
.card2 form input[type=submit]:hover { background: var(--nm-accent); }
.card2 iframe { margin: 8px auto; display: block; border-radius: 16px; width: 100%; height: 190px; box-shadow: 0 10px 24px rgba(20,27,46,.12); }

/* products */
.product_s {
    text-align: center; background: var(--nm-surface2); padding: 12px;
    margin: 9px; border-radius: 16px; border: 1px solid var(--nm-line);
    transition: 0.25s;
}
.product_s:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(52,84,209,.14); background: #fff; }
.product_s p { font-weight: 700; text-transform: capitalize; color: var(--nm-ink); letter-spacing: -0.2px; }
.product_s img { min-width: 120px; max-width: 82%; height: 170px; background: #fff; border-radius: 12px; }

/* gallery */
.img_gall { text-align: center; margin: 10px; }
.img_gall img {
    max-width: 100%; max-height: 400px; border-radius: 16px; display: inline-block;
    border: 1px solid var(--nm-line);
    box-shadow: 0 14px 30px rgba(20,27,46,.12);
    transition: 0.3s;
}
.img_gall img:hover { transform: scale(1.015); }

/* about */
#about_us p {
    white-space: pre-line; font-size: 13px; font-weight: 400; line-height: 1.85;
    background: linear-gradient(180deg, var(--nm-surface2), #e7edf9);
    padding: 22px; margin: 0; border-radius: 16px; color: #2c3550;
}

/* payment */
#payment p { font-size: 17px; font-weight: 700; color: var(--nm-ink); width: 82%; margin: 6px auto; letter-spacing: -0.2px; }
#payment h2 { font-size: 10.5px; font-weight: 700; color: var(--nm-accent); width: 82%; margin: 8px auto 0; text-transform: uppercase; letter-spacing: 2px; }
#payment img { width: 100%; border-radius: 18px; margin: 10px 0; border: 1px solid var(--nm-line); box-shadow: 0 12px 28px rgba(20,27,46,.10); }

/* bottom menu */
.menu_bottom {
    background: rgba(247,249,253,.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    width: -webkit-fill-available;
    text-align: center; color: var(--nm-ink);
    position: fixed; bottom: 0; left: 0; overflow-x: auto;
    border-top: 1px solid var(--nm-line);
    box-shadow: 0 -10px 28px rgba(20,27,46,.10);
}
.menu_container { width: auto; text-align: left; display: flex; }
.menu_item { text-align: center; font-weight: 600; display: inline-grid; font-size: 11.5px; margin: 12px; width: 180px; white-space: pre; }
.menu_item i { font-size: 19px; }
.menu_item:hover { color: var(--nm-accent); transform: translateY(-2px); }

/* footer / paywall */
.card-powered-by { color: var(--nm-muted); }
.card-powered-by a { color: var(--nm-accent); font-weight: 600; }
.paywall_box {
    background: var(--nm-surface); border: 1px solid var(--nm-line);
    border-radius: 22px; color: var(--nm-ink);
    box-shadow: 0 14px 34px rgba(20,27,46,.10);
}

@media screen and (max-width:700px) {
    .card { width: -webkit-fill-available; border-radius: 0 0 26px 26px; margin: 0 auto 12px; border-left: none; border-right: none; }
    .card2 { width: auto; margin: 14px 10px; }
}