/* ================================================
   skilledwebinarshr — ABOUT PAGE  |  Purple Brand
================================================ */

/* ===== VARIABLES ===== */
:root {
    --ab-primary:    #6e3482;
    --ab-dark:       #572766;
    --ab-medium:     #9b5bb5;
    --ab-light:      #f3eaf8;
    --ab-border:     #d4b3e8;
    --ab-bg:         #faf7fc;
    --dark:          #1e0d28;
    --text:          #4b5563;
    --muted:         #6b7280;
    --border:        #e0d0ea;
    --bg-light:      #faf7fc;
    --white:         #ffffff;
    --shadow-sm:     0 4px 20px rgba(110,52,130,.04);
    --shadow-md:     0 8px 30px rgba(110,52,130,.12);
    --shadow-lg:     0 20px 40px rgba(110,52,130,.15);
    --gradient-hero: linear-gradient(135deg,#f5eefa 0%,#ede0f5 52%,#e0ccf0 100%);
    --gradient-text: linear-gradient(90deg,#6e3482,#9b5bb5);
    --gradient-card: linear-gradient(135deg,#9b5bb5,#6e3482);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--white);
    color:var(--dark);
    line-height:1.5;
}

/* ===== CONTAINER ===== */
.dr-container {
    max-width:1280px;
    margin:0 auto;
    padding:0 32px;
}

/* ===== TYPOGRAPHY ===== */
.section-tag {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg,var(--ab-light),#ede0f5);
    color:var(--ab-dark);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:6px 16px;
    border-radius:40px;
    border:1px solid var(--ab-border);
    margin-bottom:20px;
}

.section-tag i { font-size:.85rem; color:var(--ab-primary); }

.section-tag.light {
    background:rgba(255,255,255,.15);
    color:#fff;
    border-color:rgba(255,255,255,.3);
}

.section-tag.light i { color:rgba(255,255,255,.85); }

.section-title {
    font-size:clamp(1.8rem,3vw,2.5rem);
    font-weight:800;
    color:var(--dark);
    margin-bottom:12px;
    line-height:1.2;
}

.gradient-text {
    background:var(--gradient-text);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.section-subtitle {
    font-size:1rem;
    color:var(--muted);
    max-width:560px;
    margin:0 auto;
    line-height:1.7;
}

.section-header {
    text-align:center;
    margin-bottom:56px;
}

/* ===== BUTTONS ===== */
.btn-primary {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--gradient-card);
    color:var(--white);
    font-size:.95rem;
    font-weight:700;
    padding:14px 32px;
    border-radius:60px;
    text-decoration:none;
    transition:all .3s cubic-bezier(.4,0,.2,1);
    box-shadow:0 4px 16px rgba(110,52,130,.28);
    border:none;
    cursor:pointer;
}

.btn-primary:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 28px rgba(110,52,130,.38);
    color:#fff;
}

.btn-primary-light {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--white);
    color:var(--ab-primary);
    font-size:.95rem;
    font-weight:700;
    padding:14px 32px;
    border-radius:60px;
    text-decoration:none;
    transition:all .3s ease;
    box-shadow:0 4px 16px rgba(0,0,0,.10);
}

.btn-primary-light:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 28px rgba(255,255,255,.3);
}

.btn-outline-light {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:transparent;
    color:var(--white);
    font-size:.95rem;
    font-weight:600;
    padding:14px 32px;
    border-radius:60px;
    text-decoration:none;
    border:2px solid rgba(255,255,255,.4);
    transition:all .3s ease;
}

.btn-outline-light:hover {
    background:rgba(255,255,255,.12);
    border-color:var(--white);
    color:#fff;
}

.btn-outline-white {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:transparent;
    color:var(--white);
    font-size:.95rem;
    font-weight:600;
    padding:14px 32px;
    border-radius:60px;
    text-decoration:none;
    border:2px solid rgba(255,255,255,.4);
    transition:all .3s ease;
}

.btn-outline-white:hover {
    background:rgba(255,255,255,.15);
    border-color:var(--white);
    color:#fff;
}

/* ===== HERO ===== */
.ab-hero {
    background:var(--gradient-hero);
    padding:80px 0 70px;
    position:relative;
    overflow:hidden;
}

.ab-hero-bg-shape {
    position:absolute;
    top:-30%;
    right:-10%;
    width:500px;
    height:500px;
    background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);
    border-radius:50%;
    pointer-events:none;
}

.ab-hero-bg-shape-2 {
    position:absolute;
    bottom:-20%;
    left:-5%;
    width:400px;
    height:400px;
    background:radial-gradient(circle,rgba(110,52,130,.15) 0%,transparent 70%);
    border-radius:50%;
    pointer-events:none;
}

.ab-hero-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    position:relative;
    z-index:2;
}

.ab-hero-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.65);
    color:var(--ab-dark);
    font-size:.75rem;
    font-weight:700;
    padding:8px 18px;
    border-radius:50px;
    border:1px solid rgba(110,52,130,.18);
    margin-bottom:24px;
}

.ab-hero-title {
    font-size:clamp(2rem,4vw,3.2rem);
    font-weight:800;
    line-height:1.2;
    margin-bottom:20px;
    color:var(--dark);
    letter-spacing:-.5px;
}

.ab-hero-desc {
    font-size:1rem;
    color:#5a4a68;
    line-height:1.7;
    margin-bottom:32px;
    max-width:480px;
}

.ab-hero-buttons { display:flex; gap:16px; flex-wrap:wrap; }

/* Hero outline button override */
.ab-hero .btn-outline-light {
    color:var(--dark) !important;
    border:1px solid var(--ab-primary) !important;
    background:rgba(255,255,255,.35);
}

.ab-hero .btn-outline-light i { color:var(--ab-primary) !important; }

.ab-hero .btn-outline-light:hover {
    background:var(--ab-primary) !important;
    color:#fff !important;
    border-color:var(--ab-primary) !important;
}

.ab-hero .btn-outline-light:hover i { color:#fff !important; }

/* Stats card */
.ab-stats-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(255,255,255,.60);
    backdrop-filter:blur(12px);
    border:1px solid rgba(110,52,130,.14);
    border-radius:20px;
    padding:24px 28px;
    margin-bottom:24px;
}

.ab-stat { text-align:center; flex:1; }

.ab-stat-number {
    display:block;
    font-size:1.6rem;
    font-weight:800;
    color:var(--dark);
    line-height:1.2;
    margin-bottom:4px;
}

.ab-stat-label {
    font-size:.7rem;
    color:#7a5a8a;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.ab-stat-divider {
    width:1px;
    height:40px;
    background:rgba(110,52,130,.18);
}

/* Feature grid */
.ab-feature-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.ab-feature-card {
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(8px);
    border:1px solid rgba(110,52,130,.12);
    border-radius:14px;
    padding:14px 16px;
    transition:all .3s ease;
}

.ab-feature-card:hover { background:rgba(255,255,255,.80); }

.ab-feature-icon {
    width:42px;
    height:42px;
    background:rgba(110,52,130,.25);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:#fff;
}

.ab-feature-icon.blue   { background:rgba(110,52,130,.35); }
.ab-feature-icon.purple { background:rgba(110,52,130,.45); }
.ab-feature-icon.teal   { background:rgba(110,52,130,.30); }

.ab-feature-card strong {
    display:block;
    font-size:.85rem;
    font-weight:700;
    color:var(--dark);
}

.ab-feature-card p { font-size:.7rem; color:var(--muted); margin:0; }

/* ===== WHO WE ARE ===== */
.ab-who {
    padding:80px 0;
    background:var(--bg-light);
}

.ab-who-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
}

.ab-who-content .section-text {
    font-size:.95rem;
    color:var(--text);
    line-height:1.7;
    margin-bottom:20px;
}

.ab-value-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.ab-value-card {
    background:var(--white);
    border:1px solid var(--border);
    border-radius:18px;
    padding:24px;
    transition:all .3s ease;
}

.ab-value-card:hover {
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
    border-color:var(--ab-border);
}

.ab-value-icon {
    width:48px;
    height:48px;
    background:var(--gradient-card);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:#fff;
    margin-bottom:16px;
}

.ab-value-icon.green  { background:linear-gradient(135deg,#7a4a9a,#6e3482); }
.ab-value-icon.purple { background:linear-gradient(135deg,#9b5bb5,#7a3a9a); }
.ab-value-icon.orange { background:linear-gradient(135deg,#8d4da2,#6e3482); }

.ab-value-card h6 {
    font-size:1rem;
    font-weight:700;
    color:var(--dark);
    margin-bottom:6px;
}

.ab-value-card p { font-size:.85rem; color:var(--muted); line-height:1.5; margin:0; }

/* ===== WHY CHOOSE US ===== */
.ab-why {
    padding:80px 0;
    background:var(--white);
}

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

.ab-why-card {
    background:var(--bg-light);
    border:1px solid var(--border);
    border-radius:20px;
    padding:32px 24px;
    transition:all .3s ease;
    text-align:center;
}

.ab-why-card:hover {
    box-shadow:var(--shadow-md);
    transform:translateY(-6px);
    background:var(--white);
}

.ab-why-icon {
    width:64px;
    height:64px;
    background:var(--ab-light);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    color:var(--ab-primary);
    margin:0 auto 20px;
    transition:all .3s ease;
}

.ab-why-card:hover .ab-why-icon {
    background:var(--gradient-card);
    color:#fff;
    box-shadow:0 8px 20px rgba(110,52,130,.28);
}

.ab-why-icon.green,
.ab-why-icon.purple,
.ab-why-icon.orange,
.ab-why-icon.red,
.ab-why-icon.teal { background:var(--ab-light); color:var(--ab-primary); }

.ab-why-card h5 {
    font-size:1rem;
    font-weight:700;
    color:var(--dark);
    margin-bottom:12px;
}

.ab-why-card p {
    font-size:.88rem;
    color:var(--muted);
    line-height:1.6;
    margin-bottom:16px;
}

.card-link {
    color:var(--ab-primary);
    text-decoration:none;
    font-size:.85rem;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:gap .3s ease;
}

.card-link:hover { gap:10px; color:var(--ab-medium); }

/* ===== SERVICES ===== */
.ab-services {
    padding:80px 0;
    background:var(--bg-light);
}

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

.ab-service-card {
    background:var(--white);
    border:1px solid var(--border);
    border-radius:20px;
    padding:28px;
    transition:all .3s ease;
}

.ab-service-card:hover {
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
    border-color:var(--ab-border);
}

.ab-service-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.ab-service-icon {
    width:56px;
    height:56px;
    background:var(--gradient-card);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    color:#fff;
}

.ab-service-icon.green  { background:linear-gradient(135deg,#7a4a9a,#6e3482); }
.ab-service-icon.purple { background:linear-gradient(135deg,#9b5bb5,#7a3a9a); }
.ab-service-icon.orange { background:linear-gradient(135deg,#8d4da2,#6e3482); }

.ab-service-badge {
    font-size:.7rem;
    font-weight:700;
    color:var(--ab-primary);
    background:var(--ab-light);
    padding:6px 14px;
    border-radius:50px;
    border:1px solid var(--ab-border);
}

.ab-service-badge.green,
.ab-service-badge.purple,
.ab-service-badge.orange { color:var(--ab-dark); background:var(--ab-light); border-color:var(--ab-border); }

.ab-service-card h5 {
    font-size:1.1rem;
    font-weight:700;
    color:var(--dark);
    margin-bottom:10px;
}

.ab-service-card > p {
    font-size:.88rem;
    color:var(--muted);
    line-height:1.6;
    margin-bottom:20px;
}

.ab-service-features {
    list-style:none;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.ab-service-features li {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.85rem;
    color:var(--text);
}

.ab-service-features li i { color:var(--ab-primary); font-size:14px; }

/* ===== IMPACT BANNER ===== */
.ab-impact {
    background:linear-gradient(135deg,#f5eefa 0%,#ede0f5 50%,#e0ccf0 100%) !important;
    padding:48px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.ab-impact-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0;
}

.ab-impact-item {
    text-align:center;
    padding:20px;
    border-right:1px solid rgba(110,52,130,.15);
}

.ab-impact-item:last-child { border-right:none; }

.ab-impact-item strong {
    display:block;
    font-size:2rem;
    font-weight:800;
    color:var(--ab-primary) !important;
    line-height:1.2;
    margin-bottom:6px;
}

.ab-impact-item span {
    font-size:.75rem;
    color:#5a4a68 !important;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* ===== TESTIMONIALS ===== */
.ab-testimonials {
    padding:80px 0;
    background:var(--white);
}

.ab-testimonial-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.ab-testimonial-card {
    background:var(--bg-light);
    border:1px solid var(--border);
    border-radius:20px;
    padding:32px;
    transition:all .3s ease;
}

.ab-testimonial-card:hover {
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
}

.ab-testimonial-card.featured {
    border-color:var(--ab-primary);
    background:linear-gradient(145deg,#faf7fc,var(--ab-light));
    transform:translateY(-6px);
}

.ab-quote-icon {
    font-size:2rem;
    color:var(--ab-border);
    margin-bottom:12px;
}

.ab-stars {
    color:var(--ab-primary);
    font-size:.9rem;
    letter-spacing:3px;
    margin-bottom:16px;
}

.ab-testimonial-card p {
    font-size:.9rem;
    color:var(--text);
    line-height:1.7;
    font-style:italic;
    margin-bottom:24px;
}

.ab-author {
    display:flex;
    align-items:center;
    gap:14px;
    padding-top:16px;
    border-top:1px solid var(--border);
}

.ab-avatar {
    width:48px;
    height:48px;
    background:var(--gradient-card);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:1rem;
    color:#fff;
}

.ab-author strong {
    display:block;
    font-size:.9rem;
    color:var(--dark);
    margin-bottom:2px;
}

.ab-author span { font-size:.75rem; color:var(--muted); }

/* ===== FAQ ===== */
.ab-faq {
    padding:80px 0;
    background:var(--bg-light);
}

.ab-faq-grid {
    max-width:800px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.ab-faq-item {
    background:var(--white);
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    transition:all .3s ease;
}

.ab-faq-item:hover { box-shadow:var(--shadow-sm); }

.ab-faq-item[open] {
    border-color:var(--ab-primary);
    background:linear-gradient(145deg,#ffffff,var(--ab-light));
}

.ab-faq-item summary {
    padding:20px 24px;
    font-size:1rem;
    font-weight:600;
    color:var(--dark);
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}

.ab-faq-item summary::-webkit-details-marker { display:none; }

.ab-faq-item summary span {
    display:flex;
    align-items:center;
    gap:12px;
}

.ab-faq-item summary span i { color:var(--ab-primary); font-size:1.1rem; }

.faq-icon {
    font-size:1rem;
    color:var(--ab-primary);
    transition:transform .3s ease;
}

.ab-faq-item[open] .faq-icon { transform:rotate(45deg); }

.ab-faq-item[open] summary {
    border-bottom:1px solid var(--border);
    color:var(--ab-primary);
}

.ab-faq-item p {
    padding:20px 24px;
    font-size:.9rem;
    color:var(--text);
    line-height:1.7;
    margin:0;
    background:var(--white);
}

/* ===== CTA SECTION ===== */
.ab-cta {
    background:var(--gradient-hero);
    padding:80px 0;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.ab-cta-content { position:relative; z-index:2; }

.ab-cta .section-tag.light {
    background:rgba(255,255,255,.65);
    color:var(--ab-dark);
    border:1px solid rgba(110,52,130,.22);
}

.ab-cta .section-tag.light i { color:var(--ab-primary); }

.ab-cta-content h2 {
    font-size:clamp(1.8rem,3vw,2.8rem);
    font-weight:800;
    color:var(--dark);
    margin-bottom:16px;
    line-height:1.3;
}

.ab-cta-content p {
    font-size:1rem;
    color:#5a4a68;
    max-width:540px;
    margin:0 auto 32px;
    line-height:1.7;
}

.ab-cta-buttons {
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:32px;
}

.ab-cta .btn-primary-light {
    background:#fff;
    color:var(--ab-primary);
    border:1px solid rgba(110,52,130,.15);
    box-shadow:0 10px 25px rgba(110,52,130,.12);
}

.ab-cta .btn-primary-light:hover {
    background:var(--ab-primary);
    color:#fff;
    border-color:var(--ab-primary);
}

.ab-cta .btn-outline-white {
    background:rgba(255,255,255,.30);
    color:var(--dark);
    border:1px solid rgba(110,52,130,.40);
}

.ab-cta .btn-outline-white:hover {
    background:#fff;
    color:var(--ab-primary);
    border-color:var(--ab-primary);
}

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

.ab-cta-trust span {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.85rem;
    color:#5a4a68;
    font-weight:600;
}

.ab-cta-trust span i { color:var(--ab-primary); }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
    .ab-why-grid { grid-template-columns:repeat(2,1fr); }
    .ab-impact-grid { grid-template-columns:repeat(3,1fr); }
    .ab-impact-item { border-bottom:1px solid rgba(110,52,130,.12); }
    .ab-impact-item:nth-child(3) { border-right:none; }
}

@media (max-width:768px) {
    .dr-container { padding:0 24px; }
    .ab-hero-grid,
    .ab-who-grid { grid-template-columns:1fr; gap:40px; }
    .ab-services-grid,
    .ab-testimonial-grid,
    .ab-why-grid { grid-template-columns:1fr; }
    .ab-impact-grid { grid-template-columns:repeat(2,1fr); }
    .ab-impact-item:nth-child(2n) { border-right:none; }
    .ab-stats-card { flex-wrap:wrap; gap:16px; }
    .ab-stat-divider { display:none; }
}

@media (max-width:640px) {
    .ab-hero-buttons,
    .ab-cta-buttons { flex-direction:column; align-items:center; }
    .ab-hero-buttons .btn-primary,
    .ab-hero-buttons .btn-outline-light,
    .ab-cta-buttons .btn-primary-light,
    .ab-cta-buttons .btn-outline-white { width:100%; justify-content:center; }
    .ab-feature-grid,
    .ab-value-grid { grid-template-columns:1fr; }
    .ab-impact-grid { grid-template-columns:repeat(2,1fr); }
}