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

.about-hero{

    padding:220px 0 180px;

    position:relative;

    overflow:hidden;

    text-align:center;

    background:
        linear-gradient(
            rgba(255,255,255,.62),
            rgba(255,255,255,.62)
        ),
        url("../assets/about-hero.webp");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
	background-position:center 90%;
}

.about-hero-content{

    max-width:950px;

    margin:auto;

}

.about-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:999px;

    background:rgba(126,211,33,.12);

    color:#4d7c0f;

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}

.about-hero h1{

    font-size:72px;

    line-height:1.05;

    margin-bottom:30px;

    color:#0f172a;

}

.about-hero p{

    max-width:900px;

    margin:auto;

    font-size:22px;

    line-height:1.9;

    color:#334155;

}

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

.about-story{

    padding:120px 0;

    background:#fff;

}

.about-story-content{

    max-width:900px;

    margin:auto;

}

.about-story-content p{

    font-size:21px;

    line-height:1.9;

    color:var(--text-light);

    margin-bottom:25px;

}

/* =========================================================
TIMELINE
========================================================= */

.about-timeline{

    padding:120px 0;

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

}

.timeline{

    max-width:900px;

    margin:80px auto 0;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:140px;

    top:0;

    bottom:0;

    width:3px;

    background:
        linear-gradient(
            180deg,
            #7ED321,
            rgba(126,211,33,.2)
        );

}

.timeline-item{

    display:flex;

    gap:50px;

    margin-bottom:60px;

    position:relative;

}

.timeline-year{

    min-width:120px;

    font-size:28px;

    font-weight:800;

    color:#7ED321;

    text-align:right;

    position:relative;

}

.timeline-year::after{

    content:"";

    position:absolute;

    right:-27px;

    top:12px;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#7ED321;

    box-shadow:
        0 0 0 8px rgba(126,211,33,.15);

}

.timeline-content{

    background:#fff;

    padding:30px;

    border-radius:24px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 15px 40px rgba(15,23,42,.05);

    flex:1;

}

.timeline-content h3{

    margin-bottom:12px;

    font-size:24px;

}

.timeline-content p{

    color:var(--text-light);

}

.timeline-item.future .timeline-year{

    color:#0f172a;

}

/* =========================================================
BELIEF
========================================================= */

.about-belief{

    padding:140px 0;

    background:
        radial-gradient(
            circle at center,
            rgba(126,211,33,.08),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #07111E,
            #0B1728
        );

    color:#fff;

    text-align:center;

}

.about-belief-content{

    max-width:900px;

    margin:auto;

}

.about-belief h2{

    font-size:60px;

    margin-bottom:30px;

}

.about-belief p{

    font-size:24px;

    line-height:1.9;

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

    margin-bottom:20px;

}

/* =========================================================
CLIENT VALUES
========================================================= */

.about-values{

    padding:90px 0;

    background:#fff;

}

.about-values-grid{

    display:grid;

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

    gap:25px;

}

.about-value-card{

    background:#f8fafc;

    border-radius:22px;

    padding:35px;

    text-align:center;

    border:1px solid rgba(0,0,0,.05);

    transition:.3s;

}

.about-value-card:hover{

    transform:translateY(-6px);

}

.about-value-card h3{

    font-size:22px;

    line-height:1.5;

}

/* =========================================================
TODAY
========================================================= */

.about-today{

    padding:90px 0;

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

}

.about-today-grid{

    display:grid;

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

    gap:25px;

}

.about-today-item{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    font-weight:700;

    font-size:20px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);

}

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

.about-future{

    padding:100px 0;

    text-align:center;

    background:#fff;

}

.about-future-content{

    max-width:900px;

    margin:auto;

}

.about-future span{

    color:#7ED321;

    font-weight:700;

}

.about-future h2{

    font-size:56px;

    margin:20px 0 30px;

}

.about-future p{

    font-size:22px;

    line-height:1.9;

    color:var(--text-light);

}

/* =========================================================
COMPANY
========================================================= */

.about-company{

    padding:90px 0;

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

}

.about-company-grid{

    display:grid;

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

    gap:25px;

}

.about-company-item{

    background:#fff;

    border-radius:20px;

    padding:30px;

    text-align:center;

    border:1px solid rgba(0,0,0,.05);

}

.about-company-item span{

    display:block;

    font-size:14px;

    color:var(--text-light);

    margin-bottom:10px;

}

.about-company-item strong{

    font-size:22px;

}

@media(max-width:992px){

    .about-values-grid,
    .about-today-grid,
    .about-company-grid{

        grid-template-columns:1fr;

    }

    .timeline::before{

        display:none;

    }

    .timeline-item{

        flex-direction:column;

        gap:15px;

    }

    .timeline-year{

        text-align:left;

    }

    .timeline-year::after{

        display:none;

    }

}

@media(max-width:768px){

    .about-hero h1{

        font-size:38px;

    }

    .about-belief h2{

        font-size:38px;

    }

    .about-future h2{

        font-size:38px;

    }

}