/* --- START OF FILE services.css --- */
/* Styles specific to the services.html page - Revamped 2024 */

/* --- Page-Specific Body Background --- */
body.services-page {
    background-color: var(--body-bg);
    background-image: linear-gradient(135deg, rgba(var(--primary-rgb), 0.03) 25%, transparent 25%, transparent 50%, rgba(var(--primary-rgb), 0.03) 50%, rgba(var(--primary-rgb), 0.03) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    background-attachment: fixed;
    position: relative;
}
:root.dark-mode body.services-page {
    background-color: var(--body-bg-dark);
    background-image: linear-gradient(135deg, rgba(var(--primary-rgb-dark), 0.05) 25%, transparent 25%, transparent 50%, rgba(var(--primary-rgb-dark), 0.05) 50%, rgba(var(--primary-rgb-dark), 0.05) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    background-attachment: fixed;
}

/* --- Enhanced Page Header Styles --- */
/* Uses base .page-header-section, .header-pattern, .header-content, .header-icon etc. Add specific overrides below if needed */
.page-header-section.services-header::before { /* Example if specific needed */
    /* background: radial-gradient(...); */
}

/* --- Detailed Services Section (Accordion - Modern Look) --- */
#detailed-services { padding-top: 5rem; padding-bottom: 5rem; }
#detailed-services .section-title { position: relative; margin-bottom: 3rem; text-align: center; }
#detailed-services .section-title::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); border-radius: 2px; }
:root.dark-mode #detailed-services .section-title::after { background: linear-gradient(90deg, var(--primary-color-dark), var(--secondary-color-dark)); }

.services-accordion { max-width: 1100px; margin: 0 auto; }
.service-accordion-item { background-color: var(--card-bg); border-radius: 16px; margin-bottom: 1.8rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 90, 156, 0.08); overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; }
.service-accordion-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color)); opacity: 0; transition: all 0.4s ease; border-radius: 3px 0 0 3px; }
html[lang="ar"] .service-accordion-item::before { left: auto; right: 0; border-radius: 0 3px 3px 0; }
:root.dark-mode .service-accordion-item { background-color: var(--card-bg-dark); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); border-color: rgba(77, 171, 247, 0.12); }
:root.dark-mode .service-accordion-item::before { background: linear-gradient(to bottom, var(--primary-color-dark), var(--secondary-color-dark)); }
.service-accordion-item:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); border-color: rgba(0, 90, 156, 0.15); }
:root.dark-mode .service-accordion-item:hover { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25); border-color: rgba(77, 171, 247, 0.2); }
.service-accordion-item.active { border-color: rgba(0, 90, 156, 0.2); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); }
.service-accordion-item.active::before { opacity: 1; }
:root.dark-mode .service-accordion-item.active { border-color: rgba(77, 171, 247, 0.25); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }
.service-accordion-header { display: flex; align-items: center; width: 100%; padding: 1.5rem; background-color: transparent; border: none; text-align: start; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 1; }
.service-accordion-header:hover { background-color: rgba(0, 90, 156, 0.03); }
:root.dark-mode .service-accordion-header:hover { background-color: rgba(77, 171, 247, 0.05); }
.service-accordion-icon { color: var(--primary-color); font-size: 1.5rem; margin-inline-end: 1.25rem; width: 50px; height: 50px; line-height: 50px; text-align: center; flex-shrink: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); background: linear-gradient(135deg, rgba(0, 90, 156, 0.12), rgba(0, 90, 156, 0.05)); border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); }
:root.dark-mode .service-accordion-icon { color: var(--primary-color-dark); background: linear-gradient(135deg, rgba(77, 171, 247, 0.15), rgba(77, 171, 247, 0.08)); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
.service-accordion-item.active .service-accordion-icon { transform: scale(1.1) rotate(-10deg); color: white; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); box-shadow: 0 8px 15px rgba(0, 90, 156, 0.2); border-radius: 50%; }
:root.dark-mode .service-accordion-item.active .service-accordion-icon { background: linear-gradient(135deg, var(--primary-color-dark), var(--secondary-color-dark)); color: #111; box-shadow: 0 8px 15px rgba(77, 171, 247, 0.25); }
.service-accordion-title { flex-grow: 1; margin: 0; font-size: 1.25rem; font-weight: var(--bold-font-weight); color: var(--text-color); transition: all 0.3s ease; }
.service-accordion-item.active .service-accordion-title { color: var(--primary-color); }
:root.dark-mode .service-accordion-title { color: var(--text-color-dark); }
:root.dark-mode .service-accordion-item.active .service-accordion-title { color: var(--primary-color-dark); }
.accordion-arrow { font-size: 1.1rem; color: var(--text-muted-color); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); margin-inline-start: 1rem; background-color: rgba(0, 0, 0, 0.04); width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 50%; }
:root.dark-mode .accordion-arrow { color: var(--text-muted-color-dark); background-color: rgba(255, 255, 255, 0.07); }
.service-accordion-item.active .accordion-arrow { transform: rotate(180deg); background-color: var(--primary-color); color: white; box-shadow: 0 4px 8px rgba(0, 90, 156, 0.25); }
:root.dark-mode .service-accordion-item.active .accordion-arrow { background-color: var(--primary-color-dark); color: #111; box-shadow: 0 4px 8px rgba(77, 171, 247, 0.3); }
.service-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s ease-out; padding: 0 1.5rem; background: linear-gradient(to bottom, rgba(0, 90, 156, 0.02), transparent); border-top: 1px solid rgba(0, 90, 156, 0.08); margin: 0; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
:root.dark-mode .service-accordion-content { background: linear-gradient(to bottom, rgba(77, 171, 247, 0.03), transparent); border-top-color: rgba(77, 171, 247, 0.1); }
.service-accordion-item.active .service-accordion-content { padding-top: 1.5rem; padding-bottom: 2rem; }
.service-content-inner { padding: 0; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.service-content-image { width: 100%; max-width: 320px; height: auto; border-radius: 12px; object-fit: cover; margin: 0 auto 1rem auto; display: block; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); border: 4px solid white; transition: all 0.4s ease; }
:root.dark-mode .service-content-image { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); border-color: var(--card-bg-dark); }
.service-content-image:hover { transform: scale(1.03) rotate(1deg); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18); }
:root.dark-mode .service-content-image:hover { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); }
.service-content-text p { font-size: 1.05rem; line-height: 1.8; color: var(--text-muted-color); margin-bottom: 1.8rem; }
.service-content-text p:last-child { margin-bottom: 0; }
:root.dark-mode .service-content-text p { color: var(--text-muted-color-dark); }
.service-content-text h4 { font-size: 1.2rem; color: var(--primary-color); margin-bottom: 1.2rem; padding-bottom: 0.8rem; border-bottom: 2px solid var(--primary-color); display: inline-block; position: relative; }
.service-content-text h4::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 50%; height: 2px; background-color: var(--secondary-color); }
:root.dark-mode .service-content-text h4 { color: var(--primary-color-dark); border-bottom-color: var(--primary-color-dark); }
:root.dark-mode .service-content-text h4::after { background-color: var(--secondary-color-dark); }
.service-content-text ul { list-style: none; padding: 0; margin: 0 0 1.8rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px 30px; }
.service-content-text ul li { display: flex; align-items: center; font-size: 1rem; color: var(--text-color); line-height: 1.6; padding: 0.5rem 0; transition: transform 0.3s ease; }
.service-content-text ul li:hover { transform: translateX(5px); }
html[lang="en"] .service-content-text ul li:hover { transform: translateX(5px); } /* Corrected LTR hover */
:root.dark-mode .service-content-text ul li { color: var(--text-color-dark); }
.service-content-text ul li i { color: var(--primary-color); margin-inline-end: 12px; font-size: 1.1rem; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 90, 156, 0.1); border-radius: 50%; flex-shrink: 0; transition: all 0.3s ease; }
:root.dark-mode .service-content-text ul li i { color: var(--primary-color-dark); background-color: rgba(77, 171, 247, 0.15); }
.service-content-text ul li:hover i { background-color: var(--primary-color); color: white; transform: scale(1.1); }
:root.dark-mode .service-content-text ul li:hover i { background-color: var(--primary-color-dark); color: #111; }

/* --- Specific Button Styling within Accordion --- */
.service-content-text .btn { /* Uses base .btn */ margin-top: 1.5rem; background-color: var(--primary-color); color: white; box-shadow: 0 6px 15px rgba(var(--primary-rgb), 0.25); border-radius: 50px; }
.service-content-text .btn::before { background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent); }
.service-content-text .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.35); background-color: var(--secondary-color); }
.service-content-text .btn:hover::before { transform: translateX(100%); transition: all 0.8s ease; }
.service-content-text .btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.2); }
:root.dark-mode .service-content-text .btn { background-color: var(--primary-color-dark); color: #111; box-shadow: 0 6px 15px rgba(var(--primary-rgb-dark), 0.3); }
:root.dark-mode .service-content-text .btn:hover { background-color: var(--secondary-color-dark); box-shadow: 0 10px 20px rgba(var(--primary-rgb-dark), 0.4); }
.service-content-text .btn.btn-secondary { background-color: transparent; color: var(--primary-color); border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1); }
.service-content-text .btn.btn-secondary:hover { background-color: var(--primary-color); color: white; border-color: var(--primary-color); box-shadow: 0 8px 15px rgba(var(--primary-rgb), 0.2); }
:root.dark-mode .service-content-text .btn.btn-secondary { color: var(--primary-color-dark); border-color: var(--primary-color-dark); background-color: transparent; box-shadow: 0 4px 12px rgba(var(--primary-rgb-dark), 0.15); }
:root.dark-mode .service-content-text .btn.btn-secondary:hover { background-color: var(--primary-color-dark); color: #111; border-color: var(--primary-color-dark); box-shadow: 0 8px 15px rgba(var(--primary-rgb-dark), 0.25); }
.service-content-text .btn-success {
  background-color: var(--secondary-color);
  color: #fff;
  border: none;
  box-shadow: 0 6px 15px rgba(var(--primary-rgb), 0.25);
  border-radius: 50px;
}
.service-content-text .btn-success:hover,
.service-content-text .btn-success:focus {
  background-color: var(--secondary-color-dark);
  color: #fff;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.35);
}
.service-content-text .btn-success:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.2);
}
.service-content-text .btn-success i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}
.service-content-text .btn-success:hover i {
  transform: translateX(3px);
}
html[lang="ar"] .service-content-text .btn-success:hover i {
  transform: translateX(-3px);
}

/* Responsive for Accordion */
@media (min-width: 768px) {
    .service-content-inner { grid-template-columns: 300px 1fr; gap: 2.5rem; }
    .service-content-image { max-width: 100%; margin: 0; }
    html[lang="ar"] .service-content-inner { grid-template-columns: 1fr 300px; }
    html[lang="ar"] .service-content-image { grid-column: 2 / 3; }
    html[lang="ar"] .service-content-text { grid-column: 1 / 2; grid-row: 1 / 2; }
}
@media (min-width: 992px) {
    .service-content-inner { grid-template-columns: 340px 1fr; gap: 3rem; }
    html[lang="ar"] .service-content-inner { grid-template-columns: 1fr 340px; }
}
@media (max-width: 767px) {
    .service-accordion-header { padding: 1.25rem; }
    .service-accordion-icon { width: 40px; height: 40px; line-height: 40px; font-size: 1.3rem; margin-inline-end: 1rem; }
    .service-accordion-title { font-size: 1.1rem; }
    .accordion-arrow { width: 28px; height: 28px; line-height: 28px; }
    .badge-item { padding: 0.6rem 1rem; }
    .badge-item i { width: 32px; height: 32px; }
}

/* --- END OF FILE services.css --- */