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

.about-hero{

    min-height: 75vh;

    padding: 140px 8% 80px;

    background:
    linear-gradient(
    135deg,
    #0f172a,
    #1e1b4b,
    #581c87
    );

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    position: relative;

    overflow: hidden;
}



/* =========================
   HERO GLOW EFFECTS
========================= */

.about-hero::before{

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    background:
    rgba(124,58,237,0.18);

    filter: blur(120px);

    top: -120px;

    left: -120px;
}


.about-hero::after{

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    background:
    rgba(59,130,246,0.16);

    filter: blur(120px);

    bottom: -150px;

    right: -120px;
}



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

.about-hero-content{

    position: relative;

    z-index: 1;

    max-width: 950px;
}


.about-hero-content h1{

    font-size: 76px;

    margin-bottom: 30px;

    color: white;

    line-height: 1.1;
}


.about-hero-content p{

    font-size: 22px;

    line-height: 1.9;

    color:
    rgba(255,255,255,0.85);
}






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

.mission-section,
.story-section,
.values-section,
.vision-section{

    padding: 100px 8%;

    background: #050816;
}



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

.section-title{

    text-align: center;

    margin-bottom: 60px;
}


.section-title h2{

    font-size: 46px;

    color: white;
}






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

.mission-container{

    display: grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap: 30px;
}



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

.mission-card{

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

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

    border-radius: 28px;

    padding: 40px;

    backdrop-filter: blur(12px);

    transition: 0.3s;
}



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

.mission-card:hover{

    transform: translateY(-10px);

    background:
    rgba(139,92,246,0.12);

    box-shadow:
    0 18px 40px rgba(0,0,0,0.25);
}



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

.mission-card h3{

    font-size: 28px;

    color: #c084fc;

    margin-bottom: 20px;
}



/* =========================
   MISSION TEXT
========================= */

.mission-card p{

    color: #d1d5db;

    line-height: 1.9;

    font-size: 17px;
}






/* =========================================================
   STORY SECTION
========================================================= */

.story-card{

    max-width: 1000px;

    margin: auto;

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

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

    border-radius: 32px;

    padding: 60px;

    backdrop-filter: blur(12px);

    text-align: center;
}



/* =========================
   STORY TEXT
========================= */

.story-card p{

    color: #d1d5db;

    line-height: 2;

    font-size: 20px;

    margin-bottom: 30px;
}






/* =========================================================
   VALUES SECTION
========================================================= */

.values-grid{

    display: grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap: 30px;
}



/* =========================
   VALUE CARD
========================= */

.value-card{

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

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

    border-radius: 26px;

    padding: 35px;

    transition: 0.3s;
}



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

.value-card:hover{

    transform: translateY(-8px);

    background:
    rgba(139,92,246,0.12);
}



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

.value-card h3{

    font-size: 26px;

    margin-bottom: 18px;

    color: white;
}



/* =========================
   VALUE TEXT
========================= */

.value-card p{

    color: #cbd5e1;

    line-height: 1.8;

    font-size: 16px;
}






/* =========================================================
   FUTURE VISION
========================================================= */

.vision-container{

    display: grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap: 30px;
}



/* =========================
   VISION CARD
========================= */

.vision-card{

    background:
    linear-gradient(
    135deg,
    rgba(124,58,237,0.18),
    rgba(79,70,229,0.16)
    );

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

    border-radius: 24px;

    padding: 40px 30px;

    text-align: center;

    color: white;

    font-size: 20px;

    line-height: 1.8;

    font-weight: 600;

    transition: 0.3s;
}



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

.vision-card:hover{

    transform: translateY(-10px);

    box-shadow:
    0 15px 35px rgba(124,58,237,0.25);
}






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

@media(max-width:768px){



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

    .about-hero{

        padding: 120px 20px 70px;
    }


    .about-hero-content h1{

        font-size: 50px;
    }


    .about-hero-content p{

        font-size: 18px;
    }



    /* =========================
       SECTION TITLES
    ========================= */

    .section-title h2{

        font-size: 34px;
    }



    /* =========================
       STORY CARD
    ========================= */

    .story-card{

        padding: 35px 25px;
    }


    .story-card p{

        font-size: 17px;
    }



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

    .mission-card{

        padding: 30px;
    }



    /* =========================
       VALUE CARD
    ========================= */

    .value-card{

        padding: 28px;
    }



    /* =========================
       VISION CARD
    ========================= */

    .vision-card{

        font-size: 18px;

        padding: 30px 24px;
    }

}