/*=========================================
About Section
=========================================*/

.about-section{

    position:relative;

    padding:50px 0;

    background:#fff;

}

.about-wrapper{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:80px;

    align-items:center;

}

/*=========================================
Doctor Organic Shape
=========================================*/

.about-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.about-shape{

    width:480px;

    height:580px;

    overflow:hidden;

    border-radius:45% 55% 42% 58% / 35% 45% 55% 65%;

    position:relative;

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

    animation:morphShape 8s ease-in-out infinite;

}

.about-shape img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.about-shape:hover img{

    transform:scale(1.08);

}

/*=========================================
Google Rating Card
=========================================*/

.rating-card{

    position:absolute;

    top:50px;

    left:-30px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 24px;

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

    backdrop-filter:blur(20px);

    border-radius:20px;

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

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

}

.rating-card i{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#FFD54A;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.rating-card h4{

    font-size:22px;

    margin-bottom:4px;

}

.rating-card p{

    font-size:14px;

    color:var(--gray-600);

}

@keyframes morphShape{

    0%{

        border-radius:45% 55% 42% 58% / 35% 45% 55% 65%;

    }

    50%{

        border-radius:55% 45% 58% 42% / 60% 35% 45% 40%;

    }

    100%{

        border-radius:45% 55% 42% 58% / 35% 45% 55% 65%;

    }

}

@keyframes floatRating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.experience-card{

    position:absolute;

    right:-35px;

    bottom:40px;

    width:220px;

    padding:28px;

    border-radius:25px;

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

    backdrop-filter:blur(20px);

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

    text-align:center;

    animation:floatCard 3s ease-in-out infinite;

}

.experience-card h3{

    font-size:55px;

    color:var(--primary-color);

    margin-bottom:8px;

    line-height:1;

}

.experience-card span{

    font-size:15px;

    color:var(--gray-600);

    font-weight:600;

}

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

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    background:rgba(160,0,0,.08);

    color:var(--primary-color);

    border-radius:50px;

    font-weight:700;

    margin-bottom:20px;

}

.section-tag i{

    width:35px;

    height:35px;

    border-radius:50%;

    background:var(--primary-color);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}

.about-content h2{

    font-size:40px;

    line-height:1.15;

    margin-bottom:20px;

}

.about-content p{

    color:var(--gray-600);

    font-size:17px;

    line-height:1.8;

    margin-bottom:20px;

}

/*=========================================
Features
=========================================*/

.about-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:20px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

    background:#fff;

    border-radius:18px;

    border:1px solid var(--gray-200);

    transition:.4s;

}

.feature-item i{

    color:var(--primary-color);

    font-size:20px;

}

.feature-item:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

/*=========================================
Buttons
=========================================*/

.about-buttons{

    display:flex;

    gap:20px;

}

.primary-btn,

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 34px;

    border-radius:60px;

    font-weight:700;

    transition:.4s;

}

.primary-btn{

    background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));

    color:#fff;

}

.primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(160,0,0,.30);

}

.secondary-btn{

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

    color:var(--primary-color);

}

.secondary-btn:hover{

    background:var(--primary-color);

    color:#fff;

}

/*=========================================
Animation
=========================================*/

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================================
Responsive
=========================================*/

@media(max-width:991px){

    .about-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-image{

        max-width:550px;

        margin:auto;

    }

    .about-content{

        text-align:center;

    }

    .about-features{

        grid-template-columns:1fr 1fr;

    }

    .about-buttons{

        justify-content:center;

    }

}

@media(max-width:767px){

    .about-section{

        padding:80px 0;

    }

    .about-content h2{

        font-size:34px;

    }

    .about-content p{

        font-size:15px;

    }

    .about-features{

        grid-template-columns:repeat(2,1fr);

    }

    .about-buttons{

        flex-direction:column;

    }

    .experience-card{

        right:15px;

        bottom:15px;

        width:170px;

        padding:20px;

    }

    .experience-card h3{

        font-size:42px;

    }

}
/*=========================================
Background Glow
=========================================*/

.about-section{

    overflow:hidden;

}

.about-bg-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.18;

    z-index:0;

}

.shape-one{

    width:350px;

    height:350px;

    background:var(--primary-color);

    top:-100px;

    left:-100px;

    animation:moveShapeOne 8s ease-in-out infinite;

}

.shape-two{

    width:420px;

    height:420px;

    background:var(--secondary-color);

    right:-150px;

    bottom:-120px;

    animation:moveShapeTwo 10s ease-in-out infinite;

}

.about-section .container{

    position:relative;

    z-index:2;

}
@keyframes moveShapeOne{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(40px,40px);

    }

    100%{

        transform:translate(0,0);

    }

}

@keyframes moveShapeTwo{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-40px,-30px);

    }

    100%{

        transform:translate(0,0);

    }

}
.about-shape::before{

    content:"";

    position:absolute;

    inset:-20px;

    border-radius:inherit;

    background:linear-gradient(

        135deg,

        rgba(160,0,0,.20),

        rgba(240,79,78,.20)

    );

    filter:blur(30px);

    z-index:-1;

}
.about-shape::after{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid rgba(255,255,255,.35);

    border-radius:inherit;

    animation:borderPulse 3s infinite;

}
@keyframes borderPulse{

    0%{

        opacity:.4;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(1.02);

    }

    100%{

        opacity:.4;

        transform:scale(1);

    }

}
/* about content ul css */