/*

Theme Name: Solmagix Theme

Theme URI: https://solmagix.com

Author: Solmagix

Description: Professional Solmagix corporate WordPress theme.

Version: 2.0.0

Text Domain: solmagix

Requires at least: 6.0

Requires PHP: 7.4

*/

/* =====================================

   1. BRAND COLORS & RESET

===================================== */

:root {

    --sm-primary: #142b4a;

    --sm-primary-dark: #061e39;

    --sm-accent: #00aaa9;

    --sm-accent-dark: #008b91;

    --sm-orange: #ff9800;

    --sm-orange-dark: #f27d00;

    --sm-text: #263c59;

    --sm-muted: #687b94;

    --sm-bg: #f3f8fc;

    --sm-white: #ffffff;

    --sm-border: #e4edf5;

    --sm-radius: 22px;

    --sm-shadow: 0 12px 35px rgba(8,43,80,.09);

}* {

    box-sizing: border-box;

}html {

    scroll-behavior: smooth;

}body {

    margin: 0;

    color: var(--sm-text);

    background: #fff;

    font-family: Tahoma, Arial, sans-serif;

    line-height: 1.8;

    overflow-x: hidden;

}a {

    color: var(--sm-accent);

    text-decoration: none;

    transition: .25s ease;

}a:hover {

    color: var(--sm-orange);

}img {

    max-width: 100%;

    height: auto;

    display: block;

}.container {

    width: min(1320px, calc(100% - 50px));

    margin-inline: auto;

}

/* =====================================

   2. HEADER

===================================== */

.site-header {

    position: sticky;

    top: 0;

    z-index: 999;

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

    border-bottom: 1px solid var(--sm-border);

}.header-inner {

    min-height: 105px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}.site-branding {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}.site-branding a {

    color: var(--sm-primary);

    font-size: 25px;

    font-weight: 900;

}.custom-logo {

    width: auto;

    max-height: 85px;

    object-fit: contain;

}.primary-navigation {

    margin-inline-start: auto;

}.primary-navigation ul,

.footer-navigation ul {

    display: flex;

    align-items: center;

    gap: 28px;

    list-style: none;

    margin: 0;

    padding: 0;

}.primary-navigation a {

    color: var(--sm-primary);

    font-weight: 700;

    font-size: 16px;

    position: relative;

    padding: 12px 0;

}.primary-navigation a:hover,

.primary-navigation .current-menu-item > a {

    color: var(--sm-accent);

}.primary-navigation .current-menu-item > a::after {

    content: "";

    position: absolute;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 3px;

    background: var(--sm-accent);

    border-radius: 5px;

}.header-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 13px 28px;

    border-radius: 40px;

    background: linear-gradient(135deg,var(--sm-orange),var(--sm-orange-dark));

    color: #fff;

    font-weight: 800;

    white-space: nowrap;

    box-shadow: 0 7px 20px rgba(255,153,0,.2);

}.header-cta:hover {

    background: var(--sm-primary);

    color: #fff;

    transform: translateY(-3px);

}.menu-toggle {

    display: none;

    border: 0;

    background: var(--sm-primary);

    color: #fff;

    padding: 10px 15px;

    border-radius: 10px;

    cursor: pointer;

}

/* =====================================

   3. BUTTONS

===================================== */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 30px;

    border-radius: 40px;

    background: linear-gradient(135deg,var(--sm-orange),var(--sm-orange-dark));

    color: #fff;

    font-weight: 800;

    font-size: 17px;

    border: 0;

    cursor: pointer;

    transition: .3s ease;

}.button:hover {

    background: var(--sm-primary);

    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(8,43,80,.15);

}.button-outline {

    background: transparent;

    border: 1.5px solid var(--sm-accent);

    color: var(--sm-accent-dark);

}.button-outline:hover {

    background: var(--sm-accent);

    color: #fff;

}

/* =====================================

   4. HERO SECTION

===================================== */

.hero {

    position: relative;

    padding: 55px 0 65px;

    overflow: hidden;

    background:

        radial-gradient(circle at 15% 20%,rgba(0,170,169,.12),transparent 35%),

        linear-gradient(115deg,#f8fbff,#eaf4fa);

}.hero::before {

    content: "";

    position: absolute;

    top: -150px;

    right: -150px;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    background: rgba(0,170,169,.07);

}.hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1.1fr;

    align-items: center;

    gap: 45px;

}.hero-grid > div:first-child {

    text-align: right;

}.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 18px;

    margin-bottom: 18px;

    background: linear-gradient(135deg,var(--sm-accent),var(--sm-accent-dark));

    color: #fff;

    border-radius: 30px;

    font-weight: 800;

    font-size: 14px;

}.hero h1 {

    color: var(--sm-primary);

    font-size: clamp(36px,4.5vw,55px);

    line-height: 1.35;

    font-weight: 900;

    margin: 0 0 20px;

}.hero h1 strong,

.hero h1 .highlight {

    color: var(--sm-accent);

}.hero p {

    color: #526782;

    font-size: 19px;

    max-width: 620px;

    margin: 0 0 28px;

}.hero .button {

    margin-inline-end: 12px;

}

/* =====================================

   5. HERO VISUAL

===================================== */

.hero-visual {

    position: relative;

    min-height: 420px;

    padding: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    box-shadow: none;

    overflow: hidden;

}.hero-visual::before {

    content: "";

    position: absolute;

    width: 90%;

    height: 80%;

    background: linear-gradient(135deg,rgba(0,170,169,.2),rgba(255,153,0,.08));

    border-radius: 40px;

    transform: rotate(-5deg);

}.hero-visual img {

    position: relative;

    z-index: 2;

    width: 100%;

    height: auto;

    object-fit: contain;

}.hero-glow {

    position: absolute;

    width: 330px;

    height: 330px;

    background: rgba(0,170,169,.2);

    filter: blur(80px);

    border-radius: 50%;

}.hero-dashboard {

    position: relative;

    z-index: 2;

    width: 100%;

    min-height: 350px;

    padding: 25px;

    border-radius: 25px;

    background: linear-gradient(145deg,#082b50,#145777);

    box-shadow: 0 25px 60px rgba(8,43,80,.2);

    color: #fff;

}.dashboard-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid rgba(255,255,255,.15);

    padding-bottom: 18px;

}.dashboard-brand {

    font-size: 18px;

    font-weight: 900;

}.brand-dot,

.dashboard-status span {

    display: inline-block;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: var(--sm-accent);

    margin-inline-end: 7px;

}.dashboard-status {

    color: #c6e7ef;

    font-size: 11px;

}.dashboard-content {

    padding: 25px 0;

}.dashboard-label {

    color: #39d5d0;

    font-size: 11px;

    letter-spacing: 2px;

}.dashboard-content h2 {

    color: #fff;

    font-size: 35px;

    line-height: 1.25;

}.dashboard-content p {

    color: #d0e2ed;

    font-size: 13px;

}.dashboard-services {

    display: grid;

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

    gap: 10px;

}.dashboard-service {

    padding: 12px;

    border-radius: 12px;

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

    border: 1px solid rgba(255,255,255,.12);

}.dashboard-service span {

    display: block;

    color: #40d4ce;

    font-size: 11px;

}.dashboard-service strong {

    color: #fff;

    font-size: 11px;

}

/* =====================================

   6. HERO FEATURES

===================================== */

.hero-features {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 30px;

}.hero-feature {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--sm-primary);

    font-weight: 800;

}.hero-feature i,

.hero-feature svg {

    color: var(--sm-accent);

    font-size: 27px;

}

/* =====================================

   7. GENERAL SECTIONS

===================================== */

.section {

    padding: 85px 0;

}.section-muted {

    background: var(--sm-bg);

}.section-heading {

    max-width: 750px;

    text-align: center;

    margin: 0 auto 40px;

}.section-heading .eyebrow {

    background: transparent;

    color: var(--sm-orange-dark);

    padding: 0;

    font-size: 21px;

}.section-heading h2 {

    color: var(--sm-primary);

    font-size: clamp(30px,4vw,40px);

    font-weight: 900;

    line-height: 1.4;

    margin: 0 0 12px;

}.section-heading h2 strong {

    color: var(--sm-accent);

}.section-heading p {

    color: var(--sm-muted);

    font-size: 18px;

    margin: 0;

}

/* =====================================

   8. CARDS GRID

===================================== */

.cards-grid {

    display: grid;

    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 24px;

}.info-card,

.service-card {

    background: #fff;

    border: 1px solid #e9f0f6;

    border-radius: var(--sm-radius);

    overflow: hidden;

    box-shadow: var(--sm-shadow);

    transition: .3s ease;

}.info-card {

    padding: 28px;

}.info-card:hover,

.service-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 20px 40px rgba(8,43,80,.13);

}.info-card h3 {

    color: var(--sm-primary);

    font-size: 22px;

    margin: 0 0 10px;

}.info-card p {

    color: var(--sm-muted);

    margin: 0 0 15px;

}.card-icon {

    width: 75px;

    height: 75px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background: linear-gradient(135deg,var(--sm-accent),#007b96);

    color: white;

    font-size: 32px;

    margin-bottom: 20px;

}

/* =====================================

   9. SERVICES

===================================== */

.service-card {

    display: flex;

    flex-direction: column;

    border-bottom: 5px solid var(--sm-accent);

}.service-card:nth-child(3n/**/+2) {

    border-bottom-color: var(--sm-orange);

}.service-card:nth-child(3n/**/+3) {

    border-bottom-color: #007b96;

}.service-image {

    height: 230px;

    overflow: hidden;

    background: #edf4f9;

}.service-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;

}.service-card:hover .service-image img {

    transform: scale(1.06);

}.service-content {

    padding: 25px;

    flex: 1;

}.service-number {

    color: var(--sm-accent-dark);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

}.service-content h3 {

    color: var(--sm-primary);

    font-size: 22px;

    margin: 12px 0;

}.service-content h3 a {

    color: inherit;

}.service-content p {

    color: var(--sm-muted);

    font-size: 15px;

    line-height: 1.9;

}.service-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--sm-accent-dark);

    font-weight: 900;

    margin-top: 10px;

}.section-more {

    margin-top: 20px;

}

/* =====================================

   10. PROJECTS

===================================== */

.project-card {

    background: #fff;

    border: 1px solid var(--sm-border);

    border-radius: 18px;

    overflow: hidden;

    box-shadow: var(--sm-shadow);

    transition: .3s ease;

}.project-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 40px rgba(8,43,80,.13);

}.project-image {

    overflow: hidden;

    background: #edf3f8;

}.project-image img {

    width: 100%;

    height: 230px;

    object-fit: cover;

    transition: transform .4s ease;

}.project-card:hover .project-image img {

    transform: scale(1.05);

}.project-content {

    padding: 24px;

}.project-category {

    display: inline-block;

    padding: 6px 14px;

    margin-bottom: 12px;

    border-radius: 25px;

    background: #e5f6f8;

    color: var(--sm-accent-dark);

    font-size: 13px;

    font-weight: 800;

}.project-content h3 {

    color: var(--sm-primary);

    margin: 0 0 12px;

    font-size: 21px;

}.project-content h3 a {

    color: inherit;

}.project-content p {

    color: var(--sm-muted);

    line-height: 1.9;

}.project-link {

    display: inline-block;

    color: var(--sm-accent-dark);

    font-weight: 800;

    margin-top: 12px;

}.projects-more {

    text-align: center;

    margin-top: 35px;

}

/* =====================================

   11. SINGLE PROJECT

===================================== */

.project-breadcrumb {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 35px;

    color: var(--sm-muted);

    font-size: 14px;

}.project-breadcrumb a {

    color: var(--sm-accent);

}.project-hero-content {

    max-width: 900px;

    margin-bottom: 35px;

}.project-hero-content h1 {

    color: var(--sm-primary);

    font-size: clamp(32px,5vw,52px);

    line-height: 1.3;

}.project-description {

    color: var(--sm-muted);

    font-size: 18px;

    line-height: 1.9;

}.project-featured-image {

    overflow: hidden;

    border-radius: 22px;

    margin: 30px 0;

}.project-featured-image img {

    width: 100%;

    max-height: 550px;

    object-fit: cover;

}.project-details-grid {

    display: grid;

    grid-template-columns: minmax(0,2fr) minmax(260px,1fr);

    gap: 40px;

    align-items: start;

}.project-description-content {

    font-size: 16px;

    line-height: 2;

}.project-description-content img {

    border-radius: 14px;

}.project-sidebar {

    min-width: 0;

}.project-info-card {

    position: sticky;

    top: 110px;

    background: #fff;

    padding: 25px;

    border-radius: 18px;

    box-shadow: var(--sm-shadow);

}.project-info-card h3 {

    color: var(--sm-primary);

    margin-top: 0;

}.project-info-item {

    display: flex;

    flex-direction: column;

    gap: 7px;

    padding: 15px 0;

    border-bottom: 1px solid var(--sm-border);

}.project-info-item span {

    color: var(--sm-muted);

    font-size: 13px;

}.project-info-item strong {

    color: var(--sm-primary);

    overflow-wrap: anywhere;

}.project-contact-button {

    display: flex;

    justify-content: center;

    width: 100%;

    margin-top: 20px;

}

/* =====================================

   12. PROJECT GALLERY

===================================== */

.project-gallery {

    margin-top: 45px;

}.project-gallery h2 {

    color: var(--sm-primary);

}.project-gallery-grid {

    display: grid;

    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 20px;

}.project-gallery-item {

    display: block;

    overflow: hidden;

    border-radius: 16px;

    cursor: zoom-in;

    background: var(--sm-bg);

}.project-gallery-item img {

    width: 100%;

    height: 230px;

    object-fit: cover;

    transition: transform .4s ease;

}.project-gallery-item:hover img {

    transform: scale(1.06);

}

/* =====================================

   13. PROJECT NAVIGATION

===================================== */

.project-navigation {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin: 35px 0;

}.project-navigation a {

    color: var(--sm-accent-dark);

    font-weight: 800;

}

/* =====================================

   14. CALL TO ACTION

===================================== */

.cta {

    position: relative;

    background: linear-gradient(120deg,var(--sm-primary),#16466b);

    color: #fff;

    border-radius: 28px;

    padding: 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    overflow: hidden;

}.cta h2 {

    margin: 0 0 8px;

    font-size: 32px;

}.cta p {

    margin: 0;

    color: #d3e3ef;

}.cta .button {

    flex-shrink: 0;

}

/* =====================================

   15. CONTENT & BLOG

===================================== */

.entry-content {

    max-width: 900px;

    margin: 45px auto;

    padding: 0 20px;

}.entry-title {

    color: var(--sm-primary);

    font-size: 36px;

}.post-list {

    display: grid;

    gap: 22px;

}.post-card {

    padding: 25px;

    border: 1px solid var(--sm-border);

    border-radius: 18px;

    background: #fff;

}.post-card h2 {

    margin-top: 0;

    color: var(--sm-primary);

}.pagination {

    margin: 30px 0;

}.not-found {

    text-align: center;

    padding: 90px 20px;

}

/* =====================================

   16. FOOTER

===================================== */

.site-footer {

    background: #071e37;

    color: #d5e2ed;

    padding: 60px 0 25px;

}.footer-inner {

    display: flex;

    justify-content: space-between;

    gap: 35px;

    align-items: flex-start;

}.site-footer h3 {

    color: #fff;

}.site-footer a {

    color: #d5e2ed;

}.site-footer .footer-contact-button:hover {

    background: var(--sm-accent);

}.footer-contact-link:hover {
    background: transparent !important;
    color: #ff8300;
}.footer-navigation ul {

    flex-wrap: wrap;
    display: block;

}.footer-bottom {

    border-top: 1px solid rgba(255,255,255,.15);

    margin-top: 35px;

    padding-top: 20px;

    font-size: 14px;

    color: #aebfd0;

}.powered-by {

    text-align: center;

    padding: 12px;

    font-size: 13px;

    color: #aebfd0;

}#solmagix-gallery-preview {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 15px 0;

}#solmagix-gallery-preview img {

    width: 90px;

    height: 90px;

    object-fit: cover;

    border-radius: 6px;

}

/* =====================================

   19. RESPONSIVE TABLET

===================================== */

@media (max-width: 1050px) {

    .header-inner {

        gap: 18px;

    }

    .primary-navigation ul {

        gap: 16px;

    }

    .hero-grid {

        gap: 25px;

    }

    .hero h1 {

        font-size: 42px;

    }

}@media (max-width: 900px) {

    .hero-grid {

        grid-template-columns: 1fr;

    }

    .hero-grid > div:first-child {

        text-align: center;

    }

    .hero p {

        margin-inline: auto;

    }

    .hero-visual {

        min-height: 300px;

    }

    .cards-grid {

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

    }

    .project-details-grid {

        grid-template-columns: 1fr;

    }

    .project-info-card {

        position: static;

    }

}

/* =====================================

   20. RESPONSIVE MOBILE

===================================== */

@media (max-width: 768px) {

    .container {

        width: calc(100% - 30px);

    }

    .header-inner {

        min-height: 75px;

        flex-wrap: wrap;

        padding: 10px 0;

    }

    .custom-logo {

        max-height: 55px;

    }

    .menu-toggle {

        display: block;

    }

    .primary-navigation {

        display: none;

        width: 100%;

        order: 3;

    }

    .primary-navigation.is-open {

        display: block;

    }

    .primary-navigation ul {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding: 15px 0;

    }

    .header-cta {

        display: none;

    }

    .hero {

        padding: 55px 0;

    }

    .hero h1 {

        font-size: 36px;

    }

    .hero p {

        font-size: 16px;

    }

    .hero-visual {

        min-height: 250px;

        padding: 0;

    }

    .hero-dashboard {

        min-height: 300px;

        padding: 18px;

    }

    .dashboard-services {

        grid-template-columns: 1fr;

    }

    .hero-features {

        flex-wrap: wrap;

        justify-content: center;

    }

    .cards-grid {

        grid-template-columns: 1fr;

    }

    .section {

        padding: 60px 0;

    }

    .cta,

    .footer-inner {

        flex-direction: column;

        align-items: flex-start;

    }

    .cta {

        padding: 30px;

    }

    .project-gallery-grid {

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

    }

    .project-navigation {

        flex-direction: column;

    }

    .lightbox-close {

        top: 12px;

        right: 12px;

    }

}

/* =====================================

   21. SMALL MOBILE

===================================== */

@media (max-width: 480px) {

    .hero h1 {

        font-size: 30px;

    }

    .hero .button {

        width: 100%;

        margin: 7px 0;

    }

    .dashboard-top {

        flex-wrap: wrap;

    }

    .project-gallery-grid {

        grid-template-columns: 1fr;

    }

    .project-gallery-item img {

        height: 220px;

    }

    .solmagix-lightbox {

        padding: 65px 12px 35px;

    }

    .lightbox-content img {

        max-width: 100%;

        max-height: 70vh;

    }

    .lightbox-prev,

    .lightbox-next {

        top: auto;

        bottom: 12px;

        width: 42px;

        height: 42px;

    }

    .lightbox-prev {

        left: 20px;

    }

    .lightbox-next {

        right: 20px;

    }

}

/* =====================================================

   SOLMAGIX CLEAN OVERRIDES

   Consolidated responsive and component refinements

===================================================== */

/* Brand tokens: one source of truth */

/* Header */

.solmagix-header {

    position: relative;

    z-index: 1000;

    width: 100%;

    background: #fff;

    border-bottom: 1px solid var(--sm-border);

}.solmagix-header .header-inner {

    min-height: 105px;

    gap: 28px;

}.solmagix-header .custom-logo {

    width: auto;

    max-width: 310px;

    max-height: 85px;

    object-fit: contain;

}.solmagix-header .primary-navigation {

    margin-inline-start: auto;

}.solmagix-header .main-menu {

    display: flex;

    align-items: center;

    gap: 30px;

    list-style: none;

    margin: 0;

    padding: 0;

}.solmagix-header .main-menu li {

    position: relative;

}.solmagix-header .main-menu a {

    display: block;

    position: relative;

    padding: 15px 0;

    color: var(--sm-primary);

    font-size: 16px;

    font-weight: 700;

}.solmagix-header .main-menu a:hover,

.solmagix-header .main-menu .current-menu-item > a,

.solmagix-header .main-menu .current_page_item > a {

    color: var(--sm-accent);

}.solmagix-header .main-menu .current-menu-item > a::after,

.solmagix-header .main-menu .current_page_item > a::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 3px;

    width: 100%;

    height: 4px;

    border-radius: 5px;

    background: var(--sm-accent);

}.solmagix-header .header-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 27px;

    border-radius: 40px;

    background: linear-gradient(120deg, #ffb000, #ff7900);

    color: #fff;

    font-weight: 800;

    white-space: nowrap;

}.solmagix-header .header-cta:hover {

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(245,166,35,.25);

}.solmagix-header .menu-toggle {

    display: none;

    width: 45px;

    height: 42px;

    padding: 9px;

    border: 0;

    border-radius: 9px;

    background: var(--sm-primary);

    cursor: pointer;

}.solmagix-header .menu-toggle span {

    display: block;

    width: 100%;

    height: 2px;

    margin: 5px 0;

    border-radius: 5px;

    background: #fff;

}

/* Homepage hero */

.solmagix-hero {

    padding: 45px 0 55px;

}.solmagix-hero .hero-grid {

    grid-template-columns: .95fr 1.15fr;

    gap: 20px;

}.solmagix-hero .hero-text {

    min-width: 0;

    text-align: right;

}.solmagix-hero .hero-visual {

    min-width: 0;

    min-height: 0;

    padding: 0;

    overflow: visible;

    background: transparent;

    box-shadow: none;

}.solmagix-hero .solmagix-laptop-visual {

    width: 100%;

    min-width: 0;

    padding: 0;

    overflow: visible;

    background: transparent;

    box-shadow: none;

}.solmagix-hero .laptop-scene {

    position: relative;

    width: 100%;

    max-width: 720px;

    margin-inline: auto;

}.solmagix-hero .solmagix-dashboard-image {

    display: block;

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: none;

    height: auto;

    object-fit: contain;

    transform: none;

}

/* Shared section headings and grids */

.section-kicker {

    display: inline-block;

    margin-bottom: 8px;

    color: var(--sm-accent-dark);

    font-size: 16px;

    font-weight: 700;

}.section-heading {

    max-width: 800px;

    margin: 0 auto 45px;

    text-align: center;

}.section-heading h2 {

    margin: 0 0 12px;

    color: var(--sm-primary);

    font-size: clamp(30px, 3.5vw, 42px);

    font-weight: 900;

    line-height: 1.5;

}.section-heading h2 strong,

.section-heading h2 span {

    color: var(--sm-accent);

}.section-heading p {

    color: var(--sm-muted);

    font-size: 18px;

    line-height: 1.9;

}.cards-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 25px;

}

/* Services cards */

.services-section {

    padding: 85px 0;

    background: #fff;

}.service-card,

.service-card-modern {

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 28px 25px;

    border: 1px solid #e5edf4;

    border-bottom: 5px solid var(--sm-accent);

    border-radius: 24px;

    background: #fff;

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

    transition: transform .3s ease, box-shadow .3s ease;

}.service-card:nth-child(3n/**/+2),

.service-card-modern:nth-child(3n/**/+2) {

    border-bottom-color: var(--sm-orange);

}.service-card:nth-child(3n/**/+3),

.service-card-modern:nth-child(3n/**/+3) {

    border-bottom-color: #007f98;

}.service-card:hover,

.service-card-modern:hover {

    transform: translateY(-7px);

    box-shadow: 0 20px 40px rgba(8,43,80,.12);

}.service-modern-icon {

    display: grid;

    place-items: center;

    flex: 0 0 58px;

    width: 58px;

    height: 58px;

    margin-bottom: 17px;

    border-radius: 15px;

    background: linear-gradient(135deg, #00bdb7, #007d96);

    color: #fff;

    font-size: 25px;

}.service-card-modern:nth-child(3n/**/+2) .service-modern-icon {

    background: linear-gradient(135deg, #ffb000, #ff7900);

}.service-content {

    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 0;

}.service-number {

    display: inline-block;

    margin-bottom: 8px;

    color: var(--sm-accent-dark);

    font-size: 13px;

    font-weight: 900;

    letter-spacing: .5px;

}.service-content h3 {

    margin: 8px 0 15px;

    color: var(--sm-primary);

    font-size: 22px;

    font-weight: 900;

    line-height: 1.6;

}.service-content p {

    margin: 0 0 20px;

    color: var(--sm-muted);

    font-size: 15px;

    line-height: 2;

}.service-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: auto;

    padding-top: 12px;

    color: var(--sm-accent-dark);

    font-weight: 900;

}.service-link:hover {

    color: var(--sm-orange-dark);

}.services-section .section-more,

.projects-section .section-more {

    margin-top: 35px;

    text-align: center;

}.services-section .section-more a,

.projects-section .section-more a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 175px;

    padding: 13px 28px;

    border: 1.5px solid var(--sm-accent);

    border-radius: 40px;

    color: var(--sm-accent-dark);

    font-weight: 900;

}.services-section .section-more a:hover,

.projects-section .section-more a:hover {

    background: var(--sm-accent);

    color: #fff;

}

/* Projects cards */

.projects-section {

    padding: 80px 0;

    background: var(--sm-bg);

}.projects-section .project-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid #e5edf4;

    border-radius: 22px;

    background: #fff;

    box-shadow: 0 10px 30px rgba(8,43,80,.07);

    transition: transform .3s ease, box-shadow .3s ease;

}.projects-section .project-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 38px rgba(8,43,80,.13);

}.projects-section .project-image {

    display: block;

    flex: 0 0 240px;

    width: 100%;

    height: 240px;

    overflow: hidden;

    background: #eaf1f6;

}.projects-section .project-image img {

    display: block;

    width: 100%;

    max-width: none;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform .4s ease;

}.projects-section .project-card:hover .project-image img {

    transform: scale(1.05);

}.projects-section .project-image-placeholder {

    display: grid;

    place-items: center;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, #e6f7f7, #edf3f8);

    color: var(--sm-accent);

    font-size: 26px;

    font-weight: 900;

}.projects-section .project-content {

    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 23px;

}.projects-section .project-category {

    align-self: flex-start;

    margin-bottom: 10px;

    padding: 6px 13px;

    border-radius: 25px;

    background: #e5f7f7;

    color: var(--sm-accent-dark);

    font-size: 13px;

    font-weight: 800;

}.projects-section .project-content h3 {

    margin: 0 0 12px;

    color: var(--sm-primary);

    font-size: 21px;

    line-height: 1.6;

}.projects-section .project-content h3 a {

    color: inherit;

}.projects-section .project-content p {

    margin: 0 0 15px;

    color: var(--sm-muted);

    font-size: 15px;

    line-height: 1.9;

}.projects-section .project-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    padding-top: 12px;

    color: var(--sm-accent-dark);

    font-weight: 900;

}.projects-section .project-link:hover {

    color: var(--sm-orange-dark);

}

/* Responsive refinements */

@media (max-width: 1050px) {

    .solmagix-header .header-inner {

        gap: 18px;

    }

    .solmagix-header .main-menu {

        gap: 18px;

    }

    .solmagix-header .main-menu a {

        font-size: 14px;

    }

    .solmagix-header .custom-logo {

        max-width: 240px;

        max-height: 70px;

    }

}@media (max-width: 900px) {

    .cards-grid {

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

    }

    .solmagix-hero .hero-grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    .solmagix-hero .hero-text {

        text-align: center;

    }

    .solmagix-hero .hero-text > p {

        margin-inline: auto;

    }

    .solmagix-hero .hero-visual {

        max-width: 720px;

        margin-inline: auto;

    }

}@media (max-width: 768px) {

    .solmagix-header .header-inner {

        min-height: 75px;

        flex-wrap: wrap;

        padding: 10px 0;

    }

    .solmagix-header .site-branding {

        order: 1;

    }

    .solmagix-header .header-action {

        order: 2;

        margin-inline-start: auto;

    }

    .solmagix-header .custom-logo {

        max-width: 190px;

        max-height: 58px;

    }

    .solmagix-header .header-cta {

        display: inline-flex;

        padding: 10px 13px;

        font-size: 12px;

    }

    .solmagix-header .menu-toggle {

        display: block;

        order: 3;

    }

    .solmagix-header .primary-navigation {

        display: none;

        order: 4;

        width: 100%;

        margin: 0;

    }

    .solmagix-header .primary-navigation.is-open {

        display: block;

    }

    .solmagix-header .main-menu {

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 12px 0;

    }

    .solmagix-header .main-menu a {

        padding: 12px;

        border-bottom: 1px solid #edf1f5;

    }

    .solmagix-header .main-menu a::after {

        display: none;

    }

    .solmagix-hero {

        padding: 45px 0 55px;

    }

    .solmagix-hero h1 {

        font-size: clamp(29px, 7vw, 38px);

        line-height: 1.5;

    }

    .solmagix-hero .hero-features {

        justify-content: center;

        flex-wrap: wrap;

    }

    .section {

        padding: 60px 0;

    }

    .services-section,

    .projects-section {

        padding: 60px 0;

    }

}@media (max-width: 600px) {

    .cards-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .section-heading {

        margin-bottom: 30px;

    }

    .section-heading p {

        font-size: 16px;

    }

    .service-card,

    .service-card-modern {

        padding: 25px 22px;

        border-radius: 22px;

    }

    .service-content h3 {

        font-size: 21px;

    }

    .service-content p {

        font-size: 15px;

    }

    .projects-section .project-image {

        flex-basis: 220px;

        height: 220px;

    }

}@media (max-width: 480px) {

    .solmagix-header .custom-logo {

        max-width: 145px;

        max-height: 50px;

    }

    .solmagix-header .header-cta {

        padding: 9px 10px;

        font-size: 11px;

    }

    .solmagix-hero h1 {

        font-size: 30px;

    }

    .solmagix-hero .hero .button {

        width: 100%;

        margin: 7px 0;

    }

}

/* =========================================

   SOLMAGIX FOOTER

========================================= */

.solmagix-footer {

    position: relative;

    padding: 65px 0 0;

    background: #092744;

    color: #ffffff;

    overflow: hidden;

}.solmagix-footer::before {

    content: "";

    position: absolute;

    top: -180px;

    right: -120px;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    background: rgba(0,170,169,.09);

    pointer-events: none;

}.solmagix-footer .container {

    position: relative;

    z-index: 1;

}.footer-main {

    display: grid;

    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;

    gap: 40px;

    padding-bottom: 45px;

}.footer-brand,

.footer-column {

    min-width: 0;

}.footer-logo {

    margin-bottom: 20px;

}.footer-logo img {

    display: block;

    width: auto;

    max-width: 230px;

    max-height: 75px;

    object-fit: contain;

    background: #fff;

    border-radius: 8px;

}.footer-logo > a {

    color: #fff;

    font-size: 27px;

    font-weight: 900;

    text-decoration: none;

}.footer-brand > p,

.footer-contact > p {

    color: #c2d0df;

    font-size: 15px;

    line-height: 2;

}.footer-column h3 {

    position: relative;

    margin: 0 0 24px;

    padding-bottom: 13px;

    color: #fff;

    font-size: 19px;

    font-weight: 800;

}.footer-column h3::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    width: 42px;

    height: 3px;

    border-radius: 5px;

    background: #00aaa9;

}.footer-links {

    display: flex;

    flex-direction: column;

    gap: 13px;

    margin: 0;

    padding: 0;

    list-style: none;

}.footer-links li {

    margin: 0;

    padding: 0;

}.footer-links a {

    color: #c2d0df;

    font-size: 15px;

    text-decoration: none;

    transition: color .25s ease, padding .25s ease;

}.footer-links a:hover {

    color: #00d0ca;

    padding-right: 5px;

}.footer-contact-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 12px;

    color: #00d0ca;

    font-weight: 800;

    text-decoration: none;

}.footer-contact-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 12px;

    padding: 13px 23px;

    border-radius: 35px;

    background: linear-gradient(110deg,#ffad00,#ff7900);

    color: #fff;

    font-size: 15px;

    font-weight: 800;

    text-decoration: none;

    transition: transform .25s ease;

}.footer-contact-button:hover {

    color: #fff;

    transform: translateY(-3px);

}.solmagix-footer .footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 22px 0;

    border-top: 1px solid rgba(255,255,255,.13);

}.solmagix-footer .footer-bottom p {

    margin: 0;

    color: #b8c8d8;

    font-size: 13px;

}.solmagix-footer .footer-bottom a {

    color: #00c2bd;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

}

/* Footer responsive */

@media (max-width: 900px) {

    .footer-main {

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

        gap: 35px;

    }

}@media (max-width: 550px) {

    .solmagix-footer {

        padding-top: 45px;

    }

    .footer-main {

        grid-template-columns: 1fr;

        gap: 30px;

        padding-bottom: 30px;

    }

    .footer-logo img {

        max-width: 190px;

    }

    .solmagix-footer .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }

}

/* SOLMAGIX FOOTER - FINAL SPACING */

.solmagix-footer {

    padding-top: 48px;

}.solmagix-footer .footer-main {

    padding-bottom: 35px;

}.solmagix-footer .footer-column h3 {

    margin-bottom: 19px;

}.solmagix-footer .footer-links {

    gap: 11px;

}.solmagix-footer .footer-brand > p {

    margin-bottom: 14px;

}.solmagix-footer .footer-bottom {

    padding: 18px 0;

}

/* Mobile spacing */

@media (max-width: 550px) {

    .solmagix-footer {

        padding-top: 35px;

    }

    .solmagix-footer .footer-main {

        gap: 24px;

        padding-bottom: 25px;

    }

    .solmagix-footer .footer-column h3 {

        margin-bottom: 15px;

    }

    .solmagix-footer .footer-links {

        gap: 9px;

    }

    .solmagix-footer .footer-bottom {

        padding: 17px 0;

    }

}

/* =========================================

   SOLMAGIX - SINGLE PROJECT PAGE

========================================= */

.single-project-page {

    --project-primary: #142b4a;

    --project-accent: #18a6a6;

    --project-orange: #ff9000;

    --project-muted: #f3f8fc;

    --project-border: #e5edf4;

    color: var(--project-primary);

    overflow: hidden;

}

/* Main sections */

.single-project-page .section {

    padding-top: 85px;

    padding-bottom: 85px;

}.single-project-page .container {

    width: min(1200px, calc(100% - 48px));

    margin-inline: auto;

}

/* Breadcrumb */

.project-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 34px;

    color: #8493a8;

    font-size: 14px;

}.project-breadcrumb a {

    color: var(--project-accent);

    text-decoration: none;

    transition: color .25s ease;

}.project-breadcrumb a:hover {

    color: var(--project-primary);

}

/* Hero */

.project-hero {

    padding-top: 65px !important;

    padding-bottom: 65px !important;

    background: #fff;

}.project-hero-content {

    margin-bottom: 32px;

}.project-category {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 16px;

    margin-bottom: 20px;

    border-radius: 30px;

    background: #e5f7f7;

    color: var(--project-accent);

    font-size: 14px;

    font-weight: 700;

}.project-hero-content h1 {

    max-width: 900px;

    margin: 0 0 24px;

    color: var(--project-primary);

    font-size: clamp(32px, 4vw, 52px);

    line-height: 1.4;

    font-weight: 800;

}.project-hero-content .project-description {

    max-width: 850px;

    color: #64748b;

    font-size: 17px;

    line-height: 1.9;

}.project-featured-image {

    width: 100%;

    margin-top: 28px;

    overflow: hidden;

    border-radius: 22px;

    background: #f1f4f8;

}.project-featured-image img {

    display: block;

    width: 100%;

    height: auto;

    max-height: 650px;

    object-fit: cover;

    object-position: center;

}

/* Project details layout */

.project-details-section {

    background: #fff;

}.project-details-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 390px;

    gap: 55px;

    align-items: start;

    direction: ltr;

}.project-main-content,

.project-sidebar {

    min-width: 0;

    direction: rtl;

}.project-main-content {

    padding-top: 8px;

}.project-main-content .section-heading {

    margin-bottom: 30px;

}.project-main-content .section-heading .eyebrow {

    display: inline-block;

    margin-bottom: 14px;

    color: var(--project-orange);

    font-size: 17px;

    font-weight: 700;

}.project-main-content .section-heading h2 {

    margin: 0;

    color: var(--project-primary);

    font-size: clamp(28px, 3vw, 38px);

    line-height: 1.4;

    font-weight: 800;

}.project-description-content {

    color: #52647a;

    font-size: 16px;

    line-height: 2;

}.project-description-content p {

    margin: 0 0 20px;

}.project-description-content img {

    max-width: 100%;

    height: auto;

    border-radius: 14px;

}

/* Information card */

.project-info-card {

    padding: 28px 24px 24px;

    border: 1px solid rgba(20, 43, 74, .04);

    border-radius: 20px;

    background: #fff;

    box-shadow: 0 12px 38px rgba(20, 43, 74, .09);

}.project-info-card h3 {

    margin: 0 0 22px;

    color: var(--project-primary);

    font-size: 20px;

    font-weight: 800;

}.project-info-item {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 17px 0;

    border-bottom: 1px solid var(--project-border);

}.project-info-item span {

    color: #8999ad;

    font-size: 13px;

    line-height: 1.6;

}.project-info-item strong {

    color: var(--project-primary);

    font-size: 16px;

    line-height: 1.7;

    font-weight: 700;

    overflow-wrap: anywhere;

}

/* Project buttons */

.project-contact-button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 54px;

    margin-top: 18px;

    padding: 13px 20px;

    border: 0;

    border-radius: 50px;

    background: var(--project-orange);

    color: #fff !important;

    font-size: 15px;

    font-weight: 700;

    text-align: center;

    text-decoration: none !important;

    transition: transform .25s ease, background .25s ease;

}.project-contact-button:hover {

    background: #ed8000;

    color: #fff !important;

    transform: translateY(-3px);

}

/* Gallery */

.project-gallery {

    background: var(--project-muted);

}.project-gallery .section-heading {

    margin-bottom: 35px;

    text-align: center;

}.project-gallery .eyebrow {

    display: inline-block;

    margin-bottom: 12px;

    color: var(--project-orange);

    font-weight: 700;

}.project-gallery .section-heading h2 {

    margin: 0 0 12px;

    color: var(--project-primary);

    font-size: 34px;

    font-weight: 800;

}.project-gallery .section-heading p {

    color: #718096;

    line-height: 1.8;

}.project-gallery-grid {

    display: grid;

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

    gap: 24px;

}.project-gallery-item {

    display: block;

    overflow: hidden;

    border-radius: 16px;

    background: #fff;

    box-shadow: 0 8px 25px rgba(20, 43, 74, .07);

}.project-gallery-item img {

    display: block;

    width: 100%;

    height: 300px;

    object-fit: cover;

    transition: transform .4s ease;

}.project-gallery-item:hover img {

    transform: scale(1.04);

}

/* Previous / Next navigation */

.single-project-page .section-muted {

    background: var(--project-muted);

}.project-navigation {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    direction: rtl;

    min-height: 70px;

}.project-navigation > div {

    flex: 0 1 auto;

}.project-navigation a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--project-accent);

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    transition: color .25s ease, transform .25s ease;

}.project-navigation a:hover {

    color: var(--project-primary);

    transform: translateY(-2px);

}

/* Responsive */

@media (max-width: 991px) {

    .single-project-page .section {

        padding-top: 65px;

        padding-bottom: 65px;

    }

    .project-details-grid {

        grid-template-columns: minmax(0, 1fr) 320px;

        gap: 30px;

    }

    .project-gallery-grid {

        gap: 18px;

    }

    .project-gallery-item img {

        height: 250px;

    }

}@media (max-width: 767px) {

    .single-project-page .container {

        width: min(100% - 32px, 560px);

    }

    .single-project-page .section {

        padding-top: 48px;

        padding-bottom: 48px;

    }

    .project-hero {

        padding-top: 35px !important;

    }

    .project-breadcrumb {

        gap: 7px;

        margin-bottom: 25px;

        font-size: 12px;

    }

    .project-hero-content h1 {

        font-size: 30px;

        line-height: 1.5;

    }

    .project-hero-content .project-description {

        font-size: 15px;

    }

    .project-featured-image {

        border-radius: 14px;

    }

    .project-featured-image img {

        max-height: 380px;

        object-fit: contain;

    }

    .project-details-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .project-main-content .section-heading h2 {

        font-size: 28px;

    }

    .project-info-card {

        padding: 24px 20px;

    }

    .project-gallery-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .project-gallery-item img {

        height: auto;

        max-height: 320px;

        object-fit: cover;

    }

    .project-gallery .section-heading h2 {

        font-size: 27px;

    }

    .project-navigation {

        justify-content: space-between;

        gap: 15px;

    }

    .project-navigation a {

        font-size: 14px;

    }

}@media (max-width: 380px) {

    .project-navigation {

        flex-direction: column;

        align-items: stretch;

    }

    .project-navigation > div {

        width: 100%;

    }

}

/* =====================================
   SOLMAGIX PROJECT LIGHTBOX
===================================== */

.solmagix-lightbox {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 60px 80px;

    background: rgba(8, 17, 32, .94);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity .3s ease, visibility .3s ease;

}.solmagix-lightbox.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}.lightbox-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    gap: 18px;

}.lightbox-content img {

    display: block;

    max-width: 100%;

    max-height: calc(100vh - 150px);

    width: auto;

    height: auto;

    object-fit: contain;

    border-radius: 12px;

    box-shadow: 0 15px 50px rgba(0, 0, 0, .3);

}.lightbox-counter {

    color: #fff;

    font-size: 14px;

    font-weight: 600;

}.lightbox-close,

.lightbox-prev,

.lightbox-next {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border: 0;

    border-radius: 50%;

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

    color: #fff;

    font-size: 27px;

    cursor: pointer;

    transition: background .2s ease, transform .2s ease;

}.lightbox-close:hover,

.lightbox-prev:hover,

.lightbox-next:hover {

    background: #18a6a6;

    transform: scale(1.06);

}.lightbox-close {

    top: 25px;

    right: 25px;

    font-size: 32px;

}.lightbox-prev {

    left: 25px;

    top: 50%;

    transform: translateY(-50%);

}.lightbox-next {

    right: 25px;

    top: 50%;

    transform: translateY(-50%);

}.lightbox-prev:hover,

.lightbox-next:hover {

    transform: translateY(-50%) scale(1.06);

}body.lightbox-active {

    overflow: hidden;

}.solmagix-lightbox button:focus-visible {

    outline: 3px solid #18a6a6;

    outline-offset: 4px;

}@media (max-width: 767px) {

    .solmagix-lightbox {

        padding: 65px 15px;

    }

    .lightbox-content img {

        max-width: 100%;

        max-height: calc(100vh - 170px);

    }

    .lightbox-close,

    .lightbox-prev,

    .lightbox-next {

        width: 40px;

        height: 40px;

        font-size: 22px;

    }

    .lightbox-close {

        top: 15px;

        right: 15px;

    }

    .lightbox-prev {

        left: 10px;

    }

    .lightbox-next {

        right: 10px;

    }

}

/* =========================================

   PROJECTS ARCHIVE PAGE

   Scoped styles for archive-solmagix_project.php

\========================================= */

.projects-archive-page {

    overflow: hidden;

}

.projects-archive-page .projects-section {

    padding: 80px 0;

    background: var(--sm-bg);

}

.projects-archive-page .section-heading {

    max-width: 800px;

    margin: 0 auto 45px;

    text-align: center;

}

.projects-archive-page .section-heading h1 {

    margin: 5px 0 12px;

    color: var(--sm-primary);

    font-size: clamp(32px, 4vw, 44px);

    font-weight: 900;

    line-height: 1.4;

}

.projects-archive-page .section-heading p {

    max-width: 700px;

    margin: 0 auto;

    color: var(--sm-muted);

    font-size: 17px;

    line-height: 1.9;

}

.projects-archive-page .projects-archive-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 25px;

}

.projects-archive-page .project-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid #e5edf4;

    border-radius: 22px;

    background: #fff;

    box-shadow: 0 10px 30px rgba(8, 43, 80, .07);

    transition: transform .3s ease, box-shadow .3s ease;

}

.projects-archive-page .project-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 38px rgba(8, 43, 80, .13);

}

.projects-archive-page .project-image {

    display: block;

    flex: 0 0 240px;

    width: 100%;

    height: 240px;

    overflow: hidden;

    background: #eaf1f6;

}

.projects-archive-page .project-image img {

    display: block;

    width: 100%;

    max-width: none;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform .4s ease;

}

.projects-archive-page .project-card:hover .project-image img {

    transform: scale(1.05);

}

.projects-archive-page .project-image-placeholder {

    display: grid;

    place-items: center;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, #e6f7f7, #edf3f8);

    color: var(--sm-accent);

    font-size: 26px;

    font-weight: 900;

}

.projects-archive-page .project-content {

    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 23px;

}

.projects-archive-page .project-category {

    align-self: flex-start;

    margin-bottom: 10px;

    padding: 6px 13px;

    border-radius: 25px;

    background: #e5f7f7;

    color: var(--sm-accent-dark);

    font-size: 13px;

    font-weight: 800;

}

.projects-archive-page .project-content h2 {

    margin: 0 0 12px;

    color: var(--sm-primary);

    font-size: 21px;

    font-weight: 900;

    line-height: 1.6;

}

.projects-archive-page .project-content h2 a {

    color: inherit;

}

.projects-archive-page .project-content h2 a:hover {

    color: var(--sm-accent);

}

.projects-archive-page .project-content p {

    margin: 0 0 15px;

    color: var(--sm-muted);

    font-size: 15px;

    line-height: 1.9;

}

.projects-archive-page .project-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    padding-top: 12px;

    color: var(--sm-accent-dark);

    font-weight: 900;

}

.projects-archive-page .project-link:hover {

    color: var(--sm-orange-dark);

}

.projects-archive-page .projects-pagination {

    margin-top: 45px;

    text-align: center;

}

.projects-archive-page .projects-pagination .nav-links {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

}

.projects-archive-page .projects-pagination .page-numbers {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;

    min-height: 42px;

    padding: 8px 14px;

    border: 1px solid var(--sm-border);

    border-radius: 10px;

    background: #fff;

    color: var(--sm-primary);

    font-weight: 700;

}

.projects-archive-page .projects-pagination .page-numbers.current,

.projects-archive-page .projects-pagination .page-numbers:hover {

    border-color: var(--sm-accent);

    background: var(--sm-accent);

    color: #fff;

}

.projects-archive-page .projects-empty-state {

    padding: 55px 20px;

    border-radius: 20px;

    background: #fff;

    text-align: center;

    box-shadow: var(--sm-shadow);

}

.projects-archive-page .projects-empty-state h2 {

    color: var(--sm-primary);

}

.projects-archive-page .projects-empty-state p {

    color: var(--sm-muted);

}

@media (max-width: 900px) {

    .projects-archive-page .projects-archive-grid {

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

    }

}

@media (max-width: 600px) {

    .projects-archive-page .projects-section {

        padding: 60px 0;

    }

    .projects-archive-page .section-heading {

        margin-bottom: 30px;

    }

    .projects-archive-page .section-heading p {

        font-size: 15px;

    }

    .projects-archive-page .projects-archive-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .projects-archive-page .project-image {

        flex-basis: 220px;

        height: 220px;

    }

    .projects-archive-page .projects-pagination {

        margin-top: 30px;

    }

}

/* =========================================
   SERVICES ARCHIVE PAGE
   Scoped styles for archive-solmagix_service.php
========================================= */

.services-archive-page {
    direction: rtl;
    overflow: hidden;
}

.services-archive-page .services-section {
    padding: 80px 0;
    background: var(--sm-bg);
}

.services-archive-page .section-heading {
    max-width: 800px;
    margin: 0 auto 45px;
    text-align: center;
}

.services-archive-page .section-heading .section-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--sm-accent-dark);
    font-size: 16px;
    font-weight: 700;
}

.services-archive-page .section-heading h1 {
    margin: 5px 0 12px;
    color: var(--sm-primary);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 900;
    line-height: 1.4;
}

.services-archive-page .section-heading p {
    max-width: 700px;
    margin: 0 auto;
    color: var(--sm-muted);
    font-size: 17px;
    line-height: 1.9;
}

.services-archive-page .services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 25px;
}

.services-archive-page .service-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e5edf4;
    border-bottom: 5px solid var(--sm-accent);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(8, 43, 80, .07);
    transition: transform .3s ease, box-shadow .3s ease;
}

.services-archive-page .service-card:nth-child(3n + 2) {
    border-bottom-color: var(--sm-orange);
}

.services-archive-page .service-card:nth-child(3n + 3) {
    border-bottom-color: #007f98;
}

.services-archive-page .service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(8, 43, 80, .13);
}

.services-archive-page .service-image {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eaf1f6;
}

.services-archive-page .service-image img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .4s ease;
}

.services-archive-page .service-card:hover .service-image img {
    transform: scale(1.05);
}

.services-archive-page .service-image-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 190px;
    background: linear-gradient(135deg, #e6f7f7, #edf3f8);
    color: var(--sm-accent);
    font-size: 25px;
    font-weight: 900;
}

.services-archive-page .service-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 23px;
}

.services-archive-page .service-title {
    margin: 0 0 12px;
    color: var(--sm-primary);
    font-size: 21px;
    font-weight: 900;
    line-height: 1.6;
}

.services-archive-page .service-title a {
    color: inherit;
}

.services-archive-page .service-title a:hover {
    color: var(--sm-accent);
}

.services-archive-page .service-excerpt {
    margin: 0 0 15px;
    color: var(--sm-muted);
    font-size: 15px;
    line-height: 1.9;
}

.services-archive-page .service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    color: var(--sm-accent-dark);
    font-weight: 900;
}

.services-archive-page .service-link:hover {
    color: var(--sm-orange-dark);
}

.services-archive-page .services-pagination {
    margin-top: 45px;
    text-align: center;
}

.services-archive-page .services-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.services-archive-page .services-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--sm-border);
    border-radius: 10px;
    background: #fff;
    color: var(--sm-primary);
    font-weight: 700;
}

.services-archive-page .services-pagination .page-numbers.current,
.services-archive-page .services-pagination .page-numbers:hover {
    border-color: var(--sm-accent);
    background: var(--sm-accent);
    color: #fff;
}

.services-archive-page .services-empty {
    padding: 55px 20px;
    border-radius: 20px;
    background: #fff;
    text-align: center;
    box-shadow: var(--sm-shadow);
}

.services-archive-page .services-empty h2 {
    margin-top: 0;
    color: var(--sm-primary);
}

.services-archive-page .services-empty p {
    color: var(--sm-muted);
}

@media (max-width: 900px) {
    .services-archive-page .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .services-archive-page .services-section {
        padding: 60px 0;
    }

    .services-archive-page .section-heading {
        margin-bottom: 30px;
    }

    .services-archive-page .section-heading p {
        font-size: 15px;
    }

    .services-archive-page .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .services-archive-page .service-content {
        padding: 21px;
    }

    .services-archive-page .services-pagination {
        margin-top: 30px;
    }
}

/* =========================================
   SOLMAGIX - SINGLE SERVICE PAGE
   Scoped styles for single-solmagix_service.php
========================================= */

.single-service-page {
    --service-primary: var(--sm-primary);
    --service-accent: var(--sm-accent);
    --service-muted: var(--sm-muted);
    --service-bg: var(--sm-bg);
    --service-border: var(--sm-border);
    direction: rtl;
    color: var(--service-primary);
}

.single-service-page .container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

/* Hero */

.single-service-page .service-single-hero {
    padding: 55px 0 65px;
    background:
        radial-gradient(circle at 10% 15%, rgba(0,170,169,.08), transparent 32%),
        linear-gradient(135deg, #fff, #f3f8fc);
}

.single-service-page .service-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 35px;
    color: #8493a8;
    font-size: 14px;
}

.single-service-page .service-breadcrumb a {
    color: var(--service-accent);
    text-decoration: none;
}

.single-service-page .service-breadcrumb a:hover {
    color: var(--service-primary);
}

.single-service-page .service-single-heading {
    max-width: 900px;
    margin: 0 auto 35px;
    text-align: center;
}

.single-service-page .service-single-heading .section-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--service-accent);
    font-size: 16px;
    font-weight: 800;
}

.single-service-page .service-single-heading h1 {
    margin: 0 0 18px;
    color: var(--service-primary);
    font-size: clamp(32px, 4.5vw, 50px);
    font-weight: 900;
    line-height: 1.4;
}

.single-service-page .service-single-excerpt {
    max-width: 800px;
    margin-inline: auto;
    color: var(--service-muted);
    font-size: 18px;
    line-height: 2;
}

/* Featured image */

.single-service-page .service-single-featured-image {
    max-width: 1050px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--service-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(20,43,74,.09);
}

.single-service-page .service-single-featured-image img {
    display: block;
    width: 100%;
    max-height: 570px;
    object-fit: cover;
    object-position: center;
}

/* Content */

.single-service-page .service-single-content-section {
    padding: 75px 0;
    background: #fff;
}

.single-service-page .service-single-content {
    max-width: 900px;
    margin-inline: auto;
    color: #52647a;
    font-size: 17px;
    line-height: 2.1;
}

.single-service-page .service-single-content > *:first-child {
    margin-top: 0;
}

.single-service-page .service-single-content h2,
.single-service-page .service-single-content h3,
.single-service-page .service-single-content h4 {
    margin: 35px 0 15px;
    color: var(--service-primary);
    font-weight: 900;
    line-height: 1.5;
}

.single-service-page .service-single-content h2 {
    font-size: 30px;
}

.single-service-page .service-single-content h3 {
    font-size: 24px;
}

.single-service-page .service-single-content p {
    margin: 0 0 22px;
}

.single-service-page .service-single-content ul,
.single-service-page .service-single-content ol {
    padding-inline-start: 25px;
    margin: 0 0 25px;
}

.single-service-page .service-single-content li {
    margin-bottom: 10px;
}

.single-service-page .service-single-content a {
    color: var(--service-accent);
    font-weight: 700;
}

.single-service-page .service-single-content a:hover {
    color: var(--sm-orange-dark);
}

.single-service-page .service-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
}

.single-service-page .service-single-content blockquote {
    margin: 30px 0;
    padding: 20px 25px;
    border-right: 4px solid var(--service-accent);
    border-radius: 10px;
    background: var(--service-bg);
    color: var(--service-primary);
}

/* Responsive */

@media (max-width: 767px) {
    .single-service-page .container {
        width: min(100% - 32px, 560px);
    }

    .single-service-page .service-single-hero {
        padding: 35px 0 45px;
    }

    .single-service-page .service-breadcrumb {
        gap: 7px;
        margin-bottom: 25px;
        font-size: 12px;
    }

    .single-service-page .service-single-heading {
        margin-bottom: 25px;
    }

    .single-service-page .service-single-heading h1 {
        font-size: 30px;
    }

    .single-service-page .service-single-excerpt {
        font-size: 15px;
    }

    .single-service-page .service-single-featured-image {
        border-radius: 14px;
    }

    .single-service-page .service-single-featured-image img {
        max-height: 350px;
        object-fit: contain;
    }

    .single-service-page .service-single-content-section {
        padding: 45px 0;
    }

    .single-service-page .service-single-content {
        font-size: 15px;
    }

    .single-service-page .service-single-content h2 {
        font-size: 25px;
    }

    .single-service-page .service-single-content h3 {
        font-size: 21px;
    }
}


/* =========================================
   SINGLE SERVICE - SUBTITLE & FEATURES
   UI/UX refinements
========================================= */

.single-service-page .service-single-subtitle {
    max-width: 780px;
    margin: 0 auto 20px;
    color: var(--service-accent, var(--sm-accent));
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 800;
    line-height: 1.85;
    text-align: center;
}

/* Keep the featured image prominent without letting it dominate */
.single-service-page .service-single-featured-image {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto 0;
    overflow: hidden;
    border: 1px solid var(--service-border, var(--sm-border));
    border-radius: 22px;
    background: #f3f8fc;
    box-shadow: 0 14px 38px rgba(20, 43, 74, .08);
}

.single-service-page .service-single-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 540px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

/* Features panel */
.single-service-page .service-single-features {
    width: 100%;
    max-width: 900px;
    margin: 48px auto 0;
    padding: 32px 36px;
    border: 1px solid var(--service-border, var(--sm-border));
    border-radius: 20px;
    background: var(--service-bg, var(--sm-bg));
    box-shadow: 0 10px 28px rgba(20, 43, 74, .045);
}

.single-service-page .service-single-features h2 {
    margin: 0 0 24px;
    color: var(--service-primary, var(--sm-primary));
    font-size: clamp(22px, 2.4vw, 27px);
    font-weight: 900;
    line-height: 1.5;
}

/* Two balanced columns on desktop */
.single-service-page .service-single-features ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 32px;
    row-gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.single-service-page .service-single-features li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    margin: 0;
    color: #405675;
    font-size: 16px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

/* Check mark - supports the span markup used by the template */
.single-service-page .service-single-features li span {
    display: inline-flex;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--service-accent, var(--sm-accent));
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

/* Tablet and mobile */
@media (max-width: 767px) {
    .single-service-page .service-single-subtitle {
        font-size: 17px;
        line-height: 1.8;
    }

    .single-service-page .service-single-featured-image {
        margin-top: 24px;
        border-radius: 15px;
    }

    .single-service-page .service-single-featured-image img {
        max-height: 380px;
        aspect-ratio: 4 / 3;
        object-fit: contain;
    }

    .single-service-page .service-single-features {
        margin-top: 34px;
        padding: 24px 20px;
        border-radius: 16px;
    }

    .single-service-page .service-single-features h2 {
        margin-bottom: 18px;
        font-size: 22px;
    }

    .single-service-page .service-single-features ul {
        grid-template-columns: 1fr;
        row-gap: 13px;
    }

    .single-service-page .service-single-features li {
        font-size: 15px;
    }
}

@media (max-width: 380px) {
    .single-service-page .service-single-features {
        padding: 21px 16px;
    }

    .single-service-page .service-single-features li {
        gap: 9px;
        font-size: 14px;
    }
}
/* =====================================
   OUR PROCESS SECTION
===================================== */

.process-section {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 42px;
}

.process-card {
    position: relative;
    min-width: 0;
    padding: 30px 26px 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-bottom: 4px solid #00aaa9;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(20, 43, 74, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.process-card:nth-child(3n + 2) {
    border-bottom-color: #ff9800;
}

.process-card:nth-child(3n) {
    border-bottom-color: #008fa0;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(20, 43, 74, 0.11);
}

.process-step-number {
    position: absolute;
    top: 22px;
    inset-inline-end: 24px;
    color: #dce8ef;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    color: #fff;
    background: linear-gradient(135deg, #00aaa9, #008b9c);
    border-radius: 15px;
    font-size: 25px;
    font-weight: 700;
}

.process-card:nth-child(3n + 2) .process-icon {
    background: linear-gradient(135deg, #ffad00, #ff8500);
}

.process-card h3 {
    margin: 0 0 12px;
    color: #142b4a;
    font-size: 20px;
    line-height: 1.5;
}

.process-card p {
    margin: 0;
    color: #71839a;
    font-size: 15px;
    line-height: 1.9;
}

.process-step-label {
    display: inline-block;
    margin-top: 22px;
    color: #00a0a2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.process-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 36px;
    padding: 24px 28px;
    background: #f5f9fc;
    border: 1px solid #e5edf3;
    border-radius: 18px;
}

.process-cta p {
    margin: 0;
    color: #142b4a;
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 30px;
    }

    .process-card {
        padding: 25px 22px 22px;
    }

    .process-cta {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .process-cta .button {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-card {
        transition: none;
    }

    .process-card:hover {
        transform: none;
    }
}


/* Direction and language support: inherit RTL/LTR from the document. */
.process-section,
.process-grid,
.process-card,
.process-cta {
    direction: inherit;
}

.process-card {
    text-align: start;
}

.process-step-number {
    inset-inline-start: auto;
    inset-inline-end: 24px;
}

.process-cta {
    text-align: start;
}

/* Keep mixed Arabic/English labels readable in either page direction. */
.process-step-label {
    direction: ltr;
    unicode-bidi: isolate;
}

/* In RTL, the flex row follows the document's inline direction automatically. */
.process-cta {
    flex-direction: row;
}

@media (max-width: 600px) {
    .process-cta {
        flex-direction: column;
        align-items: stretch;
    }
}
/* =====================================
   OUR PROCESS SECTION
===================================== */

.process-section {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 42px;
}

.process-card {
    position: relative;
    min-width: 0;
    padding: 30px 26px 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-bottom: 4px solid #00aaa9;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(20, 43, 74, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.process-card:nth-child(3n + 2) {
    border-bottom-color: #ff9800;
}

.process-card:nth-child(3n) {
    border-bottom-color: #008fa0;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(20, 43, 74, 0.11);
}

.process-step-number {
    position: absolute;
    top: 22px;
    inset-inline-end: 24px;
    color: #dce8ef;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    color: #fff;
    background: linear-gradient(135deg, #00aaa9, #008b9c);
    border-radius: 15px;
    font-size: 25px;
    font-weight: 700;
}

.process-card:nth-child(3n + 2) .process-icon {
    background: linear-gradient(135deg, #ffad00, #ff8500);
}

.process-card h3 {
    margin: 0 0 12px;
    color: #142b4a;
    font-size: 20px;
    line-height: 1.5;
}

.process-card p {
    margin: 0;
    color: #71839a;
    font-size: 15px;
    line-height: 1.9;
}

.process-step-label {
    display: inline-block;
    margin-top: 22px;
    color: #00a0a2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.process-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 36px;
    padding: 24px 28px;
    background: #f5f9fc;
    border: 1px solid #e5edf3;
    border-radius: 18px;
}

.process-cta p {
    margin: 0;
    color: #142b4a;
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 30px;
    }

    .process-card {
        padding: 25px 22px 22px;
    }

    .process-cta {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .process-cta .button {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-card {
        transition: none;
    }

    .process-card:hover {
        transform: none;
    }
}


/* Direction and language support: inherit RTL/LTR from the document. */
.process-section,
.process-grid,
.process-card,
.process-cta {
    direction: inherit;
}

.process-card {
    text-align: start;
}

.process-step-number {
    inset-inline-start: auto;
    inset-inline-end: 24px;
}

.process-cta {
    text-align: start;
}

/* Keep mixed Arabic/English labels readable in either page direction. */
.process-step-label {
    direction: ltr;
    unicode-bidi: isolate;
}

/* In RTL, the flex row follows the document's inline direction automatically. */
.process-cta {
    flex-direction: row;
}

@media (max-width: 600px) {
    .process-cta {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =====================================
   INDUSTRIES WE SERVE SECTION
===================================== */

.industries-section {
    direction: inherit;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 42px;
}

.industry-card {
    min-width: 0;
    padding: 28px 25px;
    text-align: start;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(20, 43, 74, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(20, 43, 74, 0.09);
}

.industry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(135deg, #00aaa9, #008b9c);
    border-radius: 14px;
    font-size: 24px;
    font-weight: 700;
}

.industry-card:nth-child(3n + 2) .industry-icon {
    background: linear-gradient(135deg, #ffad00, #ff8500);
}

.industry-card h3 {
    margin: 0 0 10px;
    color: #142b4a;
    font-size: 19px;
    line-height: 1.5;
}

.industry-card p {
    margin: 0;
    color: #71839a;
    font-size: 14px;
    line-height: 1.9;
}

.industries-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding: 23px 26px;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 18px;
}

.industries-note p {
    margin: 0;
    color: #142b4a;
    font-size: 16px;
    font-weight: 700;
    text-align: start;
}

@media (max-width: 900px) {
    .industries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .industries-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .industry-card {
        padding: 24px 21px;
    }

    .industries-note {
        align-items: stretch;
        flex-direction: column;
        padding: 21px;
    }

    .industries-note .button {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .industry-card {
        transition: none;
    }

    .industry-card:hover {
        transform: none;
    }
}
/* =====================================
   OUR PROCESS SECTION
===================================== */

.process-section {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 42px;
}

.process-card {
    position: relative;
    min-width: 0;
    padding: 30px 26px 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-bottom: 4px solid #00aaa9;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(20, 43, 74, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.process-card:nth-child(3n + 2) {
    border-bottom-color: #ff9800;
}

.process-card:nth-child(3n) {
    border-bottom-color: #008fa0;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(20, 43, 74, 0.11);
}

.process-step-number {
    position: absolute;
    top: 22px;
    inset-inline-end: 24px;
    color: #dce8ef;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    color: #fff;
    background: linear-gradient(135deg, #00aaa9, #008b9c);
    border-radius: 15px;
    font-size: 25px;
    font-weight: 700;
}

.process-card:nth-child(3n + 2) .process-icon {
    background: linear-gradient(135deg, #ffad00, #ff8500);
}

.process-card h3 {
    margin: 0 0 12px;
    color: #142b4a;
    font-size: 20px;
    line-height: 1.5;
}

.process-card p {
    margin: 0;
    color: #71839a;
    font-size: 15px;
    line-height: 1.9;
}

.process-step-label {
    display: inline-block;
    margin-top: 22px;
    color: #00a0a2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.process-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 36px;
    padding: 24px 28px;
    background: #f5f9fc;
    border: 1px solid #e5edf3;
    border-radius: 18px;
}

.process-cta p {
    margin: 0;
    color: #142b4a;
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 30px;
    }

    .process-card {
        padding: 25px 22px 22px;
    }

    .process-cta {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .process-cta .button {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-card {
        transition: none;
    }

    .process-card:hover {
        transform: none;
    }
}


/* Direction and language support: inherit RTL/LTR from the document. */
.process-section,
.process-grid,
.process-card,
.process-cta {
    direction: inherit;
}

.process-card {
    text-align: start;
}

.process-step-number {
    inset-inline-start: auto;
    inset-inline-end: 24px;
}

.process-cta {
    text-align: start;
}

/* Keep mixed Arabic/English labels readable in either page direction. */
.process-step-label {
    direction: ltr;
    unicode-bidi: isolate;
}

/* In RTL, the flex row follows the document's inline direction automatically. */
.process-cta {
    flex-direction: row;
}

@media (max-width: 600px) {
    .process-cta {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =====================================
   INDUSTRIES WE SERVE SECTION
===================================== */

.industries-section {
    direction: inherit;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 42px;
}

.industry-card {
    min-width: 0;
    padding: 28px 25px;
    text-align: start;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(20, 43, 74, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(20, 43, 74, 0.09);
}

.industry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(135deg, #00aaa9, #008b9c);
    border-radius: 14px;
    font-size: 24px;
    font-weight: 700;
}

.industry-card:nth-child(3n + 2) .industry-icon {
    background: linear-gradient(135deg, #ffad00, #ff8500);
}

.industry-card h3 {
    margin: 0 0 10px;
    color: #142b4a;
    font-size: 19px;
    line-height: 1.5;
}

.industry-card p {
    margin: 0;
    color: #71839a;
    font-size: 14px;
    line-height: 1.9;
}

.industries-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding: 23px 26px;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 18px;
}

.industries-note p {
    margin: 0;
    color: #142b4a;
    font-size: 16px;
    font-weight: 700;
    text-align: start;
}

@media (max-width: 900px) {
    .industries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .industries-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .industry-card {
        padding: 24px 21px;
    }

    .industries-note {
        align-items: stretch;
        flex-direction: column;
        padding: 21px;
    }

    .industries-note .button {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .industry-card {
        transition: none;
    }

    .industry-card:hover {
        transform: none;
    }
}


/* =====================================
   TECHNOLOGIES WE USE SECTION
===================================== */

.technologies-section {
    direction: inherit;
    background: #f5f9fc;
}

.technologies-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.technology-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 21px 22px;
    text-align: start;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 17px;
    box-shadow: 0 8px 24px rgba(20, 43, 74, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.technology-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20, 43, 74, 0.08);
}

.technology-mark {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #fff;
    background: #142b4a;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.5px;
    direction: ltr;
    unicode-bidi: isolate;
}

.technology-mark-wordpress,
.technology-mark-js {
    background: #008f9b;
}

.technology-mark-php,
.technology-mark-db {
    background: #ff9800;
}

.technology-mark-html {
    background: #e45b35;
}

.technology-mark-css {
    background: #2875b9;
}

.technology-name {
    display: block;
    color: #142b4a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    direction: ltr;
    unicode-bidi: isolate;
}

.technology-category {
    display: block;
    margin-top: 4px;
    color: #71839a;
    font-size: 12px;
    line-height: 1.6;
}

.technologies-disclaimer {
    margin: 25px 0 0;
    color: #71839a;
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
}

@media (max-width: 900px) {
    .technologies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .technologies-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 30px;
    }

    .technology-item {
        padding: 17px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .technology-item {
        transition: none;
    }

    .technology-item:hover {
        transform: none;
    }
}
/* =====================================
   OUR PROCESS SECTION
===================================== */

.process-section {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 42px;
}

.process-card {
    position: relative;
    min-width: 0;
    padding: 30px 26px 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-bottom: 4px solid #00aaa9;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(20, 43, 74, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.process-card:nth-child(3n + 2) {
    border-bottom-color: #ff9800;
}

.process-card:nth-child(3n) {
    border-bottom-color: #008fa0;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(20, 43, 74, 0.11);
}

.process-step-number {
    position: absolute;
    top: 22px;
    inset-inline-end: 24px;
    color: #dce8ef;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    color: #fff;
    background: linear-gradient(135deg, #00aaa9, #008b9c);
    border-radius: 15px;
    font-size: 25px;
    font-weight: 700;
}

.process-card:nth-child(3n + 2) .process-icon {
    background: linear-gradient(135deg, #ffad00, #ff8500);
}

.process-card h3 {
    margin: 0 0 12px;
    color: #142b4a;
    font-size: 20px;
    line-height: 1.5;
}

.process-card p {
    margin: 0;
    color: #71839a;
    font-size: 15px;
    line-height: 1.9;
}

.process-step-label {
    display: inline-block;
    margin-top: 22px;
    color: #00a0a2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.process-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 36px;
    padding: 24px 28px;
    background: #f5f9fc;
    border: 1px solid #e5edf3;
    border-radius: 18px;
}

.process-cta p {
    margin: 0;
    color: #142b4a;
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 30px;
    }

    .process-card {
        padding: 25px 22px 22px;
    }

    .process-cta {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .process-cta .button {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-card {
        transition: none;
    }

    .process-card:hover {
        transform: none;
    }
}


/* Direction and language support: inherit RTL/LTR from the document. */
.process-section,
.process-grid,
.process-card,
.process-cta {
    direction: inherit;
}

.process-card {
    text-align: start;
}

.process-step-number {
    inset-inline-start: auto;
    inset-inline-end: 24px;
}

.process-cta {
    text-align: start;
}

/* Keep mixed Arabic/English labels readable in either page direction. */
.process-step-label {
    direction: ltr;
    unicode-bidi: isolate;
}

/* In RTL, the flex row follows the document's inline direction automatically. */
.process-cta {
    flex-direction: row;
}

@media (max-width: 600px) {
    .process-cta {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =====================================
   INDUSTRIES WE SERVE SECTION
===================================== */

.industries-section {
    direction: inherit;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 42px;
}

.industry-card {
    min-width: 0;
    padding: 28px 25px;
    text-align: start;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(20, 43, 74, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(20, 43, 74, 0.09);
}

.industry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(135deg, #00aaa9, #008b9c);
    border-radius: 14px;
    font-size: 24px;
    font-weight: 700;
}

.industry-card:nth-child(3n + 2) .industry-icon {
    background: linear-gradient(135deg, #ffad00, #ff8500);
}

.industry-card h3 {
    margin: 0 0 10px;
    color: #142b4a;
    font-size: 19px;
    line-height: 1.5;
}

.industry-card p {
    margin: 0;
    color: #71839a;
    font-size: 14px;
    line-height: 1.9;
}

.industries-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding: 23px 26px;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 18px;
}

.industries-note p {
    margin: 0;
    color: #142b4a;
    font-size: 16px;
    font-weight: 700;
    text-align: start;
}

@media (max-width: 900px) {
    .industries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .industries-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .industry-card {
        padding: 24px 21px;
    }

    .industries-note {
        align-items: stretch;
        flex-direction: column;
        padding: 21px;
    }

    .industries-note .button {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .industry-card {
        transition: none;
    }

    .industry-card:hover {
        transform: none;
    }
}


/* =====================================
   TECHNOLOGIES WE USE SECTION
===================================== */

.technologies-section {
    direction: inherit;
    background: #f5f9fc;
}

.technologies-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.technology-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 21px 22px;
    text-align: start;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 17px;
    box-shadow: 0 8px 24px rgba(20, 43, 74, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.technology-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20, 43, 74, 0.08);
}

.technology-mark {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #fff;
    background: #142b4a;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.5px;
    direction: ltr;
    unicode-bidi: isolate;
}

.technology-mark-wordpress,
.technology-mark-js {
    background: #008f9b;
}

.technology-mark-php,
.technology-mark-db {
    background: #ff9800;
}

.technology-mark-html {
    background: #e45b35;
}

.technology-mark-css {
    background: #2875b9;
}

.technology-name {
    display: block;
    color: #142b4a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    direction: ltr;
    unicode-bidi: isolate;
}

.technology-category {
    display: block;
    margin-top: 4px;
    color: #71839a;
    font-size: 12px;
    line-height: 1.6;
}

.technologies-disclaimer {
    margin: 25px 0 0;
    color: #71839a;
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
}

@media (max-width: 900px) {
    .technologies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .technologies-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 30px;
    }

    .technology-item {
        padding: 17px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .technology-item {
        transition: none;
    }

    .technology-item:hover {
        transform: none;
    }
}


/* =====================================
   COMPANY STATISTICS SECTION
===================================== */

.statistics-section {
    direction: inherit;
    background: #142b4a;
}

.statistics-section .section-kicker {
    color: #55d5d0;
}

.statistics-section .section-heading h2 {
    color: #fff;
}

.statistics-section .section-heading h2 strong {
    color: #55d5d0;
}

.statistics-section .section-heading p {
    color: rgba(255, 255, 255, 0.72);
}

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.statistic-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 150px;
    padding: 24px 18px;
    text-align: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
}

.statistic-value {
    color: #55d5d0;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.2;
}

.statistic-label {
    margin-top: 12px;
    color: #fff;
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .statistics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .statistics-grid {
        gap: 12px;
    }

    .statistic-item {
        min-height: 125px;
        padding: 18px 12px;
    }

    .statistic-label {
        font-size: 13px;
    }
}
/* =====================================
   OUR PROCESS SECTION
===================================== */

.process-section {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 42px;
}

.process-card {
    position: relative;
    min-width: 0;
    padding: 30px 26px 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-bottom: 4px solid #00aaa9;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(20, 43, 74, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.process-card:nth-child(3n + 2) {
    border-bottom-color: #ff9800;
}

.process-card:nth-child(3n) {
    border-bottom-color: #008fa0;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(20, 43, 74, 0.11);
}

.process-step-number {
    position: absolute;
    top: 22px;
    inset-inline-end: 24px;
    color: #dce8ef;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    color: #fff;
    background: linear-gradient(135deg, #00aaa9, #008b9c);
    border-radius: 15px;
    font-size: 25px;
    font-weight: 700;
}

.process-card:nth-child(3n + 2) .process-icon {
    background: linear-gradient(135deg, #ffad00, #ff8500);
}

.process-card h3 {
    margin: 0 0 12px;
    color: #142b4a;
    font-size: 20px;
    line-height: 1.5;
}

.process-card p {
    margin: 0;
    color: #71839a;
    font-size: 15px;
    line-height: 1.9;
}

.process-step-label {
    display: inline-block;
    margin-top: 22px;
    color: #00a0a2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.process-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 36px;
    padding: 24px 28px;
    background: #f5f9fc;
    border: 1px solid #e5edf3;
    border-radius: 18px;
}

.process-cta p {
    margin: 0;
    color: #142b4a;
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 30px;
    }

    .process-card {
        padding: 25px 22px 22px;
    }

    .process-cta {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .process-cta .button {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-card {
        transition: none;
    }

    .process-card:hover {
        transform: none;
    }
}


/* Direction and language support: inherit RTL/LTR from the document. */
.process-section,
.process-grid,
.process-card,
.process-cta {
    direction: inherit;
}

.process-card {
    text-align: start;
}

.process-step-number {
    inset-inline-start: auto;
    inset-inline-end: 24px;
}

.process-cta {
    text-align: start;
}

/* Keep mixed Arabic/English labels readable in either page direction. */
.process-step-label {
    direction: ltr;
    unicode-bidi: isolate;
}

/* In RTL, the flex row follows the document's inline direction automatically. */
.process-cta {
    flex-direction: row;
}

@media (max-width: 600px) {
    .process-cta {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =====================================
   INDUSTRIES WE SERVE SECTION
===================================== */

.industries-section {
    direction: inherit;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 42px;
}

.industry-card {
    min-width: 0;
    padding: 28px 25px;
    text-align: start;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(20, 43, 74, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(20, 43, 74, 0.09);
}

.industry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(135deg, #00aaa9, #008b9c);
    border-radius: 14px;
    font-size: 24px;
    font-weight: 700;
}

.industry-card:nth-child(3n + 2) .industry-icon {
    background: linear-gradient(135deg, #ffad00, #ff8500);
}

.industry-card h3 {
    margin: 0 0 10px;
    color: #142b4a;
    font-size: 19px;
    line-height: 1.5;
}

.industry-card p {
    margin: 0;
    color: #71839a;
    font-size: 14px;
    line-height: 1.9;
}

.industries-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding: 23px 26px;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 18px;
}

.industries-note p {
    margin: 0;
    color: #142b4a;
    font-size: 16px;
    font-weight: 700;
    text-align: start;
}

@media (max-width: 900px) {
    .industries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .industries-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .industry-card {
        padding: 24px 21px;
    }

    .industries-note {
        align-items: stretch;
        flex-direction: column;
        padding: 21px;
    }

    .industries-note .button {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .industry-card {
        transition: none;
    }

    .industry-card:hover {
        transform: none;
    }
}


/* =====================================
   TECHNOLOGIES WE USE SECTION
===================================== */

.technologies-section {
    direction: inherit;
    background: #f5f9fc;
}

.technologies-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.technology-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 21px 22px;
    text-align: start;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 17px;
    box-shadow: 0 8px 24px rgba(20, 43, 74, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.technology-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20, 43, 74, 0.08);
}

.technology-mark {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #fff;
    background: #142b4a;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.5px;
    direction: ltr;
    unicode-bidi: isolate;
}

.technology-mark-wordpress,
.technology-mark-js {
    background: #008f9b;
}

.technology-mark-php,
.technology-mark-db {
    background: #ff9800;
}

.technology-mark-html {
    background: #e45b35;
}

.technology-mark-css {
    background: #2875b9;
}

.technology-name {
    display: block;
    color: #142b4a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    direction: ltr;
    unicode-bidi: isolate;
}

.technology-category {
    display: block;
    margin-top: 4px;
    color: #71839a;
    font-size: 12px;
    line-height: 1.6;
}

.technologies-disclaimer {
    margin: 25px 0 0;
    color: #71839a;
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
}

@media (max-width: 900px) {
    .technologies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .technologies-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 30px;
    }

    .technology-item {
        padding: 17px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .technology-item {
        transition: none;
    }

    .technology-item:hover {
        transform: none;
    }
}


/* =====================================
   COMPANY STATISTICS SECTION
===================================== */

.statistics-section {
    direction: inherit;
    background: #142b4a;
}

.statistics-section .section-kicker {
    color: #55d5d0;
}

.statistics-section .section-heading h2 {
    color: #fff;
}

.statistics-section .section-heading h2 strong {
    color: #55d5d0;
}

.statistics-section .section-heading p {
    color: rgba(255, 255, 255, 0.72);
}

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.statistic-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 150px;
    padding: 24px 18px;
    text-align: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
}

.statistic-value {
    color: #55d5d0;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.2;
}

.statistic-label {
    margin-top: 12px;
    color: #fff;
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .statistics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .statistics-grid {
        gap: 12px;
    }

    .statistic-item {
        min-height: 125px;
        padding: 18px 12px;
    }

    .statistic-label {
        font-size: 13px;
    }
}


/* =====================================
   TESTIMONIALS SECTION
===================================== */

.testimonials-section {
    position: relative;
    overflow: hidden;
    background: #f5f8fb;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 42px;
}

.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px 26px 26px;
    background: #fff;
    border: 1px solid #e2ebf3;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(20, 43, 74, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(20, 43, 74, 0.10);
}

.testimonial-quote-mark {
    color: #00aaa9;
    font-family: Georgia, serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 0.8;
    margin-bottom: 16px;
}

.testimonial-content {
    flex: 1;
    color: #526174;
    font-size: 15px;
    line-height: 1.9;
}

.testimonial-content p:last-child {
    margin-bottom: 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #edf1f5;
}

.testimonial-avatar {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border-radius: 50%;
    background: #e8eef5;
}

.testimonial-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-author-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.testimonial-author-name {
    margin: 0;
    color: #142b4a;
    font-size: 16px;
    font-weight: 700;
}

.testimonial-author-position,
.testimonial-author-company {
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}

.testimonial-author-company {
    color: #00aaa9;
}

@media (max-width: 991px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 30px;
    }

    .testimonial-card {
        padding: 25px 21px 22px;
    }
}

/* =========================================
   TESTIMONIALS - FINAL VISUAL REFINEMENTS
   Appended to the existing Solmagix stylesheet.
   Keeps the current PHP markup and card structure.
========================================= */

.testimonials-section .testimonials-grid {
    align-items: stretch;
}

.testimonials-section .testimonial-card {
    height: 100%;
    min-height: 100%;
    padding: 30px 26px 26px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.testimonials-section .testimonial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 170, 169, 0.35);
    box-shadow: 0 18px 42px rgba(20, 43, 74, 0.11);
}

.testimonials-section .testimonial-content {
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 2;
}

.testimonials-section .testimonial-author {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 20px;
}

.testimonials-section .testimonial-avatar {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
}

.testimonials-section .testimonial-author-name {
    font-size: 17px;
    line-height: 1.6;
}

.testimonials-section .testimonial-author-position,
.testimonials-section .testimonial-author-company {
    font-size: 13px;
    line-height: 1.7;
}

/* Keep the cards comfortable on tablets and phones. */
@media (max-width: 991px) {
    .testimonials-section .testimonials-grid {
        align-items: stretch;
    }
}

@media (max-width: 600px) {
    .testimonials-section .testimonial-card {
        min-height: 0;
        padding: 25px 21px 22px;
    }

    .testimonials-section .testimonial-avatar {
        flex-basis: 60px;
        width: 60px;
        height: 60px;
    }

    .testimonials-section .testimonial-content {
        font-size: 15px;
        line-height: 1.9;
    }
}

/* Respect visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .testimonials-section .testimonial-card {
        transition: none;
    }

    .testimonials-section .testimonial-card:hover {
        transform: none;
    }
}
/* =========================================
   SOLMAGIX FAQ - ARCHIVE & ACCORDION
========================================= */

.faq-archive-section {
    background: #f5f9fc;
}

.faq-archive-section .section-heading h1 {
    color: var(--sm-primary);
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 900;
}

.faq-archive-section .section-heading p {
    color: var(--sm-muted);
}

.faq-category-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 32px;
}

.faq-category-link {
    display: inline-flex;
    align-items: center;
    padding: 9px 17px;
    border: 1px solid var(--sm-border);
    border-radius: 30px;
    background: #fff;
    color: var(--sm-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.faq-category-link:hover,
.faq-category-link.is-active {
    border-color: var(--sm-accent);
    background: var(--sm-accent);
    color: #fff;
}

.faq-archive-list {
    display: grid;
    gap: 14px;
    max-width: 950px;
    margin-inline: auto;
}

.faq-item {
    overflow: hidden;
    border: 1px solid #e2ebf3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 43, 74, .045);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 21px 24px;
    color: var(--sm-primary);
    cursor: pointer;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.7;
    list-style: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-toggle {
    position: relative;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e8f7f7;
}

.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--sm-accent-dark);
    transform: translate(-50%, -50%);
}

.faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform .2s ease;
}

.faq-item[open] .faq-toggle::after {
    transform: translate(-50%, -50%) rotate(0);
}

.faq-answer {
    padding: 0 24px 22px;
    color: var(--sm-muted);
    font-size: 15px;
    line-height: 2;
}

.faq-answer > :first-child {
    margin-top: 0;
}

.faq-answer > :last-child {
    margin-bottom: 0;
}

.faq-empty-state {
    max-width: 800px;
    margin-inline: auto;
    padding: 45px 20px;
    border: 1px solid var(--sm-border);
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.faq-empty-state h2 {
    color: var(--sm-primary);
}

.faq-empty-state p {
    color: var(--sm-muted);
}

.faq-pagination {
    margin-top: 35px;
    text-align: center;
}

@media (max-width: 600px) {
    .faq-archive-section.section {
        padding: 55px 0;
    }

    .faq-question {
        padding: 17px 18px;
        font-size: 15px;
    }

    .faq-answer {
        padding: 0 18px 18px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-toggle::after {
        transition: none;
    }
}

/* Homepage FAQ section */
.faq-home-section {
    position: relative;
}

.faq-home-list {
    display: grid;
    gap: 14px;
    max-width: 900px;
    margin-inline: auto;
}

.faq-home-item {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(20, 43, 74, 0.10);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(20, 43, 74, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-home-item[open] {
    border-color: rgba(0, 170, 169, 0.45);
    box-shadow: 0 12px 28px rgba(20, 43, 74, 0.07);
}

.faq-home-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    color: #142b4a;
    font-weight: 700;
    line-height: 1.7;
    cursor: pointer;
    list-style: none;
}

.faq-home-question::-webkit-details-marker {
    display: none;
}

.faq-home-question::marker {
    content: "";
}

.faq-home-toggle {
    position: relative;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 170, 169, 0.10);
}

.faq-home-toggle::before,
.faq-home-toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: #00aaa9;
    content: "";
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

.faq-home-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-home-item[open] .faq-home-toggle::after {
    transform: translate(-50%, -50%) rotate(0);
}

.faq-home-answer {
    padding: 0 24px 22px;
    color: #596579;
    line-height: 1.9;
}

.faq-home-answer > :first-child {
    margin-top: 0;
}

.faq-home-answer > :last-child {
    margin-bottom: 0;
}

.faq-home-more {
    margin-top: 28px;
}

@media (max-width: 600px) {
    .faq-home-question {
        padding: 16px;
        gap: 12px;
    }

    .faq-home-answer {
        padding: 0 16px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-home-item,
    .faq-home-toggle::before,
    .faq-home-toggle::after {
        transition: none;
    }
}

/* FAQ archive enhancements */
.solmagix-faq-archive { direction: rtl; }
.faq-archive-heading { margin-bottom: 32px; }
.faq-search-form { display:flex; align-items:stretch; gap:10px; width:min(100%,720px); margin:0 auto 24px; }
.faq-search-form input[type="search"] { flex:1; min-width:0; min-height:54px; padding:12px 18px; border:1px solid #d9e1e9; border-radius:10px; background:#fff; color:#142b4a; font:inherit; }
.faq-search-form input[type="search"]:focus { border-color:#00aaa9; outline:3px solid rgba(0,170,169,.14); }
.faq-search-form button { min-width:104px; padding:12px 22px; border:0; border-radius:10px; background:#142b4a; color:#fff; font:inherit; font-weight:700; cursor:pointer; transition:background .2s ease,transform .2s ease; }
.faq-search-form button:hover { background:#00aaa9; transform:translateY(-1px); }
.faq-category-list { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 auto 28px; }
.faq-category-link { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 16px; border:1px solid #dce4ec; border-radius:999px; background:#fff; color:#142b4a; text-decoration:none; font-size:.94rem; transition:color .2s ease,background .2s ease,border-color .2s ease; }
.faq-category-link:hover,.faq-category-link.is-active { border-color:#142b4a; background:#142b4a; color:#fff; }
.faq-results-meta { max-width:900px; margin:0 auto 14px; color:#68788a; font-size:.92rem; }
.faq-archive-list { display:grid; gap:14px; max-width:900px; margin-inline:auto; }
.faq-item { overflow:hidden; border:1px solid #e1e7ed; border-radius:12px; background:#fff; box-shadow:0 5px 18px rgba(20,43,74,.045); transition:border-color .2s ease,box-shadow .2s ease; }
.faq-item[open] { border-color:rgba(0,170,169,.55); box-shadow:0 10px 28px rgba(20,43,74,.08); }
.faq-question { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 22px; color:#142b4a; font-weight:700; line-height:1.7; cursor:pointer; list-style:none; }
.faq-question::-webkit-details-marker { display:none; }
.faq-question::marker { content:""; }
.faq-toggle { position:relative; flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:rgba(0,170,169,.12); }
.faq-toggle::before,.faq-toggle::after { position:absolute; top:50%; left:50%; width:11px; height:2px; border-radius:2px; background:#00aaa9; content:""; transform:translate(-50%,-50%); transition:transform .2s ease; }
.faq-toggle::after { transform:translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-toggle::after { transform:translate(-50%,-50%) rotate(0); }
.faq-answer { padding:0 22px 22px; color:#536477; line-height:1.9; }
.faq-answer>:first-child { margin-top:0; }
.faq-answer>:last-child { margin-bottom:0; }
.faq-pagination { margin-top:32px; }
.faq-pagination ul { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0; padding:0; list-style:none; }
.faq-pagination a,.faq-pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:7px 12px; border:1px solid #dce4ec; border-radius:8px; color:#142b4a; text-decoration:none; }
.faq-pagination .current { border-color:#142b4a; background:#142b4a; color:#fff; }
.faq-empty-state { max-width:720px; margin:28px auto 0; padding:36px 24px; border:1px dashed #cbd6e1; border-radius:14px; background:#f8fafc; text-align:center; }
.faq-empty-state h2 { margin-top:0; color:#142b4a; }
.faq-empty-state p { color:#68788a; }
@media (max-width:600px) {
 .faq-search-form { flex-direction:column; }
 .faq-search-form button { width:100%; min-height:48px; }
 .faq-question { padding:16px; gap:12px; }
 .faq-answer { padding:0 16px 18px; }
 .faq-category-list { justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
 .faq-search-form button,.faq-category-link,.faq-item,.faq-toggle::before,.faq-toggle::after { transition:none; }
}

/* =========================================
   SINGLE SERVICE - CALL TO ACTION
   Styles for service-single-cta in the
   single-solmagix_service.php template.
========================================= */

.single-service-page .service-single-cta {
    padding: 58px 0;
    background: linear-gradient(125deg, #142b4a, #16466b);
    color: #fff;
}

.single-service-page .service-single-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 38px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 22px;
    background: rgba(255, 255, 255, .06);
}

.single-service-page .service-single-cta-content h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(23px, 3vw, 30px);
    font-weight: 900;
    line-height: 1.5;
}

.single-service-page .service-single-cta-content p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    line-height: 1.9;
}

.single-service-page .service-single-cta .service-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    margin: 0;
    padding: 12px 25px;
    border-radius: 40px;
    background: linear-gradient(120deg, #ffad00, #ff7900);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.single-service-page .service-single-cta .service-link:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(255, 152, 0, .22);
}

.single-service-page .service-single-cta .service-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

@media (max-width: 767px) {
    .single-service-page .service-single-cta {
        padding: 42px 0;
    }

    .single-service-page .service-single-cta-content {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
        padding: 25px 21px;
        border-radius: 17px;
    }

    .single-service-page .service-single-cta-content p {
        font-size: 14px;
    }

    .single-service-page .service-single-cta .service-link {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .single-service-page .service-single-cta .service-link {
        transition: none;
    }

    .single-service-page .service-single-cta .service-link:hover {
        transform: none;
    }
}
/* =====================================================
   SERVICE CATEGORY FILTERS
===================================================== */

.services-category-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 36px;
}

.service-category-filter-link,
.service-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid rgba(20, 43, 74, 0.12);
    border-radius: 999px;
    background: #fff;
    color: #142b4a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.service-category-filter-link:hover,
.service-category-filter-link:focus-visible,
.service-category-filter-link.is-active {
    border-color: #142b4a;
    background: #142b4a;
    color: #fff;
}

.service-category-filter-link:focus-visible,
.service-category-tag:focus-visible {
    outline: 3px solid rgba(0, 170, 169, .35);
    outline-offset: 3px;
}

.service-category-count {
    display: inline-flex;
    min-width: 20px;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(0, 170, 169, .12);
    color: #087f80;
    font-size: 11px;
    font-weight: 700;
}

.service-category-filter-link.is-active .service-category-count,
.service-category-filter-link:hover .service-category-count {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.service-card-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 12px;
}

.service-category-tag {
    padding: 5px 11px;
    border-color: rgba(0, 170, 169, .2);
    background: rgba(0, 170, 169, .07);
    color: #087f80;
    font-size: 12px;
}

.service-category-tag:hover {
    border-color: #00aaa9;
    background: #00aaa9;
    color: #fff;
}

@media (max-width: 767px) {
    .services-category-filter {
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 26px;
    }

    .service-category-filter-link {
        padding: 8px 13px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-category-filter-link,
    .service-category-tag {
        transition: none;
    }
}
/* Single Service Categories */
.service-single-categories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 18px 0 22px;
}

.service-category-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border: 1px solid rgba(0, 170, 169, 0.25);
    border-radius: 30px;
    background: rgba(0, 170, 169, 0.08);
    color: #008f8e;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease;
}

.service-category-link:hover {
    background: #00aaa9;
    border-color: #00aaa9;
    color: #fff;
}

.service-category-link:focus-visible {
    outline: 2px solid #ff9800;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .service-category-link {
        transition: none;
    }
}

/* =========================================
   SINGLE SERVICE - RELATED SERVICES
========================================= */
.single-service-page .related-services-section {
    padding: 75px 0;
    background: var(--service-bg, #f3f8fc);
}

.single-service-page .related-services-section .section-heading {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.single-service-page .related-services-section .section-heading h2 {
    margin: 8px 0 12px;
    color: var(--service-primary, #142b4a);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 900;
    line-height: 1.4;
}

.single-service-page .related-services-section .section-heading p {
    margin: 0;
    color: var(--service-muted, #66768a);
    font-size: 16px;
    line-height: 1.9;
}

.single-service-page .related-services-section .services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 25px;
}

.single-service-page .related-services-section .service-card {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--service-border, #e4eaf0);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(20, 43, 74, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.single-service-page .related-services-section .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(20, 43, 74, .11);
}

.single-service-page .related-services-section .service-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eaf1f5;
}

.single-service-page .related-services-section .service-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.single-service-page .related-services-section .service-card:hover .service-image img {
    transform: scale(1.04);
}

.single-service-page .related-services-section .service-image-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 150px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #142b4a, #00aaa9);
    color: #fff;
    font-size: 22px;
    font-weight: 900;
}

.single-service-page .related-services-section .service-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 23px;
}

.single-service-page .related-services-section .service-title {
    margin: 0 0 12px;
    color: var(--service-primary, #142b4a);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
}

.single-service-page .related-services-section .service-title a {
    color: inherit;
    text-decoration: none;
}

.single-service-page .related-services-section .service-title a:hover {
    color: var(--service-accent, #00aaa9);
}

.single-service-page .related-services-section .service-excerpt {
    margin-bottom: 18px;
    color: var(--service-muted, #66768a);
    font-size: 14px;
    line-height: 1.9;
}

.single-service-page .related-services-section .service-link {
    margin-top: auto;
}

@media (max-width: 900px) {
    .single-service-page .related-services-section .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .single-service-page .related-services-section {
        padding: 48px 0;
    }

    .single-service-page .related-services-section .services-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .single-service-page .related-services-section .service-content {
        padding: 20px;
    }

    .single-service-page .related-services-section .service-title {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .single-service-page .related-services-section .service-card,
    .single-service-page .related-services-section .service-image img {
        transition: none;
    }

    .single-service-page .related-services-section .service-card:hover,
    .single-service-page .related-services-section .service-card:hover .service-image img {
        transform: none;
    }
}

/* =========================================
   SOLMAGIX - RELATED PROJECTS
   Added to the supplied complete stylesheet.
========================================= */

/* Related projects section */
.related-projects-section {
    padding-block: 80px;
}

.related-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.related-project-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(20, 43, 74, 0.10);
    border-radius: 16px;
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.related-project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(20, 43, 74, 0.10);
}

.related-project-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #f2f4f7;
}

.related-project-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-project-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
}

.related-project-content h3 {
    margin: 0 0 10px;
}

.related-project-content h3 a {
    color: var(--sm-primary, #142b4a);
    text-decoration: none;
}

.related-project-excerpt {
    margin-bottom: 16px;
}

.related-project-link {
    margin-top: auto;
    color: var(--sm-accent, #00aaa9);
    font-weight: 700;
    text-decoration: none;
}

.project-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-category-list .project-category {
    display: inline-flex;
    text-decoration: none;
}

@media (max-width: 900px) {
    .related-projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .related-projects-section {
        padding-block: 56px;
    }

    .related-projects-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .related-project-card {
        transition: none;
    }

    .related-project-card:hover {
        transform: none;
    }
}

/* =========================================
   PROJECTS ARCHIVE - CATEGORY FILTERS
   Matches archive-solmagix_project.php
========================================= */

.projects-archive-page .projects-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 36px;
}

.projects-archive-page .project-filter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 17px;
    border: 1px solid var(--sm-border);
    border-radius: 999px;
    background: #fff;
    color: var(--sm-primary);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    text-decoration: none;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.projects-archive-page .project-filter-link:hover,
.projects-archive-page .project-filter-link.is-active {
    border-color: var(--sm-primary);
    background: var(--sm-primary);
    color: #fff;
}

.projects-archive-page .project-filter-link:hover {
    transform: translateY(-2px);
}

.projects-archive-page .project-filter-link:focus-visible {
    outline: 3px solid rgba(0, 170, 169, .35);
    outline-offset: 3px;
}

.projects-archive-page .project-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0, 170, 169, .12);
    color: var(--sm-accent-dark);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.projects-archive-page .project-filter-link:hover .project-filter-count,
.projects-archive-page .project-filter-link.is-active .project-filter-count {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* Keep category tags inside project cards aligned with the archive layout. */
.projects-archive-page .project-category-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
}

.projects-archive-page .project-category-list .project-category {
    margin: 0;
    text-decoration: none;
}

.projects-archive-page .project-category-list .project-category:hover {
    background: var(--sm-accent);
    color: #fff;
}

@media (max-width: 600px) {
    .projects-archive-page .projects-filter {
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 26px;
    }

    .projects-archive-page .project-filter-link {
        min-height: 39px;
        padding: 8px 13px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .projects-archive-page .project-filter-link {
        transition: none;
    }

    .projects-archive-page .project-filter-link:hover {
        transform: none;
    }
}

/* =====================================
   PROJECT TAXONOMY PAGE
   Added without changing existing theme styles.
===================================== */
.project-taxonomy-page {
    --project-taxonomy-gap: 18px;
}

.project-taxonomy-page .project-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    color: var(--sm-muted, #6b7280);
    font-size: 13px;
    line-height: 1.8;
}

.project-taxonomy-page .project-breadcrumb a {
    color: var(--sm-primary, #142b4a);
    text-decoration: none;
    transition: color .2s ease;
}

.project-taxonomy-page .project-breadcrumb a:hover {
    color: var(--sm-accent, #00aaa9);
}

.project-taxonomy-page .project-taxonomy-description {
    max-width: 850px;
    margin: 0 auto 30px;
    color: var(--sm-muted, #6b7280);
    font-size: 16px;
    line-height: 1.9;
    text-align: center;
}

.project-taxonomy-page .project-taxonomy-description > :last-child {
    margin-bottom: 0;
}

.project-taxonomy-page .projects-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 0 34px;
}

.project-taxonomy-page .project-filter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid rgba(20, 43, 74, .12);
    border-radius: 999px;
    background: #fff;
    color: var(--sm-primary, #142b4a);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.project-taxonomy-page .project-filter-link:hover,
.project-taxonomy-page .project-filter-link:focus-visible {
    border-color: var(--sm-accent, #00aaa9);
    background: var(--sm-accent, #00aaa9);
    color: #fff;
    transform: translateY(-2px);
}

.project-taxonomy-page .project-filter-link.is-active {
    border-color: var(--sm-primary, #142b4a);
    background: var(--sm-primary, #142b4a);
    color: #fff;
}

.project-taxonomy-page .project-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0, 170, 169, .12);
    color: var(--sm-accent-dark, #087f80);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.project-taxonomy-page .project-filter-link:hover .project-filter-count,
.project-taxonomy-page .project-filter-link:focus-visible .project-filter-count,
.project-taxonomy-page .project-filter-link.is-active .project-filter-count {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

@media (max-width: 600px) {
    .project-taxonomy-page .project-breadcrumb {
        margin-bottom: 16px;
        font-size: 12px;
    }

    .project-taxonomy-page .project-taxonomy-description {
        margin-bottom: 24px;
        font-size: 14px;
        text-align: start;
    }

    .project-taxonomy-page .projects-filter {
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 26px;
    }

    .project-taxonomy-page .project-filter-link {
        min-height: 39px;
        padding: 8px 13px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-taxonomy-page .project-breadcrumb a,
    .project-taxonomy-page .project-filter-link {
        transition: none;
    }

    .project-taxonomy-page .project-filter-link:hover,
    .project-taxonomy-page .project-filter-link:focus-visible {
        transform: none;
    }
}
  


/* مقالات */
/* Solmagix Blog — append this file's contents to the end of style.css */
.sm-blog-page,
.sm-single-post { direction: rtl; }

.sm-container {
    width: min( min( 1180px, calc(100% - 40px) ), 100% );
    margin-inline: auto;
}

.sm-blog-hero {
    padding: clamp(56px, 8vw, 100px) 0;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, #142b4a 0%, #1d4667 100%);
}

.sm-blog-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #55d2ce;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.sm-blog-hero h1 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.25rem);
}

.sm-blog-hero p,
.sm-category-description {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255,255,255,.86);
    line-height: 1.9;
}

.sm-blog-content { padding: 64px 0; }

.sm-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 360px));
    justify-content: center;
    gap: 28px;
}

.sm-blog-card {
    overflow: hidden;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(20,43,74,.07);
    transition: transform .25s ease, box-shadow .25s ease;
}

.sm-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(20,43,74,.12);
}

.sm-blog-card-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #edf3f6;
}

.sm-blog-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.sm-blog-card:hover .sm-blog-card-image img { transform: scale(1.04); }

.sm-blog-image-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #142b4a;
    font-weight: 800;
    background: linear-gradient(135deg, #e8f1f4, #d8e8eb);
}

.sm-blog-card-body { padding: 22px; }

.sm-blog-meta,
.sm-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #718096;
    font-size: .85rem;
}

.sm-blog-card-title {
    margin: 12px 0;
    color: #142b4a;
    font-size: 1.2rem;
    line-height: 1.55;
}

.sm-blog-card-title a,
.sm-article-navigation a {
    color: inherit;
    text-decoration: none;
}

.sm-blog-card-title a:hover,
.sm-article-navigation a:hover { color: #00aaa9; }

.sm-blog-excerpt {
    color: #586575;
    line-height: 1.85;
}

.sm-blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #008f90;
    font-weight: 700;
    text-decoration: none;
}

.sm-blog-pagination { margin-top: 42px; }
.sm-blog-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.sm-blog-pagination a,
.sm-blog-pagination span {
    display: inline-flex;
    min-width: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    color: #142b4a;
    text-decoration: none;
}
.sm-blog-pagination .current { color: #fff; background: #142b4a; }

.sm-article { max-width: 1100px; margin: 56px auto; }
.sm-article-header { max-width: 850px; margin: 0 auto 30px; text-align: center; }
.sm-article-title { margin: 18px 0; color: #142b4a; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.4; }
.sm-article-intro { color: #657386; font-size: 1.1rem; line-height: 1.9; }
.sm-article-featured-image { overflow: hidden; margin: 0 0 36px; border-radius: 16px; }
.sm-article-featured-image img { display: block; width: 100%; height: auto; }
.sm-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; align-items: start; }
.sm-article-content { min-width: 0; color: #344255; font-size: 1.05rem; line-height: 2; overflow-wrap: anywhere; }
.sm-article-content h2,
.sm-article-content h3 { margin-top: 1.8em; color: #142b4a; line-height: 1.5; }
.sm-article-content img { max-width: 100%; height: auto; border-radius: 10px; }
.sm-article-content a { color: #008f90; }
.sm-ad-slot { display: flex; min-height: 250px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; border: 1px dashed #b8c7d1; border-radius: 12px; color: #718096; text-align: center; background: #f7fafb; }
.sm-ad-slot small { line-height: 1.6; }
.sm-article-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 30px; }
.sm-article-tags a { padding: 6px 12px; border-radius: 20px; color: #142b4a; background: #edf4f6; text-decoration: none; }
.sm-article-navigation { display: flex; justify-content: space-between; gap: 20px; margin-top: 35px; padding: 22px 0; border-top: 1px solid #e7edf1; border-bottom: 1px solid #e7edf1; }
.sm-related-posts { margin: 60px 0; }
.sm-related-posts > h2 { margin-bottom: 24px; color: #142b4a; }
.sm-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-blog-empty { padding: 50px 20px; text-align: center; color: #657386; }

@media (max-width: 900px) {
    .sm-blog-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 360px));
        justify-content: center;
    }
    .sm-article-layout { grid-template-columns: 1fr; }
    .sm-article-sidebar { max-width: 100%; }
}
@media (max-width: 600px) {
    .sm-blog-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .sm-related-grid { grid-template-columns: 1fr; }
    .sm-blog-content { padding: 42px 0; }
    .sm-article { margin: 36px auto; }
    .sm-article-navigation { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .sm-blog-card,
    .sm-blog-card-image img { transition: none; }
}



/* =========================================================
   Solmagix Blog — Modern Blog Template
   إضافات متوافقة مع قالب المدونة الحديث
   ========================================================= */

.sm-blog-page .sm-blog-hero-modern {
    position: relative;
    overflow: hidden;
    padding: clamp(58px, 8vw, 104px) 20px;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(0,170,169,.22), transparent 32%),
        linear-gradient(135deg, #142b4a 0%, #1d4667 100%);
}
.sm-blog-page .sm-blog-hero-modern h1 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.25;
}
.sm-blog-page .sm-blog-hero-modern p {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255,255,255,.86);
    line-height: 1.9;
}
.sm-blog-page .sm-blog-topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 26px auto 0;
}
.sm-blog-page .sm-blog-topics a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 30px;
    color: #fff;
    background: rgba(255,255,255,.08);
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.sm-blog-page .sm-blog-topics a:hover,
.sm-blog-page .sm-blog-topics a:focus-visible {
    border-color: #55d2ce;
    background: rgba(0,170,169,.2);
}
.sm-blog-page .sm-blog-search {
    display: flex;
    width: min(100%, 560px);
    gap: 10px;
    margin: 28px auto 0;
}
.sm-blog-page .sm-blog-search input[type="search"] {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 9px;
    outline: none;
    color: #142b4a;
    background: #fff;
}
.sm-blog-page .sm-blog-search input[type="search"]:focus {
    border-color: #55d2ce;
    box-shadow: 0 0 0 3px rgba(85,210,206,.2);
}
.sm-blog-page .sm-blog-search button,
.sm-blog-page .sm-blog-search input[type="submit"] {
    min-height: 48px;
    padding: 10px 22px;
    border: 0;
    border-radius: 9px;
    color: #142b4a;
    background: #55d2ce;
    font-weight: 700;
    cursor: pointer;
}
.sm-blog-page .sm-blog-content { padding: clamp(38px, 6vw, 72px) 0; }
.sm-blog-page .sm-blog-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    overflow: hidden;
    margin: 0 auto 42px;
    border: 1px solid #e5ebef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(20,43,74,.09);
}
.sm-blog-page .sm-blog-featured-image {
    display: block;
    min-height: 300px;
    overflow: hidden;
    background: #edf3f6;
}
.sm-blog-page .sm-blog-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    transition: transform .35s ease;
}
.sm-blog-page .sm-blog-featured:hover .sm-blog-featured-image img { transform: scale(1.035); }
.sm-blog-page .sm-blog-featured-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(22px, 4vw, 42px);
}
.sm-blog-page .sm-blog-featured-label {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 20px;
    color: #087f80;
    background: #e5f7f6;
    font-size: .82rem;
    font-weight: 800;
}
.sm-blog-page .sm-blog-featured-title {
    margin: 12px 0;
    color: #142b4a;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.5;
}
.sm-blog-page .sm-blog-featured-title a {
    color: inherit;
    text-decoration: none;
}
.sm-blog-page .sm-blog-featured-title a:hover { color: #008f90; }
.sm-blog-page .sm-blog-featured-excerpt {
    color: #586575;
    line-height: 1.9;
}
.sm-blog-page .sm-blog-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}
.sm-blog-page .sm-blog-card-modern {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(20,43,74,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.sm-blog-page .sm-blog-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(20,43,74,.12);
}
.sm-blog-page .sm-blog-card-modern .sm-blog-card-image {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.sm-blog-page .sm-blog-card-modern .sm-blog-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.sm-blog-page .sm-blog-card-modern:hover .sm-blog-card-image img { transform: scale(1.04); }
.sm-blog-page .sm-blog-card-modern .sm-blog-card-body { padding: 22px; }
.sm-blog-page .sm-blog-card-modern .sm-blog-card-title {
    margin: 12px 0;
    color: #142b4a;
    font-size: 1.15rem;
    line-height: 1.6;
}
.sm-blog-page .sm-blog-card-modern .sm-blog-card-title a {
    color: inherit;
    text-decoration: none;
}
.sm-blog-page .sm-blog-card-modern .sm-blog-card-title a:hover { color: #008f90; }
.sm-blog-page .sm-blog-pagination { margin-top: 42px; }
.sm-blog-page .sm-blog-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.sm-blog-page .sm-blog-pagination a,
.sm-blog-page .sm-blog-pagination span {
    display: inline-flex;
    min-width: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    color: #142b4a;
    text-decoration: none;
}
.sm-blog-page .sm-blog-pagination .current {
    color: #fff;
    border-color: #142b4a;
    background: #142b4a;
}
.sm-blog-page .sm-blog-empty {
    padding: 50px 20px;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    color: #657386;
    text-align: center;
    background: #f8fafb;
}
@media (max-width: 900px) {
    .sm-blog-page .sm-blog-grid-modern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-blog-page .sm-blog-featured { grid-template-columns: 1fr; }
    .sm-blog-page .sm-blog-featured-image,
    .sm-blog-page .sm-blog-featured-image img { min-height: 260px; max-height: 380px; }
}
@media (max-width: 600px) {
    .sm-blog-page .sm-blog-grid-modern { grid-template-columns: 1fr; }
    .sm-blog-page .sm-blog-search { flex-direction: column; }
    .sm-blog-page .sm-blog-search button,
    .sm-blog-page .sm-blog-search input[type="submit"] { width: 100%; }
    .sm-blog-page .sm-blog-featured-body { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .sm-blog-page .sm-blog-featured,
    .sm-blog-page .sm-blog-featured-image img,
    .sm-blog-page .sm-blog-card-modern,
    .sm-blog-page .sm-blog-card-modern img { transition: none; }
}


/* =========================================================
   SOLMAGIX BLOG — MODERN LAYOUT
   Append after the existing theme styles.
   ========================================================= */

.sm-blog-page {
    --sm-blog-navy: #082f52;
    --sm-blog-deep: #062746;
    --sm-blog-teal: #00aaa9;
    --sm-blog-orange: #ff9800;
    direction: rtl;
    overflow: hidden;
    background: #f7fbfd;
}
.sm-blog-page .sm-container {
    width: min( calc(100% - 48px), 1180px );
    margin-inline: auto;
}
.sm-blog-profile {
    position: relative;
    isolation: isolate;
    min-height: 285px;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(ellipse at 8% 100%, rgba(0,170,169,.28), transparent 35%), linear-gradient(115deg, #07365d, #062747 65%, #06466a);
}
.sm-blog-profile::before,
.sm-blog-profile::after {
    position: absolute;
    z-index: -1;
    width: 230px;
    height: 390px;
    content: "";
    border: 28px solid rgba(0,190,190,.2);
    border-radius: 48%;
    transform: rotate(28deg);
}
.sm-blog-profile::before { inset: -190px auto auto -105px; }
.sm-blog-profile::after { inset: 95px -155px auto auto; }
.sm-blog-profile-inner {
    position: relative;
    display: grid;
    min-height: 285px;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    align-items: center;
    gap: 35px;
    padding-block: 34px;
}
.sm-blog-profile-copy { position: relative; z-index: 2; text-align: right; }
.sm-blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    color: #00d2cf;
    font-size: 16px;
    font-weight: 800;
}
.sm-blog-eyebrow-line { width: 42px; height: 2px; background: #00aaa9; }
.sm-blog-profile h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(34px, 4.5vw, 54px);
    font-weight: 850;
    line-height: 1.25;
}
.sm-blog-profile-copy > p,
.sm-blog-profile-description {
    margin: 0;
    color: rgba(255,255,255,.9);
    font-size: clamp(15px, 1.7vw, 19px);
    line-height: 1.8;
}
.sm-blog-profile-description p { margin: 0; }
.sm-blog-profile-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 28px;
}
.sm-blog-profile-topics span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.sm-blog-profile-topics > span > span { color: #19e0dc; font-size: 22px; line-height: 1; }
.sm-blog-profile-art {
    position: relative;
    min-height: 215px;
    align-self: stretch;
}
.sm-blog-profile-glow {
    position: absolute;
    inset: 20% 8% 4%;
    border-radius: 50%;
    background: rgba(0,190,210,.18);
    filter: blur(34px);
}
.sm-blog-profile-device {
    position: absolute;
    right: 8%;
    bottom: 16px;
    width: min(88%, 390px);
    height: 190px;
    overflow: hidden;
    border: 7px solid #b7d2df;
    border-bottom-width: 13px;
    border-radius: 15px 15px 8px 8px;
    background: linear-gradient(145deg,#031c32,#07527a);
    box-shadow: 0 20px 35px rgba(0,0,0,.3), inset 0 0 0 2px #08283e;
    transform: perspective(700px) rotateY(-8deg) rotateX(2deg);
}
.sm-blog-device-top { display:flex; gap:5px; padding:9px 12px; background:#0b3b5d; }
.sm-blog-device-top i { width:6px; height:6px; border-radius:50%; background:#18b9c4; }
.sm-blog-device-code { display:grid; gap:9px; width:58%; padding:18px 14px; }
.sm-blog-device-code b { display:block; height:4px; border-radius:4px; background:linear-gradient(90deg,#14c5d0 0 22%,#e2f6fa 22% 65%,#157da2 65%); opacity:.9; }
.sm-blog-device-code b:nth-child(2n) { width:82%; margin-right:15px; }
.sm-blog-device-code b:nth-child(3n) { width:65%; }
.sm-blog-device-logo { position:absolute; top:58px; left:35px; color:#22e0e0; font-size:68px; font-weight:900; text-shadow:0 0 22px #00c8d4; }
.sm-blog-profile-cup {
    position:absolute; right:0; bottom:12px; display:grid; width:52px; height:70px; place-items:center;
    border-radius:7px 7px 15px 15px; color:#087a94; font-size:30px; font-weight:900;
    background:linear-gradient(90deg,#b9d8e3,#fff 45%,#9dc5d4); box-shadow:0 10px 18px #001c3266;
}
.sm-blog-profile-plant { position:absolute; right:48%; top:20px; width:48px; height:120px; }
.sm-blog-profile-plant i { position:absolute; bottom:34px; left:50%; width:25px; height:50px; border-radius:100% 0 100% 0; background:linear-gradient(135deg,#39b66b,#075a52); transform-origin:bottom; }
.sm-blog-profile-plant i:nth-child(1){transform:rotate(-45deg) translateX(-13px)}
.sm-blog-profile-plant i:nth-child(2){transform:rotate(35deg) translateX(8px)}
.sm-blog-profile-plant i:nth-child(3){transform:rotate(-15deg) translateX(-4px) scale(.8)}
.sm-blog-profile-plant i:nth-child(4){transform:rotate(65deg) translateX(12px) scale(.75)}
.sm-blog-profile-plant span { position:absolute; bottom:0; left:7px; width:38px; height:37px; border-radius:3px 3px 12px 12px; background:linear-gradient(90deg,#b4d0d8,#fff,#8fb9c7); }

.sm-blog-content { padding: 30px 0 64px; }
.sm-blog-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin-bottom:34px;
}
.sm-blog-search {
    display:flex;
    flex:0 0 290px;
    min-width:220px;
    height:46px;
    overflow:hidden;
    border:1px solid #e3edf2;
    border-radius:13px;
    background:#fff;
    box-shadow:0 5px 18px rgba(16,55,84,.06);
}
.sm-blog-search input {
    width:100%; min-width:0; padding:0 16px; border:0!important; outline:0!important;
    color:#142b4a; background:transparent!important; box-shadow:none!important; font:inherit; font-size:13px;
}
.sm-blog-search button {
    display:grid; flex:0 0 44px; place-items:center; margin:4px; border:0; border-radius:9px;
    color:#fff; background:#00aaa9; cursor:pointer; transition:background .2s ease;
}
.sm-blog-search button:hover { background:#087f86; }
.sm-blog-search button > span { font-size:25px; line-height:1; }
.sm-blog-categories { display:flex; flex:1; flex-wrap:wrap; justify-content:flex-start; gap:9px; }
.sm-blog-category-pill {
    display:inline-flex; min-height:43px; align-items:center; justify-content:center; gap:7px;
    padding:8px 17px; border:1px solid #e4edf2; border-radius:25px; color:#142b4a;
    background:#fff; box-shadow:0 4px 13px rgba(16,55,84,.045); font-size:12px; font-weight:750;
    text-decoration:none; transition:all .2s ease;
}
.sm-blog-category-pill:hover,
.sm-blog-category-pill.is-active {
    border-color:#00aaa9; color:#fff; background:#00aaa9; box-shadow:0 7px 18px rgba(0,170,169,.2);
}
.sm-blog-category-pill > span { font-size:17px; }

.sm-blog-featured {
    position:relative; display:grid; min-height:270px; grid-template-columns:1.05fr .95fr;
    overflow:hidden; margin-bottom:42px; border:1px solid #e7eff3; border-radius:22px;
    background:#fff; box-shadow:0 12px 30px rgba(14,58,87,.1);
}
.sm-blog-featured-media { position:relative; display:block; min-height:270px; overflow:hidden; grid-column:2; grid-row:1; background:#e8f3f5; }
.sm-blog-featured-media::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(0,170,169,.08),transparent 45%); }
.sm-blog-featured-media img { display:block; width:100%; height:100%; min-height:270px; object-fit:cover; transition:transform .5s ease; }
.sm-blog-featured:hover .sm-blog-featured-media img { transform:scale(1.035); }
.sm-blog-featured-copy {
    position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    padding:28px clamp(22px,4vw,54px); background:radial-gradient(circle at 0 100%,#e7f8f8,transparent 55%),#fff;
}
.sm-blog-featured-copy::after {
    position:absolute; top:-10%; left:-13px; width:24px; height:120%; content:""; background:#00b8b4;
    transform:skew(-15deg);
}
.sm-blog-featured-label {
    display:inline-flex; align-items:center; gap:7px; margin-bottom:12px; padding:8px 16px;
    border-radius:22px; color:#fff; background:#00aaa9; font-size:12px; font-weight:800;
}
.sm-blog-featured-copy .sm-blog-meta { margin-bottom:8px; }
.sm-blog-featured-copy h2 { margin:0 0 12px; color:#142b4a; font-size:clamp(21px,2.5vw,30px); font-weight:850; line-height:1.5; }
.sm-blog-featured-copy h2 a { color:inherit; text-decoration:none; }
.sm-blog-featured-copy h2 a:hover { color:#008f90; }
.sm-blog-featured-excerpt { color:#697788; font-size:14px; line-height:1.9; }
.sm-blog-featured-excerpt p { margin:0; }
.sm-blog-featured-link {
    display:inline-flex; align-items:center; gap:12px; margin-top:16px; padding:11px 24px;
    border-radius:25px; color:#fff; background:#ff9800; font-size:13px; font-weight:800;
    text-decoration:none; transition:background .2s ease,transform .2s ease;
}
.sm-blog-featured-link:hover { color:#fff; background:#e98200; transform:translateY(-2px); }

.sm-blog-section-heading { display:flex; align-items:center; gap:22px; margin:0 0 22px; }
.sm-blog-section-heading h2 { flex:0 0 auto; margin:0; color:#142b4a; font-size:27px; font-weight:850; }
.sm-blog-section-heading > span { height:3px; flex:1; background:linear-gradient(90deg,#00aaa9,rgba(0,170,169,0)); }
.sm-blog-grid-modern { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.sm-blog-card-modern {
    display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid #e6eef2;
    border-radius:18px; background:#fff; box-shadow:0 7px 20px rgba(15,57,87,.075);
    transition:transform .25s ease,box-shadow .25s ease;
}
.sm-blog-card-modern:hover { transform:translateY(-5px); box-shadow:0 13px 28px rgba(15,57,87,.13); }
.sm-blog-card-modern .sm-blog-card-image { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#e8f1f4; }
.sm-blog-card-modern .sm-blog-card-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.sm-blog-card-modern:hover .sm-blog-card-image img { transform:scale(1.045); }
.sm-blog-card-body { position:relative; display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:24px 20px 20px; }
.sm-blog-card-category {
    display:inline-flex; margin-top:-38px; margin-bottom:13px; padding:6px 13px; border:1px solid #00aaa9;
    border-radius:20px; color:#07506a; background:#e8ffff; font-size:11px; font-weight:800;
    text-decoration:none; position:relative; z-index:1;
}
.sm-blog-meta { display:flex; flex-wrap:wrap; gap:8px; color:#84909e; font-size:11px; }
.sm-blog-card-title { margin:12px 0 8px; color:#142b4a; font-size:18px; font-weight:850; line-height:1.55; }
.sm-blog-card-title a { color:inherit; text-decoration:none; }
.sm-blog-card-title a:hover { color:#008f90; }
.sm-blog-excerpt { color:#697788; font-size:13px; line-height:1.85; }
.sm-blog-excerpt p { margin:0; }
.sm-blog-read-more { display:inline-flex; align-items:center; gap:9px; margin-top:auto; padding-top:17px; color:#00a2a2; font-size:13px; font-weight:850; text-decoration:none; }
.sm-blog-read-more:hover { color:#08747a; }
.sm-blog-pagination { margin-top:30px; }
.sm-blog-pagination .nav-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; }
.sm-blog-pagination .page-numbers {
    display:inline-flex; min-width:40px; height:40px; align-items:center; justify-content:center;
    padding:0 12px; border:1px solid #e5edf2; border-radius:12px; color:#142b4a;
    background:#fff; box-shadow:0 4px 12px rgba(15,57,87,.045); font-size:14px; font-weight:750; text-decoration:none;
}
.sm-blog-pagination a.page-numbers:hover,
.sm-blog-pagination .page-numbers.current { border-color:#00aaa9; color:#fff; background:#00aaa9; }
.sm-blog-empty { padding:55px 20px; border:1px solid #e7eff3; border-radius:18px; text-align:center; background:#fff; }
.sm-blog-empty > span { color:#00aaa9; font-size:36px; }
.sm-blog-empty h2 { color:#142b4a; }
.sm-blog-empty p { color:#718096; }
.sm-blog-empty a { display:inline-block; margin-top:10px; padding:10px 20px; border-radius:22px; color:#fff; background:#00aaa9; text-decoration:none; }

@media (max-width: 980px) {
    .sm-blog-toolbar { align-items:stretch; flex-direction:column-reverse; }
    .sm-blog-search { flex:0 0 46px; width:100%; }
    .sm-blog-categories { justify-content:center; }
    .sm-blog-grid-modern { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .sm-blog-profile-inner { grid-template-columns:1fr .75fr; }
    .sm-blog-profile-art { transform:scale(.88); transform-origin:center right; }
}
@media (max-width: 680px) {
    .sm-blog-page .sm-container { width:min(calc(100% - 30px),1180px); }
    .sm-blog-profile-inner { display:block; min-height:0; padding-block:42px 30px; }
    .sm-blog-profile-copy { text-align:center; }
    .sm-blog-eyebrow { justify-content:center; font-size:13px; }
    .sm-blog-profile h1 { font-size:36px; }
    .sm-blog-profile-topics { justify-content:center; gap:12px 18px; margin-top:20px; }
    .sm-blog-profile-topics span { font-size:12px; }
    .sm-blog-profile-art { display:none; }
    .sm-blog-content { padding:22px 0 45px; }
    .sm-blog-categories { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:3px 1px 10px; scrollbar-width:thin; }
    .sm-blog-category-pill { flex:0 0 auto; min-height:39px; padding-inline:14px; }
    .sm-blog-featured { grid-template-columns:1fr; margin-bottom:32px; border-radius:17px; }
    .sm-blog-featured-media { grid-column:1; grid-row:1; min-height:190px; max-height:230px; }
    .sm-blog-featured-media img { min-height:190px; max-height:230px; }
    .sm-blog-featured-copy { padding:24px 21px 25px; }
    .sm-blog-featured-copy::after { top:-8px; right:20px; left:auto; width:65px; height:5px; transform:none; }
    .sm-blog-section-heading h2 { font-size:22px; }
    .sm-blog-grid-modern { grid-template-columns:1fr; gap:17px; }
    .sm-blog-card-modern { display:grid; grid-template-columns:115px minmax(0,1fr); }
    .sm-blog-card-modern .sm-blog-card-image { height:100%; min-height:150px; aspect-ratio:auto; }
    .sm-blog-card-body { padding:14px 13px; }
    .sm-blog-card-category { margin-top:0; margin-bottom:7px; padding:4px 9px; font-size:10px; }
    .sm-blog-card-title { margin:7px 0 5px; font-size:15px; }
    .sm-blog-excerpt { font-size:11px; line-height:1.65; }
    .sm-blog-read-more { padding-top:9px; font-size:11px; }
}
@media (max-width: 390px) {
    .sm-blog-card-modern { grid-template-columns:95px minmax(0,1fr); }
    .sm-blog-card-modern .sm-blog-card-image { min-height:160px; }
    .sm-blog-card-body { padding:11px; }
    .sm-blog-card-title { font-size:14px; }
    .sm-blog-excerpt { display:none; }
}
@media (prefers-reduced-motion: reduce) {
    .sm-blog-page *,
    .sm-blog-page *::before,
    .sm-blog-page *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}


/* =========================================================
   SOLMAGIX BLOG — FINAL LAYOUT ALIGNMENT
   Added to the complete theme stylesheet.
   ========================================================= */

/* Desktop: categories on the right and search on the left */
.sm-blog-toolbar {
    flex-direction: row-reverse;
}

.sm-blog-search,
.sm-blog-categories {
    direction: rtl;
}

/* Desktop featured post: image on the right, text on the left */
@media (min-width: 981px) {
    .sm-blog-featured-media {
        grid-column: 2;
    }

    .sm-blog-featured-copy {
        grid-column: 1;
    }
}

/* Tablet and mobile layout */
@media (max-width: 980px) {
    .sm-blog-toolbar {
        flex-direction: column-reverse;
    }
}

@media (max-width: 680px) {
    .sm-blog-featured-media,
    .sm-blog-featured-copy {
        grid-column: 1;
    }
}



/* =========================================================
   SOLMAGIX BLOG — SEARCH FIELD POLISH
   تحسين تنسيق البحث فقط دون تغيير شبكة المقالات أو البطاقات.
   ========================================================= */

.sm-blog-toolbar .sm-blog-search {
    display: flex;
    align-items: center;
    flex: 0 1 340px;
    width: 100%;
    min-width: 240px;
    min-height: 48px;
    height: 48px;
    gap: 6px;
    padding: 4px;
    direction: rtl;
    overflow: hidden;
    border: 1px solid #dce7ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(20, 43, 74, .06);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.sm-blog-toolbar .sm-blog-search:focus-within {
    border-color: #18a6a6;
    box-shadow: 0 0 0 3px rgba(24, 166, 166, .13);
}

.sm-blog-toolbar .sm-blog-search input[type="search"],
.sm-blog-toolbar .sm-blog-search input[type="text"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 12px;
    border: 0 !important;
    border-radius: 8px;
    outline: 0 !important;
    color: #142b4a;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit;
    font-size: 14px;
    text-align: right;
}

.sm-blog-toolbar .sm-blog-search input::placeholder {
    color: #8796a5;
    opacity: 1;
}

.sm-blog-toolbar .sm-blog-search input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}

.sm-blog-toolbar .sm-blog-search button,
.sm-blog-toolbar .sm-blog-search input[type="submit"] {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    min-height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: #00aaa9;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.sm-blog-toolbar .sm-blog-search button:hover,
.sm-blog-toolbar .sm-blog-search input[type="submit"]:hover {
    background: #087f86;
}

.sm-blog-toolbar .sm-blog-search button:active,
.sm-blog-toolbar .sm-blog-search input[type="submit"]:active {
    transform: scale(.96);
}

.sm-blog-toolbar .sm-blog-search button:focus-visible,
.sm-blog-toolbar .sm-blog-search input[type="submit"]:focus-visible {
    outline: 3px solid rgba(24, 166, 166, .25);
    outline-offset: 2px;
}

@media (max-width: 980px) {
    .sm-blog-toolbar .sm-blog-search {
        flex: 0 1 auto;
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .sm-blog-toolbar .sm-blog-search {
        min-height: 46px;
        height: 46px;
        border-radius: 10px;
    }

    .sm-blog-toolbar .sm-blog-search input[type="search"],
    .sm-blog-toolbar .sm-blog-search input[type="text"] {
        font-size: 13px;
    }

    .sm-blog-toolbar .sm-blog-search button,
    .sm-blog-toolbar .sm-blog-search input[type="submit"] {
        flex-basis: 38px;
        width: 38px;
        min-width: 38px;
        min-height: 36px;
    }
}



/* =========================================================
   SOLMAGIX BLOG — CATEGORY FILTER POLISH
   تحسين شريط التصنيفات فقط مع الحفاظ على بنية الصفحة.
   ========================================================= */

.sm-blog-toolbar .sm-blog-categories {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 9px;
    min-width: 0;
    direction: rtl;
}

.sm-blog-toolbar .sm-blog-categories a,
.sm-blog-toolbar .sm-blog-categories button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid #dfe9ed;
    border-radius: 999px;
    color: #42566b;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, background .2s ease,
                border-color .2s ease, box-shadow .2s ease,
                transform .2s ease;
}

.sm-blog-toolbar .sm-blog-categories a:hover,
.sm-blog-toolbar .sm-blog-categories button:hover {
    color: #087f86;
    border-color: #18a6a6;
    background: #f0fbfa;
    transform: translateY(-1px);
}

.sm-blog-toolbar .sm-blog-categories a.active,
.sm-blog-toolbar .sm-blog-categories a[aria-current="page"],
.sm-blog-toolbar .sm-blog-categories button.active,
.sm-blog-toolbar .sm-blog-categories button[aria-pressed="true"],
.sm-blog-toolbar .sm-blog-categories .current-cat > a {
    color: #fff;
    border-color: #00aaa9;
    background: #00aaa9;
    box-shadow: 0 4px 12px rgba(0, 170, 169, .2);
}

.sm-blog-toolbar .sm-blog-categories a:focus-visible,
.sm-blog-toolbar .sm-blog-categories button:focus-visible {
    outline: 3px solid rgba(24, 166, 166, .22);
    outline-offset: 2px;
}

@media (max-width: 980px) {
    .sm-blog-toolbar .sm-blog-categories {
        width: 100%;
        flex: 1 1 100%;
    }
}

@media (max-width: 600px) {
    .sm-blog-toolbar .sm-blog-categories {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 7px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 3px 1px 9px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .sm-blog-toolbar .sm-blog-categories a,
    .sm-blog-toolbar .sm-blog-categories button {
        flex: 0 0 auto;
        min-height: 37px;
        padding: 7px 13px;
        font-size: 12px;
    }
}

/* =========================================================
   SOLMAGIX SINGLE POST — RESPONSIVE DESIGN UPDATE
   متوافق مع بنية single.php الحالية
   ========================================================= */

.sm-single-main {
    direction: rtl;
    padding: clamp(28px, 5vw, 68px) 0;
    background: #f7fafc;
}

.sm-single-container {
    width: min(1120px, calc(100% - 48px));
    margin-inline: auto;
}

.sm-single-post {
    min-width: 0;
    padding: clamp(22px, 4vw, 52px);
    overflow: hidden;
    border: 1px solid #e8eef3;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 42px rgba(20, 43, 74, .07);
}

.sm-single-header {
    max-width: 900px;
    margin: 0 auto 30px;
    text-align: center;
}

.sm-single-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.sm-single-categories a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid rgba(0, 170, 169, .2);
    border-radius: 999px;
    color: #087f86;
    background: #effafa;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s ease;
}

.sm-single-categories a:hover {
    color: #fff;
    border-color: #00aaa9;
    background: #00aaa9;
}

.sm-single-title {
    margin: 0 auto 20px;
    color: #142b4a;
    font-size: clamp(1.85rem, 4vw, 3.15rem);
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sm-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 15px;
    color: #718096;
    font-size: 13px;
}

.sm-single-meta-item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.sm-single-meta-label { color: #8795a5; }
.sm-single-meta-item a { color: #087f86; font-weight: 700; }
.sm-single-meta-separator { color: #c0ccd5; }

.sm-single-featured-image {
    margin: 0 0 clamp(28px, 4vw, 46px);
    overflow: hidden;
    border-radius: 17px;
    background: #edf3f6;
}

.sm-single-featured-img {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: cover;
}

.sm-single-content {
    max-width: 850px;
    margin-inline: auto;
    color: #3d4d60;
    font-size: 17px;
    line-height: 2.05;
    overflow-wrap: anywhere;
}

.sm-single-content > *:first-child { margin-top: 0; }
.sm-single-content p { margin: 0 0 1.35em; }
.sm-single-content h2,
.sm-single-content h3,
.sm-single-content h4 {
    margin: 1.8em 0 .7em;
    color: #142b4a;
    font-weight: 800;
    line-height: 1.5;
}
.sm-single-content h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.sm-single-content h3 { font-size: clamp(1.2rem, 2.5vw, 1.55rem); }
.sm-single-content a {
    color: #008f90;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sm-single-content ul,
.sm-single-content ol {
    margin: 0 0 1.5em;
    padding-inline-start: 1.6em;
}
.sm-single-content li { margin-bottom: .5em; }
.sm-single-content blockquote {
    margin: 1.8em 0;
    padding: 18px 22px;
    border-right: 4px solid #00aaa9;
    border-radius: 10px 0 0 10px;
    color: #42566b;
    background: #f1f8f9;
}
.sm-single-content img,
.sm-single-content video,
.sm-single-content iframe {
    max-width: 100%;
}
.sm-single-content img {
    height: auto;
    border-radius: 12px;
}
.sm-single-content pre {
    max-width: 100%;
    padding: 18px;
    overflow-x: auto;
    border-radius: 10px;
    direction: ltr;
    text-align: left;
}
.sm-single-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}
.sm-single-content th,
.sm-single-content td {
    padding: 10px 12px;
    border: 1px solid #e3ebf0;
}
.sm-single-content figure { max-width: 100%; }
.sm-single-content figcaption {
    margin-top: 8px;
    color: #8290a0;
    font-size: 13px;
    text-align: center;
}

.sm-single-page-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
}
.sm-single-page-links a,
.sm-single-page-links > span:not(:first-child) {
    display: inline-flex;
    min-width: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 1px solid #dfe8ee;
    border-radius: 8px;
}

.sm-single-footer {
    max-width: 850px;
    margin: 35px auto 0;
    padding-top: 22px;
    border-top: 1px solid #edf1f4;
}
.sm-single-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}
.sm-single-tags-label {
    color: #718096;
    font-size: 13px;
    font-weight: 700;
}
.sm-single-tags a {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    color: #42566b;
    background: #eef4f7;
    font-size: 12px;
    text-decoration: none;
}
.sm-single-tags a:hover { color: #fff; background: #00aaa9; }

.sm-single-post-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0 0;
}
.sm-single-nav-previous,
.sm-single-nav-next {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid #e5edf2;
    border-radius: 14px;
    background: #fff;
}
.sm-single-nav-next { text-align: left; }
.sm-single-nav-label {
    display: block;
    margin-bottom: 7px;
    color: #8795a5;
    font-size: 12px;
    font-weight: 700;
}
.sm-single-post-navigation a {
    display: block;
    color: #142b4a;
    font-weight: 700;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.sm-single-post-navigation a:hover { color: #008f90; }

.sm-related-posts { margin-top: clamp(42px, 6vw, 70px); }
.sm-related-title {
    margin: 0 0 22px;
    color: #142b4a;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
}
.sm-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.sm-related-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e6edf2;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(20, 43, 74, .05);
    transition: transform .22s ease, box-shadow .22s ease;
}
.sm-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 13px 28px rgba(20, 43, 74, .1);
}
.sm-related-card-link {
    display: flex;
    height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}
.sm-related-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #edf3f6;
}
.sm-related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.sm-related-card:hover .sm-related-image img { transform: scale(1.04); }
.sm-related-card-content { padding: 17px; }
.sm-related-card-content time {
    color: #8795a5;
    font-size: 12px;
}
.sm-related-card-content h3 {
    margin: 8px 0;
    color: #142b4a;
    font-size: 16px;
    line-height: 1.55;
}
.sm-related-card-content p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.8;
}

@media (max-width: 991px) {
    .sm-single-container { width: min(100% - 36px, 850px); }
    .sm-single-post { padding: 28px; }
    .sm-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .sm-single-main { padding: 22px 0 38px; }
    .sm-single-container { width: calc(100% - 28px); }
    .sm-single-post {
        padding: 22px 17px;
        border-radius: 15px;
    }
    .sm-single-header { margin-bottom: 22px; }
    .sm-single-title { font-size: clamp(1.55rem, 7vw, 2.15rem); line-height: 1.5; }
    .sm-single-meta { gap: 8px 10px; font-size: 12px; }
    .sm-single-featured-image { margin-bottom: 26px; border-radius: 12px; }
    .sm-single-featured-img { max-height: 420px; }
    .sm-single-content { font-size: 15.5px; line-height: 1.95; }
    .sm-single-content blockquote { padding: 14px 16px; }
    .sm-single-post-navigation { grid-template-columns: 1fr; gap: 10px; }
    .sm-single-nav-next { text-align: right; }
    .sm-related-grid { grid-template-columns: 1fr; gap: 14px; }
    .sm-related-card-link { display: grid; grid-template-columns: minmax(100px, 34%) minmax(0, 1fr); }
    .sm-related-image { min-height: 100%; aspect-ratio: auto; }
    .sm-related-card-content { padding: 12px; }
    .sm-related-card-content h3 { font-size: 14px; }
    .sm-related-card-content p { font-size: 12px; }
}

@media (max-width: 380px) {
    .sm-single-container { width: calc(100% - 20px); }
    .sm-single-post { padding: 18px 13px; }
    .sm-single-categories { gap: 6px; }
    .sm-single-categories a { padding: 5px 10px; font-size: 11px; }
    .sm-single-title { font-size: 1.45rem; }
    .sm-single-meta-separator { display: none; }
    .sm-related-card-link { grid-template-columns: 1fr; }
    .sm-related-image { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
    .sm-single-categories a,
    .sm-related-card,
    .sm-related-image img { transition: none; }
    .sm-related-card:hover,
    .sm-related-card:hover .sm-related-image img { transform: none; }
}