/* ==========================================================
   Socialist Deepak — Approved Mockup Hero V3
   Authoritative hero visual layer
   ========================================================== */

:root {
    --mk3-red: #a4142b;
    --mk3-red-dark: #821020;
    --mk3-navy: #0f2c3d;
    --mk3-navy-2: #13384c;
    --mk3-gold: #cda14c;
    --mk3-cream: #fbf8f2;
    --mk3-muted: #64757f;
}

/* ==========================================================
   HERO
   ========================================================== */

.mk3-hero {
    position: relative;
    overflow: hidden;
    min-height: 676px;
    background:
        radial-gradient(
            circle at 56% 36%,
            rgba(205,161,76,.08),
            transparent 25%
        ),
        linear-gradient(
            90deg,
            #fff 0%,
            #fff 54%,
            #fbf8f2 100%
        );
}

.mk3-hero-grid {
    position: relative;
    z-index: 3;
    min-height: 676px;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 72px;
    align-items: center;
}

.mk3-hero-content {
    max-width: 735px;
    padding: 64px 0 56px;
}

/* ---------- decorative art ---------- */

.mk3-hero-art {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mk3-red-plane {
    position: absolute;
    right: -68px;
    top: 0;
    width: 350px;
    height: 100%;
    background:
        linear-gradient(
            150deg,
            #af1731 0%,
            #8d1024 74%
        );
    transform: skewX(-9deg);
}

.mk3-red-plane::after {
    content: "";
    position: absolute;
    right: 106px;
    top: -20px;
    width: 1px;
    height: 120%;
    background: rgba(205,161,76,.42);
    transform: skewX(9deg);
}

.mk3-gold-ring {
    position: absolute;
    border: 1px solid rgba(205,161,76,.48);
    border-radius: 50%;
}

.mk3-ring-one {
    width: 330px;
    height: 330px;
    right: 25.5%;
    top: 70px;
}

.mk3-ring-two {
    width: 270px;
    height: 270px;
    right: 27.3%;
    top: 100px;
}

.mk3-gold-disc {
    position: absolute;
    width: 65px;
    height: 65px;
    right: 29.6%;
    top: 260px;
    background: var(--mk3-gold);
    border-radius: 50%;
}

.mk3-dot-field {
    position: absolute;
    left: 4px;
    top: 88px;
    width: 84px;
    height: 120px;
    opacity: .25;
    background-image:
        radial-gradient(
            circle,
            var(--mk3-gold) 1.5px,
            transparent 1.5px
        );
    background-size: 20px 20px;
}

/* ---------- overline ---------- */

.mk3-overline {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
    color: var(--mk3-red);
    font-size: 14px;
    font-weight: 700;
}

.mk3-overline-line {
    width: 76px;
    height: 3px;
    flex: 0 0 auto;
    background: var(--mk3-gold);
}

/* ---------- primary identity ---------- */

.mk3-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mk3-name {
    color: var(--mk3-red);
    font-family: var(--sd-font-display);
    font-size: clamp(68px, 5.8vw, 88px);
    font-weight: 800;
    line-height: .93;
    letter-spacing: -.035em;
}

.mk3-role {
    margin-top: 10px;
    color: var(--mk3-navy);
    font-family: var(--sd-font-display);
    font-size: clamp(38px, 3.15vw, 47px);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -.02em;
}

/* ---------- identity tags ---------- */

.mk3-tags {
    margin-top: 23px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
}

.mk3-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--mk3-navy);
}

.mk3-tag strong {
    font-size: 13px;
    font-weight: 650;
}

.mk3-tag-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--mk3-red);
}

.mk3-tag-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mk3-tag-dot {
    width: 5px;
    height: 5px;
    background: var(--mk3-gold);
    border-radius: 50%;
}

/* ---------- lead ---------- */

.mk3-lead {
    max-width: 610px;
    margin: 20px 0 0;
    color: #556975;
    font-size: 16px;
    line-height: 1.76;
}

/* ---------- three pillars ---------- */

.mk3-pillars {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid rgba(15,44,61,.12);
}

.mk3-pillars article {
    position: relative;
    min-height: 113px;
    padding: 18px 18px 0 39px;
    border-right: 1px solid rgba(15,44,61,.11);
}

.mk3-pillars article:last-child {
    border-right: 0;
}

.mk3-pillar-no {
    position: absolute;
    left: 0;
    top: 17px;
    color: var(--mk3-gold);
    font-size: 12px;
    font-weight: 800;
}

.mk3-pillar-icon {
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    color: var(--mk3-red);
    background: #fff6f3;
    border-radius: 50%;
}

.mk3-pillar-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mk3-pillars strong {
    color: var(--mk3-navy);
    font-family: var(--sd-font-display);
    font-size: 15px;
    font-weight: 650;
}

.mk3-pillars p {
    margin: 6px 0 0;
    color: var(--mk3-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

/* ---------- buttons ---------- */

.mk3-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mk3-btn {
    min-height: 49px;
    padding: 0 21px;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.mk3-btn-primary {
    color: #fff;
    background: var(--mk3-red);
    box-shadow: 0 12px 26px rgba(164,20,43,.17);
}

.mk3-btn-primary:hover {
    color: #fff;
    background: var(--mk3-red-dark);
    transform: translateY(-2px);
}

.mk3-btn-outline {
    color: var(--mk3-red);
    background: #fff;
    border: 1px solid rgba(164,20,43,.5);
}

.mk3-btn-outline:hover {
    background: #fff7f7;
    transform: translateY(-2px);
}

/* ==========================================================
   PORTRAIT
   ========================================================== */

.mk3-portrait-zone {
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: 34px;
}

.mk3-portrait-shell {
    position: relative;
    width: min(100%, 477px);
    margin-bottom: 0;
}

.mk3-portrait {
    width: 100%;
    height: 592px;
    display: block;
    object-fit: cover;
    object-position: center 12%;
    border-radius: 38px 38px 32px 32px;
    border: 1px solid rgba(255,255,255,.6);
    box-shadow:
        0 32px 80px rgba(15,44,61,.18),
        0 4px 12px rgba(15,44,61,.06);
}

.mk3-caption {
    position: absolute;
    left: -8px;
    right: -2px;
    bottom: 19px;
    min-height: 82px;
    padding: 14px 19px 14px 31px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background:
        linear-gradient(
            90deg,
            rgba(15,44,61,.98),
            rgba(16,49,68,.98)
        );
    border-left: 6px solid var(--mk3-gold);
    border-radius: 4px 18px 18px 4px;
    box-shadow: 0 18px 40px rgba(15,44,61,.22);
}

.mk3-caption strong {
    display: block;
    color: #fff;
    font-family: var(--sd-font-display);
    font-size: 20px;
    font-weight: 650;
}

.mk3-caption div > span {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
}

.mk3-caption-logo {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--mk3-red);
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
}

/* ==========================================================
   VALUE STRIP
   ========================================================== */

.mk3-values {
    position: relative;
    z-index: 5;
    background:
        linear-gradient(
            90deg,
            #0d2a3b,
            #12364a
        );
}

.mk3-values-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

.mk3-values article {
    min-height: 112px;
    padding: 26px 27px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-right: 1px solid rgba(255,255,255,.12);
}

.mk3-values article:last-child {
    border-right: 0;
}

.mk3-value-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #e4b665;
}

.mk3-value-icon svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mk3-values strong {
    color: #fff;
    font-family: var(--sd-font-display);
    font-size: 17px;
    font-weight: 650;
}

.mk3-values p {
    margin: 4px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 12.5px;
    line-height: 1.55;
}

/* ==========================================================
   DESKTOP FINE TUNING
   ========================================================== */

@media (min-width: 1200px) {
    .mk3-hero-content {
        padding-left: 7px;
    }

    .mk3-portrait-shell {
        transform: translateX(7px);
    }
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {
    .mk3-hero-grid {
        gap: 46px;
    }

    .mk3-name {
        font-size: clamp(60px,6vw,75px);
    }

    .mk3-role {
        font-size: clamp(33px,3.4vw,41px);
    }

    .mk3-red-plane {
        width: 300px;
    }

    .mk3-portrait {
        height: 560px;
    }
}

@media (max-width: 900px) {
    .mk3-hero {
        min-height: auto;
    }

    .mk3-red-plane,
    .mk3-gold-ring,
    .mk3-gold-disc {
        display: none;
    }

    .mk3-hero-grid {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mk3-hero-content {
        max-width: none;
        padding-top: 58px;
        padding-bottom: 12px;
    }

    .mk3-portrait-zone {
        padding-top: 0;
        padding-bottom: 38px;
    }

    .mk3-portrait-shell {
        width: min(100%,430px);
    }

    .mk3-values-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .mk3-values article:nth-child(2) {
        border-right: 0;
    }

    .mk3-values article:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,.12);
    }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 560px) {
    .mk3-hero-content {
        padding-top: 44px;
    }

    .mk3-overline {
        gap: 10px;
        font-size: 12px;
    }

    .mk3-overline-line {
        width: 38px;
    }

    .mk3-name {
        font-size: clamp(48px,14vw,59px);
        line-height: .98;
    }

    .mk3-role {
        margin-top: 7px;
        font-size: clamp(28px,8.6vw,35px);
    }

    .mk3-tags {
        margin-top: 18px;
        gap: 7px;
    }

    .mk3-tag-icon {
        width: 23px;
        height: 23px;
    }

    .mk3-tag strong {
        font-size: 11.5px;
    }

    .mk3-lead {
        margin-top: 17px;
        font-size: 15.5px;
        line-height: 1.72;
    }

    .mk3-pillars {
        grid-template-columns: 1fr;
        border-top: 0;
    }

    .mk3-pillars article {
        min-height: auto;
        padding: 16px 10px 16px 38px;
        border-top: 1px solid rgba(15,44,61,.11);
        border-right: 0;
    }

    .mk3-pillar-icon {
        display: none;
    }

    .mk3-actions {
        margin-top: 22px;
    }

    .mk3-btn {
        flex: 1 1 145px;
        justify-content: center;
    }

    .mk3-portrait-shell {
        width: min(96%,365px);
    }

    .mk3-portrait {
        height: auto;
        max-height: none;
        border-radius: 27px;
    }

    .mk3-caption {
        left: 10px;
        right: 10px;
        bottom: 12px;
        min-height: 68px;
        padding: 11px 13px 11px 18px;
        border-left-width: 4px;
    }

    .mk3-caption-logo {
        width: 45px;
        height: 45px;
        font-size: 12px;
    }

    .mk3-values-grid {
        grid-template-columns: 1fr;
    }

    .mk3-values article {
        min-height: 88px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .mk3-values article:last-child {
        border-bottom: 0;
    }
}

/* ==========================================================
   Approved Mockup V3.1
   Icon-first cleanup + closer mockup proportions
   ========================================================== */

/* ---------- Hide numeric visual markers globally ---------- */

.mk3-pillar-no,
.v2-card-number,
.v2-small-index,
.v2-thought-number,
.is-hidden {
    display: none !important;
}

/* ---------- Hero closer to approved mockup ---------- */

.mk3-hero {
    min-height: 650px;
}

.mk3-hero-grid {
    min-height: 650px;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 64px;
}

.mk3-hero-content {
    max-width: 710px;
    padding-top: 58px;
    padding-bottom: 52px;
}

.mk3-overline {
    margin-bottom: 12px;
}

.mk3-overline-line {
    width: 70px;
}

.mk3-name {
    font-size: clamp(70px, 5.65vw, 86px);
    line-height: .92;
}

.mk3-role {
    margin-top: 8px;
    font-size: clamp(37px, 3vw, 45px);
    line-height: 1.03;
}

.mk3-tags {
    margin-top: 20px;
    gap: 12px;
}

.mk3-tag-icon {
    width: 30px;
    height: 30px;
}

.mk3-tag-icon svg {
    width: 23px;
    height: 23px;
    stroke-width: 1.45;
}

.mk3-lead {
    margin-top: 18px;
    max-width: 600px;
    font-size: 15.5px;
}

/* ---------- Hero pillars icon-first ---------- */

.mk3-pillars {
    margin-top: 26px;
    gap: 0;
}

.mk3-pillars article {
    min-height: 104px;
    padding: 18px 18px 0 48px;
}

.mk3-pillar-icon {
    left: 0;
    top: 18px;
    bottom: auto;
    width: 34px;
    height: 34px;
    background: #fff5f2;
    border: 1px solid rgba(164,20,43,.08);
}

.mk3-pillar-icon svg {
    width: 21px;
    height: 21px;
}

.mk3-pillars strong {
    font-size: 15px;
}

.mk3-pillars p {
    margin-top: 5px;
    font-size: 12px;
}

/* ---------- Portrait mockup proportion ---------- */

.mk3-portrait-zone {
    padding-top: 28px;
}

.mk3-portrait-shell {
    width: min(100%, 495px);
}

.mk3-portrait {
    height: 605px;
    border-radius: 36px 36px 28px 28px;
    object-position: center 10%;
}

.mk3-caption {
    left: -5px;
    right: -5px;
    bottom: 16px;
    min-height: 80px;
}

.mk3-caption-logo {
    width: 56px;
    height: 56px;
}

/* ---------- Decorative geometry closer to mockup ---------- */

.mk3-ring-one {
    width: 350px;
    height: 350px;
    right: 24.6%;
    top: 74px;
}

.mk3-ring-two {
    width: 286px;
    height: 286px;
    right: 26.5%;
    top: 106px;
}

.mk3-gold-disc {
    width: 70px;
    height: 70px;
    right: 29%;
    top: 255px;
}

.mk3-red-plane {
    width: 365px;
}

/* ---------- Value strip icons more prominent ---------- */

.mk3-values article {
    min-height: 108px;
}

.mk3-value-icon {
    width: 52px;
    height: 52px;
}

.mk3-value-icon svg {
    width: 38px;
    height: 38px;
    stroke-width: 1.35;
}

.mk3-values strong {
    font-size: 18px;
}

/* ---------- Focus cards remove number dependency ---------- */

.v2-focus-grid article {
    padding-top: 32px;
}

.v2-card-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 24px;
    background: #fff3f4;
    border: 1px solid rgba(152,21,42,.08);
}

.v2-card-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
}

/* ---------- Activities side cards icon-first feel ---------- */

.v2-editorial-side article {
    position: relative;
    padding-left: 30px;
}

.v2-editorial-side article::before {
    content: "";
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(152,21,42,.12) 0 28%,
            transparent 30%
        ),
        #fff6f6;
    border: 1px solid rgba(152,21,42,.08);
}

/* ---------- Thought card icon replacing number ---------- */

.v2-thought-card::before {
    content: "✦";
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--v2-maroon);
    background: #fff4f5;
    border-radius: 14px;
    font-size: 20px;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
    .mk3-hero-grid {
        grid-template-columns: 1fr;
    }

    .mk3-portrait-shell {
        width: min(100%, 430px);
    }
}

@media (max-width: 560px) {
    .mk3-pillars article {
        padding-left: 46px;
    }

    .mk3-pillar-icon {
        display: grid;
    }

    .mk3-name {
        font-size: clamp(48px, 14vw, 59px);
    }

    .mk3-role {
        font-size: clamp(28px, 8.4vw, 35px);
    }
}

/* ==========================================================
   Approved Hero — Kicker Above Gold Line
   ========================================================== */

.mk3-overline {
    display: block;
    width: fit-content;
    margin: 0 0 24px;
    padding: 0;

    color: #a4142b;
    font-family: var(--sd-font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.mk3-overline > span:last-child {
    display: block;
}

/* gold line must appear BELOW the text */

.mk3-overline-line {
    display: none !important;
}

.mk3-overline::after {
    content: "";
    display: block;

    width: 305px;
    max-width: 100%;
    height: 3px;

    margin-top: 13px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #c8953b 0%,
            #d7ad60 72%,
            rgba(215, 173, 96, 0.18) 100%
        );
}

/* keep title comfortably separated from gold line */

.mk3-title {
    margin-top: 0;
}

@media (max-width: 560px) {
    .mk3-overline {
        margin-bottom: 20px;
        font-size: 12.5px;
    }

    .mk3-overline::after {
        width: 190px;
        height: 2px;
        margin-top: 10px;
    }
}

/* ==========================================================
   Hero — Gold Line / Name Spacing Correction
   ========================================================== */

/*
 * Keep this visual sequence:
 *
 * सामाजिक सेवा एवं जनकल्याण के लिए समर्पित
 * ───────── golden line ─────────
 *
 * कुमार दीपक
 */

.mk3-overline {
    margin-bottom: 36px !important;
}

.mk3-overline::after {
    margin-top: 12px !important;
}

/*
 * Ensure title does not visually rise into the gold line.
 */
.mk3-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 900px) {
    .mk3-overline {
        margin-bottom: 31px !important;
    }
}

@media (max-width: 560px) {
    .mk3-overline {
        margin-bottom: 27px !important;
    }

    .mk3-overline::after {
        margin-top: 9px !important;
    }
}

/* ==========================================================
   Approved Mockup — Golden Ring Geometry Final
   ========================================================== */

/*
 * Target composition:
 *
 *             portrait
 *        ┌───────────────
 *    ◯ ◯ │
 *      ● │
 *
 * Two thin concentric gold rings remain clearly visible
 * on the LEFT side of the portrait, with one solid gold disc.
 */

/* Keep decorative geometry above white hero background
   but below actual portrait/content. */

.mk3-hero-art {
    z-index: 1;
}

.mk3-hero-grid {
    z-index: 3;
}

/* ----------------------------------------------------------
   OUTER GOLD RING
   ---------------------------------------------------------- */

.mk3-ring-one {
    display: block !important;

    width: 405px !important;
    height: 405px !important;

    right: 27.8% !important;
    top: 112px !important;

    border:
        1.5px solid
        rgba(201, 151, 61, 0.62) !important;

    border-radius: 50% !important;

    opacity: 1 !important;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.30);
}

/* ----------------------------------------------------------
   INNER GOLD RING
   ---------------------------------------------------------- */

.mk3-ring-two {
    display: block !important;

    width: 338px !important;
    height: 338px !important;

    right: 29.8% !important;
    top: 145px !important;

    border:
        1.25px solid
        rgba(201, 151, 61, 0.56) !important;

    border-radius: 50% !important;

    opacity: 1 !important;
}

/* ----------------------------------------------------------
   SOLID GOLD DISC
   ---------------------------------------------------------- */

.mk3-gold-disc {
    display: block !important;

    width: 76px !important;
    height: 76px !important;

    right: 29.1% !important;
    top: 286px !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            #d3a34c 0%,
            #bd8930 100%
        ) !important;

    opacity: 1 !important;

    box-shadow:
        0 10px 28px rgba(190, 137, 47, 0.14);
}

/* ----------------------------------------------------------
   Portrait must stay above the rings
   ---------------------------------------------------------- */

.mk3-portrait-zone {
    position: relative;
    z-index: 4;
}

.mk3-portrait-shell {
    position: relative;
    z-index: 4;
}

/* ----------------------------------------------------------
   Preserve maroon architectural panel behind portrait
   ---------------------------------------------------------- */

.mk3-red-plane {
    z-index: 0;
}

/* ----------------------------------------------------------
   Large desktop fine tuning
   ---------------------------------------------------------- */

@media (min-width: 1450px) {

    .mk3-ring-one {
        width: 420px !important;
        height: 420px !important;

        right: 28.5% !important;
        top: 104px !important;
    }

    .mk3-ring-two {
        width: 350px !important;
        height: 350px !important;

        right: 30.55% !important;
        top: 139px !important;
    }

    .mk3-gold-disc {
        right: 29.75% !important;
        top: 286px !important;
    }
}

/* ----------------------------------------------------------
   Laptop
   ---------------------------------------------------------- */

@media (max-width: 1250px) {

    .mk3-ring-one {
        width: 340px !important;
        height: 340px !important;

        right: 28% !important;
        top: 125px !important;
    }

    .mk3-ring-two {
        width: 286px !important;
        height: 286px !important;

        right: 30% !important;
        top: 152px !important;
    }

    .mk3-gold-disc {
        width: 65px !important;
        height: 65px !important;

        right: 29.2% !important;
        top: 272px !important;
    }
}

/* ----------------------------------------------------------
   Tablet/mobile:
   decorative circles are intentionally removed once
   layout stacks vertically.
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .mk3-ring-one,
    .mk3-ring-two,
    .mk3-gold-disc {
        display: none !important;
    }
}

/* ==========================================================
   Golden Rings V2 — Approved Mockup Geometry
   ========================================================== */

/*
 * Goal:
 * - Rings smaller and closer to portrait
 * - Only left half / two-thirds visible
 * - Gold disc clearly visible at portrait edge
 */

.mk3-ring-one {
    width: 330px !important;
    height: 330px !important;

    right: 31.5% !important;
    top: 118px !important;

    border-width: 1.35px !important;
    border-color: rgba(201, 151, 61, 0.62) !important;
}

.mk3-ring-two {
    width: 278px !important;
    height: 278px !important;

    right: 33.1% !important;
    top: 144px !important;

    border-width: 1.2px !important;
    border-color: rgba(201, 151, 61, 0.52) !important;
}

.mk3-gold-disc {
    display: block !important;

    width: 68px !important;
    height: 68px !important;

    right: 31.7% !important;
    top: 270px !important;

    z-index: 2 !important;

    background:
        linear-gradient(
            145deg,
            #d3a34c 0%,
            #bd8730 100%
        ) !important;

    box-shadow:
        0 10px 26px rgba(190, 137, 47, 0.15) !important;
}

/* Portrait remains above most of ring geometry */

.mk3-portrait-zone,
.mk3-portrait-shell {
    position: relative;
    z-index: 4;
}

/* Gold disc should peek out just before the portrait */

.mk3-gold-disc {
    transform: translateX(18px);
}

/* Desktop fine tuning */

@media (min-width: 1450px) {
    .mk3-ring-one {
        width: 344px !important;
        height: 344px !important;
        right: 31.8% !important;
        top: 110px !important;
    }

    .mk3-ring-two {
        width: 288px !important;
        height: 288px !important;
        right: 33.5% !important;
        top: 138px !important;
    }

    .mk3-gold-disc {
        right: 32% !important;
        top: 268px !important;
    }
}

@media (max-width: 1250px) {
    .mk3-ring-one {
        width: 290px !important;
        height: 290px !important;
        right: 31% !important;
        top: 128px !important;
    }

    .mk3-ring-two {
        width: 244px !important;
        height: 244px !important;
        right: 32.8% !important;
        top: 151px !important;
    }

    .mk3-gold-disc {
        width: 60px !important;
        height: 60px !important;
        right: 31.4% !important;
        top: 265px !important;
    }
}

@media (max-width: 900px) {
    .mk3-ring-one,
    .mk3-ring-two,
    .mk3-gold-disc {
        display: none !important;
    }
}

/* ==========================================================
   APPROVED MOCKUP — RINGS + GOLD DISC FINAL ALIGNMENT
   ========================================================== */

/*
 * Final target:
 *
 * - Two thin concentric rings
 * - Rings sit closer to portrait
 * - Roughly left half remains visible
 * - Solid gold circle visibly overlaps portrait edge
 */

/* ---------- Outer ring ---------- */

.mk3-ring-one {
    display: block !important;

    width: 315px !important;
    height: 315px !important;

    right: 29.2% !important;
    top: 124px !important;

    border:
        1.35px solid
        rgba(201, 151, 61, 0.62) !important;

    border-radius: 50% !important;

    opacity: 1 !important;
}

/* ---------- Inner ring ---------- */

.mk3-ring-two {
    display: block !important;

    width: 262px !important;
    height: 262px !important;

    right: 30.8% !important;
    top: 150px !important;

    border:
        1.2px solid
        rgba(201, 151, 61, 0.52) !important;

    border-radius: 50% !important;

    opacity: 1 !important;
}

/* ---------- Gold disc ---------- */

.mk3-gold-disc {
    display: block !important;

    position: absolute !important;

    width: 72px !important;
    height: 72px !important;

    right: 27.8% !important;
    top: 268px !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            #d2a34c 0%,
            #bd8730 100%
        ) !important;

    opacity: 1 !important;

    /*
     * IMPORTANT:
     * Above decorative rings / below portrait.
     */
    z-index: 2 !important;

    transform: none !important;

    box-shadow:
        0 12px 30px rgba(190, 137, 47, 0.16) !important;
}

/* hero decoration establishes a proper stacking context */

.mk3-hero-art {
    position: absolute;
    z-index: 1 !important;
}

.mk3-red-plane {
    z-index: 0 !important;
}

/*
 * Portrait deliberately at z-index 3:
 * gold disc is partly hidden by portrait,
 * producing the approved mockup overlap.
 */

.mk3-portrait-zone {
    position: relative;
    z-index: 3 !important;
}

.mk3-portrait-shell {
    position: relative;
    z-index: 3 !important;
}

/* ---------- Large desktop ---------- */

@media (min-width: 1450px) {

    .mk3-ring-one {
        width: 330px !important;
        height: 330px !important;

        right: 29.6% !important;
        top: 116px !important;
    }

    .mk3-ring-two {
        width: 274px !important;
        height: 274px !important;

        right: 31.25% !important;
        top: 144px !important;
    }

    .mk3-gold-disc {
        width: 74px !important;
        height: 74px !important;

        right: 27.9% !important;
        top: 266px !important;
    }
}

/* ---------- Laptop ---------- */

@media (max-width: 1250px) {

    .mk3-ring-one {
        width: 280px !important;
        height: 280px !important;

        right: 28.6% !important;
        top: 132px !important;
    }

    .mk3-ring-two {
        width: 234px !important;
        height: 234px !important;

        right: 30.2% !important;
        top: 155px !important;
    }

    .mk3-gold-disc {
        width: 62px !important;
        height: 62px !important;

        right: 27.4% !important;
        top: 260px !important;
    }
}

/* ---------- Stacked layouts ---------- */

@media (max-width: 900px) {

    .mk3-ring-one,
    .mk3-ring-two,
    .mk3-gold-disc {
        display: none !important;
    }
}

/* ==========================================================
   SOCIALIST DEEPAK
   Approved Hero — Gold Decoration Final Micro Adjustment
   Scope: rings + gold disc only
   ========================================================== */

/*
 * Final visual target:
 *
 *   - retain two thin concentric gold rings
 *   - move rings slightly LEFT so they remain visible
 *   - show a deliberate solid gold disc at portrait's left edge
 *   - portrait remains visually dominant
 *   - no hero typography/layout changes
 */

/* ----------------------------------------------------------
   RINGS
   ---------------------------------------------------------- */

.mk3-ring-one {
    display: block !important;

    width: 330px !important;
    height: 330px !important;

    right: 30.8% !important;
    top: 116px !important;

    border: 1.35px solid rgba(201, 151, 61, 0.64) !important;
    border-radius: 50% !important;

    opacity: 1 !important;
    z-index: 1 !important;
}

.mk3-ring-two {
    display: block !important;

    width: 274px !important;
    height: 274px !important;

    right: 32.45% !important;
    top: 144px !important;

    border: 1.2px solid rgba(201, 151, 61, 0.54) !important;
    border-radius: 50% !important;

    opacity: 1 !important;
    z-index: 1 !important;
}


/* ----------------------------------------------------------
   SOLID GOLD DISC

   Positioned independently so it visibly peeks from the
   portrait's left edge rather than disappearing underneath it.
   ---------------------------------------------------------- */

.mk3-gold-disc {
    display: block !important;

    position: absolute !important;

    width: 72px !important;
    height: 72px !important;

    /*
     * Deliberately further left than previous versions.
     * Approximately 35–45px should remain visible beside
     * the portrait on normal desktop widths.
     */
    right: 32.0% !important;
    top: 270px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            #d8ab55 0%,
            #c8953d 48%,
            #b9822c 100%
        ) !important;

    opacity: 1 !important;

    z-index: 2 !important;

    transform: none !important;

    box-shadow:
        0 12px 30px rgba(184, 130, 40, 0.18) !important;

    pointer-events: none !important;
}


/* ----------------------------------------------------------
   STACKING
   ---------------------------------------------------------- */

.mk3-hero-art {
    z-index: 1 !important;
}

.mk3-red-plane {
    z-index: 0 !important;
}

.mk3-ring-one,
.mk3-ring-two {
    z-index: 1 !important;
}

.mk3-gold-disc {
    z-index: 2 !important;
}

.mk3-hero-grid {
    position: relative;
    z-index: 3 !important;
}

.mk3-portrait-zone,
.mk3-portrait-shell {
    position: relative;
    z-index: 4 !important;
}


/* ----------------------------------------------------------
   LARGE DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1450px) {

    .mk3-ring-one {
        width: 342px !important;
        height: 342px !important;

        right: 31.1% !important;
        top: 110px !important;
    }

    .mk3-ring-two {
        width: 284px !important;
        height: 284px !important;

        right: 32.85% !important;
        top: 139px !important;
    }

    .mk3-gold-disc {
        width: 74px !important;
        height: 74px !important;

        right: 32.15% !important;
        top: 267px !important;
    }
}


/* ----------------------------------------------------------
   LAPTOP
   ---------------------------------------------------------- */

@media (max-width: 1250px) {

    .mk3-ring-one {
        width: 292px !important;
        height: 292px !important;

        right: 30.2% !important;
        top: 126px !important;
    }

    .mk3-ring-two {
        width: 242px !important;
        height: 242px !important;

        right: 31.8% !important;
        top: 151px !important;
    }

    .mk3-gold-disc {
        width: 62px !important;
        height: 62px !important;

        right: 31.35% !important;
        top: 262px !important;
    }
}


/* ----------------------------------------------------------
   STACKED MOBILE/TABLET
   Decorative geometry intentionally disabled.
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .mk3-ring-one,
    .mk3-ring-two,
    .mk3-gold-disc {
        display: none !important;
    }
}

/* ==========================================================
   APPROVED MOCKUP — GOLD DECORATION FINAL FIX
   ========================================================== */

/*
 * FINAL TARGET:
 * - Two visible concentric golden rings
 * - Rings remain partly behind portrait
 * - Solid golden disc is clearly visible at portrait left edge
 * - Portrait stays dominant
 */

/* ---------- stacking context ---------- */

.mk3-hero {
    isolation: isolate;
}

.mk3-hero-art {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.mk3-red-plane {
    z-index: 0 !important;
}

.mk3-ring-one,
.mk3-ring-two {
    z-index: 1 !important;
}

.mk3-gold-disc {
    z-index: 5 !important;
}

.mk3-hero-grid {
    position: relative !important;
    z-index: 3 !important;
}

.mk3-portrait-zone {
    position: relative !important;
    z-index: 4 !important;
}

.mk3-portrait-shell {
    position: relative !important;
    z-index: 4 !important;
}

/* ---------- outer ring ---------- */

.mk3-ring-one {
    display: block !important;
    position: absolute !important;

    width: 320px !important;
    height: 320px !important;

    right: 30.7% !important;
    top: 118px !important;

    border: 1.35px solid rgba(201, 151, 61, 0.63) !important;
    border-radius: 50% !important;

    opacity: 1 !important;
    transform: none !important;
}

/* ---------- inner ring ---------- */

.mk3-ring-two {
    display: block !important;
    position: absolute !important;

    width: 266px !important;
    height: 266px !important;

    right: 32.3% !important;
    top: 145px !important;

    border: 1.15px solid rgba(201, 151, 61, 0.52) !important;
    border-radius: 50% !important;

    opacity: 1 !important;
    transform: none !important;
}

/* ---------- visible solid gold disc ---------- */

.mk3-gold-disc {
    display: block !important;
    position: absolute !important;

    width: 74px !important;
    height: 74px !important;

    /*
     * Keep the disc visibly outside portrait edge.
     */
    right: 28.7% !important;
    top: 270px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            #d8ab55 0%,
            #c9983f 52%,
            #b97f2a 100%
        ) !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: translateX(-8px) !important;

    box-shadow:
        0 10px 24px rgba(180, 126, 38, 0.17) !important;

    pointer-events: none !important;
}

/* ---------- large desktop ---------- */

@media (min-width: 1450px) {

    .mk3-ring-one {
        width: 334px !important;
        height: 334px !important;
        right: 31.0% !important;
        top: 112px !important;
    }

    .mk3-ring-two {
        width: 278px !important;
        height: 278px !important;
        right: 32.65% !important;
        top: 140px !important;
    }

    .mk3-gold-disc {
        width: 76px !important;
        height: 76px !important;
        right: 28.8% !important;
        top: 267px !important;
    }
}

/* ---------- laptop ---------- */

@media (max-width: 1250px) {

    .mk3-ring-one {
        width: 286px !important;
        height: 286px !important;
        right: 30.0% !important;
        top: 128px !important;
    }

    .mk3-ring-two {
        width: 238px !important;
        height: 238px !important;
        right: 31.6% !important;
        top: 152px !important;
    }

    .mk3-gold-disc {
        width: 64px !important;
        height: 64px !important;
        right: 28.1% !important;
        top: 262px !important;
    }
}

/* ---------- stacked layouts ---------- */

@media (max-width: 900px) {
    .mk3-ring-one,
    .mk3-ring-two,
    .mk3-gold-disc {
        display: none !important;
    }
}

/* ==========================================================
   APPROVED MOCKUP — GOLD DISC STRUCTURAL FINAL FIX

   Root cause:
   .mk3-gold-disc lives inside .mk3-hero-art stacking context.
   The portrait/grid stacking context sits above that parent,
   so increasing the child z-index cannot make it overlap the
   portrait correctly.

   Solution:
   Hide the old decorative disc and render the gold disc from
   the portrait shell itself.
   ========================================================== */

/* Disable original disc from hero-art */
.mk3-gold-disc {
    display: none !important;
}

/* Portrait shell becomes local decoration anchor */
.mk3-portrait-shell {
    position: relative !important;
    z-index: 4 !important;
    isolation: isolate;
}

/*
 * Gold disc:
 * approximately half remains outside portrait's left edge,
 * matching the approved mockup.
 */
.mk3-portrait-shell::before {
    content: "";

    position: absolute;

    width: 76px;
    height: 76px;

    left: -37px;
    top: 43%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #d9ad57 0%,
            #cb9840 50%,
            #b8802b 100%
        );

    box-shadow:
        0 12px 30px rgba(185, 130, 39, 0.18);

    z-index: -1;

    pointer-events: none;
}

/*
 * Keep portrait itself above the disc.
 */
.mk3-portrait {
    position: relative;
    z-index: 2;
}

/*
 * Caption remains above both.
 */
.mk3-caption {
    z-index: 5;
}

/* Rings stay untouched */
.mk3-ring-one,
.mk3-ring-two {
    opacity: 1 !important;
}

/* Laptop */
@media (max-width: 1250px) {
    .mk3-portrait-shell::before {
        width: 66px;
        height: 66px;
        left: -32px;
        top: 43%;
    }
}

/* Hide decoration on stacked layout */
@media (max-width: 900px) {
    .mk3-portrait-shell::before {
        display: none;
    }
}

/* ==========================================================
   SOCIALIST DEEPAK
   Animated Golden Rings — Final Approved Layer

   Scope:
   - Remove solid gold disc completely
   - Preserve current ring size and position
   - Add elegant moving light around both rings
   - No typography / portrait / layout changes
   ========================================================== */

/* ----------------------------------------------------------
   REMOVE GOLD DISC COMPLETELY
   ---------------------------------------------------------- */

.mk3-gold-disc {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/*
 * Previous structural patch created the disc with
 * .mk3-portrait-shell::before.
 * Remove that visual as well.
 */
.mk3-portrait-shell::before {
    content: none !important;
    display: none !important;
}

/* ----------------------------------------------------------
   RING FOUNDATION
   ---------------------------------------------------------- */

.mk3-ring-one,
.mk3-ring-two {
    display: block !important;
    position: absolute !important;

    overflow: visible !important;

    border-radius: 50% !important;

    opacity: 1 !important;

    /*
     * Keeps the animation on the compositor where possible.
     */
    will-change: transform;

    pointer-events: none !important;
}

/* Outer ring */
.mk3-ring-one {
    border-color: rgba(201, 151, 61, 0.60) !important;
}

/* Inner ring */
.mk3-ring-two {
    border-color: rgba(201, 151, 61, 0.48) !important;
}

/* ----------------------------------------------------------
   MOVING LIGHT — OUTER RING
   ---------------------------------------------------------- */

.mk3-ring-one::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 9px;
    height: 9px;

    margin-left: -4.5px;
    margin-top: -4.5px;

    border-radius: 50%;

    background: #e1b55d;

    box-shadow:
        0 0 5px rgba(225, 181, 93, 0.95),
        0 0 13px rgba(225, 181, 93, 0.72),
        0 0 24px rgba(225, 181, 93, 0.38);

    transform:
        rotate(0deg)
        translateX(calc((100% + 310px) / 2));

    transform-origin: center;

    animation:
        sd-golden-orbit-outer 8s linear infinite;

    pointer-events: none;
}

/* ----------------------------------------------------------
   MOVING LIGHT — INNER RING
   ---------------------------------------------------------- */

.mk3-ring-two::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;

    margin-left: -3.5px;
    margin-top: -3.5px;

    border-radius: 50%;

    background: #efd08d;

    box-shadow:
        0 0 4px rgba(239, 208, 141, 0.94),
        0 0 11px rgba(222, 174, 81, 0.65),
        0 0 20px rgba(222, 174, 81, 0.30);

    transform:
        rotate(180deg)
        translateX(calc((100% + 255px) / 2));

    transform-origin: center;

    animation:
        sd-golden-orbit-inner 6.5s linear infinite reverse;

    pointer-events: none;
}

/* ----------------------------------------------------------
   ORBIT ANIMATION
   ---------------------------------------------------------- */

@keyframes sd-golden-orbit-outer {
    from {
        transform:
            rotate(0deg)
            translateX(160px)
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg)
            translateX(160px)
            rotate(-360deg);
    }
}

@keyframes sd-golden-orbit-inner {
    from {
        transform:
            rotate(0deg)
            translateX(133px)
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg)
            translateX(133px)
            rotate(-360deg);
    }
}

/* ----------------------------------------------------------
   SUBTLE RING BREATHING
   Keeps movement premium rather than distracting.
   ---------------------------------------------------------- */

.mk3-ring-one {
    animation:
        sd-ring-breathe-outer 5.5s ease-in-out infinite;
}

.mk3-ring-two {
    animation:
        sd-ring-breathe-inner 5.5s ease-in-out infinite 0.7s;
}

@keyframes sd-ring-breathe-outer {
    0%,
    100% {
        border-color: rgba(201, 151, 61, 0.48);
        filter: drop-shadow(0 0 0 rgba(201, 151, 61, 0));
    }

    50% {
        border-color: rgba(211, 165, 79, 0.72);
        filter: drop-shadow(0 0 3px rgba(211, 165, 79, 0.12));
    }
}

@keyframes sd-ring-breathe-inner {
    0%,
    100% {
        border-color: rgba(201, 151, 61, 0.38);
    }

    50% {
        border-color: rgba(218, 176, 94, 0.64);
    }
}

/* ----------------------------------------------------------
   LARGE DESKTOP
   Adjust orbit radius to current ring geometry.
   ---------------------------------------------------------- */

@media (min-width: 1450px) {
    @keyframes sd-golden-orbit-outer {
        from {
            transform:
                rotate(0deg)
                translateX(167px)
                rotate(0deg);
        }

        to {
            transform:
                rotate(360deg)
                translateX(167px)
                rotate(-360deg);
        }
    }

    @keyframes sd-golden-orbit-inner {
        from {
            transform:
                rotate(0deg)
                translateX(139px)
                rotate(0deg);
        }

        to {
            transform:
                rotate(360deg)
                translateX(139px)
                rotate(-360deg);
        }
    }
}

/* ----------------------------------------------------------
   LAPTOP
   ---------------------------------------------------------- */

@media (max-width: 1250px) and (min-width: 901px) {
    @keyframes sd-golden-orbit-outer {
        from {
            transform:
                rotate(0deg)
                translateX(143px)
                rotate(0deg);
        }

        to {
            transform:
                rotate(360deg)
                translateX(143px)
                rotate(-360deg);
        }
    }

    @keyframes sd-golden-orbit-inner {
        from {
            transform:
                rotate(0deg)
                translateX(119px)
                rotate(0deg);
        }

        to {
            transform:
                rotate(360deg)
                translateX(119px)
                rotate(-360deg);
        }
    }
}

/* ----------------------------------------------------------
   MOBILE / TABLET STACKED HERO
   Existing design intentionally hides decorative rings.
   ---------------------------------------------------------- */

@media (max-width: 900px) {
    .mk3-ring-one,
    .mk3-ring-two {
        display: none !important;
        animation: none !important;
    }

    .mk3-ring-one::after,
    .mk3-ring-two::after {
        display: none !important;
        animation: none !important;
    }
}

/* ----------------------------------------------------------
   ACCESSIBILITY
   Respect users who disable motion.
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mk3-ring-one,
    .mk3-ring-two,
    .mk3-ring-one::after,
    .mk3-ring-two::after {
        animation: none !important;
    }

    .mk3-ring-one::after,
    .mk3-ring-two::after {
        display: none !important;
    }
}

/* ==========================================================
   SOCIALIST DEEPAK
   Floating Call + WhatsApp Actions
   ========================================================== */

.sd-floating-contact {
    position: fixed;
    right: 22px;
    bottom: 24px;

    z-index: 999;

    display: flex;
    flex-direction: column;
    gap: 10px;

    pointer-events: none;
}

.sd-floating-action {
    min-width: 54px;
    height: 54px;

    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    border-radius: 999px;

    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(15, 44, 61, 0.18);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        min-width 180ms ease;

    pointer-events: auto;
}

.sd-floating-action:hover {
    transform: translateY(-2px);
    box-shadow:
        0 17px 36px rgba(15, 44, 61, 0.24);
}

.sd-floating-icon {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    display: grid;
    place-items: center;
}

.sd-floating-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sd-floating-label {
    white-space: nowrap;

    font-family: var(--sd-font-body);
    font-size: 13px;
    font-weight: 700;
}

/* ---------- Call ---------- */

.sd-floating-call {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a4142b 0%,
            #821020 100%
        );
}

/* ---------- WhatsApp ---------- */

.sd-floating-whatsapp {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #168a50 0%,
            #0e6f3e 100%
        );
}

/* ---------- Focus accessibility ---------- */

.sd-floating-action:focus-visible {
    outline: 3px solid rgba(205, 161, 76, 0.52);
    outline-offset: 3px;
}

/* ---------- Mobile ---------- */

@media (max-width: 620px) {

    .sd-floating-contact {
        left: 12px;
        right: 12px;
        bottom: 12px;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .sd-floating-action {
        width: 100%;
        min-width: 0;
        height: 52px;

        padding: 0 14px;

        justify-content: center;

        border-radius: 12px;
    }

    .sd-floating-label {
        font-size: 13px;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .sd-floating-action {
        transition: none;
    }
}

/* ==========================================================
   SOCIALIST DEEPAK
   Floating Contact Premium Polish
   ========================================================== */

/*
 * Desktop:
 * - compact circular actions
 * - icon first
 * - labels appear as lightweight tooltips
 *
 * Contact section:
 * - floating actions automatically fade away
 *   when #jansamvad is visible
 */

.sd-floating-contact {
    right: 24px !important;
    bottom: 26px !important;

    gap: 11px !important;

    transition:
        opacity 220ms ease,
        visibility 220ms ease,
        transform 220ms ease;
}

/* JS toggles this state near the contact CTA */
.sd-floating-contact.is-contact-section-visible {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(12px) !important;
    pointer-events: none !important;
}

.sd-floating-action {
    position: relative;

    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;

    padding: 0 !important;

    justify-content: center !important;
    gap: 0 !important;

    border-radius: 50% !important;

    box-shadow:
        0 10px 28px rgba(15, 44, 61, 0.18) !important;
}

.sd-floating-action:hover {
    transform: translateY(-3px) scale(1.025) !important;

    box-shadow:
        0 16px 34px rgba(15, 44, 61, 0.23) !important;
}

/* Keep only icon visible inside button */
.sd-floating-label {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}

/* Icon proportion */
.sd-floating-icon {
    width: 24px !important;
    height: 24px !important;

    flex: 0 0 24px !important;
}

.sd-floating-icon svg {
    width: 22px !important;
    height: 22px !important;

    stroke-width: 1.8 !important;
}

/* Call */
.sd-floating-call {
    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #ac1730 0%,
            #871020 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,0.12) !important;
}

/* WhatsApp */
.sd-floating-whatsapp {
    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #1a9858 0%,
            #117542 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,0.12) !important;
}

/* ----------------------------------------------------------
   Desktop tooltips
   ---------------------------------------------------------- */

.sd-floating-action::after {
    position: absolute;

    right: calc(100% + 11px);
    top: 50%;

    transform:
        translateY(-50%)
        translateX(5px);

    padding: 7px 11px;

    opacity: 0;
    visibility: hidden;

    color: #ffffff;
    background: #102f40;

    border-radius: 7px;

    font-family: var(--sd-font-body);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;

    white-space: nowrap;

    box-shadow:
        0 8px 20px rgba(15,44,61,0.15);

    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        transform 160ms ease;

    pointer-events: none;
}

.sd-floating-call::after {
    content: "कॉल करें";
}

.sd-floating-whatsapp::after {
    content: "WhatsApp करें";
}

.sd-floating-action:hover::after,
.sd-floating-action:focus-visible::after {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}

/* ----------------------------------------------------------
   Mobile
   Keep usable labelled buttons, but compact and elevated.
   ---------------------------------------------------------- */

@media (max-width: 620px) {

    .sd-floating-contact {
        left: 12px !important;
        right: 12px !important;

        bottom:
            calc(12px + env(safe-area-inset-bottom, 0px))
            !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 9px !important;
    }

    .sd-floating-action {
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;

        padding: 0 14px !important;

        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;

        border-radius: 12px !important;
    }

    .sd-floating-label {
        position: static !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;

        overflow: visible !important;

        clip: auto !important;

        white-space: nowrap !important;

        font-size: 12.5px !important;
        font-weight: 700 !important;
    }

    .sd-floating-action::after {
        display: none !important;
    }

    .sd-floating-icon {
        width: 21px !important;
        height: 21px !important;

        flex-basis: 21px !important;
    }

    .sd-floating-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sd-floating-contact,
    .sd-floating-action,
    .sd-floating-action::after {
        transition: none !important;
    }
}

/* ==========================================================
   SOCIALIST DEEPAK
   Bottom Fixed Marquee
   ========================================================== */

:root {
    --sd-bottom-marquee-height: 42px;
}

/* Reserve space so fixed ticker never covers footer/content */
body {
    padding-bottom: var(--sd-bottom-marquee-height);
}

/* Disable old top marquee animation if previous CSS remains */
.topbar .sd-marquee-track {
    animation: none !important;
}

.sd-bottom-marquee {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1200;

    height: var(--sd-bottom-marquee-height);

    display: flex;
    align-items: stretch;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #7e0d1d 0%,
            #9f1429 36%,
            #8d1022 100%
        );

    border-top: 1px solid rgba(224, 181, 92, 0.34);

    box-shadow:
        0 -8px 24px rgba(15, 44, 61, 0.12);
}

/* Fixed left label */

.sd-bottom-marquee-label {
    position: relative;
    z-index: 2;

    min-width: 138px;
    padding: 0 18px;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f2d3e 0%,
            #163e52 100%
        );

    border-right: 1px solid rgba(255,255,255,0.12);

    font-family: var(--sd-font-body);
}

.sd-bottom-marquee-label strong {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.sd-bottom-marquee-label-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #dfb15b;

    box-shadow:
        0 0 0 4px rgba(223,177,91,0.12);
}

/* Scrolling area */

.sd-bottom-marquee-viewport {
    min-width: 0;
    flex: 1 1 auto;

    display: flex;
    align-items: center;

    overflow: hidden;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0,
            #000 24px,
            #000 calc(100% - 24px),
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0,
            #000 24px,
            #000 calc(100% - 24px),
            transparent 100%
        );
}

.sd-bottom-marquee-track {
    display: flex;
    align-items: center;

    width: max-content;

    will-change: transform;

    animation:
        sd-bottom-marquee-scroll 34s linear infinite;
}

.sd-bottom-marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    min-width: max-content;

    padding-right: 44px;
}

.sd-bottom-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    white-space: nowrap;

    color: rgba(255,255,255,0.96);

    font-family: var(--sd-font-body);
    font-size: 11.5px;
    font-weight: 550;
    line-height: 1;
}

.sd-bottom-marquee-item > span {
    color: #e6bc68;
}

.sd-bottom-marquee-separator {
    margin: 0 24px;

    color: rgba(232,194,115,0.85);

    font-size: 7px;
}

.sd-bottom-marquee:hover .sd-bottom-marquee-track,
.sd-bottom-marquee:focus-within .sd-bottom-marquee-track {
    animation-play-state: paused;
}

@keyframes sd-bottom-marquee-scroll {
    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(-50%,0,0);
    }
}

/* Keep floating contact buttons above ticker */

.sd-floating-contact {
    bottom:
        calc(
            var(--sd-bottom-marquee-height)
            + 18px
        ) !important;
}

/* Tablet */

@media (max-width: 900px) {

    :root {
        --sd-bottom-marquee-height: 40px;
    }

    .sd-bottom-marquee-label {
        min-width: 112px;
        padding-inline: 13px;
    }

    .sd-bottom-marquee-label strong {
        font-size: 11px;
    }

    .sd-bottom-marquee-track {
        animation-duration: 29s;
    }

    .sd-bottom-marquee-item {
        font-size: 11px;
    }
}

/* Mobile */

@media (max-width: 620px) {

    :root {
        --sd-bottom-marquee-height: 38px;
    }

    .sd-bottom-marquee-label {
        min-width: 42px;
        width: 42px;
        padding: 0;
    }

    .sd-bottom-marquee-label strong {
        display: none;
    }

    .sd-bottom-marquee-label-dot {
        width: 8px;
        height: 8px;
    }

    .sd-bottom-marquee-viewport {
        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0,
                #000 12px,
                #000 calc(100% - 12px),
                transparent 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                transparent 0,
                #000 12px,
                #000 calc(100% - 12px),
                transparent 100%
            );
    }

    .sd-bottom-marquee-track {
        animation-duration: 25s;
    }

    .sd-bottom-marquee-item {
        font-size: 10.5px;
    }

    .sd-bottom-marquee-separator {
        margin-inline: 16px;
    }

    /*
     * Existing mobile floating contact actions sit
     * immediately above the ticker.
     */
    .sd-floating-contact {
        bottom:
            calc(
                var(--sd-bottom-marquee-height)
                + 10px
                + env(safe-area-inset-bottom, 0px)
            ) !important;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .sd-bottom-marquee-track {
        width: auto;
        animation: none !important;
        transform: none !important;
    }

    .sd-bottom-marquee-group[aria-hidden="true"] {
        display: none;
    }

    .sd-bottom-marquee-viewport {
        overflow-x: auto;

        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ==========================================================
   SOCIALIST DEEPAK
   Homepage Activities Premium V1
   ========================================================== */

.sd-activities-section {
    position: relative;

    padding: 108px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(199, 154, 73, 0.08),
            transparent 27%
        ),
        #ffffff;
}

.sd-activities-heading {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;

    gap: 82px;
    align-items: end;
}

.sd-activities-heading h2 {
    max-width: 700px;

    margin: 0;

    color: #102b3a;

    font-family: var(--sd-font-display);
    font-size: clamp(39px, 4vw, 55px);
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.sd-activities-heading h2 span {
    display: block;

    color: #9c1428;
}

.sd-activities-heading > p {
    margin: 0 0 5px;

    color: #657580;

    font-size: 15px;
    line-height: 1.8;
}

/* ---------- Cards ---------- */

.sd-activities-grid {
    margin-top: 52px;

    display: grid;
    grid-template-columns: 1.18fr 0.91fr 0.91fr;

    gap: 22px;
}

.sd-activity-card {
    position: relative;

    min-height: 290px;

    padding: 34px 30px;

    overflow: hidden;

    background: #f7f8f8;

    border: 1px solid rgba(16, 43, 58, 0.09);
    border-radius: 21px;

    box-shadow:
        0 12px 35px rgba(16, 43, 58, 0.045);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.sd-activity-card:hover {
    transform: translateY(-5px);

    border-color: rgba(156, 20, 40, 0.18);

    box-shadow:
        0 22px 52px rgba(16, 43, 58, 0.09);
}

/* ---------- Featured Card ---------- */

.sd-activity-featured {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #102b3a 0%,
            #173e50 100%
        );

    border-color: transparent;

    box-shadow:
        0 22px 55px rgba(16, 43, 58, 0.14);
}

.sd-activity-featured::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -65px;
    bottom: -70px;

    border:
        1px solid
        rgba(211, 166, 83, 0.22);

    border-radius: 50%;
}

/* ---------- Icons ---------- */

.sd-activity-icon {
    width: 50px;
    height: 50px;

    margin-bottom: 28px;

    display: grid;
    place-items: center;

    color: #9c1428;

    background: #fff1f3;

    border:
        1px solid
        rgba(156, 20, 40, 0.08);

    border-radius: 14px;
}

.sd-activity-featured .sd-activity-icon {
    color: #e0b25d;

    background: rgba(255,255,255,0.08);

    border-color: rgba(255,255,255,0.10);
}

.sd-activity-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Text ---------- */

.sd-activity-label {
    display: block;

    margin-bottom: 8px;

    color: #9c1428;

    font-size: 12px;
    font-weight: 700;
}

.sd-activity-featured .sd-activity-label {
    color: #dfb25c;
}

.sd-activity-card h3 {
    margin: 0;

    color: #102b3a;

    font-family: var(--sd-font-display);
    font-size: 21px;
    font-weight: 650;
    line-height: 1.42;
}

.sd-activity-featured h3 {
    color: #ffffff;

    font-size: 24px;
}

.sd-activity-card p {
    margin: 13px 0 0;

    color: #6a7983;

    font-size: 14px;
    line-height: 1.75;
}

.sd-activity-featured p {
    color: rgba(255,255,255,0.68);
}

.sd-activity-arrow {
    position: absolute;

    right: 28px;
    bottom: 26px;

    z-index: 2;

    color: #e1b25b;

    font-size: 25px;
}

/* ---------- Verification Note ---------- */

.sd-activities-note {
    margin-top: 25px;

    padding: 17px 21px;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    background: #faf7f1;

    border:
        1px solid
        rgba(199, 154, 73, 0.20);

    border-radius: 13px;
}

.sd-activities-note-icon {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background: #9c1428;

    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;
}

.sd-activities-note p {
    margin: 1px 0 0;

    color: #6a767e;

    font-size: 13px;
    line-height: 1.65;
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {

    .sd-activities-heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sd-activities-heading > p {
        max-width: 700px;
    }

    .sd-activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sd-activity-featured {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {

    .sd-activities-section {
        padding: 72px 0;
    }

    .sd-activities-heading h2 {
        font-size: clamp(33px, 9.5vw, 42px);
    }

    .sd-activities-grid {
        margin-top: 38px;

        grid-template-columns: 1fr;
    }

    .sd-activity-featured {
        grid-column: auto;
    }

    .sd-activity-card {
        min-height: auto;

        padding: 28px 24px;
    }

    .sd-activity-featured h3 {
        font-size: 22px;
    }

    .sd-activity-arrow {
        display: none;
    }
}

/* ==========================================================
   SOCIALIST DEEPAK — PREMIUM VICHAAR SECTION V1
   ========================================================== */

.sd-thoughts-section {
    position: relative;
    overflow: hidden;
    padding: clamp(76px, 8vw, 124px) 0;
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(196, 151, 70, 0.10),
            transparent 28%
        ),
        #fffaf4;
}

.sd-thoughts-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1180px, calc(100% - 40px));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(177, 20, 47, 0.18),
        transparent
    );
}

.sd-thoughts-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
    gap: clamp(50px, 7vw, 110px);
    align-items: end;
    margin-bottom: clamp(42px, 5vw, 68px);
}

.sd-thoughts-heading h2 {
    max-width: 720px;
    margin: 10px 0 0;
    color: #0d3445;
    font-size: clamp(2.4rem, 4.4vw, 4.75rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.sd-thoughts-heading h2 span {
    display: block;
    color: #b1142f;
}

.sd-thoughts-intro {
    max-width: 560px;
    margin: 0;
    color: #647781;
    font-size: clamp(1rem, 1.15vw, 1.13rem);
    line-height: 1.9;
}

.sd-thoughts-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(22px, 2.5vw, 36px);
    align-items: stretch;
}

.sd-thought-featured {
    position: relative;
    isolation: isolate;
    min-height: 510px;
    padding: clamp(32px, 4vw, 54px);
    overflow: hidden;
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            #0b3040 0%,
            #123f50 100%
        );
    box-shadow: 0 28px 70px rgba(13, 52, 69, 0.16);
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

.sd-thought-featured::before {
    content: "";
    position: absolute;
    right: -95px;
    bottom: -120px;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(205, 160, 73, 0.26);
    border-radius: 50%;
    z-index: -1;
}

.sd-thought-featured::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -65px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(205, 160, 73, 0.15);
    border-radius: 50%;
    z-index: -1;
}

.sd-thought-featured-top {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sd-thought-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.07);
}

.sd-thought-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #d2a447;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sd-thought-eyebrow {
    color: #d6aa50;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.sd-thought-featured-content {
    margin: auto 0;
    padding: 42px 0;
}

.sd-thought-featured h3 {
    max-width: 620px;
    margin: 0 0 24px;
    color: #ffffff;
    font-size: clamp(1.8rem, 2.5vw, 2.75rem);
    line-height: 1.25;
}

.sd-thought-featured-content p {
    max-width: 600px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.9;
}

.sd-thought-featured-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.72);
    font-weight: 700;
}

.sd-thought-arrow {
    color: #d7a53e;
    font-size: 1.7rem;
    line-height: 1;
    transition: transform 180ms ease;
}

.sd-thought-featured:hover .sd-thought-arrow {
    transform: translateX(6px);
}

.sd-thought-pillars {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 16px;
}

.sd-thought-pillar {
    position: relative;
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: clamp(25px, 3vw, 34px);
    border: 1px solid rgba(13, 52, 69, 0.10);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 40px rgba(13, 52, 69, 0.045);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.sd-thought-pillar:hover {
    transform: translateY(-3px);
    border-color: rgba(177, 20, 47, 0.20);
    box-shadow: 0 20px 48px rgba(13, 52, 69, 0.08);
}

.sd-thought-pillar-number {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff3f3;
    color: #b1142f;
    font-size: 0.88rem;
    font-weight: 900;
}

.sd-thought-pillar-label {
    display: inline-block;
    margin-bottom: 7px;
    color: #b1142f;
    font-size: 0.78rem;
    font-weight: 800;
}

.sd-thought-pillar h3 {
    margin: 0 0 9px;
    color: #0d3445;
    font-size: clamp(1.12rem, 1.35vw, 1.38rem);
    line-height: 1.4;
}

.sd-thought-pillar p {
    margin: 0;
    color: #697b84;
    font-size: 0.94rem;
    line-height: 1.75;
}

.sd-thoughts-status {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 17px 22px;
    border: 1px solid rgba(196, 151, 70, 0.26);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.62);
}

.sd-thoughts-status-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #b1142f;
    color: #ffffff;
    font-size: 0.72rem;
}

.sd-thoughts-status p {
    margin: 0;
    color: #6a7b83;
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .sd-thoughts-heading {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sd-thoughts-intro {
        max-width: 720px;
    }

    .sd-thoughts-layout {
        grid-template-columns: 1fr;
    }

    .sd-thought-featured {
        min-height: 450px;
    }

    .sd-thought-pillars {
        grid-template-rows: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sd-thought-pillar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .sd-thoughts-section {
        padding: 68px 0;
    }

    .sd-thoughts-heading {
        margin-bottom: 34px;
    }

    .sd-thoughts-heading h2 {
        font-size: clamp(2.15rem, 10vw, 3.35rem);
    }

    .sd-thought-featured {
        min-height: auto;
        padding: 30px 24px;
        border-radius: 22px;
    }

    .sd-thought-featured-content {
        padding: 52px 0;
    }

    .sd-thought-featured h3 {
        font-size: 1.75rem;
    }

    .sd-thought-pillars {
        grid-template-columns: 1fr;
    }

    .sd-thought-pillar {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 18px;
        padding: 23px 20px;
    }

    .sd-thought-pillar-number {
        width: 50px;
        height: 50px;
    }

    .sd-thoughts-status {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-thought-featured,
    .sd-thought-pillar,
    .sd-thought-arrow {
        transition: none;
    }
}


/* ==========================================================
   SOCIALIST DEEPAK — PREMIUM MEDIA SECTION V1
   ========================================================== */

.sd-media-premium {
    position: relative;
    overflow: hidden;
}

.sd-media-premium .sd-media-heading h2 span {
    color: #b0182b;
}

.sd-media-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 32px;
    margin-top: 44px;
    align-items: stretch;
}

.sd-media-feature {
    position: relative;
    min-height: 570px;
    padding: 42px 46px 38px;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(212, 166, 63, 0.12),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #0b3442 0%,
            #103f4d 100%
        );
    color: #ffffff;
    box-shadow: 0 24px 55px rgba(12, 49, 62, 0.12);
    display: flex;
    flex-direction: column;
}

.sd-media-feature::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -82px;
    top: -78px;
    border: 1px solid rgba(218, 175, 75, 0.24);
    border-radius: 50%;
}

.sd-media-feature-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sd-media-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.sd-media-icon svg {
    width: 29px;
    height: 29px;
    stroke: #e1b446;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sd-media-status {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 700;
}

.sd-media-feature-copy {
    position: relative;
    z-index: 2;
    margin-top: auto;
    margin-bottom: 54px;
    max-width: 590px;
}

.sd-media-eyebrow,
.sd-media-card-label {
    margin: 0 0 14px;
    color: #e1b446;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
}

.sd-media-feature-copy h3 {
    margin: 0;
    max-width: 560px;
    color: #ffffff;
    font-size: clamp(34px, 3vw, 52px);
    line-height: 1.18;
    letter-spacing: -0.025em;
}

.sd-media-feature-copy > p:last-child {
    max-width: 590px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.73);
    font-size: 16px;
    line-height: 1.85;
}

.sd-media-feature-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    font-weight: 700;
}

.sd-media-arrow {
    color: #e1b446;
    font-size: 25px;
    line-height: 1;
}

.sd-media-orbit {
    position: absolute;
    right: -82px;
    bottom: -98px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(225, 180, 70, 0.28);
    border-radius: 50%;
}

.sd-media-orbit::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 30px;
    top: 38px;
    border-radius: 50%;
    background: #e1b446;
    box-shadow: 0 0 0 7px rgba(225, 180, 70, 0.09);
}

.sd-media-side {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
}

.sd-media-info-card {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 34px 36px;
    border: 1px solid rgba(176, 24, 43, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 16px 38px rgba(17, 49, 59, 0.055);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.sd-media-info-card:hover {
    transform: translateY(-4px);
    border-color: rgba(176, 24, 43, 0.22);
    box-shadow: 0 22px 46px rgba(17, 49, 59, 0.085);
}

.sd-media-card-number {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff1f2;
    color: #b0182b;
    font-size: 15px;
    font-weight: 900;
}

.sd-media-card-label {
    margin-bottom: 8px;
    color: #b0182b;
}

.sd-media-info-card h3 {
    margin: 0;
    color: #0c3442;
    font-size: 21px;
    line-height: 1.4;
}

.sd-media-info-card p:last-child {
    margin: 12px 0 0;
    color: #657a82;
    font-size: 15px;
    line-height: 1.75;
}

.sd-media-note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding: 17px 22px;
    border: 1px solid rgba(205, 158, 58, 0.25);
    border-radius: 16px;
    background: rgba(255, 250, 240, 0.72);
}

.sd-media-note-mark {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #b0182b;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.sd-media-note p {
    margin: 0;
    color: #687c84;
    font-size: 14px;
    line-height: 1.7;
}


/* Tablet */

@media (max-width: 991px) {

    .sd-media-stage {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sd-media-feature {
        min-height: 500px;
    }

    .sd-media-side {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: none;
    }

    .sd-media-info-card {
        grid-template-columns: 1fr;
        padding: 28px;
    }

}


/* Mobile */

@media (max-width: 767px) {

    .sd-media-stage {
        margin-top: 30px;
    }

    .sd-media-feature {
        min-height: 450px;
        padding: 28px 24px;
        border-radius: 22px;
    }

    .sd-media-feature-top {
        align-items: flex-start;
    }

    .sd-media-icon {
        width: 54px;
        height: 54px;
        border-radius: 15px;
    }

    .sd-media-status {
        min-height: 32px;
        padding: 0 12px;
        font-size: 11px;
    }

    .sd-media-feature-copy {
        margin-bottom: 38px;
    }

    .sd-media-feature-copy h3 {
        font-size: 34px;
    }

    .sd-media-feature-copy > p:last-child {
        font-size: 15px;
        line-height: 1.75;
    }

    .sd-media-side {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sd-media-info-card {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 18px;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .sd-media-card-number {
        width: 54px;
        height: 54px;
    }

    .sd-media-info-card h3 {
        font-size: 19px;
    }

    .sd-media-note {
        align-items: flex-start;
        padding: 16px 18px;
    }

}


/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

    .sd-media-info-card {
        transition: none;
    }

    .sd-media-info-card:hover {
        transform: none;
    }

}

/* ==========================================================
   SOCIALIST DEEPAK — JAN-SAMVAD PREMIUM V1
   ========================================================== */

.sd-connect-section {
    position: relative;
    padding: clamp(78px, 8vw, 118px) 0;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(205, 160, 72, 0.10),
            transparent 30%
        ),
        #fffaf4;
}

.sd-connect-shell {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.72fr);
    gap: clamp(48px, 7vw, 100px);
    align-items: center;

    padding: clamp(46px, 5vw, 72px);

    border: 1px solid rgba(193, 146, 56, 0.22);
    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.98) 0%,
            rgba(255,250,243,0.98) 100%
        );

    box-shadow:
        0 28px 70px rgba(13, 52, 69, 0.08);
}

.sd-connect-shell::after {
    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    right: -145px;
    bottom: -180px;

    border:
        1px solid
        rgba(193, 146, 56, 0.20);

    border-radius: 50%;

    pointer-events: none;
}

.sd-connect-copy {
    position: relative;
    z-index: 2;
}

.sd-connect-copy h2 {
    max-width: 760px;

    margin: 8px 0 0;

    color: #0d3445;

    font-size: clamp(43px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.sd-connect-copy h2 span {
    display: block;

    color: #b0182b;
}

.sd-connect-lead {
    max-width: 700px;

    margin: 27px 0 0;

    color: #647982;

    font-size: 16px;
    line-height: 1.9;
}

/* Trust items */

.sd-connect-trust {
    margin-top: 38px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.sd-connect-trust-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);

    gap: 14px;
    align-items: start;

    padding: 17px 18px;

    background: rgba(255,255,255,0.74);

    border:
        1px solid
        rgba(13, 52, 69, 0.08);

    border-radius: 15px;
}

.sd-connect-trust-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    color: #b0182b;

    background: #fff0f2;

    border-radius: 12px;
}

.sd-connect-trust-icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sd-connect-trust-item strong {
    display: block;

    color: #0d3445;

    font-size: 14px;
}

.sd-connect-trust-item span:last-child {
    display: block;

    margin-top: 3px;

    color: #75858c;

    font-size: 12px;
    line-height: 1.5;
}

/* Contact panel */

.sd-connect-actions-panel {
    position: relative;
    z-index: 2;

    padding: 30px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #0c3442 0%,
            #113f4e 100%
        );

    box-shadow:
        0 20px 48px rgba(12, 52, 66, 0.15);
}

.sd-connect-actions-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 21px;

    color: rgba(255,255,255,0.72);

    font-size: 12px;
    font-weight: 700;
}

.sd-connect-status {
    display: inline-flex;
    align-items: center;

    min-height: 28px;

    padding: 0 11px;

    color: #e5b95c;

    background:
        rgba(229, 185, 92, 0.10);

    border:
        1px solid
        rgba(229, 185, 92, 0.18);

    border-radius: 999px;
}

/* Actions */

.sd-connect-action {
    position: relative;

    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;

    gap: 15px;
    align-items: center;

    min-height: 78px;

    padding: 14px 16px;

    text-decoration: none;

    border:
        1px solid
        rgba(255,255,255,0.11);

    border-radius: 16px;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}

.sd-connect-action + .sd-connect-action {
    margin-top: 12px;
}

.sd-connect-action:hover {
    transform: translateY(-2px);

    background:
        rgba(255,255,255,0.06);

    border-color:
        rgba(255,255,255,0.18);
}

.sd-connect-action-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    color: #ffffff;

    border-radius: 14px;
}

.sd-connect-call .sd-connect-action-icon {
    background:
        linear-gradient(
            145deg,
            #b21831 0%,
            #8c1024 100%
        );
}

.sd-connect-whatsapp .sd-connect-action-icon {
    background:
        linear-gradient(
            145deg,
            #1a9557 0%,
            #11733f 100%
        );
}

.sd-connect-action-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sd-connect-action-copy small {
    display: block;

    color: rgba(255,255,255,0.55);

    font-size: 11px;
}

.sd-connect-action-copy strong {
    display: block;

    margin-top: 3px;

    color: #ffffff;

    font-size: 15px;
}

.sd-connect-action-arrow {
    color: #e4b55a;

    font-size: 20px;
}

.sd-connect-email {
    margin-top: 19px;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(255,255,255,0.10);

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.sd-connect-email span {
    color: rgba(255,255,255,0.46);

    font-size: 11px;
}

.sd-connect-email a {
    color: #ffffff;

    font-size: 13px;
    text-decoration: none;

    overflow-wrap: anywhere;
}

/* Tablet */

@media (max-width: 991px) {

    .sd-connect-shell {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .sd-connect-actions-panel {
        max-width: 620px;
        width: 100%;
    }

}

/* Mobile */

@media (max-width: 767px) {

    .sd-connect-section {
        padding: 68px 0;
    }

    .sd-connect-shell {
        padding: 28px 22px;

        border-radius: 22px;
    }

    .sd-connect-copy h2 {
        font-size: clamp(38px, 12vw, 52px);
    }

    .sd-connect-lead {
        font-size: 15px;
        line-height: 1.78;
    }

    .sd-connect-trust {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sd-connect-actions-panel {
        padding: 21px 18px;

        border-radius: 19px;
    }

    .sd-connect-action {
        grid-template-columns: 44px minmax(0, 1fr) auto;

        min-height: 70px;

        padding: 12px 13px;
    }

    .sd-connect-action-icon {
        width: 44px;
        height: 44px;
    }

}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .sd-connect-action {
        transition: none;
    }

    .sd-connect-action:hover {
        transform: none;
    }

}

/* ==========================================================
   SOCIALIST DEEPAK — FOOTER PREMIUM V2
   Stentorian-inspired light footer
   ========================================================== */

.sd-footer-v2 {
    position: relative;
    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(204, 155, 57, 0.06),
            transparent 24%
        ),
        #fffdfa !important;
    color: #173647 !important;
    border-top: 1px solid rgba(17, 52, 68, 0.08);
}

.sd-footer-v2-grid {
    display: grid;
    grid-template-columns:
        minmax(230px, 1.02fr)
        minmax(220px, .92fr)
        minmax(280px, 1.08fr)
        minmax(230px, .96fr);

    gap: clamp(38px, 5vw, 76px);

    padding-top: 78px;
    padding-bottom: 68px;
}

.sd-footer-v2-column {
    min-width: 0;
}

.sd-footer-v2-brand h2,
.sd-footer-v2-heading {
    margin: 0;

    color: #123548;

    font-family: var(--sd-font-display);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
}

.sd-footer-v2-heading {
    font-size: 20px;
}

.sd-footer-v2-title-line {
    display: block;

    width: 50px;
    height: 3px;

    margin-top: 13px;
    margin-bottom: 29px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            #ab1530 0 54%,
            rgba(171, 21, 48, 0.18) 54% 100%
        );
}

.sd-footer-v2-brand > p,
.sd-footer-v2-community > p {
    margin: 0;

    color: #687982;

    font-size: 14px;
    line-height: 1.95;
}

.sd-footer-v2-brand > p {
    max-width: 310px;
}

/* WhatsApp CTA */

.sd-footer-v2-whatsapp {
    margin-top: 25px;

    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;

    gap: 13px;
    align-items: center;

    min-height: 62px;

    padding: 9px 14px 9px 10px;

    color: #9f1730;
    text-decoration: none;

    border: 1px solid rgba(171,21,48,.18);
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 9px 25px rgba(17,52,68,.04);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.sd-footer-v2-whatsapp:hover {
    transform: translateY(-2px);

    border-color: rgba(171,21,48,.30);

    box-shadow:
        0 14px 30px rgba(17,52,68,.075);
}

.sd-footer-v2-whatsapp-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    color: #159653;

    background: #f4fff8;

    border-radius: 11px;
}

.sd-footer-v2-arrow {
    color: #ae1630;
    font-size: 18px;
}

/* Social */

.sd-footer-v2-social-block {
    margin-top: 31px;
    padding-top: 25px;

    border-top: 1px solid rgba(17,52,68,.08);
}

.sd-footer-v2-social-block h3 {
    margin: 0 0 15px;

    color: #183949;

    font-size: 15px;
}

.sd-footer-v2-social-icons {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
}

.sd-footer-v2-social {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(18,53,72,.13);
    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 5px 15px rgba(17,52,68,.04);
}

.sd-footer-v2-facebook {
    color: #1976d2;
}

.sd-footer-v2-instagram {
    color: #d62976;
}

.sd-footer-v2-youtube {
    color: #e22424;
}

.sd-footer-v2-x {
    color: #111111;
}

.sd-footer-v2-handle {
    margin: 13px 0 0 !important;

    color: #667981 !important;

    font-size: 13px !important;
}

/* Icon defaults */

.sd-footer-v2 svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Quick links */

.sd-footer-v2-links {
    list-style: none;

    margin: 0;
    padding: 0;
}

.sd-footer-v2-links li {
    border-bottom:
        1px solid
        rgba(18,53,72,.09);
}

.sd-footer-v2-links a {
    min-height: 43px;

    display: flex;
    align-items: center;

    gap: 12px;

    color: #213f4e;

    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    transition:
        color .16s ease,
        transform .16s ease;
}

.sd-footer-v2-links a:hover {
    color: #a8142d;
    transform: translateX(3px);
}

.sd-footer-v2-link-icon {
    width: 26px;

    flex: 0 0 26px;

    display: grid;
    place-items: center;

    color: #c89532;
}

.sd-footer-v2-link-icon svg {
    width: 19px;
    height: 19px;
}

/* Contact */

.sd-footer-v2-contact {
    display: grid;
}

.sd-footer-v2-contact-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);

    gap: 14px;
    align-items: start;

    padding: 16px 0;

    color: #233f4d;
    text-decoration: none;

    border-bottom:
        1px solid
        rgba(18,53,72,.09);

    font-size: 14px;
    line-height: 1.75;
}

.sd-footer-v2-contact-row:first-child {
    padding-top: 0;
}

.sd-footer-v2-contact-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: #c89532;
}

.sd-footer-v2-contact-icon svg {
    width: 22px;
    height: 22px;
}

.sd-footer-v2-location {
    border-bottom: 0;
}

/* Community */

.sd-footer-v2-community > p {
    max-width: 280px;
}

.sd-footer-v2-community-art {
    height: 118px;

    margin-top: 27px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow: hidden;

    color: rgba(171,21,48,.10);
}

.sd-footer-v2-community-art svg {
    width: 230px;
    height: auto;

    stroke-width: 1.35;
}

.sd-footer-v2-message {
    display: block;

    margin-top: 12px;

    color: #a8142d;

    font-size: 16px;
    line-height: 1.5;
}

/* Bottom bar */

.sd-footer-v2-bottom {
    background:
        linear-gradient(
            100deg,
            #0b3444 0%,
            #103e4e 52%,
            #0b3444 100%
        );

    border-top:
        1px solid
        rgba(204,155,57,.18);
}

.sd-footer-v2-bottom-inner {
    min-height: 86px;

    display: grid;
    grid-template-columns:
        minmax(250px,1fr)
        auto
        minmax(250px,1fr);

    gap: 28px;
    align-items: center;

    color: rgba(255,255,255,.74);

    font-size: 12px;
}

.sd-footer-v2-bottom-inner > p {
    margin: 0;
}

.sd-footer-v2-values {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    white-space: nowrap;

    color: rgba(255,255,255,.88);

    font-weight: 600;
}

.sd-footer-v2-values i,
.sd-footer-v2-legal i {
    color: #c82d42;
    font-style: normal;
}

.sd-footer-v2-shield {
    display: grid;
    place-items: center;

    margin-right: 5px;

    color: #d0a24b;
}

.sd-footer-v2-legal {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    white-space: nowrap;
}

.sd-footer-v2-legal a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
}

.sd-footer-v2-legal a:hover {
    color: #fff;
}

/* Desktop intermediate */

@media (max-width: 1180px) {

    .sd-footer-v2-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 52px 65px;
    }

    .sd-footer-v2-bottom-inner {
        grid-template-columns: 1fr auto;
    }

    .sd-footer-v2-values {
        display: none;
    }

}

/* Tablet */

@media (max-width: 760px) {

    .sd-footer-v2-grid {
        grid-template-columns: 1fr;

        gap: 42px;

        padding-top: 58px;
        padding-bottom: 52px;
    }

    .sd-footer-v2-brand > p,
    .sd-footer-v2-community > p {
        max-width: 580px;
    }

    .sd-footer-v2-community-art {
        justify-content: flex-start;
    }

    .sd-footer-v2-bottom-inner {
        min-height: auto;

        padding: 22px 0;

        grid-template-columns: 1fr;

        gap: 11px;
    }

    .sd-footer-v2-legal {
        justify-content: flex-start;
    }

}

/* Mobile */

@media (max-width: 480px) {

    .sd-footer-v2-grid {
        padding-top: 48px;
        padding-bottom: 42px;
    }

    .sd-footer-v2-title-line {
        margin-bottom: 22px;
    }

    .sd-footer-v2-whatsapp {
        width: 100%;
    }

    .sd-footer-v2-contact-row {
        grid-template-columns: 32px minmax(0,1fr);
        gap: 10px;
    }

    .sd-footer-v2-contact-icon {
        width: 30px;
        height: 30px;
    }

    .sd-footer-v2-contact-row {
        font-size: 13px;
    }

}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .sd-footer-v2-whatsapp,
    .sd-footer-v2-links a {
        transition: none;
    }

    .sd-footer-v2-whatsapp:hover,
    .sd-footer-v2-links a:hover {
        transform: none;
    }

}

/* ==========================================================
   SOCIALIST DEEPAK — AUTHORITATIVE RESPONSIVE LAYER V1
   Mobile / Tablet stabilization
   Added after Premium Footer V2
   ========================================================== */

/* ----------------------------------------------------------
   Global responsive safety
   ---------------------------------------------------------- */

html {
    max-width: 100%;
    overflow-x: clip;
}

body {
    max-width: 100%;
    overflow-x: clip;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

main,
.site-header,
.site-footer,
.mk3-hero,
.v2-section,
.sd-activities-section,
.sd-thoughts-section,
.sd-media-premium,
.sd-connect-section {
    min-width: 0;
}

/* Long strings must never force horizontal overflow */
.sd-connect-email,
.sd-connect-email a,
.sd-footer-v2-contact-row,
.sd-footer-v2-contact-row span,
.sd-footer-v2-whatsapp strong,
.sd-footer-v2-bottom-inner,
.sd-footer-v2-legal {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ==========================================================
   TABLET — 900px AND BELOW
   ========================================================== */

@media (max-width: 900px) {

    /* ---------- Header ---------- */

    .navigation-inner {
        min-width: 0;
    }

    .brand {
        min-width: 0;
    }

    .brand-copy {
        min-width: 0;
    }

    /* ---------- Hero ---------- */

    .mk3-hero {
        overflow: hidden;
    }

    .mk3-hero-grid {
        grid-template-columns: 1fr !important;
        min-width: 0;
    }

    .mk3-hero-content,
    .mk3-hero-art {
        min-width: 0;
        max-width: 100%;
    }

    /* ---------- Activities ---------- */

    .sd-activities-section {
        padding-top: 82px;
        padding-bottom: 82px;
    }

    .sd-activities-heading {
        grid-template-columns: 1fr;
        gap: 22px;
        align-items: start;
    }

    .sd-activities-heading > p {
        max-width: 700px;
    }

    .sd-activities-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    /* ---------- Thoughts ---------- */

    .sd-thoughts-heading {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .sd-thoughts-layout {
        grid-template-columns: 1fr !important;
    }

    .sd-thought-featured,
    .sd-thought-pillars {
        min-width: 0;
    }

    /* ---------- Media ---------- */

    .sd-media-stage {
        grid-template-columns: 1fr !important;
    }

    .sd-media-feature,
    .sd-media-side {
        min-width: 0;
    }

    /* ---------- Connect ---------- */

    .sd-connect-shell {
        grid-template-columns: 1fr !important;
    }

    .sd-connect-copy,
    .sd-connect-actions-panel {
        min-width: 0;
        max-width: 100%;
    }

    /* ---------- Footer ---------- */

    .sd-footer-v2-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 46px 50px;
    }

    .sd-footer-v2-column {
        min-width: 0;
    }

    .sd-footer-v2-bottom-inner {
        grid-template-columns: 1fr auto;
        min-width: 0;
    }

    .sd-footer-v2-values {
        display: none;
    }
}

/* ==========================================================
   MOBILE — 620px AND BELOW
   ========================================================== */

@media (max-width: 620px) {

    /* ---------- Global rhythm ---------- */

    .container {
        width: min(100% - 32px, var(--container-width, 1180px));
        margin-inline: auto;
    }

    /* ---------- Header ---------- */

    .topbar-inner {
        min-width: 0;
    }

    .topbar-message {
        min-width: 0;
    }

    .navigation-inner {
        min-height: 68px;
    }

    .brand {
        max-width: calc(100% - 58px);
    }

    .brand-mark {
        flex-shrink: 0;
    }

    .brand-copy strong,
    .brand-copy small {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .menu-toggle {
        flex: 0 0 auto;
    }

    .primary-navigation {
        max-width: 100%;
    }

    /* ---------- Hero ---------- */

    .mk3-hero {
        min-height: auto !important;
    }

    .mk3-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .mk3-hero-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .mk3-hero-content h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .mk3-hero-art {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto;
    }

    /* ---------- Section spacing ---------- */

    .v2-section,
    .sd-activities-section,
    .sd-thoughts-section,
    .sd-media-premium,
    .sd-connect-section {
        padding-top: 66px;
        padding-bottom: 66px;
    }

    /* ---------- Activities ---------- */

    .sd-activities-heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sd-activities-heading h2 {
        font-size: clamp(32px, 9.4vw, 42px);
    }

    .sd-activities-grid {
        margin-top: 34px;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sd-activity-card {
        min-height: 0;
        padding: 26px 22px;
    }

    .sd-activities-note {
        min-width: 0;
    }

    /* ---------- Thoughts ---------- */

    .sd-thoughts-heading {
        display: block !important;
    }

    .sd-thoughts-intro {
        margin-top: 18px;
    }

    .sd-thoughts-layout {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .sd-thought-featured {
        padding: 28px 22px !important;
    }

    .sd-thought-featured h3 {
        overflow-wrap: anywhere;
    }

    .sd-thought-pillars {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .sd-thought-pillar {
        min-width: 0;
    }

    .sd-thoughts-status {
        min-width: 0;
    }

    /* ---------- Media ---------- */

    .sd-media-stage {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .sd-media-feature {
        min-height: 0 !important;
        padding: 28px 22px !important;
    }

    .sd-media-feature-copy h3 {
        overflow-wrap: anywhere;
    }

    .sd-media-side {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .sd-media-info-card {
        min-width: 0;
    }

    .sd-media-note {
        min-width: 0;
    }

    /* ---------- Jan Samvad ---------- */

    .sd-connect-shell {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .sd-connect-copy h2 {
        overflow-wrap: anywhere;
    }

    .sd-connect-trust {
        grid-template-columns: 1fr !important;
    }

    .sd-connect-actions-panel {
        width: 100%;
        padding: 22px 18px !important;
    }

    .sd-connect-action {
        min-width: 0;
    }

    .sd-connect-action-copy {
        min-width: 0;
    }

    .sd-connect-action-copy strong {
        overflow-wrap: anywhere;
    }

    .sd-connect-email {
        min-width: 0;
    }

    .sd-connect-email a {
        display: inline-block;
        max-width: 100%;
    }

    /* ---------- Footer ---------- */

    .sd-footer-v2-grid {
        grid-template-columns: 1fr !important;
        gap: 38px !important;

        padding-top: 52px;
        padding-bottom: 48px;
    }

    .sd-footer-v2-brand > p,
    .sd-footer-v2-community > p {
        max-width: none;
    }

    .sd-footer-v2-title-line {
        margin-bottom: 22px;
    }

    .sd-footer-v2-whatsapp {
        width: 100%;
        max-width: 100%;

        grid-template-columns:
            42px minmax(0, 1fr) auto;
    }

    .sd-footer-v2-whatsapp strong {
        font-size: 13.5px;
    }

    .sd-footer-v2-links a {
        width: 100%;
        min-width: 0;
    }

    .sd-footer-v2-contact-row {
        width: 100%;
        grid-template-columns:
            34px minmax(0, 1fr);
    }

    .sd-footer-v2-community-art {
        height: 100px;
        justify-content: flex-start;
    }

    .sd-footer-v2-community-art svg {
        width: min(230px, 78vw);
    }

    .sd-footer-v2-bottom-inner {
        grid-template-columns: 1fr !important;
        gap: 12px;

        min-height: auto;
        padding: 22px 0;
    }

    .sd-footer-v2-bottom-inner > p {
        line-height: 1.7;
    }

    .sd-footer-v2-legal {
        justify-content: flex-start;
        flex-wrap: wrap;
        white-space: normal;
    }

    /* ---------- Floating contact ---------- */

    .sd-floating-contact {
        left: 12px !important;
        right: 12px !important;

        width: auto !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        bottom:
            calc(
                var(--sd-bottom-marquee-height)
                + 10px
                + env(safe-area-inset-bottom, 0px)
            ) !important;
    }

    .sd-floating-action {
        min-width: 0 !important;
        max-width: 100%;
    }

    .sd-floating-label {
        min-width: 0;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    /* ---------- Bottom ticker ---------- */

    .sd-bottom-marquee {
        max-width: 100vw;
    }

    .sd-bottom-marquee-viewport {
        min-width: 0;
    }
}

/* ==========================================================
   SMALL MOBILE — 420px AND BELOW
   ========================================================== */

@media (max-width: 420px) {

    .container {
        width: calc(100% - 28px);
    }

    .brand-copy strong {
        font-size: 16px;
    }

    .brand-copy small {
        font-size: 10.5px;
    }

    .sd-activities-heading h2,
    .sd-thoughts-heading h2,
    .sd-media-heading h2,
    .sd-connect-copy h2 {
        font-size: clamp(29px, 9vw, 36px) !important;
    }

    .sd-activity-card,
    .sd-thought-featured,
    .sd-media-feature {
        border-radius: 17px;
    }

    .sd-connect-actions-panel {
        padding: 18px 14px !important;
    }

    .sd-footer-v2-grid {
        gap: 34px !important;
        padding-top: 44px;
    }

    .sd-footer-v2-brand h2 {
        font-size: 23px;
    }

    .sd-footer-v2-heading {
        font-size: 19px;
    }

    .sd-footer-v2-whatsapp {
        grid-template-columns:
            38px minmax(0, 1fr) auto;

        gap: 10px;
        padding-inline: 9px 11px;
    }

    .sd-footer-v2-whatsapp-icon {
        width: 38px;
        height: 38px;
    }

    .sd-footer-v2-contact-row {
        grid-template-columns:
            30px minmax(0, 1fr);

        gap: 9px;

        font-size: 13px;
    }

    .sd-footer-v2-contact-icon {
        width: 28px;
        height: 28px;
    }

    .sd-floating-contact {
        left: 9px !important;
        right: 9px !important;
        gap: 7px !important;
    }

    .sd-floating-action {
        height: 48px !important;
        padding-inline: 10px !important;
    }

    .sd-floating-label {
        font-size: 11.5px !important;
    }

    .sd-floating-icon {
        width: 19px !important;
        height: 19px !important;
        flex-basis: 19px !important;
    }

    .sd-floating-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 350px) {

    .sd-floating-label {
        font-size: 10.5px !important;
    }

    .sd-footer-v2-whatsapp strong {
        font-size: 12.5px;
    }

    .sd-footer-v2-legal {
        gap: 7px;
    }
}

/* ============================================================
   SOCIALIST DEEPAK — MOBILE NAV + FLOATING ACTION CORRECTION V1
   Authoritative mobile correction
   ============================================================ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       MOBILE NAVIGATION
       -------------------------------------------------------- */

    .navigation-wrap {
        position: relative;
        z-index: 1000;
    }

    .navigation-inner {
        position: relative;
    }

    .primary-navigation {
        position: absolute;
        top: calc(100% + 8px);
        left: 16px;
        right: 16px;

        width: auto;
        height: auto;
        min-height: 0;
        max-height: calc(100vh - 180px);

        margin: 0;
        padding: 10px;

        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;

        overflow-y: auto;
        overscroll-behavior: contain;

        background: #ffffff;
        border: 1px solid rgba(11, 58, 74, 0.10);
        border-radius: 18px;

        box-shadow:
            0 18px 50px rgba(11, 58, 74, 0.16),
            0 4px 12px rgba(11, 58, 74, 0.06);

        z-index: 1100;
    }

    .primary-navigation.is-open,
    .primary-navigation.active,
    .primary-navigation.open,
    .navigation-wrap.is-open .primary-navigation,
    .navigation-wrap.menu-open .primary-navigation,
    body.menu-open .primary-navigation {
        display: flex;
    }

    .primary-navigation a {
        width: 100%;
        min-height: 46px;

        display: flex;
        align-items: center;

        margin: 0;
        padding: 11px 14px;

        font-size: 16px;
        line-height: 1.35;
        font-weight: 700;

        border-radius: 11px;

        color: #123847;
        text-decoration: none;
    }

    .primary-navigation a:hover,
    .primary-navigation a:focus,
    .primary-navigation a.active {
        background: rgba(178, 20, 46, 0.07);
        color: #ad1730;
    }

    .primary-navigation > *,
    .primary-navigation li {
        margin: 0 !important;
        padding-top: 0;
        padding-bottom: 0;
        min-height: 0;
    }


    /* --------------------------------------------------------
       FLOATING CONTACT ACTIONS
       Keep actions compact and clear of bottom marquee
       -------------------------------------------------------- */

    .sd-floating-contact {
        position: fixed;

        right: 14px !important;
        left: auto !important;

        bottom: calc(
            var(--sd-bottom-marquee-height, 38px) + 14px
        ) !important;

        width: auto !important;
        max-width: none !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 10px !important;

        padding: 0 !important;
        margin: 0 !important;

        z-index: 1250;
        pointer-events: none;
    }

    .sd-floating-contact .sd-floating-action {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 52px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 50% !important;

        box-shadow:
            0 8px 22px rgba(11, 58, 74, 0.18) !important;

        pointer-events: auto;
        overflow: hidden;
    }

    .sd-floating-contact .sd-floating-action span,
    .sd-floating-contact .sd-floating-action strong,
    .sd-floating-contact .sd-floating-action .sd-floating-label,
    .sd-floating-contact .sd-floating-action .label,
    .sd-floating-contact .sd-floating-action .text {
        display: none !important;
    }

    .sd-floating-contact .sd-floating-action svg {
        width: 21px !important;
        height: 21px !important;
        margin: 0 !important;
        flex: 0 0 21px;
    }

    .sd-floating-call {
        background: #b5122d !important;
        color: #ffffff !important;
    }

    .sd-floating-whatsapp {
        background: #129447 !important;
        color: #ffffff !important;
    }


    /* --------------------------------------------------------
       BOTTOM MARQUEE
       -------------------------------------------------------- */

    .sd-bottom-marquee {
        z-index: 1200;
    }

}


/* Extra-small phones */
@media (max-width: 390px) {

    .primary-navigation {
        left: 12px;
        right: 12px;
        border-radius: 16px;
    }

    .primary-navigation a {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 15px;
    }

    .sd-floating-contact {
        right: 12px !important;
        gap: 8px !important;
    }

    .sd-floating-contact .sd-floating-action {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        flex-basis: 48px !important;
    }

}


/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {

    .primary-navigation,
    .sd-floating-contact,
    .sd-floating-action {
        transition: none !important;
    }

}

/* ============================================================
   SOCIALIST DEEPAK — MOBILE FLOATING ICON FINAL FIX V1
   ============================================================ */

@media (max-width: 767px) {

    .sd-floating-contact .sd-floating-action {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        flex: 0 0 50px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        border-radius: 50% !important;
    }

    /*
     * Restore icon elements hidden by the generic
     * mobile label-hiding rule.
     */
    .sd-floating-contact .sd-floating-action i,
    .sd-floating-contact .sd-floating-action svg {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 21px !important;
        height: 21px !important;

        margin: 0 !important;

        color: #ffffff !important;
        fill: none;
        flex: 0 0 21px !important;
    }

    .sd-floating-contact .sd-floating-action svg * {
        stroke: currentColor;
    }

    /*
     * Hide text only — never hide the icon itself.
     */
    .sd-floating-contact .sd-floating-action .sd-floating-action-text,
    .sd-floating-contact .sd-floating-action .sd-floating-label,
    .sd-floating-contact .sd-floating-action .label,
    .sd-floating-contact .sd-floating-action .text {
        display: none !important;
    }

}


@media (max-width: 390px) {

    .sd-floating-contact .sd-floating-action {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        flex-basis: 48px !important;
    }

}

/* ==========================================================
   SOCIALIST DEEPAK — MOBILE HEADER + FLOATING ICON FINAL V2
   Final authoritative correction
   ========================================================== */

@media (max-width: 767px) {

    /* ======================================================
       HEADER / BRAND
       Never crop Kumar Deepak identity on mobile
       ====================================================== */

    .navigation-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
    }

    .brand {
        display: flex !important;
        align-items: center !important;

        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;

        gap: 14px !important;
    }

    .brand-mark {
        flex: 0 0 auto !important;
    }

    .brand-copy {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        flex: 1 1 auto !important;
        min-width: 0 !important;

        overflow: visible !important;
    }

    .brand-copy strong {
        display: block !important;

        max-width: none !important;

        overflow: visible !important;
        text-overflow: clip !important;

        white-space: nowrap !important;

        font-size: 17px !important;
        line-height: 1.18 !important;
    }

    .brand-copy small {
        display: block !important;

        max-width: none !important;

        overflow: visible !important;
        text-overflow: clip !important;

        white-space: nowrap !important;

        margin-top: 3px !important;

        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }

    .menu-toggle {
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;

        margin-left: auto !important;
    }


    /* ======================================================
       FLOATING CONTACT
       Restore actual icon wrapper
       ====================================================== */

    .sd-floating-contact {
        right: 14px !important;
        left: auto !important;

        width: auto !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;

        gap: 9px !important;

        bottom: calc(
            var(--sd-bottom-marquee-height, 38px)
            + 13px
            + env(safe-area-inset-bottom, 0px)
        ) !important;
    }

    .sd-floating-contact .sd-floating-action {
        width: 50px !important;
        height: 50px !important;

        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;

        flex: 0 0 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        border-radius: 50% !important;

        overflow: visible !important;
    }

    /*
     * IMPORTANT:
     * Earlier generic rule hid every span.
     * The icon itself lives inside .sd-floating-icon,
     * therefore its wrapper must explicitly be restored.
     */

    .sd-floating-contact .sd-floating-icon {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;

        place-items: center !important;

        width: 22px !important;
        height: 22px !important;

        min-width: 22px !important;
        min-height: 22px !important;

        flex: 0 0 22px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .sd-floating-contact .sd-floating-icon svg {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 22px !important;
        height: 22px !important;

        min-width: 22px !important;
        min-height: 22px !important;

        margin: 0 !important;

        color: #ffffff !important;

        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
    }

    .sd-floating-contact .sd-floating-icon svg path,
    .sd-floating-contact .sd-floating-icon svg circle,
    .sd-floating-contact .sd-floating-icon svg rect,
    .sd-floating-contact .sd-floating-icon svg line,
    .sd-floating-contact .sd-floating-icon svg polyline {
        stroke: #ffffff !important;
    }

    /*
     * Hide ONLY text elements.
     * Never hide the icon wrapper.
     */

    .sd-floating-contact .sd-floating-label {
        display: none !important;
    }

    .sd-floating-contact .sd-floating-action-text {
        display: none !important;
    }

    .sd-floating-contact .label {
        display: none !important;
    }

    .sd-floating-contact .text {
        display: none !important;
    }

    .sd-floating-call {
        background:
            linear-gradient(
                145deg,
                #c41434 0%,
                #a70f29 100%
            ) !important;

        color: #ffffff !important;
    }

    .sd-floating-whatsapp {
        background:
            linear-gradient(
                145deg,
                #1ba357 0%,
                #138b48 100%
            ) !important;

        color: #ffffff !important;
    }

}


/* Small phones */

@media (max-width: 390px) {

    .navigation-inner {
        gap: 10px !important;
    }

    .brand {
        gap: 11px !important;
    }

    .brand-copy strong {
        font-size: 16px !important;
    }

    .brand-copy small {
        font-size: 10.5px !important;
    }

    .menu-toggle {
        flex-basis: 42px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .sd-floating-contact {
        right: 12px !important;
    }

    .sd-floating-contact .sd-floating-action {
        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;

        flex-basis: 48px !important;
    }

    .sd-floating-contact .sd-floating-icon,
    .sd-floating-contact .sd-floating-icon svg {
        width: 21px !important;
        height: 21px !important;

        min-width: 21px !important;
        min-height: 21px !important;
    }

}


/* Very small phones */

@media (max-width: 350px) {

    .brand-copy strong {
        font-size: 15px !important;
    }

    .brand-copy small {
        font-size: 10px !important;
    }

}

/* ==========================================================
   SOCIALIST DEEPAK — FLOATING CONTACT ICON FIX V3
   High-specificity correction for mobile
   ========================================================== */

@media (max-width: 767px) {

    /*
     * IMPORTANT:
     * An earlier rule hides every span inside .sd-floating-action.
     * The actual icon wrapper is also a span.
     *
     * This selector intentionally has greater specificity.
     */

    .sd-floating-contact
    .sd-floating-action
    > .sd-floating-icon {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;

        place-items: center !important;

        width: 22px !important;
        height: 22px !important;

        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;

        flex: 0 0 22px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        background: transparent !important;
        border: 0 !important;

        overflow: visible !important;
    }

    .sd-floating-contact
    .sd-floating-action
    > .sd-floating-icon
    > svg {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 22px !important;
        height: 22px !important;

        min-width: 22px !important;
        min-height: 22px !important;

        margin: 0 !important;

        color: #ffffff !important;

        fill: none !important;
        stroke: #ffffff !important;
        stroke-width: 1.8 !important;

        overflow: visible !important;
    }

    .sd-floating-contact
    .sd-floating-action
    > .sd-floating-icon
    > svg path,
    .sd-floating-contact
    .sd-floating-action
    > .sd-floating-icon
    > svg circle,
    .sd-floating-contact
    .sd-floating-action
    > .sd-floating-icon
    > svg rect,
    .sd-floating-contact
    .sd-floating-action
    > .sd-floating-icon
    > svg line,
    .sd-floating-contact
    .sd-floating-action
    > .sd-floating-icon
    > svg polyline {
        stroke: #ffffff !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /*
     * Hide labels specifically rather than hiding every span.
     */

    .sd-floating-contact
    .sd-floating-action
    > .sd-floating-label {
        display: none !important;
    }

    /*
     * Button geometry.
     */

    .sd-floating-contact
    .sd-floating-action {
        width: 50px !important;
        height: 50px !important;

        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        border-radius: 50% !important;
    }

    .sd-floating-contact
    .sd-floating-call {
        background: #b5122d !important;
        color: #ffffff !important;
    }

    .sd-floating-contact
    .sd-floating-whatsapp {
        background: #139447 !important;
        color: #ffffff !important;
    }
}


@media (max-width: 390px) {

    .sd-floating-contact
    .sd-floating-action {
        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

    .sd-floating-contact
    .sd-floating-action
    > .sd-floating-icon,

    .sd-floating-contact
    .sd-floating-action
    > .sd-floating-icon
    > svg {
        width: 21px !important;
        height: 21px !important;

        min-width: 21px !important;
        min-height: 21px !important;
        max-width: 21px !important;
        max-height: 21px !important;
    }

}