.about-hero{

    padding:100px 0;

    text-align:center;

}

.about-hero h1{

    font-size:3rem;

    margin-bottom:20px;

}

.about-hero p{

    max-width:850px;

    margin:auto;

    line-height:1.8;

    color:#cbd5e1;

}

.roadmap-section{

    padding:80px 0;

    text-align:center;

}

.roadmap-section img{

    width:100%;

    margin-top:40px;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.about-content{

    padding:80px 0;

}

.about-content .container{

    display:grid;

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

    gap:30px;

}

.card{

    background:#1e293b;

    padding:30px;

    border-radius:20px;

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

    transition:0.3s ease;

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 30px rgba(0,0,0,.25);

}

.card h2{

    margin-bottom:20px;

}

.card p,
.card li{

    color:#cbd5e1;

    line-height:1.8;

}

.card ul{

    padding-left:20px;

}

/* ===============================
   Large Tablets (992px)
================================ */

@media (max-width:992px){

    .about-hero{

        padding:80px 20px;

    }

    .about-hero h1{

        font-size:2.5rem;

    }

    .about-hero p{

        font-size:1rem;

        max-width:700px;

    }

    .roadmap-section{

        padding:60px 20px;

    }

    .about-content{

        padding:60px 20px;

    }

}

/* ===============================
   Tablets (768px)
================================ */

@media (max-width:768px){

    .about-hero{

        padding:70px 20px;

    }

    .about-hero h1{

        font-size:2rem;

        line-height:1.3;

    }

    .about-hero p{

        font-size:0.95rem;

        line-height:1.7;

    }

    .roadmap-section{

        padding:50px 20px;

    }

    .roadmap-section h2{

        font-size:2rem;

    }

    .roadmap-section img{

        margin-top:30px;

        border-radius:15px;

    }

    .about-content{

        padding:50px 20px;

    }

    .about-content .container{

        grid-template-columns:1fr;

        gap:25px;

    }

    .card{

        padding:25px;

    }

    .card h2{

        font-size:1.5rem;

    }

}

/* ===============================
   Mobile (576px)
================================ */

@media (max-width:576px){

    .about-hero{

        padding:60px 15px;

    }

    .about-hero h1{

        font-size:1.8rem;

    }

    .about-hero p{

        font-size:0.9rem;

    }

    .roadmap-section{

        padding:40px 15px;

    }

    .roadmap-section h2{

        font-size:1.7rem;

    }

    .roadmap-section img{

        border-radius:12px;

    }

    .about-content{

        padding:40px 15px;

    }

    .card{

        padding:20px;

        border-radius:15px;

    }

    .card h2{

        font-size:1.3rem;

    }

    .card p,

    .card li{

        font-size:0.95rem;

        line-height:1.7;

    }

}

/* ===============================
   Small Mobile (400px)
================================ */

@media (max-width:400px){

    .about-hero h1{

        font-size:1.5rem;

    }

    .about-hero p{

        font-size:0.85rem;

    }

    .roadmap-section h2{

        font-size:1.5rem;

    }

    .card{

        padding:18px;

    }

    .card h2{

        font-size:1.2rem;

    }

}