/*==================================================
ABOUT BENTO
==================================================*/

#about-bento{
    padding:1rem 1.5rem;
}

.about-bento-grid{

    display:grid;

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

    grid-template-rows:180px 100px 180px;

    gap:22px;

}


/*----------------------------------
Common Card
-----------------------------------*/

.about-bento-card{

    overflow:hidden;

    border-radius:22px;

    position:relative;

}


/*----------------------------------
Images
-----------------------------------*/

.about-bento-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.45s;

}

.about-bento-card:hover img{

    transform:scale(1.06);

}


/*----------------------------------
Grid Placement
-----------------------------------*/

.about-left-image{

    grid-column:1;

    grid-row:1 / 4;

}


.about-orange-card{

    grid-column:2;

    grid-row:1;

}


.about-center-image{

    grid-column:2;

    grid-row:2 / 4;

}


.about-right-image{

    grid-column:3;

    grid-row:1 / 3;

}


.about-dark-card{

    grid-column:3;

    grid-row:3;

}


/*----------------------------------
Orange Card
-----------------------------------*/

.about-orange-card{

    background:linear-gradient(135deg,#ff6b2c,#ff7d29);

    padding:2rem;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.about-orange-card h2{

    color:#fff;

    font-size:3rem;

    margin-bottom:10px;

    line-height:1;

}

.about-orange-card h3{

    color:#fff;

    font-size:1.2rem;

    margin-bottom:12px;

}

.about-orange-card p{

    color:rgba(255,255,255,.82);

    font-size:.92rem;

    line-height:1.7;

}


/*----------------------------------
Dark Card
-----------------------------------*/

.about-dark-card{

    background:#17171d;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03);

    padding:2rem;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.about-dark-card h2{

    color:#fff;

    font-size:3rem;

    line-height:1;

    margin-bottom:10px;

}

.about-dark-card h3{

    color:#fff;

    font-size:1.2rem;

    margin-bottom:12px;

}

.about-dark-card p{

    color:#94a3b8;

    font-size:.92rem;

    line-height:1.7;

}


/*==================================================
TABLET
==================================================*/

@media(max-width:991px){

.about-bento-grid{

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

    grid-template-rows:300px 220px 300px;

}


.about-left-image{

    grid-column:1;

    grid-row:1;

}


.about-orange-card{

    grid-column:2;

    grid-row:1;

}


.about-center-image{

    grid-column:1;

    grid-row:2 / 4;

}


.about-right-image{

    grid-column:2;

    grid-row:2;

}


.about-dark-card{

    grid-column:2;

    grid-row:3;

}

}


/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

#about-bento{

    padding:4rem 1rem;

}

.about-bento-grid{

    display:grid;

    grid-template-columns:1fr;

    grid-template-rows:auto;

    gap:18px;

}


.about-left-image,
.about-orange-card,
.about-center-image,
.about-right-image,
.about-dark-card{

    grid-column:auto;

    grid-row:auto;

}


.about-left-image,
.about-center-image,
.about-right-image{

    height:320px;

}


.about-orange-card,
.about-dark-card{

    min-height:220px;

    padding:1.5rem;

}


.about-orange-card h2,
.about-dark-card h2{

    font-size:2.5rem;

}



.about-orange-card h3,
.about-dark-card h3{

    font-size:1.1rem;

}

}












/*==========================================
ABOUT STORY
==========================================*/

#about-story{
    padding:6rem 1.5rem;
}

.about-story-top{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
    margin-bottom:4.5rem;

}

.about-story-left h2{

    margin-top:18px;
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.15;

}

.about-story-right{

    display:flex;
    flex-direction:column;
    gap:24px;

}

.about-story-right p{

    color:#94a3b8;
    font-size:15px;
    line-height:1.9;

}

/*=========================
Stats
=========================*/

.about-story-stats{

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

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:45px;

}

.about-stat-item{

    padding:0 28px;
    position:relative;

}

.about-stat-item:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:10px;

    width:1px;

    height:70px;

    background:rgba(255,255,255,.08);

}

.about-stat-item h3{

    font-size:3rem;

    line-height:1;

    margin-bottom:12px;

    background:linear-gradient(
    180deg,
    #ffffff,
    #dbe4ff,
    #818cf8
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.about-stat-item p{

    color:#94a3b8;

    font-size:14px;

    line-height:1.6;

}


/*=========================
Tablet
=========================*/

@media(max-width:991px){

.about-story-top{

grid-template-columns:1fr;

gap:40px;

}

.about-story-stats{

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

row-gap:45px;

}

.about-stat-item:nth-child(2)::after{

display:none;

}

}


/*=========================
Mobile
=========================*/

@media(max-width:768px){

#about-story{

padding:4rem 1rem;

}

.about-story-stats{

grid-template-columns:1fr;

gap:30px;

}

.about-stat-item{

padding:0;

padding-bottom:25px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.about-stat-item::after{

display:none;

}

.about-story-left h2{

font-size:2rem;

}

}












/*==========================================
PURPOSE
==========================================*/

#purpose-section{
    padding:6rem 1.5rem;
    position:relative;
    overflow:hidden;
}

/* Heading */

.purpose-heading{

    max-width:760px;

    margin:auto;

    text-align:center;

}

.purpose-heading h2{

    margin:20px 0;

}

.purpose-heading p{

    max-width:650px;

    margin:auto;

    line-height:1.8;

}

/*====================================
ORB
====================================*/

.purpose-orb{

    position:relative;

    width:180px;

    height:180px;

    margin:70px auto;

}

.orb-core{

    position:absolute;

    inset:35px;

    border-radius:50%;

    background:radial-gradient(circle,#8ab4ff,#4f7cff,#283cff);

    box-shadow:

    0 0 30px rgba(93,125,255,.6),

    0 0 70px rgba(93,125,255,.4),

    0 0 120px rgba(93,125,255,.25);

    animation:orbPulse 4s ease-in-out infinite;

}

.orb-ring{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:1px solid rgba(129,140,248,.25);

    animation:rotateRing 18s linear infinite;

}

.orb-ring::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border-top:2px solid #818cf8;

    border-right:2px solid transparent;

    border-left:2px solid transparent;

    border-bottom:2px solid transparent;

}

/*====================================
Stars
====================================*/

.orb-star{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#fff;

    animation:twinkle 2.5s infinite;

}

.star1{top:15px;left:25px;}
.star2{right:20px;top:35px;animation-delay:.5s;}
.star3{bottom:30px;left:18px;animation-delay:1s;}
.star4{bottom:15px;right:30px;animation-delay:1.6s;}

/*====================================
Cards
====================================*/

.purpose-grid{

    display:grid;

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

    gap:35px;

    max-width:1100px;

    margin:auto;

}

.purpose-card{

    background:#17171d;

    border-radius:22px;

    padding:40px;

    border:1px solid rgba(255,255,255,.08);

    position:relative;

    overflow:hidden;

    transition:.35s;

}

.purpose-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:radial-gradient(circle,
    rgba(99,102,241,.25),
    transparent 70%);

    top:-120px;

    right:-120px;

    transition:.5s;

}

.purpose-card:hover{

    transform:translateY(-8px);

    border-color:rgba(129,140,248,.3);

}

.purpose-card:hover::before{

    transform:scale(1.4);

}

.purpose-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    background:linear-gradient(135deg,#6366f1,#8b5cf6);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    color:#fff;

    margin-bottom:25px;

    box-shadow:0 0 30px rgba(99,102,241,.4);

}

.purpose-card h3{

    margin-bottom:18px;

}

.purpose-card p{

    line-height:1.9;

    color:#94a3b8;

}

/*====================================
Animation
====================================*/

@keyframes rotateRing{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes orbPulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

@keyframes twinkle{

0%,100%{

opacity:.2;

transform:scale(.6);

}

50%{

opacity:1;

transform:scale(1.5);

}

}

/*====================================
Responsive
====================================*/

@media(max-width:768px){

#purpose-section{

padding:4rem 1rem;

}

.purpose-grid{

grid-template-columns:1fr;

}

.purpose-orb{

width:140px;

height:140px;

margin:50px auto;

}

.orb-core{

inset:28px;

}

.purpose-card{

padding:30px;

}

}






/*=========================================
FOUNDER
=========================================*/

#founder-section{

    padding:6rem 1.5rem;

}

.founder-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.founder-content h2{

    margin:18px 0 28px;

}

.founder-content p{

    color:#94a3b8;

    line-height:1.9;

    margin-bottom:22px;

}

/*============================*/

.founder-info{

    margin-top:35px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.08);

}

.founder-info h4{

    color:#fff;

    font-size:1.3rem;

    margin-bottom:6px;

}

.founder-info span{

    color:#818cf8;

    font-size:.95rem;

}

/*============================*/

.founder-image{

    position:relative;

}

.founder-image img{

    width:100%;

    border-radius:24px;

    display:block;

    position:relative;

    z-index:2;

}

/* Animated Glow */

.founder-glow{

    position:absolute;

    width:260px;

    height:260px;

    background:radial-gradient(circle,
    rgba(99,102,241,.45),
    transparent 70%);

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    filter:blur(30px);

    animation:founderGlow 5s ease-in-out infinite;

}

@keyframes founderGlow{

0%,100%{

transform:translate(-50%,-50%) scale(1);

opacity:.7;

}

50%{

transform:translate(-50%,-50%) scale(1.2);

opacity:1;

}

}

/* Hover */

.founder-image:hover img{

    transform:translateY(-6px);

    transition:.4s;

}

/*====================================
Responsive
====================================*/

@media(max-width:991px){

.founder-grid{

grid-template-columns:1fr;

gap:50px;

}

.founder-image{

max-width:600px;

margin:auto;

}

}

@media(max-width:768px){

#founder-section{

padding:4rem 1rem;

}

.founder-content h2{

font-size:2rem;

}

.founder-image img{

border-radius:18px;

}

}














/*=========================================================
TEAM SECTION
=========================================================*/

#team-section{
    padding:6rem 1.5rem;
    overflow:hidden;
}

.team-heading{
    max-width:720px;
    margin:0 auto 4rem;
    text-align:center;
}

.team-heading h2{
    margin:18px 0;
}

.team-heading p{
    color:#94a3b8;
    line-height:1.8;
}

/*=========================================================
SHOWCASE
=========================================================*/

.team-showcase{

    display:flex;

    height:620px;

    border-radius:28px;

    overflow:hidden;

        background:
        radial-gradient(circle at 15% 20%,
            rgba(99,102,241,.18),
            transparent 35%),

        radial-gradient(circle at 85% 25%,
            rgba(168,85,247,.15),
            transparent 35%),

        radial-gradient(circle at 50% 100%,
            rgba(129,140,248,.20),
            transparent 45%),

        #1b1b20;

    border:1px solid rgba(255,255,255,.08);

    position:relative;



}

/*=========================================================
MEMBER
=========================================================*/

.team-member{

    flex:1;

    position:relative;

    overflow:hidden;

    transition:
    flex .55s cubic-bezier(.4,0,.2,1),
    transform .4s;

    cursor:pointer;

    border-right:1px solid rgba(255,255,255,.07);

   background:
    radial-gradient(
        circle at center 75%,
        rgba(140, 102, 255, 0.45),
        transparent 55%
    ),
    linear-gradient(
        180deg,
        #f3f0ff 0%,
        #e3dcff 18%,
        #cbbcff 38%,
        #a989ff 58%,
        #7c5cff 78%,
        #5234b7 90%,
        #1E1E21 100%
    );

}

.team-member:last-child{

    border-right:none;

}

/* Hover */

.team-showcase:hover .team-member{

    flex:.9;

}

.team-showcase .team-member:hover{

    flex:1.8;

}

/*=========================================================
IMAGE
=========================================================*/

.team-image {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: end;
}

.team-image img {
    /* bottom: 0; */
    width: 100%;
    height: 70%;
    object-fit: cover;
    object-position: center bottom;
    transition: transform .7s ease, filter .4s ease;
}

.team-member:hover img{

    transform:scale(1.08);

}

/*=========================================================
OVERLAY
=========================================================*/

.team-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    rgba(30,30,33,0) 25%,

    rgba(30,30,33,.15) 45%,

    rgba(30,30,33,.65) 75%,

    rgba(30,30,33,.98) 100%

    );

    z-index:2;

}

/* blue glow */

.team-member::before{

    content:"";

    position:absolute;

    inset:auto;

    width:260px;

    height:260px;

    bottom:-120px;

    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(99,102,241,.45),

    rgba(99,102,241,.12),

    transparent 75%);

    opacity:0;

    transition:.45s;

    filter:blur(20px);

    z-index:2;

}

.team-member:hover::before{

    opacity:1;

}

/*=========================================================
VERTICAL LINE
=========================================================*/

.team-member::after{

    content:"";

    position:absolute;

    right:0;

    top:0;

    width:1px;

    height:100%;

    background:

    linear-gradient(

    transparent,

    rgba(255,255,255,.18),

    transparent);

    z-index:3;

}

.team-member:last-child::after{

    display:none;

}

/*=========================================================
INFO
=========================================================*/

.team-info{

    position:absolute;

    left:30px;

    right:30px;

    bottom:35px;

    z-index:5;

    transition:.4s;

}

.team-member:hover .team-info{

    bottom:45px;

}

.team-info h3{

    color:#fff;

    font-size:1.55rem;

    margin-bottom:8px;

    white-space:nowrap;

}

.team-info span{

    display:block;

    color:#c7caf5;

    font-size:.95rem;

    transition:.35s;

}

.team-member:hover .team-info span{

    color:#ffffff;

}

/*=========================================================
ACTIVE CARD
=========================================================*/

.team-member.active{

    flex:1.5;

}

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

.team-member:hover{

    z-index:20;

}

.team-member:hover .team-overlay {
    background: linear-gradient(180deg, rgba(30, 30, 33, 0), rgba(30, 30, 33, .08), rgba(20, 20, 22, .45), rgb(27 27 190 / 96%));
}

/*=========================================================
TABLET
=========================================================*/

@media(max-width:991px){

.team-showcase{

    height:520px;

}

.team-info{

    left:18px;

    right:18px;

}

.team-info h3{

    font-size:1.2rem;

}

.team-info span{

    font-size:.82rem;

}

}

/*=========================================================
MOBILE
=========================================================*/

@media(max-width:768px){

#team-section{

    padding:4rem 1rem;

}

.team-showcase{

    display:flex;

    overflow-x:auto;

    overflow-y:hidden;

    height:480px;

    scroll-snap-type:x mandatory;

    border-radius:20px;

}

.team-showcase::-webkit-scrollbar{

    display:none;

}

.team-member{

    min-width:260px;

    flex:none !important;

    scroll-snap-align:center;

    border-right:1px solid rgba(255,255,255,.08);

}

.team-member.active{

    flex:none;

}

.team-member::after{

    display:none;

}

.team-info{

    left:20px;

    right:20px;

    bottom:25px;

}

.team-info h3{

    font-size:1.35rem;

}

.team-info span{

    font-size:.9rem;

}

}

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

@media(max-width:480px){

.team-showcase{

    height:420px;

}

.team-member{

    min-width:220px;

}

.team-info h3{

    font-size:1.2rem;

}

.team-info span{

    font-size:.82rem;

}

}