html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 80px;
}

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

#about_section{
    width:100%;
    background:#fff;
    padding:100px 0;
    padding-bottom:30px;
}

.about-grid{
    width:1200px;
    max-width:92%;
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr .85fr;
    gap:80px;
    align-items:center;
}

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

.about-eyebrow{
    display:block;
    font-size:14px;
    font-weight:700;
    letter-spacing:.4px;
    color:#2f2f2f;
    margin-bottom:26px;
}

.about-name{
    font-size:24px;
    font-weight:600;
    color:#1f1f1f;
    margin:0 0 8px;
}

.about-role{
    font-size:18px;
    color:#444;
    margin:0 0 20px;
}

.about-badge{
    display:inline-block;

    font-size:12px;
    font-weight:400;
    letter-spacing:.3px;
    text-transform:uppercase;

    color:#ee5149;
    border:1px solid #f3c6c3;
    background:#fdf3f2;

    padding:8px 16px;
    border-radius:30px;

    margin-bottom:36px;
}

.about-story h3{
    font-size:16px;
    font-weight:400;
    color:#1f1f1f;
    margin:0px;
}

.about-story p{
    font-size:16px;
    line-height:1.85;
    color:#4a4a4a;
    margin-top:10px;
}

.about-story p:last-child{
    margin-bottom:0;
}

/*==========================================
 PHOTO
==========================================*/

.about-image-wrap{
    background:#e5e3e0;
    border-radius:24px;
    overflow:hidden;

    aspect-ratio:4/5;
    width:100%;
    max-width:380px;   /* Adjust size */
    margin:0 auto;     /* Center the image */
}

.about-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    filter:grayscale(100%);
    transition:filter .5s ease, transform .5s ease;
}

.about-image-wrap:hover .about-photo{
    filter:grayscale(0%);
    transform:scale(1.03);
}


/*==========================================
 RESPONSIVE
==========================================*/
@media (max-width: 768px){

    .about-grid{
        grid-template-columns: 1fr;
        gap: 35px;
    }

    /* Bring image to the top */
    .about-image-wrap{
        order: -1;
    }

}



#backToTop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: #ee5149;
    color: #fff;
    cursor: pointer;
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);

    transition: all .3s ease;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#backToTop:hover {
    background: #d93d35;
}