/* ══════════════════════════════════════════
   AB — About Page (all classes "ab-" prefixed)
══════════════════════════════════════════ */

/* ── HERO ── */
.ab-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 120px 5% 80px;
    background: linear-gradient(160deg, #f2fae3 0%, #ffffff 40%, #e3f7fb 100%);
}

.ab-hero-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(107, 163, 42, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(107, 163, 42, 0.07) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 100%);
}

.ab-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    animation: abOrbDrift 12s ease-in-out infinite;
}

@keyframes abOrbDrift {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(20px, -20px) scale(1.1);
    }
}

.ab-orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #9bd86a, transparent 72%);
    top: 5%;
    left: 2%;
    animation-delay: 0s;
}

.ab-orb-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #5fd4f0, transparent 72%);
    bottom: 10%;
    right: 4%;
    animation-delay: 3s;
}

.ab-hero-content {
    position: relative;
    z-index: 4;
    max-width: 700px;
}

.ab-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 50px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, #eaf7d8, #fff, #dff3f8);
    border: 1px solid #c8dda8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4e7a1a;
    box-shadow: 0 6px 20px rgba(107, 163, 42, 0.15);
}

.ab-label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6ba32a;
    animation: abDotPulse 2s ease infinite;
    flex-shrink: 0;
}

@keyframes abDotPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.6);
    }
}

.ab-hero-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(36px, 5.5vw, 64px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #15230a;
    margin-bottom: 20px;
}

.ab-shine-text {
    background: linear-gradient(100deg, #4e7a1a, #1e6475, #8bc34a, #2a8fa8, #4e7a1a);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: abShineFlow 6s ease-in-out infinite;
}

@keyframes abShineFlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.ab-hero-desc {
    font-size: 17px;
    color: #5a7040;
    line-height: 1.72;
    max-width: 560px;
    margin: 0 auto;
}

/* ── GLOBE ── */
.ab-globe-wrap {
    position: relative;
    z-index: 3;
    margin-top: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 480px;
    height: 480px;
}

.ab-globe-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(107, 163, 42, 0.25);
    transform: translate(-50%, -50%);
    animation: abRingSpin linear infinite;
}

.ab-ring-outer {
    width: 490px;
    height: 490px;
    animation-duration: 32s;
    border-color: rgba(107, 163, 42, 0.18);
}

.ab-ring-mid {
    width: 400px;
    height: 400px;
    animation-duration: 22s;
    animation-direction: reverse;
    border-color: rgba(59, 184, 216, 0.22);
}

.ab-ring-inner {
    width: 320px;
    height: 320px;
    animation-duration: 16s;
    border-color: rgba(107, 163, 42, 0.3);
}

@keyframes abRingSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.ab-globe-canvas {
    position: relative;
    z-index: 3;
    border-radius: 50%;
    box-shadow: 0 0 80px rgba(107, 163, 42, 0.3), 0 0 40px rgba(59, 184, 216, 0.2), 0 30px 60px rgba(0, 0, 0, 0.12);
}

.ab-globe-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 195, 74, 0.35), rgba(59, 184, 216, 0.15) 55%, transparent 75%);
    filter: blur(30px);
    z-index: 2;
    animation: abGlowPulse 4s ease-in-out infinite;
}

@keyframes abGlowPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

/* Location pins */
.ab-pin {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 5px;
    animation: abPinBounce 3s ease-in-out infinite;
}

.ab-pin-1 {
    top: 15%;
    left: 42%;
    animation-delay: 0s;
}

.ab-pin-2 {
    top: 35%;
    right: 10%;
    animation-delay: 0.8s;
}

.ab-pin-3 {
    top: 20%;
    left: 18%;
    animation-delay: 1.4s;
}

.ab-pin-4 {
    bottom: 22%;
    right: 18%;
    animation-delay: 2s;
}

@keyframes abPinBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.ab-pin-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6ba32a, #1e6475);
    box-shadow: 0 0 10px rgba(107, 163, 42, 0.7);
    flex-shrink: 0;
}

.ab-pin-label {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: rgba(30, 100, 117, 0.85);
    backdrop-filter: blur(6px);
    padding: 3px 8px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ── STATS ── */
.ab-stats-section {
    padding: 72px 0;
    background: linear-gradient(135deg, #6ba32a 0%, #1e6475 50%, #2a8fa8 100%);
    position: relative;
    overflow: hidden;
}

.ab-stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1), transparent 50%), radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.08), transparent 50%);
}

.ab-stats-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.ab-stat-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 36px 24px;
    text-align: center;
    transition: background 0.3s;
    cursor: default;
}

.ab-stat-card:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ab-stat-ico {
    font-size: 28px;
    margin-bottom: 10px;
}

.ab-stat-num {
    font-family: 'Sora', sans-serif;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 8px;
    color: #fff;
}

.ab-stat-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}


/* ===================================
   ABOUT STATS RESPONSIVE
=================================== */

.ab-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

/* Large Laptop */
@media (max-width:1200px){

    .ab-stats-grid{
        grid-template-columns:repeat(2,1fr);
        gap:22px;
    }

}

/* Tablet */
@media (max-width:992px){

    .ab-stats-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .ab-stat-card{
        padding:28px 20px;
    }

}

/* Mobile */
@media (max-width:768px){

    .ab-stats-grid{
        grid-template-columns:1fr !important;
        gap:18px;
    }

    .ab-stat-card{
        width:100%;
        padding:24px 18px;
        text-align:center;
    }

    .ab-stat-ico{
        font-size:34px;
        margin-bottom:14px;
    }

    .ab-stat-num{
        font-size:36px;
        line-height:1.2;
    }

    .ab-stat-lbl{
        font-size:15px;
    }

}

/* Small Mobile */
@media (max-width:480px){

    .ab-stats-section{
        padding:50px 0;
    }

    .ab-stat-card{
        padding:22px 16px;
        border-radius:18px;
    }

    .ab-stat-num{
        font-size:32px;
    }

    .ab-stat-lbl{
        font-size:14px;
    }

}



/* ── MISSION + VISION + ATISHAY ── */
.ab-mvs-section {
    padding: 110px 0;
    background: linear-gradient(180deg, #ffffff, #f0f7e6, #ffffff);
}

.ab-mvs-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.ab-mv-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ab-mv-card {
    background: #fff;
    border-radius: 22px;
    padding: 30px;
    border: 1.5px solid #dde8cc;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ab-mv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 56px rgba(107, 163, 42, 0.14);
    border-color: #c8dda8;
}

.ab-mv-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.ab-mv-card-top h3 {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #15230a;
    letter-spacing: -0.02em;
}

.ab-mv-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.ab-icon-green {
    background: linear-gradient(135deg, #e8f5d0, #d4edaa);
    border: 1px solid #c8dda8;
}

.ab-icon-teal {
    background: linear-gradient(135deg, #e0f4f9, #b3e5f0);
    border: 1px solid rgba(59, 184, 216, 0.35);
}

.ab-mv-card p {
    font-size: 14.5px;
    color: #5a7040;
    line-height: 1.72;
}

.ab-mv-bar {
    height: 3px;
    border-radius: 50px;
    margin-top: 20px;
}

.ab-bar-green {
    background: linear-gradient(90deg, #6ba32a, #8bc34a);
}

.ab-bar-teal {
    background: linear-gradient(90deg, #1e6475, #3bb8d8);
}

/* Atishay card */
.ab-atishay-card {
    background: linear-gradient(160deg, #0f1e0a, #0a1608);
    border-radius: 26px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25);
}

.ab-atishay-bg-deco {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 195, 74, 0.25), rgba(59, 184, 216, 0.1) 55%, transparent 75%);
    filter: blur(30px);
    pointer-events: none;
}

.ab-atishay-card .section-label {
    background: rgba(232, 245, 208, 0.15);
    border-color: rgba(200, 221, 168, 0.3);
    color: #a3cf6a;
}

.ab-atishay-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 12px 0 18px;
    line-height: 1.12;
}

.ab-atishay-desc {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.72;
    margin-bottom: 28px;
}

.ab-badges-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.ab-badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    transition: all 0.25s;
    cursor: default;
}

.ab-badge-item:hover {
    transform: translateY(-2px);
}

.ab-badge-green {
    background: rgba(107, 163, 42, 0.2);
    border: 1px solid rgba(139, 195, 74, 0.3);
}

.ab-badge-teal {
    background: rgba(30, 100, 117, 0.25);
    border: 1px solid rgba(59, 184, 216, 0.3);
}

.ab-badge-orange {
    background: rgba(249, 115, 22, 0.18);
    border: 1px solid rgba(249, 115, 22, 0.35);
}

.ab-badge-purple {
    background: rgba(124, 58, 237, 0.18);
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.ab-badge-icon {
    font-size: 17px;
}

.ab-atishay-tagline {
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(139, 195, 74, 0.12);
    border: 1px solid rgba(139, 195, 74, 0.25);
    font-size: 14px;
    font-weight: 700;
    color: #a3cf6a;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── VALUES ── */
.ab-values-section {
    padding: 110px 0;
    background: linear-gradient(180deg, #f5f7f2, #ffffff);
}

.ab-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ab-val-card {
    border-radius: 22px;
    padding: 30px 24px;
    position: relative;
    overflow: hidden;
    border: 1.5px solid transparent;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: default;
}

.ab-val-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
}

.ab-val-1 {
    background: linear-gradient(155deg, #f0f9e2, #fff);
    border-color: #d9ecbb;
}

.ab-val-2 {
    background: linear-gradient(155deg, #e3f5f9, #fff);
    border-color: #b9e3ed;
}

.ab-val-3 {
    background: linear-gradient(155deg, #fff1d6, #fff);
    border-color: #fdd9ad;
}

.ab-val-4 {
    background: linear-gradient(155deg, #ede3ff, #fff);
    border-color: #d8c4f7;
}

.ab-val-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s ease;
}

.ab-val-card:hover .ab-val-icon {
    transform: scale(1.12) rotate(-6deg);
}

.ab-val-1 .ab-val-icon {
    background: linear-gradient(135deg, #6ba32a, #4e7a1a);
}

.ab-val-2 .ab-val-icon {
    background: linear-gradient(135deg, #1e6475, #2a8fa8);
}

.ab-val-3 .ab-val-icon {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.ab-val-4 .ab-val-icon {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
}

.ab-val-card h4 {
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #15230a;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.ab-val-card p {
    font-size: 13.5px;
    color: #5a7040;
    line-height: 1.65;
}

/* ── CTA STRIP ── */
.ab-cta-strip {
    padding: 100px 5%;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #e8f5d0 0%, #e0f4f9 50%, #e8f5d0 100%);
}

.ab-cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 80% at 20% 50%, rgba(107, 163, 42, 0.2), transparent), radial-gradient(ellipse 50% 80% at 80% 50%, rgba(30, 100, 117, 0.15), transparent);
}

.ab-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.ab-cta-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(30px, 4.5vw, 50px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #15230a;
    margin-bottom: 16px;
}

.ab-cta-desc {
    font-size: 16px;
    color: #5a7040;
    margin-bottom: 34px;
}

.ab-cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.ab-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 50px;
    background: linear-gradient(135deg, #8bc34a, #6ba32a 50%, #2a8fa8);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(107, 163, 42, 0.4);
    transition: all 0.25s ease;
}

.ab-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(107, 163, 42, 0.5);
}

.ab-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 14px 26px;
    border-radius: 50px;
    border: 2px solid #c8dda8;
    background: rgba(255, 255, 255, 0.85);
    color: #2d4a18;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.ab-btn-outline:hover {
    background: #fff;
    border-color: #6ba32a;
    color: #4e7a1a;
    transform: translateY(-3px);
}

/* ── RESPONSIVE ── */
@media(max-width:1000px) {
    .ab-mvs-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    .ab-globe-wrap {
        width: 360px;
        height: 360px;
    }

    .ab-globe-canvas {
        width: 360px !important;
        height: 360px !important;
    }

    .ab-ring-outer {
        width: 370px;
        height: 370px;
    }

    .ab-ring-mid {
        width: 300px;
        height: 300px;
    }

    .ab-ring-inner {
        width: 240px;
        height: 240px;
    }
}

@media(max-width:700px) {
    .ab-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .ab-badges-grid {
        grid-template-columns: 1fr;
    }

    .ab-globe-wrap {
        width: 280px;
        height: 280px;
    }

    .ab-globe-canvas {
        width: 280px !important;
        height: 280px !important;
    }

    .ab-ring-outer {
        width: 290px;
        height: 290px;
    }

    .ab-ring-mid {
        width: 230px;
        height: 230px;
    }

    .ab-ring-inner {
        width: 180px;
        height: 180px;
    }

    .ab-cta-btns {
        flex-direction: column;
        align-items: center;
    }

    .ab-pin-2,
    .ab-pin-4 {
        display: none;
    }
}