/* =========================================
   RESET
========================================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;
}

body{

    background:#f8f6f3;

    color:#222;

    font-family:'Poppins',sans-serif;
}

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

.about-page{

    max-width:1400px;

    margin:0 auto;

    padding:40px 24px 80px;
}

/* =========================================
   BREADCRUMB
========================================= */

.about-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:40px;

    font-size:14px;
}

.about-breadcrumb a{

    text-decoration:none;

    color:#777;
}

.about-breadcrumb a:hover{

    color:#7B4F2C;
}

.active-breadcrumb{

    color:#7B4F2C;

    font-weight:600;
}

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

.about-hero{

    text-align:center;

    max-width:850px;

    margin:0 auto 80px;
}

.about-label,
.section-label{

    display:inline-block;

    color:#7B4F2C;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:16px;
}

.about-hero h1{

    font-size:58px;

    line-height:1.2;

    color:#2f1e12;

    font-family:'Playfair Display',serif;

    margin-bottom:20px;
}

.about-hero p{

    font-size:16px;

    line-height:1.9;

    color:#666;
}

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

.about-story{

    display:grid;

    grid-template-columns:
    1.2fr 1fr;

    gap:50px;

    align-items:center;

    margin-bottom:90px;
}

.story-content h2{

    font-size:42px;

    color:#2f1e12;

    font-family:'Playfair Display',serif;

    margin-bottom:20px;
}

.story-content p{

    line-height:1.9;

    color:#666;

    margin-bottom:18px;
}

.story-image img{

    width:100%;

    border-radius:24px;

    display:block;

    object-fit:cover;
}

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

.about-features{

    display:grid;

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

    gap:24px;

    margin-bottom:90px;
}

.feature-card{

    background:#fff;

    border:1px solid #ece5dc;

    border-radius:24px;

    padding:30px;

    text-align:center;

    transition:.25s;
}

.feature-card:hover{

    transform:translateY(-4px);
}

.feature-icon{

    font-size:36px;

    margin-bottom:16px;
}

.feature-card h3{

    margin-bottom:12px;

    color:#2f1e12;
}

.feature-card p{

    color:#666;

    line-height:1.7;
}

/* =========================================
   PROCESS
========================================= */

.about-process{

    text-align:center;

    margin-bottom:90px;
}

.about-process h2{

    font-size:42px;

    color:#2f1e12;

    font-family:'Playfair Display',serif;

    margin-bottom:40px;
}

.process-grid{

    display:grid;

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

    gap:24px;
}

.process-step{

    background:#fff;

    border:1px solid #ece5dc;

    border-radius:24px;

    padding:30px;
}

.process-step span{

    display:inline-flex;

    width:60px;

    height:60px;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    background:#7B4F2C;

    color:#fff;

    font-weight:600;

    margin-bottom:18px;
}

.process-step h3{

    color:#2f1e12;
}

/* =========================================
   STATS
========================================= */

.about-stats{

    display:grid;

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

    gap:24px;

    margin-bottom:90px;
}

.stat-card{

    background:#fff;

    border:1px solid #ece5dc;

    border-radius:24px;

    padding:30px;

    text-align:center;
}

.stat-card h3{

    font-size:42px;

    color:#7B4F2C;

    margin-bottom:10px;
}

.stat-card p{

    color:#666;
}

/* =========================================
   CTA
========================================= */

.about-cta{

    background:#fff;

    border:1px solid #ece5dc;

    border-radius:30px;

    padding:60px 30px;

    text-align:center;
}

.about-cta h2{

    font-size:42px;

    color:#2f1e12;

    font-family:'Playfair Display',serif;

    margin-bottom:14px;
}

.about-cta p{

    color:#666;

    margin-bottom:24px;
}

.about-contact-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    background:#7B4F2C;

    color:#fff;

    text-decoration:none;

    border-radius:14px;

    font-weight:600;

    transition:.25s;
}

.about-contact-btn:hover{

    background:#8b5a35;
}

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

@media(max-width:1024px){

    .about-story{

        grid-template-columns:1fr;
    }

    .about-features,
    .process-grid,
    .about-stats{

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

}

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

@media(max-width:768px){

    .about-page{

        padding:24px 14px 50px;
    }

    .about-hero{

        margin-bottom:50px;
    }

    .about-hero h1{

        font-size:38px;
    }

    .story-content h2,
    .about-process h2,
    .about-cta h2{

        font-size:30px;
    }

    .about-features,
    .process-grid,
    .about-stats{

        grid-template-columns:1fr;
    }

    .feature-card,
    .process-step,
    .stat-card{

        padding:24px;
    }

    .about-cta{

        padding:40px 20px;
    }

}

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

@media(max-width:480px){

    .about-hero h1{

        font-size:32px;
    }

    .story-content h2,
    .about-process h2,
    .about-cta h2{

        font-size:26px;
    }

}