/*---------------------------------------------
** About page – professional layer
** Loaded only on front/about.blade.php, after portfolios-hero.css and
** BEFORE style.css (theme @yield('styles') slot) — hence `html` prefixes
** where existing .ab-* rules are overridden.
** --abp-accent = theme base colour, --abp-bg = theme breadcrumb image.
---------------------------------------------*/
:root { --abp-accent: #2b5797; --abp-ink: #0a3041; --abp-text: #5b6b7c; --abp-line: #e8edf2; --abp-soft: #f5f8fb; }

/* ---- section rhythm (alternate soft / white backgrounds) ---- */
html .abp-services { background: #fff; }
html .abp-work { background: var(--abp-soft); }
html .ab-team { background: #fff; }
html .ab-testimonials { background: var(--abp-soft); }

/* ---- services ---- */
.abp-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.abp-service {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 26px 24px;
    overflow: hidden;
    color: inherit;
    background: #fff;
    border: 1px solid var(--abp-line);
    border-radius: 20px;
    transition: transform .35s, box-shadow .35s, border-color .35s;
}
.abp-service::before {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    content: "";
    background: var(--abp-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s;
}
.abp-service:hover {
    color: inherit;
    border-color: transparent;
    box-shadow: 0 26px 50px -28px rgba(10, 48, 65, .45);
    transform: translateY(-6px);
}
.abp-service:hover::before { transform: scaleX(1); }
.abp-service-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    font-size: 22px;
    color: var(--abp-accent);
    background: color-mix(in srgb, var(--abp-accent) 10%, #fff);
    border-radius: 16px;
    transition: background .35s, color .35s, transform .35s;
}
.abp-service:hover .abp-service-icon { color: #fff; background: var(--abp-accent); transform: rotate(-6deg); }
.abp-service h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--abp-ink); }
.abp-service p { flex: 1; margin: 0 0 22px; font-size: 14px; line-height: 1.7; color: var(--abp-text); }
.abp-service-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--abp-ink);
    border-top: 1px dashed var(--abp-line);
}
.abp-service-foot i { color: var(--abp-accent); transition: transform .3s; }
.abp-service:hover .abp-service-foot i { transform: translateX(4px); }

/* ---- why choose us (dark band, same background as the page hero) ---- */
.abp-why {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(rgba(10, 48, 65, .6), rgba(10, 48, 65, .6)), var(--abp-bg, none) center / cover, var(--abp-ink);
}
.abp-why::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image: radial-gradient(rgba(255, 255, 255, .2) 1.2px, transparent 1.2px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 65%);
    mask-image: linear-gradient(to left, #000 10%, transparent 65%);
    pointer-events: none;
}
.abp-why .container { position: relative; }
html .abp-eyebrow-light { color: #9fd3ff; }
html .abp-eyebrow-light::before { background: #9fd3ff; }
.abp-why-title { margin: 14px 0 18px; font-size: 34px; font-weight: 700; line-height: 1.25; color: #fff; }
.abp-why-lead { margin: 0 0 30px; font-size: 15.5px; line-height: 1.8; color: rgba(255, 255, 255, .75); }
.abp-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-left: 30px; }
.abp-why-item {
    padding: 26px 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 18px;
    backdrop-filter: blur(4px);
    transition: background .3s, transform .3s, border-color .3s;
}
.abp-why-item:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .25); transform: translateY(-4px); }
.abp-why-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 18px;
    color: #fff;
    background: var(--abp-accent);
    border-radius: 13px;
    box-shadow: 0 10px 22px -10px var(--abp-accent);
}
.abp-why-item h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #fff; }
.abp-why-item p { margin: 0; font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .7); }

/* ---- process as a connected timeline ---- */
html .abp-timeline .row { position: relative; }
@media (min-width: 992px) {
    html .abp-timeline .row::before {
        position: absolute;
        top: 64px;
        left: 15%;
        right: 15%;
        height: 2px;
        content: "";
        background: repeating-linear-gradient(90deg, var(--abp-accent) 0 8px, transparent 8px 16px);
        opacity: .35;
    }
}
html .abp-timeline .ab-step { text-align: center; }
html .abp-timeline .ab-step-top { position: relative; flex-direction: column; justify-content: center; gap: 12px; }
html .abp-timeline .ab-step-icon {
    width: 64px;
    height: 64px;
    font-size: 22px;
    box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--abp-line), 0 14px 28px -12px var(--abp-accent);
}
html .abp-timeline .ab-step-no {
    padding: 4px 12px;
    color: var(--abp-accent);
    background: color-mix(in srgb, var(--abp-accent) 9%, #fff);
    border-radius: 999px;
}

/* ---- partners: soft grayscale that lights up on hover ---- */
html .ab-partner img { filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
html .ab-partner:hover img { filter: none; opacity: 1; }

/* ---- responsive ---- */
@media (max-width: 1199px) {
    .abp-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abp-why-grid { margin-left: 0; }
}
@media (max-width: 991px) {
    .abp-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
    .abp-why { padding: 80px 0; }
}
@media (max-width: 575px) {
    .abp-services-grid, .abp-why-grid { grid-template-columns: 1fr; }
    .abp-why-title { font-size: 27px; }
}

/* ---- RTL ---- */
[dir="rtl"] .abp-why-grid { margin-left: 0; margin-right: 30px; }
[dir="rtl"] .abp-service::before { transform-origin: right; }
[dir="rtl"] .abp-service:hover .abp-service-foot i { transform: translateX(-4px) scaleX(-1); }

/* =====================================================================
** v2 — ideas adapted from the reference: image service cards, emblem
** with radiating rings, team watermark, featured testimonial carousel
** ===================================================================== */

/* ---- service cards with project imagery ---- */
.abp-service.has-img {
    min-height: 330px;
    justify-content: flex-end;
    color: #fff;
    background: #0a3041;
    border: 0;
    isolation: isolate;
}
.abp-service-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.abp-service.has-img::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(180deg, rgba(10, 48, 65, .15) 0%, rgba(10, 48, 65, .55) 40%, rgba(10, 48, 65, .96) 100%);
    transition: background .4s;
}
.abp-service.has-img:hover::after { background: linear-gradient(180deg, rgba(10, 48, 65, .3) 0%, rgba(10, 48, 65, .75) 40%, rgba(10, 48, 65, .98) 100%); }
.abp-service.has-img:hover .abp-service-bg { transform: scale(1.08); }
.abp-service-no {
    position: absolute;
    top: 20px;
    left: 24px;
    right: 24px;
    padding-bottom: 12px;
    font-size: 13px;
    font-style: italic;
    font-weight: 600;
    color: var(--abp-ink);
    border-bottom: 1px solid var(--abp-line);
}
.abp-service.has-img .abp-service-no { color: #fff; border-color: rgba(255, 255, 255, .35); }
.abp-service.has-img .abp-service-icon {
    margin-bottom: 16px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
}
.abp-service.has-img:hover .abp-service-icon { background: var(--abp-accent); border-color: var(--abp-accent); }
.abp-service.has-img h3 { color: #fff; }
.abp-service.has-img p {
    flex: none;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .8);
    opacity: 0;
    transition: max-height .45s, opacity .35s, margin .45s;
}
.abp-service.has-img:hover p,
.abp-service.has-img:focus-visible p { max-height: 120px; margin-bottom: 16px; opacity: 1; }
.abp-service.has-img .abp-service-foot { margin-top: 14px; color: #fff; border-top-color: rgba(255, 255, 255, .25); }
.abp-service.has-img .abp-service-foot i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
}
.abp-service:not(.has-img) .abp-service-no { position: static; margin-bottom: 18px; }
@media (hover: none) {
    .abp-service.has-img p { max-height: 120px; margin-bottom: 16px; opacity: 1; }
}

/* ---- mission / vision: emblem with radiating rings ---- */
.abp-drive .ab-pillar { margin-bottom: 30px; }
.abp-orbit { position: relative; width: 340px; height: 340px; margin-bottom: 30px; }
.abp-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.abp-ring.r1 { width: 150px; height: 150px; background: color-mix(in srgb, var(--abp-accent) 10%, #fff); }
.abp-ring.r2 { width: 220px; height: 220px; border: 1px solid color-mix(in srgb, var(--abp-accent) 22%, #fff); }
.abp-ring.r3 { width: 290px; height: 290px; border: 1px dashed color-mix(in srgb, var(--abp-accent) 28%, #fff); animation: abp-spin 40s linear infinite; }
.abp-ring.r4 { width: 340px; height: 340px; background: radial-gradient(circle, color-mix(in srgb, var(--abp-accent) 7%, transparent) 0, transparent 70%); animation: abp-pulse 4s ease-in-out infinite; }
.abp-emblem {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 112px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 20px 40px -18px rgba(10, 48, 65, .45);
    transform: translate(-50%, -50%);
}
.abp-emblem img { width: 66px; height: 66px; object-fit: contain; }
.abp-orbit-dot {
    position: absolute;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    background: var(--abp-accent);
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 10px 22px -10px var(--abp-accent);
    animation: abp-float 5s ease-in-out infinite;
}
.abp-orbit-dot.d1 { top: 30px; left: 46px; }
.abp-orbit-dot.d2 { top: 52px; right: 30px; animation-delay: -1.6s; }
.abp-orbit-dot.d3 { bottom: 34px; left: 50%; margin-left: -21px; animation-delay: -3.2s; }
@keyframes abp-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes abp-pulse { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: .6; } }
@keyframes abp-float { 50% { transform: translateY(-8px); } }

/* ---- team: watermark + accent name panel ---- */
html .abp-team { position: relative; overflow: hidden; }
.abp-watermark {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 0;
    font-size: 200px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -6px;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 2px rgba(10, 48, 65, .06);
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}
html .abp-team .container { position: relative; z-index: 1; }
.abp-member-meta {
    position: relative;
    margin: -34px 14px 0;
    padding: 16px 18px 14px;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 14px 30px -18px rgba(10, 48, 65, .35);
    transition: background .35s, transform .35s;
}
html .abp-member-meta h3 { margin-bottom: 2px; font-size: 17px; transition: color .35s; }
.abp-member-meta span { font-size: 13px; color: #64748b; transition: color .35s; }
.abp-member-arrow {
    position: absolute;
    top: -14px;
    right: -6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--abp-accent);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 18px -8px rgba(10, 48, 65, .5);
    opacity: 0;
    transform: scale(.6) rotate(-45deg);
    transition: opacity .3s, transform .3s;
}
html .ab-member:hover .abp-member-meta { background: var(--abp-accent); transform: translateY(-6px); }
html .ab-member:hover .abp-member-meta h3,
html .ab-member:hover .abp-member-meta span { color: #fff; }
.ab-member:hover .abp-member-arrow { opacity: 1; transform: scale(1) rotate(-45deg); }

/* ---- featured testimonial carousel ---- */
.abp-tst { position: relative; max-width: 860px; margin: 0 auto; padding: 30px 70px 0; }
.abp-tst-track { display: grid; }
.abp-tst-slide {
    position: relative;
    grid-area: 1 / 1;
    margin: 0;
    padding: 48px 56px 40px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--abp-line);
    border-radius: 26px;
    box-shadow: 0 30px 60px -40px rgba(10, 48, 65, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.98);
    transition: opacity .5s, transform .5s, visibility .5s;
}
.abp-tst-slide.active { opacity: 1; visibility: visible; transform: none; }
.abp-tst-mark {
    position: absolute;
    top: -26px;
    left: 50%;
    width: 52px;
    height: 52px;
    margin-left: -26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    background: var(--abp-accent);
    border: 5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 10px 22px -10px var(--abp-accent);
}
.abp-tst-slide .ab-stars { justify-content: center; margin-bottom: 18px; }
.abp-tst-slide blockquote {
    margin: 0 0 30px;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.7;
    color: var(--abp-ink);
}
.abp-tst-slide figcaption {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding-top: 22px;
    text-align: left;
    border-top: 1px solid var(--abp-line);
}
.abp-tst-slide figcaption img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; }
.abp-tst-slide figcaption strong { display: block; font-size: 16px; color: var(--abp-ink); }
.abp-tst-slide figcaption span { font-size: 13px; color: #64748b; }
.abp-tst-nav {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--abp-accent);
    background: #fff;
    border: 1.5px solid var(--abp-accent);
    border-radius: 50%;
    cursor: pointer;
    transition: background .25s, color .25s;
}
.abp-tst-nav:hover { color: #fff; background: var(--abp-accent); }
.abp-tst-nav:focus { outline: 0; }
.abp-tst-nav.prev { left: 0; }
.abp-tst-nav.next { right: 0; }
.abp-tst.single .abp-tst-nav { display: none; }
.abp-tst-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.abp-tst-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    cursor: pointer;
    background: #cbd5e1;
    border: 0;
    border-radius: 999px;
    transition: width .3s, background .3s;
}
.abp-tst-dots button.active { width: 28px; background: var(--abp-accent); }

@media (max-width: 991px) {
    .abp-watermark { font-size: 120px; }
}
@media (max-width: 575px) {
    .abp-tst { padding: 30px 0 0; }
    .abp-tst-nav { display: none; }
    .abp-tst-slide { padding: 40px 22px 30px; }
    .abp-tst-slide blockquote { font-size: 17px; }
    .abp-watermark { font-size: 70px; letter-spacing: -2px; }
    .abp-service.has-img { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
    .abp-ring, .abp-orbit-dot { animation: none; }
}
[dir="rtl"] .abp-tst-slide figcaption { text-align: right; }
[dir="rtl"] .abp-member-arrow { right: auto; left: -6px; }