@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

.bc-about-page,
.bc-about-page * {
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.bc-about-page {
    --blue: #00609e;
    --deep: #003f6b;
    --navy: #071326;
    --yellow: #fdb712;
    --soft: #f4f9fc;
    --line: #d9eaf4;
    --muted: #4a5b6c;
    width: 100%;
    background: #fff;
    color: var(--navy);
    overflow: hidden;
}

.bc-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}

/* BUTTONS */
.bc-actions,
.bc-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.bc-actions { flex-wrap: nowrap; }
.bc-cta-actions { flex-wrap: nowrap; }

.bc-btn,
.bc-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 16px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: .25s ease;
    white-space: nowrap;
}

.bc-btn-yellow,
.bc-card-btn {
    background: var(--yellow);
    color: var(--navy);
}

.bc-btn-light {
    background: #fff;
    color: var(--blue);
}

.bc-btn:hover,
.bc-card-btn:hover {
    transform: translateY(-2px);
}

/* HERO */
.bc-about-hero-wrap {
    padding: 0;
    background: #fff;
}

.bc-about-hero {
    position: relative;
    min-height: 440px;
    padding: 70px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    border-bottom: 5px solid var(--yellow);
}

.bc-about-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 25%, rgba(253,183,18,.15), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.12), transparent 25%);
}

.bc-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    margin: auto;
}

.bc-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 30px;
    padding: 16px 34px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.24);
    color: #fff;
    font-size: clamp(30px, 5vw, 60px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1;
    box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

.bc-label span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--yellow);
    flex: 0 0 auto;
}

/* HERO BUTTONS */
.bc-about-hero .bc-btn {
    min-width: 165px;
    min-height: 60px;
    padding: 0 32px;
    border-radius: 18px;
    font-size: 15.5px;
}

/* INTRO */
.bc-intro {
    padding: 65px 0;
    background: #fff;
}

.bc-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 26px;
}

.bc-blue-box,
.bc-text-box,
.bc-vm-card {
    border-radius: 20px;
    padding: 34px;
    border: 1px solid var(--line);
}

.bc-blue-box,
.bc-vm-card.dark {
    background: linear-gradient(135deg, #003f6b, #00609e 58%, #00a0b5);
    color: #fff;
    border-top: 5px solid var(--yellow);
}

.bc-blue-box h2,
.bc-text-box h2,
.bc-vm-card h2 {
    margin: 0 0 16px;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.12;
    font-weight: 700;
}

.bc-blue-box p,
.bc-vm-card.dark p {
    color: rgba(255,255,255,.92);
}

.bc-text-box {
    background: #f8fbfd;
}

.bc-text-box p,
.bc-vm-card p {
    margin: 0 0 18px;
    color: #20334c;
    font-size: 16px;
    line-height: 1.7;
}

.bc-text-box p:last-child {
    margin-bottom: 0;
}

/* VISION */
.bc-vm {
    padding: 65px 0;
    background: var(--soft);
}

.bc-vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.bc-vm-card {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bc-vm-card.light {
    background: #fff;
}

/* SHOWCASE */
.bc-about-showcase {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 34px 22px 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(253,183,18,.18), transparent 25%),
        radial-gradient(circle at 88% 34%, rgba(255,255,255,.16), transparent 26%),
        linear-gradient(135deg, #003f6b 0%, #005f9f 58%, #00a0b5 100%);
}

.bc-about-wrap {
    max-width: 1180px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 24px;
}

.bc-about-content {
    align-self: center;
    padding-bottom: 42px;
    position: relative;
    z-index: 2;
}

.bc-about-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.bc-about-tag:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--yellow);
}

.bc-about-content h2 {
    margin: 0;
    max-width: 560px;
    font-size: clamp(36px, 4.6vw, 58px);
    line-height: 1.08;
    font-weight: 800;
    color: #fff !important;
}

.bc-about-content h2 span {
    color: var(--yellow);
}

.bc-about-line {
    margin: 14px 0 0;
    max-width: 430px;
    color: rgba(255,255,255,.9);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
}

.bc-about-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 430px;
}

.bc-about-image:before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(253,183,18,.16), rgba(255,255,255,.10) 50%, transparent 72%);
}

.bc-about-image:after {
    content: "";
    position: absolute;
    left: 9%;
    right: 9%;
    bottom: 0;
    height: 6px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--yellow), #fff, #00a89f, #005f9f);
}

.bc-about-image img {
    position: relative;
    z-index: 2;
    height: 470px;
    width: auto;
    display: block;
    margin-bottom: -2px;
    filter: drop-shadow(0 24px 32px rgba(0,0,0,.23));
}

/* SERVICES */
.bc-services {
    padding: 65px 0;
    background: var(--soft);
}

.bc-section-title {
    max-width: 820px;
    margin: 0 auto 34px;
    text-align: center;
}

.bc-section-title h2 {
    margin: 0 0 12px;
    color: var(--navy);
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.12;
    font-weight: 700;
}

.bc-section-title p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.bc-services-slider {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 8px 2px 18px;
    -webkit-overflow-scrolling: touch;
}

.bc-service-card {
    flex: 0 0 calc(33.333% - 15px);
    min-width: 330px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(0,70,110,.06);
    scroll-snap-align: start;
}

.bc-service-img {
    min-height: 205px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.bc-service-img:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,19,38,.02), rgba(0,96,158,.20));
}

.bc-service-body {
    padding: 24px;
}

.bc-service-body span {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eef7fc;
    color: var(--blue);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 12px;
}

.bc-service-body h3 {
    margin: 0 0 10px;
    font-size: 21px;
    line-height: 1.22;
    font-weight: 700;
}

.bc-service-body p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.bc-card-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 14px;
}

/* VALUES */
.bc-values {
    padding: 70px 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(253,183,18,.16), transparent 24%),
        radial-gradient(circle at 88% 30%, rgba(255,255,255,.13), transparent 26%),
        linear-gradient(135deg, #003f6b 0%, #00609e 58%, #00a0b5 100%);
    color: #fff;
}

.bc-values .bc-section-title h2 {
    color: #fff !important;
}

.bc-values .bc-section-title p {
    color: rgba(255,255,255,.9) !important;
}

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

.bc-value-card {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    padding: 28px;
    min-height: 195px;
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
    backdrop-filter: blur(10px);
}

.bc-line {
    width: 46px;
    height: 5px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--yellow), #fff);
    margin-bottom: 18px;
}

.bc-value-card h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.bc-value-card p {
    margin: 0;
    color: rgba(255,255,255,.9);
    font-size: 15px;
    line-height: 1.6;
}

/* FAQ */
.bc-faq-section {
    padding: 65px 0;
    background: var(--soft);
}

.bc-faq-section .bc-wrap {
    max-width: 920px;
}

.bc-faq-grid {
    display: grid;
    gap: 16px;
}

.bc-faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,95,159,.05);
}

.bc-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
}

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

.bc-faq-item summary::after {
    content: "+";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    flex-shrink: 0;
}

.bc-faq-item[open] summary::after {
    content: "−";
    background: var(--blue);
    color: #fff;
}

.bc-faq-item p {
    margin: 0;
    padding: 0 28px 26px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

/* CTA */
.bc-cta {
    padding: 60px 0 35px;
    background: #fff;
}

.bc-cta-box {
    background: linear-gradient(135deg, #003f6b, #00609e 58%, #00a0b5);
    color: #fff;
    border-radius: 20px;
    padding: 46px 42px;
    text-align: center;
    border-top: 5px solid var(--yellow);
}

.bc-cta-box h2 {
    margin: 0 auto 16px;
    max-width: 820px;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.1;
    font-weight: 700;
}

.bc-cta-box p {
    margin: 0 auto 26px;
    max-width: 740px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,.92);
}

/* CTA BUTTONS */
.bc-cta .bc-cta-actions {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.bc-cta .bc-btn {
    min-width: 210px;
    min-height: 50px;
    padding: 0 26px;
}

/* RESPONSIVE */
@media(max-width:1050px) {
    .bc-intro-grid,
    .bc-vm-grid { grid-template-columns: 1fr; }
    .bc-values-grid { grid-template-columns: repeat(2, 1fr); }
    .bc-service-card {
        flex-basis: calc(50% - 12px);
        min-width: 310px;
    }
}

@media(max-width:900px) {
    .bc-about-wrap {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .bc-about-content h2 { font-size: 40px; }
    .bc-about-image { min-height: 350px; }
    .bc-about-image img { height: 380px; }
}

@media(max-width:720px) {
    .bc-wrap { padding: 0 16px; }
    .bc-about-hero-wrap {
        padding: 32px 12px 34px;
        background: #fff;
    }
    .bc-about-hero {
        min-height: 450px;
        padding: 42px 14px;
    }
    .bc-label {
        font-size: clamp(34px, 11vw, 48px);
        padding: 16px 24px;
        margin-bottom: 26px;
        gap: 12px;
    }
    .bc-label span {
        width: 13px;
        height: 13px;
    }
    .bc-about-hero .bc-actions {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 12px;
    }
    .bc-about-hero .bc-btn {
        min-width: 145px;
        min-height: 56px;
        padding: 0 18px;
        font-size: 14px;
    }
    .bc-intro,
    .bc-vm,
    .bc-services,
    .bc-values,
    .bc-faq-section {
        padding: 52px 0;
    }
    .bc-blue-box,
    .bc-text-box,
    .bc-vm-card,
    .bc-value-card {
        padding: 22px;
        border-radius: 16px;
    }
    .bc-values-grid { grid-template-columns: 1fr; }
    .bc-service-card {
        flex: 0 0 82%;
        min-width: 260px;
    }
    .bc-service-img { min-height: 170px; }
    .bc-service-body { padding: 20px; }
    .bc-faq-item summary {
        padding: 22px 20px;
        font-size: 16px;
    }
    .bc-faq-item p { padding: 0 20px 24px; }
    .bc-cta { padding: 52px 0 30px; }
    .bc-cta-box {
        padding: 24px 22px;
        border-radius: 16px;
    }
    .bc-cta .bc-cta-actions {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
    }
    .bc-cta .bc-btn {
        width: 100%;
        max-width: 270px;
        min-width: 230px;
        min-height: 50px;
    }
}

@media(max-width:640px) {
    .bc-about-showcase {
        padding: 44px 18px 0;
    }
    .bc-about-wrap {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: left;
    }
    .bc-about-content { padding-bottom: 8px; }
    .bc-about-tag {
        font-size: 10px;
        padding: 8px 13px;
        margin-bottom: 14px;
    }
    .bc-about-content h2 {
        font-size: 34px;
        line-height: 1.08;
        max-width: 360px;
    }
    .bc-about-line {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.55;
        max-width: 340px;
    }
    .bc-about-image {
        min-height: 310px;
        overflow: hidden;
        justify-content: center;
    }
    .bc-about-image:before {
        width: 230px;
        height: 230px;
        bottom: 25px;
    }
    .bc-about-image img {
        height: 330px;
        margin-left: 0;
    }
    .bc-about-image:after {
        left: 8%;
        right: 8%;
        height: 5px;
    }
}

@media(max-width:390px) {
    .bc-about-hero { min-height: 430px; }
    .bc-label {
        font-size: 34px;
        padding: 14px 20px;
    }
    .bc-about-hero .bc-actions { gap: 10px; }
    .bc-about-hero .bc-btn {
        min-width: 134px;
        min-height: 54px;
        padding: 0 13px;
        font-size: 13px;
    }
    .bc-about-content h2 { font-size: 30px; }
    .bc-about-line { font-size: 13px; }
    .bc-about-image { min-height: 285px; }
    .bc-about-image img { height: 305px; }
    .bc-service-card { flex-basis: 88%; }
}