/* Healthcare Section Backgrounds */
.bg-heartbeat {
    background-color: #f8f9fa;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='30' viewBox='0 0 60 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15h15l5-5 5 10 5-10 5 5h25' stroke='%230066cc' stroke-width='1' fill='none' stroke-opacity='0.1'/%3E%3C/svg%3E");
}

.bg-medical-cross {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 5h10v10h10v10H25v10H15V25H5V15h10V5z' fill='%232ecc71' fill-opacity='0.05'/%3E%3C/svg%3E");
}

.bg-dna {
    background-color: #f0f8ff;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20c10 0 10 10 20 10s10-10 20-10s10 10 20 10M20 40c10 0 10 10 20 10s10-10 20-10s10 10 20 10M20 60c10 0 10 10 20 10s10-10 20-10s10 10 20 10' stroke='%230066cc' stroke-width='2' fill='none' stroke-opacity='0.1'/%3E%3C/svg%3E");
}

.bg-stethoscope {
    background-color: #f5f5f5;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='40' r='10' fill='none' stroke='%232ecc71' stroke-width='2' stroke-opacity='0.1'/%3E%3Cpath d='M30 30V10M20 10h20' stroke='%232ecc71' stroke-width='2' stroke-opacity='0.1'/%3E%3C/svg%3E");
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.preloader.fade-out {
    opacity: 0;
}

.medical-loader {
    width: 100px;
    height: 100px;
    position: relative;
}

.medical-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0066cc;
    border-right: 4px solid #2ecc71;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.medical-loader::after {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #0066cc;
    font-weight: bold;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Section Background Colors */
.hero-section {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.features-section {
    background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);
}

.stats-section {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.services-section {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
}

.doctors-section {
    background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%);
}

.department-filter-section {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
}

.doctors-grid {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
}

/* Appointment Page Sections */
.appointment-section {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    position: relative;
    overflow: hidden;
}

.info-section {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    position: relative;
    overflow: hidden;
}

.info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230066cc' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
}

/* Healthcare Icons Animation */
.healthcare-icon {
    position: relative;
    animation: pulse-grow 2s ease-in-out infinite;
}

@keyframes pulse-grow {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Medical Cross Animation */
.medical-cross {
    position: relative;
    width: 40px;
    height: 40px;
}

.medical-cross::before,
.medical-cross::after {
    content: '';
    position: absolute;
    background: #0066cc;
}

.medical-cross::before {
    width: 100%;
    height: 25%;
    top: 37.5%;
    animation: pulse-opacity 2s ease-in-out infinite;
}

.medical-cross::after {
    width: 25%;
    height: 100%;
    left: 37.5%;
    animation: pulse-opacity 2s ease-in-out infinite;
}

@keyframes pulse-opacity {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.title-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.title-decoration .line {
    width: 60px;
    height: 2px;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.2), rgba(0, 102, 204, 0.5));
    border-radius: 2px;
}

.title-decoration .dot {
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    position: relative;
}

.title-decoration .dot::before,
.title-decoration .dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0.5;
    animation: ripple 2s infinite;
}

.title-decoration .dot::after {
    animation-delay: 0.3s;
}

@keyframes ripple {
    0% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5; 
    }
    100% { 
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0; 
    }
}

/* Contact Page Sections */
.contact-info {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    position: relative;
    overflow: hidden;
}

.map-section {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    position: relative;
    overflow: hidden;
}

.contact-form-section {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    position: relative;
    overflow: hidden;
}

.working-hours {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    position: relative;
    overflow: hidden;
}

.working-hours::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232ecc71' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
}