/*
  Volans Video Agency | UI-only visual layer
  Place AFTER /front/css/style.css on the public site. Keep this file off /admin.
  Based on the public EN templates and current admin content observed 2026-10-03.
  This file changes presentation only. It does not change CMS data, routing or form actions.
  It deliberately contains no image URL and keeps every image supplied by the current site.
*/

:root {
  --vv-ink: #0a1733;
  --vv-navy: #081a45;
  --vv-navy-2: #0d2b61;
  --vv-blue: #1e5ae8;
  --vv-aqua: #a8ddf2;
  --vv-cyan: #cceffa;
  --vv-paper: #f5f8fc;
  --vv-white: #ffffff;
  --vv-muted: #5b6981;
  --vv-line: #dce6f1;
  --vv-radius: 18px;
  --vv-shadow: 0 18px 48px rgba(8, 26, 69, .09);
}

html { scroll-behavior: smooth; }
body { background: var(--vv-white); color: var(--vv-ink); font-family: 'Inter', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body p, body li { line-height: 1.7; }
body h1, body h2, body h3, body h4, body h5,
body .heading-title, body .page-header h1, body .page-header h2 {
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif !important;
  letter-spacing: -.025em;
  line-height: 1.13;
}
body h1, body h2 { font-weight: 700 !important; }
body .darkcolor { color: var(--vv-ink) !important; }
body .defaultcolor { color: var(--vv-blue) !important; }
body .bglight, body .bglight2 { background: var(--vv-paper) !important; }
body .bgdark { background: var(--vv-navy) !important; }
body .whitecolor { color: var(--vv-white) !important; }
body ::selection { background: var(--vv-aqua); color: var(--vv-navy); }

/* Existing navigation and mega menu */
.site-header .navbar { transition: background .25s ease, box-shadow .25s ease; }
.site-header .navbar.fixedmenu {
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 10px 35px rgba(8, 26, 69, .08);
  backdrop-filter: blur(16px);
}
.site-header .navbar .nav-link { font-family: 'Inter', Arial, sans-serif; font-weight: 600; letter-spacing: .01em; }
.site-header .navbar.fixedmenu .nav-link { color: var(--vv-ink) !important; }
.site-header .navbar .nav-link:hover,
.site-header .navbar .nav-link.active,
.site-header .navbar .nav-link.menuactive { color: var(--vv-aqua) !important; }
.site-header .navbar.fixedmenu .nav-link:hover,
.site-header .navbar.fixedmenu .nav-link.active,
.site-header .navbar.fixedmenu .nav-link.menuactive { color: var(--vv-blue) !important; }
.site-header .dropdown-menu.megamenu {
  background: var(--vv-navy) !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 28px 55px rgba(8,26,69,.22);
}
.site-header .dropdown-menu .dropdown-item { line-height: 1.45; }
.site-header .dropdown-menu .dropdown-item:hover { background: rgba(168,221,242,.12) !important; color: var(--vv-aqua) !important; }

/* Shared hero and page titles */
#main-banner-page { background-color: var(--vv-navy) !important; }
#main-banner-page .page-header, #main-banner-page h1, #main-banner-page h2 { color: var(--vv-white); }
#main-banner-page h1, #main-banner-page h2 { font-size: clamp(34px, 4vw, 58px) !important; }
#main-banner-page p { color: rgba(255,255,255,.82) !important; line-height: 1.65; }
#main-banner-area .bg-overlay.opacity-7 { background: linear-gradient(120deg,rgba(7,63,124,.22),rgba(104,184,225,.1) 52%,rgba(19,91,157,.18)) !important; opacity: 1 !important; pointer-events: none; }
#main-banner-area .rev_slider_wrapper { background-color: #eaf5fb !important; }

/* Existing homepage content. Images continue to come from the current CMS. */
#our-feature .image,
#our-feature .feature-item img,
#our-feature .image img { border-radius: var(--vv-radius); }
#our-feature .image img { max-width: 100%; height: auto; box-shadow: var(--vv-shadow); }
#our-feature p { color: var(--vv-muted); }
.service-box {
  height: 100%;
  padding: clamp(24px, 3vw, 38px);
  background: var(--vv-white);
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-radius);
  box-shadow: var(--vv-shadow);
}
.service-box > span img { max-width: 64px; max-height: 64px; object-fit: contain; }
.service-box h4 { color: var(--vv-ink); font-size: clamp(20px, 1.7vw, 25px); }
.service-box p { color: var(--vv-muted); }
#our-apps h2[style], #our-apps h3, #our-apps h4 {
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif !important;
  letter-spacing: -.025em !important;
  line-height: 1.14 !important;
}
#our-apps p { color: var(--vv-muted); }
#our-process { background-color: var(--vv-navy); }
#our-process .whitecolor { color: var(--vv-white) !important; }
#our-process .process-wrapp > li {
  padding: 24px 20px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(168,221,242,.24);
  border-radius: 16px;
  box-shadow: none;
}
#our-process .process-wrapp > li::before,
#our-process .process-wrapp > li::after { display: none; }
#our-process .pro-step { color: var(--vv-aqua) !important; }
#our-process .pro-step img { max-width: 56px; max-height: 56px; object-fit: contain; }
#our-process .process-wrapp p { line-height: 1.55; }

/* Existing blue gradient label bars and side menu */
.title-wrap.gradient-bg {
  background-image: none !important;
  background-color: var(--vv-navy) !important;
  border-left: 5px solid var(--vv-aqua);
  border-radius: 12px;
}
.side-menu.gradient-bg { background-image: none !important; background-color: var(--vv-navy) !important; }

/* Shared calls to action. Specific selectors avoid styling icon and carousel controls. */
body a.button.btn-primary,
body a.button.btnsecondary,
body a.button.gradient-btn,
body button.gradient-btn,
body .formsubmit.gradient-btn,
body .subscribeformsubmit.gradient-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 23px !important;
  background: var(--vv-navy) !important;
  color: var(--vv-white) !important;
  border: 1px solid var(--vv-navy) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
body a.button.btn-primary:hover,
body a.button.btnsecondary:hover,
body a.button.gradient-btn:hover,
body button.gradient-btn:hover,
body .formsubmit.gradient-btn:hover,
body .subscribeformsubmit.gradient-btn:hover {
  background: var(--vv-blue) !important;
  border-color: var(--vv-blue) !important;
  color: var(--vv-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(30,90,232,.18) !important;
}
.site-header a.button { background: var(--vv-navy) !important; border-color: rgba(255,255,255,.55) !important; color: var(--vv-white) !important; }
@media (min-width: 1200px) {
  .site-header .contactusheaderbtn { right: clamp(72px,6vw,88px); }
}
@media (max-width: 600px) {
  .site-header .navbar-brand { width: 130px; max-width: 130px; flex: 0 0 130px; margin-right: 0; }
  .site-header .contactusheaderbtn { right: 0; bottom: 0; display: block !important; margin-left: auto; margin-right: 84px; }
  .site-header .contactusheaderbtn a.button { width: auto !important; min-height: 34px; padding: 7px 10px !important; font-size: 12px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .site-header .navbar-brand { width: 112px; max-width: 112px; flex-basis: 112px; }
  .site-header .contactusheaderbtn a.button { font-size: 11px; padding: 6px 8px !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--vv-aqua) !important;
  outline-offset: 3px;
}

/* Work, product and blog cards: keep CMS item order and links intact. */
#our-services .services-main,
.team-box,
#our-blog .news_item {
  height: 100%;
  overflow: hidden;
  background: var(--vv-white) !important;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-radius);
  box-shadow: var(--vv-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
#our-services .services-main:hover,
.team-box:hover,
#our-blog .news_item:hover { transform: translateY(-4px); box-shadow: 0 24px 55px rgba(8,26,69,.15); }
#our-services .services-main .image,
.team-box > .image,
#our-blog .news_item > .image { overflow: hidden; background: #e8eff8; }
#our-services .services-main .image img,
.team-box > .image img,
#our-blog .news_item > .image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;
}
#our-services .services-content,
.team-box .team-content,
#our-blog .news_desc { background: transparent !important; padding: 22px !important; }
#our-services .services-content h5,
.team-box .team-content h4,
#our-blog .news_desc h4 { margin-bottom: 10px !important; color: var(--vv-ink) !important; font-size: clamp(19px, 1.5vw, 23px); font-weight: 700; }
#our-services .services-content p,
.team-box .team-content p,
#our-blog .news_desc p { color: var(--vv-muted); line-height: 1.6; }
#our-blog .news_desc .meta-tags { color: var(--vv-muted); }

/* Current CubePortfolio product thumbnails: retain their CMS art and links. */
.cbp-item-wrapper {
  overflow: hidden;
  background: #eaf2fa;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-radius);
  box-shadow: var(--vv-shadow);
}
.cbp-item-wrapper > img { display: block; max-width: 100%; height: auto; }
.cbp-item-wrapper .center-box h4.homecbgalfont {
  display: inline-block;
  width: auto !important;
  max-width: calc(100% - 28px);
  margin: 0 auto;
  padding: 9px 14px;
  background: rgba(8,26,69,.86);
  color: var(--vv-white) !important;
  border-radius: 10px;
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.2;
}
.cbp-item-wrapper .overlay-pr-1 { opacity: .18 !important; }

/* Existing client logos and testimonials */
#our-shop .shopping-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: 20px;
  background: var(--vv-white) !important;
  border: 1px solid var(--vv-line);
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#our-shop .shopping-box:hover { border-color: var(--vv-aqua); box-shadow: var(--vv-shadow); }
#our-shop .shopping-box .image { width: 100%; text-align: center; }
#our-shop .shopping-box .image img { display: inline-block; max-width: 100%; max-height: 74px; width: auto; height: auto; object-fit: contain; }
#our-testimonial .page-header.testimonial-bg { background-color: var(--vv-navy); }
#testimonial-slider .item {
  padding: clamp(24px, 4vw, 48px);
  background: var(--vv-white);
  border: 1px solid var(--vv-line);
  border-radius: 22px;
  box-shadow: var(--vv-shadow);
}
#testimonial-slider .item p { color: var(--vv-muted); }
#testimonial-slider .item h4 { color: var(--vv-ink) !important; }
#testimonial-slider .testimonial-round img { border-radius: 50%; }

/* Filters, forms, FAQ */
body .form-control, body input[type='text'], body input[type='email'], body select, body textarea {
  border: 1px solid var(--vv-line);
  border-radius: 12px;
  background: var(--vv-white);
  color: var(--vv-ink);
  min-height: 46px;
}
body .form-control:focus { border-color: var(--vv-blue); box-shadow: 0 0 0 3px rgba(30,90,232,.1); }
#ourfaq .card { border: 1px solid var(--vv-line); border-radius: 14px; overflow: hidden; margin-bottom: 12px; box-shadow: none; }
#ourfaq .card-header { background: var(--vv-white) !important; border-bottom: 0; padding: 18px 22px; }
#ourfaq .card-header a { color: var(--vv-ink) !important; font-weight: 700; }
#ourfaq .card-body { border-top: 1px solid var(--vv-line); color: var(--vv-muted); }
#stayconnect { background: var(--vv-paper) !important; }
#stayconnect .contactus-wrapp { border-radius: 22px; box-shadow: var(--vv-shadow); }

/* Shared lower page elements */
#site-footer { background: var(--vv-navy) !important; }
#site-footer a:hover { color: var(--vv-aqua) !important; }
.cookie-consent {
  background: rgba(8,26,69,.97) !important;
  color: var(--vv-white) !important;
  box-shadow: 0 -10px 35px rgba(8,26,69,.16);
}
.cookie-consent button { background: var(--vv-aqua) !important; color: var(--vv-navy) !important; border-radius: 8px; min-height: 36px; }
.cookie-consent button a { color: var(--vv-navy) !important; }

@media (max-width: 767px) {
  body h1, body h2 { line-height: 1.12; }
  #main-banner-page h1, #main-banner-page h2 { font-size: clamp(30px, 8vw, 40px) !important; }
  #our-services .services-content,
  .team-box .team-content,
  #our-blog .news_desc { padding: 18px !important; }
  .site-header .navbar.fixedmenu { background: var(--vv-white) !important; }
  .cookie-consent { font-size: 12px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Original campaign images, page banners, and white logos on alternating blues. */
#main-banner-page.page-header { background-position: center center !important; background-size: cover !important; }
#main-banner-page.page-header > .overlay.overlay-dark { background: linear-gradient(90deg,rgba(5,19,49,.88),rgba(9,38,86,.62)) !important; opacity: 1 !important; }
#main-banner-page.page-header .page-titles { position: relative; z-index: 2; }
#our-shop .shopping-box,
#our-shop .shopping-box:hover { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: #12346e !important; }
#our-shop .owl-item:nth-child(2n) .shopping-box,
#our-shop [class*="col-"]:nth-child(2n) .shopping-box { background: #4987c8 !important; }
#our-shop .shopping-box .image img,
#our-shop .shopping-box:hover .image img { filter: brightness(0) invert(1) !important; opacity: 1 !important; }
#our-shop .shopping-box:hover { background: #2b69b0 !important; }
#main-banner-area { position: relative; background: radial-gradient(ellipse 72% 82% at 3% 12%,rgba(81,166,218,.21),transparent 69%),radial-gradient(ellipse 62% 75% at 100% 92%,rgba(87,170,222,.17),transparent 72%),linear-gradient(180deg,#f8fcff 0%,#eaf5fc 70%,#fff 100%) !important; }
.vv-hero-nav { position: absolute; z-index: 100; top: 50%; left: clamp(12px,2.5vw,42px); right: clamp(12px,2.5vw,42px); display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.vv-hero-nav button { pointer-events: auto; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.52); border-radius: 50%; background: rgba(244,250,255,.34); color: #0a3352; font-size: 21px; line-height: 1; box-shadow: 0 5px 16px rgba(8,26,69,.08); backdrop-filter: blur(5px); transition: background .2s,transform .2s; }
.vv-hero-nav button:hover { background: rgba(244,250,255,.76); transform: scale(1.06); }
#main-banner-area .tp-bullets.numbered { display: flex !important; align-items: center; justify-content: center; gap: 2px; width: auto !important; height: 28px !important; top: auto !important; bottom: 14px !important; left: 50% !important; transform: translateX(-50%) !important; }
#main-banner-area .tp-bullets.numbered .tp-bullet { position: relative !important; left: auto !important; top: auto !important; float: none !important; display: grid; place-items: center; width: 28px !important; height: 28px !important; margin: 0 !important; border: 0 !important; border-radius: 50%; background: transparent !important; box-shadow: none !important; }
#main-banner-area .tp-bullets.numbered .vv-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: #a5c6dc; transition: background .2s, transform .2s; }
#main-banner-area .tp-bullets.numbered .tp-bullet:hover .vv-dot { background: #448ab6; transform: scale(1.25); }
#main-banner-area .tp-bullets.numbered .tp-bullet.selected .vv-dot { background: #19689d; transform: scale(1.3); }
.vv-video-dialog { width: min(1100px,calc(100vw - 34px)); max-width: 1100px; max-height: calc(100vh - 36px); padding: 15px; border: 1px solid rgba(255,255,255,.26); border-radius: 20px; background: #071b42; box-shadow: 0 38px 100px rgba(0,0,0,.45); overflow: visible; }
.vv-video-dialog::backdrop { background: rgba(3,10,28,.86); backdrop-filter: blur(8px); }
.vv-video-dialog video { display: block; width: 100%; max-height: calc(100vh - 70px); border-radius: 12px; }
.vv-video-dialog-close { position: absolute; right: -5px; top: -48px; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: #071b42; color: white; font-size: 28px; line-height: 1; }

/* Work detail: original embedded video and project copy. */
#main-banner-page:has(.blackcolor h1) { background: var(--vv-paper) !important; padding-top: 100px; padding-bottom: 90px; }
#main-banner-page:has(.blackcolor h1) .gradient-bg { display: none; }
#main-banner-page:has(.blackcolor h1) > .container.mt-5 { margin-top: 25px !important; }
#main-banner-page:has(.blackcolor h1) .blackcolor h2 { color: var(--vv-blue) !important; font-size: 14px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
#main-banner-page:has(.blackcolor h1) .blackcolor h1 { color: var(--vv-ink) !important; font-size: clamp(38px,5vw,68px) !important; font-weight: 700; margin-top: 12px; }
#main-banner-page:has(.blackcolor h1) .HomePage-homeVideoWrapper-274 { aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; background: var(--vv-navy); box-shadow: var(--vv-shadow); }
#main-banner-page:has(.blackcolor h1) .HomePage-homeVideoWrapper-274 iframe { width: 100% !important; height: 100% !important; }
#main-banner-page:has(.blackcolor h1) .col-md-12.col-12.mt-3 { max-width: 900px; margin: 42px auto 0; padding: clamp(25px,4vw,55px); border: 1px solid var(--vv-line); border-radius: 20px; background: var(--vv-white); color: var(--vv-ink); font-size: 16px; line-height: 1.8; text-align: left !important; box-shadow: var(--vv-shadow); }
#main-banner-page:has(.blackcolor h1) .col-md-12.col-12.mt-3 p { color: var(--vv-muted) !important; margin-bottom: 1em; }

/* Product detail: original article sections, imagery and video embeds. */
#our-product .news_item { overflow: visible; border: 1px solid var(--vv-line); border-radius: 22px; background: var(--vv-white); box-shadow: var(--vv-shadow); }
#our-product .news_desc { padding: clamp(25px,5vw,65px) !important; text-align: left !important; color: var(--vv-ink); }
#our-product .news_desc > h1 { font-size: clamp(38px,5vw,62px) !important; margin-bottom: 24px; }
#our-product .blogabstract { font-size: 18px; line-height: 1.7; color: var(--vv-muted) !important; }
#our-product .news_desc h3 { color: var(--vv-ink) !important; font-size: clamp(24px,3vw,38px); margin-bottom: 18px; }
#our-product .news_desc p { color: var(--vv-muted); line-height: 1.8; }
#our-product .news_desc img { max-width: 100%; height: auto; border-radius: 16px; }
#our-product .HomePage-homeVideoWrapper-274 { aspect-ratio: 16/9; overflow: hidden; border-radius: 16px; background: var(--vv-navy); }
#our-product .HomePage-homeVideoWrapper-274 iframe { width: 100% !important; height: 100% !important; }

/* Service and blog detail templates, including long CMS body copy. */
#aboutus .container.aboutus > .row { align-items: start; }
#aboutus .container.aboutus .image img { width: 100%; height: auto; object-fit: contain; border-radius: 20px; box-shadow: var(--vv-shadow); }
#aboutus .container.aboutus h3 { color: var(--vv-ink) !important; font-size: clamp(26px,3vw,40px); line-height: 1.15; }
#aboutus .container.aboutus p { color: var(--vv-muted); font-size: 15px; line-height: 1.8; margin-bottom: 1em; }
#our-blog .news_item:has(.news_desc h1) { overflow: visible; border: 1px solid var(--vv-line); border-radius: 22px; background: var(--vv-white); box-shadow: var(--vv-shadow); }
#our-blog .news_item:has(.news_desc h1) > .image img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: contain; background: #e8eff8; border-radius: 22px 22px 0 0; }
#our-blog .news_item:has(.news_desc h1) .news_desc { padding: clamp(25px,5vw,64px) !important; text-align: left !important; }
#our-blog .news_item:has(.news_desc h1) .news_desc h1 { color: var(--vv-ink) !important; font-size: clamp(34px,4vw,58px) !important; line-height: 1.08; text-transform: none !important; }
#our-blog .news_item:has(.news_desc h1) .news_desc p,
#our-blog .news_item:has(.news_desc h1) .news_desc li { color: var(--vv-muted); font-size: 15px; line-height: 1.85; }
#our-blog .news_item:has(.news_desc h1) .news_desc img { max-width: 100%; height: auto; border-radius: 15px; margin: 22px auto; }
#our-blog .news_item:has(.news_desc h1) .news_desc strong { color: var(--vv-ink); }
#our-blog .news_item:has(.news_desc h1) .news_desc a { color: var(--vv-blue); text-underline-offset: 3px; }

@media (max-width: 767px) {
  .vv-hero-nav { left: 8px; right: 8px; }
  .vv-hero-nav button { width: 36px; height: 36px; font-size: 17px; }
  #main-banner-page:has(.blackcolor h1) { padding-top: 80px; padding-bottom: 55px; }
  #our-product .news_desc,#our-blog .news_item:has(.news_desc h1) .news_desc { padding: 24px 18px !important; }
}

/* Keep the original six CMS entries and read V-O-L-A-N-S top to bottom. */
#our-process .process-wrapp {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  width: min(100%,920px) !important;
  margin: 40px auto 0 !important;
  padding: 0 !important;
}
#our-process .process-wrapp > li {
  display: grid !important;
  grid-template-columns: 76px minmax(0,1fr);
  column-gap: 22px;
  align-items: center;
  width: 100% !important;
  min-height: 110px;
  padding: 20px 0 !important;
  text-align: left !important;
  vertical-align: top;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 0 !important;
}
#our-process .process-wrapp > li:first-child { border-top: 1px solid rgba(255,255,255,.18) !important; }
#our-process .process-wrapp .pro-step {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: block !important;
  width: 76px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--vv-aqua) !important;
  font-family: 'Bricolage Grotesque','Inter',Arial,sans-serif;
  font-size: 64px !important;
  font-weight: 800;
  line-height: .95 !important;
  text-align: center;
}
#our-process .process-wrapp .pro-step::before,
#our-process .process-wrapp .pro-step::after { display: none !important; }
#our-process .process-wrapp > li p.fontbold {
  grid-column: 2;
  margin: 0 0 5px !important;
  color: #fff !important;
  font-size: 19px;
  line-height: 1.2;
}
#our-process .process-wrapp > li p:last-child {
  grid-column: 2;
  margin: 0 !important;
  color: #c3d2e8 !important;
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  #our-process .process-wrapp > li { grid-template-columns: 52px minmax(0,1fr); column-gap: 14px; min-height: 96px; }
  #our-process .process-wrapp .pro-step { width: 52px !important; font-size: 52px !important; }
  #our-process .process-wrapp > li p.fontbold { font-size: 16px; }
  #our-process .process-wrapp > li p:last-child { font-size: 11px; }
}

/* Homepage layout: original CMS copy and images in the preview's composition. */
@media (min-width: 768px) {
  .vv-hero-nav { right: clamp(96px,8vw,130px); }
}
.vv-intro-section,
.vv-work-section,
.vv-strategy-section,
.vv-products-section,
.vv-blog-section,
.vv-testimonial-section,
.vv-partners-section { position: relative; }
.vv-intro-section > .container,
.vv-work-section > .container,
.vv-strategy-section > .container,
.vv-products-section > .container,
.vv-blog-section > .container,
.vv-testimonial-section > .container,
.vv-partners-section > .container { width: calc(100% - 64px); max-width: 1320px; }
.vv-intro-section { padding: clamp(64px,8vw,120px) 0 !important; margin: 0 !important; background: #fff; }
.vv-intro-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(55px,8vw,135px); align-items: stretch; }
.vv-intro-visual { display: flex; min-width: 0; min-height: 500px; }
#our-feature.vv-intro-section .vv-intro-visual .image { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 26px; background: #e9f1fb; box-shadow: 0 25px 60px rgba(8,26,69,.11); }
#our-feature.vv-intro-section .vv-intro-visual .image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 0 !important; box-shadow: none !important; }
.vv-intro-copy { min-width: 0; }
.vv-intro-copy > [class*="col-"] { width: 100% !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; visibility: visible !important; animation: none !important; }
.vv-intro-copy .heading-title { margin: 0 0 27px !important; }
.vv-intro-copy .heading-title h2:first-child { margin: 0 0 20px !important; color: var(--vv-blue) !important; font-family: 'Inter',Arial,sans-serif !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.4 !important; letter-spacing: .14em; text-transform: uppercase; }
.vv-intro-copy .heading-title h2:first-child::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 12px; vertical-align: 1px; border-radius: 50%; background: var(--vv-aqua); box-shadow: 0 0 0 5px #eaf7fd; }
.vv-intro-copy .heading-title h2:nth-child(2) { margin: 0 !important; font-size: clamp(42px,4.4vw,66px) !important; line-height: 1.02 !important; letter-spacing: -.055em; color: var(--vv-ink) !important; }
.vv-intro-copy .heading-title h2:nth-child(2) span { color: var(--vv-blue) !important; }
.vv-intro-copy p { max-width: 660px; margin: 0 0 24px !important; color: var(--vv-muted) !important; font-size: clamp(14px,1.15vw,17px); line-height: 1.8; }
.vv-intro-copy a.button,body .vv-intro-copy a.button.btnsecondary { display: inline-flex !important; padding: 0 !important; min-height: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--vv-blue) !important; font-weight: 800; box-shadow: none !important; }
.vv-intro-copy a.button::after { content: ''; margin-left: 26px; font-size: 23px; font-weight: 400; }
.vv-intro-copy a.button:hover,body .vv-intro-copy a.button.btnsecondary:hover { background: transparent !important; border-color: transparent !important; color: var(--vv-navy) !important; transform: none; box-shadow: none !important; }

.vv-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--vv-blue); font-family: 'Inter',Arial,sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.vv-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--vv-aqua); box-shadow: 0 0 0 5px #eaf7fd; }
.vv-section-head { display: flex; align-items: end; justify-content: space-between; gap: 38px; margin-bottom: 42px; }
.vv-section-head > div { min-width: 0; }
.vv-section-head h2,
.vv-section-title h2 { margin: 18px 0 0 !important; color: var(--vv-ink) !important; font-size: clamp(39px,5vw,70px) !important; font-weight: 700 !important; line-height: 1.03 !important; letter-spacing: -.055em; }
.vv-section-title h2:first-child { margin-top: 18px !important; }
.vv-section-title h2:not(:first-child) { margin-top: 0 !important; }
.vv-section-title h2:nth-child(2),
.vv-products-section h2 em { color: var(--vv-blue) !important; font-style: normal; }
.vv-section-head > p { flex: 0 0 270px; margin: 0 0 10px; color: var(--vv-muted); font-size: 15px; line-height: 1.55; }
.vv-section-end { display: flex; justify-content: center; margin-top: 38px; }
.vv-section-end a.button { text-decoration: none; }

.vv-work-section { background: var(--vv-paper) !important; padding: clamp(70px,7vw,105px) 0 !important; }
.vv-work-grid,
.vv-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.vv-work-card,
.vv-product-card { display: block; min-width: 0; height: 100%; overflow: hidden; border: 1px solid var(--vv-line); border-radius: 20px; background: #fff; color: var(--vv-ink) !important; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease; }
.vv-work-card:hover,
.vv-product-card:hover { transform: translateY(-5px); box-shadow: var(--vv-shadow); }
.vv-work-image,
.vv-product-image { position: relative; overflow: hidden; background: #e6eef8; }
.vv-work-image { aspect-ratio: 16/10; }
.vv-work-image img,
.vv-product-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vv-work-card:hover img,
.vv-product-card:hover img { transform: scale(1.035); }
.vv-card-arrow { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--vv-aqua); color: var(--vv-navy); font-size: 23px; line-height: 1; box-shadow: 0 8px 18px rgba(4,15,37,.18); }
.vv-work-info { display: flex; justify-content: space-between; gap: 20px; min-height: 146px; padding: 24px 25px 28px; }
.vv-card-kicker { display: inline-block; color: var(--vv-blue); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vv-work-info h3,
.vv-product-info h3 { margin: 14px 0 6px; color: var(--vv-ink); font-size: clamp(20px,1.8vw,26px); line-height: 1.1; }
.vv-work-info p { margin: 0; color: var(--vv-muted); font-size: 13px; line-height: 1.5; }
.vv-work-info p p { margin: 0; }
.vv-card-index { color: #b3c0d2; font-size: 13px; font-weight: 800; }

.vv-strategy-section { padding: clamp(70px,7vw,108px) 0 !important; background: #fff; }
.vv-strategy-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(42px,7vw,110px); align-items: center; }
.vv-strategy-eyebrow h2 { margin: 0 0 25px !important; color: var(--vv-blue) !important; font-family: 'Inter',Arial,sans-serif !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.45 !important; letter-spacing: .13em; text-transform: uppercase; }
.vv-strategy-eyebrow h2 br { display: none; }
.vv-strategy-eyebrow h2 span { color: inherit !important; }
.vv-strategy-text h3 { margin: 0 0 20px; color: var(--vv-ink) !important; font-size: clamp(36px,4.4vw,60px) !important; line-height: 1.05 !important; }
.vv-strategy-text h3 br { display: none; }
.vv-strategy-text h4 { margin: 0 0 13px; color: var(--vv-muted) !important; font-family: 'Inter',Arial,sans-serif !important; font-size: clamp(15px,1.3vw,18px) !important; font-weight: 400 !important; line-height: 1.6 !important; }
.vv-strategy-text h4 span { color: inherit !important; }
.vv-strategy-text h4 br { display: none; }
.vv-strategy-text h4.defaultcolor { color: var(--vv-blue) !important; font-weight: 700 !important; }
.vv-strategy-copy > .vv-text-link { margin-top: 28px; }
.vv-strategy-image { overflow: hidden; border-radius: 24px; background: #eaf1f9; }
.vv-strategy-image img { display: block; width: 100%; height: auto; object-fit: cover; }

.vv-products-section { padding: clamp(70px,7vw,105px) 0 !important; background: #fff !important; }
.vv-product-image { aspect-ratio: 16/10; }
.vv-product-index { position: absolute; top: 18px; left: 18px; padding: 5px 10px; border-radius: 20px; background: rgba(8,26,69,.82); color: #fff; font-size: 11px; font-weight: 800; }
.vv-product-info { min-height: 162px; display: flex; flex-direction: column; align-items: start; padding: 25px; }
.vv-product-info h3 { margin: 14px 0 20px; }
.vv-text-link { display: inline-flex; align-items: center; gap: 24px; margin-top: auto; color: var(--vv-blue); font-size: 13px; font-weight: 800; }
.vv-text-link b { font-size: 22px; font-weight: 400; }

.vv-blog-section { padding: clamp(70px,7vw,105px) 0 !important; background: var(--vv-paper); }
.vv-blog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.vv-blog-card { display: block; min-width: 0; overflow: hidden; border: 1px solid var(--vv-line); border-radius: 20px; background: #fff; color: var(--vv-ink) !important; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease; }
.vv-blog-card:hover { transform: translateY(-5px); box-shadow: var(--vv-shadow); }
.vv-blog-image { aspect-ratio: 16/9; overflow: hidden; background: #dbeafa; }
.vv-blog-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vv-blog-card:hover img { transform: scale(1.035); }
.vv-blog-info { display: flex; flex-direction: column; align-items: start; min-height: 234px; padding: 27px; }
.vv-blog-info h3 { margin: 12px 0; color: var(--vv-ink); font-size: clamp(20px,2vw,28px); line-height: 1.2; }
.vv-blog-info p { margin: 0 0 18px; color: var(--vv-muted); font-size: 14px; line-height: 1.6; }
.vv-blog-info .vv-text-link { margin-top: auto; }

.vv-testimonial-section { padding: clamp(75px,8vw,112px) 0 !important; margin: 0 !important; background: #eaf1f9 !important; }
.vv-testimonial-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(45px,8vw,115px); align-items: center; }
.vv-testimonial-heading { margin-top: 20px; }
.vv-testimonial-heading > span { display: block; max-width: 440px; margin: 0 0 14px; color: var(--vv-muted) !important; font-size: 15px; line-height: 1.6; }
.vv-testimonial-heading h2 { margin: 0; color: var(--vv-ink) !important; font-size: clamp(38px,4.4vw,62px) !important; line-height: 1.05 !important; }
.vv-testimonial-heading h2 strong { color: var(--vv-blue); }
.vv-testimonial-carousel { min-width: 0; }
#our-testimonial #testimonial-slider { margin: 0 !important; }
#our-testimonial .vv-testimonial-card { min-height: 330px; padding: 37px 42px 68px !important; border: 1px solid var(--vv-line); border-radius: 22px; background: #fff; box-shadow: 0 18px 48px rgba(8,26,69,.08); }
.vv-quote-mark { display: block; height: 65px; color: var(--vv-aqua); font-family: Georgia,serif; font-size: 88px; line-height: .9; }
.vv-testimonial-card blockquote { margin: 0 0 30px; color: var(--vv-ink); font-family: 'Bricolage Grotesque','Inter',Arial,sans-serif; font-size: clamp(18px,1.55vw,21px); font-weight: 600; line-height: 1.4; }
.vv-testimonial-card blockquote p { margin: 0; color: inherit !important; font: inherit; line-height: inherit; }
.vv-testimonial-person { display: flex; align-items: center; gap: 15px; padding-top: 19px; border-top: 1px solid var(--vv-line); }
.vv-testimonial-person img { flex: 0 0 48px; width: 48px !important; height: 48px !important; border-radius: 50%; object-fit: contain; background: #f1f5fa; }
.vv-testimonial-person strong,
.vv-testimonial-person span { display: block; }
.vv-testimonial-person strong { color: var(--vv-ink); font-size: 13px; }
.vv-testimonial-person span { margin-top: 3px; color: var(--vv-muted); font-size: 11px; }
#our-testimonial #testimonial-slider .owl-stage-outer { transition: height .3s ease; }
#our-testimonial #testimonial-slider .owl-nav { position: absolute !important; right: 30px !important; left: auto !important; top: 25px !important; bottom: auto !important; width: auto !important; height: 40px !important; display: flex !important; align-items: center; justify-content: flex-end; gap: 9px; margin: 0 !important; transform: none !important; }
#our-testimonial #testimonial-slider .owl-nav button.owl-prev,
#our-testimonial #testimonial-slider .owl-nav button.owl-next { position: static !important; display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #cddbea !important; border-radius: 50% !important; background: #f7fbff !important; color: var(--vv-navy) !important; font-size: 16px !important; line-height: 1 !important; transform: none !important; box-shadow: none !important; }
#our-testimonial #testimonial-slider .owl-nav button.owl-prev:hover,
#our-testimonial #testimonial-slider .owl-nav button.owl-next:hover { background: var(--vv-navy) !important; border-color: var(--vv-navy) !important; color: #fff !important; }
#our-testimonial #testimonial-slider .owl-nav button i { margin: 0 !important; line-height: 1 !important; }

.vv-partners-section { padding: clamp(70px,7vw,100px) 0 !important; background: #fff; }
.vv-logo-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); overflow: hidden; border-radius: 18px; }
.vv-logo-cell { display: grid; place-items: center; min-width: 0; height: 154px; overflow: hidden; background: #12346e; }
.vv-logo-cell:nth-child(2n) { background: #4987c8; }
.vv-logo-cell img { display: block; width: 130px; height: 130px; max-width: 92%; object-fit: contain; filter: brightness(0) invert(1); transition: transform .2s ease; }
.vv-logo-cell:hover img { transform: scale(1.12); }

/* The reference page uses the same original logo assets in its older markup. */
#our-shop:not(.vv-partners-section) .shopping-box { min-height: 154px !important; padding: 10px !important; overflow: hidden; }
#our-shop:not(.vv-partners-section) .shopping-box .image { padding: 0 !important; }
#our-shop:not(.vv-partners-section) .shopping-box .image img { width: 130px !important; height: 130px !important; max-height: none !important; object-fit: contain; }

@media (max-width: 991px) {
  .vv-intro-grid { gap: 45px; }
  .vv-work-grid,.vv-product-grid { gap: 15px; }
  .vv-work-info,.vv-product-info { padding: 19px; }
  .vv-testimonial-layout { gap: 35px; }
}
@media (max-width: 767px) {
  .vv-intro-section > .container,.vv-work-section > .container,.vv-strategy-section > .container,.vv-products-section > .container,.vv-blog-section > .container,.vv-testimonial-section > .container,.vv-partners-section > .container { width: calc(100% - 36px); }
  .vv-intro-grid,.vv-strategy-grid,.vv-testimonial-layout { grid-template-columns: 1fr; gap: 30px; }
  .vv-intro-visual { min-height: 0; }
  #our-feature.vv-intro-section .vv-intro-visual .image { flex: none; width: 100%; aspect-ratio: 16 / 10; }
  .vv-intro-copy .heading-title h2:nth-child(2) { font-size: clamp(34px,9vw,48px) !important; }
  .vv-section-head { display: block; margin-bottom: 28px; }
  .vv-section-head > p { margin-top: 17px; }
  .vv-section-head h2,.vv-section-title h2 { font-size: clamp(36px,9vw,52px) !important; }
  .vv-work-grid,.vv-product-grid,.vv-blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vv-testimonial-card { min-height: 0; }
  .vv-logo-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .vv-logo-cell { height: 125px; }
  .vv-logo-cell img { width: 112px; height: 112px; }
  #our-shop:not(.vv-partners-section) .shopping-box { min-height: 125px !important; }
  #our-shop:not(.vv-partners-section) .shopping-box .image img { width: 108px !important; height: 108px !important; }
}
@media (max-width: 575px) {
  .vv-work-grid,.vv-product-grid,.vv-blog-grid { grid-template-columns: 1fr; }
  .vv-work-image,.vv-product-image { aspect-ratio: 16/10; }
  .vv-work-info { min-height: 128px; }
  #our-testimonial .vv-testimonial-card { padding: 26px 25px 76px !important; }
  #our-testimonial #testimonial-slider .owl-nav { right: 18px !important; top: 20px !important; }
}

/* Footer: preview's clear four-column rhythm, with the original links and signup. */
#site-footer.vv-footer { padding: clamp(70px,7vw,100px) 0 25px !important; background: #061635 !important; color: #fff; }
#site-footer.vv-footer > .container { width: calc(100% - 64px); max-width: 1320px; }
.vv-footer-main { display: grid; grid-template-columns: 2.05fr repeat(3,minmax(0,1fr)); gap: clamp(38px,6vw,95px); align-items: start; padding-bottom: 65px; }
.vv-footer-brand > a:first-child img { display: block; width: 175px; height: auto; }
.vv-footer-description { max-width: 310px; margin: 23px 0 18px; color: #aabbd4; font-size: 13px; line-height: 1.7; }
.vv-footer-description p { margin: 0; color: inherit !important; font-size: inherit; line-height: inherit; }
.vv-footer-email { display: block; width: fit-content; color: var(--vv-aqua) !important; font-size: 13px; font-weight: 700; text-decoration: none; }
.vv-footer-contact { display: block; width: fit-content; margin-top: 10px; color: #b9c8df !important; font-size: 12px; text-decoration: none; }
.vv-footer-column h3,
.vv-footer-extra h3 { margin: 4px 0 24px; color: var(--vv-aqua) !important; font-family: 'Inter',Arial,sans-serif !important; font-size: 11px !important; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.vv-footer-column a { display: block; width: fit-content; margin-bottom: 14px; color: #b9c8df !important; font-size: 13px; line-height: 1.5; text-decoration: none; }
.vv-footer-column a:hover,
.vv-footer-contact:hover,
.vv-footer-bottom a:hover,
.vv-footer-quicklinks a:hover { color: #fff !important; }
.vv-footer-extra { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(50px,9vw,130px); padding: 38px 0 48px; border-top: 1px solid rgba(255,255,255,.13); }
.vv-footer-extra h3 { margin-bottom: 20px; }
.vv-footer-quicklinks-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 35px; row-gap: 12px; }
.vv-footer-quicklinks-grid a { color: #b9c8df !important; font-size: 12px; line-height: 1.55; text-decoration: none; }
.vv-footer-ariba { display: inline-block; margin-top: 28px; opacity: .75; }
.vv-footer-ariba:hover { opacity: 1; }
.vv-footer-ariba img { display: block; max-width: 145px; height: auto; }
.vv-footer-newsletter .sbs_form { max-width: 390px; }
.vv-footer-newsletter .row { margin: 0 -7px; }
.vv-footer-newsletter [class*="col-"] { padding: 0 7px; }
.vv-footer-newsletter .form-group { margin-bottom: 12px; }
#site-footer.vv-footer input.form-control { min-height: 44px; border: 1px solid rgba(255,255,255,.28) !important; border-radius: 10px !important; background: #fff !important; color: var(--vv-ink) !important; font-size: 13px; }
#site-footer.vv-footer button.subscribeformsubmit { min-height: 43px; background: var(--vv-aqua) !important; border-color: var(--vv-aqua) !important; color: var(--vv-navy) !important; border-radius: 10px !important; }
#site-footer.vv-footer button.subscribeformsubmit:hover { background: #fff !important; border-color: #fff !important; color: var(--vv-navy) !important; }
.vv-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); color: #91a5c4; font-size: 11px; }
.vv-footer-legal { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.vv-footer-bottom a { color: #91a5c4 !important; font-size: inherit; text-decoration: none; }
@media (max-width: 991px) {
  .vv-footer-main { grid-template-columns: 1.4fr 1fr 1fr; gap: 35px; }
  .vv-footer-brand { grid-column: 1 / -1; }
  .vv-footer-extra { grid-template-columns: 1fr 1fr; gap: 35px; }
}
@media (max-width: 767px) {
  #site-footer.vv-footer > .container { width: calc(100% - 36px); }
  .vv-footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; padding-bottom: 40px; }
  .vv-footer-brand { grid-column: 1 / -1; }
  .vv-footer-extra { grid-template-columns: 1fr; gap: 35px; }
}
@media (max-width: 440px) {
  .vv-footer-main { grid-template-columns: 1fr 1fr; }
  .vv-footer-quicklinks-grid { grid-template-columns: 1fr; }
  .vv-footer-bottom { display: block; }
  .vv-footer-bottom > * { margin-bottom: 13px; }
}

/* Shared editorial spacing and typography across the original Laravel pages. */
body { font-size: 15px; }
body p, body li, body input, body select, body textarea, body button { font-family: 'Inter',Arial,sans-serif; }
body h1, body h2, body h3, body h4, body h5 { letter-spacing: -.04em; }
#main-banner-page > .container,
#our-services > .container,
#our-blog > .container,
#our-product > .container,
#ourfaq > .container,
#aboutus > .container,
#main-banner-page.works-header + section > .container { width: calc(100% - 64px); max-width: 1320px; }
#our-services,
#our-blog,
#our-product,
#ourfaq,
#aboutus { margin-top: 0 !important; padding-top: clamp(70px,7vw,105px) !important; padding-bottom: clamp(70px,7vw,105px) !important; }
#our-services p,
#our-blog p,
#our-product p,
#ourfaq p,
#aboutus p { font-size: 15px; line-height: 1.75; }

/* A white navigation bar and a framed campaign image use the existing slide assets. */
.site-header .navbar:not(.fixedmenu) { background: rgba(249,252,255,.97) !important; box-shadow: 0 1px 0 rgba(8,26,69,.09); backdrop-filter: blur(16px); }
.site-header .navbar:not(.fixedmenu) .logo-default { display: none !important; }
.site-header .navbar:not(.fixedmenu) .logo-scrolled { display: inline-block !important; }
.site-header .navbar:not(.fixedmenu) .nav-link { color: var(--vv-ink) !important; }
.site-header .navbar:not(.fixedmenu) .nav-link:hover,
.site-header .navbar:not(.fixedmenu) .nav-link.menuactive { color: var(--vv-blue) !important; }
.site-header .navbar:not(.fixedmenu) .sidemenu_btn > span { background: var(--vv-ink) !important; }
.site-header .dropdown-menu.megamenu { background: #fff !important; border: 1px solid var(--vv-line) !important; border-radius: 0 0 18px 18px; box-shadow: 0 25px 55px rgba(8,26,69,.17); }
.site-header .dropdown-menu.megamenu .dropdown-item { color: var(--vv-ink) !important; font-family: 'Inter',Arial,sans-serif; font-size: 13px; font-weight: 600; white-space: normal; }
.site-header .dropdown-menu.megamenu .dropdown-menu-title { color: var(--vv-blue) !important; font-weight: 800; }
.site-header .dropdown-menu.megamenu .dropdown-item:hover { background: var(--vv-paper) !important; color: var(--vv-blue) !important; }

#main-banner-area { padding: 106px 24px 35px !important; }
#main-banner-area .forcefullwidth_wrapper_tp_banner,
#main-banner-area #revo_main_wrapper { width: min(100%,1420px) !important; max-width: 1420px !important; margin: 0 auto !important; top: auto !important; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 65px rgba(8,26,69,.13); }
#main-banner-area #rev_main { width: 100% !important; }
#main-banner-area .bg-overlay.opacity-7 { background: linear-gradient(90deg,rgba(5,25,56,.58),rgba(8,55,95,.22) 52%,rgba(34,124,195,.12)) !important; }
#main-banner-area .slider_text { top: auto !important; bottom: clamp(32px,5.5vw,78px) !important; left: clamp(35px,6vw,94px) !important; width: min(770px,calc(100% - 150px)) !important; text-align: left !important; }
#main-banner-area .slider_text h1,
#main-banner-area .slider_text h2,
#main-banner-area .slider_text h3 { color: #fff !important; font-size: clamp(32px,4.9vw,70px) !important; line-height: 1.02 !important; letter-spacing: -.055em; text-shadow: 0 3px 20px rgba(0,0,0,.18); }
#main-banner-area .slider_text p { max-width: 630px; color: rgba(255,255,255,.92) !important; font-size: clamp(13px,1.25vw,17px); line-height: 1.6; }
#main-banner-area .slider_text a.button { background: var(--vv-aqua) !important; border-color: var(--vv-aqua) !important; color: var(--vv-navy) !important; }
#main-banner-area .slider_text a.button:hover { background: #fff !important; border-color: #fff !important; color: var(--vv-navy) !important; }
#main-banner-area .revicon { top: auto; right: clamp(42px,5vw,90px); bottom: 72px; transform: none; }
#main-banner-area .revicon li a { color: #fff; }
#main-banner-area .vv-hero-nav { top: calc(50% + 35px); left: clamp(35px,4vw,65px); right: clamp(125px,11vw,180px); }

/* Secondary banners keep their original background photos and content. */
#main-banner-page.page-header:not(:has(.blackcolor h1)) { display: flex; align-items: center; width: calc(100% - 48px); max-width: 1420px; min-height: 370px; margin: 106px auto 0; padding: 65px 0 !important; overflow: hidden; border-radius: 20px; background-position: center center !important; background-attachment: scroll !important; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) > .overlay.overlay-dark { background: linear-gradient(90deg,rgba(5,21,51,.78),rgba(12,63,105,.5) 62%,rgba(53,138,193,.2)) !important; opacity: 1 !important; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) > .container { position: relative; z-index: 2; display: flex; flex-direction: column-reverse; align-items: start; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) > .container > .row { width: 100%; margin: 0; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) > .container > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin: 0 !important; padding: 0 !important; text-align: left !important; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .title-wrap { align-self: flex-start; width: auto; margin: 0 0 23px; padding: 7px 12px; transform: none; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; background: rgba(255,255,255,.11) !important; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .title-wrap .row { margin: 0; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .title-wrap [class*="col-"] { padding: 0; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .title-wrap h3 { float: none !important; margin: 0 !important; color: #fff !important; font-family: 'Inter',Arial,sans-serif !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .title-wrap h3 * { color: inherit !important; font: inherit; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) h1,
#main-banner-page.page-header:not(:has(.blackcolor h1)) h2 { max-width: 960px; margin: 0 0 12px !important; color: #fff !important; font-size: clamp(38px,5vw,70px) !important; line-height: 1.04 !important; letter-spacing: -.05em; text-align: left !important; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) p { max-width: 750px; margin: 0 !important; color: rgba(255,255,255,.9) !important; font-size: clamp(14px,1.3vw,17px); text-align: left !important; }

/* Filters, card copy, article text and forms on listing and detail pages. */
#services-filter { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin: 0 0 38px !important; }
#services-filter .cbp-filter-item { margin: 0 !important; padding: 0 !important; border: 0 !important; }
#services-filter .cbp-filter-item a { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px; border: 1px solid var(--vv-line); border-radius: 999px; background: #fff; color: var(--vv-ink); font-size: 12px; font-weight: 700; }
#services-filter .cbp-filter-item.cbp-filter-item-active a,
#services-filter .cbp-filter-item a:hover { background: var(--vv-navy); border-color: var(--vv-navy); color: #fff; }
#our-services .services-content,
.team-box .team-content,
#our-blog .news_desc { text-align: left !important; }
#our-services .services-content .button-readmore { color: var(--vv-blue) !important; font-size: 13px; font-weight: 800; }
#our-services .services-content .button-readmore::after { content: ''; font-size: 18px; font-weight: 400; }
#our-services .services-content.heightfix { height: auto !important; min-height: 230px !important; max-height: none !important; }
#our-services .services-content p.minheight { min-height: 0 !important; }
#main-banner-page.works-header + section.padding { padding: clamp(70px,7vw,105px) 0 !important; background: var(--vv-paper); }
#main-banner-page.works-header + section .team-box { display: flex; flex-direction: column; }
#main-banner-page.works-header + section .team-box .team-content { display: flex; flex: 1; flex-direction: column; }
#main-banner-page.works-header + section .team-box .team-content p:last-child { margin-top: auto !important; text-align: left !important; }
#main-banner-page.works-header + section .team-box .image img { object-fit: cover; }
#main-banner-page.works-header + section form .form-control,
#ourfaq form .form-control { min-height: 48px; border: 1px solid var(--vv-line) !important; border-radius: 12px; background: #fff; color: var(--vv-ink); font-size: 13px; }
#main-banner-page.works-header + section form button.form-control,
#ourfaq form button.form-control { background: var(--vv-navy) !important; border-color: var(--vv-navy) !important; color: #fff !important; }
#our-blog .news_desc h4 { line-height: 1.25 !important; }
#our-blog .news_desc .meta-tags { margin: 12px 0 18px !important; }
#our-blog .news_desc p.minheightblog { min-height: 0 !important; }
#ourfaq #accordion .card { overflow: hidden; margin-bottom: 10px; border: 1px solid var(--vv-line); border-radius: 14px; background: #fff; box-shadow: none; }
#ourfaq #accordion .card-header { padding: 18px 23px; }
#ourfaq #accordion .card-link { color: var(--vv-ink) !important; font-size: 16px; font-weight: 700; }
#ourfaq #accordion .card-body { padding: 0 23px 22px; color: var(--vv-muted); }
#aboutus .container.aboutus > .row { row-gap: 28px; }
#aboutus .container.aboutus .image img { border-radius: 18px; }

@media (max-width: 767px) {
  #main-banner-area { padding: 88px 11px 20px !important; }
  #main-banner-area .forcefullwidth_wrapper_tp_banner,
  #main-banner-area #revo_main_wrapper { border-radius: 12px; }
  #main-banner-area .forcefullwidth_wrapper_tp_banner,
  #main-banner-area #revo_main_wrapper,
  #main-banner-area #rev_main { height: clamp(260px,70vw,390px) !important; top: auto !important; }
  #main-banner-area .slider_text { bottom: 23px !important; left: 24px !important; width: calc(100% - 78px) !important; }
  #main-banner-area .slider_text h1,
  #main-banner-area .slider_text h2,
  #main-banner-area .slider_text h3 { font-size: clamp(24px,7vw,42px) !important; }
  #main-banner-area .slider_text p { font-size: 12px; }
  #main-banner-area .revicon { display: none; }
  #main-banner-area .vv-hero-nav { top: calc(50% + 34px); left: 7px; right: 7px; }
  #main-banner-page.page-header:not(:has(.blackcolor h1)) { width: calc(100% - 22px); min-height: 310px; margin-top: 88px; padding: 45px 0 !important; border-radius: 13px; }
  #main-banner-page > .container,
  #our-services > .container,
  #our-blog > .container,
  #our-product > .container,
  #ourfaq > .container,
  #aboutus > .container,
  #main-banner-page.works-header + section > .container { width: calc(100% - 36px); }
  #main-banner-page.page-header:not(:has(.blackcolor h1)) h1,
  #main-banner-page.page-header:not(:has(.blackcolor h1)) h2 { font-size: clamp(32px,8vw,46px) !important; }
  #main-banner-page.page-header:not(:has(.blackcolor h1)) p { font-size: 13px; }
  #our-services,#our-blog,#our-product,#ourfaq,#aboutus { padding-top: 62px !important; padding-bottom: 62px !important; }
}

/* Header alignment follows the preview while retaining the original CMS routes. */
.site-header .navbar { padding: 0 !important; }
.site-header .vv-header-inner { display: flex; align-items: center; gap: clamp(13px,1.25vw,24px); width: min(100%,1500px); min-height: 86px; margin: 0 auto !important; padding: 0 clamp(20px,3vw,48px) !important; }
.site-header .vv-header-inner .navbar-brand { flex: 0 0 clamp(130px,10.5vw,164px); width: clamp(130px,10.5vw,164px); margin: 0 !important; padding: 0 !important; }
.site-header .vv-header-inner .navbar-brand img { width: 100%; height: auto; }
.site-header .vv-main-navigation { flex: 1 1 auto; min-width: 0; justify-content: flex-end; margin: 0 !important; }
.site-header .vv-primary-nav { display: flex; align-items: center; gap: clamp(0px,.45vw,8px); margin: 0 !important; padding: 0 !important; }
.site-header .vv-primary-nav > .nav-item { flex: 0 0 auto; margin: 0 !important; white-space: nowrap; }
.site-header .vv-primary-nav > .nav-item > .nav-link { display: inline-flex; align-items: center; min-height: 42px; margin: 0 !important; padding: 9px clamp(5px,.55vw,9px) !important; border-radius: 99px; color: var(--vv-ink) !important; font-family: 'Inter',Arial,sans-serif !important; font-size: clamp(11px,.84vw,13px) !important; font-weight: 700 !important; letter-spacing: -.012em !important; line-height: 1.2 !important; text-transform: none !important; }
.site-header .vv-primary-nav > .nav-item > .nav-link::before { display: none; }
.site-header .vv-primary-nav > .nav-item > .nav-link:hover,
.site-header .vv-primary-nav > .nav-item > .nav-link.menuactive { background: #eaf5fb; color: var(--vv-blue) !important; }
.site-header .vv-primary-nav .dropdown-toggle::after { margin-left: 5px; font-size: 10px; }
.site-header .vv-language-switch { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; margin-left: clamp(3px,.8vw,14px); color: var(--vv-muted); font-family: 'Inter',Arial,sans-serif; font-size: 11px; font-weight: 700; white-space: nowrap; }
.site-header .vv-language-switch a { color: var(--vv-muted) !important; opacity: .68; text-decoration: none; }
.site-header .vv-language-switch a:hover,
.site-header .vv-language-switch a.is-active { color: var(--vv-ink) !important; opacity: 1; }
.site-header .vv-language-switch span { width: 1px; height: 12px; background: #c5d2e3; }
.site-header .vv-header-cta { position: static !important; flex: 0 0 auto; display: block !important; margin: 0 !important; padding: 0 !important; }
.site-header .vv-header-cta a.button { display: inline-flex !important; align-items: center; justify-content: center; gap: 18px; width: auto !important; min-height: 47px; margin: 0 !important; padding: 10px 18px !important; border: 1px solid var(--vv-aqua) !important; border-radius: 999px !important; background: var(--vv-aqua) !important; color: var(--vv-navy) !important; font-family: 'Inter',Arial,sans-serif !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.2; white-space: nowrap; transform: none !important; }
.site-header .vv-header-cta a.button:hover { border-color: #d2f1fc !important; background: #d2f1fc !important; color: var(--vv-navy) !important; box-shadow: 0 10px 26px rgba(168,221,242,.26) !important; }
.site-header .vv-header-cta a.button span { font-size: 20px; font-weight: 400; line-height: .8; }
.site-header .vv-primary-nav .vv-products-dropdown { position: relative; }
.site-header .vv-primary-nav .vv-products-dropdown > .megamenu { left: 0; top: 100%; width: min(830px,calc(100vw - 290px)); max-height: min(70vh,620px); overflow: auto; padding: 18px !important; border-radius: 17px !important; background-image: none !important; }
.site-header .vv-primary-nav .vv-products-dropdown > .megamenu > li > .container { width: 100%; max-width: none; padding: 0 7px; }
.site-header .vv-primary-nav .vv-products-dropdown > .megamenu .row { margin: 0 -6px; }
.site-header .vv-primary-nav .vv-products-dropdown > .megamenu .row > [class*="col-"] { padding: 0 6px; }
.site-header .vv-primary-nav .vv-products-dropdown .vv-menu-all { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 0 14px; padding: 6px 8px; color: var(--vv-ink) !important; font-family: 'Inter',Arial,sans-serif; font-size: 13px; font-weight: 800; text-decoration: none; }
.site-header .vv-primary-nav .vv-products-dropdown .vv-menu-all:hover { color: var(--vv-blue) !important; }
.site-header .vv-primary-nav .vv-products-dropdown .dropdown-item { display: block; margin: 0; padding: 7px 8px !important; border-radius: 8px; font-size: 11px !important; line-height: 1.4 !important; }
.site-header .vv-primary-nav .vv-products-dropdown .dropdown-menu-title { margin: 0 0 5px; color: var(--vv-blue) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .07em; text-transform: uppercase; }
.site-header .vv-primary-nav .vv-products-dropdown .dropdown-menu-title hr { display: none; }
.site-header #sidemenu_toggle { top: 50%; right: 16px; margin: 0; transform: translateY(-50%); }

@media (min-width: 1200px) {
  .site-header #sidemenu_toggle { display: none !important; }
}
@media (max-width: 1199px) {
  .site-header .vv-header-inner { padding-right: 66px !important; }
  .site-header .vv-main-navigation { display: none !important; }
  .site-header .vv-header-inner .navbar-brand { margin-right: auto !important; }
}
@media (max-width: 767px) {
  .site-header .vv-header-inner { gap: 8px; min-height: 78px; padding: 0 55px 0 15px !important; }
  .site-header .vv-header-inner .navbar-brand { flex-basis: 120px; width: 120px; max-width: 120px; }
  .site-header .vv-language-switch { display: none; }
  .site-header .vv-header-cta a.button { min-height: 38px; padding: 8px 11px !important; font-size: 11px !important; gap: 8px; }
  .site-header .vv-header-cta a.button span { font-size: 15px; }
  #main-banner-area { padding-top: 91px !important; }
  #main-banner-page.page-header:not(:has(.blackcolor h1)) { margin-top: 91px; }
}
@media (max-width: 380px) {
  .site-header .vv-header-inner .navbar-brand { flex-basis: 105px; width: 105px; max-width: 105px; }
  .site-header .vv-header-cta a.button { font-size: 10px !important; padding: 7px 8px !important; }
}

/* The CMS stores the EN/DE introduction in one heading and TR in two. */
.vv-intro-copy .heading-title h2.vv-intro-one-heading { margin: 0 !important; }
.vv-intro-copy .heading-title h2.vv-intro-one-heading > .vv-intro-headline { display: block; margin-top: 20px; color: var(--vv-blue) !important; font-family: 'Bricolage Grotesque','Inter',Arial,sans-serif !important; font-size: clamp(42px,4.4vw,66px) !important; font-weight: 700 !important; line-height: 1.02 !important; letter-spacing: -.055em !important; text-transform: none !important; }
.vv-intro-copy .heading-title h2.vv-intro-one-heading > .vv-intro-headline * { color: inherit !important; font: inherit; letter-spacing: inherit; text-transform: inherit; }

/* Reserve room for the absolute header, then size each original page banner by its copy. */
body:has(> #main-banner-page) { padding-top: 110px; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) { min-height: 410px; margin: 0 auto !important; padding: clamp(62px,6vw,85px) 0 !important; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) > .container { justify-content: center; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .page-titles { width: 100%; max-width: 100%; margin: 0 !important; padding: 0 !important; transform: none !important; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .page-titles > .vv-empty-copy { display: none !important; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .page-titles h1,
#main-banner-page.page-header:not(:has(.blackcolor h1)) .page-titles h2 { display: block; width: 100%; max-width: 1000px; margin: 0 0 8px !important; color: #fff !important; font-family: 'Bricolage Grotesque','Inter',Arial,sans-serif !important; font-size: clamp(36px,4.25vw,60px) !important; font-weight: 700 !important; letter-spacing: -.052em !important; line-height: 1.04 !important; text-align: left !important; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .page-titles h1 strong,
#main-banner-page.page-header:not(:has(.blackcolor h1)) .page-titles h2 strong { font-weight: inherit; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .page-titles p { max-width: 760px; margin: 21px 0 0 !important; color: rgba(255,255,255,.9) !important; font-size: clamp(14px,1.2vw,16px) !important; line-height: 1.65 !important; text-align: left !important; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .page-titles p br:first-child { display: none; }
#main-banner-page.page-header:not(:has(.blackcolor h1)) .title-wrap { margin-bottom: 22px; }
#main-banner-page:has(.blackcolor h1) { padding-top: 25px !important; }

@media (max-width: 767px) {
  .vv-intro-copy .heading-title h2.vv-intro-one-heading > .vv-intro-headline { font-size: clamp(34px,9vw,48px) !important; }
  body:has(> #main-banner-page) { padding-top: 92px; }
  #main-banner-page.page-header:not(:has(.blackcolor h1)) { min-height: 310px; padding: 48px 0 !important; }
  #main-banner-page.page-header:not(:has(.blackcolor h1)) .page-titles h1,
  #main-banner-page.page-header:not(:has(.blackcolor h1)) .page-titles h2 { font-size: clamp(31px,8vw,45px) !important; }
  #main-banner-page.page-header:not(:has(.blackcolor h1)) .page-titles p { font-size: 13px !important; }
}

/* Original listing content and links, with the preview's card rhythm. */
#our-services .services-content,
#our-blog #blog-measonry .news_desc,
#main-banner-page.works-header + section .team-content { display: flex; flex-direction: column; align-items: flex-start; }
#our-services .services-content > p:last-child,
#our-blog #blog-measonry .news_desc > a.button,
#main-banner-page.works-header + section .team-content > p:last-child { margin-top: auto !important; }
#our-services .services-content > p:last-child,
#main-banner-page.works-header + section .team-content > p:last-child { text-align: left !important; }
#our-services .services-content > p:last-child a.button,
#our-blog #blog-measonry .news_desc > a.button,
#main-banner-page.works-header + section .team-content > p:last-child a.button { min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--vv-blue) !important; font-size: 13px; font-weight: 800; text-decoration: none; transform: none !important; }
#our-services .services-content > p:last-child a.button::after,
#our-blog #blog-measonry .news_desc > a.button::after,
#main-banner-page.works-header + section .team-content > p:last-child a.button::after { content: ''; font-size: 18px; font-weight: 400; }
#our-services .services-content > p:last-child a.button:hover,
#our-blog #blog-measonry .news_desc > a.button:hover,
#main-banner-page.works-header + section .team-content > p:last-child a.button:hover { color: var(--vv-navy) !important; background: transparent !important; }
#our-blog #blog-measonry .news_item { display: flex; flex-direction: column; }
#our-blog #blog-measonry .news_desc { flex: 1; min-height: 230px; }
#our-blog #blog-measonry .news_desc > p { margin-bottom: 24px !important; }
.pagination { gap: 6px; }
.pagination .page-link { min-width: 39px; min-height: 39px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--vv-line); border-radius: 10px !important; background: #fff; color: var(--vv-ink); font-size: 12px; font-weight: 700; }
.pagination .page-item.active .page-link,
.pagination .page-link:hover { border-color: var(--vv-blue); background: var(--vv-blue); color: #fff; }

/* Work cards: keep every caption and link readable when the original hover layer appears. */
#main-banner-page.works-header + section .team-box .team-content.teamworksfix { height: auto !important; min-height: 185px; max-height: none !important; }
#main-banner-page.works-header + section .team-box:is(:hover,:focus-within) .team-content { background: linear-gradient(115deg,#075c97,#49b7e4) !important; }
#main-banner-page.works-header + section .team-box:is(:hover,:focus-within) .team-content,
#main-banner-page.works-header + section .team-box:is(:hover,:focus-within) .team-content * { color: #fff !important; }
#main-banner-page.works-header + section .team-box:is(:hover,:focus-within) .team-content a.button { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
#main-banner-page.works-header + section .team-box:is(:hover,:focus-within) .image img { -webkit-transform: scale(1.01) !important; transform: scale(1.01) !important; }
#main-banner-page.works-header + section .team-box .image img { transition: transform .3s ease; }

/* The contact details stay CMS-owned; only their four-column presentation changes. */
#stayconnect1:has(.contact-box) { padding: clamp(68px,7vw,100px) 0 !important; background: var(--vv-paper); }
#stayconnect1:has(.contact-box) .container.whitebox { width: calc(100% - 64px); max-width: 1320px; margin: 0 auto !important; padding: 0; }
#stayconnect1:has(.contact-box) .container.whitebox > .row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 17px; margin: 0; }
#stayconnect1:has(.contact-box) .container.whitebox > .row > .col-md-12 { grid-column: 1 / -1; width: 100%; max-width: none; margin: 39px 0 5px !important; padding: 0; color: var(--vv-ink); font-family: 'Bricolage Grotesque','Inter',Arial,sans-serif; font-size: clamp(20px,2vw,27px); font-weight: 700; letter-spacing: -.035em; line-height: 1.2; text-align: left; }
#stayconnect1:has(.contact-box) .container.whitebox > .row > .col-md-12:first-child { margin-top: 0 !important; }
#stayconnect1:has(.contact-box) .container.whitebox > .row > .col-md-12::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 12px; vertical-align: 3px; border-radius: 50%; background: var(--vv-aqua); box-shadow: 0 0 0 5px #eaf7fd; }
#stayconnect1:has(.contact-box) .container.whitebox > .row > [class*="col-lg-3"] { width: 100%; max-width: none; margin: 0; padding: 0; }
#stayconnect1:has(.contact-box) .widget { display: flex; align-items: flex-start; width: 100%; height: 100%; min-height: 205px; margin: 0 !important; padding: 27px !important; border: 1px solid var(--vv-line); border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(8,26,69,.045) !important; text-align: left !important; }
#stayconnect1:has(.contact-box) .contact-box { width: 100%; min-width: 0; }
#stayconnect1:has(.contact-box) .icon-contact { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 0 24px; border-radius: 13px; background: #eaf5fb; color: var(--vv-blue) !important; font-size: 20px; }
#stayconnect1:has(.contact-box) .contact-box p { margin: 0 !important; color: var(--vv-ink); font-size: clamp(13px,1.02vw,15px); font-weight: 600; line-height: 1.65; text-align: left; overflow-wrap: anywhere; }
#stayconnect1:has(.contact-box) .contact-box p a { color: inherit; text-decoration: none; }
#stayconnect1:has(.contact-box) .contact-box p a:hover { color: var(--vv-blue); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 991px) {
  #stayconnect1:has(.contact-box) .container.whitebox > .row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575px) {
  #stayconnect1:has(.contact-box) .container.whitebox { width: calc(100% - 36px); }
  #stayconnect1:has(.contact-box) .container.whitebox > .row { grid-template-columns: 1fr; gap: 12px; }
  #stayconnect1:has(.contact-box) .widget { min-height: 0; padding: 23px !important; }
  #stayconnect1:has(.contact-box) .icon-contact { margin-bottom: 18px; }
}

/* FAQ uses a shorter legacy overlay; cover the whole image and calm the long heading. */
#main-banner-page.faq-header > .overlay.overlay-dark { inset: 0; width: 100%; height: 100% !important; }
#main-banner-page.faq-header .page-titles h1 { max-width: 980px; font-size: clamp(36px,4.2vw,58px) !important; }
#main-banner-page.faq-header .page-titles p { max-width: 760px; }

/* Services catalog: existing images and copy, with the preview's clean card hierarchy. */
#services-filter .cbp-filter-item .vv-service-filter { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 16px; border: 1px solid var(--vv-line); border-radius: 999px; background: #fff; color: var(--vv-ink); font-family: 'Inter',Arial,sans-serif; font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; }
#services-filter .cbp-filter-item.cbp-filter-item-active .vv-service-filter,
#services-filter .cbp-filter-item .vv-service-filter:hover { border-color: var(--vv-navy); background: var(--vv-navy); color: #fff; }
#our-services .services-main > .image { margin: 0 !important; }
#our-services .services-main > .image img { aspect-ratio: 16 / 10; object-fit: contain; }
#our-services .services-main:hover img { transform: scale(1.015) !important; }
#our-services .services-main .services-content { display: flex; flex-direction: column; align-items: flex-start; height: auto !important; min-height: 245px !important; max-height: none !important; margin: 0 !important; padding: 24px !important; text-align: left !important; }
#our-services .services-content .vv-service-eyebrow { margin-bottom: 13px; color: var(--vv-blue); font-family: 'Inter',Arial,sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .14em; line-height: 1.2; }
#our-services .services-content h5 { margin: 0 0 12px !important; font-size: clamp(21px,1.8vw,27px); line-height: 1.12; }
#our-services .services-content p { margin: 0 0 22px !important; color: var(--vv-muted); font-size: 13px; line-height: 1.6; }
#our-services .services-content .button-readmore { align-self: flex-start; margin-top: auto; padding: 0 !important; color: var(--vv-blue) !important; font-size: 13px; font-weight: 800; text-decoration: none !important; }
#our-services .services-content .button-readmore::after { position: static !important; display: inline-block; width: 1em !important; height: 1em !important; margin: 0 0 0 8px !important; background: currentColor !important; content: ''; font-size: 18px; font-weight: 400; line-height: 1; vertical-align: -1px; }
#our-services .services-content .button-readmore:hover { color: var(--vv-navy) !important; }
#services-measonry.vv-services-fallback,
#services-measonry.vv-services-fallback .cbp-wrapper { position: static !important; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; height: auto !important; }
#services-measonry.vv-services-fallback .cbp-item { position: static !important; display: block !important; width: auto !important; transform: none !important; }
#services-measonry.vv-services-fallback .cbp-item[hidden] { display: none !important; }

/* About metrics retain their CMS numbers and supporting sentence. */
#bg-counters.vv-about-counters { padding: clamp(68px,7vw,95px) 0 !important; background: #dceff9 !important; }
#bg-counters.vv-about-counters > .container { width: calc(100% - 64px); max-width: 1080px; }
.vv-about-counter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(45px,12vw,180px); align-items: center; justify-content: center; text-align: center; }
.vv-about-number { color: var(--vv-navy); font-family: 'Bricolage Grotesque','Inter',Arial,sans-serif; font-size: clamp(68px,8vw,112px); font-weight: 700; letter-spacing: -.07em; line-height: 1; white-space: nowrap; }
.vv-about-number > span:last-child { font-size: .56em; vertical-align: 12%; }
.vv-about-counter h3 { margin: 16px 0 0; color: var(--vv-navy) !important; font-family: 'Inter',Arial,sans-serif !important; font-size: 13px; font-weight: 800; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; }
.vv-about-counter-note { max-width: 740px; margin: 44px auto 0; color: var(--vv-navy) !important; font-size: 14px; line-height: 1.7; text-align: center; }

/* Service detail mirrors the preview's article rhythm around the original copy. */
#aboutus.vv-service-detail { padding: clamp(72px,7vw,110px) 0 !important; background: var(--vv-paper) !important; }
#aboutus.vv-service-detail > .container { width: calc(100% - 64px); max-width: 1040px; }
.vv-detail-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 34px; color: var(--vv-blue) !important; font-size: 13px; font-weight: 800; }
.vv-detail-back:hover { color: var(--vv-navy) !important; }
.vv-service-detail-heading { margin-bottom: 34px; }
.vv-service-detail-heading h2 { max-width: 860px; margin: 16px 0 0; color: var(--vv-ink) !important; font-size: clamp(39px,5vw,68px) !important; line-height: 1.04; }
.vv-service-detail-panel { overflow: hidden; border: 1px solid var(--vv-line); border-radius: 20px; background: #fff; box-shadow: var(--vv-shadow); }
.vv-service-detail-image { aspect-ratio: 16 / 8; overflow: hidden; background: #e8eff8; }
.vv-service-detail-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vv-service-detail-copy { max-width: 930px; margin: 0 auto; padding: clamp(28px,5vw,65px); overflow-wrap: anywhere; }
.vv-service-detail-copy h3 { margin: 0 0 28px; color: var(--vv-ink) !important; font-size: clamp(24px,2.8vw,36px); line-height: 1.2; }
.vv-service-detail-copy .vv-rich-copy { color: var(--vv-muted); font-size: 15px; line-height: 1.85; }
.vv-service-detail-copy .vv-rich-copy p { margin: 0 0 1.35em; color: inherit; line-height: inherit; }
.vv-service-detail-copy .vv-rich-copy h2,
.vv-service-detail-copy .vv-rich-copy h3,
.vv-service-detail-copy .vv-rich-copy h4 { margin: 1.7em 0 .55em; color: var(--vv-ink) !important; line-height: 1.15; }
.vv-service-detail-copy .vv-rich-copy img { max-width: 100%; height: auto; border-radius: 14px; }
.vv-service-detail-copy .vv-rich-copy a { color: var(--vv-blue); text-decoration: underline; text-underline-offset: 3px; }
.vv-detail-footer { display: flex; justify-content: center; margin-top: 37px; }

/* Service categories and their CMS entries use the same white mega menu as Products. */
.site-header .vv-primary-nav .vv-services-dropdown { position: relative; }
.site-header .vv-primary-nav .vv-services-dropdown > .megamenu { left: 0; top: 100%; width: min(830px,calc(100vw - 290px)); max-height: min(70vh,620px); overflow: auto; padding: 18px !important; border-radius: 17px !important; background: #fff !important; }
.site-header .vv-primary-nav .vv-services-dropdown > .megamenu > li > .container { width: 100%; max-width: none; padding: 0 7px; }
.site-header .vv-primary-nav .vv-services-dropdown .vv-menu-all { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 0 14px; padding: 6px 8px; color: var(--vv-ink) !important; font-family: 'Inter',Arial,sans-serif; font-size: 13px; font-weight: 800; }
.site-header .vv-primary-nav .vv-services-dropdown .vv-menu-all:hover { color: var(--vv-blue) !important; }
.site-header .vv-primary-nav .vv-services-dropdown:focus-within > .megamenu { display: block; }
.vv-services-menu-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.vv-services-menu-column { min-width: 0; }
.site-header .vv-services-menu-column a { display: block; padding: 7px 8px; border-radius: 8px; color: var(--vv-ink) !important; font-family: 'Inter',Arial,sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: normal; }
.site-header .vv-services-menu-column a:hover { background: var(--vv-paper); color: var(--vv-blue) !important; }
.site-header .vv-services-menu-column .vv-services-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 5px; color: var(--vv-blue) !important; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.vv-services-menu-heading span { font-size: 15px; font-weight: 400; }
.side-menu .vv-side-service-category { margin-top: 12px; color: var(--vv-aqua) !important; font-weight: 800 !important; }
.side-menu .vv-side-service-link { padding-left: 25px !important; font-size: 13px !important; }

/* The work card action stays clean on the blue hover background. */
#main-banner-page.works-header + section .team-box .team-content a.button,
#main-banner-page.works-header + section .team-box:is(:hover,:focus-within) .team-content a.button { border-bottom: 0 !important; text-decoration: none !important; }

@media (max-width: 991px) {
  #services-measonry.vv-services-fallback,
  #services-measonry.vv-services-fallback .cbp-wrapper { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575px) {
  #services-measonry.vv-services-fallback,
  #services-measonry.vv-services-fallback .cbp-wrapper { grid-template-columns: 1fr; }
  #bg-counters.vv-about-counters > .container,
  #aboutus.vv-service-detail > .container { width: calc(100% - 36px); }
  .vv-about-counter-grid { gap: 22px; }
  .vv-about-number { font-size: clamp(48px,12vw,68px); }
  .vv-about-counter h3 { font-size: 10px; }
  .vv-about-counter-note { margin-top: 32px; }
  .vv-service-detail-image { aspect-ratio: 16 / 10; }
  .vv-service-detail-copy { padding: 26px 20px; }
}

/* Decorative arrows are drawn icons, independent of the iOS emoji font. */
:root { --vv-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M5 5h14v14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
svg.vv-arrow-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.12em; fill: none; }
.vv-intro-copy a.button::after,
#our-services .services-content .button-readmore::after,
#our-services .services-content > p:last-child a.button::after,
#our-blog #blog-measonry .news_desc > a.button::after,
#main-banner-page.works-header + section .team-content > p:last-child a.button::after { content: ''; display: inline-block; width: 1em !important; height: 1em !important; background: currentColor !important; -webkit-mask-image: var(--vv-arrow-mask); mask-image: var(--vv-arrow-mask); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; vertical-align: -.12em; }
#our-services .services-content > p:last-child a.button::after,
#our-blog #blog-measonry .news_desc > a.button::after,
#main-banner-page.works-header + section .team-content > p:last-child a.button::after { margin-left: 8px; }

/* Reserve the existing slider dimensions before its scripts start. */
#main-banner-area { --vv-hero-height: min(690px,calc((100vw - 48px) * .6052631579)); }
#main-banner-area .forcefullwidth_wrapper_tp_banner,
#main-banner-area #revo_main_wrapper,
#main-banner-area #rev_main { height: var(--vv-hero-height) !important; }
@media (min-width: 768px) and (max-width: 778px) {
  #main-banner-area { --vv-hero-height: min(520px,calc((100vw - 48px) * .6770833333)); }
}
@media (max-width: 767px) {
  #main-banner-area { --vv-hero-height: clamp(260px,70vw,390px); }
}
/* Show the existing first slide while Revolution initializes. */
#main-banner-area #rev_main:not(.revslider-initialised) { display: block !important; visibility: visible !important; }
#main-banner-area #rev_main:not(.revslider-initialised) > ul { display: block; position: relative; height: 100%; margin: 0; padding: 0; overflow: hidden; }
#main-banner-area #rev_main:not(.revslider-initialised) > ul > li { display: none; }
#main-banner-area #rev_main:not(.revslider-initialised) > ul > li:first-child { display: block !important; position: absolute; inset: 0; height: 100%; overflow: hidden; visibility: visible !important; opacity: 1 !important; }