/*
 * ==========================================================
 * Shahidabad RENEW
 * FROZEN HOMEPAGE V4
 *
 * Community First + Caspian DNA
 * RTL / Vazirmatn Ready
 * ==========================================================
 */


body.page-id-8,
body.page-id-8 button,
body.page-id-8 input,
body.page-id-8 textarea,
body.page-id-8 select {
    font-family:
        "Shahidabad IR Sans",
        "Shahidabad Yekan",
        Tahoma,
        Arial,
        sans-serif !important;
}


/* ==========================================================
   GOLDEN HEADER LOGO
   ========================================================== */

body.page-id-8 .top-nav-logo {
    overflow: visible !important;
}

body.page-id-8 .top-nav-logo::after {
    content: none !important;
    display: none !important;
}

body.page-id-8
.top-nav-logo
img[src*="shahidabad-logo-master-from-psd.png"] {
    display: block !important;
    width: auto !important;
    height: 110px !important;
    max-height: none !important;
    max-width: none !important;
    margin: 0 auto !important;
}


/* ==========================================================
   ROOT
   ========================================================== */

.shahidabad-renew-home {
    --v4-green: #0d4d3c;
    --v4-green-deep: #08392f;
    --v4-green-soft: #1d6955;
    --v4-gold: #f5b927;
    --v4-cream: #f7f4ed;
    --v4-bg: #f4f7f6;
    --v4-text: #182a27;
    --v4-muted: #77827f;
    --v4-border: rgba(13,77,60,.10);
    --v4-shadow: 0 14px 40px rgba(12,47,39,.08);

    direction: rtl;
    text-align: right;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f7f6 100%
        );
    color: var(--v4-text);
    overflow: hidden;
}

.shahidabad-renew-home *,
.shahidabad-renew-home *::before,
.shahidabad-renew-home *::after {
    box-sizing: border-box;
}

.shahidabad-renew-home a {
    text-decoration: none;
}

.v4-shell {
    width: min(1240px, calc(100% - 36px));
    margin-inline: auto;
}

.v4-section {
    padding: 16px 0;
}

.v4-soft-bg {
    background: #eef4f1;
}


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

.v4-hero {
    min-height: 390px;
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(
            90deg,
            rgba(7,45,36,.50),
            rgba(7,45,36,.10)
        ),
        linear-gradient(
            135deg,
            #153f34,
            #527d65
        );
}

.v4-hero-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.v4-hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(5,37,30,.15),
            rgba(5,37,30,.48)
        );
}

.v4-hero-sun {
    position: absolute;
    top: 55px;
    left: 16%;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #efd38c;
    box-shadow:
        0 0 80px rgba(239,211,140,.34);
}

.v4-mountain {
    position: absolute;
    left: -10%;
    width: 120%;
    clip-path: polygon(
        0 100%,
        0 60%,
        12% 36%,
        24% 62%,
        38% 25%,
        52% 60%,
        66% 28%,
        81% 58%,
        100% 32%,
        100% 100%
    );
}

.v4-mountain-1 {
    bottom: 40px;
    height: 310px;
    background: #315d50;
}

.v4-mountain-2 {
    bottom: 0;
    height: 220px;
    background: #1e5143;
    opacity: .96;
}

.v4-village {
    position: absolute;
    bottom: 36px;
    left: 11%;
    right: 11%;
    display: flex;
    gap: 22px;
    align-items: flex-end;
    justify-content: center;
}

.v4-village span {
    width: 48px;
    height: 30px;
    border-radius: 3px 3px 0 0;
    background: rgba(244,231,189,.90);
    box-shadow:
        70px -8px 0 rgba(244,231,189,.75),
        145px 2px 0 rgba(244,231,189,.80),
        230px -15px 0 rgba(244,231,189,.76);
}

.v4-hero-content {
    min-height: 390px;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.v4-hero-copy {
    width: min(560px, 65%);
}

.v4-hero-copy h1 {
    margin: 0;
    font-size: clamp(52px, 6vw, 82px);
    line-height: 1;
    color: #fff;
}

.v4-hero-copy > strong {
    display: block;
    margin-top: 12px;
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 900;
}

.v4-hero-copy p {
    margin: 14px 0 0;
    max-width: 560px;
    font-size: 17px;
    color: rgba(255,255,255,.86);
}

.v4-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.v4-btn {
    min-height: 46px;
    padding: 11px 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.v4-btn-primary {
    color: #203027;
    background: var(--v4-gold);
    box-shadow:
        0 8px 22px rgba(245,185,39,.25);
}

.v4-btn-outline {
    border: 1px solid rgba(255,255,255,.55);
    color: #fff;
    background: rgba(5,44,35,.30);
}

.v4-btn-green {
    background: var(--v4-green);
    color: #fff;
}

.v4-location-chip {
    align-self: flex-end;
    margin-bottom: 30px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 12px;
    color: #fff;
    background: rgba(4,38,31,.68);
    backdrop-filter: blur(8px);
}

.v4-location-chip span {
    font-size: 12px;
    opacity: .75;
}


/* ==========================================================
   QUICK
   ========================================================== */

.v4-quick {
    position: relative;
    z-index: 5;
    margin-top: -18px;
}

.v4-quick-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    overflow: hidden;
    border: 1px solid var(--v4-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--v4-shadow);
}

.v4-quick-grid a {
    min-height: 94px;
    padding: 15px 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
    justify-content: center;
    color: #344641;
    border-left: 1px solid #edf1ef;
}

.v4-quick-grid a:last-child {
    border-left: 0;
}

.v4-quick-grid a:hover {
    color: var(--v4-green);
    background: #f4f8f6;
}

.v4-quick-grid a span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 22px;
    font-style: normal;
    color: var(--v4-green);
    background: #eef5f2;
}


/* ==========================================================
   CARDS
   ========================================================== */

.v4-card {
    border: 1px solid var(--v4-border);
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--v4-shadow);
}

.v4-card-head,
.v4-feature-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.v4-card-head {
    padding: 18px 20px 12px;
}

.v4-card-head h2,
.v4-feature-head h2 {
    margin: 0;
    color: var(--v4-green-deep);
    font-size: 21px;
    font-weight: 900;
}

.v4-card-head > a,
.v4-feature-head > a {
    color: #1878c8;
    font-size: 12px;
    font-weight: 700;
}


/* ==========================================================
   TOP DASHBOARD
   ========================================================== */

.v4-dashboard {
    padding-top: 24px;
}

.v4-dashboard-grid {
    display: grid;
    grid-template-columns:
        minmax(235px,.85fr)
        minmax(320px,1.15fr)
        minmax(390px,1.35fr);
    gap: 16px;
    align-items: stretch;
}

.v4-side-stack {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 16px;
}


/* martyr */

.v4-martyr-card {
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #fffaf0,
            #ffffff
        );
}

.v4-martyr-stage {
    padding: 8px 18px 0;
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    gap: 10px;
    align-items: center;
}

.v4-slider-arrow {
    width: 32px;
    height: 32px;
    border: 1px solid #e8ece9;
    border-radius: 50%;
    cursor: pointer;
    color: var(--v4-green);
    background: #fff;
    font-size: 23px;
}

.v4-portrait-placeholder {
    aspect-ratio: 4 / 5;
    max-height: 270px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: rgba(255,255,255,.78);
    background:
        radial-gradient(
            circle at 50% 28%,
            #d7c8ae 0 17%,
            transparent 18%
        ),
        radial-gradient(
            circle at 50% 77%,
            #36564d 0 30%,
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #dce4da,
            #718b72
        );
    overflow: hidden;
}

.v4-portrait-placeholder span {
    margin-top: auto;
    width: 100%;
    padding: 12px;
    text-align: center;
    background:
        linear-gradient(
            transparent,
            rgba(5,39,31,.80)
        );
}

.v4-martyr-info {
    padding: 13px 18px 0;
    text-align: center;
}

.v4-martyr-info strong,
.v4-martyr-info span {
    display: block;
}

.v4-martyr-info strong {
    font-size: 19px;
}

.v4-martyr-info span {
    margin-top: 3px;
    color: var(--v4-muted);
    font-size: 12px;
}

.v4-dots {
    padding: 13px 0 17px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.v4-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d5dcd9;
}

.v4-dots .active {
    background: var(--v4-green);
}


/* today */

.v4-today-card {
    overflow: hidden;
}

.v4-feed {
    padding: 0 14px 10px;
}

.v4-feed-item {
    min-height: 70px;
    padding: 10px 4px;
    display: grid;
    grid-template-columns: 62px 1fr auto;
    align-items: center;
    gap: 10px;
    color: var(--v4-text);
    border-bottom: 1px solid #eef1ef;
}

.v4-feed-item:last-child {
    border-bottom: 0;
}

.v4-feed-media {
    width: 62px;
    height: 48px;
    border-radius: 9px;
    background:
        linear-gradient(
            135deg,
            #426e5f,
            #d0c298
        );
}

.v4-feed-media.school {
    background: linear-gradient(135deg,#9ac5df,#f3c7a3);
}

.v4-feed-media.mosque {
    background: linear-gradient(135deg,#21564a,#d6bd7b);
}

.v4-feed-media.council {
    background: linear-gradient(135deg,#c4c5bd,#405d56);
}

.v4-feed-media.memorial {
    background: linear-gradient(135deg,#7e1422,#c8b38b);
}

.v4-feed-item b {
    display: block;
    font-size: 14px;
    line-height: 1.75;
}

.v4-feed-item small {
    display: block;
    margin-top: 2px;
    color: #a2aaa7;
}

.v4-feed-item em.tag {
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    font-style: normal;
}

.tag.official {
    color: #a56413;
    background: #fff3dc;
}

.tag.school {
    color: #2470b2;
    background: #e6f2ff;
}

.tag.mosque {
    color: #16653f;
    background: #e5f6eb;
}

.tag.council,
.tag.memorial {
    color: #b44343;
    background: #fde8e8;
}


/* weather */

.v4-weather {
    box-shadow: none;
}

.v4-weather-now {
    padding: 2px 20px 14px;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 13px;
    align-items: center;
}

.v4-sun-icon {
    font-size: 58px;
    line-height: 1;
    color: #ffb710;
}

.v4-weather-now strong {
    display: block;
    font-size: 35px;
}

.v4-weather-now span {
    display: block;
    color: #4a5a55;
}

.v4-weather-range {
    display: grid;
    gap: 4px;
    font-weight: 800;
}

.v4-weather-range span:first-child {
    color: #e14b46;
}

.v4-weather-range span:last-child {
    color: #2e7ccc;
}

.v4-weather-days {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid #edf1ef;
}

.v4-weather-days > span {
    padding: 9px 4px;
    display: grid;
    gap: 2px;
    text-align: center;
    border-left: 1px solid #edf1ef;
}

.v4-weather-days > span:last-child {
    border-left: 0;
}

.v4-weather-days small {
    color: #89938f;
}


/* events */

.v4-events {
    overflow: hidden;
    box-shadow: none;
}

.v4-events-layout {
    padding: 2px 18px 17px;
    display: grid;
    grid-template-columns: 1.35fr .8fr;
    gap: 18px;
}

.v4-timeline {
    position: relative;
    padding-right: 18px;
}

.v4-timeline::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    right: 5px;
    width: 2px;
    background: #b8d8cd;
}

.v4-timeline a {
    position: relative;
    min-height: 52px;
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 9px;
    align-items: center;
    color: var(--v4-text);
}

.v4-timeline a::before {
    content: "";
    position: absolute;
    right: -17px;
    width: 9px;
    height: 9px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--v4-green);
    box-shadow: 0 0 0 1px #9ac7b7;
}

.v4-timeline time {
    font-size: 12px;
    font-weight: 800;
}

.v4-timeline b {
    display: block;
    font-size: 13px;
}

.v4-timeline span {
    color: #929b98;
    font-size: 11px;
}

.v4-mini-calendar {
    padding: 12px;
    border-radius: 12px;
    background: #f7faf8;
}

.v4-mini-calendar > strong {
    display: block;
    text-align: center;
    margin-bottom: 8px;
}

.v4-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 3px;
    text-align: center;
}

.v4-calendar-grid span {
    color: #8c9692;
    font-size: 10px;
}

.v4-calendar-grid i {
    display: grid;
    place-items: center;
    height: 23px;
    border-radius: 6px;
    font-size: 10px;
    font-style: normal;
}

.v4-calendar-grid i:nth-of-type(7) {
    color: #fff;
    background: var(--v4-green);
}

.v4-mini-calendar > a {
    margin-top: 10px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: var(--v4-green);
    font-size: 11px;
    font-weight: 800;
}


/* ==========================================================
   MARKET
   ========================================================== */

.v4-market-help-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(300px,.75fr);
    gap: 16px;
    align-items: start;
}

.v4-market-card {
    padding: 18px;
}

.v4-feature-head {
    margin-bottom: 15px;
}

.v4-feature-head span {
    display: block;
    margin-bottom: 2px;
    color: #75827d;
    font-size: 11px;
}

.v4-feature-head h2 {
    font-size: 28px;
}

.v4-products {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
}

.v4-product {
    overflow: hidden;
    border: 1px solid #e7ece9;
    border-radius: 12px;
    color: var(--v4-text);
    background: #fff;
}

.v4-product-art {
    aspect-ratio: 1.35 / 1;
    display: grid;
    place-items: center;
    font-size: 45px;
    background: #eff4ef;
}

.v4-product-art.apple {
    background: linear-gradient(145deg,#e1f1d1,#d8896f);
}

.v4-product-art.honey {
    background: linear-gradient(145deg,#f7e7a6,#d69b25);
}

.v4-product-art.walnut {
    background: linear-gradient(145deg,#e8d9bc,#9b7651);
}

.v4-product-art.dairy {
    background: linear-gradient(145deg,#edf7f6,#bcd7ce);
}

.v4-product-art.craft {
    background: linear-gradient(145deg,#c97245,#455c51);
}

.v4-product b,
.v4-product small,
.v4-product strong {
    display: block;
    padding-inline: 10px;
}

.v4-product b {
    padding-top: 9px;
    font-size: 14px;
}

.v4-product small {
    margin-top: 2px;
    color: #87918d;
}

.v4-product strong {
    margin: 8px 10px 10px;
    padding: 6px 9px;
    border-radius: 7px;
    text-align: center;
    color: #24302c;
    background: var(--v4-gold);
    font-size: 11px;
}


/* ==========================================================
   FUNDS
   ========================================================== */

.v4-funds-stack {
    display: grid;
    gap: 16px;
}

.v4-fund-card {
    padding-bottom: 11px;
}

.v4-fund-item {
    margin: 0 14px;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid #edf1ef;
}

.v4-fund-item.compact {
    grid-template-columns: 1fr;
}

.v4-fund-item:last-child {
    border-bottom: 0;
}

.v4-fund-thumb {
    width: 82px;
    height: 78px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            #6f947c,
            #153e34
        );
    font-weight: 900;
}

.v4-fund-thumb.charity {
    color: #fff;
    font-size: 32px;
    background:
        linear-gradient(
            145deg,
            #ef8b80,
            #b7182d
        );
}

.v4-fund-body b {
    display: block;
    margin-bottom: 8px;
}

.v4-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e9e7;
}

.v4-progress span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #0f8d5a,
            #39b77e
        );
}

.v4-progress-meta {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.v4-progress-meta span {
    font-weight: 900;
}

.v4-progress-meta small {
    color: #89938f;
}

.v4-fund-body > a {
    margin-top: 8px;
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: var(--v4-green);
    font-size: 11px;
    font-weight: 800;
}


/* ==========================================================
   VIDEOS
   ========================================================== */

.v4-videos-card {
    padding: 18px;
}

.v4-video-layout {
    display: grid;
    grid-template-columns: 1.7fr .72fr;
    gap: 14px;
}

.v4-video-feature {
    color: var(--v4-text);
}

.v4-video-art {
    min-height: 250px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 65% 26%,
            rgba(238,211,139,.8),
            transparent 11%
        ),
        linear-gradient(
            155deg,
            #4f7664 0%,
            #1f5142 48%,
            #b9b278 49%,
            #d7c18f 63%,
            #396856 64%
        );
}

.v4-play {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border: 5px solid rgba(255,255,255,.76);
    border-radius: 50%;
    color: #fff;
    background: rgba(5,35,29,.50);
    font-size: 25px;
}

.v4-video-feature > strong {
    display: block;
    margin-top: 10px;
    font-size: 18px;
}

.v4-video-feature > small {
    display: block;
    margin-top: 3px;
    color: #87918d;
}

.v4-video-list {
    display: grid;
    gap: 9px;
}

.v4-video-list a {
    min-height: 73px;
    padding: 7px;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 9px;
    align-items: center;
    border: 1px solid #e8ecea;
    border-radius: 10px;
    color: var(--v4-text);
}

.v4-video-mini {
    height: 59px;
    border-radius: 8px;
    background:
        linear-gradient(
            145deg,
            #365d50,
            #b6a36c
        );
}

.v4-video-list b,
.v4-video-list small {
    display: block;
}

.v4-video-list small {
    margin-top: 4px;
    color: #858f8b;
}


/* ==========================================================
   BOTTOM MODULES
   ========================================================== */

.v4-bottom-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr .9fr;
    gap: 16px;
}

.v4-family-card,
.v4-school-card,
.v4-map-card {
    padding-bottom: 18px;
}

.v4-family-tree {
    margin: 5px 18px 12px;
    padding: 17px;
    border-radius: 13px;
    text-align: center;
    background:
        linear-gradient(
            180deg,
            #fbfcf8,
            #f1f5ef
        );
}

.root-person {
    width: 100px;
    margin: auto;
    padding: 8px;
    border-radius: 8px;
    color: #fff;
    background: var(--v4-green);
    font-weight: 800;
}

.family-branches {
    position: relative;
    margin-top: 23px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
}

.family-branches::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: #8bb8a6;
}

.family-branches > span {
    position: relative;
    padding: 8px 4px;
    border: 1px solid #dfe8e3;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
}

.family-branches > span::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    width: 1px;
    height: 13px;
    background: #8bb8a6;
}

.family-branches em {
    margin-right: 4px;
    padding: 2px 5px;
    border-radius: 5px;
    color: #14814f;
    background: #def4e7;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
}

.family-branches em.martyr {
    color: #bd3131;
    background: #fde2e2;
}

.v4-family-card p,
.v4-school-card p {
    margin: 0 18px 13px;
    color: #727e79;
    font-size: 13px;
}

.v4-family-card > .v4-btn,
.v4-school-card > .v4-btn {
    margin-inline: 18px;
}


/* school */

.v4-school-photo {
    margin: 3px 18px 13px;
    min-height: 160px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background:
        radial-gradient(
            circle at 35% 38%,
            #edd0ae 0 7%,
            transparent 8%
        ),
        radial-gradient(
            circle at 63% 38%,
            #e3b98f 0 7%,
            transparent 8%
        ),
        linear-gradient(
            145deg,
            #98c2d5,
            #f6d3a8
        );
}

.v4-school-photo span {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(13,77,60,.75);
    font-size: 30px;
}

.v4-school-card h3 {
    margin: 0 18px 4px;
}


/* map */

.v4-map-art {
    margin: 3px 18px 12px;
    min-height: 172px;
    position: relative;
    overflow: hidden;
    border-radius: 13px;
    background:
        linear-gradient(
            35deg,
            transparent 47%,
            rgba(255,255,255,.85) 48% 51%,
            transparent 52%
        ),
        linear-gradient(
            145deg,
            #dfe7dc,
            #b3c5ae
        );
}

.v4-map-road {
    position: absolute;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.85);
    transform-origin: right center;
}

.v4-map-road.r1 {
    width: 85%;
    right: -10%;
    top: 64%;
    transform: rotate(14deg);
}

.v4-map-road.r2 {
    width: 70%;
    left: -5%;
    top: 42%;
    transform: rotate(-19deg);
}

.v4-map-pin {
    position: absolute;
    top: 45%;
    left: 48%;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    color: #fff;
    background: var(--v4-green);
}

.v4-map-card .v4-map-art > strong {
    position: absolute;
    top: 65%;
    left: 44%;
    padding: 5px 8px;
    border-radius: 7px;
    color: var(--v4-green-deep);
    background: #fff;
}

.v4-map-filters {
    margin: 0 18px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 5px;
}

.v4-map-filters span {
    padding: 6px;
    border-radius: 7px;
    text-align: center;
    background: #edf4f1;
    font-size: 10px;
}


/* ==========================================================
   TAGS
   ========================================================== */

.v4-tag-section {
    padding: 10px 0 24px;
}

.v4-tags {
    padding: 0 0 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.v4-tags a {
    padding: 8px 13px;
    border-radius: 9px;
    color: #fff;
    background: #163d3d;
    font-size: 12px;
    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.08);
}

.v4-tags a:hover {
    background: var(--v4-green-soft);
}


/* ==========================================================
   INTERACTION
   ========================================================== */

.v4-product,
.v4-feed-item,
.v4-video-list a,
.v4-quick-grid a,
.v4-tags a,
.v4-btn {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.v4-product:hover,
.v4-video-list a:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 24px rgba(12,47,39,.10);
}

.v4-btn:hover {
    transform: translateY(-1px);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {

    .v4-quick-grid {
        grid-template-columns: repeat(4,1fr);
    }

    .v4-dashboard-grid {
        grid-template-columns: 1fr 1.2fr;
    }

    .v4-side-stack {
        grid-column: 1 / -1;
        grid-template-columns: .8fr 1.2fr;
        grid-template-rows: auto;
    }

    .v4-market-help-grid {
        grid-template-columns: 1fr;
    }

    .v4-funds-stack {
        grid-template-columns: 1fr 1fr;
    }

    .v4-products {
        grid-template-columns: repeat(5,minmax(150px,1fr));
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .v4-bottom-grid {
        grid-template-columns: 1fr 1fr;
    }

    .v4-map-card {
        grid-column: 1 / -1;
    }

}


@media (max-width: 800px) {

    body.page-id-8
    .top-nav-logo
    img[src*="shahidabad-logo-master-from-psd.png"] {
        height: 92px !important;
    }

    .v4-shell {
        width: min(100% - 22px,1240px);
    }

    .v4-hero {
        min-height: 330px;
    }

    .v4-hero-content {
        min-height: 330px;
    }

    .v4-hero-copy {
        width: 100%;
    }

    .v4-location-chip {
        display: none;
    }

    .v4-quick-grid {
        grid-template-columns: repeat(4,1fr);
    }

    .v4-quick-grid a {
        min-height: 80px;
    }

    .v4-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .v4-martyr-card {
        order: 3;
    }

    .v4-today-card {
        order: 1;
    }

    .v4-side-stack {
        order: 2;
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .v4-events-layout {
        grid-template-columns: 1fr;
    }

    .v4-funds-stack {
        grid-template-columns: 1fr;
    }

    .v4-video-layout {
        grid-template-columns: 1fr;
    }

    .v4-video-list {
        grid-template-columns: repeat(3,1fr);
    }

    .v4-video-list a {
        grid-template-columns: 1fr;
    }

    .v4-bottom-grid {
        grid-template-columns: 1fr;
    }

    .v4-map-card {
        grid-column: auto;
    }

}


@media (max-width: 560px) {

    body.page-id-8
    .top-nav-logo
    img[src*="shahidabad-logo-master-from-psd.png"] {
        height: 78px !important;
    }

    .v4-hero {
        min-height: 310px;
    }

    .v4-hero-content {
        min-height: 310px;
        align-items: flex-end;
        padding-bottom: 28px;
    }

    .v4-hero-copy h1 {
        font-size: 48px;
    }

    .v4-hero-copy > strong {
        font-size: 27px;
    }

    .v4-hero-copy p {
        font-size: 14px;
    }

    .v4-quick-grid {
        grid-template-columns: repeat(4,1fr);
    }

    .v4-quick-grid a {
        min-height: 72px;
        font-size: 11px;
    }

    .v4-quick-grid a span {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .v4-weather-days {
        grid-template-columns: repeat(4,1fr);
    }

    .v4-market-card {
        padding: 14px;
    }

    .v4-feature-head h2 {
        font-size: 23px;
    }

    .v4-products {
        grid-template-columns: repeat(2,minmax(140px,1fr));
        overflow: visible;
    }

    .v4-product:nth-child(5) {
        display: none;
    }

    .v4-video-list {
        grid-template-columns: 1fr;
    }

    .v4-feed-item {
        grid-template-columns: 54px 1fr;
    }

    .v4-feed-item em.tag {
        grid-column: 2;
        justify-self: start;
    }

    .v4-feed-media {
        width: 54px;
        height: 46px;
    }

    .v4-events-layout {
        padding-inline: 12px;
    }

    .v4-mini-calendar {
        display: none;
    }

    .v4-fund-item {
        grid-template-columns: 70px 1fr;
    }

    .v4-fund-thumb {
        width: 70px;
        height: 70px;
    }

    .v4-family-tree {
        padding-inline: 9px;
    }

}