/* ==========================================================================
   jorurikaj.com — মূল স্টাইলশিট (একটাই ফাইল, কোনো বিল্ড-টুল লাগে না)

   মাপ কীভাবে কাজ করে: ডেস্কটপে 1rem = পর্দার প্রস্থের ১/১২০ (১৯২০px-এ ১৬px),
   ফলে পেইজ Figma নকশার মতোই আনুপাতিকভাবে ছোট-বড় হয়। ১২০০px-এর নিচে
   ট্যাবলেট/ফোনের আলাদা বিন্যাস চলে, সেখানে 1rem = ১৬px।
   Figma px থেকে rem: ১৬ দিয়ে ভাগ করুন (যেমন ২৮px = 1.75rem)।

   সূচিপত্র (ফাইলের ভেতরে এই নামে খুঁজুন):
     ১. Fonts · Design tokens · Reset / base · Shared components
     ২. Top bar · Header + menu · Footer · Inner page banner
     ৩. হোম পেইজ: Hero · Advertisements · Services · About · Steps · FAQ + feedback
     ৪. Tablet + phone (১২০০px-এর নিচে): হোম ও সাধারণ অংশের মোবাইল নিয়ম
     ৫. Open page (খোলা লেখার পেইজ, .rich) · Services page · Site name
     ৬. Post a job · Today's published list · Registration rules · Login · Welcome · Registration forms
     ৭. পেইজ-ভিত্তিক ডেস্কটপ ফন্ট-সাইজ (body.page-* ক্লাস): ২৪px নিয়ম

   নতুন পেইজের স্টাইল: ফাইলের নিচের দিকে নিজের নামে একটা সেকশন খুলুন এবং
   ডেস্কটপ ফন্ট-সাইজ body.page-<নাম> ক্লাসে রাখুন (docs/CODING-STANDARD.md দেখুন)।
   ========================================================================== */

/* ---- Fonts: সাইটেই রাখা ফন্ট (ফাইল public/assets/fonts-এ) ------------------ */
@font-face {
    font-family: "Poppins";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-500.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
    font-family: "Hind Siliguri";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/hind-siliguri-400.woff2") format("woff2");
}
@font-face {
    font-family: "Hind Siliguri";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/hind-siliguri-500.woff2") format("woff2");
}
@font-face {
    font-family: "Hind Siliguri";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/hind-siliguri-600.woff2") format("woff2");
}

/* বাংলা অঙ্ক (০-৯): Hind Siliguri-তে "১" ছোট একটা বাঁকা দাগের মতো আঁকা হয়, দেখতে ফোঁটার মতো লাগে।
   তাই শুধু অঙ্কগুলো ব্যবহারকারীর ডিভাইসের নিজের বাংলা ফন্ট থেকে নেওয়া হয়
   (Windows: Nirmala UI, Android: Noto Sans Bengali, Apple: Bangla Sangam MN)।
   ডিভাইসে না থাকলে সাধারণ ফন্টই চলে। */
@font-face {
    font-family: "Bangla Digits";
    font-weight: 100 500;
    unicode-range: U+09E6-09EF;
    src: local("Nirmala UI"), local("Noto Sans Bengali"), local("Bangla Sangam MN"), local("Kohinoor Bangla"), local("Siyam Rupali");
}
@font-face {
    font-family: "Bangla Digits";
    font-weight: 600 900;
    unicode-range: U+09E6-09EF;
    src: local("Nirmala UI Bold"), local("NirmalaUI-Bold"), local("Noto Sans Bengali Bold"), local("NotoSansBengali-Bold"), local("Bangla Sangam MN Bold"), local("Kohinoor Bangla Bold"), local("Nirmala UI"), local("Noto Sans Bengali");
}

/* ---- Design tokens: রং, ফন্ট-সাইজ, মাপ (পুরো সাইটে একই মান) ------------------ */
:root {
    --teal: #125a6c;
    --teal-05: rgba(18, 90, 108, 0.05);
    --teal-10: rgba(18, 90, 108, 0.1);
    --teal-20: rgba(18, 90, 108, 0.2);
    --teal-35: rgba(18, 90, 108, 0.35);
    --gold: #f0d772;
    --amber: #d08a00;
    --ink: #222;
    --brown: #582a0d;
    --maroon: #6d1b2f;
    --red: #870a0a;
    --olive-10: rgba(106, 93, 16, 0.1);
    --white: #fff;

    --font: "Bangla Digits", "Poppins", "Hind Siliguri", "Noto Sans Bengali", "Nirmala UI", "Siyam Rupali", system-ui, sans-serif;

    /* ডেস্কটপের ফন্ট-সাইজ; ফোনে নিচের Tablet + phone অংশে বদলায় */
    --fs-body: 1.375rem;   /* 22px */
    --fs-lead: 1.75rem;    /* 28px */
    --fs-h1: 5rem;         /* 80px */
    --fs-h2: 3.125rem;     /* 50px */
    --fs-pill: 1.625rem;   /* ২৬px — সেকশনের ওপরের ছোট ক্যাপসুল-শিরোনাম (Figma-তে ২৮px, মালিকের সিদ্ধান্তে কমানো) */
    --fs-nav: 1.625rem;    /* ২৬px — প্রধান মেনু (Figma-তে ২৮px, মালিকের সিদ্ধান্তে কমানো) */
    --fs-btn: 1.5rem;
    --fs-card: 1.75rem;
    --fs-small: 1.125rem;  /* 18px */
    --fs-foot: 1.25rem;    /* 20px */

    --ad-h: 17.375rem;     /* বিজ্ঞাপন-স্ট্রিপের উচ্চতা (২৭৮px) */
}

/* ---- Reset / base: ব্রাউজারের ডিফল্ট মুছে সাধারণ নিয়ম ------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    font-size: clamp(10.5px, 0.8333vw, 16px);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 9rem; /* #faq, #feedback-এর মতো লিংকে গেলে লেখা যেন আটকে-থাকা মেনুর নিচে ঢাকা না পড়ে */
}
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    overflow-wrap: break-word;
}
img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}
a {
    color: inherit;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
h1,
h2,
h3,
p {
    margin: 0;
}
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}
:focus-visible {
    outline: 0.1875rem solid var(--amber);
    outline-offset: 0.2rem;
}

.container {
    width: min(99.5rem, 100% - 2rem);
    margin-inline: auto;
}
.center {
    text-align: center;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--white);
    color: var(--teal);
    border-radius: 0.5rem;
}
.skip-link:focus {
    top: 1rem;
}

/* ---- Shared components: বাটন, ক্যাপসুল-শিরোনাম, সেকশনের সাধারণ কাঠামো ------------ */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    min-height: 4.6875rem;
    padding: 0 3.75rem;
    border-radius: 50px;
    font-size: var(--fs-pill);
    font-weight: 500;
    letter-spacing: 0.105rem;
    line-height: 1.3;
}
.pill img {
    flex: none;
    width: 3.125rem;
    height: auto;
}
.pill--amber {
    background: rgba(192, 122, 0, 0.3);
    color: var(--white);
}
.pill--olive {
    background: var(--olive-10);
    color: var(--teal);
}
.pill--social {
    background: rgba(192, 122, 0, 0.5);
    color: var(--white);
    font-size: 1.375rem;
    letter-spacing: 0.069rem;
    min-height: 3.9375rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    min-height: 4.6875rem;
    padding: 0.5rem 3.75rem;
    border: 0;
    border-radius: 50px;
    font-size: var(--fs-btn);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}
.btn:hover {
    transform: translateY(-0.125rem);
}
.btn--light {
    min-width: 20.125rem;
    background: rgba(255, 255, 255, 0.75);
    color: var(--brown);
    font-size: var(--fs-lead);
}
.btn--light:hover {
    background: rgba(255, 255, 255, 0.95);
}
.btn--teal-soft {
    background: var(--teal-35);
    color: var(--teal);
}
.btn--teal-soft:hover {
    background: rgba(18, 90, 108, 0.5);
}
.btn--white {
    background: var(--white);
    color: var(--teal);
    font-size: var(--fs-lead);
}
.btn--white img {
    width: 1.875rem;
    height: auto;
}

.section {
    padding: 9.875rem 0 10rem;
}
.section--plain {
    padding: 8rem 0;
}
.section__head {
    margin-bottom: 1.5rem;
}
.section__head--center {
    text-align: center;
}
.section__title {
    margin-top: 2.5rem;
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.35;
    color: #000;
}
.section__text {
    margin-top: 1.5rem;
    font-size: var(--fs-body);
    line-height: 1.9;
    color: #000;
}
.section__head--center .section__text {
    max-width: 82.75rem;
    margin-inline: auto;
}

.notice {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 0.625rem;
    font-size: 1.125rem;
    line-height: 1.6;
}
.notice--ok {
    background: #e3f4ea;
    color: #0b5a2a;
}
.notice--error {
    background: #fde8e8;
    color: #8a1111;
    list-style: disc inside;
}

/* ---- Top bar: ওপরের সরু পট্টি (ফোন, ইমেইল, ট্যাগলাইন, সোশ্যাল আইকন) ------------- */
.topbar {
    background: var(--teal);
    color: var(--white);
    min-height: 5.375rem;
    font-size: var(--fs-small);
}
.topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 5.375rem;
    gap: 1rem;
}
.topbar a {
    text-decoration: none;
}
.topbar__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.9rem;
}
.topbar__contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.topbar__tagline {
    font-size: 1.375rem;
    text-align: center;
}
.topbar__tagline span {
    color: var(--gold);
}
.social {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.social a {
    display: block;
}
.social img {
    width: 1.5625rem;
    height: 1.5625rem;
    object-fit: contain;
}
.social--top {
    justify-content: flex-end;
}

/* ---- Header + menu: লোগো ও প্রধান মেনু (সাব-মেনুসহ) -------------------------- */
.site-header {
    /* স্ক্রল করলে প্রধান মেনু ওপরে আটকে থাকে; তার ওপরের সরু পট্টি স্ক্রলের সঙ্গে সরে যায় */
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--white);
    box-shadow: 0 0.2rem 0.9rem rgba(0, 0, 0, 0.08);
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 7.75rem; /* লোগোর ওপরে-নিচে প্রায় ১৪px ফাঁকা থাকে */
    gap: 2rem;
}
.brand {
    display: block;
    flex: none;
    text-decoration: none;
}
.brand__logo {
    display: block;
    width: auto;
    height: 5.75rem;
}
.emblem {
    position: relative;
    display: block;
    width: 6rem;
    aspect-ratio: 96 / 95.7;
    overflow: hidden;
}
.emblem img {
    position: absolute;
    left: -27.01%;
    top: -5.66%;
    width: 154.29%;
    height: 140.43%;
    max-width: none;
}

.nav {
    display: flex;
    align-items: center;
    gap: 2.6rem;
}
.nav__list {
    display: flex;
    align-items: center;
    gap: 2.3rem;
}
.nav__item {
    position: relative;
    display: flex;
    align-items: center;
}
.nav__link {
    display: inline-block;
    padding: 0.4rem 0 0.15rem;
    font-size: var(--fs-nav);
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 0.125rem solid transparent;
    white-space: nowrap;
}
.nav__link:hover {
    color: var(--amber);
}
.nav__link.is-active {
    color: var(--amber);
    font-weight: 600;
    border-bottom-color: var(--amber);
}
.nav__search {
    display: block;
    flex: none;
}
.nav__search img {
    width: 2.625rem;
    height: 2.625rem;
}
.sub-toggle {
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.2rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}
.sub-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 40%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 0.125rem solid var(--ink);
    border-bottom: 0.125rem solid var(--ink);
    transform: translate(-50%, -50%) rotate(45deg);
}
.sub {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 30;
    min-width: 17rem;
    padding: 0.75rem 0;
    background: var(--white);
    border-radius: 0.625rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.15);
    visibility: hidden;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.sub a {
    display: block;
    padding: 0.7rem 1.5rem;
    font-size: var(--fs-body);
    text-decoration: none;
    white-space: nowrap;
}
.sub a:hover {
    background: var(--teal-10);
    color: var(--teal);
}
.has-sub:hover > .sub,
.has-sub:focus-within > .sub,
.has-sub.is-open > .sub {
    visibility: visible;
    opacity: 1;
    transform: none;
}
.nav-toggle {
    display: none;
}

/* ---- Hero: হোমের প্রথম অংশ (শিরোনাম, বাটন, ডানে আজকের কাজের তালিকা) ------------- */
.hero {
    background: var(--teal);
    color: var(--white);
    padding: 10.375rem 0 10rem;
    overflow: clip; /* উড়ে-আসা অক্ষরগুলো যেন কখনও hero-র বাইরে না যায় */
}
.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24.9375rem;
    gap: 4rem;
    align-items: start;
}
.hero__title {
    margin-top: 3.75rem;
    font-size: var(--fs-h1);
    font-weight: 600; /* শিরোনাম মোটা; আমরা Hind Siliguri-র সবচেয়ে মোটা যে ওজন লোড করি সেটাই ৬০০ */
    line-height: 1.5;
}
.hero__title-1,
.hero__title-2 {
    display: block;
}
.hero__title-1 {
    color: var(--gold);
}
.hero__text {
    max-width: 51.75rem;
    font-size: var(--fs-lead);
    line-height: 1.5;
}
.hero .btn {
    margin-top: 2.9rem;
}

.today {
    margin-top: -3.2rem;
    width: 100%;
}
.today__head {
    display: flex;
    align-items: center;
    min-height: 6rem;
    padding: 0 3.7rem;
    border-radius: 0.625rem 0.625rem 0 0;
    background: rgba(176, 176, 176, 0.82);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.3;
}
.today__body {
    min-height: 33.0625rem;
    padding: 2.5rem 0 1.4rem;
    border-radius: 0 0 0.625rem 0.625rem;
    background: rgba(176, 176, 176, 0.28);
}
.today__empty {
    margin: 0 3rem;
    min-height: 22.5rem;
    font-size: var(--fs-body);
    opacity: 0.9;
}
.ticker {
    position: relative;
    height: 22.5rem;
    margin: 0 3rem;
    overflow: hidden;
}
.ticker li {
    height: 2.8125rem;
    font-size: var(--fs-body);
    line-height: 2.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticker a {
    text-decoration: none;
    color: var(--white);
}
.ticker a:hover {
    text-decoration: underline;
}
.ticker__page {
    position: absolute;
    inset: 0;
    visibility: hidden;
}
.ticker.is-live .ticker__page.is-shown {
    visibility: visible;
}
.today__note {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.25rem;
    margin: 1.4rem 1.25rem 0;
    padding: 0.75rem 1rem;
    border-radius: 0.3125rem;
    background: var(--white);
    color: var(--brown);
    font-size: 1.25rem;
    line-height: 1.5;
    text-align: center;
}

/* ---- Hero entrance: শুরুর অ্যানিমেশন ----------------------------------------
   app.js ছোট শিরোনাম, দুই লাইনের শিরোনাম ও লেখাকে অক্ষরে ভাঙে ([data-fly]);
   প্রতিটি অক্ষর নিজের এলোমেলো দিক (--dx, --dy, --rot) থেকে উড়ে এসে বসে,
   পুরোটা মিলিয়ে প্রায় ২.৫ সেকেন্ড। তারপর বাটন আসে, ডানের তালিকা ভেসে ওঠে।
   শুধু transform ও opacity বদলায় (পেইজ ধীর হয় না)। app.js লেখা না ভাঙা পর্যন্ত
   তা লুকানো (opacity 0); ৩.৫ সেকেন্ডের নিরাপত্তা-সময় আছে, যাতে কখনও লুকিয়ে না থাকে। */
.fly-word {
    display: inline-block;
    white-space: nowrap;
}
.fly-letter {
    display: inline-block;
    animation: fly-letter 1.5s cubic-bezier(.2, .7, .2, 1) backwards;
}
@keyframes fly-letter {
    from {
        opacity: 0;
        transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(0.35);
    }
}
@media (scripting: enabled) {
    [data-fly]:not(.is-split) {
        opacity: 0;
        animation: fly-fallback 0.01s 3.5s forwards;
    }
}
@keyframes fly-fallback {
    to {
        opacity: 1;
    }
}
.hero__copy .btn {
    animation: fly-from-top 1.4s cubic-bezier(.2, .7, .2, 1) var(--btn-delay, 2.6s) backwards;
}
.hero .today {
    animation: float-up 2.4s ease-out 0.7s backwards;
}
@keyframes fly-from-top {
    from {
        opacity: 0;
        transform: translateY(-4rem);
    }
}
@keyframes float-up {
    from {
        opacity: 0;
        transform: translateY(2.5rem) scale(0.97);
    }
}

/* ---- Advertisements: ছবির বিজ্ঞাপন-স্ট্রিপ ও তার নিচের সরু লেখার পট্টি --------------- */
.ads {
    position: relative;
    z-index: 2;
    margin-top: -4.4375rem;
}
.ads::before {
    content: "";
    position: absolute;
    inset: 4.4375rem 0 0;
    background: var(--teal-10);
}
.ads__card {
    position: relative;
    width: min(101.5rem, 100% - 2rem);
    padding: 1rem 4rem; /* ছবির ওপরে-নিচের ফাঁকা Figma-র ৪৭px-এর এক-তৃতীয়াংশ */
    background: var(--white);
    border: 1px solid #d3d3d3;
    border-bottom: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    min-height: 3rem;
}
.ad-strip {
    overflow: hidden;
}
.ad-strip__track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6875rem; /* ২৭px = Figma-র ৫৪px-এর অর্ধেক */
}
.ad-strip__item {
    flex: none;
}
.ad-strip__item img {
    height: var(--ad-h);
    width: auto;
    max-width: none;
    object-fit: cover;
    border-radius: 0.625rem;
}
.ad-strip__item a {
    display: block;
}
/* app.js ("Advertisement strip" অংশ) প্রথম ব্যানারটা একবারে একটা করে বাঁ দিকে সরিয়ে দেয় */
.ad-strip.is-marquee .ad-strip__track {
    justify-content: flex-start;
    width: max-content;
}

.rep-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7rem; /* পট্টি আগের চেয়ে নিচু (আগে ১০.৫rem = ১৬৮px) */
    padding: 1rem 0;
    background: var(--teal);
    color: var(--white);
}
/* Marquee: লেখা পেইজের একেবারে ডান প্রান্ত থেকে ঢুকে বাঁ দিকে চলতেই থাকে।
   app.js লেখার দৈর্ঘ্য থেকে --marquee-duration ঠিক করে (গতি সবসময় সমান)।
   মাউস নিলে থামে; "reduce motion" চালু থাকলে লেখা স্থির মাঝখানে দেখায়। */
.rep-bar__text {
    width: 100%;
    overflow: hidden;
    font-size: 2.1875rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}
.rep-bar__move {
    display: inline-block;
    padding-left: 100%;
    animation: rep-marquee var(--marquee-duration, 30s) linear infinite;
}
.rep-bar:hover .rep-bar__move {
    animation-play-state: paused;
}
@keyframes rep-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
/* লেখার ভেতরে অ্যাডমিন যে রংগুলো ব্যবহার করতে পারবেন: [[color:gold|শব্দ]] (helpers.php-র TEXT_COLORS) */
.tc-gold {
    color: var(--gold);
}
.tc-amber {
    color: #ffb11f;
}
.tc-white {
    color: var(--white);
}
.tc-red {
    color: #ff8a8a;
}

/* ---- Services (হোম): সেবার কার্ডের দুই সারি --------------------------------- */
/* পুরো-চওড়ার দুই সারি সেবার কার্ড। app.js .is-moving ক্লাস যোগ করলে কার্ডগুলো
   পুনরাবৃত্তি হয়ে ডান থেকে বাঁয়ে অনন্তকাল চলে (প্রতি সারির নিজস্ব গতি);
   মাউস বা কীবোর্ড-ফোকাসে সারি থামে। JavaScript ছাড়া সাধারণ পাশে-স্ক্রল হয়। */
.service-rows {
    display: grid;
    gap: 1.875rem;
    margin-top: 3rem;
}
.service-row {
    overflow-x: auto;
    padding: 0.375rem 0;
    scrollbar-width: thin;
}
.service-row__track {
    display: flex;
    gap: 1.875rem;
    width: max-content;
    padding: 0 1.875rem;
}
.service-row.is-moving {
    overflow: hidden;
}
.service-row.is-moving .service-row__track {
    padding: 0;
    animation: service-scroll var(--row-duration, 120s) linear infinite;
    animation-delay: var(--row-delay, 0s);
}
.service-row.is-moving:hover .service-row__track,
.service-row.is-moving:focus-within .service-row__track {
    animation-play-state: paused;
}
@keyframes service-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-1 * var(--row-shift, 50%)));
    }
}
.service-card {
    flex: none;
    width: 21.5rem;
}
.service-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 15.25rem;
    padding: 2rem 1rem 0;
    border: 1px solid var(--teal);
    border-radius: 1.25rem;
    background: #f8f8f8;
    text-decoration: none;
    transition: background-color 0.2s, box-shadow 0.2s;
}
.service-card a:hover,
.service-card a:focus-visible {
    background: var(--white);
    box-shadow: 0 0.5rem 1.25rem rgba(18, 90, 108, 0.18);
}
.service-card__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: #0b93b8;
}
.service-card__icon img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
}
.service-card__name {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0 0.5rem 0.75rem;
    font-size: var(--fs-card);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--teal);
}
.services .center {
    margin-top: 4.3rem;
}

/* ---- About (হোম): পরিচয়-অংশ ও বাংলাদেশের মানচিত্র --------------------------- */
.about {
    background: var(--teal-05);
}
.about__grid {
    display: grid;
    grid-template-columns: 56.875rem 29.125rem;
    justify-content: space-between;
    align-items: start;
    margin-top: 1.8rem;
}
.about__copy {
    padding-top: 6.3rem;
    font-size: var(--fs-body);
    line-height: 2.05;
}
.about__copy .btn {
    margin-top: 2.4rem;
}
.about__map {
    width: 29.125rem;
    height: 37.125rem;
    border-radius: 0.625rem;
    object-fit: cover;
}

/* ---- Steps (হোম): "আপনার জন্য, আপনার প্রয়োজনেই"-র ধাপের কার্ড ------------------- */
.step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.step-card {
    min-height: 24.3125rem;
    padding: 2.75rem 2.8rem;
    border-radius: 2.5rem;
    background: var(--teal-20);
}
.step-card__no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5625rem;
    height: 5.5625rem;
    border-radius: 50%;
    background: var(--teal);
    color: var(--white);
    /* Hind Siliguri-তে "১" অর্ধেক-উচ্চতার বাঁকা দাগ, বৃত্তের ভেতরে ফোঁটার মতো দেখায়।
       তাই এখানে ডিভাইসের নিজের বাংলা ফন্ট (Windows: Nirmala UI, Android: Noto Sans Bengali,
       Apple: Kohinoor Bangla) — লম্বা, পরিষ্কার অঙ্ক। */
    font-family: "Nirmala UI", "Noto Sans Bengali", "Kohinoor Bangla", "Hind Siliguri", sans-serif;
    font-size: 2.5rem; /* প্রথম নকশার ৩.৭৫rem-এর চেয়ে এক-তৃতীয়াংশ ছোট */
    font-weight: 700;
    line-height: 1;
}
.step-card h3 {
    margin-top: 2.5rem;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--teal);
}
.step-card p {
    margin-top: 1.2rem;
    max-width: 18.5rem;
    font-size: 1.625rem;
    line-height: 1.5;
}

/* ---- FAQ + feedback (হোম): প্রশ্ন-উত্তর ও মতামতের ফর্ম ---------------------- */
.faq {
    padding-top: 11.25rem;
    background: var(--teal-10);
}
.faq__grid {
    display: grid;
    grid-template-columns: 49.125rem 40.75rem;
    justify-content: space-between;
    align-items: start;
    margin-top: 1.5rem;
}
.faq__list {
    display: grid;
    gap: 1.875rem;
}
.faq__list > p {
    margin-top: 1.5rem;
}
.faq-item {
    border-radius: 0.625rem;
    background: var(--white);
}
.faq-item summary {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.875rem;
    padding: 2.5rem 4.5rem 0.5rem 2.56rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5;
    list-style: none;
    cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary img {
    flex: none;
    margin-top: 0.7rem;
}
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 3rem;
    top: 2.2rem;
    font-size: 1.875rem;
    font-weight: 400;
    letter-spacing: 0.1125rem;
    line-height: 1.2;
}
.faq-item[open] summary::after {
    content: "−";
}
.faq-item p {
    max-width: 38rem;
    padding: 0 2rem 2.5rem 5.3rem;
    font-size: var(--fs-body);
    line-height: 1.6;
}
.faq-item:not([open]) summary {
    padding-bottom: 2.5rem;
}
/* খোলা প্রশ্ন: পুরো বাক্স টিল রঙের, লেখা সাদা, চিহ্ন "−" */
.faq-item[open] {
    background: var(--teal);
    color: var(--white);
}
.faq-item[open] summary img {
    filter: brightness(0) invert(1);
}
.faq-item summary:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
    border-radius: 0.625rem;
}

.feedback {
    padding: 3.4375rem 5.8rem 5.3rem;
    border-radius: 0.625rem;
    background: var(--teal);
    color: var(--white);
}
.feedback__title {
    max-width: 27.75rem;
    margin: 0 auto 2.2rem;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}
.feedback input[type="text"],
.feedback input[type="email"],
.feedback input[type="tel"],
.feedback textarea {
    display: block;
    width: 100%;
    margin-bottom: 1.875rem;
    padding: 0 2.75rem;
    border: 0;
    border-radius: 0.625rem;
    background: var(--white);
    color: var(--ink);
    font-size: var(--fs-body);
}
.feedback input[type="text"],
.feedback input[type="email"],
.feedback input[type="tel"] {
    height: 4.375rem;
}
.feedback textarea {
    min-height: 10.6875rem;
    padding-top: 1.1rem;
    resize: vertical;
}
.feedback ::placeholder {
    color: rgba(34, 34, 34, 0.5);
    opacity: 1;
}
.feedback .btn {
    display: flex;
    margin: 1.25rem auto 0;
    width: 22.625rem;
    max-width: 100%;
}

.map {
    background: var(--teal-10);
}
.map img {
    width: 100%;
    height: 36.5625rem;
    object-fit: cover;
}

/* ---- Inner page banner: ভেতরের পেইজের টিল শিরোনাম-ব্যানার ও ব্রেডক্রাম্ব -------- */
.page-banner {
    padding: 10.75rem 0;
    background: var(--teal);
    color: var(--white);
    text-align: center;
}
.page-banner__title {
    font-size: var(--fs-h1);
    font-weight: 400;
    line-height: 1.5;
}
.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: var(--fs-lead);
}
.crumbs li + li::before {
    content: "/";
    margin-right: 0.4rem;
    color: var(--amber);
}
.crumbs a {
    color: var(--amber);
    text-decoration: none;
}
.crumbs a:hover {
    text-decoration: underline;
}
.error-code {
    font-size: 8rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--teal-20);
}
.section--plain .section__text {
    margin-bottom: 2.5rem;
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
    padding-top: 8rem; /* Figma: লোগোর সারি ফুটারের ওপরের কিনারা থেকে ১২৮px নিচে শুরু */
    background: var(--teal);
    color: var(--white);
    font-size: var(--fs-small);
}
.site-footer a {
    text-decoration: none;
}
.site-footer a:hover {
    text-decoration: underline;
}
.footer__grid {
    display: grid;
    grid-template-columns: 34rem 22.875rem 20.75rem 21.875rem;
    column-gap: 0;
    row-gap: 3.3rem;
    align-items: start;
}
/* সারি ১: বাঁয়ে লোগো (প্রতীক + পাশে নাম), ডানে ইমেইল-বাক্স লোগোর উচ্চতার ঠিক মাঝখানে।
   সারি ২: ঠিকানার তালিকা, লিংকের কলাম ও সোশ্যাল বাক্স — সবগুলো একই লাইন থেকে শুরু। */
.footer__brand {
    display: contents;
}
.site-footer a.footer__brand-head:hover {
    text-decoration: none;
}
.footer__brand-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    grid-column: 1;
    grid-row: 1;
}
.footer__brand-body {
    grid-column: 1;
    grid-row: 2;
}
.footer__brand-head > .emblem--footer {
    flex: none;
    width: 8.875rem;
    margin-left: -1.0625rem;
}
.footer__name {
    width: 13.875rem;
    margin-top: 0;
    font-size: 1.7284rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}
.footer__name span {
    color: var(--gold);
    font-size: 2.0965rem;
}
.footer__tagline {
    width: 13.875rem;
    margin-top: 0.2rem;
    font-size: 1.1314rem;
    font-weight: 600;
    text-align: center;
}
.footer__contact {
    display: grid;
    gap: 1.1rem;
}
.footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 1.3rem;
}
.footer__contact img {
    flex: none;
    width: 1.25rem;
    height: auto;
    margin-top: 0.3rem;
}
.footer__contact address {
    font-style: normal;
    line-height: 1.5;
}
.footer__hotline {
    display: flex;
    align-items: baseline;
    gap: 1.8rem;
    margin-top: 1.6rem;
    font-size: 1.625rem;
}
.footer__hotline a {
    font-size: 1.875rem;
    font-weight: 600;
}

.footer__links {
    display: contents;
}
.footer__links ul {
    grid-row: 2;
    display: grid;
    gap: 1.375rem;
    align-content: start;
    font-size: var(--fs-foot);
}
.footer__links ul:first-child {
    grid-column: 2;
}
.footer__links ul:last-child {
    grid-column: 3;
}
.footer__links-head {
    font-weight: 500;
}
/* ফুটারের ১ম–৩য় কলাম (যোগাযোগের তালিকা ও দুই লিংক-কলাম) ডেস্কটপে ২২px (আগে ১৮px / ২০px)।
   হটলাইন লাইনের নিজের সাইজ আছে; ফোনে আলাদা নিয়ম। */
@media (min-width: 1200px) {
    .footer__contact,
    .footer__links ul {
        font-size: 1.375rem;
    }
}

.footer__side {
    display: contents;
}
.newsletter {
    grid-column: 3 / span 2;
    grid-row: 1;
    position: relative;
    align-self: center;
    height: 4.795rem;
    border-radius: 3.33rem;
    background: var(--white);
}
.newsletter input[type="email"] {
    width: 100%;
    height: 100%;
    padding: 0 9.5rem 0 3rem;
    border: 0;
    border-radius: 3.33rem;
    background: transparent;
    color: var(--ink);
    font-size: var(--fs-body);
}
.newsletter ::placeholder {
    color: rgba(34, 34, 34, 0.56);
    opacity: 1;
}
.newsletter button {
    position: absolute;
    right: 0.3125rem;
    top: 0.3125rem;
    width: 8.25rem;
    height: 4.1875rem;
    border: 0;
    border-radius: 50px;
    background: var(--red);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.newsletter button img {
    width: 2.1875rem;
    height: 2.1875rem;
}
.footer__side .pill--social {
    grid-column: 4;
    grid-row: 2;
    width: 100%;
    padding: 0 1rem;
}
.footer__side .social--footer {
    grid-column: 4;
    grid-row: 2;
    margin-top: 6.5rem;
    justify-content: center;
    gap: 2.1rem;
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3.2rem;
    padding: 3.6rem 0 3.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    font-size: var(--fs-foot);
}
.footer__bottom a {
    color: var(--gold);
}
.footer__bottom p:last-child a {
    color: var(--white);
}

/* ==========================================================================
   Tablet + phone (১২০০px-এর নিচে) — আলাদা বিন্যাস, সাধারণ ১৬px ভিত্তি
   এই বড় অংশে হোম ও সাধারণ অংশের (মেনু, ফুটার, কার্ড) মোবাইল নিয়ম। পরের
   পেইজগুলোর মোবাইল নিয়ম নিজ নিজ সেকশনের ভেতরেই আছে।
   ========================================================================== */
@media (max-width: 1199px) {
    :root {
        --fs-body: 1rem;
        --fs-lead: 1.125rem;
        --fs-h1: 2.25rem;
        --fs-h2: 1.75rem;
        --fs-pill: 1rem;
        --fs-nav: 1.0625rem;
        --fs-btn: 1.0625rem;
        --fs-card: 1.125rem;
        --fs-small: 0.9375rem;
        --fs-foot: 1rem;
        --ad-h: 11rem;
    }
    html {
        font-size: 16px;
    }
    .container {
        width: min(100% - 2.5rem, 46rem);
    }

    .section {
        padding: 3.5rem 0 3.75rem;
    }
    .section__title {
        margin-top: 1.25rem;
        line-height: 1.4;
    }
    .section__text {
        line-height: 1.8;
    }
    .pill {
        min-height: 3.25rem;
        padding: 0.4rem 1.5rem;
        gap: 0.75rem;
        letter-spacing: 0.02rem;
    }
    .pill img {
        width: 2.25rem;
    }
    .btn {
        min-height: 3.25rem;
        padding: 0.4rem 1.75rem;
    }
    .btn--light {
        min-width: 0;
    }

    .topbar {
        min-height: 0;
    }
    .topbar__inner {
        grid-template-columns: 1fr auto;
        min-height: 3rem;
        padding: 0.25rem 0;
    }
    .topbar__tagline {
        display: none;
    }
    .topbar__contact li:nth-child(2) {
        display: none;
    }
    .social {
        gap: 1rem;
    }
    .social img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .header__inner {
        min-height: 5rem;
        gap: 1rem;
    }
    .brand {
        padding: 0.4rem 0;
    }
    .brand__logo {
        height: 3.75rem;
    }
    .nav-toggle {
        display: block;
        width: 3rem;
        height: 3rem;
        border: 0;
        border-radius: 0.5rem;
        background: var(--teal-10);
        cursor: pointer;
        position: relative;
    }
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        position: absolute;
        left: 50%;
        width: 1.4rem;
        height: 0.15rem;
        background: var(--teal);
        content: "";
        transform: translateX(-50%);
        transition: transform 0.2s, opacity 0.2s;
    }
    .nav-toggle__bars {
        top: 50%;
    }
    .nav-toggle__bars::before {
        top: -0.45rem;
    }
    .nav-toggle__bars::after {
        top: 0.45rem;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars {
        background: transparent;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
        top: 0;
        transform: translateX(-50%) rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
        top: 0;
        transform: translateX(-50%) rotate(-45deg);
    }
    .nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 1.25rem 1.25rem;
        background: var(--white);
        border-top: 1px solid var(--teal-20);
        box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.12);
    }
    .nav.is-open {
        display: flex;
    }
    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .nav__item {
        flex-wrap: wrap;
        border-bottom: 1px solid var(--teal-10);
    }
    .nav__link {
        flex: 1;
        padding: 0.9rem 0;
        border-bottom: 0;
        font-size: 1.1rem;
    }
    .nav__link.is-active {
        border-bottom: 0;
    }
    .sub-toggle {
        width: 3rem;
        height: 3rem;
    }
    .sub {
        position: static;
        width: 100%;
        min-width: 0;
        padding: 0 0 0.5rem 1rem;
        box-shadow: none;
        border-radius: 0;
        visibility: visible;
        opacity: 1;
        transform: none;
        display: none;
    }
    .has-sub.is-open > .sub {
        display: block;
    }
    .has-sub:hover > .sub {
        display: none;
    }
    .has-sub.is-open:hover > .sub {
        display: block;
    }
    .sub a {
        padding: 0.6rem 0;
        font-size: 1rem;
    }
    .nav__search {
        align-self: flex-start;
        margin-top: 0.75rem;
    }
    .nav__search img {
        width: 2.25rem;
        height: 2.25rem;
    }

    .hero {
        padding: 2.5rem 0 5.5rem;
    }
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .hero__title {
        margin-top: 1.5rem;
        line-height: 1.4;
    }
    .hero__text {
        margin-top: 0.75rem;
    }
    .hero .btn {
        margin-top: 1.5rem;
    }
    .today {
        margin-top: 0;
    }
    .today__head {
        min-height: 3.5rem;
        padding: 0 1.5rem;
        font-size: 1.2rem;
    }
    .today__body {
        min-height: 0;
        padding: 1rem 0 1rem;
    }
    .ticker,
    .today__empty {
        margin: 0 1.25rem;
        height: 18rem;
        min-height: 0;
    }
    .ticker li {
        height: 2.25rem;
        line-height: 2.25rem;
        font-size: 1rem;
    }
    .today__note {
        min-height: 0;
        margin: 1rem 1rem 0;
        font-size: 0.95rem;
    }

    .ads {
        margin-top: -3rem;
    }
    .ads::before {
        top: 3rem;
    }
    .ads__card {
        width: min(100% - 1.5rem, 48rem);
        padding: 1rem;
        border-radius: 1rem 1rem 0 0;
    }
    .ad-strip__track {
        gap: 1rem;
    }
    .ad-strip__item img {
        border-radius: 0.5rem;
    }
    .rep-bar {
        min-height: 0;
        padding: 1.25rem 0;
    }
    .rep-bar__text {
        font-size: 1.15rem;
        line-height: 1.6;
    }

    .service-rows {
        gap: 0.875rem;
        margin-top: 1.5rem;
    }
    .service-row__track {
        gap: 0.875rem;
        padding: 0 1rem;
    }
    .service-card {
        width: 10.5rem;
    }
    .service-card a {
        height: 10.5rem;
        padding: 1.125rem 0.5rem 0;
        border-radius: 1rem;
    }
    .service-card__icon {
        width: 3.75rem;
        height: 3.75rem;
    }
    .service-card__icon img {
        width: 2rem;
        height: 2rem;
    }
    .service-card__name {
        padding: 0 0.25rem 0.5rem;
        font-size: 1rem;
        line-height: 1.4;
    }
    .services .center {
        margin-top: 2rem;
    }

    .about__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 1rem;
    }
    .about__copy {
        padding-top: 0;
        line-height: 1.85;
    }
    .about__map {
        width: min(100%, 22rem);
        height: auto;
        aspect-ratio: 400 / 510;
        justify-self: center;
    }

    .step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.875rem;
    }
    .step-card {
        min-height: 0;
        padding: 1.5rem 1.25rem;
        border-radius: 1.5rem;
    }
    .step-card__no {
        width: 3.75rem;
        height: 3.75rem;
        font-size: 1.5rem;
    }
    .step-card h3 {
        margin-top: 1.25rem;
        font-size: 1.2rem;
    }
    .step-card p {
        margin-top: 0.5rem;
        font-size: 1rem;
    }

    .faq {
        padding-top: 3.5rem;
    }
    .faq__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .faq__list {
        gap: 0.875rem;
    }
    .faq-item summary {
        gap: 0.9rem;
        padding: 1.25rem 3.25rem 0.25rem 1.25rem;
        font-size: 1.05rem;
    }
    .faq-item summary::after {
        right: 1.25rem;
        top: 1rem;
    }
    .faq-item p {
        padding: 0 1.25rem 1.25rem 3.1rem;
        max-width: none;
    }
    .faq-item:not([open]) summary {
        padding-bottom: 1.25rem;
    }
    .feedback {
        padding: 2rem 1.25rem 2.25rem;
    }
    .feedback__title {
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
    }
    .feedback input[type="text"],
    .feedback input[type="email"],
    .feedback input[type="tel"],
    .feedback textarea {
        margin-bottom: 1rem;
        padding: 0 1.25rem;
    }
    .feedback input[type="text"],
    .feedback input[type="email"],
    .feedback input[type="tel"] {
        height: 3.5rem;
    }
    .feedback textarea {
        min-height: 8rem;
        padding-top: 0.9rem;
    }
    .feedback .btn {
        width: 100%;
    }
    .map img {
        height: 18rem;
    }

    .page-banner {
        padding: 3.5rem 0;
    }
    .crumbs ol {
        margin-top: 0.25rem;
    }
    .error-code {
        font-size: 5rem;
    }

    .site-footer {
        padding-top: 3rem;
    }
    .footer__grid {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }
    .footer__brand {
        display: block;
        grid-column: 1;
        grid-row: auto;
    }
    .footer__brand-head {
        gap: 0.75rem;
    }
    .footer__brand-head > .emblem--footer {
        width: 5.5rem;
        margin-left: 0;
    }
    .footer__name {
        width: auto;
        text-align: left;
        font-size: 1.5rem;
    }
    .footer__name span {
        font-size: 1.75rem;
    }
    .footer__tagline {
        width: auto;
        text-align: left;
        font-size: 1rem;
    }
    .footer__contact {
        margin-top: 1.5rem;
    }
    .footer__hotline {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        font-size: 1.25rem;
    }
    .footer__hotline a {
        font-size: 1.5rem;
    }
    .footer__links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        grid-column: 1;
    }
    .footer__links ul,
    .footer__links ul:first-child,
    .footer__links ul:last-child {
        grid-row: auto;
        grid-column: auto;
        gap: 0.9rem;
    }
    .footer__side {
        display: grid;
        gap: 1.5rem;
        grid-column: 1;
    }
    .newsletter,
    .footer__side .pill--social,
    .footer__side .social--footer {
        grid-column: auto;
        grid-row: auto;
        margin-top: 0;
    }
    .newsletter {
        height: 3.75rem;
    }
    .newsletter input[type="email"] {
        padding: 0 6rem 0 1.25rem;
    }
    .newsletter button {
        width: 5rem;
        height: 3.125rem;
        top: 0.3125rem;
    }
    .newsletter button img {
        width: 1.5rem;
        height: 1.5rem;
    }
    .footer__side .pill--social {
        justify-self: start;
        width: auto;
        padding: 0.4rem 1.5rem;
    }
    .footer__side .social--footer {
        justify-content: flex-start;
        gap: 1.25rem;
    }
    .footer__bottom {
        margin-top: 2rem;
        padding: 1.5rem 0 2rem;
        flex-direction: column;
    }
}

@media (min-width: 700px) and (max-width: 1199px) {
    .container {
        width: min(100% - 4rem, 46rem);
    }
    .step-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    :root {
        --ad-h: 9rem;
    }
    .topbar__contact a span {
        font-size: 0.875rem;
    }
    .service-card__name {
        font-size: 0.95rem;
    }
    .footer__links {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    .ad-strip {
        overflow-x: auto;
    }
    .fly-letter,
    .hero__copy .btn,
    .hero .today {
        animation: none;
    }
    [data-fly]:not(.is-split) {
        opacity: 1;
        animation: none;
    }
    .rep-bar__text {
        width: min(108.9rem, 100% - 2rem);
        white-space: normal;
        text-align: center;
        text-wrap: balance;
    }
    .rep-bar__move {
        display: inline;
        padding-left: 0;
        animation: none;
    }
    .ticker {
        overflow-y: auto;
    }
}

/* ---- Fine-tuning: প্রথম চাক্ষুষ পরীক্ষার পরের ছোট সংশোধন ---------------------- */
.topbar__contact a span {
    white-space: nowrap;
}
.faq-item[open] {
    min-height: 12.8rem;
}
.hero__title {
    text-wrap: balance;
}
@media (max-width: 1199px) {
    .faq-item[open] {
        min-height: 0;
    }
}
@media (max-width: 480px) {
    :root {
        --fs-h1: 1.9rem;
    }
    .hero__title-1 {
        white-space: normal;
    }
}

/* ---- Button "back to top": পেইজের ওপরে যাওয়ার ভাসমান বাটন ---------------------
   ডান কিনারায় আটকানো। app.js একে স্ক্রল-থাম্বের মতো বসায়: পেইজের মাঝামাঝি পেরোলে
   পর্দার মাঝখানে ধীরে ফুটে ওঠে এবং স্ক্রলের সঙ্গে নিচে নামে; পেইজের একেবারে শেষে
   পর্দার নিচে থাকে। ওপরে ফিরলে আবার মাঝখানে উঠে মিলিয়ে যায়। */
.to-top {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: var(--teal);
    color: var(--white);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: background-color 0.2s;
}
.to-top:hover {
    background: var(--red);
}
.to-top:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}
.to-top svg {
    width: 1.6rem;
    height: 1.6rem;
}
@media (max-width: 860px) {
    .to-top {
        right: 1rem;
        width: 3rem;
        height: 3rem;
    }
}

/* ---- Open page (About ও অনুরূপ পেইজ): একটাই খোলা লেখার জায়গা (.rich) -----------
   ভেতরের লেখা অ্যাডমিন-এডিটরে লেখা rich HTML। ছবি বাঁয়ে বা ডানে ভাসতে পারে (লেখা
   ঘিরে যায়), মাঝে বসতে পারে, বা এডিটরে মাপ বদলানো যায় (width/height)।
   মাপ Figma About-ফ্রেম থেকে: ব্যানারের ১৫৬px নিচে শিরোনাম, ৭০px পরে প্রথম লেখা,
   শিরোনামগুলোর মাঝে ৪৫px। */
.section--open-page {
    padding: 9.75rem 0 10rem;
}
.rich {
    font-size: var(--fs-body);
    line-height: 2.05;
    color: #000;
    display: flow-root; /* ভাসমান ছবি যেন বাক্সের ভেতরেই থাকে */
}
.rich > :first-child {
    margin-top: 0;
}
.rich h2 {
    margin: 0 0 4.4rem;
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.35;
}
.rich h3 {
    margin: 2.8rem 0 0.4rem;
    font-size: 2.1875rem;
    font-weight: 600;
    line-height: 1.3;
}
.rich h4 {
    margin: 2rem 0 0.4rem;
    font-size: var(--fs-lead);
    font-weight: 600;
}
.rich p {
    margin: 0 0 1.2rem;
}
.rich ul,
.rich ol {
    margin: 0 0 1.2rem;
    padding-left: 2.2rem;
}
.rich ul { list-style: disc; }
.rich ol { list-style: decimal; }
.rich table {
    width: 100%;
    margin: 0 0 1.2rem;
    border-collapse: collapse;
}
.rich th,
.rich td {
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--teal-20);
}
.rich img {
    max-width: 100%;
    height: auto;
    border-radius: 0.625rem;
}
.rich .img-right {
    float: right;
    margin: 0 0 1.5rem 3rem;
}
.rich .img-left {
    float: left;
    margin: 0 3rem 1.5rem 0;
}
.rich .img-center {
    display: block;
    margin: 0 auto 1.5rem;
}
.ta-center { text-align: center; }
.ta-right { text-align: right; }
.ta-justify { text-align: justify; }

@media (max-width: 1199px) {
    .section--open-page {
        padding: 3rem 0 4rem;
    }
    .rich {
        line-height: 1.85;
    }
    .rich h2 {
        margin-bottom: 1.5rem;
    }
    .rich h3 {
        margin-top: 2rem;
        font-size: 1.5rem;
    }
    .rich .img-right,
    .rich .img-left {
        float: none;
        display: block;
        margin: 0 auto 1.5rem;
    }
}

/* About পেইজে ছবিটা লেখার প্রথম লাইনের চেয়ে ১০px নিচে বসে। */
.rich img.img-down-10 {
    margin-top: 10px;
}

/* ---- Services page (Figma 2642-54): বর্ণানুক্রমে সব সেবা, তিন কলামে ------------- */
.section--services-page {
    padding: 9.75rem 0 8rem;
}
.services-intro {
    font-size: 1.625rem;
    font-weight: 300;
    line-height: 1.73;
    color: var(--ink);
}
.svc-notice {
    margin-top: 1.4rem;
    padding: 1.9rem 3rem;
    border-radius: 1.25rem;
    background: var(--teal);
    color: var(--white);
    font-size: 1.625rem;
    font-weight: 500;
    line-height: 1.73;
}
.svc-notice ul {
    padding-left: 2.4rem;
    list-style: disc;
}
.svc-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 61.8rem);
    height: 5.3rem;
    margin: 3.3rem auto 0;
    border: 1px solid #cecece;
    border-radius: 50px;
    background: var(--teal-05);
}
.svc-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 2rem 0 3.4rem;
    border: 0;
    border-radius: 50px 0 0 50px;
    background: transparent;
    font-size: var(--fs-lead);
    color: var(--ink);
}
.svc-search input::placeholder {
    color: rgba(34, 34, 34, 0.45);
}
.svc-search input:focus,
.svc-search input:focus-visible {
    outline: none; /* ক্যাপসুল তার নিজের বর্ডারই রাখে; আলাদা রঙিন ফোকাস-ফ্রেম নেই */
}
.svc-search__btn {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 13.06rem;
    height: 100%;
    border: 1px solid #cecece;
    border-radius: 50px;
    background: var(--teal);
    color: var(--white);
    font-size: 2rem;
    font-weight: 500;
    cursor: pointer;
}
.svc-search__btn:hover {
    background: #0e4a59;
}
.svc-result {
    margin-top: 1.4rem;
    text-align: center;
    font-size: var(--fs-body);
}
.svc-result a {
    margin-left: 0.6rem;
    color: var(--teal);
    font-weight: 600;
}
.svc-result--note {
    margin-top: 0.4rem;
    font-size: var(--fs-small);
    color: rgba(34, 34, 34, 0.7);
}
.svc-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5.9rem;
    align-items: stretch;
    margin-top: 3rem;
}
.svc-col {
    padding: 1.6rem 0 1.4rem;
    border-radius: 1.25rem;
    background: var(--teal-05);
}
.svc-group + .svc-group {
    margin-top: 1.4rem;
}
.svc-group__head {
    padding: 0.35rem 2rem;
    background: var(--teal-20);
    font-size: var(--fs-lead);
    font-weight: 600;
    line-height: 1.6;
    color: var(--teal);
}
.svc-group li a {
    display: block;
    padding: 0.4rem 2rem;
    border-bottom: 1px solid var(--teal-10);
    font-size: 1.375rem;
    line-height: 1.5;
    color: #000;
    text-decoration: none;
}
.svc-group li:last-child a {
    border-bottom: 0;
}
.svc-group li a:hover,
.svc-group li a:focus-visible {
    background: var(--teal-10);
    color: var(--teal);
}

@media (max-width: 1199px) {
    .section--services-page {
        padding: 3rem 0 4rem;
    }
    .services-intro,
    .svc-notice {
        font-size: 1.0625rem;
    }
    .svc-notice {
        padding: 1.2rem 1.2rem 1.2rem 0.6rem;
    }
    .svc-search {
        height: 3.75rem;
        margin-top: 2rem;
    }
    .svc-search input {
        padding-left: 1.2rem;
        font-size: 0.9375rem;
    }
    .svc-search__btn {
        width: 7.5rem;
        gap: 0.4rem;
        font-size: 1.125rem;
    }
    .svc-search__btn img {
        width: 1.25rem;
        height: 1.25rem;
    }
    .svc-columns {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-top: 2rem;
    }
    .svc-group__head,
    .svc-group li a {
        padding-inline: 1.25rem;
    }
    .svc-group li a {
        font-size: 1.0625rem;
        padding-block: 0.6rem; /* আঙুলে চাপার জন্য আরামদায়ক উচ্চতা */
    }
    .svc-group__head {
        font-size: 1.25rem;
    }
}

/* ---- Site name: পেইজের লেখার ভেতরে "Jorurikaj.com" নাম (View::boldBrand .brandname ক্লাস বসায়) ---- */
.brandname {
    font-weight: 600;
    color: var(--teal);
}
.hero .brandname,
.svc-notice .brandname,
.faq-item[open] .brandname,
.rep-bar .brandname,
.page-banner .brandname {
    color: var(--gold);
}

/* ---- Post a job (Figma 2674-7): "কাজ সম্পর্কে জানান" ফর্ম ------------------------ */
.section--post-job {
    padding: 9.4rem 0 10rem;
}
.post-job__title {
    margin-top: 0;
    text-align: center;
}
.post-job__intro {
    margin-top: 2.3rem;
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 2.05;
    text-align: justify;
    color: var(--ink);
}
.post-job__note {
    margin-top: 1.3rem;
    padding: 1.5rem 2rem;
    text-align: center;
}
.post-job__note p {
    margin: 0;
}
.post-job__tel {
    color: var(--gold);
    font-weight: 600;
    text-decoration: none;
}
.post-job__note strong {
    color: var(--gold);
    font-weight: 600;
}
.post-form {
    max-width: 95.3rem;
    margin: 3.7rem auto 0;
}
.post-form__errors {
    margin-bottom: 2rem;
}
.post-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 40.75rem));
    justify-content: space-between;
    gap: 0 2rem;
}
.pf {
    position: relative;
    margin-bottom: 1.875rem;
}
.pf input,
.pf select,
.pf textarea {
    display: block;
    width: 100%;
    height: 4.8125rem;
    padding: 0 1.5rem 0 4.5rem;
    border: 1px solid rgba(18, 90, 108, 0.49);
    border-radius: 0.625rem;
    background: var(--teal-05);
    color: var(--ink);
    font-size: var(--fs-body);
    font-weight: 300;
}
.pf textarea {
    height: 10.6875rem;
    padding-top: 1.2rem;
    line-height: 2.05;
    resize: vertical;
}
.pf ::placeholder {
    color: rgba(34, 34, 34, 0.6);
    opacity: 1;
}
.pf select {
    appearance: none;
    cursor: pointer;
    background-image: url("../img/icons/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 1.25rem;
}
.pf select:invalid {
    color: rgba(34, 34, 34, 0.6);
}
.pf input:focus,
.pf select:focus,
.pf textarea:focus {
    border-color: var(--teal);
    outline: none;
    background-color: var(--white);
}
.pf--date {
    display: flex;
    align-items: center;
    height: 4.8125rem;
    padding: 0 1.5rem 0 4.5rem;
    border: 1px solid rgba(18, 90, 108, 0.49);
    border-radius: 0.625rem;
    background: var(--teal-05);
}
.pf--date:focus-within {
    border-color: var(--teal);
    background: var(--white);
}
.pf--date label {
    flex: none;
    font-size: var(--fs-body);
    font-weight: 300;
    color: rgba(34, 34, 34, 0.6);
}
.pf--date input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: right;
    font-size: 1.125rem;
}
.pf--date input:focus {
    background: transparent;
}
.post-form__submit {
    margin-top: 4.4rem;
    text-align: center;
}
.pf-submit {
    min-height: 4.6875rem;
    padding: 0.5rem 3.75rem;
    border: 2px solid rgba(18, 90, 108, 0.5);
    border-radius: 50px;
    background: rgba(18, 90, 108, 0.25);
    color: var(--teal);
    font-size: 1.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.pf-submit:hover,
.pf-submit:focus-visible {
    background: var(--teal);
    color: var(--white);
}

@media (max-width: 1199px) {
    .section--post-job {
        padding: 3rem 0 4rem;
    }
    .post-job__title {
        font-size: 1.75rem;
    }
    .post-job__intro {
        font-size: 1.0625rem;
        line-height: 1.85;
        text-align: left;
    }
    .post-job__note {
        font-size: 1.0625rem;
        padding: 1.2rem 1rem;
    }
    .post-form {
        margin-top: 2rem;
    }
    .post-form__grid {
        grid-template-columns: 1fr;
    }
    .pf {
        margin-bottom: 1rem;
    }
    .pf input,
    .pf select,
    .pf textarea,
    .pf--date {
        height: 3.75rem;
        padding-left: 1.2rem;
        font-size: 1rem;
    }
    .pf textarea {
        height: 9rem;
        padding-top: 0.9rem;
        line-height: 1.7;
    }
    .pf--date label {
        font-size: 1rem;
    }
    .pf-submit {
        width: 100%;
        font-size: 1.375rem;
    }
    .post-form__submit {
        margin-top: 2rem;
    }
}

/* "কাজের ধরন": খোঁজা-যায় এমন ড্রপডাউন (.combo, app.js বানায়) ও ফর্মের বিন্যাস-সংশোধন */
.pf--combo input {
    padding-right: 4rem;
}
.combo__toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 4rem;
    height: 4.8125rem;
    border: 0;
    background: url("../img/icons/chevron-down.svg") no-repeat center / 1.25rem;
    cursor: pointer;
}
.combo__list {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 19rem;
    overflow-y: auto;
    border: 1px solid rgba(18, 90, 108, 0.49);
    border-radius: 0.625rem;
    background: var(--white);
    box-shadow: 0 0.75rem 1.75rem rgba(18, 90, 108, 0.18);
}
.combo__list [role="option"] {
    padding: 0.55rem 1.5rem 0.55rem 4.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
    cursor: pointer;
}
.combo__list [role="option"]:hover,
.combo__list [role="option"].is-active {
    background: var(--teal-10);
    color: var(--teal);
}
.combo__none {
    padding: 1rem 1.5rem 1rem 4.5rem;
    font-size: 1.125rem;
    color: rgba(34, 34, 34, 0.75);
}
.combo__use {
    display: block;
    margin-top: 0.7rem;
    padding: 0.5rem 1.4rem;
    border: 2px solid rgba(18, 90, 108, 0.5);
    border-radius: 50px;
    background: rgba(18, 90, 108, 0.12);
    color: var(--teal);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
}
.combo__use:hover {
    background: var(--teal);
    color: var(--white);
}
.pf__hint {
    position: absolute;
    left: 0.25rem;
    top: calc(100% + 0.1rem);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--teal);
}
/* দুই ঘরের গুচ্ছ মাঝের দিকে ২৫px সরানো; বিস্তারিত-বাক্স ঠিক ততটাই চওড়া */
.post-form__grid {
    padding-inline: 1.5625rem;
}
.pf--wide {
    margin-inline: 1.5625rem;
}
@media (max-width: 1199px) {
    .post-form__grid {
        padding-inline: 0;
    }
    .pf--wide {
        margin-inline: 0;
    }
    .combo__list [role="option"] {
        padding-left: 1.2rem;
        font-size: 1.0625rem;
    }
    .combo__none {
        padding-left: 1.2rem;
    }
    .combo__toggle {
        height: 3.75rem;
    }
}

/* "ইংরেজি অক্ষরে লিখলে বাংলা হবে" সুইচ (partials/bn-switch.php) */
.bn-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0.6rem 1.2rem;
    border: 1px dashed var(--teal-35);
    border-radius: 0.625rem;
    background: var(--teal-05);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--teal);
}
.bn-switch__btn {
    flex: none;
    min-width: 4.5rem;
    padding: 0.2rem 1rem;
    border: 2px solid var(--teal);
    border-radius: 50px;
    background: var(--teal);
    color: var(--white);
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
}
.bn-switch__btn.is-off {
    background: transparent;
    color: var(--teal);
}
.svc-search + .bn-switch {
    width: min(100%, 61.8rem);
    margin: 1rem auto 0;
}
.feedback .bn-switch {
    background: var(--white);
}

/* হোম পেইজ (ডেস্কটপ): ২২px লেখা সব ২৪px, লেখার নিচের বাটন একই অনুপাতে বড় (২৪px → ২৬.২px)।
   ফোন/ট্যাবলেটের সাইজ আলাদা, বদলায়নি। */
@media (min-width: 1200px) {
    body.page-home {
        --fs-body: 1.5rem;
    }
    .page-home .btn--teal-soft,
    .page-home .feedback .btn {
        font-size: 1.6364rem;
    }
}

/* ---- হোমের কয়েকটি সংশোধন (ফিডব্যাক, FAQ) -------------------------------------- */
/* মতামতের ফর্ম: "ইংরেজি অক্ষরে লিখুন" লাইনটা সরাসরি টিল বাক্সের ওপর; সাদা লেখা, ডানে সাদা বাটন */
.feedback .bn-switch {
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--white);
}
.feedback .bn-switch__text {
    flex: 1;
}
.feedback .bn-switch__btn {
    border-color: var(--white);
    background: var(--white);
    color: var(--teal);
}
.feedback .bn-switch__btn.is-off {
    background: transparent;
    color: var(--white);
}
/* FAQ: খোলা উত্তর প্রশ্নের একটু নিচে ও ডানে, চওড়া জায়গায় বসে; খোলা প্রশ্ন সোনালি রঙের হয় */
.faq-item[open] summary {
    padding-bottom: 1.5rem;
    color: var(--gold);
}
.faq-item p {
    max-width: none;
    padding: 0.5rem 3rem 3rem 7.6rem;
}
@media (max-width: 1199px) {
    .feedback .bn-switch {
        flex-wrap: wrap;
    }
    .faq-item p {
        padding: 0.25rem 1.25rem 1.75rem 3.2rem;
    }
}

/* ---- About পেইজ (ডেস্কটপ): লেখা ২২px → ২৪px ------------------------------------- */
@media (min-width: 1200px) {
    body.page-about {
        --fs-body: 1.5rem;
    }
}

/* ---- Registration rules (Figma 2631-395, 2683-148, 2683-305) -------------------
   তিনটা নিয়মাবলীর পেইজ (/registration, /registration/professional, /registration/agent)।
   ডেস্কটপে লেখা ২৪px, বাকি সাইজ Figma + ২px (body.page-regrules)। */
/* লেখার ওপরের তিনটা নিয়মাবলী-বাটন (partials/reg-tabs.php); খোলা পেইজের বাটনটা নিষ্ক্রিয় */
.reg-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.5rem;
    margin-bottom: 4.5rem;
}
.reg-tabs .btn {
    min-height: 3.75rem;
    padding: 0.4rem 2rem;
    border: 2px solid rgba(18, 90, 108, 0.5);
    font-size: 1.25rem;
}
.reg-tabs .btn.is-current {
    background: transparent;
    border-color: rgba(18, 90, 108, 0.25);
    color: rgba(18, 90, 108, 0.45);
    cursor: default;
}
.reg-tabs .btn.is-current:hover {
    transform: none;
}
@media (min-width: 1200px) {
    body.page-regrules {
        --fs-body: 1.5rem;
        --fs-h2: 3.25rem;
    }
    .page-regrules .rich h3 {
        font-size: 2.25rem;
    }
    .page-regrules .rich h4 {
        font-size: 1.875rem;
        font-weight: 600;
    }
    .page-regrules .rich {
        line-height: 1.875;
    }
}
@media (max-width: 1199px) {
    .reg-tabs {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 2rem;
    }
    .reg-tabs .btn {
        padding-inline: 1rem;
        font-size: 1rem;
    }
}

/* গাইডলাইন পেইজের নিচের অংশ (partials/reg-join.php): হালকা টিল ব্যান্ডে দুটো ছবির কার্ড */
.section--guide {
    padding-bottom: 9.75rem;
}
.reg-join {
    padding: 10rem 0 10rem;
    background: var(--teal-10);
    text-align: center;
}
.reg-join__title {
    margin: 1.9rem 0 1.1rem;
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.35;
}
.reg-join__text {
    text-align: justify;
    font-size: var(--fs-body);
    line-height: 2.05;
}
.reg-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7rem;
    margin-top: 2.5rem;
    text-align: left;
}
.reg-card {
    padding: 1.5rem 1.7rem 2.6rem;
    border: 1px solid #eaeaea;
    border-radius: 1.25rem;
    background: var(--teal);
    color: var(--white);
}
.reg-card > img {
    width: 100%;
    aspect-ratio: 686 / 432;
    object-fit: cover;
    border-radius: 1.25rem;
}
.reg-card h3 {
    margin: 2.6rem 0 0.4rem;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.3;
}
.reg-card p {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.9;
}
.reg-card a {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 2.2rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--white);
}
.reg-card a img {
    width: 1.125rem;
    height: auto;
}
.reg-card a:hover {
    text-decoration: underline;
}
@media (min-width: 1200px) {
    .page-regguide .reg-join__title {
        font-size: 3.25rem;
    }
    .page-regguide .reg-card h3 {
        font-size: 2.625rem;
    }
    .page-regguide .reg-card a {
        font-size: 1.625rem;
    }
}
@media (max-width: 1199px) {
    .section--guide {
        padding-bottom: 3rem;
    }
    .reg-join {
        padding: 3rem 0 3.5rem;
    }
    .reg-join__title {
        font-size: 1.5rem;
    }
    .reg-join__text {
        text-align: left;
        line-height: 1.85;
    }
    .reg-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .reg-card h3 {
        margin-top: 1.5rem;
        font-size: 1.5rem;
    }
    .reg-card a {
        margin-top: 1.25rem;
    }
}

/* ---- Services page (ডেস্কটপ): ভূমিকা ২৪px, বর্ণ-শিরোনাম +২px, সেবার নাম ২৪px ------
   সার্চের নিচের "ইংরেজি অক্ষরে লিখুন" লাইন বাক্স ছাড়া একটাই মাঝের লাইন, বাটন ডান প্রান্তে।
   কলামগুলো একটু কাছে, যাতে সবচেয়ে লম্বা নামও ২৪px-এ এক লাইনে ধরে। টিল বাক্সের লেখা আগের মতো। */
@media (min-width: 1200px) {
    .services-intro {
        font-size: 1.5rem;
    }
    .svc-columns {
        gap: 3.5rem;
    }
    .svc-group__head {
        padding-inline: 1.75rem;
        font-size: 1.875rem;
    }
    .svc-group li a {
        padding-inline: 1.75rem;
        font-size: 1.5rem;
    }
    .svc-search + .bn-switch {
        flex-wrap: nowrap;
        justify-content: center;
        width: auto;
        margin: 1.25rem 0 0;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .svc-search + .bn-switch .bn-switch__text {
        white-space: nowrap;
    }
}

/* ---- Post a job (ডেস্কটপ): শিরোনামের নিচের লেখা এবং ঘরের ভেতরের লেখা (টাইপ করা অংশ,
   ইঙ্গিত-লেখা, ড্রপডাউনের তালিকা) ২৪px। "ইংরেজি অক্ষরে লিখুন" লাইন বাক্স ছাড়া একটাই মাঝের লাইন,
   বাটন ডান প্রান্তে। টিল নোট-বাক্সের সাইজ আগের মতো। */
@media (min-width: 1200px) {
    body.page-post {
        --fs-body: 1.5rem;
    }
    .page-post .pf--date input {
        font-size: 1.5rem;
    }
    .page-post .combo__list [role="option"] {
        font-size: 1.5rem;
    }
    .page-post .combo__none,
    .page-post .combo__use {
        font-size: 1.25rem;
    }
    .page-post .post-form .bn-switch {
        flex-wrap: nowrap;
        justify-content: center;
        margin: 0 0 1.75rem;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .page-post .post-form .bn-switch__text {
        white-space: nowrap;
    }
}

/* ---- Today's published list (Figma 2675-148): "কাজ সম্পর্কে জানুন" তালিকা ---------- */
.section--today {
    padding: 9.4rem 0 10rem;
}
.today-intro {
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 2.05;
    text-align: justify;
    color: var(--ink);
}
.job-list {
    margin-top: 1.9rem;
}
.job {
    margin-bottom: 1.875rem;
    border: 1px solid #c8c8c8;
    border-radius: 0.625rem;
    background: var(--white);
}
.job[open] {
    background: var(--teal-10);
}
.job summary {
    position: relative;
    display: block;
    padding: 2.6rem 8rem 2.4rem 4.25rem;
    list-style: none;
    cursor: pointer;
}
.job summary::-webkit-details-marker {
    display: none;
}
.job summary:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: -3px;
    border-radius: 0.625rem;
}
.job__title {
    display: block;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--teal); /* বিজ্ঞপ্তির শিরোনাম রঙিন, বাকি লেখা সাধারণ রঙের */
}
.job__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 2.5rem;
    margin: 0.55rem 0 0 4.5rem;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
}
.job__toggle {
    position: absolute;
    top: 1.5rem;
    right: 7rem;
    font-size: 3.125rem;
    font-weight: 600;
    line-height: 1;
    color: rgba(34, 34, 34, 0.78);
}
.job__toggle::before {
    content: "+";
}
.job[open] .job__toggle::before {
    content: "−";
}
.job__body {
    padding: 0.3rem 4rem 2.6rem 8.75rem;
    font-size: var(--fs-body);
    line-height: 1.9;
    color: #000;
}
.job__body p {
    margin: 0 0 0.9rem;
}
.job__label {
    margin-top: 1.1rem !important;
    font-weight: 700;
}
.job__row {
    margin-bottom: 0.4rem !important;
}
.job-reveal {
    display: inline;
    padding: 0.05rem 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--teal);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    cursor: pointer;
}
.job-reveal:hover,
.job-reveal:focus-visible {
    background: var(--teal-10);
}
.job__hint {
    margin-left: 1rem;
    color: rgba(34, 34, 34, 0.75);
}
.job-empty {
    padding: 3rem 2rem;
    border: 1px dashed var(--teal-35);
    border-radius: 0.625rem;
    background: var(--teal-05);
    text-align: center;
    font-size: var(--fs-body);
}
/* ডেস্কটপ: সাধারণ লেখা ২৪px, বাকি সাইজ Figma + ২px */
@media (min-width: 1200px) {
    body.page-today {
        --fs-body: 1.5rem;
        --fs-h1: 5.125rem;
        --fs-lead: 2rem;
    }
    .page-today .job__title {
        font-size: 2rem;
    }
    .page-today .job__toggle {
        font-size: 3.25rem;
    }
}
@media (max-width: 1199px) {
    .section--today {
        padding: 3rem 0 4rem;
    }
    .today-intro {
        font-size: 1.0625rem;
        line-height: 1.85;
        text-align: left;
    }
    .job summary {
        padding: 1.25rem 3.5rem 1.1rem 1.25rem;
    }
    .job__title {
        font-size: 1.25rem;
    }
    .job__meta {
        margin-left: 0;
        font-size: 0.9375rem;
        gap: 0.1rem 1rem;
    }
    .job__toggle {
        top: 1rem;
        right: 1.25rem;
        font-size: 2rem;
    }
    .job__body {
        padding: 0.2rem 1.25rem 1.5rem;
        font-size: 1rem;
        line-height: 1.8;
    }
    .job__hint {
        display: block;
        margin: 0.2rem 0 0;
        font-size: 0.9375rem;
    }
}

/* পপ-আপ "আপনি কি আগ্রহী?" → নাম + মোবাইল (তালিকা-পেইজ; ফোন/ইমেইল দেখার আগে) */
.lead {
    width: min(92vw, 44rem);
    max-width: none;
    padding: 2.6rem 2.8rem 2.2rem;
    border: 0;
    border-radius: 1.25rem;
    background: var(--white);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
    color: var(--ink);
}
.lead::backdrop {
    background: rgba(8, 40, 48, 0.6);
}
.lead h3 {
    margin: 0 0 0.8rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--teal);
}
.lead p {
    margin: 0 0 1.1rem;
    font-size: var(--fs-body);
    line-height: 1.7;
}
.lead__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.6rem;
    margin: 1.6rem 0 0 !important;
}
.lead .pf-submit {
    font-size: 1.5rem;
    min-height: 3.9rem;
    padding: 0.3rem 2.2rem;
}
.lead__no {
    padding: 0.6rem 1rem;
    border: 0;
    background: transparent;
    color: var(--teal);
    font: inherit;
    font-size: 1.375rem;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    cursor: pointer;
}
.lead .pf {
    margin-bottom: 1rem;
}
.lead .pf input {
    height: 4.2rem;
    padding-left: 1.5rem;
}
.lead .bn-switch {
    margin-bottom: 1rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.9375rem;
}
.lead__error {
    margin: 0 0 0.4rem !important;
    color: #8a1111;
    font-size: 1.25rem !important;
    font-weight: 600;
}
@media (min-width: 1200px) {
    body.page-today .lead h3 {
        font-size: 2rem; /* ৩০px + ২px */
    }
}
@media (max-width: 1199px) {
    .lead {
        padding: 1.6rem 1.25rem 1.4rem;
    }
    .lead h3 {
        font-size: 1.375rem;
    }
    .lead p {
        font-size: 1rem;
    }
    .lead .pf-submit {
        width: 100%;
        font-size: 1.125rem;
    }
    .lead .pf input {
        height: 3.5rem;
        font-size: 1rem;
    }
}

/* Post a job — ইঙ্গিত-লেখাগুলো ফ্যাকাশে (প্রায় অর্ধেক রং): ইঙ্গিত, বাছাই-না-করা ড্রপডাউন,
   "+৮৮", তারিখের ক্যাপশন ও খালি তারিখ-ফরম্যাট। শুধু প্রথম ঘরের ডান প্রান্তের
   "(না পেলে যোগ করুন)" গাঢ়, কারণ ওটা বাটনের মতো কাজ করে। */
.post-form .pf ::placeholder,
.post-form .pf select:invalid,
.post-form .pf--date label,
.post-form .pf__code {
    color: rgba(34, 34, 34, 0.4);
}
.post-form .pf--date input.is-empty {
    color: rgba(34, 34, 34, 0.4);
}
.post-form .pf--date input.is-empty::-webkit-datetime-edit {
    color: rgba(34, 34, 34, 0.4);
}
.pf__aside {
    position: absolute;
    top: 50%;
    right: 4rem;
    transform: translateY(-50%);
    font-size: 1.25rem;
    font-weight: 500;
    color: rgba(34, 34, 34, 0.85);
    pointer-events: none;
}
.pf--combo input:not(:placeholder-shown) ~ .pf__aside,
.pf--combo input:focus ~ .pf__aside {
    display: none;
}
@media (max-width: 1199px) {
    .pf__aside {
        right: 3rem;
        font-size: 0.875rem;
    }
}

/* মোবাইল নাম্বারের ঘর: সামনে "+৮৮" স্থির, ব্যবহারকারী ১১ সংখ্যা (01XXXXXXXXX) লেখেন */
.pf--phone {
    position: relative;
}
.pf__code {
    position: absolute;
    top: 50%;
    left: 4.5rem;
    transform: translateY(-50%);
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ink);
    pointer-events: none;
}
.pf--phone input {
    padding-left: 8.2rem;
}
.lead .pf__code {
    left: 1.5rem;
}
.lead .pf--phone input {
    padding-left: 4.6rem;
}
@media (max-width: 1199px) {
    .pf__code {
        left: 1.2rem;
        font-size: 1rem;
    }
    .pf--phone input {
        padding-left: 3.9rem;
    }
}

@media (max-width: 1199px) {
    html {
        scroll-padding-top: 6rem; /* ফোনে মেনু-পট্টি প্রায় ৮০px উঁচু */
    }
}

/* কাজ জমা দেওয়ার পরের বার্তা-বক্স (.post-toast): পর্দার মাঝখানে বসানো, ১০ সেকেন্ড পর মিলিয়ে যায়
   (app.js বন্ধ করে; JavaScript বন্ধ থাকলে CSS অ্যানিমেশনই একই কাজ করে), ✕ বাটনে সঙ্গে সঙ্গে বন্ধ। */
.post-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    width: min(54rem, calc(100vw - 2rem));
    padding: 2.4rem 2.6rem 2.2rem;
    border: 1px solid var(--teal-35);
    border-radius: 1.25rem;
    background: var(--white);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.28);
    text-align: center;
    transform: translate(-50%, -50%);
    animation: post-toast-out 0.4s ease 10s forwards;
}
.post-toast.is-closed {
    display: none;
}
@keyframes post-toast-out {
    to {
        opacity: 0;
        visibility: hidden;
    }
}
.post-toast__icon {
    display: block;
    width: 7.5rem;
    height: auto;
    margin: 0 auto;
}
.post-toast h3 {
    margin-top: 0.8rem;
    font-size: 2rem;
    font-weight: 600;
    color: var(--teal);
}
.post-toast p {
    margin-top: 0.9rem;
    font-size: 1.0625rem;
    line-height: 1.8;
}
@media (min-width: 1200px) {
    .post-toast p {
        font-size: 1.5rem; /* ২৪px */
        line-height: 1.85;
    }
}
.post-toast__close {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
}
.post-toast__close:hover,
.post-toast__close:focus-visible {
    background: var(--teal-10);
}
@media (prefers-reduced-motion: reduce) {
    .post-toast {
        animation-duration: 0.01s;
        animation-delay: 10s;
    }
}
@media (max-width: 1199px) {
    .post-toast__icon {
        width: 5rem;
    }
}

/* ---- Login (Figma 2660-816 পেশাজীবী, 2686-619 প্রতিনিধি): টিল কার্ডে লগইন আইডি ও পাসওয়ার্ড ---- */
.section--login {
    padding: 9.4rem 0 10rem;
}
.login__title {
    margin-top: 0;
    text-align: center;
}
.login-card {
    max-width: 66.1875rem; /* ১০৫৯px */
    margin: 4rem auto 0;
    padding: 5.75rem 0 5.75rem;
    border-radius: 0.5rem;
    background: var(--teal);
    color: var(--white);
}
.login-card__errors {
    margin: -2.5rem 3rem 2rem;
    font-size: var(--fs-small);
}
.login-card__row {
    display: grid;
    grid-template-columns: 22.625rem 27.8125rem; /* লেবেল ডানে-মেলানো ৩৬২px, ঘর ৪৪৫px */
    column-gap: 2.8125rem;
    align-items: center;
    margin-bottom: 3.1875rem;
}
.login-card__row label {
    font-size: 1.875rem;
    text-align: right;
}
.lg-field {
    position: relative;
}
.lg-field input {
    display: block;
    width: 100%;
    height: 4.1875rem;
    padding: 0 3.75rem 0 1.5rem;
    border: 2px solid transparent;
    border-radius: 0.4rem;
    background: #dde5e8;
    color: var(--ink);
    font-size: var(--fs-body);
}
.lg-field input::placeholder {
    color: rgba(34, 34, 34, 0.55);
    opacity: 1;
}
.lg-field input:focus {
    border-color: var(--gold);
    outline: none;
    background: var(--white);
}
.lg-eye {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: url("../img/icons/eye.svg") no-repeat center / 1.5rem;
    transform: translateY(-50%);
    cursor: pointer;
}
.lg-eye[aria-pressed="true"] {
    background-image: url("../img/icons/eye-off.svg");
}
.lg-eye:focus-visible {
    outline: 2px solid var(--teal);
}
.login-card__submit {
    margin: 0 0 0 25.375rem; /* ঘরের বাঁ কিনারার সঙ্গে সোজা */
}
.lg-submit {
    min-width: 16.5rem;
    min-height: 4.625rem;
    padding: 0.5rem 2rem;
    border: 2px solid var(--gold);
    border-radius: 0.4rem;
    background: #fff8d2;
    color: var(--teal);
    font-size: 1.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}
.lg-submit:hover,
.lg-submit:focus-visible {
    background: var(--gold);
}
.login__help,
.login__links {
    margin-top: 2.25rem;
    text-align: center;
    font-size: var(--fs-body);
}
.login__links {
    margin-top: 1rem;
    font-size: var(--fs-small);
}
.login__tel,
.login__links a {
    color: var(--teal);
    font-weight: 600;
}
.login__links span {
    margin: 0 0.5rem;
}

/* ---- Welcome (Figma 2663-981, 2686-740): লগইনের পরের স্বাগত লেখা -------------------- */
.section--welcome {
    padding: 9rem 0;
    text-align: center;
}
.welcome__line {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.875;
}
.welcome__name {
    display: inline-block;
    min-width: 12rem;
    padding: 0 0.5rem;
    border-bottom: 3px dotted var(--amber);
    font-weight: 600;
}
.welcome__out {
    margin-top: 3.5rem;
}
.welcome__out .pf-submit {
    min-height: 4rem;
    font-size: 1.5rem;
}

/* ---- Header avatar: লগইন-করা সদস্যের ছবি (Figma 2663-981) ---------------------------- */
.nav__avatar {
    display: block;
    flex: none;
    width: 3.625rem;
    height: 3.625rem;
    margin-left: 1.75rem;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--teal);
    color: var(--white);
    text-align: center;
    text-decoration: none;
}
.nav__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nav__avatar span {
    display: block;
    font-size: 1.875rem;
    line-height: 3.625rem;
}

/* ---- Registration forms (Figma 2658-504 পেশাজীবী, 2682-2 প্রতিনিধি) --------------------
   ঘর, নোট-বাক্স ও বাটন "কাজ সম্পর্কে জানান"-এর ক্লাসই (.pf, .post-form); এখানে শুধু দুই-কলামের বিন্যাস ও ছবির অংশ। */
.reg-form {
    max-width: 85.25rem; /* ১৩৬৪px: বিস্তারিত-বাক্সের চওড়া */
}
.reg-form__grid {
    display: grid;
    grid-template-columns: 40.75rem 31.625rem;
    column-gap: 10.4375rem;
    align-items: start;
}
.reg-form .pf--wide {
    margin-inline: 0; /* Figma: বিস্তারিত-বাক্স ১৩৬৪px, দুই কলামের পুরো চওড়া */
}
.reg-form__note {
    width: 36.125rem;
    margin: -0.25rem 0 1.1rem 2.75rem;
    font-size: 1.25rem;
    line-height: 1.5;
    text-align: justify;
    color: #000;
}
.reg-photo {
    text-align: center;
}
.reg-photo__pick {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.8125rem;
    border-radius: 0.625rem;
    background: #f3f7f8;
}
.reg-photo__label {
    padding-left: 2.8rem;
    font-size: 1.875rem;
    color: rgba(34, 34, 34, 0.6);
}
.reg-photo__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.4375rem;
    height: 100%;
    border-radius: 0.625rem;
    background: #cdcdcd;
    color: #000;
    font-size: 1.875rem;
    font-weight: 500;
}
/* আসল ফাইল-ঘরটা পুরো বাক্স জুড়ে স্বচ্ছ: যেকোনো জায়গায় ক্লিকে ফাইল-বাছাই খোলে */
.reg-photo__pick input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.reg-photo__pick:focus-within {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}
.reg-photo__name {
    margin: 1.6rem 0 0;
    padding-left: 5.8rem;
    font-size: var(--fs-body);
    text-align: left;
    color: rgba(34, 34, 34, 0.9);
    overflow-wrap: anywhere;
}
.reg-photo__preview {
    width: 15.5625rem;
    height: 17.0625rem;
    margin: 1.6rem auto 0;
    border-radius: 0.625rem;
    object-fit: cover;
}
.reg-photo__note {
    margin: 2rem 0 0;
    font-size: 1.375rem;
    line-height: 1.5;
    color: rgba(34, 34, 34, 0.9);
}
.reg-photo__error {
    margin: 1rem 0 0;
    color: #8a1111;
    font-size: var(--fs-small);
}

@media (max-width: 1199px) {
    .section--login {
        padding: 3rem 0 4rem;
    }
    .login__title {
        font-size: 1.5rem;
    }
    .login-card {
        margin-top: 1.75rem;
        padding: 2rem 1.25rem 2.25rem;
    }
    .login-card__errors {
        margin: 0 0 1.25rem;
    }
    .login-card__row {
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
        margin-bottom: 1.25rem;
    }
    .login-card__row label {
        font-size: 1.125rem;
        text-align: left;
    }
    .lg-field input {
        height: 3.5rem;
        font-size: 1rem;
    }
    .login-card__submit {
        margin: 0;
    }
    .lg-submit {
        width: 100%;
        min-height: 3.5rem;
        font-size: 1.25rem;
    }
    .login__help {
        font-size: 1rem;
    }
    .login__links {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .login__links span {
        display: none;
    }
    .section--welcome {
        padding: 3.5rem 0;
    }
    .welcome__line {
        font-size: 1.0625rem;
        line-height: 1.9;
    }
    .welcome__name {
        min-width: 5rem;
    }
    .welcome__out {
        margin-top: 2rem;
    }
    .welcome__out .pf-submit {
        width: auto;
        min-height: 3.25rem;
        padding: 0.25rem 2rem;
        font-size: 1.125rem;
    }
    .nav__avatar {
        width: 2.5rem;
        height: 2.5rem;
        margin: 0.75rem 0 0;
    }
    .nav__avatar span {
        font-size: 1.25rem;
        line-height: 2.5rem;
    }
    .reg-form__grid {
        grid-template-columns: 1fr;
    }
    .reg-form__note {
        width: auto;
        margin: -0.25rem 0 0.75rem;
        font-size: 0.9375rem;
    }
    .reg-photo__pick {
        height: 3.75rem;
    }
    .reg-photo__label,
    .reg-photo__btn {
        font-size: 1.0625rem;
    }
    .reg-photo__label {
        padding-left: 1.2rem;
    }
    .reg-photo__btn {
        width: 6.5rem;
    }
    .reg-photo__name {
        padding-left: 0;
        font-size: 0.9375rem;
    }
    .reg-photo__preview {
        width: 11rem;
        height: 12rem;
    }
    .reg-photo__note {
        font-size: 0.9375rem;
    }
    .reg-form .pf--wide {
        margin-top: 1.5rem;
    }
}

/* ---- Login / Welcome / Registration form (ডেস্কটপ): সাধারণ লেখা ২৪px, বাকি Figma + ২px ---- */
@media (min-width: 1200px) {
    body.page-login,
    body.page-welcome,
    body.page-regform {
        --fs-body: 1.5rem;
    }
    .page-login .login__title,
    .page-regform .post-job__title {
        font-size: 3.25rem; /* Figma ৫০px + ২ */
    }
}