/*=========================================
Why Choose Us
=========================================*/

.why-section{

    padding:50px 0;

    background:#fff;

    position:relative;

    overflow:hidden;

}

.why-wrapper{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:80px;

    align-items:center;

}

/*=========================================
Left Image
=========================================*/

.why-image{

    position:sticky;

    top:120px;

}

.doctor-image{

    position:relative;

    overflow:hidden;

    border-radius:40px;

    box-shadow:0 35px 80px rgba(0,0,0,.12);

}

.doctor-image img{

    width:100%;

    display:block;

    transition:.8s;

}

.doctor-image:hover img{

    transform:scale(1.08);

}

.doctor-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.35),

        transparent

    );

    z-index:1;

}

/*=========================================
Experience Card
=========================================*/

.experience-box{

    position:absolute;

    right:-25px;

    bottom:40px;

    width:180px;

    padding:25px;

    border-radius:28px;

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

    backdrop-filter:blur(20px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

    text-align:center;

    animation:experienceFloat 4s ease-in-out infinite;

}

.experience-box h3{

    font-size:40px;

    color:var(--primary-color);

    margin-bottom:8px;

}

.experience-box p{

    font-size:14px;

    color:var(--gray-600);

}

/*=========================================
Content
=========================================*/

.why-content h2{

    font-size:40px;
}

.why-content>p{

    color:var(--gray-600);

    margin-top:20px;

    line-height:1.8;
    margin-bottom:20px;

}

/*=========================================
Timeline
=========================================*/

.why-timeline{

    position:relative;

    padding-left:35px;

}

.why-timeline::before{

    content:"";

    position:absolute;

    left:20px;

    top:0;

    bottom:0;

    width:2px;

    background:#ececec;

}

.why-item{

    position:relative;

    display:flex;

    gap:22px;

    margin-bottom:35px;

    transition:.4s;

}

.why-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#fff;

    border:2px solid var(--primary-color);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary-color);

    flex-shrink:0;

    z-index:2;

    transition:.4s;

}

.why-text{

    padding:0 0 25px;

}

.why-text h4{

    font-size:24px;

    margin-bottom:10px;

}

.why-text p{

    color:var(--gray-600);

}

.why-item:hover{

    transform:translateX(12px);

}

.why-item:hover .why-icon{

    background:var(--primary-color);

    color:#fff;

    transform:rotate(360deg);

    box-shadow:0 15px 35px rgba(160,0,0,.30);

}
@keyframes experienceFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}
@media(max-width:991px){

    .why-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }

    .why-image{

        position:relative;

        top:auto;

    }

    .experience-box{

        right:20px;

        bottom:20px;

    }

    .why-content h2{

        font-size:36px;

    }

}

@media(max-width:767px){

    .why-section{

        padding:80px 0;

    }

    .why-timeline{

        padding-left:15px;

    }

    .why-timeline::before{

        left:22px;

    }

    .why-item{

        gap:18px;

    }

    .why-text h4{

        font-size:20px;

    }

}