/* =========================================================
   PMAI LAB — PREMIUM ABOUT PAGE
   Version 2.0
========================================================= */


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

.about-hero {

    position: relative;

    min-height: 540px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 100px 20px;

    text-align: center;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(37, 99, 235, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(124, 58, 237, 0.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #ffffff 50%,
            #eff6ff 100%
        );

}


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

.about-hero-background {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

}


.about-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(5px);

    opacity: 0.7;

}


.glow-one {

    width: 260px;

    height: 260px;

    top: -100px;

    left: -80px;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.13),
            transparent 70%
        );

}


.glow-two {

    width: 320px;

    height: 320px;

    right: -120px;

    bottom: -140px;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.14),
            transparent 70%
        );

}


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

.about-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 950px;

    margin: 0 auto;

}


.about-hero-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 24px;

    padding: 8px 16px;

    border: 1px solid rgba(
        37,
        99,
        235,
        0.15
    );

    border-radius: 50px;

    background:
        rgba(
            219,
            234,
            254,
            0.75
        );

    color: var(--accent);

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.about-hero h1 {

    max-width: 900px;

    margin: 0 auto 28px;

    color: var(--primary);

    font-size:
        clamp(
            2.7rem,
            6vw,
            5rem
        );

    line-height: 1.04;

    letter-spacing: -2.5px;

}


.about-hero h1 span {

    color: var(--accent);

}


.about-hero-content > p:not(.section-label) {

    max-width: 760px;

    margin: 0 auto 35px;

    color: var(--text-light);

    font-size: 1.12rem;

    line-height: 1.8;

}


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

.about-hero-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

}


/* =========================================================
   ABOUT INTRODUCTION
========================================================= */

.about-introduction {

    padding:
        110px
        20px;

    background: var(--background);

}


.about-container {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.15fr
        0.85fr;

    gap: 80px;

    align-items: center;

}


/* =========================================================
   ABOUT TEXT
========================================================= */

.about-text {

    max-width: 680px;

}


.about-text h2 {

    margin:
        10px
        0
        25px;

    color: var(--primary);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height: 1.15;

    letter-spacing: -1px;

}


.about-text p {

    margin-bottom: 18px;

    color: var(--text-light);

    font-size: 1rem;

    line-height: 1.8;

}


/* =========================================================
   MINI STATISTICS
========================================================= */

.about-mini-stats {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    margin-top: 35px;

}


.about-mini-stats > div {

    padding:
        18px
        15px;

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

}


.about-mini-stats strong {

    display: block;

    margin-bottom: 4px;

    color: var(--accent);

    font-size: 1.65rem;

    font-weight: 800;

}


.about-mini-stats span {

    display: block;

    color: var(--text-light);

    font-size: 0.78rem;

    font-weight: 600;

}


/* =========================================================
   ABOUT HIGHLIGHT CARD
========================================================= */

.about-highlight {

    position: relative;

    min-height: 360px;

    padding: 42px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #0b1f3a,
            #132f55
        );

    color: white;

    box-shadow:
        0 30px 70px
        rgba(
            15,
            23,
            42,
            0.18
        );

}


.about-highlight::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    top: -100px;

    right: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                37,
                99,
                235,
                0.35
            ),
            transparent 70%
        );

}


.about-highlight::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    bottom: -100px;

    left: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                124,
                58,
                237,
                0.28
            ),
            transparent 70%
        );

}


.highlight-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 35px;

}


.highlight-symbol {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    font-size: 0.85rem;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 15px 35px
        rgba(
            37,
            99,
            235,
            0.28
        );

}


.highlight-tag {

    padding:
        6px
        10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 30px;

    color: #bfdbfe;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.about-highlight h3 {

    position: relative;

    z-index: 2;

    margin-bottom: 18px;

    font-size: 2rem;

    line-height: 1.2;

    letter-spacing: -0.5px;

}


.about-highlight p {

    position: relative;

    z-index: 2;

    margin-bottom: 30px;

    color: #cbd5e1;

    line-height: 1.8;

}


.highlight-line {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 1px;

    margin-bottom: 18px;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

}


.highlight-bottom {

    position: relative;

    z-index: 2;

    color: #93c5fd;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.8px;

}


/* =========================================================
   MISSION & VISION
========================================================= */

.mission-vision {

    padding:
        100px
        20px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f1f5f9
        );

}


.mission-vision-grid {

    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;

}


.mission-card,
.vision-card {

    position: relative;

    display: grid;

    grid-template-columns:
        58px 1fr;

    gap: 24px;

    padding: 38px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 18px;

    background: white;

    box-shadow:
        0 12px 35px
        rgba(
            15,
            23,
            42,
            0.04
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.mission-card:hover,
.vision-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 22px 45px
        rgba(
            15,
            23,
            42,
            0.09
        );

}


.mission-card {

    border-top:
        4px solid
        var(--primary);

}


.vision-card {

    border-top:
        4px solid
        var(--accent);

}


.mv-icon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #e0e7ff
        );

    color: var(--accent);

    font-size: 1.05rem;

    font-weight: 800;

}


.mv-label {

    display: block;

    margin-bottom: 7px;

    color: var(--accent);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 1.4px;

}


.mission-card h3,
.vision-card h3 {

    margin-bottom: 12px;

    color: var(--primary);

    font-size: 1.45rem;

}


.mission-card p,
.vision-card p {

    color: var(--text-light);

    line-height: 1.75;

}


/* =========================================================
   OBJECTIVES
========================================================= */

.objectives-section {

    padding:
        105px
        20px;

    background: white;

}


.objectives-grid {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


.objective-card {

    position: relative;

    min-height: 235px;

    padding: 30px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.objective-card::after {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    right: -45px;

    bottom: -45px;

    border-radius: 50%;

    background:
        rgba(
            37,
            99,
            235,
            0.05
        );

}


.objective-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(
            37,
            99,
            235,
            0.35
        );

    box-shadow:
        0 18px 40px
        rgba(
            15,
            23,
            42,
            0.08
        );

}


.objective-card > span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    margin-bottom: 20px;

    border-radius: 10px;

    background: #eff6ff;

    color: var(--accent);

    font-size: 0.75rem;

    font-weight: 800;

}


.objective-card h3 {

    margin-bottom: 12px;

    color: var(--primary);

    font-size: 1.12rem;

    line-height: 1.4;

}


.objective-card p {

    color: var(--text-light);

    line-height: 1.7;

}


/* =========================================================
   ACADEMIC AREAS
========================================================= */

.about-academic-areas {

    padding:
        105px
        20px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );

}


.about-area-grid {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

}


.about-area-card {

    position: relative;

    min-height: 340px;

    padding: 30px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 18px;

    background: white;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.about-area-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 0.3s ease;

}


.about-area-card:hover::before {

    transform:
        scaleX(1);

}


.about-area-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(
            37,
            99,
            235,
            0.25
        );

    box-shadow:
        0 22px 45px
        rgba(
            15,
            23,
            42,
            0.08
        );

}


.about-area-icon {

    width: 58px;

    height: 58px;

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #e0e7ff
        );

    color: var(--accent);

    font-size: 1rem;

    font-weight: 800;

}


.area-number {

    display: block;

    margin-bottom: 7px;

    color: #94a3b8;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 1px;

}


.about-area-card h3 {

    margin-bottom: 12px;

    color: var(--primary);

    font-size: 1.25rem;

}


.about-area-card p {

    margin-bottom: 20px;

    color: var(--text-light);

    line-height: 1.7;

}


.about-area-card a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--accent);

    font-size: 0.85rem;

    font-weight: 700;

}


.about-area-card a span {

    transition:
        transform 0.25s ease;

}


.about-area-card:hover a span {

    transform:
        translateX(4px);

}


/* =========================================================
   ACADEMIC PHILOSOPHY
========================================================= */

.academic-philosophy {

    padding:
        110px
        20px;

    background: white;

}


.philosophy-container {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    gap: 80px;

    align-items: center;

}


.philosophy-content {

    max-width: 560px;

}


.philosophy-content h2 {

    margin:
        10px
        0
        22px;

    color: var(--primary);

    font-size:
        clamp(
            2rem,
            4vw,
            2.8rem
        );

    line-height: 1.15;

    letter-spacing: -1px;

}


.philosophy-content p {

    margin-bottom: 17px;

    color: var(--text-light);

    line-height: 1.8;

}


/* =========================================================
   LEARNING PATH
========================================================= */

.learning-path {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    padding: 35px;

    border:
        1px solid
        var(--border);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #ffffff
        );

    box-shadow:
        0 20px 50px
        rgba(
            15,
            23,
            42,
            0.05
        );

}


.path-item {

    position: relative;

    min-width: 125px;

    padding:
        22px
        16px;

    text-align: center;

    border:
        1px solid
        var(--border);

    border-radius: 14px;

    background: white;

    box-shadow:
        0 8px 20px
        rgba(
            15,
            23,
            42,
            0.04
        );

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;

}


.path-item:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(
            37,
            99,
            235,
            0.3
        );

}


.path-item strong {

    display: block;

    margin-bottom: 6px;

    color: var(--accent);

    font-size: 0.78rem;

    font-weight: 800;

}


.path-item span {

    color: var(--primary);

    font-size: 0.82rem;

    font-weight: 700;

}


.path-arrow {

    color: var(--accent);

    font-size: 1.5rem;

    font-weight: 800;

}


/* =========================================================
   COLLABORATION
========================================================= */

.collaboration-section {

    padding:
        105px
        20px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f1f5f9
        );

}


.collaboration-grid {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

}


.collaboration-grid article {

    position: relative;

    min-height: 220px;

    padding: 30px;

    border:
        1px solid
        var(--border);

    border-radius: 16px;

    background: white;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.collaboration-grid article:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 40px
        rgba(
            15,
            23,
            42,
            0.07
        );

}


.collaboration-number {

    display: block;

    margin-bottom: 18px;

    color: var(--accent);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.collaboration-grid h3 {

    margin-bottom: 12px;

    color: var(--primary);

    font-size: 1.25rem;

}


.collaboration-grid p {

    color: var(--text-light);

    line-height: 1.7;

}


/* =========================================================
   ABOUT CTA
========================================================= */

.about-cta {

    position: relative;

    padding:
        105px
        20px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0b1f3a,
            #132f55
        );

}


.about-cta::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    top: -200px;

    right: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                37,
                99,
                235,
                0.3
            ),
            transparent 70%
        );

}


.about-cta::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    bottom: -190px;

    left: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                124,
                58,
                237,
                0.22
            ),
            transparent 70%
        );

}


.about-cta .section-heading {

    position: relative;

    z-index: 2;

    max-width: 750px;

}


.about-cta .section-label {

    color: #93c5fd;

}


.about-cta .section-heading h2 {

    color: white;

}


.about-cta .section-heading > p:not(.section-label) {

    color: #cbd5e1;

}


.about-cta .hero-buttons {

    margin-top: 30px;

}


.about-cta .btn-secondary {

    border-color: white;

    background: white;

    color: var(--primary);

}


.about-cta .btn-secondary:hover {

    border-color: #dbeafe;

    background: #dbeafe;

    color: var(--primary);

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {


    .about-container {

        grid-template-columns:
            1fr
            1fr;

        gap: 50px;

    }


    .about-area-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .objectives-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .collaboration-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .philosophy-container {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .philosophy-content {

        max-width: 800px;

        margin: 0 auto;

        text-align: center;

    }


}


/* =========================================================
   RESPONSIVE — TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {


    .about-hero {

        min-height: 500px;

    }


    .about-hero h1 {

        font-size:
            clamp(
                2.6rem,
                7vw,
                4.2rem
            );

    }


    .about-container {

        grid-template-columns:
            1fr;

        gap: 50px;

    }


    .about-text {

        max-width: 800px;

        margin: 0 auto;

    }


    .about-highlight {

        max-width: 700px;

        width: 100%;

        margin: 0 auto;

    }


    .mission-vision-grid {

        grid-template-columns:
            1fr;

        max-width: 700px;

    }


}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {


    .about-hero {

        min-height: auto;

        padding:
            80px
            20px;

    }


    .about-hero-badge {

        margin-bottom: 20px;

        font-size: 0.68rem;

    }


    .about-hero h1 {

        margin-bottom: 22px;

        font-size: 2.5rem;

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .about-hero-content > p:not(.section-label) {

        font-size: 1rem;

        line-height: 1.7;

    }


    .about-hero-actions {

        flex-direction: column;

        width: 100%;

    }


    .about-hero-actions .btn {

        width: 100%;

        max-width: 300px;

        text-align: center;

    }


    .about-introduction,
    .mission-vision,
    .objectives-section,
    .about-academic-areas,
    .academic-philosophy,
    .collaboration-section,
    .about-cta {

        padding:
            75px
            20px;

    }


    .about-text h2,
    .philosophy-content h2 {

        font-size: 2rem;

    }


    .about-mini-stats {

        grid-template-columns:
            1fr;

    }


    .about-highlight {

        min-height: auto;

        padding: 30px;

    }


    .highlight-top {

        align-items: flex-start;

    }


    .highlight-tag {

        display: none;

    }


    .about-highlight h3 {

        font-size: 1.7rem;

    }


    .mission-card,
    .vision-card {

        grid-template-columns:
            1fr;

        gap: 18px;

        padding: 30px;

    }


    .objectives-grid,
    .about-area-grid,
    .collaboration-grid {

        grid-template-columns:
            1fr;

    }


    .objective-card {

        min-height: auto;

    }


    .about-area-card {

        min-height: auto;

    }


    .learning-path {

        flex-direction: column;

        padding: 25px 18px;

    }


    .path-item {

        width: 100%;

        max-width: 250px;

    }


    .path-arrow {

        transform:
            rotate(90deg);

    }


}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {


    .about-hero h1 {

        font-size: 2.15rem;

    }


    .about-highlight {

        padding: 25px;

    }


    .mission-card,
    .vision-card {

        padding: 25px;

    }


    .objective-card,
    .about-area-card,
    .collaboration-grid article {

        padding: 25px;

    }


}