.quote-section{
    position:relative;
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
}

.quote-container{
    width:100%;
    max-width:680px;
    margin:0 auto;
    padding:40px 28px;
}

.quote-content{
    min-height: 100vh;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    text-align:center;
}

/* ===========================
   HEADER
=========================== */
.quote-header{
    position: absolute;
    top: 100px;
    left: 28px;
    right: 28px;
    text-align: center;
}

.quote-subtitle{
    margin:18px;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;
}

.quote-title{
    font-family:var(--heading);
    font-size:3rem;
    font-weight:500;
    line-height:.95;
}

.quote-title span{
    opacity:.35;
}

.quote-verse{
    position: absolute;
    top: 50%;
    left: 28px;
    right: 28px;
    transform: translateY(-50%);
    text-align:center;
}

.verse-title{
    margin-bottom:12px;
}

.verse-text{
    line-height:1.8;
}

@media (min-width:768px){
    .quote-verse{
        max-width:620px;
        margin: 0 auto;
    }
}

@media (min-width:1200px){
    .quote-verse{
        max-width:700px;
        margin: 0 auto;
    }
}

/* ========================================
   QUOTE ANIMATION
======================================== */
.quote-header,
.quote-verse,
.verse-text{
    opacity:0;
    transform:translateY(35px);
    transition:opacity 1.2s ease, transform 1.2s ease;
}

.quote-section.is-visible .quote-header{
    opacity:1;
    transform:translateY(0);
    transition-delay:.2s;
}

.quote-section.is-visible .quote-verse{
    opacity:1;
    transform:translateY(0);
    transition-delay:.2s;
}

.quote-section.is-visible .verse-text{
    opacity:1;
    transform:translateY(0);
    transition-delay:.2s;
}