/*=========================================
THERAPY PROCESS
=========================================*/

.therapy-process-section{

    position:relative;

    padding:160px 0;

    background:#FCFAF7;

    overflow:hidden;

}

/*=========================================
BACKGROUND
=========================================*/

.therapy-process-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-250px;

    top:-150px;

    border-radius:50%;

    background:rgba(214,228,239,.28);

    filter:blur(120px);

}

.therapy-process-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:rgba(201,169,106,.10);

    filter:blur(100px);

}

/*=========================================
SECTION HEADING
=========================================*/

.therapy-process-section .section-heading{

    position:relative;

    z-index:5;

    max-width:760px;

    margin:0 auto 100px;

}

.section-description{

    margin-top:20px;

}

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

.therapy-timeline{

    position:relative;

    max-width:1200px;

    margin:auto;

}

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

.timeline-line{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:2px;

    height:100%;

    background:linear-gradient(

        to bottom,

        rgba(201,169,106,.15),

        rgba(201,169,106,1),

        rgba(201,169,106,.15)

    );

}

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

.timeline-item{

    position:relative;

    width:50%;

    margin-bottom:90px;

}

.timeline-item.left{

    padding-right:80px;

}

.timeline-item.right{

    margin-left:50%;

    padding-left:80px;

}

/*=========================================
CARD
=========================================*/

.timeline-card{

    position:relative;

    padding:45px;

    border-radius:30px;

    background:rgba(220,232,242,.18);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.75);

    box-shadow:

    0 25px 70px rgba(0,0,0,.07);

    transition:.45s ease;

}

.timeline-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 40px 90px rgba(0,0,0,.10);

}

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

.step-number{

    position:absolute;

    right:30px;

    top:25px;

    font-size:70px;

    font-weight:700;

    color:rgba(201,169,106,.12);

    line-height:1;

}

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

.timeline-item::before{

    content:"";

    position:absolute;

    top:70px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--gold);

    border:5px solid #fff;

    box-shadow:

        0 0 0 10px rgba(201,169,106,.15);

    z-index:20;

}

.timeline-item.left::before{

    right:-11px;

}

.timeline-item.right::before{

    left:-11px;

}

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

.timeline-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border:1px solid rgba(255,255,255,.80);

    margin-bottom:30px;

    transition:.35s;

}

.timeline-icon img{

    width:46px;

}

.timeline-card:hover .timeline-icon{

    transform:rotate(8deg) scale(1.08);

}

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

.timeline-card h3{

    font-size:34px;

    margin-bottom:18px;

    transition:.35s;

}

.timeline-card:hover h3{

    color:var(--gold);

}

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

.timeline-card p{

    line-height:1.9;

    margin:0;

}

/*=========================================
CTA
=========================================*/

.timeline-cta{

    margin-top:80px;

}

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

@media(max-width:991px){

.therapy-process-section{

    padding:100px 0;

}

.timeline-line{

    left:22px;

}

.timeline-item{

    width:100%;

    padding-left:70px !important;

    padding-right:0 !important;

    margin-left:0 !important;

}

.timeline-item::before{

    left:11px !important;

}

.timeline-card{

    padding:35px;

}

.timeline-card h3{

    font-size:28px;

}

}

@media(max-width:767px){

.timeline-card{

    padding:28px;

    border-radius:22px;

}

.timeline-icon{

    width:75px;

    height:75px;

}

.timeline-icon img{

    width:38px;

}

.step-number{

    font-size:44px;

}

.timeline-card h3{

    font-size:24px;

}

.timeline-item{

    margin-bottom:50px;

}

}