/*
Theme Name: Sharma Clinic
Theme URI: https://sharmaclinic.in
Author: MyGlobalCV
Description: A medical clinic theme converted from Tailwind HTML.
Version: 1.1
License: GNU General Public License v2 or later
*/

.alignnone { margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }

.current-menu-item > a {
    color: #3d686b !important;
    font-weight: 900;
    position: relative;
}
.current-menu-item > a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #3d686b;
}

.page-section { animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.specialty-card { transition: all 0.3s ease; padding: 2.5rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; border-radius: 1.5rem; background: #fff; border: 1px solid rgba(124, 155, 131, 0.1); }
.specialty-card:hover { transform: translateY(-10px); background-color: #cecba6; border-color: #3d686b; box-shadow: 0 20px 25px -5px rgba(34, 62, 80, 0.1); }
.specialty-card i { color: #223e50; font-size: 4.5rem; margin-bottom: 2rem; display: block; height: 80px; transition: color 0.3s; }
.specialty-card:hover i { color: #3d686b; }

.doctor-frame { width: 320px; height: 320px; border-radius: 50%; border: 12px solid #cecba6; overflow: hidden; background: #fff; position: relative; z-index: 10; box-shadow: 0 20px 40px rgba(34, 62, 80, 0.3); }
@media (min-width: 768px) { .doctor-frame { width: 420px; height: 420px; } }
.name-plate { background: #223e50; color: #cecba6; padding: 1rem 4rem; border-radius: 0.5rem; font-weight: 900; font-size: 1.5rem; margin-top: -30px; position: relative; z-index: 20; box-shadow: 0 10px 20px rgba(0,0,0,0.2); white-space: nowrap; letter-spacing: 0.1em; }

.geometric-bg { position: relative; overflow: hidden; }
.geometric-bg::before { content: ''; position: absolute; top: -10%; left: -5%; width: 30%; height: 120%; background: #cecba6; opacity: 0.1; transform: rotate(-15deg); pointer-events: none; }
.geometric-bg::after { content: ''; position: absolute; bottom: -10%; right: -5%; width: 25%; height: 100%; background: #3d686b; opacity: 0.05; transform: rotate(15deg); pointer-events: none; }