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

.about-story{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

    margin-top:40px;

}

.story-image img{

    width:100%;

    height:450px;

    object-fit:cover;

    border-radius:25px;

    box-shadow:var(--shadow);

}

.story-content{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.story-content p{

    color:var(--muted);

    line-height:1.9;

    text-align:justify;

    font-size:16px;

}

/*==================================================
                ABOUT GRID
==================================================*/

.about-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.about-card{

    background:var(--panel);

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;

}

.about-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}

.about-card i{

    font-size:55px;

    color:var(--accent);

    margin-bottom:20px;

}

.about-card h3{

    margin-bottom:15px;

}

.about-card p{

    color:var(--muted);

    line-height:1.8;

}


/*==================================================
                    CHEF
==================================================*/

.chef-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.chef-card{

    background:var(--panel);

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.3s;

}

.chef-card:hover{

    transform:translateY(-8px);

}

.chef-card img{

    width:100%;

    height:330px;

    object-fit:cover;

}

.chef-card h3{

    margin:20px;

}

.chef-card p{

    margin:0 20px 25px;

    color:var(--muted);

}


/*==================================================
                FEATURE
==================================================*/

.feature-grid{

    display:grid;

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

    gap:25px;

    margin-top:50px;

}

.feature-card{

    background:var(--panel);

    border-radius:18px;

    padding:35px;

    text-align:center;

    transition:.3s;

    box-shadow:var(--shadow);

}

.feature-card:hover{

    background:var(--accent);

    color:white;

}

.feature-card i{

    font-size:48px;

    margin-bottom:18px;

    color:var(--accent);

}

.feature-card:hover i{

    color:white;

}


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

@media(max-width:1000px){

.about-story{

grid-template-columns:1fr;

}

.about-grid{

grid-template-columns:1fr;

}

.chef-grid{

grid-template-columns:1fr;

}

.feature-grid{

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

}

}

@media(max-width:768px){

.feature-grid{

grid-template-columns:1fr;

}

.story-image img{

height:280px;

}

}