/*=========================================
    ABOUT PAGE
=========================================*/
@import url('https://fonts.cdnfonts.com/css/canela-text-trial');
@import url('https://fonts.cdnfonts.com/css/special-elite');
@import url('https://fonts.cdnfonts.com/css/ibm-plex-mono-3');
@import url('https://fonts.cdnfonts.com/css/neue-haas-grotesk-display-pro');
.about{

    position:relative;

    width:100%;
    min-height:100vh;

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

    padding:120px 40px;

    z-index:2;

}

/* Dark overlay to make text readable */

.about::before{

    content:"";

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.58);

    pointer-events:none;

    z-index:-1;

}

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

.about-content{

    width:min(700px,90vw);

    display:flex;
    flex-direction:column;

    align-items:center;

    text-align:center;

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp 1.2s ease forwards;

    animation-delay:.35s;

}


/*=========================================
    SMALL LABEL
=========================================*/

.section-label{

    font-family:"Inter",sans-serif;

    font-size:.8rem;

    letter-spacing:.45em;

    text-transform:uppercase;

    color:rgba(255,255,255,.65);

    margin-bottom:18px;

}

/*=========================================
    TITLE
=========================================*/

.about-content h1{

    font-family:"Canela",serif;

    font-size:clamp(3.5rem,7vw,6rem);

    font-weight:400;

    line-height:1;

    letter-spacing:-2px;

    color:#fff;

}

/*=========================================
    DIVIDER
=========================================*/

.divider{

    width:90px;

    height:1px;

    background:rgba(255,255,255,.28);

    margin:42px 0;

}

/*=========================================
    PARAGRAPHS
=========================================*/

.about-content p{

    font-family:"IBM Plex Mono",monospace;

    font-size:1.05rem;

    line-height:2;

    color:rgba(255,255,255,.82);

    max-width:620px;

}

.about-content p + p{

    margin-top:28px;

}

/*=========================================
    ANIMATION
=========================================*/

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

@media(max-width:768px){

    .about{

        padding:120px 30px 80px;

    }

    .about-content h1{

        font-size:3rem;

    }

    .about-content p{

        font-size:.95rem;

        line-height:1.9;

    }

    .divider{

        margin:30px 0;

        width:70px;

    }

}