/*==================================================
ABOUT PAGE
==================================================*/

/* HERO */

.about-hero{
    padding:120px 0;
    background:linear-gradient(135deg,#F8FAFC,#EEF4FF);
}

.about-hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-content h1{
    font-size:64px;
    line-height:1.15;
    margin:20px 0;
}

.about-content p{
    font-size:18px;
    color:#64748B;
    line-height:1.8;
    margin-bottom:35px;
}

.about-image img{
    width:100%;
    max-width:600px;
    border-radius:28px;
    box-shadow:0 35px 80px rgba(15,23,42,.12);
    display:block;
    margin-left:auto;
}


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

.about-story{
    padding:140px 0;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-grid img{
    width:100%;
    border-radius:24px;
    display:block;
    box-shadow:0 25px 60px rgba(15,23,42,.08);
}

.about-grid h2{
    margin:20px 0;
    font-size:46px;
}

.about-grid p{
    line-height:1.9;
    color:#64748B;
    margin-bottom:18px;
}


/* STORY HIGHLIGHTS */

.about-highlights{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:35px;

}

.about-highlights div{

    background:#fff;
    border:1px solid #EEF2F7;
    border-radius:18px;
    padding:20px;
    text-align:center;
    transition:.35s;
    box-shadow:0 12px 35px rgba(15,23,42,.05);

}

.about-highlights div:hover{

    transform:translateY(-5px);

}

.about-highlights i{

    font-size:26px;
    color:#5B3DF5;
    margin-bottom:12px;
    display:block;

}

.about-highlights span{

    font-weight:700;

}


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

.about-stats{

    padding:90px 0;
    background:#F8FAFC;

}

.stats-grid{

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

}

.stat-card{

    background:#fff;
    border-radius:24px;
    text-align:center;
    padding:40px;
    box-shadow:0 20px 60px rgba(15,23,42,.06);
    transition:.35s;

}

.stat-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 90px rgba(91,61,245,.18);

}

.stat-card h2{

    font-size:52px;
    color:#5B3DF5;
    margin-bottom:10px;

}

.stat-card p{

    color:#64748B;
    margin:0;

}


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

.why-nucco{

    padding:110px 0;
    text-align:center;

}

.why-nucco h2{

    margin:20px auto 60px;

}


/*==================================================
FEATURES
==================================================*/

.feature-grid{

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

}

.feature-card{

    background:#fff;
    border-radius:24px;
    padding:40px 30px;
    box-shadow:0 20px 60px rgba(15,23,42,.06);
    border:1px solid #EEF2F7;
    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-10px);

}

.feature-card i{

    width:70px;
    height:70px;
    margin:auto;
    margin-bottom:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#F3F0FF;
    color:#5B3DF5;
    font-size:28px;

}

.feature-card h3{

    margin-bottom:12px;

}

.feature-card p{

    color:#64748B;
    line-height:1.8;

}


/*==================================================
JOURNEY
==================================================*/

.journey{

    padding:110px 0;
    background:#F8FAFC;
    text-align:center;

}

.journey h2{

    margin:20px auto 60px;

}

.journey-list{

    max-width:850px;
    margin:auto;
    position:relative;

}

.journey-list::before{

    content:"";
    position:absolute;
    left:45px;
    top:0;
    bottom:0;
    width:3px;
    background:#E5E7EB;

}

.journey-item{

    display:flex;
    gap:30px;
    align-items:flex-start;
    margin-bottom:45px;
    position:relative;
    text-align:left;

}

.journey-item span{

    width:90px;
    height:90px;
    border-radius:50%;
    background:#5B3DF5;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;
    z-index:2;

}

.journey-item div{

    background:#fff;
    border-radius:20px;
    padding:25px 30px;
    width:100%;
    box-shadow:0 15px 40px rgba(15,23,42,.06);

}

.journey-item h3{

    margin-bottom:10px;

}

.journey-item p{

    color:#64748B;
    margin:0;

}


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

@media(max-width:992px){

.about-hero-grid,
.about-grid{

grid-template-columns:1fr;

}

.feature-grid{

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

}

.stats-grid{

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

}

.about-highlights{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.about-hero{

padding:80px 0;

}

.about-story,
.about-stats,
.why-nucco,
.journey{

padding:80px 0;

}

.about-content h1{

font-size:42px;

}

.about-grid h2{

font-size:34px;

}

.feature-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.journey-list::before{

display:none;

}

.journey-item{

flex-direction:column;
align-items:center;
text-align:center;

}

}