/*
Theme Name: SquareMedia Technology
Theme URI: https://squaremediatechnology.com/squaremedia-technology-theme/
Author: Square Media Technology
Author URI: https://squaremediatechnology.com/
Description: SquareMedia Technology is a fast, accessible, translation-ready theme for digital marketing agencies, studios, and small businesses. It ships a section-based front page, a clean blog, footer widget areas, custom logo and color support, and self-hosted fonts (no external requests by default). Built to WordPress coding and security standards.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: squaremedia-technology
Domain Path: /languages
Tags: blog, portfolio, news, one-column, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, theme-options, translation-ready, block-styles, editor-style, full-width-template, threaded-comments, sticky-post

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

SquareMedia Technology bundles the following third-party resources:
- Plus Jakarta Sans — SIL Open Font License 1.1 — https://github.com/tokotype/PlusJakartaSans
- Font Awesome Free 7 — Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT — https://fontawesome.com
Full license texts and credits are listed in readme.txt.
*/

/* ============================================================
   The design system below is the theme's compiled stylesheet.
   Global base applies everywhere; per-page sections are scoped
   under body.page-* classes added via body_class() in PHP.
   ============================================================ */

/* =====================================================================
   Square Media Technology - Consolidated Stylesheet
   1) GLOBAL BASE  (applies to every page; used directly by the homepage)
   2) PER-PAGE     (scoped under body.page-* so pages never collide)
   ===================================================================== */

/* ============================ 1) GLOBAL BASE ============================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#6b21d6;
  --primary-foreground:#fff;
  --bg:#fff;
  --fg:#0e0a1f;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:#fff;
  --soft:#f7f5fb;
  --dark:#0e0a1f;
  --orange:#f97316;
  /* --- added: vars referenced by testimonial section but previously undefined --- */
  --white:#ffffff;
  --dark-blue:#0E2246;
  --text-paragraph:#666666;
  --green-quote:#6C22D6;
}
html,body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--fg);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.tiny{font-size:11px}
.bold{font-weight:700}
.center{text-align:center}
h1,h2,h3,h4{font-weight:800;line-height:1.1}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.8rem,4vw,3rem)}
h3{font-size:1.15rem}
.ul-accent{position:relative;display:inline-block;color:var(--primary)}
.ul-accent::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:8px;background:rgba(249,115,22,.35);border-radius:4px;z-index:-1}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;font-weight:600;font-size:14px;transition:.2s;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:#fff; border: 2px solid var(--primary); color: var(--primary); transition:all 0.3s ease;}
.btn-outline{border:1px solid rgba(0,0,0,.2);padding:10px 20px}
.btn-outline:hover{background:#000;color:#fff}
.btn-play{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px; border: 1px solid;}
.play-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px}
.logo-mark{width:50px;height:50px;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.main-nav{display:flex;gap:32px;font-size:14px;font-weight:500}
.main-nav a:hover,.main-nav .active{color:var(--primary)}
@media(max-width:768px){.main-nav{display:none}}

/* Hero */
.about-hero{padding: 80px 0px !important;}
.about-hero .hero-image{display:flex; align-items: center; justify-content: center;}
.hero{padding:48px 24px 80px;position:relative}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:768px){.hero-grid{grid-template-columns:1fr}}
.hero-text p{margin-top:24px;color:var(--muted);max-width:420px}
.hero-cta{margin-top:32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.socials{margin-top:48px;display:flex;gap:12px;color:rgba(0,0,0,.4)}
.socials span{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;font-size:11px}
.hero-image{position:relative;}
.hero-image img{position:relative;z-index:2;margin:0 auto;max-height:520px;width:auto; border-radius:10px;}
.blur-blob{position:absolute;inset:-50px;border-radius:40%;background:rgba(107,33,214,.18);filter:blur(40px)}
.clients-image .blur-blob{position: absolute;inset: 50px;border-radius: 40%;background: rgba(107, 33, 214, .18);filter: blur(120px); z-index:100}
.dot-pink{position:absolute;top:-20px;right:40px;width:40px;height:40px;border-radius:50%;background:rgba(107,33,214,.3)}
.dot-square{position:absolute;right:0;bottom:-40px;width:32px;height:32px;background:var(--primary);transform:rotate(12deg);border-radius:6px}
.card-trusted,.card-revenue{position:absolute;z-index:3;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:0 12px 32px rgba(0,0,0,.08);display:flex;align-items:center;gap:8px}
.card-trusted{left:-10px;top:-10px}
.card-revenue{right:16px;bottom:10px;flex-direction:column;align-items:flex-start;gap:2px}
.avatar-orange{width:36px;height:36px;border-radius:50%;background:rgba(249,115,22,.3)}
.spark{width:120px;height:30px;color:var(--primary)}

/* Section head */
.section-head{margin-bottom:48px}
.eyebrow{font-size:11px;font-weight:700;color:var(--primary);letter-spacing:.2em}
.section-head h2{margin-top:12px}
.section-head p{margin-top:16px;color:var(--muted);max-width:560px;font-size:14px}
.section-head.center p{margin-left:auto;margin-right:auto}

/* Services */
.services{background:var(--soft);padding:80px 0}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.service-grid{grid-template-columns:repeat(2,1fr)}}
.service-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.service-card:hover, .service-card.featured:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-4px);     transition: 1.9s ease;}
.service-card.featured{transform:translateY(-16px);box-shadow:0 20px 40px rgba(0,0,0,.1)}

.service-card h3{margin-top:16px}
.service-card p{margin-top:8px;font-size:14px;color:var(--muted)}
.service-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.icon-orange{background:#fed7aa}
.icon-purple{background:#e9d5ff}
.icon-pink{background:#fbcfe8}
.service-image{position:relative;border-radius:16px;background-size:cover;background-position:center;min-height:200px;overflow:hidden;color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.service-image::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.service-image>*{position:relative;z-index:1}
.play-circle{width:40px;height:40px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center}
.image-label{font-weight:700}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:64px 24px;text-align:center}
@media(max-width:768px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat-num{font-size:clamp(1.8rem,4vw,3rem);font-weight:800}

/* Clients */
.clients{padding:40px 24px}
.clients-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.clients-grid .btn-primary{margin-top:20px}
@media(max-width:768px){.clients-grid{grid-template-columns:1fr}}
.clients-image{position:relative;min-height:480px}
.clients-image img{position:relative;z-index:2;margin:0 auto;max-height:480px}
.badge-top-left,.badge-right{position:absolute;z-index:3;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:0 12px 32px rgba(0,0,0,.08)}
.badge-top-left{top:0px;left:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#e9d5ff;border-radius:12px;padding:0}
.badge-right{top:20px;right:16px;display:flex;align-items:center;gap:8px; border:1px solid #6b21d6}
.badge-icon{width:32px;height:32px;border-radius:8px;background:rgba(107,33,214,.15);display:flex;align-items:center;justify-content:center}
.clients h2{margin-top:12px}
.clients>.clients-grid>div>p{margin-top:20px;font-size:16px;max-width:620px}
.bullets{margin:24px 0;display:flex;flex-direction:column;gap:12px;font-size:14px}
.bullets li{display:flex;align-items:center;gap:12px}
.bullets li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}

/* Brands */
.brands{padding:48px 0px 0px;display:grid;grid-template-columns:repeat(5,1fr);gap:32px;align-items:center;justify-items:center;}
@media(max-width:768px){.brands{grid-template-columns:repeat(2,1fr)}}
.brand{text-align:center;font-size:24px; width: 130px;}
.brand div{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.2em}

/* Projects */
.projects{background:#3f305e;color:#fff;padding:80px 0}
.projects-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:48px}
.projects-head h2{max-width:660px}
.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:flex-start}
@media(max-width:768px){.projects-grid{grid-template-columns:1fr}}
.projects-images{position:relative;padding-bottom:60px}
.proj-img-1{border-radius:16px;width:70%}
.proj-img-2{border-radius:16px;width:70%;position:absolute;right:0;bottom:0;top:50%;border:4px solid var(--dark)}
.proj-item{padding:24px 0;display:flex;gap:24px;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.1);    justify-content: space-between;}
.proj-item:last-child{border-bottom:none}
.proj-num{font-size:14px;font-weight:700;color:rgba(255,255,255,.4);width:40px}
.proj-item h3{font-size:1.25rem}
.proj-item p{margin-top:8px;font-size:14px;color:rgba(255,255,255,.6)}
.proj-arrow{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Testimonials */
.testimonials{padding:80px 24px;text-align:center;max-width:720px}
.testimonials h2{margin-top:12px}
.testimonial-avatars{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:8px}
.nav-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff}
.avatar-row{display:flex}
.avatar-row img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-8px}
.avatar-row img:first-child{margin-left:0}
.avatar-row img.active{outline:2px solid var(--primary);transform:scale(1.1);z-index:2}
.quote{margin-top:32px;color:var(--muted);max-width:560px;margin-left:auto;margin-right:auto}
#quoteName{margin-top:24px}

/* Pricing */
.pricing-banner{position:relative;border-radius:24px;background:linear-gradient(to right,#e9d5ff,#f5e6ff,#fbcfe8);padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:flex-end;overflow:hidden;margin:80px 0 40px;}
@media(max-width:768px){.pricing-banner{grid-template-columns:1fr}}
.pricing-banner h3{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800}
.pricing-banner p{margin-top:16px;font-size:14px;max-width:410px}
.pricing-banner .btn{margin-top:24px}
.pricing-image{position:relative}
.pricing-image img{max-height:300px;margin-left:auto}
.pricing-badge{position:absolute;top:16px;right:0;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 8px 24px rgba(0,0,0,.1)}

/* Team */
.team{padding:80px 24px}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
.team-card{text-align:center}
.team-img{border-radius:16px;overflow:hidden;aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center}
.team-img img{max-height:100%;object-fit:contain}
.team-card .bold{margin-top:16px}
.bg-rose{background:#ffe4e6}.bg-amber{background:#fef3c7}.bg-pink{background:#fbcfe8}.bg-emerald{background:#d1fae5}.bg-yellow{background:#fef9c3}

/* News */
.news{padding:60px 24px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:768px){.news-grid{grid-template-columns:1fr}}
.news article{border:1px solid var(--border);border-radius:16px;overflow:hidden}
.news article img{aspect-ratio:4/3;object-fit:cover;width:100%}
.news-body{padding:20px}
.news-body h3{line-height:1.35}
.news-meta{margin-top:16px;font-size:12px;color:var(--muted);display:flex;gap:12px}

/* Marquee */
.marquee-bar{background:var(--primary);color:#fff;padding:16px 0;overflow:hidden;margin-top:80px}
.marquee-track{display:flex;gap:48px;white-space:nowrap;animation:marquee 25s linear infinite;font-weight:600;font-size:14px}
.marquee-track span{display:inline-flex;align-items:center;gap:48px}
.marquee-track em{color:var(--orange);font-style:normal}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Footer */
.site-footer{background:var(--dark);color:#fff}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}
.logo-light{color:#fff}
.site-footer p{margin-top:16px;font-size:14px;}
.footer-socials{margin-top:20px;display:flex;gap:12px;color:rgba(255,255,255,.6)}
.footer-socials span{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:11px}
.site-footer h4{margin-bottom:16px}
.site-footer ul{display:flex;flex-direction:column;gap:8px;font-size:14px;color:rgba(255,255,255,.6)}
.subscribe{display:flex;align-items:center;background:rgba(255,255,255,.1);border-radius:999px;padding:4px;margin-top:16px}
.subscribe input{flex:1;background:transparent;border:none;padding:8px 16px;font-size:14px;color:#fff;outline:none}
.subscribe input::placeholder{color:rgba(255,255,255,.4)}
.subscribe button{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px;text-align:center;font-size:12px;color:rgba(255,255,255,.5)}



 

    .testimonial-section {
        padding: 100px 0;
        position: relative;
        overflow: hidden;
        background: var(--soft);
    }
    .testimonial-section h2{
      max-width: 80%;
      margin: auto;
    }
    .testimonial-section h2 .ul-accent{
      display: ruby;
    }

    /* Ambient backdrop glow effects */
    .testimonial-section::before, 
    .testimonial-section::after {
        content: '';
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: rgba(108, 34, 214, 0.08);
        filter: blur(80px);
        z-index: 1;
    }
    .testimonial-section::before { top: -10%; left: -5%; }
    .testimonial-section::after { bottom: -10%; right: -5%; }

    .testimonial-section .container {
        position: relative;
        z-index: 2;
        margin: 0 auto;
        padding: 0 24px;
    }

    .text-center { text-align: center; }

    .testimonial-heading {
        font-size: 40px;
        font-weight: 800;
        color: var(--dark-blue);
        line-height: 1.25;
        max-width: 750px;
        margin: 0 auto 60px auto;
        letter-spacing: -0.5px;
    }

    /* --- Outer Wrapper Slider Layout Structural Setup --- */
    .slider-outer-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 35px;
        max-width: 930px;
        margin: 40px auto auto;
    }

    /* Arrow Circle Trigger Controls Buttons Styles */
    .nav-arrow {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(226, 232, 240, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
        backdrop-filter: blur(4px);
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        padding: 0;
    }

    /* Pure CSS CSS Border Chevron Drawing Rules */
    .arrow-icon {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-top: 2px solid #718096;
        border-right: 2px solid #718096;
        transition: border-color 0.3s;
    }
    .arrow-icon.left { transform: rotate(-135deg); margin-left: 2px; }
    .arrow-icon.right { transform: rotate(45deg); margin-right: 2px; }

    .nav-arrow:hover {
        background-color: var(--white);
        border-color: rgba(108, 34, 214, 0.2);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
        transform: scale(1.05);
    }
    .nav-arrow:hover .arrow-icon {
        border-color: var(--dark-blue);
    }

    /* --- Stack Layering Depth Positioning Configuration --- */
    .testimonial-card-stack {
        position: relative;
        width: 100%;
        max-width: 880px;
        padding-bottom: 24px;
    }

    .active-card-container {
        position: relative;
        z-index: 5;
        background-color: #fff;
        border-radius: 20px;
        padding: 40px 45px;
        text-align: left;
        box-shadow: 0 15px 35px rgba(14, 34, 70, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.8);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Nested Base Stack Layers Base rules */
    .stack-layer {
        position: absolute;
        left: 5%;
        right: 5%;
        height: 100%;
        border-radius: 20px;
        background-color: var(--white);
        border: 1px solid rgba(255, 255, 255, 0.6);
        pointer-events: none;
    }

    .shadow-layer-1 {
        z-index: 4;
        bottom: 12px;
        transform: scale(0.96);
        opacity: 0.75;
        box-shadow: 0 10px 25px rgba(14, 34, 70, 0.03);
    }

    .shadow-layer-2 {
        z-index: 3;
        bottom: 0px;
        transform: scale(0.92);
        opacity: 0.4;
        box-shadow: 0 8px 20px rgba(14, 34, 70, 0.02);
    }

    /* --- Internal Card Elements Layout Structure styles --- */
    .quote-mark {
        color: var(--green-quote);
        width: 32px;
        height: 32px;
        margin-bottom: 20px;
    }
    .quote-mark svg {
        width: 100%;
        height: 100%;
    }

    .testimonial-text {
        font-size: 16px;
        line-height: 1.7;
        color: var(--text-paragraph);
        font-weight: 500;
        margin-top: 0;
        margin-bottom: 30px;
    }

    .card-divider {
        border: 0;
        height: 1px;
        background-color: #EDF2F7;
        margin-bottom: 25px;
    }

    .card-meta-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .user-profile-group {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .user-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 1.5px solid #E2E8F0;
    }

    .user-name {
        font-size: 15px;
        font-weight: 700;
        color: var(--dark-blue);
        margin: 0 0 2px 0;
    }

    .user-company {
        font-size: 13px;
        color: #718096;
        display: block;
    }

    /* Tech branding placeholder - styled text logo box */
    .partner-branding-icon {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background-color: #000000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -0.5px;
    }

    /* Animation class utilized by JS transition canvas */
    .card-fade-out {
        opacity: 0;
        transform: translateY(-5px);
    }

    /* Responsive Scaling Triggers */
    @media (max-width: 768px) {
        .testimonial-heading { font-size: 28px; margin-bottom: 40px; }
        .slider-outer-wrapper { gap: 15px; }
        .active-card-container { padding: 30px 25px; }
        .testimonial-text { font-size: 14.5px; line-height: 1.6; }
        .nav-arrow { width: 40px; height: 40px; }
    }

/* ===================== PAGE: about-us  (body.page-about) ===================== */
body.page-about { --primary: #6C22D6;
            --primary-glow: rgba(108, 34, 214, 0.15);
            --dark: #1E1C2A;
            --dark-gray: #12111A;
            --text-dark: #111111;
            --text-muted: #666666;
            --bg-light: #F9F9FB;
            --white: #FFFFFF;
            --gradient-process: linear-gradient(135deg, #E2EBFF 0%, #F5EFFF 100%); }
body.page-about { color: var(--text-dark);
            background-color: var(--white);
            overflow-x: hidden; }
body.page-about .btn { display: inline-block;
            background-color: var(--primary);
            color: var(--white);
            padding: 14px 32px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 15px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(108, 34, 214, 0.3);
            border: none;
            cursor: pointer; }
body.page-about .btn:hover { transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(108, 34, 214, 0.4); }
body.page-about .section-tag { color: var(--primary);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 12px;
            display: block; }
body.page-about .sketch-line { position: relative;
            display: inline-block;
            z-index: 1; }
body.page-about .sketch-line::after { content: "";
            position: absolute;
            left: -2px;
            bottom: 2px;
            width: 106%;
            height: 10px;
            background: rgba(108, 34, 214, 0.12);
            border-radius: 100px 20px 80px 10px;
            z-index: -1; }
@keyframes floatUpDown {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-12px) rotate(3deg); }
        }
body.page-about .inner-hero { background: linear-gradient(rgba(30, 28, 42, 0.8), rgba(30, 28, 42, 0.8)), 
                        url("https://images.unsplash.com/photo-1531403009284-440f080d1e12?auto=format&fit=crop&w=1920&q=80");
            background-size: cover;
            background-position: center;
            padding: 180px 0 100px 0;
            text-align: center;
            color: var(--white); }
body.page-about .inner-hero h1 { font-size: 48px;
            font-weight: 800;
            margin-bottom: 12px; }
body.page-about .breadcrumbs { font-size: 14px;
            color: #A09EAA; }
body.page-about .breadcrumbs a { color: var(--white); text-decoration: none; margin-right: 5px; }
body.page-about .about-company { padding: 80px 0;
            background:linear-gradient(to right,#e9d5ff,#f5e6ff,#fbcfe8); }
body.page-about .about-grid { display: grid;
            grid-template-columns: 1fr 1.4fr;
            gap: 60px;
            align-items: center; }
body.page-about .about-text h1 { margin-bottom: 20px; }
body.page-about .about-text h2 { font-size: 42px;
            font-weight: 800;
            line-height: 1.15;
            margin-bottom: 24px; }
body.page-about .about-text p { color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 20px; }
body.page-about .about-list { list-style: none;
            margin-bottom: 32px; }
body.page-about .about-list li { display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 600;
            margin-bottom: 14px;
            font-size: 15px; }
body.page-about .about-list i { color: var(--primary); font-size: 16px; }
body.page-about .company-stats { display: flex;
            gap: 40px;
            margin-top: 40px;
            border-top: 1px solid #EFEFEF;
            padding-top: 30px; }
body.page-about .stat-box h3 { font-size: 28px;
            font-weight: 800;
            color: var(--primary); }
body.page-about .stat-box p { font-size: 13px;
            color: var(--text-muted);
            margin-top: 4px; }
body.page-about .about-images-container { position: relative; }
body.page-about .image-bg-card { border-radius: 24px;
            width: 100%;
            height: auto;
            display: block;
            margin-right: auto;
            box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
body.page-about .image-fg-card { position: absolute;
            width: 55%;
            border-radius: 16px;
            bottom: -30px;
            left: 0;
            box-shadow: 0 30px 60px rgba(0,0,0,0.12);
            border: 6px solid var(--white); }
body.page-about .process-section { padding: 100px 0;
            text-align: center;
            position: relative; }
body.page-about .process-title { font-size: 38px;
            font-weight: 800;
            margin-bottom: 60px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto; }
body.page-about .process-grid { display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            position: relative; }
body.page-about .process-card { background: var(--gradient-process);
            border-radius: 20px;
            padding: 50px 30px 40px 30px;
            position: relative;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02);
            transition: transform 0.3s; }
body.page-about .process-card:hover { transform: translateY(-5px); }
body.page-about .process-badge { position: absolute;
            top: -24px;
            left: 50%;
            transform: translateX(-50%);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--white);
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px rgba(108, 34, 214, 0.3);
            border: 4px solid var(--white); }
body.page-about .process-card:nth-child(1) .process-badge { background: #FF7A30; }
body.page-about .process-card:nth-child(2) .process-badge { background: #29B6F6; }
body.page-about .process-card:nth-child(3) .process-badge { background: #FF5B5B; }
body.page-about .process-icon { width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #fff;
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin: 0 auto 24px auto; }
body.page-about .process-card h3 { font-size: 18px;
            font-weight: 700;
            margin-bottom: 14px; }
body.page-about .process-card p { font-size: 14px;
            color: var(--text-muted);
            line-height: 1.6; }
body.page-about .decor-shape { position: absolute;
            animation: floatUpDown 5s infinite ease-in-out;
            pointer-events: none;
            opacity: 0.7; }
body.page-about .growth-section { padding: 40px 0 80px; }
body.page-about .growth-grid { display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 60px;
            align-items: center; }
body.page-about .growth-content h2 { font-size: 40px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 24px; }
body.page-about .growth-content p { color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 32px; }
body.page-about .skill-item { margin-bottom: 20px; }
body.page-about .skill-info { display: flex;
            justify-content: space-between;
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 8px; }
body.page-about .skill-bar-bg { background: #EFEFEF;
            height: 8px;
            border-radius: 10px;
            overflow: hidden; }
body.page-about .skill-progress { background: var(--primary);
            height: 100%;
            border-radius: 10px;
            width: 0; 
            transition: width 1.5s cubic-bezier(0.1, 0.8, 0.2, 1); }
body.page-about .growth-image img { width: 100%;
            border-radius: 24px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.06); }
body.page-about .marquee-tape { background: var(--primary);
            color: var(--white);
            padding: 16px 0;
            overflow: hidden;
            white-space: nowrap;
            display: flex;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 1px;
            text-transform: uppercase; }
body.page-about .marquee-content { display: inline-block;
            animation: marqueeTrack 25s linear infinite; }
body.page-about .marquee-content span { margin-right: 40px; }
@keyframes marqueeTrack {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
        }
body.page-about footer { background-color: var(--dark-gray);
            color: var(--white);
            padding: 80px 0 30px 0; }

body.page-about .footer-logo { font-size: 24px;
            font-weight: 800;
            color: var(--white);
            text-decoration: none;
            display: block;
            margin-bottom: 20px; 
        }
.footer-logo img{
        width: 190px;
        height:90px;

}
body.page-about .footer-logo span { color: var(--primary); }
body.page-about .footer-about p { color: #A09EAA;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px; }
 .footer-socials { display: flex;
            gap: 12px; }
 .footer-socials a { width: 36px;
            height: 36px;
            background: #232130;
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 14px;
            transition: background 0.3s; }
 .footer-socials a:hover { background: var(--primary); }
 .footer-col h4 { font-size: 16px;
            margin-bottom: 20px;
            font-weight: 700; }
body.page-about .footer-col ul { list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px; }
body.page-about .footer-col a { color: #fff;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s; }
body.page-about .footer-col a:hover { color: var(--white); }
body.page-about .contact-info-list li { font-size: 14px;
            color: #A09EAA;
            margin-bottom: 12px;
            display: flex;
            gap: 10px; }
body.page-about .footer-subscribe input { width: 100%;
            padding: 14px 20px;
            border-radius: 30px;
            border: none;
            background: #232130;
            color: var(--white);
            margin-bottom: 12px;
            font-size: 14px; }
body.page-about .subscribe-box { position: relative; }
body.page-about .subscribe-box button { position: absolute;
            right: 6px;
            top: 6px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--primary);
            border: none;
            color: var(--white);
            cursor: pointer; }
body.page-about .footer-bottom { border-top: 1px solid #232130;
            padding-top: 30px;
            text-align: center;
            font-size: 13px;
            color: #706E7B; }
@media (max-width: 992px) {
  body.page-about .about-grid, body.page-about .process-grid, body.page-about .growth-grid, body.page-about .footer-grid { grid-template-columns: 1fr; }
  body.page-about .about-images-container { margin-top: 40px; }
  body.page-about .process-grid { gap: 50px; }
}
@media (max-width: 768px) {
  body.page-about .nav-menu { display: none; }
  body.page-about .inner-hero h1 { font-size: 36px; }
  body.page-about .about-text h2, body.page-about .growth-content h2 { font-size: 32px; }
}

/* ===================== PAGE: blog  (body.page-blog) ===================== */
body.page-blog { --primary: #6C22D6;
            --primary-hover: #5419A8;
            --dark: #1E1C2A;
            --dark-gray: #12111A;
            --text-dark: #111111;
            --text-muted: #666666;
            --bg-light: #F9F9FB;
            --white: #FFFFFF; }
body.page-blog { color: var(--text-dark);
            background-color: var(--white);
            overflow-x: hidden; }
body.page-blog .btn { display: inline-block;
            background-color: var(--primary);
            color: var(--white);
            padding: 14px 32px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(108, 34, 214, 0.3);
            border: none;
            cursor: pointer; }
body.page-blog .btn:hover { transform: translateY(-2px);
            background-color: var(--primary-hover); }
body.page-blog .page-banner { background: linear-gradient(rgba(30, 28, 42, 0.85), rgba(30, 28, 42, 0.85)), 
                        url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1200&q=80");
            background-size: cover;
            background-position: center;
            padding: 210px 0 150px 0;
            text-align: center;
            color: var(--white); }
body.page-blog .page-banner h1 { font-size: 52px;
            font-weight: 800;
            margin-bottom: 12px;
            letter-spacing: -1px; }
body.page-blog .breadcrumbs { font-size: 14px;
            color: #A09EAA; }
body.page-blog .breadcrumbs a { color: var(--white); text-decoration: none; margin-right: 5px; }
body.page-blog .breadcrumbs-description p { max-width: 80%; margin: auto; padding: 30px 30px 0px; }
body.page-blog .services-section { padding: 100px 0 0px;
            background-color: #F8F9FA; }
body.page-blog .services-grid { display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 60px;
            min-height: 800px; }
body.page-blog .services-page { display: none;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            grid-column: span 3;
            animation: fadeIn 0.4s ease-in-out forwards; }
body.page-blog .services-page.active-page { display: grid; }
@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
body.page-blog .service-card-screenshot { position: relative;
            border-radius: 24px;
            height: 380px;
            overflow: hidden;
            background-color: var(--white);
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
            transition: transform 1.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, background-color 0.4s ease;
            cursor: pointer; }
body.page-blog .service-card-screenshot .card-bg-img { position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            transition: opacity 0.4s ease, transform 0.4s ease; }
body.page-blog .service-card-screenshot::after { content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.9) 100%);
            z-index: 2;
            transition: opacity 0.4s ease; }
body.page-blog .service-card-screenshot .card-content { position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 40px 35px;
            z-index: 3;
            display: flex;
            flex-direction: column;
            justify-content: flex-end; 
            transition: justify-content 0.4s ease; }
body.page-blog .service-card-screenshot .card-num { font-size: 28px;
            font-weight: 700;
            font-family: sans-serif; 
            -webkit-text-stroke: 1.5px var(--white);
            color: transparent;
            display: block;
            margin-bottom: 12px;
            transition: -webkit-text-stroke 0.4s ease, color 0.4s ease; }
body.page-blog .service-card-screenshot h3 { font-size: 23px;
            font-weight: 700;
            color: var(--white);
            line-height: 1.3;
            transition: color 0.4s ease; }
body.page-blog .service-card-screenshot .card-details { opacity: 0;
            visibility: hidden;
            max-height: 0;
            overflow: hidden;
            transition: opacity 0.3s ease, max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s; }
body.page-blog .service-card-screenshot .card-description { font-size: 14px;
            color: var(--text-muted);
            line-height: 1.6;
            margin-top: 25px; }
body.page-blog .service-card-screenshot .read-more { color: var(--primary);
            text-decoration: none;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin-top: 35px;
            display: inline-block;
            border-bottom: 1.5px solid var(--primary);
            padding-bottom: 2px; }
body.page-blog .service-card-screenshot:hover { background-color: var(--white);
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06); }
body.page-blog .service-card-screenshot:hover .card-bg-img { opacity: 0;
            transform: scale(1.03); }
body.page-blog .service-card-screenshot:hover::after { opacity: 0; }
body.page-blog .service-card-screenshot:hover .card-content { justify-content: flex-start; }
body.page-blog .service-card-screenshot:hover .card-num { -webkit-text-stroke: 1.5px var(--primary); }
body.page-blog .service-card-screenshot:hover h3 { color: #2D2D2D; }
body.page-blog .service-card-screenshot:hover .card-details { opacity: 1;
            visibility: visible;
            max-height: 200px; }
body.page-blog .pagination { display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            margin-top: 20px; }
body.page-blog .page-number { width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-dark);
            border: none;
            background: none;
            cursor: pointer;
            transition: all 0.3s; }
body.page-blog .page-number.active { background-color: var(--primary);
            color: var(--white);
            box-shadow: 0 4px 10px rgba(108, 34, 214, 0.3); }
body.page-blog .page-number:hover:not(.active) { background-color: rgba(0,0,0,0.05);
            color: var(--text-dark); }

@media (max-width: 768px) {
  body.page-blog .nav-menu { display: none; }
  body.page-blog .page-banner h1 { font-size: 38px; }
  body.page-blog .services-page { grid-template-columns: 1fr;
                grid-column: span 1; }
  body.page-blog .footer-grid { grid-template-columns: 1fr; }
}

/* ===================== PAGE: blog-detail-page  (body.page-blog-detail) ===================== */
body.page-blog-detail { --primary: #6C22D6;
            --primary-hover: #5419A8;
            --dark: #1E1C2A;
            --dark-gray: #12111A;
            --text-dark: #111111;
            --text-muted: #666666;
            --bg-light: #F9F9FB;
            --white: #FFFFFF; }
body.page-blog-detail { color: var(--text-dark);
            background-color: var(--white);
            overflow-x: hidden; }
body.page-blog-detail .btn { display: inline-block;
            background-color: var(--primary);
            color: var(--white);
            padding: 14px 32px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(108, 34, 214, 0.3);
            border: none;
            cursor: pointer; }
body.page-blog-detail .btn:hover { transform: translateY(-2px);
            background-color: var(--primary-hover); }
body.page-blog-detail .page-banner { background: linear-gradient(rgba(30, 28, 42, 0.85), rgba(30, 28, 42, 0.85)), 
                        url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1200&q=80");
            background-size: cover;
            background-position: center;
            padding: 210px 0 150px 0;
            text-align: center;
            color: var(--white); }
body.page-blog-detail .page-banner h1 { font-size: 52px;
            font-weight: 800;
            margin-bottom: 12px;
            letter-spacing: -1px; }
body.page-blog-detail .breadcrumbs { font-size: 14px;
            color: #A09EAA; }
body.page-blog-detail .breadcrumbs a { color: var(--white); text-decoration: none; margin-right: 5px; }
body.page-blog-detail .breadcrumbs-description p { max-width: 80%; margin: auto; padding: 30px 30px 0px; }
body.page-blog-detail { scroll-behavior: smooth; }
body.page-blog-detail .service-detail-section { padding: 140px 0 100px;
        background-color: var(--white);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
body.page-blog-detail .detail-layout-grid { display: grid;
        grid-template-columns: 320px 1fr;
        gap: 50px;
        align-items: start; }
body.page-blog-detail .detail-sidebar { display: flex;
        flex-direction: column;
        gap: 40px; }
@media (min-width: 993px) {
  body.page-blog-detail .sticky-sidebar { position: sticky;
            top: 40px;
            max-height: calc(100vh - 80px);
            overflow-y: auto;
            padding-right: 4px; }
  body.page-blog-detail .sticky-sidebar::-webkit-scrollbar { width: 0px; background: transparent; }
}
body.page-blog-detail .sidebar-menu { list-style: none;
        background-color: #F9F9FB;
        border-radius: 20px;
        padding: 20px;
        margin: 0; }
body.page-blog-detail .sidebar-menu li { margin-bottom: 8px; }
body.page-blog-detail .sidebar-menu li:last-child { margin-bottom: 0; }
body.page-blog-detail .sidebar-menu a { display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        background-color: var(--white);
        border-radius: 12px;
        color: var(--text-dark);
        text-decoration: none;
        font-weight: 700;
        font-size: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.01);
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
body.page-blog-detail .sidebar-arrow { display: inline-block;
        width: 6px;
        height: 6px;
        border-top: 2px solid var(--text-muted);
        border-right: 2px solid var(--text-muted);
        transform: rotate(45deg);
        transition: transform 0.3s, border-color 0.3s; }
body.page-blog-detail .sidebar-menu li.active a { background-color: var(--primary);
        color: var(--white);
        box-shadow: 0 8px 20px rgba(108, 34, 214, 0.25); }
body.page-blog-detail .sidebar-menu li.active .sidebar-arrow { border-color: var(--white);
        transform: rotate(45deg) translateX(2px); }
body.page-blog-detail .sidebar-menu li:not(.active) a:hover { background-color: #F1EFF7;
        color: var(--primary); }
body.page-blog-detail .sidebar-help-card { position: relative;
        border-radius: 24px;
        padding: 40px 30px;
        color: var(--white);
        overflow: hidden;
        background-color: var(--text-dark);
        background-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=400&q=80");
        background-size: cover;
        background-position: center;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
body.page-blog-detail .help-card-overlay { position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(30, 15, 64, 0.94) 0%, rgba(108, 34, 214, 0.88) 100%);
        z-index: 1; }
body.page-blog-detail .help-card-content { position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start; }
body.page-blog-detail .sidebar-help-card h3 { font-size: 26px;
        font-weight: 800;
        margin-top: 0;
        margin-bottom: 14px; }
body.page-blog-detail .sidebar-help-card p { font-size: 14px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.75);
        margin-bottom: 25px; }
body.page-blog-detail .sidebar-help-card .phone-link { font-size: 22px;
        font-weight: 800;
        color: var(--white);
        text-decoration: none;
        margin-bottom: 30px;
        display: block;
        letter-spacing: 0.5px; }
body.page-blog-detail .btn-contact-cta { display: inline-flex;
        align-items: center;
        gap: 12px;
        background-color: var(--white);
        color: var(--primary);
        padding: 14px 28px;
        border-radius: 30px;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-decoration: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        transition: transform 0.3s; }
body.page-blog-detail .btn-contact-cta:hover { transform: translateY(-2px); }
body.page-blog-detail .cta-arrow { display: inline-block;
        width: 5px;
        height: 5px;
        border-top: 2px solid var(--primary);
        border-right: 2px solid var(--primary);
        transform: rotate(45deg); }
body.page-blog-detail .detail-content-area { display: flex;
        flex-direction: column;
        gap: 45px; }
body.page-blog-detail .content-block-segment { scroll-margin-top: 40px; }
body.page-blog-detail .main-feature-img-wrapper { width: 100%;
        height: 400px;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0,0,0,0.02); }
body.page-blog-detail .main-feature-img-wrapper img { width: 100%;
        height: 100%;
        object-fit: cover; }
body.page-blog-detail .content-block-segment h2 { font-size: 32px;
        font-weight: 800;
        color: var(--text-dark);
        margin-top: 0;
        margin-bottom: 20px;
        letter-spacing: -0.5px; }
body.page-blog-detail .content-block-segment p { font-size: 15.5px;
        line-height: 1.75;
        color: var(--text-paragraph);
        margin-bottom: 18px; }
body.page-blog-detail .content-block-segment p:last-of-type { margin-bottom: 0; }
body.page-blog-detail .content-block-segment .subtitle-text { margin-bottom: 30px; }
body.page-blog-detail .what-we-do-grid { display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-top: 15px; }
body.page-blog-detail .wwd-feature-item { background-color: #F9F9FB;
        border-left: 3px solid var(--primary);
        padding: 24px 30px;
        border-radius: 0 16px 16px 0; }
body.page-blog-detail .wwd-feature-item h4 { font-size: 17px;
        font-weight: 700;
        color: var(--text-dark);
        margin-top: 0;
        margin-bottom: 8px; }
body.page-blog-detail .wwd-feature-item p { font-size: 14px;
        line-height: 1.5;
        color: var(--text-muted);
        margin-bottom: 0; }
body.page-blog-detail .offer-interactive-split { display: grid;
        grid-template-columns: 1fr 280px;
        gap: 40px;
        align-items: stretch; }
body.page-blog-detail .accordion-column-wrapper { display: flex;
        flex-direction: column;
        gap: 16px; }
body.page-blog-detail .accordion-row-item { border: 1px solid var(--border-color);
        border-radius: 14px;
        overflow: hidden;
        background-color: var(--white);
        transition: border-color 0.3s; }
body.page-blog-detail .accordion-row-item.active { border-color: var(--primary); }
body.page-blog-detail .accordion-header-trigger { padding: 20px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        user-select: none; }
body.page-blog-detail .accordion-header-trigger span { font-weight: 700;
        font-size: 15px;
        color: var(--text-dark);
        transition: color 0.3s; }
body.page-blog-detail .accordion-row-item.active .accordion-header-trigger span { color: var(--primary); }
body.page-blog-detail .acc-toggle-indicator { display: inline-block;
        width: 6px;
        height: 6px;
        border-top: 2px solid var(--text-muted);
        border-right: 2px solid var(--text-muted);
        transition: transform 0.3s, border-color 0.3s; }
body.page-blog-detail .acc-toggle-indicator.closure { transform: rotate(135deg); }
body.page-blog-detail .acc-toggle-indicator.open { transform: rotate(-45deg); border-color: var(--primary); }
body.page-blog-detail .accordion-body-collapse { max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1); }
body.page-blog-detail .accordion-row-item.active .accordion-body-collapse { max-height: 220px; }
body.page-blog-detail .accordion-bullet-points { list-style: none;
        padding: 0 24px 24px 24px;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px; }
body.page-blog-detail .accordion-bullet-points li { font-size: 14px;
        line-height: 1.5;
        color: var(--text-paragraph);
        display: flex;
        align-items: flex-start;
        gap: 12px; }
body.page-blog-detail .bullet-tick { display: inline-block;
        flex-shrink: 0;
        width: 5px;
        height: 9px;
        border-right: 2px solid var(--primary);
        border-bottom: 2px solid var(--primary);
        transform: rotate(45deg);
        margin-top: 2px; }
body.page-blog-detail .accordion-side-image-panel { width: 100%;
        border-radius: 24px;
        overflow: hidden;
        min-height: 280px; }
body.page-blog-detail .accordion-side-image-panel img { width: 100%;
        height: 100%;
        object-fit: cover; }
body.page-blog-detail .fallback-services-block { margin-top: 15px; }
body.page-blog-detail .popular-mini-cards-grid, .popular-mini-cards-grid { display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-top: 25px; }
body.page-blog-detail .mini-service-card, .mini-service-card { position: relative;
        background-color: var(--white);
        border: 1px solid var(--border-color);
        border-radius: 24px;
        padding: 40px 35px;
        overflow: hidden;
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; 
        box-shadow: 
    -1.5px -1.5px 3px 0px rgba(255, 255, 255, 0.25), 
     3px 3px 8px 0px rgba(43, 9, 94, 0.2);
}
body.page-blog-detail .mini-service-card .bg-watermark-num, .mini-service-card .bg-watermark-num { position: absolute;
        top: 20px;
        right: 35px;
        font-size: 44px;
        font-weight: 800;
        color: #F1F1F5;
        user-select: none;
        z-index: 1;
        transition: color 0.3s; }
body.page-blog-detail .mini-card-icon-wrapper, .mini-card-icon-wrapper { position: relative;
        z-index: 2;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px; }
body.page-blog-detail .mini-card-icon-wrapper.orange-tint, .mini-card-icon-wrapper.orange-tint { background-color: #FFF3EE; color: #FF7A45; }
body.page-blog-detail .mini-card-icon-wrapper.purple-tint, .mini-card-icon-wrapper.purple-tint { background-color: #F6F0FF; color: #9254DE; }

body.page-blog-detail .mini-service-card h3, .mini-service-card h3 { position: relative;
        z-index: 2;
        font-size: 20px;
        font-weight: 700;
        color: var(--text-dark);
        margin-top: 0;
        margin-bottom: 12px; }
body.page-blog-detail .mini-service-card p , .mini-service-card p{ position: relative;
        z-index: 2;
        font-size: 14px;
        line-height: 1.6;
        color: var(--text-muted);
        margin-bottom: 25px; }
body.page-blog-detail .mini-card-circle-arrow-btn, .mini-card-circle-arrow-btn { position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #F4F4F6;
        transition: background-color 0.3s; 
        margin-top: 10px;
}
body.page-blog-detail .inline-arrow-right, .inline-arrow-right { display: inline-block;
        width: 6px;
        height: 6px;
        border-top: 2px solid var(--text-dark);
        border-right: 2px solid var(--text-dark);
        transform: rotate(45deg);
        transition: border-color 0.3s; }
body.page-blog-detail .mini-service-card:hover, .mini-service-card:hover { transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.04);
        border-color: rgba(108, 34, 214, 0.15); }
body.page-blog-detail .mini-service-card:hover .mini-card-circle-arrow-btn, .mini-service-card:hover .mini-card-circle-arrow-btn  { background-color: var(--primary); }
body.page-blog-detail .mini-service-card:hover .inline-arrow-right, .mini-service-card:hover .inline-arrow-right  { border-color: var(--white); }
body.page-blog-detail .mini-service-card:hover .bg-watermark-num, .mini-service-card:hover .bg-watermark-num { color: #EAE6F5; }
@media (max-width: 992px) {
  body.page-blog-detail .detail-layout-grid { grid-template-columns: 1fr;
            gap: 40px; }
  body.page-blog-detail .detail-sidebar { display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 30px; }
  body.page-blog-detail .offer-interactive-split { grid-template-columns: 1fr; }
  body.page-blog-detail .accordion-side-image-panel { display: none; }
}
@media (max-width: 768px) {
  body.page-blog-detail .detail-sidebar { grid-template-columns: 1fr; }
  body.page-blog-detail .what-we-do-grid, body.page-blog-detail .popular-mini-cards-grid, .what-we-do-grid,  .popular-mini-cards-grid { grid-template-columns: 1fr; }
  body.page-blog-detail .main-feature-img-wrapper { height: 260px; }
}

/* ===================== PAGE: contact-us  (body.page-contact) ===================== */
body.page-contact { --primary: #6C22D6;
            --primary-hover: #5419A8;
            --dark-blue: #0E2246;
            --text-dark: #111111;
            --text-paragraph: #666666;
            --bg-light: #F9F9FB;
            --white: #FFFFFF;
            --border-color: #E2E8F0;
            --card-shadow: 0 20px 40px rgba(15, 23, 42, 0.06); }
body.page-contact { color: var(--text-dark);
            background-color: var(--white);
            overflow-x: hidden; }
body.page-contact .text-center { text-align: center; }
body.page-contact .page-banner { background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.75)), 
                        url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=80");
            background-size: cover;
            background-position: center;
            padding: 140px 0 100px 0;
            text-align: center;
            color: var(--white); }
body.page-contact .page-banner h1 { font-size: 56px;
            font-weight: 800;
            margin-bottom: 12px;
            letter-spacing: -1px; }
body.page-contact .breadcrumbs { font-size: 14px;
            color: #CBD5E1;
            font-weight: 500; }
body.page-contact .breadcrumbs a { color: var(--white); 
            text-decoration: none; }
body.page-contact .breadcrumbs span { margin: 0 8px;
            color: #94A3B8; }
body.page-contact .contact-section { padding: 100px 0; }
body.page-contact .contact-grid { display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 100px; }
body.page-contact .contact-grid.reverse { grid-template-columns: 1fr 1.1fr;
            margin-bottom: 0; }
body.page-contact .sub-title { color: var(--primary);
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            display: block;
            margin-bottom: 12px; }
body.page-contact .section-title { font-size: 42px;
            font-weight: 800;
            color: var(--dark-blue);
            line-height: 1.2;
            margin-bottom: 20px;
            letter-spacing: -1px; }
body.page-contact .section-title span { position: relative;
            display: inline-block; }
body.page-contact .section-title span::after { content: "";
            position: absolute;
            left: 0;
            bottom: 4px;
            width: 100%;
            height: 4px;
            background-color: var(--primary);
            border-radius: 2px;
            opacity: 0.2; }
body.page-contact .section-desc { font-size: 15px;
            color: var(--text-paragraph);
            line-height: 1.7;
            margin-bottom: 35px; }
body.page-contact .info-list { display: flex;
            flex-direction: column;
            gap: 24px; }
body.page-contact .info-item { display: flex;
            align-items: flex-start;
            gap: 20px; }
body.page-contact .info-icon { width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: rgba(108, 34, 214, 0.1);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
            transition: all 0.3s ease; }
body.page-contact .info-item:hover .info-icon { background-color: var(--primary);
            color: var(--white);
            transform: scale(1.05); }
body.page-contact .info-details h4 { font-size: 18px;
            font-weight: 800;
            color: var(--dark-blue);
            margin-bottom: 4px; }
body.page-contact .info-details p, body.page-contact .info-details a { font-size: 14.5px;
            color: var(--text-paragraph);
            text-decoration: none;
            line-height: 1.5; }
body.page-contact .info-details a:hover { color: var(--primary); }
body.page-contact .featured-image-panel { width: 100%;
            height: 450px;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: var(--card-shadow); }
body.page-contact .featured-image-panel img { width: 100%;
            height: 100%;
            object-fit: cover; }
body.page-contact .map-panel { width: 100%;
            height: 480px;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            border: 1px solid var(--border-color); }
body.page-contact .map-panel iframe { width: 100%;
            height: 100%;
            border: none; }
body.page-contact .contact-form-wrapper { display: flex;
            flex-direction: column; }
body.page-contact .form-group { margin-bottom: 20px; }
body.page-contact .form-input { width: 100%;
            padding: 16px 24px;
            border: 1px solid var(--border-color);
            background-color: var(--white);
            border-radius: 30px;
            font-size: 14px;
            color: var(--text-dark);
            outline: none;
            transition: all 0.3s ease; }
body.page-contact .form-input:focus { border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(108, 34, 214, 0.1); }
body.page-contact textarea.form-input { border-radius: 20px;
            min-height: 140px;
            resize: vertical; }
body.page-contact .btn-submit { display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background-color: var(--primary);
            color: var(--white);
            padding: 16px 36px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 14px;
            text-decoration: none;
            border: none;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(108, 34, 214, 0.25);
            transition: all 0.3s ease;
            width: max-content; }
body.page-contact .btn-submit:hover { background-color: var(--primary-hover);
            transform: translateY(-2px); }
body.page-contact .trusted-brands-section { padding: 80px 0;
            background-color: var(--soft); }
body.page-contact .brands-outer-box { border: 1px solid #F1F5F9;
            border-radius: 16px;
            overflow: hidden; }
body.page-contact .brands-grid-layout { display: grid;
            grid-template-columns: repeat(4, 1fr); }
body.page-contact .brand-cell-item { display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px 15px;
            background-color: var(--white);
            border-right: 1px solid #F1F5F9;
            border-bottom: 1px solid #F1F5F9;
            height: 130px;
            text-align: center; }
body.page-contact .brands-grid-layout .brand-cell-item:nth-child(4n) { border-right: none; }
body.page-contact .brands-grid-layout .brand-cell-item:nth-child(n/**/+9) { border-bottom: none; }
body.page-contact .brand-cell-item img { max-width: 85%;
            max-height: 60px;
            object-fit: contain;
            transition: transform 0.3s ease; }
body.page-contact .brand-label { font-size: 13px;
            font-weight: 700;
            color: #475569;
            margin-top: 6px;
            letter-spacing: -0.3px;
            line-height: 1.2; }
body.page-contact .brand-cell-item i { font-size: 28px;
            color: var(--primary);
            opacity: 0.85; }
body.page-contact .brand-cell-item:hover img, body.page-contact .brand-cell-item:hover i { transform: scale(1.05); }
body.page-contact .office-locations-section { padding: 80px 0 80px 0;
            background-color: var(--white); }
body.page-contact .office-locations-section h2 { 
            margin-bottom: 40px; }
body.page-contact .locations-cards-track { display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px; }
body.page-contact .location-card-node { position: relative;
            height: 420px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
            background-color: #0F172A;
            cursor: pointer; }
body.page-contact .location-card-node .bg-cover { width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
body.page-contact .location-card-node .card-gradient-overlay { position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0.1) 100%);
            z-index: 1;
            transition: background 0.4s ease; }
body.page-contact .location-card-node .card-info-content { position: absolute;
            bottom: 0; left: 0; width: 100%;
            padding: 28px 24px;
            color: var(--white);
            z-index: 2;
            text-align: left; }
body.page-contact .location-card-node h3 { font-size: 24px;
            font-weight: 700;
            margin-bottom: 0;
            letter-spacing: -0.5px;
            transition: margin 0.3s ease; }
body.page-contact .active-meta-rows { max-height: 0;
            opacity: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-size: 13.5px;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.9);
            border-top: 1px solid rgba(255, 255, 255, 0.0);
            padding-top: 0;
            transition: max-height 0.4s ease, opacity 0.4s ease, border-color 0.3s ease, padding 0.3s ease; }
body.page-contact .active-meta-rows div { display: flex;
            align-items: flex-start;
            gap: 10px; }
body.page-contact .active-meta-rows i { margin-top: 3px;
            font-size: 14px;
            color: #A78BFA; }
body.page-contact .location-card-node.active-hover-state { box-shadow: 0 20px 40px rgba(108, 34, 214, 0.3); }
body.page-contact .location-card-node.active-hover-state .card-gradient-overlay { background: linear-gradient(to top, rgba(108, 34, 214, 0.95) 0%, rgba(15, 23, 42, 0.5) 70%); }
body.page-contact .location-card-node.active-hover-state h3 { margin-bottom: 12px; }
body.page-contact .location-card-node.active-hover-state .active-meta-rows { max-height: 150px;
            opacity: 1;
            padding-top: 14px;
            border-top-color: rgba(255, 255, 255, 0.25); }
body.page-contact .location-card-node:hover .bg-cover { transform: scale(1.08); }
@media (max-width: 1200px) {
  body.page-contact .brands-grid-layout { grid-template-columns: repeat(2, 1fr); }
  body.page-contact .brands-grid-layout .brand-cell-item:nth-child(4n) { border-right: 1px solid #F1F5F9; }
  body.page-contact .brands-grid-layout .brand-cell-item:nth-child(2n) { border-right: none; }
  body.page-contact .brands-grid-layout .brand-cell-item:nth-child(n/**/+9) { border-bottom: 1px solid #F1F5F9; }
  body.page-contact .brands-grid-layout .brand-cell-item:nth-child(n/**/+11) { border-bottom: none; }
  body.page-contact .locations-cards-track { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 992px) {
  body.page-contact .contact-grid, body.page-contact .contact-grid.reverse { grid-template-columns: 1fr; 
                gap: 50px; }
  body.page-contact .contact-grid.reverse .featured-image-panel { order: 2; }
  body.page-contact .featured-image-panel, body.page-contact .map-panel { height: 380px; }
}
@media (max-width: 600px) {
  body.page-contact .page-banner h1 { font-size: 40px; }
  body.page-contact .section-title { font-size: 32px; }
  body.page-contact .contact-section, body.page-contact .trusted-brands-section, body.page-contact .office-locations-section { padding: 60px 0; }
  body.page-contact .brands-grid-layout { grid-template-columns: 1fr; }
  body.page-contact .brands-grid-layout .brand-cell-item { border-right: none !important; }
  body.page-contact .brands-grid-layout .brand-cell-item:not(:last-child) { border-bottom: 1px solid #F1F5F9 !important; }
  body.page-contact .locations-cards-track { grid-template-columns: 1fr; }
  body.page-contact .location-card-node { height: 380px; }
}

/* ===================== PAGE: service-detail-page  (body.page-service-detail) ===================== */
body.page-service-detail { --primary: #6C22D6;
            --primary-hover: #5419A8;
            --dark: #1E1C2A;
            --dark-blue: #0E2246;
            --dark-gray: #12111A;
            --text-dark: #111111;
            --text-paragraph: #4A5568;
            --text-muted: #666666;
            --border-color: #E2E8F0;
            --bg-light: #F9F9FB;
            --white: #FFFFFF; }
.body.page-service-detail { color: var(--text-dark);
            background-color: var(--white);
            overflow-x: hidden; }

 .text-center { text-align: center; }
 .btn { display: inline-block;
            background-color: var(--primary);
            color: var(--white);
            padding: 14px 32px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(108, 34, 214, 0.3);
            border: none;
            cursor: pointer; }
 .btn:hover { transform: translateY(-2px);
            background-color: var(--primary-hover); }
 .site-header { background-color: var(--white);
            border-bottom: 1px solid var(--border-color);
            padding: 10px 0; 
        border-bottom: 4px solid #E85C3A;
        }
 .site-header .nav { display: flex;
            justify-content: space-between;
            align-items: center; }
 .logo { display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 800;
            font-size: 18px; }
 .logo-mark { background-color: var(--primary);
            color: var(--white);
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 14px; }
 .main-nav a { color: var(--text-paragraph);
            text-decoration: none;
            margin: 0 16px;
            font-weight: 600;
            font-size: 15px;
            transition: color 0.2s; }
 .main-nav a:hover { color: var(--primary); }
 .btn-outline { background-color: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
            box-shadow: none;
            padding: 10px 24px; }
 .btn-outline:hover { background-color: var(--primary);
            color: var(--white); }
 .page-banner { background: linear-gradient(rgba(30, 28, 42, 0.85), rgba(30, 28, 42, 0.85)), 
                        url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1200&q=80");
            background-size: cover;
            background-position: center;
            padding: 120px 0 90px 0;
            text-align: center;
            color: var(--white); }
 .page-banner h1 { font-size: 52px;
            font-weight: 800;
            margin-bottom: 12px;
            letter-spacing: -1px; }
 .breadcrumbs { font-size: 14px;
            color: #A09EAA; }
 .breadcrumbs a { color: var(--white); 
            text-decoration: none; 
            margin: 0 5px; }
 .service-detail-section { padding: 100px 0; }
 .detail-content-area { display: flex;
            flex-direction: column;
            gap: 80px; }
 .content-row-segment { display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center; }
 .segment-text-panel h2 { font-size: 28px;
            font-weight: 800;
            color: var(--dark-blue);
            margin: 0 0 18px 0;
            letter-spacing: -0.5px; }
 .segment-text-panel p { font-size: 16px;
            line-height: 1.75;
            color: var(--text-paragraph);
            margin: 0 0 16px 0; }
 .segment-text-panel p:last-child { margin-bottom: 0; }
 .segment-image-panel { width: 100%;
            height: 380px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); }
 .segment-image-panel img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 769px) {
   .content-row-segment.image-left .segment-text-panel { order: 2; }
   .content-row-segment.image-left .segment-image-panel { order: 1; }
}
 .conversion-cta-block { background-color: var(--bg-light);
            padding: 80px 0;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color); }
 .conversion-cta-block h2 { font-size: 32px; font-weight: 800; color: var(--dark-blue); margin: 0 0 15px 0; letter-spacing: -0.5px; }
 .conversion-cta-block p { font-size: 17px; color: var(--text-paragraph); max-width: 600px; margin: 0 auto 30px auto; line-height: 1.6; }
 .btn-primary-action { display: inline-block; background-color: var(--primary); color: var(--white);
            padding: 16px 36px; border-radius: 30px; font-weight: 700; text-decoration: none;
            box-shadow: 0 6px 20px rgba(108, 34, 214, 0.25); transition: background-color 0.2s, transform 0.2s; }
 .btn-primary-action:hover { background-color: var(--primary-hover); transform: translateY(-2px); }
 .site-footer { background-color: #0F172A;
            color: #94A3B8;
            padding: 70px 0 30px 0;
            font-size: 14.5px; }
 .footer-grid { display: grid;
            grid-template-columns: 1fr repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 50px; }
 .logo-light { color: var(--white);
            margin-bottom: 15px; }
 .site-footer h4 { color: var(--white); font-size: 15px; font-weight: 700; margin: 0 0 20px 0; text-transform: uppercase; letter-spacing: 0.5px; }
 .site-footer ul { list-style: none; padding: 0; margin: 0; }
 .site-footer li { margin-bottom: 12px; list-style: none;  }
 .site-footer a { color: #94A3B8; text-decoration: none; transition: color 0.2s; }
 .site-footer a:hover { color: var(--white); }
 .site-footer p { line-height: 1.6; }
 .footer-socials { display: flex;
            gap: 12px;
            margin-top: 15px; }
 .footer-socials span { display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background-color: #1E293B;
            color: var(--white);
            border-radius: 50%;
            font-size: 12px;
            cursor: pointer; }
 .subscribe { display: flex;
            margin-top: 15px; }
 .subscribe input { background-color: #1E293B;
            border: 1px solid #334155;
            padding: 10px 15px;
            border-radius: 8px 0 0 8px;
            color: var(--white);
            outline: none;
            flex: 1; }
 .subscribe button { background-color: var(--primary);
            border: none;
            color: var(--white);
            padding: 0 18px;
            border-radius: 0 8px 8px 0;
            cursor: pointer; }
 .footer-bottom { border-top: 1px solid #334155;
            padding-top: 30px;
            text-align: center;
            font-size: 13.5px;
            color: #64748B; }
@media (max-width: 992px) {
   .content-row-segment { gap: 40px; }
   .segment-image-panel { height: 320px; }
   .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 768px) {
   .page-banner h1 { font-size: 36px; }
   .content-row-segment { grid-template-columns: 1fr; gap: 25px; }
   .segment-image-panel { height: 260px; }
   .conversion-cta-block h2 { font-size: 26px; }
   .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WordPress integration styles
   Accessibility, nav menus, comments, widgets, pagination,
   alignments, post cards and single/archive layouts.
   ============================================================ */

/* --- Accessibility --- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
	clip: auto !important;
	clip-path: none;
	color: var(--primary);
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
}
.skip-link:focus {
	left: 6px;
	top: 6px;
}

/* --- Primary navigation menu (wp_nav_menu output) --- */
.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 32px;
}

 .main-nav ul ul {
        display: none;
        position: absolute;
        /* Move it down exactly where it needs to sit visually */
        top: calc(100% + 8px); 
        left: 0;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px 0;
        min-width: 200px;
        box-shadow: 0 12px 30px rgba(14, 10, 31, .12);
        z-index: 999;
}

/* This creates an invisible bridge over the 8px gap so the mouse never leaves the hover zone */
.main-nav ul ul::before {
        content: "";
        position: absolute;
        top: -12px; /* Covers the 8px gap + overlaps slightly for safety */
        left: 0;
        width: 100%;
        height: 12px;
        background: transparent;
}
.main-nav li:hover > ul,
.main-nav li:focus-within > ul {
	display: block;
}
.main-nav ul ul li {
	margin: 0;
}
.main-nav ul ul a {
	display: block;
	padding: 10px 20px;
	white-space: nowrap;
}
.main-nav ul ul a:hover {
	color: var(--primary);
}
.main-nav li {
	margin: 0;
	position: relative;
}
.main-nav a {
	text-decoration: none;
	color: var(--fg);
	font-weight: 500;
	font-size: 15px;
	transition: color .2s ease;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a {
	color: var(--primary);
}
.menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 12px;
	cursor: pointer;
	font-size: 18px;
	color: var(--fg);
}

@media (max-width: 860px) {
	.menu-toggle {
		display: inline-flex;
	}
	.main-nav ul {
		display: none;
		position: absolute;
		top: 64px;
		right: 16px;
		left: 16px;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		background: #fff;
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 12px 16px;
		box-shadow: 0 12px 40px rgba(14, 10, 31, .12);
		z-index: 999;
	}
	.main-nav.toggled ul {
		display: flex;
	}
	.main-nav a {
		display: block;
		padding: 8px 0;
		width: 100%;
	}
	.header-cta {
		display: none;
	}
}

/* --- Generic page banner (archives, search, 404) --- */
.page-banner {
	padding: 120px 0 120px;
	text-align: center;
	border-bottom: 1px solid var(--border);
}
.page-banner-title {
	font-size: clamp(28px, 4vw, 44px);
	margin: 0;
}
.page-banner-title span {
	color: var(--primary);
}
.page-banner-desc {
	color: var(--muted);
	margin-top: 8px;
}

/* --- Content layout (blog + single) --- */
.content-area {
	padding: 56px 24px 72px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
.has-sidebar .content-area {
	grid-template-columns: minmax(0, 1fr) 320px;
}
.single-wrap {
	max-width: 820px;
}

/* --- Post grid / cards (archive & blog) --- */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 28px;
}
.post-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 50px rgba(14, 10, 31, .10);
}
.post-card-media img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}
.post-card-body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.post-card-meta {
	display: flex;
	gap: 16px;
	font-size: 13px;
	color: var(--muted);
}
.post-card-title {
	font-size: 20px;
	margin: 0;
	line-height: 1.3;
}
.post-card-title a {
	color: var(--fg);
	text-decoration: none;
}
.post-card-title a:hover {
	color: var(--primary);
}
.post-card-excerpt {
	color: var(--text-paragraph);
	font-size: 15px;
}
.read-more {
	margin-top: auto;
	color: var(--primary);
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

/* --- News cards (front page) --- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 28px;
	margin-top: 32px;
}
.news-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
}
.news-card-media img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}
.news-card-body {
	padding: 20px;
}
.news-card-body h3 {
	font-size: 19px;
	margin: 8px 0;
}
.news-card-body h3 a {
	color: var(--fg);
	text-decoration: none;
}
.news-card-body h3 a:hover {
	color: var(--primary);
}
.news-date {
	font-size: 13px;
	color: var(--muted);
}
.news .growth-section{
        margin-bottom: 0px;
}
/* --- Single post --- */
.single-post .entry-header,
.single-page .entry-header {
	margin-bottom: 24px;
}
.entry-title {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.2;
	margin: 0 0 12px;
}
.entry-meta,
.entry-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	color: var(--muted);
	font-size: 14px;
}
.entry-meta a,
.entry-footer a {
	color: var(--muted);
	text-decoration: none;
}
.entry-meta a:hover,
.entry-footer a:hover {
	color: var(--primary);
}
.post-thumbnail {
	display: block;
	margin: 0 0 28px;
}
.post-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}
.entry-content {
	font-size: 17px;
	line-height: 1.8;
	color: var(--fg);
}
.entry-content > * {
	margin-bottom: 1.4em;
}
.entry-content h2 {
	font-size: 28px;
	margin: 1.6em 0 .6em;
}
.entry-content h3 {
	font-size: 22px;
	margin: 1.4em 0 .5em;
}
.entry-content a {
	color: var(--primary);
}
.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
.entry-content blockquote {
	border-left: 4px solid var(--primary);
	margin: 1.6em 0;
	padding: 4px 0 4px 24px;
	font-style: italic;
	color: var(--text-paragraph);
}
.entry-content pre {
	background: var(--dark);
	color: #fff;
	padding: 20px;
	border-radius: 12px;
	overflow: auto;
}
.entry-content code {
	background: var(--soft);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: .9em;
}
.entry-content pre code {
	background: transparent;
	padding: 0;
}
.entry-content table {
	width: 100%;
	border-collapse: collapse;
}
.entry-content th,
.entry-content td {
	border: 1px solid var(--border);
	padding: 10px 14px;
	text-align: left;
}
.entry-footer {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}
.page-links {
	margin-top: 24px;
	font-weight: 600;
}

/* --- Post navigation --- */
.post-navigation {
	margin: 40px 0;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid var(--border);
	padding-top: 24px;
}
.post-navigation .nav-subtitle {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
}
.post-navigation a {
	color: var(--fg);
	text-decoration: none;
	font-weight: 600;
}
.post-navigation a:hover {
	color: var(--primary);
}

/* --- Pagination --- */
.pagination,
.comments-pagination {
	margin-top: 48px;
}
.pagination .nav-links,
.comments-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	text-decoration: none;
	color: var(--fg);
	font-weight: 600;
}
.page-numbers.current,
.page-numbers:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

/* --- Widgets --- */
.widget-area .widget,
.footer-col .widget {
	margin-bottom: 32px;
}
.widget-title {
	font-size: 18px;
	margin: 0 0 16px;
}
.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget li {
	padding: 7px 0;
	border-bottom: 1px solid var(--border);
}
.widget a {
	color: var(--text-paragraph);
	text-decoration: none;
}
.widget a:hover {
	color: var(--primary);
}

/* --- Footer menus & contact lists --- */
.footer-menu,
.footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-menu li,
.footer-contact li {
	padding: 6px 0;
}
.footer-col a {
	color: inherit;
	text-decoration: none;
	opacity: .85;
}
.footer-col a:hover {
	opacity: 1;
	color: #fff;
}
.footer-socials a {
	color: inherit;
	text-decoration: none;
}

/* --- Search form --- */
.search-form {
	display: flex;
	gap: 8px;
}
.search-form .search-field {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	font: inherit;
}
.search-form .search-submit {
	background: var(--primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 0 18px;
	cursor: pointer;
	font-weight: 600;
}

/* --- Comments --- */
.comments-area {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--border);
}
.comments-title {
	font-size: 24px;
	margin-bottom: 24px;
}
.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.comment-list ol.children {
	list-style: none;
	margin-left: 28px;
}
.comment-body {
	padding: 18px 0;
	border-bottom: 1px solid var(--border);
}
.comment-author {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}
.comment-author .avatar {
	border-radius: 50%;
}
.comment-meta {
	font-size: 13px;
	color: var(--muted);
}
.comment-form {
	display: grid;
	gap: 16px;
	margin-top: 24px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	font: inherit;
}

/* --- WordPress core alignments & media --- */
.alignleft {
	float: left;
	margin: .4em 1.6em 1.2em 0;
}
.alignright {
	float: right;
	margin: .4em 0 1.2em 1.6em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignwide {
	margin-left: -80px;
	margin-right: -80px;
	max-width: 100vw;
}
.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}
.wp-caption {
	max-width: 100%;
}
.wp-caption-text,
.wp-block-image figcaption {
	font-size: 14px;
	color: var(--muted);
	text-align: center;
	margin-top: 8px;
}
.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.gallery-item img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.sticky .post-card,
.bypostauthor > .comment-body {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}
.wp-block-button__link {
	background: var(--primary);
	color: #fff;
	border-radius: 999px;
	padding: 12px 24px;
	text-decoration: none;
}

@media (max-width: 980px) {
	.has-sidebar .content-area {
		grid-template-columns: 1fr;
	}
	.alignwide,
	.alignfull {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
}


/* 1. Default layout for sections with text and image side-by-side */
.content-row-segment {
    display: flex;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
    width: 100%;
}

.segment-text-panel, 
.segment-image-panel {
    flex: 1;
    width: 50%;
}

/* 2. Overriding layout when you intentionally leave out the image */
.content-row-segment.no-image {
    display: block; /* Completely collapses the two-column side-by-side split layout */
    width: 100%;
}

.content-row-segment.no-image .segment-text-panel {
    width: 100%;
    max-width: 100%;
    flex: none; /* Forces the text content container to stretch edge-to-edge */
}

/* 3. Safety guard: ensures no invisible margin/padding from an empty layout box takes up space */
.content-row-segment.no-image .segment-image-panel {
    display: none !important;
}


/* 1. Targets the text fallback link */
.site-branding .logo {
    display: inline-block; /* or block */
    width: 190px;
    height: 90px;
    overflow: hidden; /* prevents text from spilling out */
}

/* 2. Targets the WordPress default custom logo link and image */
.site-branding .custom-logo {
    display: inline-block;
    width: 190px;
    height: 90px;
}