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

.st-about{

    position:relative;
    overflow:hidden;

    padding:140px 6%;

    background:#F8F4EE;

}

.st-about-wrapper{

    position:relative;

    max-width:1400px;
    margin:0 auto;

}

/* ======================================================
   TOP
====================================================== */

.st-about-top{

    margin-bottom:80px;

}

.st-about-header{

    max-width:720px;

}

.st-about-header span{

    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:18px;

    font-size:12px;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;

    color:#D56C61;

}

.st-about-header span::after{

    content:"";

    width:70px;
    height:1px;

    background:#D56C61;

}

.st-about-header h2{

    margin:0;

    font-size:clamp(52px,5vw,82px);
    line-height:1.05;
    font-weight:600;

    color:#173B59;

}

.st-about-header h2 em{

    display:block;

    margin-top:10px;

    font-family:"Cormorant Garamond",serif;
    font-style:italic;
    font-weight:400;

    color:#E86B63;

}

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

.st-about-content{

    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

    margin-bottom:110px;

}

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

.st-about-image{

    position:relative;

}

.st-about-photo{

    position:relative;

    max-width:560px;

}

.st-about-photo img{

    display:block;

    width:100%;
    height:auto;

    border-radius:30px;

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

}

.st-about-sticker{

    position:absolute;

    right:-30px;
    top:40px;

    width:120px;
    height:120px;

    border-radius:50%;

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

    background:#E86B63;
    color:#fff;

    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    line-height:1.4;

    transform:rotate(12deg);

    box-shadow:0 20px 40px rgba(232,107,99,.30);

}

/* ==========================
   TEXT
========================== */

.st-about-text{

    max-width:560px;

}

.st-about-text h3{

    margin:0 0 28px;

    font-size:42px;
    line-height:1.15;
    font-weight:600;

    color:#173B59;

}

.st-about-text p{

    margin:0 0 24px;

    font-size:18px;
    line-height:1.9;

    color:#5D6673;

}

.st-about-signature{

    margin-top:50px;
    padding-top:30px;

    border-top:1px solid rgba(23,59,89,.12);

}

.st-about-signature strong{

    display:block;

    margin-bottom:8px;

    font-size:22px;
    font-weight:600;

    color:#173B59;

}

.st-about-signature span{

    font-size:15px;
    line-height:1.8;

    color:#7D8793;

}

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

.st-about-stats{

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

    gap:40px;

    padding-top:70px;

    border-top:1px solid rgba(23,59,89,.10);

}

.st-about-stat{

    text-align:center;

}

.st-about-stat h4{

    margin:0 0 10px;

    font-size:clamp(44px,5vw,72px);
    line-height:1;
    font-weight:600;

    color:#173B59;

}

.st-about-stat span{

    display:block;

    font-size:15px;
    letter-spacing:2px;
    text-transform:uppercase;

    color:#D56C61;

}

/* ======================================================
   DECORATION
====================================================== */

.st-about-decoration{

    position:absolute;

    top:120px;
    right:-80px;

    width:260px;

    opacity:.08;

    pointer-events:none;

}

.st-about-decoration img{

    display:block;
    width:100%;
    height:auto;

}

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

@media (max-width:991px){

    .st-about{

        padding:100px 6%;

    }

    .st-about-content{

        grid-template-columns:1fr;

        gap:70px;

        margin-bottom:80px;

    }

    .st-about-photo{

        max-width:520px;
        margin:auto;

    }

    .st-about-text{

        max-width:100%;
        text-align:center;

    }

    .st-about-signature{

        text-align:center;

    }

    .st-about-stats{

        grid-template-columns:1fr;

        gap:40px;

    }

    .st-about-decoration{

        display:none;

    }

}

@media (max-width:768px){

    .st-about{

        padding:80px 24px;

    }

    .st-about-header{

        text-align:center;
        margin:auto;

    }

    .st-about-header span{

        justify-content:center;

    }

    .st-about-header span::before{

        content:"";

        width:60px;
        height:1px;

        background:#D56C61;

    }

    .st-about-photo{

        max-width:100%;

    }

    .st-about-photo img{

        border-radius:24px;

    }

    .st-about-sticker{

        width:90px;
        height:90px;

        right:-12px;
        top:20px;

        font-size:12px;

    }

    .st-about-text h3{

        font-size:34px;

    }

    .st-about-text p{

        font-size:17px;
        line-height:1.8;

    }

    .st-about-stat h4{

        font-size:54px;

    }

}