/*====================================================
ABOUT PAGE
DP Academy
====================================================*/

/*====================================
COMMON
====================================*/

.about-hero,
.about-story,
.why-about,
.mission-section,
.achievement-section,
.about-cta{

    padding:70px 0;

}

.section-heading{

    text-align:center;
    margin-bottom:70px;

}

.section-heading h2{

    font-size:46px;

    margin:20px 0;

    color:var(--secondary);

}

.section-heading p{

    max-width:650px;

    margin:auto;

    color:#6b7280;

    line-height:1.8;

}

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

.about-hero{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #eef5ff,
    #ffffff);

}

.about-hero::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    background:#2563eb15;

    border-radius:50%;

    top:-220px;

    right:-120px;

}

.about-hero::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    background:#3b82f615;

    border-radius:50%;

    bottom:-180px;

    left:-120px;

}

.about-hero-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

    text-align:center;

}

.about-hero h1{

    font-size:64px;

    line-height:1.15;

    margin:25px 0;

    color:var(--secondary);

}

.about-hero h1 span{

    color:var(--primary);

}

.about-hero p{

    max-width:700px;

    margin:0 auto 45px;

    color:#6b7280;

    line-height:1.9;

    font-size:18px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

/*====================================
OUR STORY
====================================*/

.story-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.story-image{

    position:relative;

}

.story-image img{

    width:100%;

    border-radius:32px;

    box-shadow:

    0 35px 70px rgba(0,0,0,.12);

}

.story-content h2{

    font-size:48px;

    line-height:1.2;

    margin:20px 0;

}

.story-content>p{

    margin-bottom:25px;

    color:#6b7280;

    line-height:1.9;

    font-size:17px;

}

/*====================================
HIGHLIGHTS
====================================*/

.story-highlights{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-top:35px;

}

.story-highlights div{

    display:flex;

    align-items:center;

    gap:12px;

    background:#f8fbff;

    padding:18px 20px;

    border-radius:18px;

    transition:.35s;

    font-weight:500;

}

.story-highlights div:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-5px);

}

.story-highlights span{

    color:var(--primary);

}

.story-highlights div:hover span{

    color:#fff;

}

/*====================================
WHY CHOOSE US
====================================*/

.why-about {
    background: #ffffff;
}

.about-features {

    display: grid;

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

    gap: 28px;
}


/*====================================
FEATURE CARD
====================================*/

.feature-card {

    position: relative;

    overflow: hidden;

    background: #ffffff;

    border-radius: 24px;

    padding: 45px 30px;

    text-align: center;

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

    min-height: 330px;

    box-shadow:
        0 15px 40px rgba(30, 64, 175, 0.07);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


/*====================================
TOP COLOR WASH
====================================*/

.feature-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 190px;

    background:
        linear-gradient(
            180deg,
            rgba(37, 99, 235, 0.32),
            rgba(37, 99, 235, 0.10),
            rgba(255, 255, 255, 0)
        );

    pointer-events: none;

    z-index: 0;

}


/*====================================
BOTTOM LEFT COLOR GLOW
====================================*/

.feature-card::after {

    content: "";

    position: absolute;

    width: 230px;
    height: 170px;

    left: -90px;
    bottom: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(37, 99, 235, 0.30),
            rgba(37, 99, 235, 0.10) 45%,
            transparent 72%
        );

    pointer-events: none;

    z-index: 0;

    transition:
        transform .4s ease,
        opacity .4s ease;

}


/*====================================
TOP RIGHT DOT PATTERN
====================================*/

.feature-card {

    background-image:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.20) 2px,
            transparent 2.5px
        );

    background-size: 18px 18px;

    background-position:
        calc(100% - 30px) 25px;

    background-repeat: no-repeat;
}


/*====================================
CONTENT ABOVE EFFECTS
====================================*/

.feature-card > * {

    position: relative;

    z-index: 2;

}


/*====================================
ICON
====================================*/

.feature-card span {

    width: 82px;

    height: 82px;

    margin: 5px auto 35px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

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

    color: #2563eb;

    font-size: 40px;

    box-shadow:
        0 8px 25px rgba(30, 64, 175, 0.10);

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

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


/*====================================
TITLE
====================================*/

.feature-card h3 {

    margin:
        0 0 15px;

    font-size: 24px;

    font-weight: 700;

    color: #111c3d;

}


/*====================================
DESCRIPTION
====================================*/

.feature-card p {

    color: #5f6878;

    line-height: 1.8;

    margin: 0;

    font-size: 16px;

}


/*====================================
HOVER
====================================*/

.feature-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 55px rgba(30, 64, 175, 0.12);

}


.feature-card:hover span {

    transform:
        translateY(-5px)
        scale(1.05);

    box-shadow:
        0 14px 30px rgba(30, 64, 175, 0.15);

}


.feature-card:hover::after {

    transform:
        scale(1.25);

}


/*====================================
CARD 1 — BLUE
====================================*/

.feature-card:nth-child(1)::before {

    background:
        linear-gradient(
            180deg,
            rgba(59, 130, 246, 0.34),
            rgba(147, 197, 253, 0.16),
            rgba(255, 255, 255, 0)
        );

}


.feature-card:nth-child(1)::after {

    background:
        radial-gradient(
            ellipse,
            rgba(59, 130, 246, 0.32),
            rgba(59, 130, 246, 0.10) 45%,
            transparent 72%
        );

}


.feature-card:nth-child(1) {

    background-image:
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.22) 2px,
            transparent 2.5px
        );

    background-size: 18px 18px;

    background-position:
        calc(100% - 30px) 25px;

    background-repeat: no-repeat;

}


.feature-card:nth-child(1) span {

    color: #2563eb;

}


/*====================================
CARD 2 — PURPLE
====================================*/

.feature-card:nth-child(2)::before {

    background:
        linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.34),
            rgba(196, 181, 253, 0.16),
            rgba(255, 255, 255, 0)
        );

}


.feature-card:nth-child(2)::after {

    background:
        radial-gradient(
            ellipse,
            rgba(139, 92, 246, 0.32),
            rgba(139, 92, 246, 0.10) 45%,
            transparent 72%
        );

}


.feature-card:nth-child(2) {

    background-image:
        radial-gradient(
            circle,
            rgba(139, 92, 246, 0.22) 2px,
            transparent 2.5px
        );

    background-size: 18px 18px;

    background-position:
        calc(100% - 30px) 25px;

    background-repeat: no-repeat;

}


.feature-card:nth-child(2) span {

    color: #7c3aed;

}


/*====================================
CARD 3 — TEAL
====================================*/

.feature-card:nth-child(3)::before {

    background:
        linear-gradient(
            180deg,
            rgba(20, 184, 166, 0.34),
            rgba(153, 246, 228, 0.16),
            rgba(255, 255, 255, 0)
        );

}


.feature-card:nth-child(3)::after {

    background:
        radial-gradient(
            ellipse,
            rgba(20, 184, 166, 0.32),
            rgba(20, 184, 166, 0.10) 45%,
            transparent 72%
        );

}


.feature-card:nth-child(3) {

    background-image:
        radial-gradient(
            circle,
            rgba(20, 184, 166, 0.22) 2px,
            transparent 2.5px
        );

    background-size: 18px 18px;

    background-position:
        calc(100% - 30px) 25px;

    background-repeat: no-repeat;

}


.feature-card:nth-child(3) span {

    color: #0d9488;

}


/*====================================
CARD 4 — ORANGE
====================================*/

.feature-card:nth-child(4)::before {

    background:
        linear-gradient(
            180deg,
            rgba(249, 115, 22, 0.32),
            rgba(253, 186, 116, 0.15),
            rgba(255, 255, 255, 0)
        );

}


.feature-card:nth-child(4)::after {

    background:
        radial-gradient(
            ellipse,
            rgba(249, 115, 22, 0.30),
            rgba(249, 115, 22, 0.09) 45%,
            transparent 72%
        );

}


.feature-card:nth-child(4) {

    background-image:
        radial-gradient(
            circle,
            rgba(249, 115, 22, 0.20) 2px,
            transparent 2.5px
        );

    background-size: 18px 18px;

    background-position:
        calc(100% - 30px) 25px;

    background-repeat: no-repeat;

}


.feature-card:nth-child(4) span {

    color: #ea580c;

}

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

/*====================================
MISSION SECTION
====================================*/

.mission-section {

    background: #ffffff;

}


.mission-grid {

    display: grid;

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

    gap: 35px;

}


/*====================================
MISSION CARD
====================================*/

.mission-card {

    position: relative;

    overflow: hidden;

    background: #ffffff;

    border-radius: 30px;

    padding: 45px;

    text-align: center;

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

    box-shadow:
        0 20px 45px rgba(30, 64, 175, 0.06);

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

}


/*====================================
SOFT COLOR GLOW
====================================*/

.mission-card::before {

    content: "";

    position: absolute;

    top: -100px;

    left: 50%;

    transform: translateX(-50%);

    width: 300px;

    height: 220px;

    border-radius: 50%;

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

    pointer-events: none;

    transition:
        transform .5s ease,
        opacity .4s ease;

}


/*====================================
TOP ACCENT LINE
====================================*/

.mission-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: 50px;

    right: 50px;

    height: 4px;

    border-radius:
        0 0 12px 12px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary),
            transparent
        );

    opacity: .5;

    transition:
        .35s ease;

}


/*====================================
HOVER
====================================*/

.mission-card:hover {

    transform:
        translateY(-10px);

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

    box-shadow:
        0 30px 60px rgba(37, 99, 235, 0.12),
        0 8px 25px rgba(37, 99, 235, 0.05);

}


.mission-card:hover::before {

    transform:
        translateX(-50%)
        scale(1.25);

}


.mission-card:hover::after {

    left: 25px;

    right: 25px;

    opacity: 1;

}


/*====================================
ICON CONTAINER
====================================*/

.mission-icon {

    position: relative;

    z-index: 2;

    width: 90px;

    height: 90px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #eef4ff,
            #e1ebff
        );

    display: flex;

    justify-content: center;

    align-items: center;

    margin:
        0 auto 30px;

    box-shadow:
        0 10px 25px rgba(37, 99, 235, 0.09);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.mission-card:hover
.mission-icon {

    transform:
        translateY(-5px)
        scale(1.05);

    box-shadow:
        0 15px 32px rgba(37, 99, 235, 0.15);

}


/*====================================
ICON
====================================*/

.mission-icon span {

    font-size: 42px;

    color: var(--primary);

    transition:
        transform .35s ease;

}


.mission-card:hover
.mission-icon span {

    transform:
        scale(1.08);

}


/*====================================
TITLE
====================================*/

.mission-card h3 {

    position: relative;

    z-index: 2;

    font-size: 30px;

    margin-bottom: 20px;

    color: var(--secondary);

}


/*====================================
DESCRIPTION
====================================*/

.mission-card p {

    position: relative;

    z-index: 2;

    color: #6b7280;

    line-height: 1.9;

    font-size: 16px;

    margin: 0;

}

/*====================================
MISSION — BLUE
====================================*/

.mission-card:nth-child(1)::before {

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

}

.mission-card:nth-child(1)::after {

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

}

.mission-card:nth-child(1)
.mission-icon {

    background:
        linear-gradient(
            145deg,
            #eef4ff,
            #dce9ff
        );

}

.mission-card:nth-child(1)
.mission-icon span {

    color: #2563eb;

}


/*====================================
VISION — PURPLE
====================================*/

.mission-card:nth-child(2)::before {

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

}

.mission-card:nth-child(2)::after {

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

}

.mission-card:nth-child(2)
.mission-icon {

    background:
        linear-gradient(
            145deg,
            #f3efff,
            #e9ddff
        );

}

.mission-card:nth-child(2)
.mission-icon span {

    color: #7c3aed;

}

/*====================================================
ACHIEVEMENTS
====================================================*/

.achievement-section{

    background:#f8fbff;

}

.achievement-grid{

    display:grid;

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

    gap:25px;

}

.achievement-card{

    background:#fff;

    padding:45px 25px;

    border-radius:28px;

    text-align:center;

    transition:.35s;

    box-shadow:0 20px 45px rgba(0,0,0,.05);

}

.achievement-card:hover{

    transform:translateY(-8px);

    background:var(--primary);

}

.achievement-card h2{

    font-size:54px;

    color:var(--primary);

    margin-bottom:10px;

    transition:.35s;

}

.achievement-card p{

    color:#6b7280;

    font-size:16px;

    transition:.35s;

}

.achievement-card:hover h2,

.achievement-card:hover p{

    color:#ffffff;

}

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

.about-cta{

    background:linear-gradient(
    135deg,
    var(--primary),
    #4f8dfd);

}

.cta-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

}

.cta-wrapper h2{

    color:#ffffff;

    font-size:46px;

    margin:20px 0;

}

.cta-wrapper p{

    color:#dbeafe;

    max-width:650px;

    line-height:1.8;

}

.cta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.about-cta .btn-outline{

    border:2px solid #ffffff;

    color:var(--primary);

}

.about-cta .btn-outline:hover{

    background:#ffffff;

    color:var(--primary);

}

/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:1200px){

    .about-features{

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

    }

}

@media(max-width:992px){

    .story-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .story-content{

        text-align:center;

    }

    .story-highlights{

        grid-template-columns:1fr;

    }

    .mission-grid{

        grid-template-columns:1fr;

    }

    .achievement-grid{

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

    }

    .cta-wrapper{

        flex-direction:column;

        text-align:center;

    }

}

@media(max-width:768px){

    .about-hero{

        padding:90px 0;

    }

    .about-hero h1{

        font-size:42px;

    }

    .story-content h2{

        font-size:36px;

    }

    .section-heading h2{

        font-size:34px;

    }

    .about-features{

        grid-template-columns:1fr;

    }

    .achievement-grid{

        grid-template-columns:1fr;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .cta-buttons{

        flex-direction:column;

        width:100%;

    }

    .cta-buttons .btn{

        width:100%;

        text-align:center;

    }

}