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

.story-section{

    max-width:1400px;

    margin:140px auto;

    padding:0 50px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

/*==============================
            IMAGE
==============================*/

.story-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.story-background{

    position:absolute;

    width:88%;

    height:92%;

    background:#eaf8ee;

    border-radius:35px;

    transform:rotate(-5deg);

    z-index:1;

}

.story-image img{

    position:relative;

    width:100%;

    max-width:560px;

    border-radius:30px;

    box-shadow:0 30px 70px rgba(0,0,0,.18);

    z-index:2;

    transition:.4s;

}

.story-image:hover img{

    transform:scale(1.02);

}

/*==============================
      EXPERIENCE CARD
==============================*/

.experience-card{

    position:absolute;

    right:-25px;

    bottom:35px;

    background:white;

    padding:28px 35px;

    border-radius:22px;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

    text-align:center;

    z-index:5;

}

.experience-card h3{

    font-size:3rem;

    color:#59c978;

    margin:0;

}

.experience-card span{

    display:block;

    margin-top:10px;

    color:#666;

    font-weight:600;

}

/*==============================
            CONTENT
==============================*/

.story-content h2{

    font-size:3.2rem;

    color:#163c29;

    margin:18px 0 30px;

    line-height:1.2;

}

.story-intro{

    font-size:1.2rem;

    font-weight:600;

    color:#163c29;

    margin-bottom:25px;

    line-height:1.8;

}

.story-content p{

    color:#5d5d5d;

    line-height:1.9;

    margin-bottom:22px;

}

.story-content strong{

    color:#163c29;

}

/*==============================
        HIGHLIGHTS
==============================*/

.story-highlights{

    display:grid;

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

    gap:20px;

    margin:45px 0;

}

.highlight{

    display:flex;

    gap:18px;

    align-items:center;

    padding:18px;

    background:white;

    border-radius:20px;

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

    transition:.3s;

}

.highlight:hover{

    background:#163c29;

    transform:translateY(-5px);

}

.highlight:hover i,
.highlight:hover strong,
.highlight:hover span{

    color:white;

}

.highlight i{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#59c978;

    color:white;

    font-size:22px;

    flex-shrink:0;

}

.highlight strong{

    display:block;

    color:#163c29;

}

.highlight span{

    display:block;

    margin-top:4px;

    color:#666;

    font-size:14px;

}

/*==============================
            BUTTON
==============================*/

.family-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 28px;

    border-radius:999px;

    background:#59c978;

    color:white;

    font-weight:600;

    transition:.3s;

}

.family-btn:hover{

    background:#163c29;

    transform:translateY(-3px);

}