.about-page{
    background: var(--background);
    padding: 60px 0;
}

/* HERO */
.about-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border-radius: 16px;
}

.about-header h1 {
    font-size: 36px;
    margin-bottom: 8px;
}

.about-header p {
    opacity: 0.9;
}

/* CONTAINER */
.about-container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* GRID */
.about-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:40px;
    align-items:center;
}

/* TEXT */
.about-text h2{
    font-size:28px;
    color:var(--primary);
    margin-bottom:15px;
}

.about-text p{
    line-height:1.7;
    margin-bottom:12px;
    color:var(--text-dark);
}

/* IMAGE */
.about-image img{
    width:100%;
    border-radius:16px;
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
    transition:0.4s;
}

.about-image img:hover{
    transform:scale(1.03);
}

/* FEATURES */
.about-features{
    width:90%;
    max-width:1100px;
    margin:60px auto 0;

    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:25px;
}

.feature-card{
    background:white;
    padding:25px;
    border-radius:16px;
    text-align:center;
    border:1px solid rgba(201,162,39,0.25);
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    transition:0.4s;
}

.feature-card:hover{
    transform:translateY(-10px);
    border-color:var(--accent);
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.feature-card h3{
    color:var(--primary);
    margin-bottom:10px;
}

.feature-card p{
    font-size:13px;
    opacity:0.8;
}