/* ==========================================================================
   VD MEDIA MOGULS — Redesign Design System
   Brand: red #DA2728 / ink #100F10 (sampled from logo)
   Scope: all classes prefixed .vd- so nothing collides with legacy CSS.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,400..900&family=DM+Sans:opsz,wght@9..40,400..700&display=swap');

:root {
   /* Brand */
   --vd-red: #da2728;
   --vd-red-600: #b81f20;
   --vd-red-400: #ff4340;
   --vd-ink: #100f10;
   --vd-ink-2: #1a1719;
   --vd-ink-3: #272226;
   --vd-white: #ffffff;
   --vd-paper: #f6f5f6;
   --vd-paper-2: #ecebec;

   /* Text */
   --vd-text: #1a1719;
   --vd-text-soft: #6a6569;
   --vd-text-invert: #ffffff;
   --vd-text-invert-soft: rgba(255, 255, 255, .68);

   /* Lines & surfaces */
   --vd-line: rgba(16, 15, 16, .10);
   --vd-line-invert: rgba(255, 255, 255, .12);
   --vd-glass: rgba(255, 255, 255, .06);

   /* Type */
   --vd-display: 'Archivo', 'DM Sans', system-ui, sans-serif;
   --vd-body: 'DM Sans', system-ui, sans-serif;

   /* Motion */
   --vd-ease: cubic-bezier(.22, 1, .36, 1);
   --vd-ease-2: cubic-bezier(.65, 0, .35, 1);

   /* Layout */
   --vd-radius: 18px;
   --vd-radius-lg: 26px;
   --vd-shadow: 0 18px 46px -22px rgba(16, 15, 16, .38);
   --vd-shadow-lg: 0 40px 90px -40px rgba(16, 15, 16, .55);
   --vd-header-h: 84px;
   --vd-topbar-h: 42px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body.vd-body {
   font-family: var(--vd-body);
   font-size: 16px;
   line-height: 1.7;
   color: var(--vd-text);
   background: var(--vd-white);
   overflow-x: hidden;
   margin: 0;
}

/* :where() keeps these base styles at zero specificity so any .vd- class wins */
.vd-body :where(h1, h2, h3, h4, h5, h6) {
   font-family: var(--vd-display);
   font-weight: 800;
   font-stretch: 92%;
   letter-spacing: -.02em;
   line-height: 1.08;
   color: var(--vd-text);
   margin: 0 0 .5em;
}

.vd-body p { margin: 0 0 1rem; }
.vd-body a { text-decoration: none; color: inherit; transition: color .3s var(--vd-ease); }
.vd-body img { max-width: 100%; height: auto; }
.vd-body ul { margin: 0; padding: 0; list-style: none; }
.vd-body button { font-family: inherit; }

::selection { background: var(--vd-red); color: #fff; }

/* Scrollbar */
.vd-body::-webkit-scrollbar { width: 10px; }
.vd-body::-webkit-scrollbar-track { background: var(--vd-paper); }
.vd-body::-webkit-scrollbar-thumb { background: var(--vd-red); border-radius: 10px; }

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */
.vd-shell { width: 100%; max-width: 1290px; margin: 0 auto; padding: 0 20px; }
.vd-hero__inner > *, .vd-about__grid > *, .vd-why__grid > *,
.vd-contact__grid > *, .vd-vm__grid > *, .vd-footer__grid > *,
.vd-services__head > *, .vd-cta__box > * { min-width: 0; }
.vd-shell--wide { max-width: 1560px; }

.vd-section { position: relative; padding: 70px 0; }
.vd-section--tight { padding: 84px 0; }
.vd-section--dark { background: var(--vd-ink); color: var(--vd-text-invert); }
.vd-section--dark h1, .vd-section--dark h2,
.vd-section--dark h3, .vd-section--dark h4 { color: #fff; }
.vd-services , .vd-contact .vd-title, .vd-hero__title { color: #fff; }
.vd-section--paper { background: var(--vd-paper); }
.vd-title{
   color: #000;
}
.vd-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--vd-display);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--vd-red);
   margin-bottom: 16px;
}
.vd-eyebrow::before {
   content: '';
   width: 26px;
   height: 2px;
   background: var(--vd-red);
   display: block;
}
.vd-eyebrow i { font-size: 14px; }

.vd-title {
   font-size: 40px;
   font-weight: 800;
   font-stretch: 90%;
   letter-spacing: -.025em;
   margin-bottom: 18px;
}
.vd-title em { font-style: normal; color: var(--vd-red); }
.vd-title--sm { font-size: clamp(24px, 2.4vw, 34px); }

.vd-lead {
   font-size: 17px;
   color: var(--vd-text-soft);
   max-width: min(62ch, 100%);
}
.vd-section--dark .vd-lead { color: var(--vd-text-invert-soft); }

.vd-head-center { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.vd-head-center .vd-lead { margin-inline: auto; }

/* Buttons */
.vd-btn {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 0 30px;
   height: 52px;
   border: 0;
   border-radius: 999px;
   font-family: var(--vd-display);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: .1em;
   /* text-transform: uppercase; */
   cursor: pointer;
   overflow: hidden;
   isolation: isolate;
   background: var(--vd-red);
   color: #fff !important;
   transition: transform .35s var(--vd-ease), box-shadow .35s var(--vd-ease), color .35s var(--vd-ease);
   box-shadow: 0 16px 34px -18px rgba(218, 39, 40, .9);
}
.vd-btn::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background: var(--vd-ink);
   transform: translateY(101%);
   transition: transform .45s var(--vd-ease);
   border-radius: inherit;
}
.vd-btn:hover { color: #fff; transform: translateY(-3px); }
.vd-btn:hover::after { transform: translateY(0); }
.vd-btn i { font-size: 13px; transition: transform .35s var(--vd-ease); }
.vd-btn:hover i { transform: translateX(4px); }

.vd-btn--ghost {
   background: transparent;
   color: var(--vd-text) !important;
   box-shadow: inset 0 0 0 1.5px var(--vd-line);
}
.vd-btn--ghost::after { background: var(--vd-red); }
.vd-btn--ghost:hover { color: #fff !important; box-shadow: inset 0 0 0 1.5px transparent; }

.vd-btn--light { background: #fff; color: var(--vd-ink) !important; box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .6); }
.vd-btn--light::after { background: var(--vd-red); color: #fff; }
.vd-btn--light:hover,
.vd-btn--light:hover span,
.vd-btn--light:hover i { color: #fff !important; }

.vd-btn--onDark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px var(--vd-line-invert); }
.vd-btn--onDark::after { background: var(--vd-red); }
.vd-btn--onDark:hover { box-shadow: inset 0 0 0 1.5px transparent; }

.vd-btn--sm { height: 46px; padding: 0 22px; font-size: 12px; }

/* Text link */
.vd-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--vd-display);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--vd-red);
}
.vd-link i { transition: transform .35s var(--vd-ease); }
.vd-link:hover i { transform: translateX(5px); }

/* Circle icon button */
.vd-round {
   width: 52px;
   height: 52px;
   flex: 0 0 52px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   border: 1.5px solid var(--vd-line);
   background: transparent;
   color: var(--vd-text);
   cursor: pointer;
   transition: all .35s var(--vd-ease);
}
.vd-round:hover { background: var(--vd-red); border-color: var(--vd-red); color: #fff; transform: translateY(-2px); }
.vd-round--dark { border-color: var(--vd-line-invert); color: #fff; }

/* Reveal on scroll */
[data-vd-reveal] {
   opacity: 0;
   transform: translateY(34px);
   transition: opacity .9s var(--vd-ease), transform .9s var(--vd-ease);
   transition-delay: var(--vd-d, 0ms);
   will-change: opacity, transform;
}
[data-vd-reveal="left"] { transform: translateX(-42px); }
[data-vd-reveal="right"] { transform: translateX(42px); }
[data-vd-reveal="zoom"] { transform: scale(.9); }
[data-vd-reveal="fade"] { transform: none; }
[data-vd-reveal].vd-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
   [data-vd-reveal] { opacity: 1 !important; transform: none !important; }
   html { scroll-behavior: auto; }
}

/* Inner page breadcrumb */
.vd-body .breadcrumb__section-title-box .breadcrumb__subtitle,
.vd-body .breadcrumb__section-title-box .breadcrumb__title,
.vd-body .breadcrumb__list span,
.vd-body .breadcrumb__list a,
.vd-body .breadcrumb__list i {
   color: #fff;
}
.vd-body .breadcrumb__section-title-box .breadcrumb__subtitle,
.vd-body .breadcrumb__section-title-box .breadcrumb__title {
   text-shadow: 0 3px 18px rgba(0, 0, 0, .38);
}

/* Legacy advertisement pages */
.vd-legacy-page {
   background: #f8f7f8;
}
.vd-legacy-page main {
   background:
      radial-gradient(ellipse 46% 28% at 7% 7%, rgba(218, 39, 40, .08), transparent 70%),
      linear-gradient(180deg, #fff 0%, #f8f7f8 34%, #fff 100%);
   color: #625d62;
}
.vd-legacy-page .breadcrumb__area {
   background-size: cover;
   background-position: center;
}
.vd-legacy-page .breadcrumb__overlay::after {
   background: linear-gradient(90deg, rgba(16, 15, 16, .84) 0%, rgba(16, 15, 16, .61) 58%, rgba(16, 15, 16, .42) 100%);
}
.vd-legacy-page .breadcrumb__height {
   min-height: clamp(300px, 38vw, 430px);
   padding: 120px 0 72px;
}
.vd-legacy-page .breadcrumb__content {
   gap: 24px;
}
.vd-legacy-page .breadcrumb__section-title-box .breadcrumb__subtitle {
   font-family: var(--vd-display);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   opacity: .88;
}
.vd-legacy-page .breadcrumb__section-title-box .breadcrumb__title {
   max-width: 760px;
   font-size: clamp(36px, 5vw, 62px);
   font-weight: 720;
   letter-spacing: -.025em;
   line-height: 1.02;
}
.vd-legacy-page .breadcrumb__list {
   padding: 9px 14px;
   border-radius: 999px;
   background: rgba(16, 15, 16, .34);
   border: 1px solid rgba(255, 255, 255, .16);
   backdrop-filter: blur(8px);
}
.vd-legacy-page .common-padding,
.vd-legacy-page .grey-background,
.vd-legacy-page .tp-team-details-area,
.vd-legacy-page .service-details-area,
.vd-legacy-page .services-details-area {
   background-color: transparent;
}
.vd-legacy-page .description.common-padding,
.vd-legacy-page .faq.common-padding {
   padding: clamp(56px, 5.6vw, 82px) 0;
}
.vd-legacy-page .description.light + .faq.light,
.vd-legacy-page .description + .faq {
   padding-top: clamp(42px, 4.4vw, 64px);
}
.vd-legacy-page .description > .container,
.vd-legacy-page .faq > .container,
.vd-legacy-page section-description > .container,
.vd-legacy-page section-faq > .container {
   padding-left: 20px;
   padding-right: 20px;
}
.vd-legacy-page .default-content {
   max-width: 980px;
   margin-inline: auto;
}
.vd-legacy-page .description p,
.vd-legacy-page .faq p,
.vd-legacy-page main li,
.vd-legacy-page .default-content {
   color: #625d62;
   line-height: 1.82;
   font-family: var(--vd-body);
   font-size: 16.5px;
}
.vd-legacy-page .description p,
.vd-legacy-page .faq p {
   margin-bottom: 18px;
}
.vd-legacy-page .description a,
.vd-legacy-page .faq a {
   color: var(--vd-red);
   font-weight: 700;
}
.vd-legacy-page main strong,
.vd-legacy-page main b {
   color: #221f22;
}
.vd-legacy-page main h2,
.vd-legacy-page main h3,
.vd-legacy-page main h4,
.vd-legacy-page main h5 {
   color: #242024;
   font-family: var(--vd-display);
   font-weight: 700;
   letter-spacing: -.012em;
}
.vd-legacy-page main h2 {
   font-size: clamp(30px, 3.1vw, 42px);
   line-height: 1.12;
   margin-bottom: 16px;
}
.vd-legacy-page main h3 {
   font-size: clamp(22px, 2.1vw, 30px);
   line-height: 1.2;
   margin: 32px 0 13px;
}
.vd-legacy-page main h4 {
   font-size: 19px;
   line-height: 1.24;
}
.vd-legacy-page main h5 {
   font-size: 20px;
   line-height: 1.24;
   margin-top: 28px;
}
.vd-legacy-page .section-heading,
.vd-legacy-page .section-title {
   margin-bottom: 30px;
}
.vd-legacy-page .section-heading h2,
.vd-legacy-page .section-title h2,
.vd-legacy-page .text-center.mb-4 {
   position: relative;
   display: inline-block;
}
.vd-legacy-page .section-heading h2::after,
.vd-legacy-page .section-title h2::after,
.vd-legacy-page .text-center.mb-4::after {
   content: '';
   display: block;
   width: 58px;
   height: 2px;
   margin: 13px auto 0;
   border-radius: 3px;
   background: var(--vd-red);
}
.vd-legacy-page .row.mt-5 {
   margin-top: clamp(34px, 4vw, 52px) !important;
}
.vd-legacy-page .service-grid {
   gap: clamp(18px, 2vw, 26px) !important;
   margin-top: clamp(28px, 3.6vw, 44px) !important;
}
.vd-legacy-page .service-card,
.vd-legacy-page .services-card,
.vd-legacy-page .clients-logo-card,
.vd-legacy-page .tp-contact-form-border,
.vd-legacy-page main .card {
   border-radius: 14px;
   border: 1px solid rgba(16, 15, 16, .075);
   box-shadow: 0 18px 42px -34px rgba(16, 15, 16, .34);
}
.vd-legacy-page .service-card {
   background: #fff;
   overflow: hidden;
}
.vd-legacy-page .service-card img {
   aspect-ratio: 16 / 10;
   height: auto !important;
   min-height: 210px;
   object-fit: cover;
   border-radius: 0;
}
.vd-legacy-page .service-card-content {
   min-height: 142px;
   padding: 22px 22px 24px;
}
.vd-legacy-page .service-card-content h4 {
   color: #242024;
   margin-bottom: 10px;
}
.vd-legacy-page .service-card-content p {
   color: #716b70;
   font-size: 15.5px;
   line-height: 1.65;
   margin-bottom: 0;
}
.vd-legacy-page .services-card,
.vd-legacy-page .service-card,
.vd-legacy-page main .card {
   transition: transform .35s var(--vd-ease), box-shadow .35s var(--vd-ease), border-color .35s var(--vd-ease);
}
.vd-legacy-page .services-card:hover,
.vd-legacy-page .service-card:hover,
.vd-legacy-page main .card:hover {
   transform: translateY(-5px);
   border-color: rgba(218, 39, 40, .24);
   box-shadow: 0 26px 56px -36px rgba(16, 15, 16, .46);
}
.vd-legacy-page .service-card:hover .service-card-content h4 {
   color: var(--vd-red);
}
.vd-legacy-page .services-card {
   background: #fff;
   min-height: 56px;
   display: flex;
   align-items: center;
   padding: 16px 18px;
}
.vd-legacy-page .services-card a {
   color: var(--vd-ink);
   font-family: var(--vd-display);
   font-weight: 700;
   line-height: 1.35;
}
.vd-legacy-page .services-card:hover a {
   color: var(--vd-red);
}
.vd-legacy-page .service-card img,
.vd-legacy-page .tp-team-details-thumb img,
.vd-legacy-page .services-details-thumb img,
.vd-legacy-page .service-details-thumb img {
   border-radius: 14px;
}
.vd-legacy-page .btn,
.vd-legacy-page .tp-btn,
.vd-legacy-page .submit-btn,
.vd-legacy-page .learn-more-btn {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   min-height: 52px;
   padding: 0 30px;
   border-radius: 999px;
   border: 0;
   font-family: var(--vd-display);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: .02em;
   line-height: 1;
   overflow: hidden;
   isolation: isolate;
   transition: transform .35s var(--vd-ease), box-shadow .35s var(--vd-ease), background .35s var(--vd-ease), color .35s var(--vd-ease), border-color .35s var(--vd-ease);
}
.vd-legacy-page .btn-primary,
.vd-legacy-page .tp-btn,
.vd-legacy-page .submit-btn,
.vd-legacy-page .learn-more-btn {
   border-color: var(--vd-red);
   background: var(--vd-red);
   color: #fff !important;
   box-shadow: 0 16px 34px -18px rgba(218, 39, 40, .9);
}
.vd-legacy-page .btn-primary::after,
.vd-legacy-page .tp-btn::after,
.vd-legacy-page .submit-btn::after,
.vd-legacy-page .learn-more-btn::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   border-radius: inherit;
   background: var(--vd-ink);
   transform: translateY(101%);
   transition: transform .45s var(--vd-ease);
}
.vd-legacy-page .btn-primary::before,
.vd-legacy-page .tp-btn::before,
.vd-legacy-page .submit-btn::before,
.vd-legacy-page .learn-more-btn::before {
   content: '\f061';
   order: 2;
   font-family: 'Font Awesome 6 Pro';
   font-size: 12px;
   font-weight: 400;
   line-height: 1;
   position: relative;
   z-index: 1;
   transition: transform .35s var(--vd-ease);
}
.vd-legacy-page .btn-primary > *,
.vd-legacy-page .tp-btn > *,
.vd-legacy-page .submit-btn > *,
.vd-legacy-page .learn-more-btn > * {
   position: relative;
   z-index: 1;
}
.vd-legacy-page .btn-primary:hover,
.vd-legacy-page .tp-btn:hover,
.vd-legacy-page .submit-btn:hover,
.vd-legacy-page .learn-more-btn:hover {
   border-color: var(--vd-ink);
   background: var(--vd-red);
   color: #fff !important;
   transform: translateY(-3px);
   box-shadow: 0 20px 38px -24px rgba(16, 15, 16, .72);
}
.vd-legacy-page .btn-primary:hover::after,
.vd-legacy-page .tp-btn:hover::after,
.vd-legacy-page .submit-btn:hover::after,
.vd-legacy-page .learn-more-btn:hover::after {
   transform: translateY(0);
}
.vd-legacy-page .btn-primary:hover::before,
.vd-legacy-page .tp-btn:hover::before,
.vd-legacy-page .submit-btn:hover::before,
.vd-legacy-page .learn-more-btn:hover::before {
   transform: translateX(4px);
}
.vd-legacy-page .learn-more-btn {
   min-height: 42px;
   padding: 0 20px;
   margin-top: 18px;
   font-size: 12px;
}
.vd-legacy-page .tp-contact-form-area {
   background: linear-gradient(180deg, transparent 0%, #fff 100%) !important;
   padding-top: clamp(24px, 4vw, 48px);
}
.vd-legacy-page .tp-contact-form-border {
   background: #fff;
   padding: clamp(26px, 4vw, 42px);
   max-width: 1040px;
   margin-inline: auto;
}
.vd-legacy-page .tp-contact-form-title {
   color: #242024;
   font-family: var(--vd-display);
   font-weight: 700;
   letter-spacing: -.012em;
   margin-bottom: 24px;
}
.vd-legacy-page .tp-contact-form-input-box input,
.vd-legacy-page .tp-contact-form-input-box textarea,
.vd-legacy-page input,
.vd-legacy-page textarea {
   border-color: rgba(16, 15, 16, .12);
   border-radius: 12px;
   background: #fbfafb;
   color: #242024;
}
.vd-legacy-page .tp-contact-form-input-box input:focus,
.vd-legacy-page .tp-contact-form-input-box textarea:focus,
.vd-legacy-page input:focus,
.vd-legacy-page textarea:focus {
   border-color: rgba(218, 39, 40, .48);
   box-shadow: 0 0 0 4px rgba(218, 39, 40, .08);
}
.vd-legacy-page .faq,
.vd-legacy-page .light {
   background: rgba(255, 255, 255, .68) !important;
}
.vd-legacy-page .description:not(.light) {
   background: transparent !important;
}
.vd-legacy-page .faq-accordion {
   max-width: 1020px;
   margin-inline: auto;
}
.vd-legacy-page .accordion-item {
   border: 1px solid rgba(16, 15, 16, .08);
   border-radius: 12px !important;
   overflow: hidden;
   margin-bottom: 14px;
   box-shadow: 0 18px 42px -36px rgba(16, 15, 16, .32);
}
.vd-legacy-page .accordion-button {
   min-height: 62px;
   padding: 18px 22px;
   background: #fff;
   color: #242024;
   font-family: var(--vd-display);
   font-weight: 700;
   letter-spacing: -.005em;
   box-shadow: none;
}
.vd-legacy-page .accordion-button p {
   color: inherit;
   font-size: 16px;
   line-height: 1.35;
}
.vd-legacy-page .accordion-button:not(.collapsed) {
   color: var(--vd-red);
   background: #fff8f8;
}
.vd-legacy-page .accordion-button:focus {
   box-shadow: 0 0 0 4px rgba(218, 39, 40, .09);
}
.vd-legacy-page .accordion-body {
   padding: 4px 22px 22px;
   background: #fff;
}
.vd-legacy-page .stats-box {
   height: 100%;
   border: 1px solid rgba(16, 15, 16, .075);
   border-radius: 14px;
   background: #fff;
   box-shadow: 0 18px 42px -34px rgba(16, 15, 16, .34);
   transition: transform .35s var(--vd-ease), box-shadow .35s var(--vd-ease), border-color .35s var(--vd-ease);
}
.vd-legacy-page .stats-box:hover {
   transform: translateY(-5px);
   border-color: rgba(218, 39, 40, .24);
   box-shadow: 0 26px 56px -36px rgba(16, 15, 16, .46);
}
.vd-legacy-page .stats-number {
   color: var(--vd-red);
   font-family: var(--vd-display);
   font-weight: 780;
}
.vd-legacy-page .tp-contact-3-area,
.vd-legacy-page .mobpadd,
.vd-legacy-page .bg-gradient-gray.common-padding {
   background: transparent !important;
   padding-left: 0;
   padding-right: 0;
}
.vd-legacy-page .tp-contact-3-area {
   padding-top: clamp(42px, 5vw, 72px) !important;
   padding-bottom: clamp(18px, 3vw, 38px) !important;
}
.vd-legacy-page .tp-contact-3-area > h2,
.vd-legacy-page .mobpadd > h3,
.vd-legacy-page .commontitle {
   position: relative;
   display: table;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: clamp(28px, 3.2vw, 42px);
   color: #242024;
   font-family: var(--vd-display);
   font-weight: 700;
   letter-spacing: -.012em;
}
.vd-legacy-page .tp-contact-3-area > h2::after,
.vd-legacy-page .mobpadd > h3::after,
.vd-legacy-page .commontitle::after {
   content: '';
   display: block;
   width: 58px;
   height: 2px;
   margin: 13px auto 0;
   border-radius: 3px;
   background: var(--vd-red);
}
.vd-legacy-page .tp-contact-3-item {
   height: 100%;
   padding: 10px;
   border: 1px solid rgba(16, 15, 16, .075);
   border-radius: 14px;
   background: #fff;
   box-shadow: 0 18px 42px -34px rgba(16, 15, 16, .34);
   overflow: hidden;
   transition: transform .35s var(--vd-ease), box-shadow .35s var(--vd-ease), border-color .35s var(--vd-ease);
}
.vd-legacy-page .tp-contact-3-item:hover {
   transform: translateY(-5px);
   border-color: rgba(218, 39, 40, .24);
   box-shadow: 0 26px 56px -36px rgba(16, 15, 16, .46);
}
.vd-legacy-page .tp-contact-3-item img {
   width: 100%;
   aspect-ratio: 16 / 11;
   height: auto;
   min-height: 210px;
   object-fit: cover;
   border-radius: 10px;
   display: block;
   transition: transform .5s var(--vd-ease);
}
.vd-legacy-page .tp-contact-3-item:hover img {
   transform: scale(1.04);
}
.vd-legacy-page .mobpadd {
   padding-top: clamp(48px, 5vw, 78px);
   padding-bottom: clamp(28px, 4vw, 58px);
}
.vd-legacy-page .mobpadd p,
.vd-legacy-page .mobpadd li,
.vd-legacy-page .contentarea p {
   color: #625d62;
   font-family: var(--vd-body);
   font-size: 16.5px;
   line-height: 1.82;
}
.vd-legacy-page .mobpadd ul {
   margin-bottom: 22px;
   padding-left: 20px;
}
.vd-legacy-page .mobpadd li {
   list-style: disc;
   margin-bottom: 10px;
}
.vd-legacy-page .mobpadd li ul {
   margin-top: 10px;
}
.vd-legacy-page .contentarea {
   max-width: 620px;
}
.vd-legacy-page .imagesarea img,
.vd-legacy-page img.sideimagead,
.vd-legacy-page .sideimagead img {
   width: 100%;
   max-height: 440px;
   object-fit: cover;
   border-radius: 14px;
   box-shadow: 0 24px 60px -38px rgba(16, 15, 16, .5);
}
.vd-legacy-page .bg-gradient-gray.common-padding {
   padding-top: clamp(46px, 5vw, 72px);
   padding-bottom: clamp(54px, 6vw, 86px);
   background:
      radial-gradient(ellipse 42% 30% at 92% 0%, rgba(218, 39, 40, .08), transparent 70%),
      rgba(255, 255, 255, .68) !important;
}

@media (max-width: 767px) {
   .vd-legacy-page .breadcrumb__height {
      min-height: 330px;
      padding: 112px 0 54px;
   }
   .vd-legacy-page .breadcrumb__content {
      align-items: flex-start !important;
      flex-direction: column;
      gap: 18px;
   }
   .vd-legacy-page .breadcrumb__section-title-box .breadcrumb__title {
      font-size: clamp(32px, 11vw, 44px);
   }
   .vd-legacy-page .description > .container,
   .vd-legacy-page .faq > .container,
   .vd-legacy-page section-description > .container,
   .vd-legacy-page section-faq > .container {
      padding-left: 18px;
      padding-right: 18px;
   }
   .vd-legacy-page .description.common-padding,
   .vd-legacy-page .faq.common-padding {
      padding: 48px 0;
   }
   .vd-legacy-page main h2 {
      font-size: clamp(27px, 9vw, 34px);
   }
   .vd-legacy-page main h3 {
      font-size: clamp(21px, 7vw, 27px);
   }
   .vd-legacy-page .btn,
   .vd-legacy-page .tp-btn,
   .vd-legacy-page .submit-btn {
      width: 100%;
      max-width: 320px;
   }
   .vd-legacy-page .service-grid {
      grid-template-columns: 1fr !important;
   }
   .vd-legacy-page .tp-contact-3-item img {
      min-height: 190px;
   }
   .vd-legacy-page .mobpadd {
      padding-left: 18px;
      padding-right: 18px;
   }
}

/* --------------------------------------------------------------------------
   Preloader
   -------------------------------------------------------------------------- */
.vd-loader {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: grid;
   place-items: center;
   background: var(--vd-ink);
   transition: opacity .6s var(--vd-ease), visibility .6s;
}
.vd-loader.vd-loader--out { opacity: 0; visibility: hidden; }
.vd-loader__mark { text-align: center; }
.vd-loader__mark img { width: 250px; display: block; background: #fff; padding: 14px 20px; border-radius: 14px; }
.vd-loader__bar {
   width: 210px;
   height: 3px;
   margin: 26px auto 0;
   border-radius: 3px;
   background: rgba(255, 255, 255, .14);
   overflow: hidden;
}
.vd-loader__bar span {
   display: block;
   height: 100%;
   width: 40%;
   border-radius: 3px;
   background: var(--vd-red);
   animation: vdLoad 1.1s var(--vd-ease-2) infinite;
}
@keyframes vdLoad {
   0% { transform: translateX(-110%); }
   100% { transform: translateX(320%); }
}

/* --------------------------------------------------------------------------
   Floating utilities: back to top + whatsapp
   -------------------------------------------------------------------------- */
.vd-float {
   position: fixed;
   right: 22px;
   bottom: 24px;
   z-index: 600;
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.vd-float__btn {
   width: 50px;
   height: 50px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   border: 0;
   cursor: pointer;
   color: #fff;
   font-size: 18px;
   box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5);
   transition: transform .35s var(--vd-ease), opacity .35s var(--vd-ease);
}
.vd-float__btn:hover { transform: translateY(-4px) scale(1.05); }
.vd-float__btn--wa { background: #25d366; font-size: 22px; }
.vd-float__btn--top { background: var(--vd-red); opacity: 0; pointer-events: none; }
.vd-float__btn--top.vd-show { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.vd-topbar {
   background: var(--vd-ink);
   color: var(--vd-text-invert-soft);
   font-size: 13.5px;
   height: var(--vd-topbar-h);
   display: flex;
   align-items: center;
   position: relative;
   z-index: 3;
}
.vd-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.vd-topbar__list { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.vd-topbar__list li { display: inline-flex; align-items: center; gap: 9px; }
.vd-topbar__list i { color: var(--vd-red-400); font-size: 13px; }
.vd-topbar a:hover { color: #fff; }
.vd-topbar__right { display: flex; align-items: center; gap: 20px; }
.vd-topbar__tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--vd-display);
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #fff;
   background: linear-gradient(100deg, var(--vd-red), var(--vd-red-600));
   padding: 5px 14px;
   border-radius: 999px;
}
.vd-social { display: inline-flex; align-items: center; gap: 6px; }
.vd-social a {
   width: 30px;
   height: 30px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font-size: 13px;
   background: rgba(255, 255, 255, .07);
   color: rgba(255, 255, 255, .8);
   transition: all .3s var(--vd-ease);
}
.vd-social a:hover { background: var(--vd-red); color: #fff; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.vd-header { position: relative; z-index: 500; }
.vd-header__bar {
   background: #fff;
   border-bottom: 1px solid var(--vd-line);
   transition: box-shadow .35s var(--vd-ease), transform .45s var(--vd-ease);
}
.vd-header__inner {
   height: var(--vd-header-h);
   display: flex;
   align-items: center;
   gap: 26px;
}
.vd-logo { flex: 0 0 auto; display: block; }
.vd-logo img { height: 54px; width: auto; display: block; transition: height .35s var(--vd-ease); }

/* Sticky */
.vd-header--sticky .vd-header__bar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 500;
   box-shadow: 0 12px 34px -22px rgba(16, 15, 16, .5);
   animation: vdDropIn .5s var(--vd-ease) both;
   backdrop-filter: saturate(1.4) blur(10px);
   background: rgba(255, 255, 255, .94);
}
.vd-header--sticky .vd-header__inner { height: 72px; }
.vd-header--sticky .vd-logo img { height: 46px; }
@keyframes vdDropIn {
   from { transform: translateY(-100%); }
   to { transform: translateY(0); }
}

/* Primary nav */
.vd-nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.vd-nav > li { position: relative; }
.vd-nav > li > a {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 12px 15px;
   font-family: var(--vd-display);
   font-size: 14px;
   font-weight: 700;
   font-stretch: 95%;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--vd-text);
   white-space: nowrap;
}
.vd-nav > li > a i { font-size: 10px; opacity: .55; transition: transform .3s var(--vd-ease); }
.vd-nav > li > a::after {
   content: '';
   position: absolute;
   left: 15px;
   right: 15px;
   bottom: 4px;
   height: 2px;
   background: var(--vd-red);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .38s var(--vd-ease);
}
.vd-nav > li:hover > a, .vd-nav > li.vd-active > a { color: var(--vd-red); }
.vd-nav > li:hover > a::after, .vd-nav > li.vd-active > a::after { transform: scaleX(1); }
.vd-nav > li:hover > a i { transform: rotate(180deg); }

/* Mega menu panel */
.vd-mega {
   position: absolute;
   top: calc(100% + 14px);
   left: 50%;
   transform: translate(-50%, 16px);
   width: min(1120px, calc(100vw - 48px));
   background: #fff;
   border-radius: var(--vd-radius-lg);
   box-shadow: var(--vd-shadow-lg);
   border: 1px solid var(--vd-line);
   padding: 30px;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity .38s var(--vd-ease), transform .38s var(--vd-ease), visibility .38s;
}
.vd-nav > li.vd-has-mega { position: static; }
.vd-nav > li.vd-has-mega:hover .vd-mega,
.vd-nav > li.vd-has-mega:focus-within .vd-mega {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translate(-50%, 0);
}
.vd-mega__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 320px; gap: 26px; }
.vd-mega__col h6 {
   font-size: 12px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--vd-red);
   margin-bottom: 16px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--vd-line);
}
.vd-mega__list li + li { margin-top: 2px; }
.vd-mega__list a {
   display: flex;
   align-items: center;
   gap: 11px;
   padding: 8px 10px;
   border-radius: 12px;
   font-size: 14.5px;
   color: var(--vd-text);
   transition: background .3s var(--vd-ease), color .3s var(--vd-ease), transform .3s var(--vd-ease);
}
.vd-mega__list a i {
   width: 30px;
   height: 30px;
   flex: 0 0 30px;
   display: grid;
   place-items: center;
   border-radius: 9px;
   font-size: 13px;
   background: var(--vd-paper);
   color: var(--vd-red);
   transition: all .3s var(--vd-ease);
}
.vd-mega__list a:hover { background: var(--vd-paper); color: var(--vd-red); transform: translateX(4px); }
.vd-mega__list a:hover i { background: var(--vd-red); color: #fff; }

/* Featured cards inside mega menu */
.vd-mega__feature { display: grid; gap: 14px; }
.vd-mega__card {
   position: relative;
   display: block;
   border-radius: 16px;
   overflow: hidden;
   min-height: 118px;
   isolation: isolate;
}
.vd-mega__card img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -2;
   transition: transform .8s var(--vd-ease);
}
.vd-mega__card::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(120deg, rgba(16, 15, 16, .88) 10%, rgba(218, 39, 40, .6) 100%);
}
.vd-mega__card:hover img { transform: scale(1.09); }
.vd-mega__cap {
   position: absolute;
   left: 18px;
   bottom: 16px;
   right: 18px;
   color: #fff;
   font-family: var(--vd-display);
   font-weight: 800;
   font-size: 16px;
   line-height: 1.2;
}
.vd-mega__cap small {
   display: block;
   font-family: var(--vd-body);
   font-weight: 400;
   font-size: 12.5px;
   color: rgba(255, 255, 255, .75);
   margin-top: 3px;
}
.vd-mega__badge {
   position: absolute;
   top: 12px;
   left: 14px;
   z-index: 1;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   background: var(--vd-red);
   color: #fff;
   padding: 4px 9px;
   border-radius: 6px;
}
.vd-mega__cta {
   margin-top: 4px;
   background: var(--vd-ink);
   border-radius: 16px;
   padding: 18px 20px;
   color: #fff;
}
.vd-mega__cta strong { display: block; font-family: var(--vd-display); font-size: 15px; }
.vd-mega__cta p { font-size: 13px; color: var(--vd-text-invert-soft); margin: 4px 0 12px; }

/* Search */
.vd-search { position: relative; margin-left: auto; flex: 1 1 300px; max-width: 360px; }
.vd-search__field {
   display: flex;
   align-items: center;
   gap: 10px;
   height: 48px;
   padding: 0 6px 0 18px;
   border-radius: 999px;
   background: var(--vd-paper);
   border: 1.5px solid transparent;
   transition: border-color .35s var(--vd-ease), background .35s var(--vd-ease), box-shadow .35s var(--vd-ease);
}
.vd-search.vd-open .vd-search__field,
.vd-search__field:focus-within {
   background: #fff;
   border-color: rgba(218, 39, 40, .45);
   box-shadow: 0 0 0 5px rgba(218, 39, 40, .09);
}
.vd-search__icon { color: var(--vd-text-soft); font-size: 14px; }
.vd-search input {
   flex: 1;
   min-width: 0;
   border: 0;
   background: transparent;
   outline: none;
   font-size: 14.5px;
   color: var(--vd-text);
}
.vd-search input::placeholder { color: var(--vd-text-soft); }
.vd-search__go {
   width: 36px;
   height: 36px;
   flex: 0 0 36px;
   border: 0;
   border-radius: 50%;
   background: var(--vd-red);
   color: #fff;
   font-size: 13px;
   cursor: pointer;
   transition: transform .3s var(--vd-ease), background .3s var(--vd-ease);
}
.vd-search__go:hover { background: var(--vd-ink); transform: rotate(-10deg) scale(1.06); }

.vd-search__panel {
   position: absolute;
   top: calc(100% + 12px);
   left: 0;
   right: 0;
   background: #fff;
   border: 1px solid var(--vd-line);
   border-radius: 18px;
   box-shadow: var(--vd-shadow-lg);
   padding: 16px 18px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: all .35s var(--vd-ease);
   z-index: 20;
   max-height: 60vh;
   overflow-y: auto;
}
.vd-search.vd-open .vd-search__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.vd-search__panel h6 {
   font-size: 11px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--vd-text-soft);
   margin-bottom: 12px;
}
.vd-search__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-search__tags a {
   font-size: 13px;
   padding: 6px 13px;
   border-radius: 999px;
   background: var(--vd-paper);
   color: var(--vd-text);
   transition: all .28s var(--vd-ease);
}
.vd-search__tags a:hover { background: var(--vd-red); color: #fff; }
.vd-search__results li a {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 9px 10px;
   border-radius: 12px;
   font-size: 14.5px;
   transition: background .25s var(--vd-ease);
}
.vd-search__results li a:hover { background: var(--vd-paper); color: var(--vd-red); }
.vd-search__results i { color: var(--vd-red); font-size: 12px; }
.vd-search__empty { font-size: 14px; color: var(--vd-text-soft); margin: 0; }

/* Header actions */
.vd-header__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.vd-call { display: none; align-items: center; gap: 12px; }
.vd-call__icon {
   width: 46px;
   height: 46px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: rgba(218, 39, 40, .1);
   color: var(--vd-red);
   font-size: 16px;
   animation: vdPulse 2.6s infinite;
}
@keyframes vdPulse {
   0% { box-shadow: 0 0 0 0 rgba(218, 39, 40, .35); }
   70% { box-shadow: 0 0 0 12px rgba(218, 39, 40, 0); }
   100% { box-shadow: 0 0 0 0 rgba(218, 39, 40, 0); }
}
.vd-call__txt small { display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--vd-text-soft); }
.vd-call__txt a { font-family: var(--vd-display); font-weight: 800; font-size: 15.5px; }
.vd-call__txt a:hover { color: var(--vd-red); }

.vd-burger {
   width: 48px;
   height: 48px;
   display: grid;
   place-items: center;
   gap: 4px;
   flex-direction: column;
   border: 1.5px solid var(--vd-line);
   border-radius: 50%;
   background: #fff;
   color: var(--vd-ink);
   cursor: pointer;
   box-shadow: 0 12px 28px -24px rgba(16, 15, 16, .65);
   transition: background .3s var(--vd-ease), border-color .3s var(--vd-ease), transform .3s var(--vd-ease), box-shadow .3s var(--vd-ease);
}
.vd-burger:hover { background: var(--vd-red); border-color: var(--vd-red); box-shadow: 0 18px 34px -22px rgba(218, 39, 40, .9); transform: translateY(-2px); }
.vd-burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: all .3s var(--vd-ease); }
.vd-burger span:nth-child(2) { width: 12px; }
.vd-burger:hover span { color: #fff; }

.vd-burger--grid {
   position: relative;
   display: block;
   width: 48px;
   height: 48px;
   border: 0;
   border-radius: 0;
   background: transparent;
   box-shadow: none;
   overflow: visible;
}
.vd-burger--grid span {
   position: absolute;
   width: 16px;
   height: 16px;
   border: 2px solid currentColor;
   border-radius: 5px;
   background: transparent;
   color: rgba(16, 15, 16, .74);
   transform: translate3d(0, 0, 0);
   transition: inset .48s var(--vd-ease), width .48s var(--vd-ease), height .48s var(--vd-ease), border-radius .48s var(--vd-ease), color .3s var(--vd-ease), background .3s var(--vd-ease), box-shadow .48s var(--vd-ease), transform .48s var(--vd-ease);
}
.vd-burger--grid span:nth-child(1) { top: 7px; left: 7px; }
.vd-burger--grid span:nth-child(2) { top: 7px; right: 7px; width: 16px; }
.vd-burger--grid span:nth-child(3) { bottom: 7px; left: 7px; }
.vd-burger--grid span:nth-child(4) { right: 7px; bottom: 7px; }
.vd-burger--grid:hover {
   background: transparent;
   border-color: transparent;
   box-shadow: none;
   transform: none;
}
.vd-burger--grid:hover span {
   color: rgba(16, 15, 16, .68);
   border-radius: 8px;
}
.vd-burger--grid:hover span:nth-child(1) {
   top: 6px;
   left: 6px;
   width: 20px;
   height: 20px;
   z-index: 1;
   transform: translate3d(-1px, -1px, 0);
}
.vd-burger--grid:hover span:nth-child(2) {
   top: 10px;
   right: 8px;
   width: 30px;
   height: 30px;
   z-index: 4;
   background: #fff;
   color: rgba(16, 15, 16, .82);
   box-shadow: 0 10px 22px -16px rgba(16, 15, 16, .55);
   transform: translate3d(0, 0, 0);
}
.vd-burger--grid:hover span:nth-child(3) {
   bottom: 6px;
   left: 6px;
   width: 20px;
   height: 20px;
   z-index: 2;
   transform: translate3d(-1px, 1px, 0);
}
.vd-burger--grid:hover span:nth-child(4) {
   right: 5px;
   bottom: 5px;
   width: 22px;
   height: 22px;
   z-index: 1;
   transform: translate3d(1px, 1px, 0);
}

/* Full screen menu */
.vd-drawer {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100vh;
   height: 100dvh;
   max-height: 100vh;
   max-height: 100dvh;
   background:
      radial-gradient(ellipse 45% 42% at 84% 10%, rgba(218, 39, 40, .24), transparent 68%),
      radial-gradient(ellipse 42% 38% at 8% 88%, rgba(255, 67, 64, .16), transparent 70%),
      var(--vd-ink);
   color: #fff;
   z-index: 1000;
   transform: translateY(-100%);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: transform .55s var(--vd-ease), opacity .45s var(--vd-ease), visibility .45s;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   padding: clamp(18px, 3vw, 42px);
}
.vd-drawer.vd-open {
   transform: translateY(0);
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}
.vd-drawer__top {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}
.vd-drawer__top img {
    height: 90px; 
    border-radius: 10px;
    }
.vd-drawer__close {
   width: 52px;
   height: 52px;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   color: #fff;
   font-size: 18px;
   cursor: pointer;
   transition: background .3s var(--vd-ease), transform .3s var(--vd-ease);
}
.vd-drawer__close:hover { background: var(--vd-red); transform: rotate(90deg); }
.vd-drawer__grid {
   display: grid;
   grid-template-columns: minmax(260px, .72fr) minmax(520px, 1.28fr);
   gap: clamp(18px, 2.4vw, 34px);
   align-items: start;
   width: min(1440px, 100%);
   min-height: 0;
   max-height: 100%;
   margin: 0 auto;
   flex: 1 1 auto;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: rgba(218, 39, 40, .78) rgba(255, 255, 255, .06);
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
   padding: 4px 8px 18px 2px;
}
.vd-drawer__grid::-webkit-scrollbar {
   width: 8px;
}
.vd-drawer__grid::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, .06);
   border-radius: 999px;
}
.vd-drawer__grid::-webkit-scrollbar-thumb {
   background: linear-gradient(180deg, var(--vd-red), var(--vd-red-400));
   border: 2px solid var(--vd-ink);
   border-radius: 999px;
}
.vd-drawer__grid::-webkit-scrollbar-thumb:hover {
   background: var(--vd-red);
}
.vd-drawer__section {
   min-width: 0;
   padding: clamp(18px, 2vw, 26px);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 18px;
   background: rgba(255, 255, 255, .04);
   overflow: visible;
}
.vd-drawer__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   margin-bottom: 16px;
   color: var(--vd-red-400);
   font-family: var(--vd-display);
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .16em;
   text-transform: uppercase;
}
.vd-drawer__groups {
   display: grid;
   gap: 20px;
}
.vd-drawer__groups--ads {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 18px;
}
.vd-drawer__group {
   min-width: 0;
}
.vd-drawer__group h4 {
   color: #fff;
   font-size: 15px;
   letter-spacing: .08em;
   text-transform: uppercase;
   margin-bottom: 12px;
   padding-bottom: 10px;
   border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.vd-drawer__links {
   display: grid;
   gap: 8px;
}
.vd-drawer__links a {
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 44px;
   padding: 8px 10px;
   border-radius: 12px;
   background: transparent;
   border: 1px solid transparent;
   color: rgba(255, 255, 255, .82);
   font-family: var(--vd-display);
   font-size: 13.5px;
   font-weight: 700;
   line-height: 1.25;
   transition: background .3s var(--vd-ease), border-color .3s var(--vd-ease), color .3s var(--vd-ease), transform .3s var(--vd-ease);
}
.vd-drawer__links a i {
   width: 28px;
   height: 28px;
   flex: 0 0 28px;
   display: grid;
   place-items: center;
   border-radius: 9px;
   background: rgba(218, 39, 40, .14);
   color: var(--vd-red-400);
   font-size: 12px;
   transition: background .3s var(--vd-ease), color .3s var(--vd-ease);
}
.vd-drawer__links a:hover {
   background: rgba(218, 39, 40, .16);
   border-color: rgba(218, 39, 40, .44);
   color: #fff;
   transform: translateX(5px);
}
.vd-drawer__links a:hover i { background: var(--vd-red); color: #fff; }
.vd-drawer__nav > li { border-bottom: 1px solid var(--vd-line-invert); }
.vd-drawer__nav > li > a,
.vd-drawer__nav .vd-acc__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 15px 0;
   background: none;
   border: 0;
   color: #fff;
   font-family: var(--vd-display);
   font-size: 15px;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
   cursor: pointer;
   text-align: left;
}
.vd-drawer__nav .vd-acc__head i { transition: transform .35s var(--vd-ease); font-size: 12px; color: var(--vd-red-400); }
.vd-drawer__nav .vd-acc.vd-open .vd-acc__head i { transform: rotate(180deg); }
.vd-acc__body { max-height: 0; overflow: hidden; transition: max-height .45s var(--vd-ease); }
.vd-acc.vd-open .vd-acc__body { max-height: 1400px; }
.vd-acc__body ul { padding: 4px 0 16px; }
.vd-acc__body a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 0 8px 4px;
   font-size: 14.5px;
   color: var(--vd-text-invert-soft);
}
.vd-acc__body a i { font-size: 11px; color: var(--vd-red); }
.vd-acc__body a:hover { color: #fff; }

.vd-scrim {
   position: fixed;
   inset: 0;
   background: rgba(10, 9, 10, .6);
   backdrop-filter: blur(3px);
   opacity: 0;
   visibility: hidden;
   transition: all .45s var(--vd-ease);
   z-index: 900;
}
.vd-scrim.vd-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   HERO — showcase slider
   -------------------------------------------------------------------------- */
.vd-hero {
   position: relative;
   background: var(--vd-ink);
   color: #fff;
   overflow: hidden;
   isolation: isolate;
}
.vd-hero__bg-grid {
   position: absolute;
   inset: 0;
   z-index: 0;
   background-image:
      linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
   background-size: 74px 74px;
   mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
   -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
}
.vd-hero__glow {
   position: absolute;
   width: 780px;
   height: 780px;
   border-radius: 50%;
   filter: blur(90px);
   opacity: .5;
   z-index: 0;
   pointer-events: none;
}
.vd-hero__glow--a { background: radial-gradient(circle, rgba(218, 39, 40, .55), transparent 62%); top: -260px; right: -180px; animation: vdFloatA 16s ease-in-out infinite; }
.vd-hero__glow--b { background: radial-gradient(circle, rgba(255, 67, 64, .28), transparent 65%); bottom: -320px; left: -220px; animation: vdFloatB 20s ease-in-out infinite; }
@keyframes vdFloatA { 50% { transform: translate3d(-50px, 60px, 0) scale(1.1); } }
@keyframes vdFloatB { 50% { transform: translate3d(70px, -40px, 0) scale(1.08); } }

.vd-hero__slider { position: relative; z-index: 2; }
.vd-hero .swiper-slide { overflow: hidden; }
.vd-hero__slide {
   position: relative;
   overflow: hidden;
   min-height: clamp(600px, 82vh, 870px);
   display: flex;
   align-items: center;
   padding: 96px 210px 100px 210px;
}
.vd-hero__inner {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 40px;
   align-items: center;
   width: 100%;
}

/* Giant watermark word */
.vd-hero__word {
   position: absolute;
   right: -2%;
   top: 40%;
   transform: translateY(-50%);
   font-family: var(--vd-display);
   font-weight: 900;
   font-stretch: 125%;
   font-size: clamp(120px, 21vw, 330px);
   letter-spacing: -.04em;
   line-height: 1;
   white-space: nowrap;
   color: transparent;
   -webkit-text-stroke: 1.5px rgba(255, 255, 255, .055);
   z-index: 0;
   pointer-events: none;
   user-select: none;
}

/* Hero content */
.vd-hero__content { position: relative; z-index: 3; max-width: min(640px, 100%); }
.vd-hero__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 7px 16px 7px 8px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .07);
   border: 1px solid var(--vd-line-invert);
   font-family: var(--vd-display);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: #fff;
   margin-bottom: 22px;
}
.vd-hero__eyebrow b {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--vd-red);
   padding: 4px 11px;
   border-radius: 999px;
   font-size: 11px;
}
.vd-hero__title {
   font-size: 70px;
   font-weight: 700;
   font-stretch: 88%;
   line-height: .96;
   letter-spacing: -.035em;
   text-transform: uppercase;
   color: #fff;
   margin-bottom: 20px;
}
.vd-hero__title em {
   font-style: normal;
   display: inline-block;
   background: linear-gradient(96deg, var(--vd-red-400), var(--vd-red) 55%, #ff8a80);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}
.vd-hero__title .vd-outline {
   color: transparent;
   -webkit-text-stroke: 1.6px rgba(255, 255, 255, .55);
}
.vd-hero__text {
   font-size: 17px;
   line-height: 1.75;
   color: var(--vd-text-invert-soft);
   max-width: min(52ch, 100%);
   margin-bottom: 30px;
}
.vd-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 40px; }

.vd-hero__stats { display: flex; flex-wrap: wrap; gap: 34px; }
.vd-hero__stats li strong {
   display: block;
   font-family: var(--vd-display);
   font-size: 32px;
   font-weight: 900;
   line-height: 1;
   color: #fff;
}
.vd-hero__stats li strong span { color: var(--vd-red-400); }
.vd-hero__stats li small {
   font-size: 12px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .55);
}

/* Hero visual */
.vd-hero__visual { position: relative; z-index: 2; }
.vd-hero__frame {
   position: relative;
   border-radius: 28px;
   overflow: hidden;
   aspect-ratio: 4 / 4.4;
   box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9);
   border: 1px solid rgba(255, 255, 255, .12);
}
.vd-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.vd-hero__frame::after {
   content: '';
   position: absolute;
   inset: 0;
   background:
      linear-gradient(to top, rgba(16, 15, 16, .8), transparent 52%),
      linear-gradient(115deg, rgba(218, 39, 40, .28), transparent 55%);
}
.vd-hero__ring {
   position: absolute;
   inset: -34px;
   border-radius: 50%;
   border: 1px dashed rgba(255, 255, 255, .16);
   z-index: -1;
   animation: vdSpin 34s linear infinite;
}
@keyframes vdSpin { to { transform: rotate(360deg); } }

.vd-hero__chip {
   position: absolute;
   display: flex;
   align-items: center;
   gap: 11px;
   padding: 12px 18px;
   border-radius: 16px;
   background: rgba(255, 255, 255, .1);
   backdrop-filter: blur(14px);
   border: 1px solid rgba(255, 255, 255, .18);
   box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .8);
   color: #fff;
   z-index: 4;
}
.vd-hero__chip i {
   width: 38px;
   height: 38px;
   flex: 0 0 38px;
   display: grid;
   place-items: center;
   border-radius: 11px;
   background: var(--vd-red);
   font-size: 15px;
}
.vd-hero__chip strong { display: block; font-family: var(--vd-display); font-size: 15px; line-height: 1.15; }
.vd-hero__chip small { font-size: 11.5px; color: rgba(255, 255, 255, .6); letter-spacing: .08em; text-transform: uppercase; }
.vd-hero__chip--a { top: 12%; left: -46px; animation: vdBob 5.5s ease-in-out infinite; }
.vd-hero__chip--b { bottom: 16%; right: -34px; animation: vdBob 6.5s ease-in-out infinite .8s; }
@keyframes vdBob { 50% { transform: translateY(-14px); } }

.vd-hero__badge {
   position: absolute;
   bottom: -22px;
   left: 26px;
   z-index: 4;
   width: 104px;
   height: 104px;
   border-radius: 50%;
   background: var(--vd-red);
   display: grid;
   place-items: center;
   text-align: center;
   font-family: var(--vd-display);
   line-height: 1;
   box-shadow: 0 24px 48px -18px rgba(218, 39, 40, .85);
}
.vd-hero__badge b { font-size: 30px; font-weight: 900; display: block; }
.vd-hero__badge small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; display: block; margin-top: 5px; opacity: .9; }

/* Slide-in animations driven by swiper active class */
.vd-hero__slide [data-vd-anim] {
   opacity: 0;
   transform: translateY(46px);
   transition: opacity .9s var(--vd-ease), transform .9s var(--vd-ease);
}
.vd-hero__slide [data-vd-anim="right"] { transform: translateX(60px); }
.vd-hero__slide [data-vd-anim="zoom"] { transform: scale(.86); }
.swiper-slide-active .vd-hero__slide [data-vd-anim] { opacity: 1; transform: none; }
.swiper-slide-active .vd-hero__slide [data-vd-anim] { transition-delay: var(--vd-d, 0ms); }

/* Hero controls */
.vd-hero__controls {
   position: absolute;
   z-index: 6;
   /* +72px keeps the arrows clear of the fixed WhatsApp / back-to-top column */
   right: calc(max(24px, (100vw - 1250px) / 2) + 72px);
   bottom: 52px;
   display: flex;
   align-items: center;
   gap: 14px;
}
.vd-hero__nav {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   border: 1px solid rgba(255, 255, 255, .22);
   background: rgba(255, 255, 255, .06);
   backdrop-filter: blur(8px);
   color: #fff;
   cursor: pointer;
   transition: all .35s var(--vd-ease);
}
.vd-hero__nav:hover { background: var(--vd-red); border-color: var(--vd-red); transform: scale(1.06); }
.vd-hero__count { font-family: var(--vd-display); font-size: 14px; letter-spacing: .12em; color: rgba(255, 255, 255, .7); }
.vd-hero__count b { color: #fff; font-size: 20px; }

/* Thumb pagination */
.vd-hero__thumbs {
   position: absolute;
   z-index: 6;
   left: max(24px, calc((100vw - 1250px) / 2));
   bottom: 52px;
   display: flex;
   gap: 12px;
}
.vd-hero__thumb {
   position: relative;
   width: 96px;
   height: 62px;
   border-radius: 12px;
   overflow: hidden;
   cursor: pointer;
   border: 1.5px solid rgba(255, 255, 255, .18);
   opacity: .55;
   transition: all .4s var(--vd-ease);
   background: none;
   padding: 0;
}
.vd-hero__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vd-hero__thumb span {
   position: absolute;
   inset: auto 0 0 0;
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #fff;
   padding: 4px 6px;
   background: linear-gradient(transparent, rgba(0, 0, 0, .85));
}
.vd-hero__thumb:hover { opacity: .85; }
.vd-hero__thumb.vd-active { opacity: 1; border-color: var(--vd-red); transform: translateY(-4px); }
.vd-hero__thumb.vd-active::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   height: 3px;
   background: var(--vd-red);
   width: 100%;
   transform-origin: left;
   animation: vdBarFill var(--vd-autoplay, 6500ms) linear forwards;
}
@keyframes vdBarFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hero ticker */
.vd-ticker {
   position: relative;
   z-index: 5;
   border-top: 1px solid var(--vd-line-invert);
   border-bottom: 1px solid var(--vd-line-invert);
   background:#000;
   overflow: hidden;
   padding: 16px 0;
   display: flex;
}

.vd-ticker__track {
   display: flex;
   gap: 46px;
   flex: 0 0 auto;
   padding-right: 46px;
   animation: vdMarquee 32s linear infinite;
}
.vd-ticker:hover .vd-ticker__track { animation-play-state: paused; }
.vd-ticker__track span {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   font-family: var(--vd-display);
   font-size: 18px;
   font-weight: 800;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: #fff;
   white-space: nowrap;
}
.vd-ticker__track span i { color: var(--vd-red); font-size: 11px; }
@keyframes vdMarquee { to { transform: translateX(-100%); } }

/* --------------------------------------------------------------------------
   ABOUT — "We are VD Media Moguls"
   -------------------------------------------------------------------------- */
.vd-about { position: relative; overflow: hidden; }
.vd-about__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; }

.vd-about__media { position: relative; }
.vd-about__media-main {
   border-radius: var(--vd-radius-lg);
   overflow: hidden;
   box-shadow: var(--vd-shadow-lg);
   aspect-ratio: 4/3.4;
}
.vd-about__media-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--vd-ease); }
.vd-about__media:hover .vd-about__media-main img { transform: scale(1.06); }
.vd-about__media-sub {
   position: absolute;
   right: -26px;
   bottom: -34px;
   width: 46%;
   border-radius: 20px;
   overflow: hidden;
   border: 6px solid #fff;
   box-shadow: var(--vd-shadow);
   aspect-ratio: 4/3;
}
.vd-about__media-sub img { width: 100%; height: 100%; object-fit: cover; }
.vd-about__exp {
   position: absolute;
   top: -18px;
   left: -18px;
   background: var(--vd-red);
   color: #fff;
   border-radius: 18px;
   padding: 18px 22px;
   font-family: var(--vd-display);
   box-shadow: 0 24px 44px -20px rgba(218, 39, 40, .8);
   z-index: 3;
}
.vd-about__exp b { font-size: 40px; font-weight: 900; line-height: 1; display: block; }
.vd-about__exp small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.vd-about__dots {
   position: absolute;
   left: -40px;
   bottom: 60px;
   width: 120px;
   height: 120px;
   z-index: -1;
   background-image: radial-gradient(var(--vd-red) 1.6px, transparent 1.6px);
   background-size: 14px 14px;
   opacity: .35;
}

.vd-about__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.vd-about__pills span {
   font-family: var(--vd-display);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   padding: 7px 15px;
   border-radius: 999px;
   background: var(--vd-paper);
   color: var(--vd-text);
   border: 1px solid var(--vd-line);
}
.vd-about__pills span:nth-child(odd) { background: rgba(218, 39, 40, .08); border-color: rgba(218, 39, 40, .2); color: var(--vd-red); }

/* Animated info cards */
.vd-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.vd-card {
   position: relative;
   padding: 26px 24px;
   border-radius: 20px;
   background: #fff;
   border: 1px solid var(--vd-line);
   overflow: hidden;
   isolation: isolate;
   transition: transform .5s var(--vd-ease), box-shadow .5s var(--vd-ease), border-color .5s var(--vd-ease);
}
.vd-card::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(150deg, var(--vd-ink), #2a1d1e);
   transform: translateY(100%);
   transition: transform .55s var(--vd-ease);
}
.vd-card:hover { transform: translateY(-8px); box-shadow: var(--vd-shadow); border-color: transparent; }
.vd-card:hover::before { transform: translateY(0); }
.vd-card:hover h5, .vd-card:hover p { color: #fff; }
.vd-card:hover p { opacity: .72; }
.vd-card__icon {
   width: 54px;
   height: 54px;
   display: grid;
   place-items: center;
   border-radius: 16px;
   background: rgba(218, 39, 40, .1);
   color: var(--vd-red);
   font-size: 21px;
   margin-bottom: 18px;
   transition: all .5s var(--vd-ease);
}
.vd-card:hover .vd-card__icon { background: var(--vd-red); color: #fff; transform: rotate(-8deg) scale(1.05); }
.vd-card h5 { font-size: 17px; margin-bottom: 8px; transition: color .5s var(--vd-ease); }
.vd-card p { font-size: 14.5px; color: var(--vd-text-soft); margin: 0; transition: color .5s var(--vd-ease), opacity .5s var(--vd-ease); }
.vd-card__num {
   position: absolute;
   top: 14px;
   right: 18px;
   font-family: var(--vd-display);
   font-size: 44px;
   font-weight: 900;
   color:#100f1057;
   line-height: 1;
   transition: color .5s var(--vd-ease);
}
.vd-card:hover .vd-card__num { color: #fff; }

/* Counters strip */
.vd-counters {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   /* margin-top: 20px; */
   padding: 34px 30px;
   /* background: var(--vd-ink); */
   color: #fff;
   position: relative;
   overflow: hidden;
}
.vd-counters::after {
   content: '';
   position: absolute;
   right: -120px;
   top: -120px;
   width: 320px;
   height: 320px;
   filter: blur(40px);
}
.vd-counter { position: relative; z-index: 1; text-align: center; }
.vd-counter + .vd-counter { border-left: 1px solid var(--vd-line-invert); }
.vd-counter b {
   font-family: var(--vd-display);
   font-size: clamp(30px, 3.4vw, 46px);
   font-weight: 900;
   display: block;
   line-height: 1;
}
.vd-counter b span { color: var(--vd-red-400); }
.vd-counter small {
   display: block;
   margin-top: 9px;
   font-size: 12px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .58);
}

/* --------------------------------------------------------------------------
   VISION & MISSION
   -------------------------------------------------------------------------- */
.vd-vm { position: relative; background: var(--vd-paper); overflow: hidden; }
.vd-vm::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(16, 15, 16, .06) 1.4px, transparent 1.4px);
   background-size: 26px 26px;
   opacity: .8;
}
.vd-vm__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.vd-vm__card {
   position: relative;
   border-radius: var(--vd-radius-lg);
   background: #fff;
   overflow: hidden;
   box-shadow: 0 26px 60px -40px rgba(16, 15, 16, .4);
   transform-style: preserve-3d;
   transition: transform .45s var(--vd-ease), box-shadow .45s var(--vd-ease);
   will-change: transform;
}
.vd-vm__card:hover { box-shadow: 0 44px 84px -40px rgba(16, 15, 16, .55); }
.vd-vm__card::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 1.5px;
   background: linear-gradient(140deg, rgba(218, 39, 40, .8), transparent 45%, rgba(218, 39, 40, .35));
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   opacity: 0;
   transition: opacity .45s var(--vd-ease);
   pointer-events: none;
   z-index: 3;
}
.vd-vm__card:hover::before { opacity: 1; }

.vd-vm__media { position: relative; height: 250px; overflow: hidden; }
.vd-vm__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--vd-ease); }
.vd-vm__card:hover .vd-vm__media img { transform: scale(1.08); }
.vd-vm__media::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(16, 15, 16, .92) 4%, rgba(16, 15, 16, .25) 55%, transparent);
}
.vd-vm__tag {
   position: absolute;
   top: 20px;
   left: 20px;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 14px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .16);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, .28);
   font-family: var(--vd-display);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: #fff;
}
.vd-vm__icon {
   position: absolute;
   left: 30px;
   top: 211px; /* media height (250) minus half the icon */
   z-index: 3;
   width: 78px;
   height: 78px;
   display: grid;
   place-items: center;
   border-radius: 22px;
   background: var(--vd-red);
   color: #fff;
   font-size: 28px;
   box-shadow: 0 24px 44px -20px rgba(218, 39, 40, .9);
   transition: transform .5s var(--vd-ease);
}
.vd-vm__card:hover .vd-vm__icon { transform: translateY(-6px) rotate(-8deg); }
.vd-vm__body { padding: 56px 30px 34px; }
.vd-vm__body h3 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 12px; }
.vd-vm__body > p { color: var(--vd-text-soft); font-size: 15.5px; }

.vd-vm__list { margin-top: 22px; display: grid; gap: 14px; }
.vd-vm__list li {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   padding: 15px 16px;
   border-radius: 16px;
   background: var(--vd-paper);
   transition: background .35s var(--vd-ease), transform .35s var(--vd-ease);
}
.vd-vm__list li:hover { background: rgba(218, 39, 40, .07); transform: translateX(5px); }
.vd-vm__list i {
   width: 34px;
   height: 34px;
   flex: 0 0 34px;
   display: grid;
   place-items: center;
   border-radius: 11px;
   background: #fff;
   color: var(--vd-red);
   font-size: 13px;
   box-shadow: 0 8px 18px -12px rgba(16, 15, 16, .6);
}
.vd-vm__list strong { display: block; font-family: var(--vd-display); font-size: 15px; margin-bottom: 3px; }
.vd-vm__list p { font-size: 14px; color: var(--vd-text-soft); margin: 0; }

/* Values strip */
.vd-values {
   position: relative;
   margin-top: 26px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
}
.vd-value {
   background: #fff;
   border-radius: 18px;
   padding: 24px 22px;
   border: 1px solid var(--vd-line);
   text-align: center;
   transition: all .45s var(--vd-ease);
}
.vd-value i {
   width: 52px;
   height: 52px;
   margin: 0 auto 14px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: rgba(218, 39, 40, .1);
   color: var(--vd-red);
   font-size: 19px;
   transition: all .45s var(--vd-ease);
}
.vd-value h6 { font-size: 15px; margin-bottom: 6px; }
.vd-value p { font-size: 13.5px; color: var(--vd-text-soft); margin: 0; }
.vd-value:hover { transform: translateY(-7px); border-color: transparent; box-shadow: var(--vd-shadow); }
.vd-value:hover i { background: var(--vd-red); color: #fff; }

/* --------------------------------------------------------------------------
   SERVICES — 3D coverflow carousel
   -------------------------------------------------------------------------- */
.vd-services { position: relative; overflow: hidden; }
.vd-services::before {
   content: '';
   position: absolute;
   inset: 0;
   /* background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(218, 39, 40, .22), transparent 70%),
      radial-gradient(ellipse 50% 40% at 10% 100%, rgba(218, 39, 40, .12), transparent 70%); */
}
.vd-services__head {
   position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 30px;
   margin-bottom: 54px;
   flex-wrap: wrap;
}
.vd-services__head .vd-lead { margin: 0; }
.vd-services__nav { display: flex; gap: 10px; }

.vd-svc-carousel { position: relative; padding: 20px 0 12px; }
.vd-svc-carousel .swiper { overflow: visible; padding-bottom: 8px; }
.vd-svc-carousel .swiper-wrapper { align-items: stretch; }
.vd-svc-carousel .swiper-slide { height: auto; display: flex; }
.vd-svc { display: flex; flex-direction: column; width: 100%; }
.vd-svc__body { display: flex; flex-direction: column; flex: 1; }
.vd-svc__go { margin-top: auto; }
.vd-svc-carousel .swiper-slide {
   width: 330px;
   transition: opacity .5s var(--vd-ease);
   opacity: .38;
}
.vd-svc-carousel .swiper-slide-active,
.vd-svc-carousel .swiper-slide-next,
.vd-svc-carousel .swiper-slide-prev { opacity: 1; }

.vd-svc {
   position: relative;
   display: block;
   border-radius: 22px;
   overflow: hidden;
   background: var(--vd-ink-2);
   border: 1px solid var(--vd-line-invert);
   transition: border-color .45s var(--vd-ease), transform .45s var(--vd-ease);
   height: 100%;
}
.vd-svc:hover { border-color: rgba(218, 39, 40, .55); }
.vd-svc__thumb { position: relative; height: 214px; overflow: hidden; }
.vd-svc__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--vd-ease); filter: saturate(.9); }
.vd-svc:hover .vd-svc__thumb img { transform: scale(1.09); filter: saturate(1.1); }
.vd-svc__thumb::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, var(--vd-ink-2) 2%, rgba(16, 15, 16, .35) 50%, transparent);
}
.vd-svc__no {
   position: absolute;
   top: 16px;
   right: 18px;
   z-index: 2;
   font-family: var(--vd-display);
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .1em;
   color: #fff;
   background: rgba(16, 15, 16, .55);
   backdrop-filter: blur(6px);
   border: 1px solid rgba(255, 255, 255, .18);
   padding: 5px 11px;
   border-radius: 8px;
}
.vd-svc__icon {
   position: absolute;
   left: 24px;
   bottom: -1px;
   z-index: 3;
   width: 50px;
   height: 50px;
   display: grid;
   place-items: center;
   border-radius: 17px;
   background: var(--vd-red);
   color: #fff;
   font-size: 21px;
   box-shadow: 0 20px 36px -18px rgba(218, 39, 40, .95);
   transition: transform .5s var(--vd-ease);
}
.vd-svc:hover .vd-svc__icon { transform: rotate(-10deg) scale(1.06); }
.vd-svc__body { padding: 42px 24px 26px; }
.vd-svc__body h4 { font-size: 19px; color: #fff; margin-bottom: 10px; }
.vd-svc__body p { font-size: 14.5px; color: var(--vd-text-invert-soft); margin-bottom: 18px; min-height: 66px; }
.vd-svc__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.vd-svc__meta span {
   font-size: 11px;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .6);
   border: 1px solid var(--vd-line-invert);
   border-radius: 999px;
   padding: 4px 10px;
}
.vd-svc__go {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   font-family: var(--vd-display);
   font-size: 12.5px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #fff;
}
.vd-svc__go i {
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   border: 1px solid var(--vd-line-invert);
   font-size: 11px;
   transition: all .4s var(--vd-ease);
}
.vd-svc:hover .vd-svc__go i { background: var(--vd-red); border-color: var(--vd-red); transform: rotate(-45deg); }

.vd-svc-carousel .swiper-pagination {
   position: static;
   margin-top: 34px;
   display: flex;
   justify-content: center;
   gap: 8px;
}
.vd-svc-carousel .swiper-pagination-bullet {
   width: 26px;
   height: 4px;
   border-radius: 4px;
   background: rgba(255, 255, 255, .22);
   opacity: 1;
   margin: 0 !important;
   transition: all .35s var(--vd-ease);
}
.vd-svc-carousel .swiper-pagination-bullet-active { background: var(--vd-red); width: 44px; }

/* --------------------------------------------------------------------------
   WHY CHOOSE US
   -------------------------------------------------------------------------- */
.vd-why { position: relative; overflow: hidden; background: #fff; }
.vd-why__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.vd-why__bars { display: grid; gap: 22px; margin: 30px 0 34px; }
.vd-bar__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.vd-bar__top strong { font-family: var(--vd-display); font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; }
.vd-bar__top span { font-family: var(--vd-display); font-size: 14px; color: var(--vd-red); font-weight: 800; }
.vd-bar__track { height: 7px; border-radius: 7px; background: var(--vd-paper-2); overflow: hidden; }
.vd-bar__fill {
   display: block;
   height: 100%;
   width: 0;
   border-radius: 7px;
   background: linear-gradient(90deg, var(--vd-red), var(--vd-red-400));
   transition: width 1.4s var(--vd-ease);
}
.vd-why__media { position: relative; }
.vd-why__media img { border-radius: var(--vd-radius-lg); box-shadow: var(--vd-shadow-lg); width: 100%; }
.vd-why__float {
   position: absolute;
   left: -24px;
   bottom: 32px;
   background: #fff;
   border-radius: 18px;
   padding: 18px 22px;
   box-shadow: var(--vd-shadow);
   display: flex;
   align-items: center;
   gap: 14px;
   animation: vdBob 6s ease-in-out infinite;
}
.vd-why__float i {
   width: 46px;
   height: 46px;
   display: grid;
   place-items: center;
   border-radius: 14px;
   background: var(--vd-red);
   color: #fff;
   font-size: 18px;
}
.vd-why__float b { display: block; font-family: var(--vd-display); font-size: 20px; line-height: 1; }
.vd-why__float small { font-size: 12px; color: var(--vd-text-soft); }
.vd-why__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 30px !important; }
.vd-why__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.vd-why__list i { color: var(--vd-red); font-size: 13px; }

/* --------------------------------------------------------------------------
   PROCESS
   -------------------------------------------------------------------------- */
.vd-process { background: var(--vd-paper); }
.vd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.vd-steps::before {
   content: '';
   position: absolute;
   top: 46px;
   left: 8%;
   right: 8%;
   height: 2px;
   background: repeating-linear-gradient(90deg, var(--vd-line) 0 10px, transparent 10px 20px);
}
.vd-step { position: relative; text-align: center; }
.vd-step__no {
   position: relative;
   width: 92px;
   height: 92px;
   margin: 0 auto 22px;
   border-radius: 50%;
   background: #fff;
   border: 1.5px solid var(--vd-line);
   display: grid;
   place-items: center;
   font-family: var(--vd-display);
   font-size: 26px;
   font-weight: 900;
   color: var(--vd-red);
   transition: all .45s var(--vd-ease);
   z-index: 1;
}
.vd-step:hover .vd-step__no { background: var(--vd-red); color: #fff; border-color: var(--vd-red); transform: translateY(-6px); box-shadow: 0 22px 40px -20px rgba(218, 39, 40, .9); }
.vd-step__no i {
   position: absolute;
   right: -6px;
   bottom: -6px;
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: var(--vd-ink);
   color: #fff;
   font-size: 13px;
}
.vd-step h5 { font-size: 17px; margin-bottom: 8px; }
.vd-step p { font-size: 14.5px; color: var(--vd-text-soft); margin: 0; }

/* --------------------------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------------------------- */
.vd-testi { position: relative; background: #fff; overflow: hidden; }
.vd-testi__quote {
   position: absolute;
   top: 60px;
   right: 6%;
   font-size: 260px;
   line-height: 1;
   font-family: var(--vd-display);
   font-weight: 900;
   color: rgba(218, 39, 40, .05);
   pointer-events: none;
}
.vd-testi .swiper { padding-bottom: 8px; }
.vd-testi .swiper-wrapper { align-items: stretch; }
.vd-testi .swiper-slide { height: auto; }
.vd-testi__card { display: flex; flex-direction: column; }
.vd-testi__who { margin-top: auto; }
.vd-testi__card {
   background: #fff;
   border: 1px solid var(--vd-line);
   border-radius: 22px;
   padding: 30px 28px;
   height: 100%;
   transition: all .45s var(--vd-ease);
   position: relative;
   overflow: hidden;
}
.vd-testi__card::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 4px;
   background: var(--vd-red);
   transform: scaleY(0);
   transform-origin: top;
   transition: transform .5s var(--vd-ease);
}
.vd-testi__card:hover { box-shadow: var(--vd-shadow); transform: translateY(-6px); border-color: transparent; }
.vd-testi__card:hover::after { transform: scaleY(1); }
.vd-testi__stars { color: #f5a623; font-size: 13px; margin-bottom: 14px; display: flex; gap: 3px; }
.vd-testi__card p { font-size: 15.5px; color: var(--vd-text-soft); margin-bottom: 22px; }
.vd-testi__who { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--vd-line); }
.vd-testi__who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(218, 39, 40, .3); }
.vd-testi__who h6 { font-size: 15.5px; margin: 0; }
.vd-testi__who small { font-size: 12.5px; color: var(--vd-text-soft); }
.vd-testi__mark { margin-left: auto; font-size: 26px; color: rgba(218, 39, 40, .18); }

/* Client marquee */
.vd-clients { background: var(--vd-ink); padding: 66px 0; overflow: hidden; }
.vd-clients__head { text-align: center; margin-bottom: 34px; }
.vd-clients__head h3 { font-size: clamp(22px, 2.4vw, 32px); color: #fff; margin: 0; }
.vd-clients__head p { color: var(--vd-text-invert-soft); margin: 8px 0 0; font-size: 15px; }
.vd-clients__wall {
   background: #fff;
   border-radius: var(--vd-radius-lg);
   padding: 26px 30px;
   margin-bottom: 44px;
   box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.vd-clients__wall img { width: 100%; height: auto; display: block; }
.vd-clients__strip { display: flex; overflow: hidden;
background: #000;
padding: 30px 0px;}
.vd-clients__track { display: flex; align-items: center; gap: 60px; flex: 0 0 auto;  animation: vdMarquee 34s linear infinite; }
.vd-clients:hover .vd-clients__track { animation-play-state: paused; }
.vd-clients__track img {
   height: 118px;
   width: auto;
   background: #fff;
   padding: 14px 26px;
   border-radius: 16px;
   opacity: .92;
   transition: opacity .35s var(--vd-ease);
}
.vd-clients__track img:hover { opacity: 1; }
.vd-clients__logo {
   display: grid;
   place-items: center;
   min-width: 170px;
   height: 74px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid var(--vd-line-invert);
   font-family: var(--vd-display);
   font-weight: 800;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #fff;
   font-size: 15px;
   transition: all .4s var(--vd-ease);
}
.vd-clients__logo:hover { color: #fff; border-color: rgba(218, 39, 40, .6); background: rgba(218, 39, 40, .12); }

/* --------------------------------------------------------------------------
   ABOUT PAGE
   -------------------------------------------------------------------------- */
.vd-about-hero {
   position: relative;
   min-height: clamp(640px, 78vh, 860px);
   display: flex;
   align-items: center;
   overflow: hidden;
   background: var(--vd-ink);
   color: #fff;
   isolation: isolate;
}
.vd-about-hero__bg {
   position: absolute;
   inset: 0;
   z-index: -2;
   background:
      linear-gradient(90deg, rgba(16, 15, 16, .96) 0%, rgba(16, 15, 16, .82) 46%, rgba(16, 15, 16, .5) 100%),
      linear-gradient(140deg, rgba(218, 39, 40, .34), transparent 58%),
      url('../images/home/servise/oohmedia.jpg') center / cover no-repeat;
   transform: scale(1.03);
}
.vd-about-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background-image:
      linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
   background-size: 74px 74px;
   mask-image: radial-gradient(ellipse 88% 76% at 48% 45%, #000 28%, transparent 80%);
   -webkit-mask-image: radial-gradient(ellipse 88% 76% at 48% 45%, #000 28%, transparent 80%);
}
.vd-about-hero__inner {
   display: grid;
   grid-template-columns: minmax(0, .98fr) minmax(360px, .72fr);
   gap: clamp(34px, 5vw, 78px);
   align-items: center;
   padding: 92px 20px 78px;
}
.vd-about-hero__content { max-width: 760px; }
.vd-about-hero__content h1 {
   color: #fff;
   font-size: clamp(42px, 6vw, 86px);
   line-height: .95;
   letter-spacing: -.035em;
   text-transform: uppercase;
   margin-bottom: 24px;
}
.vd-about-hero__content p {
   max-width: 62ch;
   color: var(--vd-text-invert-soft);
   font-size: 18px;
   line-height: 1.78;
}
.vd-about-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.vd-about-hero__visual {
   position: relative;
   border-radius: 28px;
   overflow: hidden;
   min-height: 520px;
   box-shadow: 0 46px 90px -42px rgba(0, 0, 0, .9);
   border: 1px solid rgba(255, 255, 255, .14);
   transform-style: preserve-3d;
}
.vd-about-hero__visual img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; filter: saturate(.95); }
.vd-about-hero__visual::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(16, 15, 16, .76), transparent 58%);
}
.vd-about-hero__badge {
   position: absolute;
   left: 24px;
   bottom: 24px;
   z-index: 2;
   width: 140px;
   height: 140px;
   display: grid;
   place-items: center;
   text-align: center;
   border-radius: 50%;
   background: var(--vd-red);
   color: #fff;
   font-family: var(--vd-display);
   box-shadow: 0 24px 52px -22px rgba(218, 39, 40, .9);
}
.vd-about-hero__badge strong { display: block; font-size: 44px; line-height: .9; }
.vd-about-hero__badge span {
   display: block;
   max-width: 88px;
   margin-top: 6px;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .12em;
   text-transform: uppercase;
}

.vd-about-metrics { position: relative; z-index: 2; margin-top: -52px; }
.vd-about-metrics__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   overflow: hidden;
   border-radius: 22px;
   box-shadow: var(--vd-shadow-lg);
   background: var(--vd-red);
}
.vd-about-metric { padding: 30px 20px; text-align: center; background: #fff; }
.vd-about-metric strong {
   display: block;
   color: var(--vd-ink);
   font-family: var(--vd-display);
   font-size: clamp(30px, 3.2vw, 46px);
   font-weight: 900;
   line-height: 1;
}
.vd-about-metric strong span { color: var(--vd-red); }
.vd-about-metric small {
   display: block;
   margin-top: 10px;
   color: var(--vd-text-soft);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
}

.vd-about-story { background: #fff; }
.vd-about-story__grid {
   display: grid;
   grid-template-columns: .88fr 1.12fr;
   gap: clamp(34px, 5vw, 72px);
   align-items: center;
}
.vd-about-story__media {
   position: relative;
   overflow: hidden;
   border-radius: 26px;
   min-height: 520px;
   box-shadow: var(--vd-shadow-lg);
}
.vd-about-story__media img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.vd-about-story__media::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(218, 39, 40, .22), transparent 62%);
}
.vd-about-story__list { display: grid; gap: 14px; margin-top: 28px; }
.vd-about-story__list > div {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   padding: 18px 18px;
   border-radius: 16px;
   background: var(--vd-paper);
   transition: transform .35s var(--vd-ease), background .35s var(--vd-ease);
}
.vd-about-story__list > div:hover { background: rgba(218, 39, 40, .08); transform: translateX(6px); }
.vd-about-story__list i {
   width: 42px;
   height: 42px;
   flex: 0 0 42px;
   display: grid;
   place-items: center;
   border-radius: 13px;
   background: var(--vd-red);
   color: #fff;
}
.vd-about-story__list strong { display: block; font-family: var(--vd-display); font-size: 16px; }
.vd-about-story__list small {
   display: block;
   color: var(--vd-text-soft);
   font-size: 14px;
   line-height: 1.55;
   margin-top: 3px;
}

.vd-about-flip {
   position: relative;
   overflow: hidden;
   background:
      radial-gradient(ellipse 55% 50% at 85% 16%, rgba(218, 39, 40, .16), transparent 70%),
      var(--vd-paper);
}
.vd-about-flip__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.vd-flip-card { min-height: 430px; perspective: 1200px; }
.vd-flip-card__inner {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: inherit;
   transform-style: preserve-3d;
   transition: transform .75s var(--vd-ease);
}
.vd-flip-card:hover .vd-flip-card__inner { transform: rotateY(180deg); }
.vd-flip-card__face {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: clamp(28px, 4vw, 48px);
   border-radius: 24px;
   overflow: hidden;
   backface-visibility: hidden;
   box-shadow: var(--vd-shadow-lg);
}
.vd-flip-card__front {
   background:
      linear-gradient(135deg, rgba(16, 15, 16, .82), rgba(218, 39, 40, .74)),
      url('../images/home/vision-vd.webp') center / cover;
   color: #fff;
}
.vd-flip-card:nth-child(2) .vd-flip-card__front {
   background:
      linear-gradient(135deg, rgba(16, 15, 16, .82), rgba(218, 39, 40, .74)),
      url('../images/home/ourmission.jpg') center / cover;
}
.vd-flip-card__back { background: var(--vd-ink); color: #fff; transform: rotateY(180deg); }
.vd-flip-card__face i {
   width: 62px;
   height: 62px;
   display: grid;
   place-items: center;
   border-radius: 18px;
   background: var(--vd-red);
   color: #fff;
   font-size: 24px;
   margin-bottom: 22px;
}
.vd-flip-card__face h3 { color: #fff; font-size: clamp(30px, 3vw, 48px); margin-bottom: 12px; }
.vd-flip-card__face p {
   max-width: 44ch;
   color: rgba(255, 255, 255, .78);
   font-size: 17px;
   line-height: 1.7;
}
.vd-flip-card__list {
   display: grid;
   gap: 10px;
   margin: 22px 0 0;
   padding: 0;
   list-style: none;
}
.vd-flip-card__list li {
   position: relative;
   padding-left: 24px;
   color: rgba(255, 255, 255, .86);
   font-size: 15px;
   line-height: 1.55;
}
.vd-flip-card__list li::before {
   content: '';
   position: absolute;
   left: 0;
   top: .65em;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--vd-red-400);
   box-shadow: 0 0 0 5px rgba(218, 39, 40, .16);
}

.vd-about-values { background: #fff; }
.vd-about-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.vd-about-cta { padding: 0 0 100px; background: #fff; }
.vd-about-cta__box {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   padding: clamp(34px, 5vw, 58px);
   border-radius: 28px;
   background:
      linear-gradient(115deg, rgba(16, 15, 16, .92) 0%, rgba(218, 39, 40, .88) 48%, rgba(16, 15, 16, .94) 100%),
      url('../images/home/contact_us.jpg') center / cover;
   color: #fff;
   overflow: hidden;
   box-shadow: 0 42px 90px -44px rgba(218, 39, 40, .9);
}
.vd-about-cta__box .vd-eyebrow {
   display: inline-flex;
   width: fit-content;
   margin-bottom: 16px;
   padding: 8px 14px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .26);
   background: rgba(255, 255, 255, .13);
   color: #fff;
   backdrop-filter: blur(10px);
}
.vd-about-cta__box .vd-eyebrow::before { display: none; }
.vd-about-cta__box .vd-eyebrow i { color: #fff; }
.vd-about-cta__box h2 { color: #fff; font-size: clamp(28px, 3.5vw, 48px); margin-bottom: 10px; }
.vd-about-cta__box p { max-width: 58ch; color: rgba(255, 255, 255, .78); margin: 0; }

/* --------------------------------------------------------------------------
   BLOG
   -------------------------------------------------------------------------- */
.vd-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.vd-post {
   display: block;
   border-radius: 22px;
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--vd-line);
   transition: all .5s var(--vd-ease);
   height: 100%;
}
.vd-post:hover { transform: translateY(-8px); box-shadow: var(--vd-shadow-lg); border-color: transparent; }
.vd-post__thumb { position: relative; height: 226px; overflow: hidden; }
.vd-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--vd-ease); }
.vd-post:hover .vd-post__thumb img { transform: scale(1.08); }
.vd-post__date {
   position: absolute;
   top: 16px;
   left: 16px;
   background: var(--vd-red);
   color: #fff;
   border-radius: 12px;
   padding: 9px 13px;
   text-align: center;
   font-family: var(--vd-display);
   line-height: 1;
}
.vd-post__date b { font-size: 19px; font-weight: 900; display: block; }
.vd-post__date small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.vd-post { display: flex; flex-direction: column; }
.vd-post__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.vd-post__body .vd-link { margin-top: auto; }
.vd-post__meta { display: flex; gap: 16px; font-size: 12.5px; color: var(--vd-text-soft); margin-bottom: 12px; }
.vd-post__meta i { color: var(--vd-red); margin-right: 6px; }
.vd-post__body h4 { font-size: 19px; margin-bottom: 14px; transition: color .35s var(--vd-ease); }
.vd-post:hover .vd-post__body h4 { color: var(--vd-red); }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.vd-cta { padding: 0 0 110px; background: #fff; }
.vd-cta__box {
   position: relative;
   border-radius: 30px;
   overflow: hidden;
   background: linear-gradient(115deg, var(--vd-red) 0%, var(--vd-red-600) 55%, #7a1213 100%);
   color: #fff;
   padding: 54px 50px;
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 34px;
   align-items: center;
   box-shadow: 0 40px 80px -40px rgba(218, 39, 40, .8);
}
.vd-cta__box::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, .14) 1.5px, transparent 1.5px);
   background-size: 22px 22px;
   opacity: .55;
}
.vd-cta__box::after {
   content: '';
   position: absolute;
   right: -80px;
   top: -110px;
   width: 340px;
   height: 340px;
   border-radius: 50%;
   border: 60px solid rgba(255, 255, 255, .08);
}
.vd-cta__box > * { position: relative; z-index: 1; }
.vd-cta__box h3 { color: #fff; font-size: clamp(26px, 3vw, 40px); margin-bottom: 10px; }
.vd-cta__box p { color: rgba(255, 255, 255, .82); margin: 0; max-width: min(46ch, 100%); }
.vd-cta__form { display: flex; gap: 10px; flex-wrap: wrap; }
.vd-cta__form input {
   flex: 1 1 220px;
   height: 58px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .3);
   background: rgba(255, 255, 255, .12);
   padding: 0 24px;
   color: #fff;
   outline: none;
   font-size: 15px;
   transition: background .3s var(--vd-ease);
}
.vd-cta__form input::placeholder { color: rgba(255, 255, 255, .7); }
.vd-cta__form input:focus { background: rgba(255, 255, 255, .2); }

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.vd-contact { position: relative; background: var(--vd-ink); overflow: hidden; }
.vd-contact::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 55% 50% at 85% 20%, rgba(218, 39, 40, .22), transparent 70%);
}
.vd-contact__grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.vd-contact__info { display: grid; gap: 14px; margin-top: 30px; }
.vd-contact__item {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   padding: 18px 20px;
   border-radius: 18px;
   background: rgba(255, 255, 255, .04);
   border: 1px solid var(--vd-line-invert);
   transition: all .4s var(--vd-ease);
}
.vd-contact__item:hover { background: rgba(218, 39, 40, .12); border-color: rgba(218, 39, 40, .4); transform: translateX(5px); }
.vd-contact__item i {
   width: 48px;
   height: 48px;
   flex: 0 0 48px;
   display: grid;
   place-items: center;
   border-radius: 14px;
   background: var(--vd-red);
   color: #fff;
   font-size: 17px;
}
.vd-contact__item small { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 4px; }
.vd-contact__item strong, .vd-contact__item p { font-family: var(--vd-display); font-size: 15.5px; color: #fff; margin: 0; font-weight: 700; }
.vd-contact__item p { font-family: var(--vd-body); font-weight: 400; font-size: 14.5px; color: var(--vd-text-invert-soft); }

.vd-form {
   background: #fff;
   border-radius: var(--vd-radius-lg);
   padding: 36px 34px;
   box-shadow: var(--vd-shadow-lg);
}
.vd-form h4 { font-size: 23px; margin-bottom: 6px; }
.vd-form > p { font-size: 14.5px; color: var(--vd-text-soft); margin-bottom: 24px; }
.vd-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vd-field { position: relative; margin-bottom: 14px; }
.vd-field input, .vd-field textarea, .vd-field select {
   width: 100%;
   height: 54px;
   border: 1.5px solid var(--vd-line);
   border-radius: 14px;
   padding: 0 18px 0 46px;
   font-size: 15px;
   font-family: var(--vd-body);
   color: var(--vd-text);
   background: var(--vd-paper);
   outline: none;
   transition: all .32s var(--vd-ease);
   appearance: none;
}
.vd-field textarea { height: 132px; padding: 16px 18px 16px 46px; resize: vertical; }
.vd-field > i {
   position: absolute;
   left: 17px;
   top: 19px;
   font-size: 14px;
   color: var(--vd-text-soft);
   transition: color .32s var(--vd-ease);
   pointer-events: none;
}
.vd-field input:focus, .vd-field textarea:focus, .vd-field select:focus {
   background: #fff;
   border-color: rgba(218, 39, 40, .5);
   box-shadow: 0 0 0 5px rgba(218, 39, 40, .08);
}
.vd-field:focus-within > i { color: var(--vd-red); }
.vd-field select { cursor: pointer; }
.vd-field__caret { position: absolute; right: 18px; top: 20px; font-size: 12px; color: var(--vd-text-soft); pointer-events: none; }
.vd-form .vd-btn { width: 100%; margin-top: 6px; }
.vd-form__note { font-size: 13px; color: var(--vd-text-soft); text-align: center; margin-top: 20px; }
.vd-form__alert {
   display: none;
   margin-bottom: 16px;
   padding: 12px 16px;
   border-radius: 12px;
   font-size: 14px;
   background: rgba(218, 39, 40, .1);
   color: var(--vd-red-600);
}
.vd-form__alert.vd-show { display: block; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.vd-footer { background: var(--vd-ink-2); color: var(--vd-text-invert-soft); padding: 84px 0 0; position: relative; overflow: hidden; }
.vd-footer::before {
   content: '';
   position: absolute;
   left: -180px;
   bottom: -220px;
   width: 520px;
   height: 520px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(218, 39, 40, .2), transparent 65%);
   filter: blur(60px);
}
.vd-footer__grid { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.vd-footer__logo img {
   height: 90px;
  
   
   border-radius: 14px;
   
}
.vd-footer p { font-size: 16px; color: #fff; }
.vd-footer h5 {
   color: #fff;
   font-size: 15px;
   letter-spacing: .1em;
   text-transform: uppercase;
   margin-bottom: 22px;
   position: relative;
   padding-bottom: 12px;
}
.vd-footer h5::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--vd-red); }
.vd-footer__links li { margin-bottom: 9px; }
.vd-footer__links a {
   font-size: 16px;
   color:#fff;
   display: inline-flex; align-items: center; gap: 8px; }
.vd-footer__links a::before { content: ''; width: 0; height: 1.5px; background: var(--vd-red); transition: width .3s var(--vd-ease); }
.vd-footer__links a:hover { color: #fff; }
.vd-footer__links a:hover::before { width: 12px; }
.vd-footer__contact li { display: flex; gap: 12px; margin-bottom: 14px; font-size: 15px; color:#fff; }
.vd-footer__contact i { color: var(--vd-red); margin-top: 5px; }
.vd-footer__contact a:hover { color: #fff; }
.vd-footer__bottom {
   position: relative;
   margin-top: 60px;
   border-top: 1px solid var(--vd-line-invert);
   padding: 24px 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
   font-size: 14px;
}
.vd-footer__bottom a { color: #fff; }
.vd-footer__legal { display: flex; gap: 20px; }
.vd-footer__legal a { color: #fff; font-size: 13.5px; }
.vd-footer__legal a:hover { color: var(--vd-red-400); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1599px) {
   .vd-header__actions .vd-call { display: none; }
   .vd-nav > li > a { padding: 12px 12px; font-size: 13.5px; }
}

@media (max-width: 1399px) {
   .vd-mega__grid { grid-template-columns: 1fr 1fr 1fr 280px; }
   .vd-search { max-width: 290px; }
   .vd-hero__chip--a { left: -14px; }
   .vd-hero__chip--b { right: -10px; }
}

@media (max-width: 1199px) {
   .vd-section { padding: 88px 0; }
   .vd-nav { display: none; }
   .vd-burger { display: grid; }
   .vd-search { max-width: 300px; }
   .vd-drawer__grid { grid-template-columns: 1fr; }
   .vd-drawer__groups--ads { grid-template-columns: 1fr 1fr; }
   .vd-hero__inner { grid-template-columns: 1fr; gap: 54px; }
   .vd-hero__visual { max-width: 520px; margin: 0 auto; }
   .vd-hero__frame { aspect-ratio: 4/3.2; }
   .vd-hero__controls, .vd-hero__thumbs { bottom: 52px; }
   .vd-about__grid, .vd-why__grid { grid-template-columns: 1fr; gap: 70px; }
   .vd-about-hero__inner,
   .vd-about-story__grid { grid-template-columns: 1fr; }
   .vd-about-hero__visual,
   .vd-about-story__media { min-height: 440px; }
   .vd-about-values__grid { grid-template-columns: 1fr 1fr; }
   .vd-about-cta__box { flex-direction: column; align-items: flex-start; }
   .vd-contact__grid { grid-template-columns: 1fr; gap: 40px; }
   .vd-footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
   .vd-blog__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
   .vd-topbar__list li:not(:first-child) { display: none; }
   .vd-vm__grid { grid-template-columns: 1fr; }
   .vd-values { grid-template-columns: 1fr 1fr; }
   .vd-steps { grid-template-columns: 1fr 1fr; gap: 34px; }
   .vd-steps::before { display: none; }
   .vd-counters { grid-template-columns: 1fr 1fr; gap: 26px 0; }
   .vd-about-metrics__grid { grid-template-columns: 1fr 1fr; }
   .vd-about-flip__grid { grid-template-columns: 1fr; }
   .vd-counter:nth-child(3) { border-left: 0; }
   .vd-cta__box { grid-template-columns: 1fr; padding: 40px 32px; }
   .vd-hero__thumbs { display: none; }
   .vd-hero__controls { left: max(20px, calc((100vw - 1250px) / 2)); right: auto; bottom: 52px; }
   .vd-testi__quote { display: none; }
}

@media (max-width: 767px) {
   :root { --vd-header-h: 74px; }
   .vd-section { padding: 68px 0; }
   .vd-search { display: none; }
   .vd-header__actions { margin-left: auto; }
   .vd-topbar__right .vd-topbar__tag { display: none; }
   .vd-header__actions .vd-call { display: none; }
   .vd-logo img { height: 60px; }
   .vd-drawer { padding: 22px 18px 28px; }
   .vd-drawer__top { margin-bottom: 28px; }
   .vd-drawer__top img { height: 48px; }
   .vd-drawer__close { width: 46px; height: 46px; }
   .vd-drawer__grid { grid-template-columns: 1fr; }
   .vd-drawer__section { padding: 16px 14px; border-radius: 14px; }
   .vd-drawer__groups--ads { grid-template-columns: 1fr; }
   .vd-drawer__links a { min-height: 42px; }
   .vd-about-hero { min-height: auto; }
   .vd-about-hero__inner { padding: 66px 20px 86px; }
   .vd-about-hero__content h1 { font-size: clamp(36px, 12vw, 52px); }
   .vd-about-hero__content p { font-size: 16px; }
   .vd-about-hero__visual,
   .vd-about-story__media { min-height: 340px; border-radius: 20px; }
   .vd-about-hero__badge { width: 108px; height: 108px; left: 16px; bottom: 16px; }
   .vd-about-hero__badge strong { font-size: 34px; }
   .vd-about-metrics { margin-top: -42px; }
   .vd-about-metrics__grid,
   .vd-about-values__grid { grid-template-columns: 1fr; }
   .vd-about-metric { padding: 24px 18px; }
   .vd-flip-card { min-height: 450px; }
   .vd-about-cta { padding-bottom: 70px; }
   .vd-about-cta__box { border-radius: 20px; }
   .vd-hero__slide { min-height: 640px; padding: 60px 0px 120px; }
   .vd-hero__title { font-size: clamp(34px, 10vw, 48px); }
   .vd-hero__stats { gap: 22px; }
   .vd-hero__stats li strong { font-size: 25px; }
   .vd-hero__chip { display: none; }
   .vd-hero__badge { width: 84px; height: 84px; left: 14px; }
   .vd-hero__badge b { font-size: 24px; }
   .vd-cards { grid-template-columns: 1fr; }
   .vd-blog__grid { grid-template-columns: 1fr; }
   .vd-why__list { grid-template-columns: 1fr; }
   .vd-about__media-sub { display: none; }
   .vd-form__row { grid-template-columns: 1fr; }
   .vd-form { padding: 28px 22px; }
   .vd-footer__grid { grid-template-columns: 1fr; }
   .vd-counters { padding: 26px 18px; }
   .vd-counter + .vd-counter { border-left: 0; }
   .vd-services__head { flex-direction: column; align-items: flex-start; }
   .vd-svc-carousel .swiper-slide { width: 290px; }
   .vd-float { right: 14px; bottom: 16px; }
}

@media (max-width: 575px) {
   .vd-values { grid-template-columns: 1fr; }
   .vd-steps { grid-template-columns: 1fr; }
   .vd-topbar { font-size: 12.5px; }
   .vd-hero__controls { bottom: 50px; }
   .vd-hero__actions .vd-btn,
   .vd-about-hero__actions .vd-btn,
   .vd-about-cta__box .vd-btn { width: 100%; }
}