/* Secondary Pages Light Theme Styles */

.page-header {
    padding: 180px 0 100px;
    background: linear-gradient(135deg, var(--bg-surface-elevated), var(--bg-surface));
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.page-header::after {
    content: ''; position: absolute; width: 300px; height: 300px;
    background: var(--primary-red); filter: blur(100px); opacity: 0.1;
    bottom: -100px; right: -100px;
}

.page-header h1 { font-size: 3.5rem; margin-bottom: 1rem; position: relative; z-index: 2; color: var(--primary-navy); }
.breadcrumb { font-size: 1.05rem; color: var(--text-muted); position: relative; z-index: 2; margin-bottom: 0; padding: 0; background: transparent;}
.breadcrumb a { color: var(--primary-navy); font-weight: 500; }
.breadcrumb a:hover { color: var(--primary-red); }

/* About Page */
.about-content h2 { font-size: 2.8rem; color: var(--primary-navy); margin-bottom: 1.5rem; line-height: 1.2; }
.about-content p { margin-bottom: 1.5rem; color: var(--text-muted); font-size: 1.15rem; line-height: 1.7; }
.about-list { padding: 0; }
.about-list li { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; font-size: 1.15rem; color: var(--primary-navy); font-weight: 600; }
.about-list i { color: var(--primary-red); font-size: 1.2rem; }

.faq-item {
    background: var(--bg-surface); border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px; padding: 2rem; margin-bottom: 1.5rem;
    box-shadow: 0 5px 15px rgba(21,48,91,0.03); transition: var(--transition);
}
.faq-item:hover { box-shadow: 0 15px 30px rgba(21,48,91,0.08); transform: translateY(-5px); border-color: rgba(21,48,91,0.1); }
.faq-item h3 { color: var(--primary-navy); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.8rem; font-size: 1.3rem; }
.faq-item p { color: var(--text-muted); margin: 0; }

/* Services Page */
.service-detail-card {
    background: var(--bg-surface); border-radius: 20px; padding: 3rem; height: 100%;
    box-shadow: 0 10px 30px rgba(21,48,91,0.04); transition: var(--transition);
    border: 1px solid rgba(0,0,0,0.04); border-top: 5px solid var(--primary-navy);
}
.service-detail-card:hover { transform: translateY(-10px); border-top-color: var(--primary-red); box-shadow: 0 20px 40px rgba(21,48,91,0.1); }
.service-detail-card .icon { font-size: 3.5rem; color: var(--primary-navy); margin-bottom: 1.5rem; transition: var(--transition); }
.service-detail-card:hover .icon { color: var(--primary-red); }
.service-detail-card h3 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--primary-navy); }
.service-detail-card p { color: var(--text-muted); font-size: 1.05rem; }
.service-detail-card ul { margin-top: 1.5rem; padding-left: 0; list-style: none; }
.service-detail-card ul li { position: relative; padding-left: 2.2rem; margin-bottom: 0.8rem; color: var(--text-main); font-weight: 500;}
.service-detail-card ul li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 2px; color: var(--primary-red);
}

/* Contact Page */
.contact-info-card {
    background: var(--bg-surface); border: 1px solid rgba(0,0,0,0.05); padding: 2.5rem;
    border-radius: 20px; margin-bottom: 2rem; box-shadow: 0 5px 15px rgba(21,48,91,0.04); transition: var(--transition);
}
.contact-info-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(21,48,91,0.1); border-color: rgba(21,48,91,0.1); }
.contact-info-card i { font-size: 2rem; color: var(--primary-red); margin-bottom: 1rem; }
.contact-info-card h3 { color: var(--primary-navy); margin-bottom: 0.5rem; font-size: 1.3rem; }
.contact-info-card p, .contact-info-card a { color: var(--text-muted); font-size: 1.1rem; }
.contact-info-card a:hover { color: var(--primary-red); }

.contact-form {
    background: var(--bg-surface); padding: 3rem; border-radius: 20px;
    box-shadow: 0 15px 40px rgba(21,48,91,0.08); border: 1px solid rgba(0,0,0,0.05);
}

.form-label { font-weight: 600; color: var(--primary-navy); margin-bottom: 0.5rem; }
.form-control {
    background: var(--bg-surface-elevated); border: 1px solid transparent; color: var(--text-main);
    padding: 1rem; border-radius: 12px; transition: var(--transition); caret-color: var(--primary-red);
}
.form-control::placeholder { color: #94a3b8; }
.form-control:focus {
    background: white; border-color: var(--primary-red);
    box-shadow: 0 0 0 4px rgba(148, 23, 27, 0.1); color: var(--text-main);
}
textarea.form-control { min-height: 160px; resize: vertical; }

@media (max-width: 768px) {
    .page-header h1 { font-size: 2.5rem; }
    .page-header { padding: 140px 0 60px; }
    .contact-form { padding: 2rem; }
}