/* ZensyWeb — Main Stylesheet */

:root {
--bg: #FAFAF7;
--white: #FFFFFF;
--ink: #1A1A2E;
--ink2: #3D3D5C;
--muted: #8A8AA0;
--border: #E8E8F0;
--orange: #FF5722;
--orange-light: #FFF0EC;
--orange-mid: #FFD5C8;
--teal: #00BFA5;
--teal-light: #E0F7F4;
--teal-mid: #B2EBE6;
--yellow: #FFB300;
--yellow-light: #FFF8E1;
--purple: #7C4DFF;
--purple-light: #EDE7FF;
--coral: #FF6B6B;
--green: #00C853;
--radius: 16px;
--radius-sm: 10px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: rgba(255,87,34,0.25); color: var(--ink); }
::-moz-selection { background: var(--orange); color: #fff; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--ink);
font-family: 'Hind Siliguri', sans-serif;
font-size: 16px;
line-height: 1.65;
overflow-x: hidden;
}
/* ── NAV ── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
background: var(--bg);
border-bottom: 1px solid var(--border);
padding: 0 6%;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
}
nav.scrolled {
background: var(--bg);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
nav.menu-open {
background: #FFFFFF !important;
backdrop-filter: none !important;
border-bottom: 1.5px solid var(--border) !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
}
.logo {
display: inline-flex;
align-items: center;
text-decoration: none;
line-height: 1;
}
.logo img {
height: 38px;
width: auto;
display: block;
object-fit: contain;
}
@media (max-width: 768px) {
.logo img { height: 42px; }
}
.nav-links { display: flex; gap: 1.8rem; list-style: none; align-items: center; }
.nav-links a { color: var(--ink2); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--orange); }
.nav-cta {
background: var(--orange) !important;
color: #fff !important;
padding: 9px 20px !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
transition: background 0.2s !important;
}
.nav-cta:hover { background: #e64a19 !important; }
/* ── HERO ── */
.hero {
min-height: 100vh;
padding: 110px 6% 80px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
position: relative;
overflow: hidden;
}
.hero-bg-blob {
position: absolute;
width: 650px; height: 650px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,87,34,0.18) 0%, rgba(255,87,34,0.06) 40%, transparent 70%);
top: -150px; right: -150px;
pointer-events: none;
animation: blobFloat 8s ease-in-out infinite;
}
.hero-bg-blob2 {
position: absolute;
width: 450px; height: 450px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,191,165,0.15) 0%, rgba(0,191,165,0.05) 40%, transparent 70%);
bottom: 0px; left: -80px;
pointer-events: none;
animation: blobFloat 10s ease-in-out infinite reverse;
}
@keyframes blobFloat {
0%, 100% { transform: translateY(0px) scale(1); }
50% { transform: translateY(-20px) scale(1.04); }
}
.hero-left { position: relative; z-index: 2; }
.hero-chip {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--orange-light);
border: 1.5px solid var(--orange-mid);
color: var(--orange);
padding: 5px 14px;
border-radius: 100px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
margin-bottom: 24px;
}
.live-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--orange);
animation: livePulse 1.8s infinite;
}
@keyframes livePulse {
0%,100%{opacity:1;transform:scale(1);}
50%{opacity:0.4;transform:scale(0.7);}
}
h1 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
margin-bottom: 20px;
color: var(--ink);
}
h1 em {
font-style: normal;
background: linear-gradient(135deg, var(--orange), var(--coral));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-desc {
font-size: 1.05rem;
color: var(--ink2);
max-width: 460px;
margin-bottom: 36px;
font-weight: 400;
line-height: 1.75;
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.btn-fill {
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--orange);
color: #fff;
padding: 13px 28px;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 20px rgba(255,87,34,0.28);
}
.btn-fill:hover { background: #e64a19; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,87,34,0.35); }
.btn-outline {
display: inline-flex;
align-items: center;
gap: 9px;
background: transparent;
color: var(--ink);
padding: 13px 28px;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: 1.5px solid var(--border);
transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover { border-color: var(--orange); background: var(--orange-light); }
.hero-trust {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.trust-item {
font-family: 'Noto Sans Bengali', sans-serif;
display: flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 500;
color: var(--ink2);
}
.trust-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.trust-sep { color: var(--border); font-size: 1.2rem; }
/* HERO ILLUSTRATION */
.hero-right {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 16px;
}
.hero-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 20px 22px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
transition: transform 0.3s;
}
.hero-card:hover { transform: translateX(6px); }
.hero-card-icon {
width: 54px; height: 54px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hci-orange { background: var(--orange-light); }
.hci-teal { background: var(--teal-light); }
.hci-purple { background: var(--purple-light); }
.hci-yellow { background: var(--yellow-light); }
.hero-card-text { flex: 1; }
.hero-card-title { font-weight: 600; font-size: 0.95rem; color: var(--ink); margin-bottom: 2px; }
.hero-card-sub { font-size: 0.8rem; color: var(--muted); }
.hero-card-badge {
font-size: 0.72rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 6px;
white-space: nowrap;
}
.badge-orange { background: var(--orange-light); color: var(--orange); }
.badge-teal { background: var(--teal-light); color: var(--teal); }
.badge-purple { background: var(--purple-light); color: var(--purple); }
.badge-yellow { background: var(--yellow-light); color: #C67C00; }
/* ── PRICING DELIVERY HIGHLIGHT ── */
.p-features li.delivery-highlight {
background: var(--orange-light);
border: 1.5px solid var(--orange-mid);
border-radius: 8px;
padding: 7px 10px;
font-weight: 700;
color: var(--orange) !important;
}
.p-features li.delivery-highlight .p-check {
background: rgba(255,87,34,0.15);
}
.p-features li.delivery-highlight .p-check svg {
stroke: var(--orange);
}
.hero-desc,
.sec-sub,
.svc-desc,
.proc-desc,
.why-desc,
.p-desc,
.testi-text,
.cta-section p,
.footer-copy,
.slots-alert-text span {
font-family: 'Noto Sans Bengali', sans-serif;
}
/* ── STATS STRIP FONT ── */
.stats-strip .stat-n,
.stats-strip .stat-l {
font-family: 'Noto Sans Bengali', sans-serif;
}
.stats-strip .stat-n { font-weight: 600; letter-spacing: -0.01em; }
.stats-strip {
background: var(--ink);
padding: 32px 6%;
display: flex;
justify-content: center;
gap: clamp(2rem, 5vw, 5rem);
flex-wrap: wrap;
}
.stat { text-align: center; }
.stat-n { font-size: 2rem; font-weight: 700; color: var(--orange); line-height: 1; }
.stat-l { font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-top: 4px; }
/* ── SECTION COMMONS ── */
.section { padding: 90px 6%; text-align: center; }
.section-alt { background: var(--white); }
.label-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--orange-light);
color: var(--orange);
padding: 5px 12px;
border-radius: 100px;
margin-bottom: 16px;
}
.label-chip.teal { background: var(--teal-light); color: var(--teal); }
.label-chip.purple { background: var(--purple-light); color: var(--purple); }
h2 {
font-size: clamp(1.7rem, 3vw, 2.6rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
margin-bottom: 14px;
color: var(--ink);
}
.sec-sub { font-size: 1rem; color: var(--ink2); max-width: 480px; line-height: 1.7; margin-bottom: 56px; margin-left: auto; margin-right: auto; }
/* ── SERVICES ── */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.svc-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 32px 28px;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
text-align: left;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.1); }
.svc-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
opacity: 0;
transition: opacity 0.3s;
}
.svc-card.c-orange::after { background: linear-gradient(90deg, var(--orange), var(--coral)); }
.svc-card.c-teal::after { background: linear-gradient(90deg, var(--teal), #00E5CC); }
.svc-card.c-purple::after { background: linear-gradient(90deg, var(--purple), #B388FF); }
.svc-card.c-yellow::after { background: linear-gradient(90deg, var(--yellow), #FFD54F); }
.svc-card:hover::after { opacity: 1; }
/* ILLUSTRATED SVG ICONS */
.svc-illustration {
width: 80px; height: 80px;
margin-bottom: 22px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.svc-illustration.bg-orange { background: var(--orange-light); }
.svc-illustration.bg-teal { background: var(--teal-light); }
.svc-illustration.bg-purple { background: var(--purple-light); }
.svc-illustration.bg-yellow { background: var(--yellow-light); }
.svc-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.svc-desc { font-size: 0.875rem; color: var(--ink2); line-height: 1.7; margin-bottom: 18px; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.svc-tag {
font-size: 0.72rem;
font-weight: 500;
padding: 3px 10px;
border-radius: 5px;
}
.tag-orange { background: var(--orange-light); color: var(--orange); }
.tag-teal { background: var(--teal-light); color: var(--teal); }
.tag-purple { background: var(--purple-light); color: var(--purple); }
.tag-yellow { background: var(--yellow-light); color: #C67C00; }
/* ── PRICING ── */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 20px;
max-width: 980px;
  margin: 0 auto;
}
.slots-alert {
display: flex;
align-items: center;
gap: 14px;
background: #FFF3E0;
border: 1.5px solid #FFCC80;
border-radius: var(--radius-sm);
padding: 16px 20px;
margin-bottom: 44px;
flex-wrap: wrap;
max-width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.slots-alert-icon { font-size: 1.4rem; flex-shrink: 0; }
.slots-alert-text { flex: 1; min-width: 180px; }
.slots-alert-text strong { display: block; font-weight: 700; color: #E65100; font-size: 0.9rem; margin-bottom: 2px; }
.slots-alert-text span { color: var(--ink2); font-size: 0.82rem; }
.slots-pips { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.pip-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pip { width: 13px; height: 13px; border-radius: 50%; }
.pip-red { background: #FF5252; }
.pip-green { background: var(--green); animation: livePulse 2s infinite; }
.pip-lbl { font-size: 0.68rem; font-weight: 600; }
.pip-lbl-red { color: #FF5252; }
.pip-lbl-green { color: var(--green); }
.p-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 32px 26px;
position: relative;
transition: transform 0.3s, box-shadow 0.3s;
text-align: left;
}
.p-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
.p-card.featured {
border-color: var(--orange);
box-shadow: 0 0 0 4px rgba(255,87,34,0.07);
}
.p-popular {
position: absolute;
top: -13px; left: 50%;
transform: translateX(-50%);
background: var(--orange);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
padding: 4px 14px;
border-radius: 100px;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.p-name { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.p-old { font-size: 0.85rem; color: var(--muted); text-decoration: line-through; margin-bottom: 3px; }
.p-price { font-size: 2.4rem; font-weight: 700; color: var(--ink); line-height: 1; margin-bottom: 7px; letter-spacing: -0.02em; }
.p-price .p-curr { font-size: 1rem; font-weight: 400; color: var(--muted); }
.p-discount {
display: inline-block;
background: #E8F5E9;
color: var(--green);
font-size: 0.72rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 5px;
margin-bottom: 14px;
}
.p-desc { font-size: 0.85rem; color: var(--ink2); padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; line-height: 1.6; }
.p-slots { display: flex; gap: 5px; align-items: center; margin-bottom: 18px; }
.p-slot { width: 24px; height: 5px; border-radius: 3px; background: var(--border); }
.p-slot.taken { background: #FF5252; }
.p-slot.open { background: var(--green); animation: livePulse 2s infinite; }
.p-slot-txt { font-size: 0.75rem; color: var(--muted); margin-left: 4px; }
.p-slot-txt strong { color: var(--green); }
.p-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.p-features li { font-size: 0.875rem; display: flex; align-items: flex-start; gap: 9px; color: var(--ink2); }
.p-check {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--teal-light);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.p-check svg { width: 10px; height: 10px; stroke: var(--teal); }
.p-btn {
display: block;
text-align: center;
padding: 12px;
border-radius: 10px;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.2s;
}
.p-btn-fill { background: var(--orange); color: #fff; }
.p-btn-fill:hover { background: #e64a19; box-shadow: 0 4px 20px rgba(255,87,34,0.3); }
.p-btn-ghost { border: 1.5px solid var(--border); color: var(--ink); }
.p-btn-ghost:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-light); }
/* ── PROCESS ── */
.process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 2px;
background: var(--border);
border: 1.5px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.proc-step {
background: var(--white);
padding: 36px 28px;
position: relative;
text-align: left;
}
.proc-num {
font-size: 3.5rem;
font-weight: 700;
line-height: 1;
margin-bottom: 14px;
letter-spacing: -0.03em;
}
.proc-step:nth-child(1) .proc-num { color: rgba(255,87,34,0.12); }
.proc-step:nth-child(2) .proc-num { color: rgba(0,191,165,0.12); }
.proc-step:nth-child(3) .proc-num { color: rgba(124,77,255,0.12); }
.proc-step:nth-child(4) .proc-num { color: rgba(255,179,0,0.15); }
.proc-icon {
width: 42px; height: 42px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.proc-step:nth-child(1) .proc-icon { background: var(--orange-light); }
.proc-step:nth-child(2) .proc-icon { background: var(--teal-light); }
.proc-step:nth-child(3) .proc-icon { background: var(--purple-light); }
.proc-step:nth-child(4) .proc-icon { background: var(--yellow-light); }
.proc-icon svg { width: 20px; height: 20px; }
.proc-title { font-weight: 700; font-size: 1rem; margin-bottom: 8px; color: var(--ink); }
.proc-desc { font-size: 0.875rem; color: var(--ink2); line-height: 1.65; }
/* ── WHY ── */
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
.why-card {
background: var(--bg);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 26px;
transition: border-color 0.3s, box-shadow 0.3s;
text-align: left;
}
.why-card:hover { border-color: var(--orange); box-shadow: 0 4px 20px rgba(255,87,34,0.08); }
.why-ico {
width: 42px; height: 42px;
border-radius: 11px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.why-ico svg { width: 20px; height: 20px; }
.why-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; color: var(--ink); }
.why-desc { font-size: 0.85rem; color: var(--ink2); line-height: 1.65; }
/* ── CTA ── */
.cta-section {
background: var(--ink);
padding: 100px 6%;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-blob {
position: absolute;
width: 600px; height: 400px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,87,34,0.12) 0%, transparent 70%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.cta-section h2 {
color: #fff;
font-size: clamp(1.8rem, 3.5vw, 3rem);
margin-bottom: 16px;
position: relative;
}
.cta-section p { color: rgba(255,255,255,0.55); font-size: 1rem; margin-bottom: 36px; position: relative; }
.wa-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #25D366;
color: #fff;
padding: 15px 34px;
border-radius: 10px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 4px 24px rgba(37,211,102,0.3);
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
.wa-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(37,211,102,0.45); }
/* ── FOOTER ── */
footer {
background: var(--white);
border-top: 1.5px solid var(--border);
padding: 32px 6%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
footer .logo img { height: 44px; }
.footer-copy { font-size: 0.8rem; color: var(--muted); }
/* ── FAQ ── */
.faq-list { max-width: 720px; display: flex; flex-direction: column; gap: 12px; margin: 0 auto; text-align: left; }
details.faq-item {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
transition: border-color 0.25s;
}
details.faq-item[open] { border-color: var(--orange); }
details.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
color: var(--ink);
user-select: none;
gap: 12px;
list-style: none;
font-family: 'Hind Siliguri', sans-serif;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary:hover { color: var(--orange); }
.faq-icon {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--orange-light);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background 0.25s, transform 0.3s;
}
details.faq-item[open] .faq-icon { background: var(--orange); transform: rotate(45deg); }
.faq-icon svg { width: 12px; height: 12px; stroke: var(--orange); transition: stroke 0.25s; }
details.faq-item[open] .faq-icon svg { stroke: white; }
.faq-a {
padding: 0 22px 20px;
font-size: 0.9rem;
color: var(--ink2);
line-height: 1.75;
font-family: 'Noto Sans Bengali', sans-serif;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
.fu { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; }
.fu.show { opacity: 1; transform: translateY(0); }
/* ── RESPONSIVE ── */
@media (max-width: 768px) {
.hero { grid-template-columns: 1fr; gap: 40px; }
.hero-right { display: none; }
.nav-links li:not(:last-child) { display: none; }
}
/* ── HAMBURGER ── */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
z-index: 300;
}
.hamburger span {
display: block;
width: 24px; height: 2.5px;
background: var(--ink);
border-radius: 2px;
transition: transform 0.28s ease, opacity 0.28s ease;
transform-origin: center;
}
.hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mobile-menu {
display: none;
position: fixed;
top: 68px; left: 0; right: 0;
background: #FFFFFF;
border-bottom: 1.5px solid var(--border);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
padding: 20px 6%;
flex-direction: column;
gap: 4px;
z-index: 150;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-menu.open { opacity: 1; transform: translateY(0); pointer-events: all; }
.mobile-menu a {
display: block;
padding: 13px 14px;
color: var(--ink2);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
border-bottom: 1px solid var(--border);
border-radius: 8px;
transition: color 0.2s, background 0.2s;
margin-bottom: 2px;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--orange); background: var(--orange-light); }
.mobile-menu a.active {
color: var(--orange);
background: var(--orange-light);
font-weight: 600;
border-bottom: 1px solid var(--orange-mid);
}
.mobile-menu a.nav-cta {
background: var(--orange);
color: #fff !important;
text-align: center;
border-radius: 9px;
font-weight: 700;
border: none;
margin-top: 8px;
}
.mobile-menu a.nav-cta:hover { background: #e64a19; }
.mobile-menu a.nav-cta.active { background: #e64a19; color: #fff !important; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none !important; }
.mobile-menu { display: flex; }
}
/* ── NAV ACTIVE HIGHLIGHT ── */
.nav-links a:not(.nav-cta) {
position: relative;
}
.nav-links a:not(.nav-cta)::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--orange);
border-radius: 2px;
transition: width 0.3s ease;
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after {
width: 100%;
}
.nav-links a:not(.nav-cta).active {
color: var(--orange) !important;
font-weight: 600;
}
/* ── TESTIMONIALS SLIDER ── */
.testi-slider-wrap {
position: relative;
overflow: hidden;
width: 100%;
}
.testi-track {
display: flex;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.testi-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 28px;
position: relative;
transition: box-shadow 0.3s;
flex: 0 0 100%;
box-sizing: border-box;
text-align: left;
}
.testi-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.08); }
.testi-quote {
font-size: 2.4rem;
line-height: 1;
color: var(--orange);
opacity: 0.25;
font-family: Georgia, serif;
margin-bottom: 12px;
}
.testi-text {
font-size: 0.9rem;
color: var(--ink2);
line-height: 1.7;
margin-bottom: 20px;
}
.testi-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.testi-star { color: var(--yellow); font-size: 0.9rem; }
.testi-author { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.testi-avatar {
width: 44px; height: 44px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 0.95rem;
color: white;
flex-shrink: 0;
}
.testi-author-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.testi-name { font-weight: 700; font-size: 0.9rem; color: var(--ink); line-height: 1.2; }
.testi-role { font-size: 0.78rem; color: var(--muted); line-height: 1.3; font-family: 'Noto Sans Bengali', sans-serif; }
/* Navigation dots */
.testi-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 28px;
}
.testi-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--border);
cursor: pointer;
transition: background 0.25s, transform 0.25s, width 0.25s;
border: none;
padding: 0;
}
.testi-dot.active {
background: var(--orange);
width: 24px;
border-radius: 4px;
}
.testi-arrow {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--white);
border: 1.5px solid var(--border);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
flex-shrink: 0;
}
.testi-arrow:hover { border-color: var(--orange); box-shadow: 0 2px 12px rgba(255,87,34,0.15); }
.testi-arrow svg { width: 16px; height: 16px; stroke: var(--ink2); }
.testi-arrow:hover svg { stroke: var(--orange); }
/* ── WHATSAPP POPUP ── */
.wa-popup-fab {
position: fixed;
bottom: 28px; right: 28px;
z-index: 500;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
pointer-events: none;
}
.wa-fab-btn,
.wa-chat-box {
pointer-events: all;
}
.wa-fab-btn {
width: 58px; height: 58px;
border-radius: 50%;
background: #25D366;
box-shadow: 0 4px 20px rgba(37,211,102,0.4);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
flex-shrink: 0;
}
.wa-fab-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,0.55); }
.wa-fab-ping {
position: absolute;
top: 3px; right: 3px;
width: 13px; height: 13px;
border-radius: 50%;
background: #FF5722;
border: 2px solid white;
animation: pingDot 2s ease-in-out infinite;
}
@keyframes pingDot {
0%,100%{transform:scale(1);opacity:1;}
50%{transform:scale(1.35);opacity:0.65;}
}
.wa-tooltip {
background: var(--ink);
color: white;
font-size: 0.76rem;
font-weight: 500;
padding: 5px 11px;
border-radius: 7px;
white-space: nowrap;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.22s, transform 0.22s;
pointer-events: none;
}
.wa-popup-fab:hover .wa-tooltip { opacity: 0; }
.wa-chat-box {
background: white;
border-radius: 16px;
width: 296px;
max-width: calc(100vw - 40px);
box-shadow: 0 8px 40px rgba(0,0,0,0.14);
overflow: hidden;
opacity: 0;
transform: translateY(14px) scale(0.96);
transition: opacity 0.28s ease, transform 0.28s ease;
pointer-events: none;
}
.wa-chat-box.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.wa-chat-header {
background: #25D366;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 11px;
}
.wa-chat-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
color: white;
flex-shrink: 0;
}
.wa-chat-name { color: white; font-weight: 700; font-size: 0.875rem; line-height: 1.2; }
.wa-chat-status { color: rgba(255,255,255,0.82); font-size: 0.72rem; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.wa-online-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pingDot 2s infinite; }
.wa-chat-body { padding: 14px; background: #ece5dd; min-height: 80px; }
.wa-bubble {
background: white;
border-radius: 0 10px 10px 10px;
padding: 10px 13px;
font-size: 0.84rem;
color: var(--ink2);
line-height: 1.55;
box-shadow: 0 1px 3px rgba(0,0,0,0.07);
max-width: 230px;
opacity: 0;
transform: translateY(5px);
transition: opacity 0.35s 0.25s ease, transform 0.35s 0.25s ease;
}
.wa-chat-box.open .wa-bubble { opacity: 1; transform: translateY(0); }
.wa-bubble-time { font-size: 0.66rem; color: var(--muted); margin-top: 3px; text-align: right; }
.wa-chat-footer { padding: 10px 14px; background: white; }
.wa-chat-cta {
display: block;
background: #25D366;
color: white;
text-align: center;
padding: 10px;
border-radius: 9px;
font-weight: 700;
font-size: 0.86rem;
text-decoration: none;
transition: background 0.2s;
}
.wa-chat-cta:hover { background: #1da851; }
/* ── ABOUT US ── */
.about-grid {
max-width: 820px;
margin: 56px auto 0;
text-align: left;
}
.about-story p {
font-size: 0.9rem;
color: var(--ink2);
line-height: 1.8;
margin-bottom: 14px;
font-family: 'Noto Sans Bengali', sans-serif;
}
.about-lead {
font-size: 1rem !important;
color: var(--ink) !important;
font-weight: 600;
border-left: 3px solid var(--orange);
padding-left: 16px;
margin-bottom: 20px !important;
}
.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.about-value-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.about-value-item:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 20px rgba(255,87,34,0.08);
}
.about-value-icon {
width: 42px; height: 42px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.about-value-title { font-weight: 700; font-size: 0.9rem; color: var(--ink); margin-bottom: 3px; }
.about-value-desc { font-size: 0.82rem; color: var(--ink2); line-height: 1.6; font-family: 'Noto Sans Bengali', sans-serif; }
@media (max-width: 768px) {
.about-values { grid-template-columns: 1fr; }
}

/* ── BLOG ── */
.blog-list { display: flex; flex-direction: column; gap: 20px; max-width: 720px; margin: 0 auto; text-align: left; }
.blog-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 28px;
cursor: pointer;
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
display: flex;
gap: 20px;
align-items: flex-start;
}
.blog-card:hover { border-color: var(--orange); box-shadow: 0 6px 28px rgba(255,87,34,0.09); transform: translateY(-2px); }
.blog-num {
font-size: 2rem;
font-weight: 800;
color: var(--orange);
opacity: 0.18;
line-height: 1;
flex-shrink: 0;
font-family: 'Hind Siliguri', sans-serif;
min-width: 36px;
}
.blog-card:hover .blog-num { opacity: 0.35; }
.blog-body { flex: 1; }
.blog-tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
padding: 3px 10px;
border-radius: 100px;
margin-bottom: 10px;
}
.blog-tag-orange { background: var(--orange-light); color: var(--orange); }
.blog-tag-teal { background: var(--teal-light); color: var(--teal); }
.blog-tag-yellow { background: var(--yellow-light); color: #B45309; }
.blog-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 8px;
line-height: 1.45;
}
.blog-excerpt {
font-size: 0.875rem;
color: var(--ink2);
line-height: 1.7;
margin-bottom: 14px;
font-family: 'Noto Sans Bengali', sans-serif;
}
.blog-read {
font-size: 0.8rem;
font-weight: 600;
color: var(--orange);
display: inline-flex;
align-items: center;
gap: 5px;
}
.blog-read svg { transition: transform 0.2s; }
.blog-card:hover .blog-read svg { transform: translateX(4px); }
/* Blog Popup */
.blog-overlay {
position: fixed;
inset: 0;
background: rgba(26,26,46,0.55);
backdrop-filter: blur(4px);
z-index: 800;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.blog-overlay.open { opacity: 1; visibility: visible; }
.blog-popup {
background: var(--white);
border-radius: var(--radius);
max-width: 680px;
width: 100%;
max-height: 88vh;
overflow-y: auto;
padding: 40px;
position: relative;
transform: translateY(20px);
transition: transform 0.3s;
}
.blog-overlay.open .blog-popup { transform: translateY(0); }
.blog-popup-close {
position: sticky;
top: 0;
float: right;
margin: -10px -10px 10px 10px;
width: 36px; height: 36px;
border-radius: 50%;
border: 1.5px solid var(--border);
background: var(--white);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
font-size: 1.1rem;
color: var(--ink2);
transition: border-color 0.2s, color 0.2s;
z-index: 1;
}
.blog-popup-close:hover { border-color: var(--orange); color: var(--orange); }
.blog-popup-tag { margin-bottom: 14px; }
.blog-popup h2 {
font-size: 1.4rem;
font-weight: 800;
color: var(--ink);
line-height: 1.4;
margin-bottom: 20px;
}
.blog-popup-content {
font-size: 0.9rem;
color: var(--ink2);
line-height: 1.85;
font-family: 'Noto Sans Bengali', sans-serif;
}
.blog-popup-content h3 {
font-size: 1rem;
font-weight: 700;
color: var(--ink);
margin: 24px 0 8px;
font-family: 'Hind Siliguri', sans-serif;
}
.blog-popup-content p { margin-bottom: 14px; }
.blog-popup-cta {
margin-top: 28px;
padding-top: 24px;
border-top: 1.5px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.blog-popup-cta p {
font-size: 0.875rem;
color: var(--ink2);
margin: 0;
font-family: 'Noto Sans Bengali', sans-serif;
}
@media (max-width: 768px) {
.blog-popup { padding: 24px; }
.blog-popup h2 { font-size: 1.15rem; }
.blog-card { flex-direction: column; gap: 10px; }
.blog-num { font-size: 1.4rem; }
}

#page-loader {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 16px;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-logo {
display: flex;
align-items: center;
justify-content: center;
}
.loader-logo img {
height: 56px;
width: auto;
max-width: 280px;
}
.loader-bar {
width: 160px;
height: 3px;
background: var(--border);
border-radius: 100px;
overflow: hidden;
}
.loader-bar-fill {
height: 100%;
background: var(--orange);
border-radius: 100px;
animation: loaderFill 0.8s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes loaderFill {
from { width: 0%; }
to { width: 100%; }
}
/* ── BACK TO TOP ── */
.back-to-top {
position: fixed;
bottom: 100px;
right: 35px;
z-index: 400;
width: 44px;
height: 44px;
min-height: unset;
border-radius: 50%;
background: var(--white);
border: 1.5px solid var(--border);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s, visibility 0.3s, transform 0.3s, border-color 0.2s, box-shadow 0.2s;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
border-color: var(--orange);
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(255,87,34,0.15);
}
.back-to-top svg {
width: 18px;
height: 18px;
stroke: var(--orange);
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}


/* ── PORTFOLIO ── */
.portfolio-filter {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 44px;
}
.pf-btn {
padding: 8px 20px;
border-radius: 100px;
border: 1.5px solid var(--border);
background: transparent;
color: var(--ink2);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: 'Hind Siliguri', sans-serif;
}
.pf-btn:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-light); }
.pf-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.port-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.port-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.1); }
.port-browser {
background: #F0F0F5;
padding: 10px 14px 0;
}
.port-browser-bar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.port-dot { width: 9px; height: 9px; border-radius: 50%; }
.port-dot-r { background: #FF5F57; }
.port-dot-y { background: #FFBD2E; }
.port-dot-g { background: #28C840; }
.port-url {
flex: 1;
background: var(--white);
border-radius: 4px;
height: 20px;
display: flex;
align-items: center;
padding: 0 8px;
font-size: 0.65rem;
color: var(--muted);
font-family: monospace;
}
.port-mockup {
border-radius: 8px 8px 0 0;
height: 190px;
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: center;
}
.port-mockup svg { width: 100%; height: 100%; }
.port-info { padding: 22px 22px 20px; }
.port-badge {
display: inline-block;
font-size: 0.68rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 100px;
margin-bottom: 10px;
}
.port-badge-orange { background: var(--orange-light); color: var(--orange); }
.port-badge-teal { background: var(--teal-light); color: var(--teal); }
.port-badge-yellow { background: var(--yellow-light); color: #C67C00; }
.port-badge-purple { background: var(--purple-light); color: var(--purple); }
.port-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.port-client { font-size: 0.78rem; color: var(--muted); margin-bottom: 12px; }
.port-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.port-tag {
font-size: 0.68rem;
font-weight: 500;
padding: 3px 9px;
border-radius: 4px;
background: var(--bg);
color: var(--ink2);
border: 1px solid var(--border);
}
.port-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.port-time { font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.port-link {
font-size: 0.78rem;
font-weight: 600;
color: var(--orange);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: gap 0.2s;
}
.port-link:hover { gap: 8px; }
.port-card.hidden { display: none; }