/*==================================================
JOURNEY PREVIEW
==================================================*/

.journey-preview{

    padding:8rem 0;

    background:linear-gradient(

        180deg,

        #faf8f4 0%,

        #f4f0ea 100%

    );

    position:relative;

    overflow:hidden;

}


/*=========================================
TIMELINE
=========================================*/

.journey-preview-timeline{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:2rem;

    margin:5rem 0;

}


/*=========================================
LINE
=========================================*/

.journey-preview-line{

    position:absolute;

    top:48px;

    left:6%;

    right:6%;

    height:2px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(200,161,90,.45),

        transparent

    );

    z-index:1;

}


/*=========================================
STEP
=========================================*/

.journey-preview-step{

    position:relative;

    flex:1;

    text-align:center;

    z-index:2;

}


/*=========================================
ICON
=========================================*/

.journey-preview-icon{

    width:92px;

    height:92px;

    margin:0 auto 1.5rem;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

        0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.journey-preview-icon img{

    width:46px;

    height:46px;

    object-fit:contain;

}


/*=========================================
HOVER
=========================================*/

.journey-preview-step:hover .journey-preview-icon{

    transform:translateY(-8px);

    box-shadow:

        0 20px 40px rgba(200,161,90,.22);

}


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

.journey-preview-step h3{

    margin-bottom:.75rem;

    font-family:var(--font-heading);

    font-size:1.4rem;

    color:var(--green);

}


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

.journey-preview-step p{

    max-width:170px;

    margin:auto;

    line-height:1.7;

    color:#666;

    font-size:.95rem;

}


/*=========================================
QUOTE
=========================================*/

.journey-preview-quote{

    max-width:760px;

    margin:5rem auto 3rem;

    text-align:center;

    font-family:var(--font-heading);

    font-size:2rem;

    line-height:1.6;

    color:var(--green);

    font-style:italic;

    position:relative;

}

.quote-feather{
    max-width: 150px;
    
    margin:5rem auto 3rem;
    
    right:8%;

    top:28%;

    width:260px;

    z-index:1;

    animation:heroFloat 6s ease-in-out infinite;


}

.journey-preview-quote::before{

    content:"“";

    position:absolute;

    left:-25px;

    top:-25px;

    font-size:5rem;

    color:rgba(200,161,90,.25);

}

.journey-preview-quote::after{

    content:"”";

    position:absolute;

    right:-15px;

    bottom:-40px;

    font-size:5rem;

    color:rgba(200,161,90,.25);

}

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

.journey-preview-footer{

    text-align:center;

}


/*==================================================
TABLET
==================================================*/

@media (max-width:992px){

.journey-preview-timeline{

    flex-wrap:wrap;

    justify-content:center;

    row-gap:3rem;

}

.journey-preview-step{

    width:30%;

    flex:none;

}

.journey-preview-line{

    display:none;

}

}


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

@media (max-width:768px){

.journey-preview{

    padding:6rem 0;

}

.journey-preview-timeline{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:3rem;

}

.journey-preview-step{

    width:100%;

    max-width:320px;

}

.journey-preview-line{

    display:none;

}

.journey-preview-icon{

    width:82px;

    height:82px;

}

.journey-preview-icon img{

    width:40px;

    height:40px;

}

.journey-preview-step h3{

    font-size:1.3rem;

}

.journey-preview-quote{

    font-size:1.6rem;

}

}