/* ============================================================
   Velocity Marketing - Brand theme + responsive layer
   Primary: Orange #f36f21   ·   Base: dark (near-black)
   ============================================================ */
:root{
    --vm-primary:#f36f21;
    --vm-primary-d:#d95f16;
    --theme:#f36f21;
    --theme-2:#02060A;
    --vm-dark:#02060A;
    --vm-panel:#0f1420;
    --vm-panel-2:#161c2b;
}

/* Buttons + accents = orange */
.theme-btn{background-color:var(--vm-primary);}
.theme-btn::before,.theme-btn::after{background-color:var(--vm-primary-d)!important;}
.project-btn:hover,.link-btn:hover{color:var(--vm-primary);}
.sub-title{
    background:rgba(243,111,33,.12)!important;
    border:1px solid rgba(243,111,33,.40);
    color:var(--vm-primary)!important;opacity:1!important;
    font-size:clamp(16px,1.7vw,20px)!important;
    padding:8px 16px!important;letter-spacing:.12em;
    display:inline-flex!important;align-items:center;gap:7px;line-height:1;
    white-space:nowrap;width:auto;max-width:none;
}
.sub-title img{filter:none;margin:0!important;flex:0 0 auto;}
/* Theme sets .about-section .section-title to a space-between ROW, which drops the
   "WHO WE ARE" badge beside the heading on wide screens — force it to stack above. */
.about-section .section-title{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;}
a:hover{color:var(--vm-primary);}
.back-to-top{background:var(--vm-primary)!important;color:#fff!important;transition:background-color .3s ease,transform .3s ease;}
.back-to-top:hover,.back-to-top:focus-visible{background:var(--vm-primary-d)!important;color:#fff!important;transform:translateY(-3px);}
.preloader .txt-loading .letters-loading:before{color:var(--vm-primary)!important;}
.cursor-inner{background-color:var(--vm-primary)!important;}
.array-prev:hover,.array-next:hover{background:var(--vm-primary)!important;border-color:var(--vm-primary)!important;}
.swiper-dot .swiper-pagination-bullet-active{background:var(--vm-primary)!important;}
.pricing-box-items:hover,.pricing-box-items.active{border-color:var(--vm-primary)!important;}

/* Dark base */
body.dark-bg{background:#05070d;}

/* ============================================================
   Flash alerts (front-end)
   ============================================================ */
.vm-alert{max-width:1140px;margin:20px auto;padding:14px 22px;border-radius:10px;font-size:15px;
    display:flex;align-items:center;gap:10px;position:relative;z-index:5;}
.vm-alert i{font-size:18px;}
.vm-alert-success{background:#e8f9ee;color:#0f7a3d;border:1px solid #b7ebc9;}
.vm-alert-error{background:#fdecec;color:#c02626;border:1px solid #f5c2c2;}

/* ============================================================
   CMS component styles (dark panels, orange accents)
   ============================================================ */
.contact-info-items{background:var(--vm-panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:38px 24px;transition:.3s;}
.contact-info-items:hover{transform:translateY(-6px);border-color:var(--vm-primary);}
.contact-info-items .icon{width:64px;height:64px;border-radius:50%;background:var(--vm-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto;}
.contact-info-items h4{color:#fff;margin-bottom:8px;}
.contact-info-items p,.contact-info-items a{color:#b9c0cc;}
.contact-form-box{background:var(--vm-panel);padding:34px;border-radius:16px;border:1px solid rgba(255,255,255,.06);}
.contact-form-box input,.contact-form-box textarea{width:100%;background:var(--vm-panel-2);border:1px solid rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:14px 18px;margin:0;}
.contact-form-box input::placeholder,.contact-form-box textarea::placeholder{color:#7c8598;}
.contact-form-box input:focus,.contact-form-box textarea:focus{border-color:var(--vm-primary);outline:none;}
.contact-map iframe,.contact-map{width:100%;border:0;border-radius:14px;min-height:260px;}
/* Contact page headings were dark (var(--header)) on the dark theme — make them legible */
.contact-info-section .section-title h2,
.contact-inner-section-2 .section-title h2{color:#fff;}
.contact-inner-section-2 .section-title p{color:#aab2c0;}

/* Our Work / Portfolio page — dark headings/titles were invisible on the dark theme */
.project-section .section-title h2{color:#fff;}
.project-card-items-2 .project-content h3,
.project-card-items-2 .project-content h3 a{color:#fff;}
.project-card-items-2 .project-content h3 a:hover{color:var(--vm-primary);}
.project-card-items-2 .project-content .list li a{color:#aab2c0;}
.project-card-items-2 .project-content .list li a:hover{color:var(--vm-primary);}

/* ===== "Our Work" — filterable, animated showcase (home + portfolio) ===== */
/* Gap between the Private and Government segments on the Our Work page */
.vm-segment-gap{height:70px;}
@media(max-width:767px){.vm-segment-gap{height:44px;}}
.project-section .section-title + .vm-work{margin-top:6px;}
.vm-work-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:40px 0 44px;}
.vm-work-filter button{padding:9px 24px;border-radius:40px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#cfd4dd;font-weight:600;font-size:14px;letter-spacing:.02em;cursor:pointer;transition:.25s ease;}
.vm-work-filter button:hover{border-color:var(--vm-primary);color:#fff;}
.vm-work-filter button.active{background:var(--vm-primary);border-color:var(--vm-primary);color:#fff;box-shadow:0 8px 22px rgba(243,111,33,.28);}
/* Print sub-filters (Commercial / Govt.) — appear under the tabs when "Print" is active */
.vm-work-subfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-30px 0 44px;}
.vm-work-subfilter[hidden]{display:none;}
.vm-work-subfilter button{padding:7px 18px;border-radius:40px;border:1px dashed rgba(255,255,255,.20);background:transparent;color:#c7cdd8;font-weight:600;font-size:13px;cursor:pointer;transition:.25s ease;}
.vm-work-subfilter button:hover{border-color:var(--vm-primary);color:#fff;}
.vm-work-subfilter button.active{background:rgba(243,111,33,.16);border-color:var(--vm-primary);border-style:solid;color:#fff;}
.vm-work-empty{text-align:center;color:#aab2c0;padding:26px 0;}
.vm-work-empty[hidden]{display:none;}

.vm-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.vm-work-card{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:var(--vm-panel);aspect-ratio:1/1;animation:vm-work-in .55s cubic-bezier(.2,.7,.3,1) both;}
.vm-work-card.is-hidden{display:none;}
.vm-work-media{position:absolute;inset:0;}
.vm-work-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.vm-work-card:hover .vm-work-media img{transform:scale(1.08);}
.vm-work-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;
    background:linear-gradient(to top,rgba(4,6,11,.94),rgba(4,6,11,.35) 52%,rgba(4,6,11,0) 78%);
    opacity:0;transform:translateY(14px);transition:.45s ease;}
.vm-work-card:hover .vm-work-overlay{opacity:1;transform:none;}
.vm-work-cat{color:var(--vm-primary);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px;}
.vm-work-title{color:#fff;font-size:19px;font-weight:700;margin:0;line-height:1.25;}
.vm-work-tags{display:block;color:#c3c9d4;font-size:12px;font-weight:600;letter-spacing:.02em;margin-top:7px;}
.vm-work-icon{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;background:var(--vm-primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2;
    opacity:0;transform:scale(.5) rotate(-40deg);transition:.45s cubic-bezier(.2,.7,.3,1);}
.vm-work-card:hover .vm-work-icon{opacity:1;transform:none;}
.vm-work-link{position:absolute;inset:0;z-index:3;}
@keyframes vm-work-in{from{opacity:0;transform:translateY(26px) scale(.96);}to{opacity:1;transform:none;}}
@media(max-width:991px){.vm-work-grid{grid-template-columns:repeat(2,1fr);gap:18px;}}
@media(max-width:575px){.vm-work-grid{grid-template-columns:1fr;}.vm-work-filter{gap:8px;}.vm-work-filter button{padding:8px 18px;font-size:13px;}}

/* ===== Project details: heading/info + gallery + lightbox ===== */
.project-details-content h2{color:#fff;}
.project-details-content .content,.project-details-content .content p{color:#aab2c0;line-height:1.85;}
.project-info-box{background:var(--vm-panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:28px 26px;position:sticky;top:100px;}
.project-info-box h4{color:#fff;margin:0 0 16px;font-size:20px;}
.project-info-box ul{list-style:none;padding:0;margin:0 0 8px;}
.project-info-box li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);}
.project-info-box li:last-child{border-bottom:0;}
.project-info-box li strong{color:#8f97a6;font-weight:600;}
.project-info-box li span{color:#e4e8ef;font-weight:600;text-align:right;}

.vm-gallery-heading{color:#fff;font-size:22px;font-weight:700;margin:38px 0 18px;}
.vm-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.vm-gallery-item{position:relative;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--vm-panel);aspect-ratio:1/1;}
.vm-gallery-item img,.vm-gallery-item video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.vm-gallery-item:hover img,.vm-gallery-item:hover video{transform:scale(1.08);}
.vm-play,.vm-embed-thumb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;background:rgba(4,6,11,.3);transition:.3s;}
.vm-gallery-item:hover .vm-play,.vm-gallery-item:hover .vm-embed-thumb{background:rgba(243,111,33,.35);}
@media(max-width:575px){.vm-gallery{grid-template-columns:repeat(2,1fr);}}
/* Accreditations gallery page — certificates on white, shown whole (not cropped), 4-up on wide screens */
@media(min-width:992px){.vm-gallery-4{grid-template-columns:repeat(4,1fr);}}
.acc-card{display:flex;flex-direction:column;gap:12px;}
.acc-card .vm-gallery-item{width:100%;background:#fff;}
.acc-card .vm-gallery-item img{object-fit:contain;padding:16px;}
.acc-card .vm-gallery-item:hover img{transform:scale(1.05);}
.acc-caption{color:#fff;font-weight:600;font-size:clamp(14px,1.1vw,16px);text-align:center;line-height:1.4;}
/* Multi-image indicator on an accreditation card */
.acc-card .vm-gallery-item{position:relative;}
.acc-count{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:5px;background:rgba(4,6,11,.72);color:#fff;font-size:12px;font-weight:600;padding:4px 9px;border-radius:40px;z-index:2;}

/* Home accreditations teaser (3 thumbnails + label + button) */
.accreditation-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin:44px 0 40px;}
.accreditation-item{display:flex;flex-direction:column;align-items:center;gap:16px;width:clamp(210px,30vw,320px);text-decoration:none;}
.accreditation-thumb{display:block;width:100%;aspect-ratio:4/3;background:#fff;border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;padding:14px;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}
.accreditation-thumb img{width:100%;height:100%;object-fit:contain;}
.accreditation-item:hover .accreditation-thumb{transform:translateY(-6px);border-color:var(--vm-primary);box-shadow:0 16px 40px rgba(0,0,0,.35);}
.accreditation-label{color:#fff;font-weight:600;font-size:15px;line-height:1.4;text-align:center;transition:color .3s ease;}
.accreditation-item:hover .accreditation-label{color:var(--vm-primary);}
@media(max-width:575px){.accreditation-grid{gap:16px;}.accreditation-item{width:clamp(150px,46vw,240px);}.accreditation-thumb{padding:12px;}}
/* Badge rendered as a button that opens the certificate in the lightbox */
button.accreditation-item{background:transparent;border:0;font:inherit;cursor:pointer;}
.accreditation-thumb{position:relative;}
/* Larger, centered badges on the dedicated Accreditations / ISO pages */
.accreditation-grid--page{margin:48px 0 8px;gap:36px;}
.accreditation-grid--page .accreditation-item{width:clamp(240px,30vw,360px);}

/* Certificate gallery (inner Accreditation / ISO pages) — thumbnails that pop open the full view */
.cert-gallery{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:26px;margin:46px auto 8px;max-width:1000px;}
.cert-fig{width:clamp(220px,30vw,300px);margin:0;display:flex;flex-direction:column;gap:14px;}
.cert-item{width:100%;padding:0;border:0;cursor:pointer;background:#fff;border-radius:16px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 10px 30px rgba(0,0,0,.28);transition:transform .3s ease,box-shadow .3s ease;}
.cert-item img{width:100%;height:100%;object-fit:contain;padding:16px;display:block;}
.cert-item:hover{transform:translateY(-6px);box-shadow:0 18px 46px rgba(0,0,0,.42);}
.cert-caption{color:#fff;font-weight:600;font-size:15px;line-height:1.45;text-align:center;}
@media(max-width:575px){.cert-gallery{gap:16px;}.cert-fig{width:clamp(150px,44vw,240px);}.cert-item img{padding:10px;}}

.vm-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(4,6,11,.95);display:none;align-items:center;justify-content:center;padding:40px;}
.vm-lightbox.is-open{display:flex;}
.vm-lb-stage{max-width:min(1100px,92vw);max-height:86vh;display:flex;align-items:center;justify-content:center;}
.vm-lb-stage img,.vm-lb-stage video{max-width:100%;max-height:86vh;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.6);}
.vm-lb-stage iframe{width:min(1000px,90vw);height:min(562px,80vh);border:0;border-radius:8px;}
.vm-lb-close,.vm-lb-prev,.vm-lb-next{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;border-radius:50%;width:48px;height:48px;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.25s;}
.vm-lb-close:hover,.vm-lb-prev:hover,.vm-lb-next:hover{background:var(--vm-primary);border-color:var(--vm-primary);}
.vm-lb-close{top:22px;right:22px;font-size:26px;}
.vm-lb-prev{left:22px;top:50%;transform:translateY(-50%);}
.vm-lb-next{right:22px;top:50%;transform:translateY(-50%);}
.vm-lb-counter{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#cfd4dd;font-size:14px;font-weight:600;}
@media(max-width:575px){.vm-lb-close,.vm-lb-prev,.vm-lb-next{width:40px;height:40px;font-size:17px;}.vm-lightbox{padding:16px;}}
.contact-info-items{background:var(--vm-panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:34px 26px;height:100%;transition:.3s;}
.contact-info-items:hover{transform:translateY(-6px);border-color:var(--vm-primary);}

/* ===== Legal pages (Privacy Policy / Terms) ===== */
.legal-content{background:var(--vm-panel);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:48px 44px;}
.legal-content .legal-updated{color:var(--vm-primary);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 26px;}
.legal-content h3{color:#fff;font-size:22px;font-weight:700;margin:34px 0 12px;padding-left:15px;position:relative;}
.legal-content h3:first-of-type{margin-top:0;}
.legal-content h3::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:4px;background:var(--vm-primary);}
.legal-content p{color:#aab2c0;line-height:1.85;margin:0 0 16px;font-size:16px;}
.legal-content ul{margin:0 0 18px;padding-left:4px;list-style:none;}
.legal-content ul li{color:#c3c9d4;line-height:1.7;padding-left:26px;position:relative;margin-bottom:9px;}
.legal-content ul li::before{content:"\f058";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--vm-primary);position:absolute;left:0;top:2px;font-size:14px;}
.legal-content a{color:var(--vm-primary);font-weight:600;}
.legal-content a:hover{text-decoration:underline;}
.legal-content strong{color:#e9edf3;}
@media(max-width:575px){.legal-content{padding:30px 22px;}}

.service-box-items{background:var(--vm-panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:34px;height:100%;transition:.3s;display:flex;flex-direction:column;}
.service-box-items:hover{transform:translateY(-6px);border-color:var(--vm-primary);}
.service-box-items .icon img{width:60px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,.61,.36,1);}
/* Hover-only motion: icon revolves on the Y-axis (echoing the home hero rings) + slight scale */
.service-box-items:hover .icon img{transform:perspective(340px) rotateY(360deg) scale(1.08);}
.service-box-items .content{display:flex;flex-direction:column;flex:1;}
.service-box-items h3 a{color:#fff;}
.service-box-items h3{min-height:2.4em;}
.service-box-items p{color:#aab2c0;}
.service-box-items .link-btn{margin-top:auto;}
/* Numbered service rows (home) — give each a border so consecutive rows don't blur together */
.global-service-box{border:1px solid rgba(255,255,255,.16);}
.global-service-box:hover{border-color:transparent;}
/* Title line spacing: 30px on desktop, responsive down on smaller screens (was a cramped 90%) */
.global-service-box .global-content .content h3{line-height:clamp(24px,2.35vw,30px);}
/* Services page heading was dark (var(--header)) on the dark theme — make it legible */
.service-section-inner .section-title h2{color:#fff;}

/* ===== Service details page — legible on dark theme + rich content blocks ===== */
.service-widget h4{color:#fff;}
.service-details-content h2{color:#fff;}
.service-details-content .content p{color:#aab2c0;line-height:1.85;margin-bottom:16px;font-size:16px;}
.service-details-content .content p:last-child{margin-bottom:0;}

.sd-block{margin-top:40px;}
.sd-block h3{color:#fff;font-size:24px;font-weight:700;margin-bottom:20px;position:relative;padding-left:16px;}
.sd-block h3::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:4px;background:var(--vm-primary);}

.sd-deliverables{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;}
.sd-deliverables li{display:flex;gap:11px;align-items:flex-start;color:#d3d8e1;font-weight:500;line-height:1.5;}
.sd-deliverables li i{color:var(--vm-primary);margin-top:3px;flex:0 0 auto;}

.sd-steps{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.sd-step{background:var(--vm-panel);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:24px;transition:.3s;}
.sd-step:hover{border-color:var(--vm-primary);transform:translateY(-4px);}
.sd-step-num{display:block;color:var(--vm-primary);font-weight:800;font-size:22px;line-height:1;margin-bottom:12px;}
.sd-step h4{color:#fff;font-size:17px;margin:0 0 7px;}
.sd-step p{color:#aab2c0;font-size:14px;line-height:1.6;margin:0;}

.sd-benefits{list-style:none;padding:0;margin:0;}
.sd-benefits li{display:flex;gap:12px;align-items:flex-start;color:#d3d8e1;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);line-height:1.5;}
.sd-benefits li:last-child{border-bottom:0;}
.sd-benefits li i{color:var(--vm-primary);margin-top:3px;flex:0 0 auto;}

.sd-cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:38px;}
.sd-call{color:#fff;font-weight:600;}
.sd-call:hover{color:var(--vm-primary);}

@media(max-width:575px){
    .sd-deliverables,.sd-steps{grid-template-columns:1fr;}
}
.link-btn{color:var(--vm-primary);font-weight:600;display:inline-block;}

.service-sidebar .service-widget{background:var(--vm-panel);border-radius:16px;padding:26px;margin-bottom:20px;}
.service-list li{margin-bottom:10px;}
.service-list li a{display:flex;justify-content:space-between;color:#c7cdd8;padding:12px 16px;background:var(--vm-panel-2);border-radius:10px;}
.service-list li.active a,.service-list li a:hover{background:var(--vm-primary);color:#fff;}
.cta-widget{border-radius:16px;padding:34px 26px;}
.cta-widget h4{color:#fff;}.cta-widget p{color:#e7e1f2;}

.project-info-box{background:var(--vm-panel);border-radius:16px;padding:30px;}
.project-info-box h4{color:#fff;margin-bottom:16px;}
.project-info-box ul li{color:#aab2c0;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.project-info-box ul li strong{color:#fff;}

.faq-accordion .accordion-item{background:var(--vm-panel);border:1px solid rgba(255,255,255,.06);border-radius:12px!important;margin-bottom:14px;overflow:hidden;}
.faq-accordion .accordion-button{background:var(--vm-panel);color:#fff;font-weight:600;box-shadow:none;}
.faq-accordion .accordion-button:not(.collapsed){color:var(--vm-primary);}
.faq-accordion .accordion-body{color:#aab2c0;}

.news-card-items{background:var(--vm-panel);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.06);height:100%;}
.news-card-items .news-image img{width:100%;height:230px;object-fit:cover;}
.news-card-items .news-content{padding:0 22px 26px;}
.news-card-items h3 a{color:#fff;}
.badge-cat{display:inline-block;background:var(--vm-primary);color:#fff;font-size:12px;padding:3px 12px;border-radius:20px;margin-bottom:10px;}
.blog-sidebar .widget{background:var(--vm-panel);border-radius:16px;padding:26px;margin-bottom:20px;}
.blog-sidebar .widget h4{color:#fff;margin-bottom:16px;}
.recent-posts li{margin-bottom:14px;}
.recent-posts li a{display:flex;gap:12px;align-items:center;color:#c7cdd8;}
.recent-posts li img{width:64px;height:56px;object-fit:cover;border-radius:8px;}

.team-card-items{background:var(--vm-panel);border-radius:16px;overflow:hidden;padding-bottom:20px;border:1px solid rgba(255,255,255,.06);transition:.3s;}
.team-card-items:hover{transform:translateY(-6px);}
.team-card-items .team-image{position:relative;}
.team-card-items .team-image img{width:100%;height:300px;object-fit:cover;}
.team-card-items .social-icon{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;opacity:0;transition:.3s;}
.team-card-items:hover .social-icon{opacity:1;}
.team-card-items .social-icon a{width:38px;height:38px;border-radius:50%;background:var(--vm-primary);color:#fff;display:flex;align-items:center;justify-content:center;}
.team-card-items .social-icon a:hover{background:var(--vm-primary-d);}
.team-card-items h3 a{color:#fff;}
.team-details-content .role{color:var(--vm-primary);font-weight:600;}
.team-details-content .bio{color:#aab2c0;}

.error-section{text-align:center;}
.error-content h2{color:#fff;}
.error-content p{color:#aab2c0;}

/* Newsletter bar: orange gradient */
.footer-newsletter-box{background:linear-gradient(120deg,var(--vm-primary),var(--vm-primary-d))!important;}

/* ---- Hero marquee: plain scrolling words overlapping the hero background ---- */
.hero-2 .hero-marquee{position:relative;z-index:1;width:100%;margin-top:40px;overflow:hidden;}
.hero-2 .hero-marquee .marquee{background:transparent!important;margin:0!important;padding:14px 0!important;--duration:34s;}
.hero-2 .hero-marquee .text{color:#f94d00;font-size:clamp(26px,6.4vw,96px);font-weight:700;text-transform:uppercase;line-height:1.45;}
/* star separator scales with the marquee font (so it isn't oversized on mobile) */
.hero-2 .hero-marquee .text img{width:.7em;height:.7em;flex:0 0 auto;}
@media(max-width:1399px){.hero-2 .hero-marquee{order:9;}}

/* ---- Clients scrolling marquees (two rows, opposite directions) ---- */
.clients-section .section-title p{color:#aab2c0;}
/* Tighten the gaps around the "Our Work" and "Our Clients" home sections */
.project-section-2.section-padding{padding-top:55px;padding-bottom:44px;}
.clients-section.section-padding{padding-top:44px;padding-bottom:55px;}
@media(max-width:767px){.project-section-2.section-padding{padding-top:36px;padding-bottom:24px;}.clients-section.section-padding{padding-top:24px;padding-bottom:36px;}}
.vm-clients-rows{margin-top:52px;display:flex;flex-direction:column;gap:70px;}
/* Taller clip box + vertical padding so logos never crop top/bottom (incl. hover zoom) */
.vm-clients-marquee{overflow:hidden;padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.vm-clients-track{display:flex;width:max-content;align-items:center;gap:120px;}
.vm-clients-track.to-left{animation:vm-scroll-left 55s linear infinite;}
.vm-clients-track.to-right{animation:vm-scroll-right 55s linear infinite;}
.vm-clients-marquee:hover .vm-clients-track{animation-play-state:paused;}
.vm-client-logo{flex:0 0 auto;height:clamp(74px,8.5vw,116px);display:flex;align-items:center;justify-content:center;}
/* Steel-gray while idle/moving; true colours on hover. Crisp, high-quality rendering. */
.vm-client-logo img{height:100%;width:auto;max-width:280px;object-fit:contain;
    filter:grayscale(1);opacity:.85;
    transition:filter .35s ease,opacity .35s ease,transform .35s ease;
    image-rendering:auto;image-rendering:-webkit-optimize-contrast;-webkit-backface-visibility:hidden;}
.vm-client-logo img:hover{filter:none;opacity:1;transform:scale(1.09);}
@keyframes vm-scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes vm-scroll-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@media(max-width:991px){
    .vm-clients-rows{gap:52px;}
    .vm-clients-track{gap:84px;animation-duration:48s;}
    .vm-client-logo img{max-width:220px;}
}
@media(max-width:767px){
    .vm-clients-rows{gap:40px;margin-top:36px;}
    .vm-clients-marquee{padding:12px 0;}
    .vm-clients-track{gap:60px;animation-duration:36s;}
    .vm-client-logo{height:clamp(60px,14vw,88px);}
    .vm-client-logo img{max-width:180px;}
}

/* ---- Mission / Vision / Philosophy cards ---- */
.mvp-card{background:var(--vm-panel);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:38px 30px;height:100%;transition:.3s;}
.mvp-card:hover{transform:translateY(-6px);border-color:var(--vm-primary);}
.mvp-icon{width:66px;height:66px;border-radius:16px;background:var(--vm-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:20px;}
.mvp-card h3{color:#fff;margin-bottom:12px;}
.mvp-card p{color:#aab2c0;line-height:1.7;margin:0;}

/* ---- 360 Approach ---- */
.approach-section .section-title p{color:#aab2c0;}
.approach-item{background:var(--vm-panel);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:24px 14px;text-align:center;transition:.3s;height:100%;}
.approach-item:hover{transform:translateY(-5px);border-color:var(--vm-primary);background:var(--vm-primary);}
.approach-item .num{display:block;font-size:22px;font-weight:800;color:var(--vm-primary);margin-bottom:8px;}
.approach-item:hover .num{color:#fff;}
.approach-item h4{color:#fff;font-size:15px;margin:0;}

/* ---- Timeline ---- */
.timeline-track{display:flex;align-items:center;gap:0;flex-wrap:wrap;}
.timeline-node{position:relative;flex:1;min-width:80px;text-align:center;padding-top:26px;}
.timeline-node::before{content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:rgba(255,255,255,.12);}
.timeline-node::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--vm-primary);}
.timeline-node span{color:#fff;font-weight:700;font-size:18px;}
.timeline-section .section-title p{color:#aab2c0;}
.tx-title{color:#fff;}

/* ---- About page: force legible headings & body copy on the dark theme ---- */
.about-section .section-title h2,
.about-section .tx-title,
.mvp-section .section-title h2,
.approach-section .section-title h2,
.timeline-section .section-title h2,
.clients-section .section-title h2{color:#fff;}
.about-section .section-title h2 span,
.approach-section .section-title h2 span,
.timeline-section .section-title h2 span,
.clients-section .section-title h2 span{color:rgba(255,255,255,.32);}
.about-section .about-content .text,
.about-wrapper .about-content .text{color:#aab2c0;max-width:560px;}
.about-wrapper .about-content .about-list li,
.about-section .about-list li{color:#d3d8e1;font-weight:600;}
.about-wrapper .about-content .about-list li i,
.about-section .about-list li i{color:var(--vm-primary);}

/* ---- Hero: subtle dark vignette + warm orange glow (legibility) ---- */
.hero-section.hero-2{position:relative;isolation:isolate;}
.hero-section.hero-2::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(90% 90% at 100% 100%, rgba(243,111,33,.28), transparent 55%),
        linear-gradient(120deg, rgba(3,5,11,.55) 0%, rgba(3,5,11,.15) 55%, rgba(3,5,11,.40) 100%);
}
.hero-section.hero-2 > .container,
.hero-section.hero-2 > .container-fluid{position:relative;z-index:1;}
.hero-section.hero-2 .hero-box{z-index:3;}
/* Wide screens: tidy the floating card into the upper-right of the hero */
@media (min-width:1400px){
    .hero-section.hero-2 .hero-box{
        right:6%;top:220px;left:auto;max-width:360px;
        box-shadow:0 24px 60px rgba(0,0,0,.35);
    }
}

/* ---- Centered, smaller hero + animated logo ---- */
/* Space below the menu on top; NO space below the marquee so the video joins the boxes below */
.hero-section.hero-2{padding-top:104px;padding-bottom:0;}
@media(max-width:1399px){.hero-section.hero-2{padding-top:96px;padding-bottom:0;}}
/* Feature (4 boxes) section butts directly under the hero video — no gap, no hero background */
.feature-section-2{padding-top:0!important;position:relative;z-index:2;overflow:visible;}
/* remove the grid's top gutter (no offset above the first row) but keep spacing between stacked rows on mobile */
.feature-section-2 > .container > .row{--bs-gutter-y:0;row-gap:24px;}
.hero-2 .hero-content-center{margin-bottom:0;display:flex;flex-direction:column;align-items:center;}
.hero-2 .hero-content-center h1{
    font-size:clamp(24px,3.6vw,46px);line-height:1.1;margin:0 auto;max-width:none;white-space:nowrap;
}
.hero-2 .hero-content-center p{
    margin:20px auto 0;max-width:680px;
    font-size:clamp(17px,1.5vw,22px);line-height:1.55;font-weight:600;
    color:#e9edf3;letter-spacing:.1px;
}

.vm-hero-logo{margin-bottom:32px;line-height:0;}
.vm-hero-mark{width:clamp(180px,24vw,260px);height:auto;overflow:visible;}

/* ---- Full-width hero video (edge to edge). Text AND marquee overlap the video (video behind). ---- */
.hero-2 .hero-video-box{position:relative;width:100%;overflow:hidden;margin-top:14px;border:0;border-radius:0;box-shadow:none;}
.hero-2 .hero-video-box .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;z-index:0;}
/* Scrim between the video and the content (readability), sits above the video, below text + marquee */
.hero-2 .hero-video-box::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(4,6,11,.5) 0%,rgba(4,6,11,.12) 30%,rgba(4,6,11,.12) 60%,rgba(4,6,11,.5) 100%);}
.hero-2 .hero-video-overlay{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    text-align:center;min-height:clamp(524px,calc(40vw - 163px),984px);padding:70px 24px 14px;transform:translateY(32px);}
.hero-2 .hero-video-overlay h1{color:#fff;white-space:nowrap;max-width:none;margin:0 0 18px;
    font-size:clamp(16px,5vw,34px);line-height:1.1;text-shadow:0 2px 26px rgba(0,0,0,.75),0 0 42px rgba(0,0,0,.45);}
.hero-2 .hero-video-overlay p{color:#eef1f6;max-width:480px;margin:0;font-weight:600;
    font-size:clamp(13px,1.4vw,18px);line-height:1.5;text-shadow:0 1px 16px rgba(0,0,0,.75);}
/* Desktop/tablet: tagline stays on a single line (widen its allocated space) */
@media(min-width:768px){.hero-2 .hero-video-overlay p{max-width:none;white-space:nowrap;}}
/* Marquee now lives inside the video box, overlapping the video that sits behind it */
.hero-2 .hero-video-box .hero-marquee{position:relative;z-index:1;margin-top:0;padding-bottom:30px;}
@media(max-width:991px){.hero-2 .hero-video-box{margin-top:12px;}.hero-2 .hero-video-overlay{min-height:375px;padding-top:44px;}}
@media(max-width:575px){.hero-2 .hero-video-box{margin-top:10px;}.hero-2 .hero-video-overlay{min-height:311px;padding:34px 16px 10px;transform:translateY(24px);}.hero-2 .hero-video-overlay h1{margin-bottom:14px;}.hero-2 .hero-video-overlay p{font-size:14px;line-height:1.5;max-width:320px;}}
@media(max-width:767px){
    .vm-hero-mark{width:min(78vw,300px);}
    .hero-section.hero-2{padding:74px 0 0!important;}
    .hero-2 .hero-content-center .vm-hero-logo{margin-bottom:16px;}
    .hero-2 .hero-content-center p{margin-top:12px;}
    .hero-2 .hero-marquee{margin-top:20px;}
}
/* Rings revolve (different speeds), then both land facing-forward and halt with
   the V for ~1.5s showing the full logo, then the loop restarts. */
.vm-ring,.vm-v-group{transform-box:view-box;transform-origin:30px 30px;}
.vm-ring-1{stroke-dasharray:170;animation:vm-revolveY1 6s ease-in-out infinite;}
.vm-ring-2{stroke-dasharray:117;animation:vm-revolveY2 6s ease-in-out infinite;}
.vm-v{transform-box:fill-box;transform-origin:50% 100%;animation:vm-vreveal 6s ease-in-out infinite;}
/* Each ring draws itself in, does one gentle Y-axis turn, then halts facing forward */
@keyframes vm-revolveY1{
    0%{stroke-dashoffset:170;transform:perspective(160px) rotateY(0deg);}      /* traces itself in */
    32%{stroke-dashoffset:0;transform:perspective(160px) rotateY(0deg);}        /* complete circle */
    68%{stroke-dashoffset:0;transform:perspective(160px) rotateY(360deg);}      /* one gentle turn */
    92%{stroke-dashoffset:0;transform:perspective(160px) rotateY(360deg);}      /* halt facing forward */
    100%{stroke-dashoffset:170;transform:perspective(160px) rotateY(360deg);}   /* un-draw before the loop */
}
@keyframes vm-revolveY2{
    0%{stroke-dashoffset:117;transform:perspective(160px) rotateY(0deg);}
    32%{stroke-dashoffset:0;transform:perspective(160px) rotateY(0deg);}
    68%{stroke-dashoffset:0;transform:perspective(160px) rotateY(-360deg);}    /* opposite direction */
    92%{stroke-dashoffset:0;transform:perspective(160px) rotateY(-360deg);}
    100%{stroke-dashoffset:117;transform:perspective(160px) rotateY(-360deg);}
}
@keyframes vm-vreveal{
    0%,50%{transform:scaleY(0);opacity:0;}                 /* hidden while the rings appear + spin */
    68%{transform:scaleY(1);opacity:1;}                    /* V appears as the rings stop */
    92%{transform:scaleY(1);opacity:1;}                    /* hold with the rings — full logo (~1.5s) */
    100%{transform:scaleY(0);opacity:0;}                   /* collapse just before the loop restarts */
}
/* Let the single-line heading wrap on very small screens (avoid overflow) */
@media(max-width:520px){
    .hero-2 .hero-content-center h1{white-space:normal;}
}
@media(prefers-reduced-motion:reduce){
    .vm-hero-mark,.vm-ring-1,.vm-ring-2,.vm-v,.vm-v-group{animation:none!important;}
    .vm-v{transform:scaleY(1);opacity:1;}
}

/* ---- Breadcrumb: dark overlay + warm corner ---- */
.breadcrumb-wrapper{position:relative;}
.breadcrumb-wrapper::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(120deg,rgba(3,5,11,.78),rgba(3,5,11,.35) 55%,rgba(243,111,33,.32));
}
.breadcrumb-wrapper .container{position:relative;z-index:1;}
/* Compact banner — was 200/120 (desktop) & 150/120 (mobile): far too tall */
.breadcrumb-wrapper .page-heading{padding:115px 0 55px;}
.breadcrumb-wrapper .page-heading h1{font-size:52px;letter-spacing:-1px;}
@media(max-width:767px){.breadcrumb-wrapper .page-heading{padding:92px 0 38px;}}
/* Breadcrumb trail — wrap gracefully & shrink on small screens */
.breadcrumb-wrapper .page-heading .breadcrumb-items{flex-wrap:wrap;row-gap:2px;padding:0 12px;}
.breadcrumb-wrapper .page-heading .breadcrumb-items li{line-height:1.4;}
@media(max-width:767px){
    .breadcrumb-wrapper .page-heading h1{word-break:break-word;}
    .breadcrumb-wrapper .page-heading .breadcrumb-items{gap:7px;}
    .breadcrumb-wrapper .page-heading .breadcrumb-items li,
    .breadcrumb-wrapper .page-heading .breadcrumb-items li a{font-size:14px;}
}
@media(max-width:479px){
    .breadcrumb-wrapper .page-heading .breadcrumb-items li,
    .breadcrumb-wrapper .page-heading .breadcrumb-items li a{font-size:13px;}
}

/* ---- Subtle orange glow behind section headings ---- */
.section-title{position:relative;}
.section-title::before{
    content:"";position:absolute;top:-30px;left:0;width:min(420px,80%);height:220px;
    background:radial-gradient(ellipse 60% 60% at 30% 40%,rgba(243,111,33,.16),transparent 72%);
    filter:blur(20px);z-index:0;pointer-events:none;
}
.section-title.text-center::before{left:50%;transform:translateX(-50%);}
.section-title>*{position:relative;z-index:1;}

/* ---- Framed images (also warms the demo placeholders) ---- */
.hero-imagee,.about-image,.project-image,.news-image,.project-card-items-2 .project-image,
.about-section .about-image,.project-details-image,.team-details-image,.details-image{
    position:relative;border-radius:16px;overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.hero-imagee::after,.about-image::after,.project-image::after,.news-image::after,
.project-details-image::after,.team-details-image::after,.details-image::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    background:linear-gradient(150deg,rgba(3,5,11,.10) 0%,transparent 45%,rgba(243,111,33,.14) 100%);
}
.hero-imagee img,.about-image img,.project-image img,.news-image img{border-radius:16px;}
/* Feature pillar cards (Strategy / Production / Digital / Creative) */
.feature-section-2 .feature-icon-item-2{
    background:var(--vm-panel);border:1px solid rgba(255,255,255,.07);border-radius:18px;
    padding:34px 26px;height:100%;transition:.3s;
    display:flex;flex-direction:column;align-items:center;text-align:center;
}
.feature-section-2 .feature-icon-item-2:hover{transform:translateY(-6px);border-color:var(--vm-primary);}
.feature-section-2 .feature-icon-item-2 .icon{
    width:82px;height:82px;background:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;
    padding:15px;margin:0 auto 22px;box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.feature-section-2 .feature-icon-item-2 .icon img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.feature-section-2 .feature-icon-item-2 .content span{display:block;color:#fff;font-size:20px;font-weight:700;margin-bottom:12px;line-height:1.2;}
.feature-section-2 .feature-icon-item-2 .content p{color:#aab2c0;font-size:15px;line-height:1.7;margin:0;}

/* ============================================================
   RESPONSIVE LAYER
   ============================================================ */
img{max-width:100%;height:auto;}
.container-fluid,.container{overflow-x:clip;}

@media (max-width:1199px){
    .header-button .theme-btn{padding:12px 20px;font-size:14px;}
}

@media (max-width:991px){
    .section-padding{padding:70px 0;}
    .hero-section .hero-content h1,.hero-box h3{font-size:40px;line-height:1.15;}
    .section-title h2,.text-anim{font-size:32px!important;line-height:1.2;}
    .about-image{margin-bottom:26px;}
    .section-title-area{flex-wrap:wrap;gap:20px;}
    .footer-newsletter-box{flex-wrap:wrap;gap:16px;text-align:center;}
}

/* ---- Hero "3k+" card: show on ALL screens (template hides it < 1399px) ---- */
@media (max-width:1399px){
    .hero-2{display:flex;flex-direction:column;}
    .hero-2 > .container{order:1;}
    .hero-2 .hero-box{
        order:2;
        display:inline-flex!important;flex-direction:column;align-items:flex-start;gap:14px;
        position:relative!important;right:auto!important;top:auto!important;left:auto!important;
        max-width:520px;margin:8px 12px 0;
    }
    .hero-2 > .container-fluid{order:3;margin-top:26px;}
    .hero-2 .hero-box .top-item{margin-bottom:0;}
    .hero-2 .hero-content{margin-bottom:0;}
}
@media (max-width:575px){
    .hero-2 .hero-box{width:calc(100% - 24px);max-width:100%;padding:24px;}
}

@media (max-width:767px){
    .section-padding{padding:56px 0;}
    .hero-section .hero-content h1,.hero-box h3{font-size:32px;}
    .section-title h2,.text-anim{font-size:26px!important;}
    .contact-form-box{padding:24px;}
    .breadcrumb-wrapper .page-heading h1{font-size:34px;}
    .footer-widget-wrapper .row>[class*=col]{margin-bottom:26px;}
    .footer-bottom-wrapper{flex-direction:column;gap:12px;text-align:center;}
    .global-service-box{flex-wrap:wrap;gap:10px;}
    .newsletter-content{flex-direction:column;}
    .newsletter-content form,.newsletter-content .theme-btn{width:100%;}
    .pricing-section-2 .nav,.pricing-section-2 .section-title-area{justify-content:center;}
}

@media (max-width:479px){
    .hero-section .hero-content h1,.hero-box h3{font-size:27px;}
    .section-title h2,.text-anim{font-size:23px!important;}
    .theme-btn{padding:12px 20px;font-size:14px;}
    .breadcrumb-wrapper .page-heading h1{font-size:28px;}
}

/* ---- Mobile navigation (meanmenu inside offcanvas) ---- */
@media (max-width:1199px){
    .header-right .header-button{display:none;}
    .header__hamburger{display:block!important;}
}
.offcanvas__info{background:#0c0f18;}
/* Offcanvas is dark — make its text/icons legible (template defaults are near-black) */
.offcanvas__info .offcanvas__content .text{color:#c7cdd8!important;}
.offcanvas__info .offcanvas__contact h4{color:#fff!important;}
.offcanvas__info .offcanvas__contact ul li a{color:#e7ebf1!important;}
.offcanvas__info .offcanvas__contact ul li a:hover{color:var(--vm-primary)!important;}
.offcanvas__info .offcanvas__contact ul li .offcanvas__contact-icon i{color:var(--vm-primary)!important;}
.offcanvas__info .social-icon a{border:1px solid rgba(255,255,255,.20);color:#fff!important;}
.mean-container .mean-nav{background:transparent;margin-top:0;}
.mean-container a.meanmenu-reveal{display:none!important;}
.mean-container .mean-nav ul li a{color:var(--vm-primary);font-weight:600;border-top:1px solid rgba(243,111,33,.18);padding:11px 5%;}
.mean-container .mean-nav ul li a:hover{color:#fff;}
.mean-container .mean-nav ul li a.mean-expand{border:0;height:100%;top:0;padding:14px 12px!important;color:var(--vm-primary);}
.mean-container .mean-nav ul li a.mean-expand:hover{background:var(--vm-primary);color:#fff;}

/* Toggle (hamburger) + search icons in theme orange (mobile) */
.header__hamburger .sidebar__toggle i,
.sidebar__toggle i,
.menu_search .search_btn i{color:var(--vm-primary)!important;}

/* Horizontal brand logo (mark + wordmark beside) — sizing in the menu bar & footer */
.header-main .header-left .logo img{height:44px;width:auto;max-width:none;}
.footer-logo img{height:52px;width:auto;}
.search_logo img{height:46px;width:auto;}
/* Show the company logo in the top-left on mobile/tablet (per theme) */
@media(max-width:767px){
    .header-main{display:flex;align-items:center;justify-content:space-between;gap:12px;}
    .header-main .header-left,
    .header-main .header-left .logo,
    .header-main .header-left .logo a{display:block!important;}
    .header-main .header-left .logo img{height:38px;max-height:none;width:auto;}
}

/* Back-to-top: visible on every screen (template hid it below 575px) */
.back-to-top{display:inline-flex!important;align-items:center;justify-content:center;}
@media(max-width:575px){
    .back-to-top{width:44px;height:44px;right:16px;bottom:16px;font-size:15px;}
}
.offcanvas__contact ul li a:hover{color:var(--vm-primary);}
.offcanvas__info .social-icon a:hover{background:var(--vm-primary);color:#fff;}