/* ============================================================
VOCSO โ Support-Tier Pages ยท Shared Layout CSS (MERGED)
This bundle now INCLUDES the former modern-services-layout.css
so support pages load only the support-* files.
Part A = folded-in modern-services-layout.css
Part B = support-tier-specific rules (override Part A)
============================================================ */
/* ===================== PART A โ modern-services-layout (folded in) ===================== */
.slider {
position: relative;
width: 100%;
display: grid;
overflow: hidden;
padding: 3rem 0;
}
.slide {
display: grid;
transition: .5s;
height: 100%;
float: left;
clear: none
}
.ourbackend-services-box h2,
.ourbackend-services-box p {
color: var(--color-white-fixed) !important;
}
.whycustomWebdesign-block li.traffic-content p {
margin-bottom: .5rem;
padding-right: 8rem
}
.massonary-container {
list-style: none;
column-count: 2;
column-gap: 3rem;
margin-bottom: 0
}
.ourbackend-services-box .massonary-container li {
position: relative;
overflow: hidden;
transition: .3s linear;
background-image: linear-gradient(#35383c, #0000cd00);
padding: 1px !important;
border-radius: 2rem
}
.massonary-container li {
margin-bottom: 3.2rem !important;
padding-right: inherit !important;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid
}
.massonary-container li .fullservice-box {
margin-bottom: 0
}
.ourbackend-services-box .fullservice-box {
background: var(--color-neutral-dark);
}
.fullservice-box {
background: #f1f2f6;
color: var(--color-white-fixed);
padding: 4rem;
border-radius: 2rem;
text-align: left;
min-height: auto;
margin-bottom: 3rem
}
.backendServices-box-tile {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #35383c;
margin-bottom: 2rem;
padding-bottom: 2rem
}
body .backendServices-box-tile h2 {
text-transform: capitalize;
margin-bottom: 0 !important
}
.fullservice-box h2 {
font-size: 2.2rem !important;
line-height: 3rem !important
}
.ourbackend-services-box .fullservice-box img {
margin-bottom: 0 !important;
filter: brightness(0) saturate(100%) invert(59%) sepia(20%) saturate(665%) hue-rotate(101deg) brightness(95%) contrast(90%) !important;
}
.ourbackend-services-box .fullservice-box p {
font-size: 1.8rem;
line-height: 2.9rem;
margin-bottom: 1.5rem;
max-width: 100% !important;
font-weight: 400
}
.seedetails-backendservice {
position: absolute !important;
background: var(--color-secondary);
width: 100%;
left: 0;
bottom: -50px;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
padding: 0;
text-align: right;
transition: .3s linear
}
.ourbackend-services-box .massonary-container li:hover {
transform: translateY(-5px);
transition: .3s linear
}
.ourbackend-services-box .massonary-container li:hover .seedetails-backendservice {
bottom: 0;
transition: .3s linear
}
.seedetails-backendservice a {
color: var(--color-white-fixed);
display: block;
padding: 1rem 6rem 1rem 3rem;
font-size: 2rem;
font-weight: 500;
transition: .3s;
background: url(../images/white-next-arrow.svg) no-repeat;
background-position: 92% center !important;
background-repeat: no-repeat !important
}
.ordertowork h2 {
text-transform: capitalize
}
.faqs a {
font-size: 2rem;
font-weight: 600;
color: var(--color-text);
}
.iframe-cover embed {
position: absolute;
right: 0;
left: 0
}
@keyframes rotate-animation {
0% {
transform: rotate(0)
}
50% {
transform: rotate(180deg)
}
100% {
transform: rotate(360deg)
}
}
.text-center {
text-align: center
}
.vocso-stats-block-left .counter-main .counter-section h3 {
font-size: 5rem;
color: var(--color-text);
}
.vocso-stats-block-left .counter-main:after {
display: none
}
.darkmode #main #faq .card .card-header .btn-header-link,
.darkmode .HappyCustomers:before,
.darkmode .vocso-stats-block-left .counter-main .counter-mg {
background: var(--color-secondary);
}
.vocso-stats-block-left .counter-main .counter-mg {
background: var(--color-white-fixed);
box-shadow: 0 0 11px 4px rgb(0 0 0 / 4%) !important;
margin-right: 4rem;
padding: 3.8rem 4rem;
text-align: center;
border-radius: 1rem;
width: 32%;
margin-bottom: 4rem;
position: relative;
display: flex;
align-items: center;
justify-content: center
}
.dedicatedresources-main h2 {
max-width: 58% !important;
margin-bottom: 5rem !important
}
.letsfindResources {
text-align: center;
margin-top: 6rem
}
.letsfindResources p {
font-weight: 600;
font-size: 2rem;
margin-bottom: 3rem;
color: var(--color-text);
}
.letsfindResources .angularSchedule-btn {
margin: 0
}
.observedmetrics-main .content-blockscroll p,
.observedmetrics-main .traffic-content p {
font-size: 1.8rem;
font-weight: 400
}
.engage-vocso-backend-projects {
text-align: center;
padding-top: 6rem !important;
padding-bottom: 0
}
.engage-vocso-backend-projects p {
max-width: 50%;
margin: 2rem auto 0;
line-height: 3rem;
font-weight: 500;
color: var(--color-text);
}
.engageVocso-logo {
display: flex;
align-items: center;
justify-content: center;
margin: 2.5rem 0
}
.engageVocso-logo li {
margin-right: 3rem
}
.gem-government-darkmode-logo {
display: none
}
.engageVocso-logo li:last-child {
margin-right: 0
}
.vocso-stats-block {
background: #ececec;
position: relative;
overflow: hidden;
border-radius: 4rem 4rem 0 0;
/* clip-path: ellipse(145% 100% at 50% 100%) */
}
/* span.light-blue-gradient {
background: #e6f4f9;
width: 500px;
height: 300px;
display: inline-block;
position: absolute;
left: 0;
top: 0;
filter: blur(68px)
} */
.vocso-stats-block-left {
display: flex;
justify-content: end
}
.vocso-stats-block-left .counter-main {
padding: 0 4rem 0 0;
display: flex;
flex-wrap: wrap;
justify-content: end;
width: 100%;
position: relative
}
.vocso-stats-block-left .counter-main::before {
position: absolute;
content: '';
width: 500px;
height: 500px;
background: var(--color-white-fixed);
right: 19rem;
filter: blur(80px);
bottom: -15rem
}
.vocso-stats-block-left .counter-main .counter-mg {
background: var(--color-white-fixed);
box-shadow: 0 0 11px 4px rgb(0 0 0 / 4%) !important;
margin-right: 4rem;
padding: 3.8rem 2rem;
text-align: center;
border-radius: 1rem;
width: 32%;
margin-bottom: 4rem;
position: relative;
display: flex;
align-items: center;
justify-content: center
}
.vocso-stats-block-left .counter-main .counter-mg:last-child {
margin-right: 0 !important
}
.star-black-icon {
top: -2.4rem;
left: 0;
right: 0
}
.vocso-stats-block-left .counter-main .counter-section .counter-title {
margin-top: 0;
font-size: 1.8rem;
font-weight: 500;
color: var(--color-text);
}
.cheers-icon {
position: absolute
}
.confetti-icon {
top: -2.5rem
}
.star-red-small {
left: -1.2rem;
bottom: -1rem
}
.vocso-stats-block-right li img {
margin-right: 3rem;
}
.vocso-stats-block-right li {
padding-bottom: 1.3rem;
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
padding-left: 0rem;
font-weight: 600;
margin-bottom: 2rem;
color: var(--color-text);
text-align: left
}
.vocso-stats-block-right li svg {
margin-right: 2rem;
position: absolute;
left: 0
}
.black-strip-cta {
background: var(--color-neutral-dark);
text-align: center
}
.blackCTA-wrap {
display: inline-flex;
flex-direction: column;
align-items: center;
position: relative
}
.black-strip-cta h2,
.black-strip-cta h3 {
font-size: 3rem;
color: var(--color-white-fixed);
margin-bottom: 3.5rem
}
.blackCTA-wrap .btn-proposal {
margin-left: 0
}
.multiple-stars-icon {
position: absolute;
right: 6rem;
bottom: 2rem
}
.darkmode .faqs a:hover {
color: #59c9cb
}
.darkmode .slider .slide-track .slide,
.darkmode .vocso-stats-block {
background: var(--color-neutral-dark);
}
.darkmode .gem-government-daymode-logo,
.darkmode .light-blue-gradient,
.darkmode .vocso-stats-block-left .counter-main::before {
display: none
}
.darkmode .gem-government-darkmode-logo {
display: block
}
.darkmode .vocso-stats-block-right li img {
filter: invert(1);
}
.ppc-stats-counter .counter-main .counter-mg:last-child {
margin-right: 0 !important;
}
.faqs h2 {
max-width: 45% !important;
margin: initial !important;
text-align: left !important
}
.swiper-wrapper img {
width: 100%
}
.slider {
position: relative;
overflow: hidden
}
.seeCase-study-btn {
display: inline-flex;
font-size: 2rem;
font-weight: 600;
color: var(--color-white-fixed) !important;
transition: .3s linear;
margin-top: 3rem;
}
.engagemodalbox ul li img {
margin-right: 1.5rem
}
.darkmode .engagemodalbox h3 img,
.darkmode .engagemodalbox ul li img {
filter: invert(1)
}
.engagemodalbox h3 {
text-transform: capitalize
}
.engagementModals {
background: var(--color-bg-soft-fixed);
}
.ordertowork h2 {
font-weight: 600;
max-width: 45%;
margin: 0 auto 10rem;
text-align: center;
line-height: 6rem
}
.engagemodalbox {
background: var(--color-white-fixed);
padding: 5rem 5rem 10rem;
box-shadow: 0 0 31px 5px rgb(0 0 0 / 3%);
position: relative
}
.engagemodalbox h3 {
font-size: 2.8rem;
font-weight: 600;
padding-right: 0;
line-height: 3.5rem;
border-bottom: 0.1rem solid rgb(41 36 36 / 8%);
padding-bottom: 3rem;
margin-bottom: 3rem;
color: var(--color-text);
display: flex;
justify-content: flex-start;
align-items: flex-start
}
/* dark mode: soft LIGHT divider so it's visible on dark cards */
.darkmode .engagemodalbox h3 {
border-bottom-color: rgb(255 255 255 / 12%);
}
.engagemodalbox h3 img {
margin-right: 1.5rem
}
.engagemodalbox p,
.engagemodalbox ul li {
font-size: 1.8rem;
color: var(--color-text);
line-height: 3rem
}
.engagemodalbox ul {
margin-top: 5rem;
list-style: none
}
.engagemodalbox ul li {
padding-bottom: 1.3rem;
display: flex;
align-items: center;
position: relative;
padding-left: 0
}
.boxbtn {
position: absolute;
background: url(../images/white-next-arrow.svg) 70% center no-repeat var(--color-secondary);
width: 100%;
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
font-size: 2rem;
font-weight: 600;
text-transform: capitalize
}
.boxbtn,
.boxbtn:hover {
color: var(--color-white-fixed);
transition: .3s
}
.boxbtn:hover,
.engagemodalbox:hover a {
background: url(../images/white-next-arrow.svg) 72% center no-repeat var(--color-primary);
}
.darkmode .engagementModals {
background: var(--color-black-fixed);
}
.darkmode .engagemodalbox {
background: var(--color-neutral-dark);
}
.darkmode .engagemodalbox h3 img,
.darkmode .engagemodalbox ul li img {
filter: invert(1)
}
.engagementmodel-btn {
display: flex;
align-items: center;
justify-content: center
}
.engagementmodel-btn p {
width: 25%;
text-align: left;
margin-bottom: 0 !important;
font-weight: 500;
line-height: 2.8rem
}
.letsfindResources .angularSchedule-btn {
margin: 0
}
.angularSchedule-btn {
background: var(--color-primary);
color: var(--color-white-fixed) !important;
font-weight: 400 !important
}
.observedmetrics-main .content-blockscroll ul li p {
margin: 0;
}
.seeCase-study-btn img {
margin-left: 1rem;
transition: .3s linear
}
.seeCase-study-btn:hover img {
margin-left: 2rem;
transition: .3s linear
}
.increase-conversion {
padding-bottom: 13rem
}
.increase-conversion .nav-pills {
top: 12rem
}
.increase-conversion ul {
line-height: 3rem;
margin-bottom: 3rem;
}
ul.nav-pills {
top: 2rem;
position: sticky;
position: -webkit-sticky
}
.increase-conversion ul li {
padding-right: 15rem;
margin-bottom: 2rem;
height: auto;
display: flex;
align-items: center
}
.increase-conversion h2 {
margin: 0 0 3.3rem !important;
max-width: 100%;
text-align: left;
line-height: 1.2 !important;
color: var(--color-text);
}
.increase-conversion .nav p {
padding-right: 10rem
}
li.traffic-content p {
margin-bottom: 0
}
.increase-conversion p {
font-size: 2rem;
font-weight: 300;
color: var(--color-text);
line-height: 3rem;
margin-bottom: 5rem;
transition: .5s ease-in-out;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out
}
.increase-conversion ul li:last-child {
margin-bottom: 0
}
.scheduleCall-btn {
background: var(--color-secondary) !important;
border-radius: 1rem !important;
font-size: 2rem;
font-weight: 400 !important;
color: var(--color-white-fixed);
padding: 1.5rem 6.1rem .7em !important;
display: inline-block;
transition: .3s;
margin-top: 4rem
}
#trafficConversion {
top: -11rem
}
.overflowcontent-2 {
padding-top: 0
}
#section1,
#section2,
#section3,
#section4,
#section5,
#section6,
#section7,
#section8 {
padding-top: 120px
}
.content-blockscroll h3 {
font-size: 3.2rem;
font-weight: 400;
color: var(--color-text);
padding-right: 0;
position: relative;
line-height: 1.3;
padding-left: 10rem
}
.content-blockscroll h3 .bluenumbers {
content: "";
position: absolute;
left: 0;
width: 7.3rem;
height: 7.3rem;
background: var(--color-secondary-dark);
border-radius: 100rem;
font-size: 4.8rem;
font-weight: 600;
text-align: center;
color: var(--color-text-invert);
display: flex;
align-items: center;
justify-content: center
}
.black-text-color {
color: var(--color-text) !important
}
.orange-color {
color: var(--color-primary);
background: url(../images/highlight-1.svg) bottom right no-repeat;
padding-bottom: 1rem
}
.content-blockscroll p {
margin-top: 3.5rem;
padding-left: 10rem
}
.increase-conversion .orches-left h3 {
margin-bottom: 0
}
.increase-conversion .nav li h3 a {
font-size: 2.3rem;
font-weight: 300;
color: var(--color-text) !important;
background: var(--color-text-invert) !important;
margin-bottom: 0;
height: auto;
position: relative;
padding-left: 2.5rem;
display: flex;
align-items: center;
transition: .4s
}
.increase-conversion ul li .orches-left h3 a:before {
border-left: .3rem solid #feeae4;
height: 100%;
position: absolute;
content: "";
left: 0;
transition: .4s
}
.increase-conversion ul li .orches-left h3 a.active:before,
.we-orchestrate ul li .orches-left h3 a.active:before {
border-left: .3rem solid var(--accent-green-2);
transition: .4s
}
#section1 img,
#section2 img,
#section3 img,
#section4 img,
#section5 img,
#section6 img {
border-radius: 1.2rem
}
#testimonial-video .modal-dialog {
max-width: fit-content;
}
.observedmetrics-main .content-blockscroll ul li {
position: relative;
padding-left: 0;
padding-right: 0;
margin-left: 10rem;
}
.observedmetrics-main .content-blockscroll ul li::before {
position: absolute;
content: "";
left: 0;
top: 10px;
width: 20px;
height: 20px;
background: url(../images/sprite-images.webp) -366px -570px no-repeat;
filter: brightness(0) saturate(100%) invert(59%) sepia(37%) saturate(369%) hue-rotate(101deg) brightness(91%) contrast(92%);
}
.observedmetrics-main .content-blockscroll ul li p {
margin: 0;
padding-left: 3.5rem;
}
.observedmetrics-main .content-blockscroll p,
.observedmetrics-main .traffic-content p {
font-size: 1.8rem;
font-weight: 400;
}
.content-blockscroll h4 {
font-size: 2rem;
font-weight: 500;
color: var(--color-text);
padding-right: 0;
position: relative;
line-height: 5rem;
padding-left: 10rem;
}
.slide,
.slider {
place-items: center;
}
.slide-track {
display: flex;
animation: 90s linear infinite scroll;
}
.dedicatedresources-main .slider .slide-track .slide,
.dedicatedresources-main .slider .slide-track2 .slide {
background: var(--color-white-fixed);
border-radius: .5rem;
box-shadow: 0 0 40px 10px rgb(0 0 0 / 8%);
width: 235px;
height: 235px;
margin: 0 11px;
}
.dedicatedresources-main .slider .slide-track2 .slide a,
.dedicatedresources-main .slider .slide-track .slide a {
padding: 5rem 6rem;
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dedicatedresources-main .slider .slide h3 {
text-transform: capitalize;
font-weight: 300;
font-size: 1.8rem;
margin-top: 1rem;
color: var(--color-text);
text-align: center;
}
.slide-track2 {
display: flex;
animation: 90s linear infinite scroll2;
}
.slide-track,
.slide-track2 {
justify-content: space-between;
}
@keyframes scroll2 {
0% {
transform: translateX(calc(-150px * 5))
}
100% {
transform: translateX(0)
}
}
@keyframes scroll {
0% {
transform: translateX(0)
}
100% {
transform: translateX(calc(-150px * 10))
}
}
.darkmode .slider .slide-track .slide,
.darkmode .slider .slide-track2 .slide {
background: var(--color-neutral-dark);
}
.noAnchor-slide {
padding: 5rem 6rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* modern service css start */
@font-face {
font-family: 'SF Pro Display';
src: url('../fonts/SFProDisplay-BlackItalic.eot');
src: url('../fonts/SFProDisplay-BlackItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/SFProDisplay-BlackItalic.woff2') format('woff2'),
url('../fonts/SFProDisplay-BlackItalic.woff') format('woff'),
url('../fonts/SFProDisplay-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../fonts/SFProDisplay-Bold.eot');
src: url('../fonts/SFProDisplay-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/SFProDisplay-Bold.woff2') format('woff2'),
url('../fonts/SFProDisplay-Bold.woff') format('woff'),
url('../fonts/SFProDisplay-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../fonts/SFProDisplay-HeavyItalic.eot');
src: url('../fonts/SFProDisplay-HeavyItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/SFProDisplay-HeavyItalic.woff2') format('woff2'),
url('../fonts/SFProDisplay-HeavyItalic.woff') format('woff'),
url('../fonts/SFProDisplay-HeavyItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../fonts/SFProDisplay-LightItalic.eot');
src: url('../fonts/SFProDisplay-LightItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/SFProDisplay-LightItalic.woff2') format('woff2'),
url('../fonts/SFProDisplay-LightItalic.woff') format('woff'),
url('../fonts/SFProDisplay-LightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../fonts/SFProDisplay-Medium.eot');
src: url('../fonts/SFProDisplay-Medium.eot?#iefix') format('embedded-opentype'),
url('../fonts/SFProDisplay-Medium.woff2') format('woff2'),
url('../fonts/SFProDisplay-Medium.woff') format('woff'),
url('../fonts/SFProDisplay-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../fonts/SFProDisplay-Regular.eot');
src: url('../fonts/SFProDisplay-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/SFProDisplay-Regular.woff2') format('woff2'),
url('../fonts/SFProDisplay-Regular.woff') format('woff'),
url('../fonts/SFProDisplay-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../fonts/SFProDisplay-SemiboldItalic.eot');
src: url('../fonts/SFProDisplay-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/SFProDisplay-SemiboldItalic.woff2') format('woff2'),
url('../fonts/SFProDisplay-SemiboldItalic.woff') format('woff'),
url('../fonts/SFProDisplay-SemiboldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../fonts/SFProDisplay-ThinItalic.eot');
src: url('../fonts/SFProDisplay-ThinItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/SFProDisplay-ThinItalic.woff2') format('woff2'),
url('../fonts/SFProDisplay-ThinItalic.woff') format('woff'),
url('../fonts/SFProDisplay-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../fonts/SFProDisplay-UltralightItalic.eot');
src: url('../fonts/SFProDisplay-UltralightItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/SFProDisplay-UltralightItalic.woff2') format('woff2'),
url('../fonts/SFProDisplay-UltralightItalic.woff') format('woff'),
url('../fonts/SFProDisplay-UltralightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
font-display: swap;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'SF Pro Display', sans-serif !important;
}
h2 {
font-size: 5.6rem;
line-height: 1.2 !important;
}
.trust-badge span svg {
fill: var(--color-secondary-dark);
}
.main-counter-block {
display: flex;
align-items: center;
}
.slider,
.websiteoptimize-main {
position: relative;
overflow: hidden
}
.ppc-stats-counter .slider:last-of-type {
margin-top: 0
}
.slide-track-logo {
width: 100%;
display: flex;
animation: 20s linear infinite scroll;
justify-content: space-between;
margin-top: 0rem;
margin-bottom: 0rem
}
.slider .slide-track-logo .slide {
background: var(--color-white-fixed);
border-radius: .8rem;
padding: 4rem 2rem;
width: 190px;
height: 190px;
margin: 0 5rem
}
.massonary-container li .fullservice-box ul li {
margin-bottom: 1rem !important
}
.customdesign-main h1 b {
font-weight: 400
}
.websiteoptimize-main {
overflow: hidden;
position: relative
}
.websiteoptimize-main figure img {
box-shadow: none !important
}
.customdesign-main h1 {
font-weight: 700;
margin-top: 0;
font-size: 8rem !important;
margin-bottom: 0;
max-width: 80% !important;
text-transform: capitalize;
line-height: 9rem;
}
.ai-development-services-page #header-top {
position: absolute;
/* overflow: hidden; */
box-shadow: 0 0px 1px 0px rgb(255 255 255);
}
.ai-development-services-page .navbar-main {
background: none !important;
-webkit-backdrop-filter: blur(0px) !important;
backdrop-filter: blur(0px) !important;
}
.ai-development-services-page .customdesign-main {
margin-top: 0 !important;
}
.ai-development-services-page .navbar-main.navbar-light.scrolled .navbar-nav .nav-link,
.ai-development-services-page .home-header .navbar-main.scrolled .brandlogo-number .slogan .carousel-item a,
.ai-development-services-page .home-header .navbar-main.scrolled .carousel-item.active {
color: var(--color-black-fixed) !important;
}
.ai-development-services-page .navbar-main.navbar-light .navbar-nav .nav-link,
.ai-development-services-page .brandlogo-number .slogan .carousel-item a,
.ai-development-services-page .carousel-item.active {
color: var(--color-white-fixed) !important;
}
.ai-development-services-page .navbar-main .navbar-brand svg text {
fill: var(--color-white-fixed);
}
.ai-development-services-page #dark-mode-toggle svg {
fill: var(--color-white-fixed);
}
.ai-development-services-page .navbar-main.scrolled .navbar-brand svg text,
.ai-development-services-page .navbar-main.scrolled #dark-mode-toggle svg {
fill: var(--color-black-fixed);
}
.darkmode .ai-development-services-page .navbar-main.scrolled .navbar-brand svg text,
.darkmode .ai-development-services-page .navbar-main.scrolled #dark-mode-toggle svg {
fill: var(--color-white-fixed);
}
.darkmode .ai-development-services-page .navbar-main.navbar-light.scrolled .navbar-nav .nav-link,
.darkmode .ai-development-services-page .home-header .navbar-main.scrolled .brandlogo-number .slogan .carousel-item a,
.darkmode .ai-development-services-page .home-header .navbar-main.scrolled .carousel-item.active {
color: var(--color-white-fixed) !important;
}
.seedetails-backendservice a:hover {
background: var(--color-primary) url(../images/white-next-arrow.svg) no-repeat;
background-position: 94% center !important;
background-repeat: no-repeat !important;
}
.ai-development-services-page .home-header .form-inline {
box-shadow: none;
border-left: 1px solid rgb(255 255 255 / 16%);
}
.cta-btn-desktop {
position: relative;
overflow: hidden;
}
.customdesign-main {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.industry-detail p {
color: #86868b !important;
}
.counter-mg,
.ppc-stats-counter .counter-main .counter-mg {
margin-bottom: 0;
margin-right: 7rem
}
.customdesign-main p {
max-width: 56%;
color: #86868b !important;
font-weight: 500;
margin: 3rem auto 5rem 0;
padding: 0;
font-size: 2rem;
line-height: 1.6;
}
.customdesign-main h1 b:last-child {
margin-left: 0
}
.customdesign-main h1 b {
text-transform: none;
font-size: 7rem;
margin: 0 .7rem 0 1.2rem
}
.customdesign-main figure img {
box-shadow: 0 0 20px -8px var(--color-black-fixed);
}
@keyframes floatwithoutshadow {
0%,
100% {
box-shadow: none;
transform: translatey(0)
}
50% {
box-shadow: none;
transform: translatey(-9px)
}
}
li.traffic-content {
flex: none;
display: inline-block !important;
padding-right: 0 !important
}
.ppc-stats-counter .counter-main .counter-mg .counter-section .counter-title {
color: var(--color-white-fixed);
font-size: 1.6rem;
line-height: 1.3;
display: flex;
}
span.dots-wave-effect {
position: absolute;
content: "";
width: 1200px;
height: 325px;
top: 0px;
right: 0px;
background: url(../images/wave-dots-effect.webp) no-repeat;
}
#header-top {
top: 0 !important
}
/* Chrome, Edge, Safari */
small {
color: var(--color-primary);
}
body .speedupmysite-btn {
border: 2px solid var(--color-primary) !important;
margin-left: 0;
margin-right: 2rem;
}
body .speedupmysite-btn:hover {
border: 2px solid transparent !important
}
.countermain-block {
border-top: 1px solid;
padding: 5rem 0
}
.ppc-stats-counter .counter-main {
padding: 0;
position: relative;
display: flex;
margin-left: 8rem
}
.ppc-stats-counter .counter-main .counter-mg .counter-section h3 {
color: var(--color-white-fixed);
margin-bottom: 1rem;
font-size: 6rem;
font-weight: 800;
line-height: 5rem;
}
.ppc-stats-counter .countermain-block {
background: var(--color-black-fixed);
border-bottom: 1px solid
}
.ourbackend-services-box {
background: var(--color-black-fixed);
}
.main-counter-block h2,
.main-counter-block p {
font-weight: 600;
color: #86868b !important;
font-size: 2.6rem;
max-width: 33%;
display: inline-flex;
margin-bottom: 0;
line-height: 3.5rem
}
.ourbackendService-mainBanner figure {
display: flex;
bottom: inherit;
position: relative;
text-align: center;
margin: 0 auto;
width: 100%;
justify-content: end;
}
body .ourbackend-services-box p {
color: #86868b !important;
}
.btn-proposal.secondary-btn {
border: 2px solid var(--color-white-fixed) !important;
margin-left: 0;
background: transparent url(../images/white-next-arrow.svg) no-repeat 90% 50%;
/* background-color: rgb(255 255 255 / 35%); */
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(0px);
border-radius: 1rem;
}
.speed-banner-btns .secondary-btn {
padding: 2.4rem 6.9rem 2.4rem 4.2rem;
}
.btn-proposal.secondary-btn:hover {
background: var(--color-primary) url(../images/white-next-arrow.svg) no-repeat;
background-position: 92% center;
transition: all .3s;
color: var(--color-white-fixed);
border: 2px solid var(--color-secondary) !important;
}
.grow-banner:before {
display: none;
}
.industry-head {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 10px;
}
.industry-icon {
width: 40px;
height: 40px;
color: #00b65d;
flex-shrink: 0;
transition: 0.3s;
}
.industry-head h3 {
margin: 0;
font-size: 1.3rem;
font-weight: 600;
color: var(--color-text);
}
.tech-category ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
.tech-item {
display: flex;
align-items: center;
gap: 10px;
padding: 14px;
border-radius: 10px;
background: var(--color-white-fixed);
position: relative;
transition: .25s;
cursor: pointer;
}
/* dark mode */
.darkmode .tech-item {
background: #111827;
border-color: #374151;
color: var(--color-white-fixed);
}
.darkmode .tech-item:hover {
border-color: #00b65d;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.darkmode .tech-item:before {
background: var(--color-black-fixed);
}
.content-blockscroll table {
margin-left: 10rem;
width: 100%;
margin-bottom: 2rem;
}
.content-blockscroll table thead>tr {
--tw-bg-opacity: 1;
background-color: rgb(37 40 44 / var(--tw-bg-opacity, 1));
}
.content-blockscroll table thead>tr>th {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
font-weight: 500;
text-align: left;
padding: 1rem;
}
.content-blockscroll table thead>tr {
--tw-border-opacity: 1;
border: 1px solid rgb(236 236 236 / var(--tw-border-opacity, 1));
}
.content-blockscroll table tbody>tr>td {
font-weight: 400;
text-align: left;
padding: 1rem;
}
/* ===========================
WHY CHOOSE - BOOTSTRAP CAROUSEL
=========================== */
.vocso-whychoose-section {
background: var(--color-white-fixed);
position: relative;
overflow: hidden;
}
.darkmode .vocso-whychoose-section {
background: var(--color-black-fixed);
}
.vocso-whychoose-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 3rem;
margin-bottom: 3.5rem;
position: sticky;
top: 14rem;
}
.vocso-whychoose-head-left h2 {
margin: 0 0 1.4rem;
line-height: 1.08;
color: var(--color-text);
max-width: 93rem;
display: flex;
position: relative;
}
.vocso-whychoose-head-left h2 img {
filter: brightness(0) saturate(100%) invert(37%) sepia(83%) saturate(3085%) hue-rotate(340deg) brightness(97%) contrast(106%);
width: 75px;
top: -4rem;
position: absolute;
left: -7rem;
}
.vocso-whychoose-head-left p {
margin: 0;
max-width: 93rem;
font-size: 1.9rem;
line-height: 1.7;
color: var(--color-text);
}
.darkmode .vocso-whychoose-head-left p {
color: #c6c6c6;
}
.vocso-whychoose-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 5.4rem;
padding: 1.4rem 2.4rem;
border-radius: 999px;
text-decoration: none !important;
font-size: 1.7rem;
font-weight: 600;
color: var(--color-white-fixed) !important;
background: var(--color-primary);
transition: all .3s ease;
white-space: nowrap;
}
.vocso-whychoose-cta:hover {
transform: translateY(-2px);
color: var(--color-white-fixed) !important;
background: var(--color-secondary);
}
.vocso-whychoose-carousel {
position: relative;
padding-bottom: 9rem;
}
.vocso-whychoose-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid rgba(17, 17, 17, 0.10);
}
.darkmode .vocso-whychoose-grid {
border-color: rgba(255, 255, 255, 0.10);
}
.darkmode .vocso-why-card-number img {
filter: invert(1);
}
.vocso-why-card {
background: rgba(255, 255, 255, 0.35);
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 1px solid rgba(17, 17, 17, 0.10);
}
.vocso-why-card:last-child {
border-right: 0;
}
.darkmode .vocso-why-card {
background: rgba(255, 255, 255, 0.02);
border-right-color: rgba(255, 255, 255, 0.10);
}
.vocso-why-card-content {
padding: 3rem 3rem 2.4rem;
min-height: 31rem;
}
.vocso-why-card-number {
display: inline-block;
margin-bottom: 1.8rem;
font-size: 2rem;
font-weight: 600;
line-height: 1;
color: var(--color-secondary);
}
.vocso-why-card h3 {
margin: 0 0 1.4rem;
font-size: 2.9rem;
line-height: 1.25;
font-weight: 500;
color: #111111;
}
.vocso-why-card p {
margin: 0;
font-size: 1.7rem;
line-height: 1.7;
color: #4e4e4e;
}
.plus-icon img {
filter: brightness(0) saturate(100%) invert(24%) sepia(51%) saturate(2162%) hue-rotate(152deg) brightness(100%) contrast(103%);
}
/* ๐ฅ Hover on whole article โ change button */
.vocso-stack-card:hover .vocso-toggle-btn {
background: #0a4a36 url(../images/white-next-arrow.svg) no-repeat;
background-position: 92% center !important;
color: var(--color-white-fixed);
border: 2px solid var(--color-secondary);
}
.darkmode .vocso-why-card h3 {
color: var(--color-white-fixed);
}
.darkmode .vocso-why-card p {
color: #c4c4c4;
}
.darkmode .genai-added-section:nth-of-type(even) {
background: var(--color-black-fixed);
}
.vocso-why-card-visual {
min-height: 39rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-top: 1px solid rgba(17, 17, 17, 0.10);
background: rgba(255, 255, 255, 0.45);
position: relative;
}
.darkmode .vocso-why-card-visual {
border-top-color: rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.03);
}
.vocso-why-card-visual img {
width: 50%;
height: 50%;
object-fit: contain;
position: absolute;
object-position: center;
padding: 3rem;
}
.hero-slider-logo {
position: absolute;
bottom: 0;
/* border-top: 1px solid rgb(255 255 255 / 13%); */
}
.scheduleCall-btn:hover {
background: var(--color-primary) !important;
transition: .3s;
/* color: var(--color-text-invert) */
}
.boxbtn:hover,
.engagemodalbox:hover a {
background: url(../images/white-next-arrow.svg) 72% center no-repeat var(--color-primary) !important;
}
.ai-guide-section {
position: relative;
padding: 130px 0;
background: var(--color-white-fixed);
color: #1b1f2a;
}
.increase-conversion.ai-guide-section .nav li h3 a {
font-weight: 500;
}
.increase-conversion.ai-guide-section ul li {
padding-right: 0 !important;
}
.app_grid_aside {
grid-template-columns: 1fr 1fr !important;
}
.ai-guide-shell {
position: relative;
}
.ai-guide-row {
align-items: stretch;
}
/* LEFT SIDE */
.ai-guide-sidebar {
margin-bottom: 24px;
}
.ai-guide-menu {
list-style: none;
padding: 5rem 4rem;
margin: 0;
border-radius: 24px;
border: 1px solid rgb(0 0 0 / 20%);
backdrop-filter: blur(100px);
background: var(--color-white-fixed);
background-size: cover;
}
.ai-guide-menu__title {
margin-bottom: 20px;
}
.ai-guide-menu__title h2 {
font-size: 32px;
line-height: 1.25;
font-weight: 700;
margin: 0;
color: var(--color-white-fixed);
}
.ai-guide-menu__item+.ai-guide-menu__item {
margin-top: 12px;
}
.ai-guide-menu__link {
display: block;
padding: 14px 18px;
border-radius: 14px;
text-decoration: none;
font-size: 16px;
line-height: 1.5;
font-weight: 600;
color: #cbd5e1;
background: rgba(255, 255, 255, 0.03);
border: 1px solid transparent;
transition: all 0.25s ease;
}
.ai-guide-menu__link:hover,
.ai-guide-menu__link.active {
color: var(--color-white-fixed);
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.35);
transform: translateX(4px);
}
/* RIGHT SIDE */
.ai-guide-content-wrap {
display: flex;
}
.ai-guide-content-scroll {
width: 100%;
max-height: 900px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 10px;
scroll-behavior: smooth;
}
/* custom scrollbar */
.ai-guide-content-scroll::-webkit-scrollbar {
width: 8px;
}
.ai-guide-content-scroll::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.04);
border-radius: 999px;
}
.ai-guide-content-scroll::-webkit-scrollbar-thumb {
background: rgba(239, 68, 68, 0.55);
border-radius: 999px;
}
.ai-guide-panel+.ai-guide-panel {
margin-top: 24px;
}
.ai-guide-panel__inner {
padding: 32px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.ai-guide-panel__heading {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.ai-guide-panel__number {
width: 42px;
height: 42px;
min-width: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #1d4ed8;
color: var(--color-white-fixed);
font-weight: 700;
font-size: 18px;
}
.ai-guide-panel__title {
position: relative;
display: inline-block;
font-size: 30px;
font-weight: 700;
line-height: 1.3;
color: var(--color-white-fixed);
}
.ai-guide-panel__title::after {
content: "";
display: block;
width: 100%;
height: 3px;
margin-top: 8px;
border-radius: 20px;
background: #ef4444;
}
.ai-guide-panel h3 {
font-size: 24px;
line-height: 1.35;
margin: 28px 0 14px;
color: var(--color-white-fixed);
}
.ai-guide-panel p,
.ai-guide-panel li,
.ai-guide-panel td,
.ai-guide-panel th {
font-size: 16px;
line-height: 1.8;
color: #cbd5e1;
}
.ai-guide-list {
padding-left: 20px;
margin: 0 0 20px;
}
.ai-guide-list li+li {
margin-top: 12px;
}
.ai-guide-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 20px;
}
.ai-guide-panel table {
width: 100%;
border-collapse: collapse;
margin-top: 18px;
overflow: hidden;
border-radius: 16px;
}
.ai-guide-panel table th,
.ai-guide-panel table td {
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-guide-panel table th {
color: var(--color-white-fixed);
background: rgba(255, 255, 255, 0.06);
}
.genai-section-header p,
.genai-added-section .section-intro {
max-width: 820px;
margin: 18px auto 0;
font-size: 1.95rem;
line-height: 1.75;
color: #5b6472;
}
.genai-section-header,
.genai-added-section>.container>h2,
.genai-added-section .section-intro {
text-align: center;
}
.genai-added-section .section-intro {
max-width: 92rem;
margin: 2rem auto 0;
color: var(--color-text);
line-height: 3rem;
text-align: center;
}
.genai-related-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
margin-top: 52px;
}
.genai-related-links a {
display: block;
background: var(--color-white-fixed);
border: 1px solid #e7eaf0;
border-radius: 18px;
padding: 26px 24px;
text-decoration: none;
box-shadow: 0 6px 22px rgba(17, 24, 39, 0.05);
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
height: 100%;
}
.genai-related-links a h3 {
margin: 0 0 12px;
font-size: 2.3rem;
line-height: 1.35;
color: #111827;
font-weight: 700;
}
.genai-related-links a p {
margin: 0;
font-size: 1.68rem;
line-height: 1.75;
color: #4b5563;
}
.darkmode .genai-section-header h2,
.darkmode .genai-added-section>.container>h2,
.darkmode .genai-solution-card h3,
.darkmode .genai-added-section .genai-card h3,
.darkmode .genai-added-section .genai-rich h3,
.darkmode .genai-added-section .genai-rich h4,
.darkmode .genai-related-links a h3,
.darkmode .genai-added-section .genai-rich strong,
.darkmode .genai-added-section .genai-rich th {
color: var(--color-white-fixed);
}
.darkmode .genai-solution-card,
.darkmode .genai-added-section .genai-card,
.darkmode .genai-added-section .genai-step,
.darkmode .genai-related-links a,
.darkmode .genai-added-section .genai-rich,
.darkmode .genai-added-section .genai-rich table {
background: #1b2229;
border-color: #303945;
box-shadow: none;
}
.darkmode .genai-related-links a,
.darkmode .genai-related-links a p {
background: var(--color-neutral-dark);
color: var(--color-white-fixed);
border-color: #35383c;
}
.genai-related-links a:hover {
transform: translateY(-5px);
box-shadow: 0 16px 38px rgba(17, 24, 39, 0.08);
border-color: #d6dce5;
text-decoration: none;
}
/* AI Guide: show only selected right content */
.ai-guide-content-scroll {
max-height: none !important;
overflow: visible !important;
padding-right: 0 !important;
}
.ai-guide-content-scroll>div {
display: none;
}
.ai-guide-content-scroll>div.active {
display: block;
}
.ai-guide-menu .nav-link.active {
color: var(--color-white-fixed) !important;
background: rgb(255 33 21 / 75%) !important;
padding: 1rem 2rem;
}
/* Chrome, Edge, Safari */
.trust-badges {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 28px;
animation: fade-up .7s var(--ease) .75s forwards;
width: 50%;
margin: 0rem auto 0;
justify-content: center;
position: absolute;
right: 0;
bottom: 0;
}
.trust-badge {
display: flex;
align-items: center;
gap: 10px;
padding: 2.4rem 3rem;
border-radius: 1rem;
font-size: 1.4rem;
font-weight: 400;
color: var(--color-white-fixed);
transition: border-color .2s, color .2s;
background: rgb(255 255 255 / 11%);
border: 1px solid #383a3f;
backdrop-filter: blur(5px);
overflow: hidden;
}
/* ===========================
AI Development Services: From Strategy to Production
=========================== */
/* ================================
DEFAULT STACK CARD EFFECT
================================ */
.industry-number img {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}
/* Default sticky stacked card */
/* Show detailed content when card is open */
.vocso-stack-card.is-open .genai-rich {
display: block;
}
/* Button wrapper */
.engagemodalbox {
border-radius: 2rem !important;
overflow: hidden;
}
.vocso-toggle-btn:hover {
transform: translateY(-2px);
}
/* ================================
WHEN DETAILS OPEN:
REMOVE STACK EFFECT
================================ */
.vocso-stack-wrap.stack-effect-off {
gap: 3rem;
}
/* Important: disables sticky stacking */
.vocso-stack-wrap.stack-effect-off .vocso-stack-card {
position: relative;
top: auto !important;
z-index: auto !important;
}
/* Open card should behave like normal large content card */
.vocso-stack-card.is-open {
overflow: visible;
}
/* Optional: slightly highlight opened card */
.vocso-stack-card.is-open {
box-shadow: 0 24px 70px rgba(17, 24, 39, 0.08);
}
.vocso-stack-section {
background: var(--color-bg-soft-fixed);
position: relative;
overflow: visible;
/* padding-bottom: 0; */
}
.darkmode .trust-logos {
background: var(--color-secondary) !important;
}
.footer {
background: var(--color-secondary-light);
border-top: .1rem solid #dbdbdb87;
}
.darkmode .footer {
background: var(--color-secondary) !important;
border-top: .1rem solid rgb(255 255 255 / 11%);
}
.darkmode .copyright-sec {
border-top: .1rem solid rgb(255 255 255 / 11%);
}
.darkmode .vocso-stack-card {
background: var(--color-neutral-dark);
border-color: rgba(255, 255, 255, 0.10);
box-shadow: none;
}
.vocso-stack-card-content {
padding-right: 5rem;
display: flex;
flex-direction: column;
justify-content: center;
padding-bottom: 8rem;
}
.vocso-stack-count {
width: 5.2rem;
height: 5.2rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(253, 58, 48, 0.10);
color: var(--color-primary);
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 2.4rem;
}
.vocso-stack-card p {
margin: 0;
/* max-width: 68rem; */
font-size: 1.8rem;
line-height: 1.75;
color: var(--color-text);
}
.vocso-stack-card-visual {
display: flex;
align-items: center;
justify-content: center;
background: #eeeeee;
/* border-left: 1px solid rgba(17, 17, 17, 0.08); */
/* padding: 2rem; */
height: 50rem;
border-radius: 1rem;
/* overflow: hidden; */
position: relative;
}
.stack-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--color-white-fixed);
backdrop-filter: blur(10px);
border-radius: 16px;
overflow: hidden;
border: 1px solid rgb(238 238 238);
margin-top: 3rem;
}
.darkmode .stack-table {
border: 1px solid rgb(59 62 66);
background: var(--color-neutral-dark);
}
/* HEADER */
.stack-table thead {
background: var(--color-secondary);
}
.stack-table th {
text-align: left;
padding: 18px 24px;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--color-white-fixed);
font-weight: 600;
}
/* BODY */
.stack-table tbody tr {
transition: all 0.3s ease;
}
.stack-table td {
padding: 20px 24px;
font-size: 1.8rem;
color: var(--color-text);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* ROW HOVER */
.stack-table tbody tr:hover {
background: rgba(89, 201, 203, 0.08);
transform: scale(1.01);
}
/* LAST ROW BORDER FIX */
.stack-table tbody tr:last-child td {
border-bottom: none;
}
/* PRICE STYLE */
.stack-table td:nth-child(2) {
color: var(--color-text);
}
/* TIMELINE STYLE */
.stack-table td:nth-child(3) {
color: var(--color-text);
font-weight: 500;
}
.darkmode .vocso-stack-card-visual {
/* border-left-color: rgba(255, 255, 255, 0.08); */
background: rgba(255, 255, 255, 0.03);
}
.vocso-stack-card-visual img {
/* width: 22rem; */
max-width: 100%;
height: 100%;
object-fit: cover;
width: 100%;
border-radius: 1rem;
}
.hero-video {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100%;
object-fit: cover;
}
.video-overlay {
position: absolute;
inset: 0;
background: #000008;
mix-blend-mode: multiply;
opacity: 0.8;
pointer-events: none;
}
.genai-related-links a:hover .explore-btn {
color: #59c9cb;
transform: translateX(4px);
}
/* expand card */
.vocso-stack-card-content h3 {
font-size: 3.4rem;
margin-bottom: 2rem;
font-weight: 600;
color: var(--color-text);
}
.home-expand-card-main {
width: calc(100% / 4);
cursor: pointer;
transition: width 550ms ease-in-out;
transition-delay: 50ms;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
overflow: hidden;
flex-direction: column;
position: relative;
min-height: 30rem;
border: 2px solid rgb(0 105 103 / 26%);
z-index: 1;
}
.home-expand-content-top-box {
max-width: 435px;
transition: opacity 0.8s;
}
.plus-icon {
position: absolute;
bottom: 30px;
left: 30px;
background: rgb(0 105 103 / 13%);
border-radius: 100px;
width: 60px;
height: 60px;
text-align: center;
padding: 1.2rem;
justify-content: center;
display: flex;
}
.home-expand-card-main:hover {
width: 50%;
}
.side-grid-layout {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 1rem;
}
/* Firefox */
.home-expand-card-main:hover .plus-icon {
display: none;
transition: 0.3sease;
}
.vocso-stack-card-wrapper {
width: 100%;
display: grid;
grid-template-columns: 60% 40%;
}
button:focus {
outline: none !important;
}
.genai-added-section .genai-rich,
.genai-added-section .genai-callout,
.genai-side-note,
.genai-illustration {
will-change: transform;
}
.genai-added-section .genai-rich {
margin: 5rem auto 0;
}
.two-col-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: flex-start;
}
.vocso-stack-card .genai-rich-fullwidth h3:first-child {
margin-top: 0;
}
.vocso-stack-card .genai-rich h3 {
margin: 34px 0 14px;
font-size: 2.8rem;
line-height: 1.35;
font-weight: 600;
color: var(--color-text);
/* border-left: 4px solid #59c9cb;
padding-left: 2rem; */
}
.vocso-stack-card .genai-rich p,
.vocso-stack-card .genai-rich li {
font-size: 1.8rem;
line-height: 1.7;
color: var(--color-text);
}
.section-desc {
color: #555;
margin-bottom: 24px;
line-height: 1.6;
}
.vocso-stack-card .genai-rich ul {
margin: 2rem 0 1rem;
padding-left: 0;
}
.vocso-stack-card .genai-rich-fullwidth {
margin-top: 0;
width: 100%;
border-radius: 24px;
/* padding: 5rem; */
}
.vocso-toggle-wrap {
margin-top: 0;
position: absolute;
bottom: 5rem;
padding: 0rem 5rem;
}
.darkmode .engagemodalbox ul li,
.darkmode .engagemodalbox p {
color: #86868b;
}
.darkmode .cta-card {
background: radial-gradient(at 0% 0%, rgba(95, 163, 133, 0.20) 0%, transparent 50%), radial-gradient(at 100% 100%, rgba(35, 73, 62, 0.10) 0%, transparent 55%), #000;
}
.darkmode .cta-eyebrow {
background: rgb(35 73 62);
color: var(--color-secondary-dark);
}
.darkmode .cta-content h4 {
color: var(--color-white-fixed);
}
.darkmode .ai-tech-tabs-header p {
color: #86868b !important;
}
.darkmode .cta-secondary:hover {
border: 1px solid var(--color-secondary);
}
.darkmode .cta-secondary {
color: var(--color-secondary-dark);
border: 1px solid var(--color-secondary-dark);
}
.darkmode .engagemodalbox h3 img,
.darkmode .engagemodalbox ul li img {
filter: contrast(0.3) !important;
}
.darkmode .engagemodalbox h3 {
border-bottom: 1px solid #373737;
}
.vocso-stack-card.active .vocso-toggle-wrap {
margin-top: 0;
position: relative;
bottom: inherit;
padding: 3rem 0;
width: 100%;
}
.vocso-stack-card .genai-rich ul li {
list-style: none;
position: relative;
padding-left: 30px;
margin-bottom: 10px;
border: 1px solid rgb(228 228 228);
padding: 2rem 2rem 2rem 5rem;
border-radius: 1rem;
}
.vocso-stack-card .genai-rich ul li::before {
position: absolute;
content: "";
left: 18px;
top: 28px;
width: 20px;
height: 20px;
background: url(../images/sprite-images.webp) -366px -570px no-repeat;
filter: brightness(0) saturate(100%) invert(59%) sepia(37%) saturate(369%) hue-rotate(101deg) brightness(91%) contrast(92%);
}
.darkmode .vocso-stack-card .genai-rich ul li {
border: 1px solid #3b3e42;
}
.vocso-stack-card .genai-rich ul li strong {
display: flex;
}
.genai-added-section .genai-rich strong {
color: #111827;
font-weight: 700;
}
.app-grid {
display: grid;
/* grid-template-columns: 1fr 1fr; */
grid-template-columns: auto;
gap: 20px;
margin-top: 2rem;
}
.app-grid .card {
padding: 22px;
border-radius: 14px;
background: var(--color-white-fixed);
border: 1px solid rgb(155 155 155 / 27%);
transition: all 0.3s ease;
}
.darkmode .app-grid .card {
background: var(--color-neutral-dark);
border: 1px solid #3b3e42;
}
.genai-added-section .genai-rich strong {
color: #111827;
font-weight: 700;
}
.app-grid .card strong {
display: block;
margin-bottom: 6px;
font-size: 18px;
color: var(--color-text);
}
.stack-rich-content {
padding: 5rem 0;
}
.vocso-stack-card .genai-callout {
margin-top: 32px;
padding: 24px;
background: var(--color-white-fixed);
border: 1px solid rgb(228 228 228);
border-left: 4px solid var(--color-secondary);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
}
.vocso-stack-card .genai-callout p {
margin: 0;
}
.vocso-stack-card.active .genai-rich {
max-height: 2000px;
}
/* Hide content smoothly */
.genai-rich {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
/* Show when active */
.btn-proposal:hover {
background: var(--color-secondary) url(../images/white-next-arrow.svg) no-repeat !important;
background-position: 92% center !important;
}
/* Button style */
.vocso-toggle-btn {
color: var(--color-primary);
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
font-size: 1.8rem;
gap: 6px;
border-radius: 1rem;
padding: 1.7rem 5.4rem 1.9rem 2.5rem;
background: transparent url(../images/orange-next-arrow.svg) no-repeat;
transition: all 0.3s ease;
background-position: 89% center;
border: 2px solid var(--color-primary);
}
/* new techstacks start */
.ai-tech-tabs-section {
padding: 16rem 0;
color: #1f2933;
transition: background 0.3s ease, color 0.3s ease;
background: var(--color-black-fixed) url(../images/tecstack-bg.webp) no-repeat center center;
/* background-size: cover; */
overflow: hidden;
background-attachment: fixed;
position: relative;
}
.darkmode .footer-contact-heading p.footerform-tagline,
body .industry-detail p,
.darkmode .full-circle-head p,
.darkmode .footerLocation p {
color: var(--color-white-fixed) !important;
}
.ai-tech-tabs-section:after {
position: absolute;
content: "";
background: rgb(0 0 0 / 52%);
left: 0;
width: 100%;
height: 100%;
top: 0;
/* z-index: 0; */
}
.one-col-layout {
display: grid;
grid-template-columns: auto;
}
.ai-tech-tabs-header {
max-width: 50%;
margin: 0 0 60px;
text-align: left;
z-index: 1;
position: relative;
}
.ai-tech-tabs-label {
display: inline-block;
margin-bottom: 14px;
color: var(--color-primary);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.ai-tech-tabs-header h2 {
margin: 0 0 16px;
font-size: 4.4rem;
line-height: 1.1;
font-weight: 600;
color: var(--color-white-fixed);
}
.ai-tech-tabs-header p {
margin: 0;
font-size: 18px;
line-height: 1.7;
color: #86868b !important;
}
.ai-tech-tabs-layout {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 34px;
align-items: stretch;
z-index: 1;
position: relative;
}
.ai-tech-tabs-nav {
padding: 1rem 0;
border: 1px solid rgba(31, 41, 51, 0.08);
border-radius: 100px;
box-shadow: 0 20px 50px rgba(31, 41, 51, 0.08);
display: flex;
gap: 10px;
/* background: var(--color-text-invert);
background-color: rgb(255 255 255 / 35%); */
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: #25282c transparent;
/* Firefox */
}
/* Chrome, Edge, Safari */
.ai-tech-tabs-nav::-webkit-scrollbar {
height: 1px;
}
.ai-tech-tabs-nav::-webkit-scrollbar-track {
background: transparent;
}
.ai-tech-tabs-nav::-webkit-scrollbar-thumb {
background: #25282c;
border-radius: 50px;
}
.ai-tech-tabs-nav::-webkit-scrollbar-thumb:hover {
background: #25282c;
}
.service-content-wrap p {
max-width: 100% !important;
}
/* .ai-tech-tab-btn {
width: 100%;
padding: 17px 20px;
border: 0;
border-radius: 100px;
background: transparent;
color: var(--color-white-fixed);
text-align: center;
font-size: 1.8REM;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
} */
.ai-tech-tab-btn {
padding: 17px 20px;
border: 0;
border-radius: 100px;
background: transparent;
color: var(--color-white-fixed);
font-size: 1.8REM;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
flex: 0 0 auto;
white-space: nowrap;
text-align: center;
}
.speed-banner-btns .speedupmysite-btn {
border-radius: 1rem;
padding: 2.4rem 6.9rem 2.4rem 4.2rem;
}
.ai-tech-tab-btn:hover,
.ai-tech-tab-btn.active {
background: var(--color-secondary-dark);
color: var(--color-white-fixed);
box-shadow: 0 10px 25px rgba(31, 41, 51, 0.08);
}
.darkmode .stack-table thead {
background: #141414;
}
.ai-tech-tabs-content {
position: relative;
padding: 0;
}
.ai-tech-chip-wrap span img {
width: 100%;
height: 100%;
object-fit: contain;
margin-bottom: 1rem;
}
.ai-tech-tab-panel {
display: none;
position: relative;
z-index: 1;
animation: fadeUp 0.35s ease;
}
.ai-tech-tab-panel.active {
display: block;
}
.ai-tech-tab-panel h3 {
margin: 0 0 14px;
font-size: 32px;
line-height: 1.2;
color: var(--color-white-fixed);
font-weight: 500;
}
.ai-tech-tab-panel p {
max-width: 680px;
margin: 0 0 34px;
font-size: 18px;
line-height: 1.6;
color: var(--color-white-fixed);
}
.ai-tech-chip-wrap {
flex-wrap: wrap;
gap: 14px;
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.ai-tech-chip-wrap span {
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 3rem;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, background 0.3s ease;
background: var(--color-white-fixed);
text-align: center;
}
.ai-tech-chip-wrap span figure {
height: 100px;
transition: transform 0.3s ease, background 0.3s ease;
cursor: pointer;
background: var(--color-white-fixed);
text-align: center;
text-transform: capitalize;
font-weight: 300;
font-size: 1.8rem;
color: var(--color-text);
}
.ai-tech-chip-wrap span:hover {
transform: translateY(-3px);
border-color: var(--color-secondary);
color: var(--color-primary);
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.darkmode .ai-tech-tabs-header h2,
.darkmode .ai-tech-tab-panel h3 {
color: var(--color-white-fixed);
}
.darkmode .ai-tech-chip-wrap span:hover {
color: var(--color-secondary);
border-color: var(--color-secondary);
}
/* new techstart css end*/
/* enterprise grade css start */
.vocso-compliance-section {
transition: 0.3s;
background: var(--color-bg-soft-fixed);
position: relative;
padding-bottom: 0;
}
.vocso-compliance-header {
max-width: 70%;
margin-bottom: 60px;
}
.vocso-compliance-header h2 {
color: var(--color-text);
line-height: 1.2 !important;
}
.vocso-compliance-header p {
margin-top: 18px;
color: var(--color-text);
line-height: 1.7;
}
/* GRID */
.vocso-compliance-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 3rem;
z-index: 1;
position: relative;
}
.case-study-card .stats .stat .icon img {
height: 70px;
filter: brightness(0) saturate(100%) invert(93%) sepia(93%) saturate(28%) hue-rotate(90deg) brightness(106%) contrast(107%);
top: 10px;
position: relative;
}
/* CARD */
.comp-card {
background: var(--color-white-fixed);
border-radius: 2rem;
padding: 3rem;
text-align: center;
transition: 0.25s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 41rem;
}
.comp-card img {
margin-bottom: 4rem;
height: 90px;
/* width: 100%; */
display: flex;
justify-content: center;
align-items: center;
}
.darkmode .comp-card img {
height: 100px;
width: 100px;
background: var(--color-white-fixed);
border-radius: 1rem;
padding: 1rem;
}
.comp-card h4 {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 6px;
color: var(--color-text);
}
.darkmode .vocso-stack-card .genai-callout {
background: var(--color-neutral-dark);
border: 1px solid rgb(59 62 66);
}
.ai-process-wrap {
background: var(--color-white-fixed);
border-radius: 2rem;
padding: 8rem;
}
.darkmode .ai-process-wrap {
background: var(--color-secondary);
}
.comp-card p {
font-size: 1.7rem;
color: var(--color-black-fixed) !important;
font-weight: 400;
margin-top: 1rem;
}
.darkmode .comp-card p {
color: var(--color-white-fixed) !important;
}
.comp-card:hover {
transform: translateY(-6px);
background: var(--color-secondary-dark);
}
.stat-content .stat-desc {
color: #a7a7a7;
}
.ordertowork h2 {
margin: 0 auto 6rem !important;
}
.comp-card:hover h4,
.comp-card:hover p {
color: var(--color-white-fixed) !important;
}
/* CTA CARD */
.comp-cta {
grid-column: span 2;
background: linear-gradient(135deg, #1e3a8a, #0f172a);
color: var(--color-white-fixed);
text-align: left;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
}
.comp-cta h3 {
font-size: 20px;
margin-bottom: 18px;
}
.comp-cta a {
display: inline-block;
padding: 10px 18px;
background: var(--color-white-fixed);
color: #111;
border-radius: 30px;
font-weight: 600;
}
.darkmode .vocso-compliance-section {
background: var(--color-black-fixed);
}
.darkmode .vocso-compliance-header h2 {
color: var(--color-white-fixed);
}
.darkmode .comp-card:hover h4,
.darkmode .comp-card:hover p {
color: var(--color-white-fixed);
}
.darkmode .comp-card:hover {
background: var(--color-secondary);
}
.darkmode .nav-pills .nav-link.active,
.darkmode .nav-pills .show>.nav-link {
color: var(--color-black-fixed) !important;
background-color: var(--color-secondary-dark) !important;
}
.darkmode .content-blockscroll h3 .bluenumbers {
background: var(--color-secondary-dark) !important;
}
.darkmode .service-image {
min-height: 350px;
height: 350px;
mask-image: none !important;
}
.darkmode .comp-card {
background: var(--color-neutral-dark);
border-color: rgb(50 50 51);
color: #e5e7eb;
}
.darkmode .comp-cta {
background: linear-gradient(135deg, #1e40af, #020617);
}
.social-icons a:hover svg,
.social-icons a:hover svg path {
fill: var(--color-primary) !important;
}
.darkmode .social-icons a svg,
.darkmode .social-icons a svg path {
fill: var(--color-secondary-dark) !important;
}
.darkmode .social-icons a:hover svg,
.darkmode .social-icons a:hover svg path {
fill: var(--color-primary) !important;
}
.social-icons a svg {
fill: var(--color-secondary) !important;
}
#serviceSwiper .swiper-wrapper {
align-items: stretch;
}
#serviceSwiper .swiper-slide {
width: 360px;
height: auto;
flex-shrink: 0;
}
#serviceSwiper .service-card {
height: 100%;
}
.cta-card {
margin: 50px 0 0 0;
padding: 6rem 8rem;
border-radius: 2rem;
background: radial-gradient(at 0% 0%, rgba(95, 163, 133, 0.20) 0%, transparent 50%), radial-gradient(at 100% 100%, rgba(35, 73, 62, 0.10) 0%, transparent 55%), #e7f4eb;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(24px, 4vw, 48px);
align-items: center;
position: relative;
overflow: hidden;
}
.cta-content {
position: relative;
z-index: 2;
}
.cta-eyebrow {
display: inline-block;
padding: 11px 21px;
border-radius: 3rem;
background: rgba(35, 73, 62, 0.10);
color: var(--color-secondary);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0 0 20px;
}
.cta-secondary:hover {
background: var(--color-secondary);
color: var(--color-white-fixed);
}
.multiple-stars-icon img {
filter: brightness(0) saturate(100%) invert(59%) sepia(37%) saturate(369%) hue-rotate(101deg) brightness(91%) contrast(92%);
}
.cta-content h4 {
font-size: 4rem;
font-weight: 600;
letter-spacing: -0.022em;
line-height: 1.18;
color: var(--color-secondary);
margin: 0 0 2rem;
max-width: 520px;
}
.cta-content>p {
font-size: 1.8rem;
color: var(--color-black-fixed);
margin: 0 0 28px;
line-height: 1.55;
max-width: 530px;
}
.darkmode .cta-content>p {
color: #86868b;
}
.cta-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
p.weekilalic {
font-style: italic;
color: #000000;
font-weight: 600;
}
.cta-primary {
background: var(--color-secondary) url(../images/white-next-arrow.svg) no-repeat;
color: var(--color-white-fixed);
padding: 1.7rem 5.4rem 1.9rem 2.5rem !important;
background-position: 89% center;
transition: .3s;
}
.cta-primary:hover {
background: var(--color-primary) url(../images/white-next-arrow.svg) no-repeat !important;
color: var(--color-white-fixed);
background-position: 92% center !important;
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2rem 3rem;
border-radius: 1rem;
font: inherit;
font-size: 1.8rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: filter 0.2s, transform 0.2s, background 0.2s, color 0.2s;
/* border: none; */
white-space: nowrap;
}
.cta-secondary {
background: transparent;
color: var(--color-secondary);
border: 1px solid var(--color-secondary);
}
.cta-visual {
position: relative;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.stats-section .container {
display: flex;
align-items: end;
justify-content: space-between;
}
.stats-section {
width: 100%;
/* min-height: 100vh; */
background: #030303;
/* display: flex; */
align-items: center;
overflow: hidden;
}
.stats-swiper {
width: 100%;
padding-left: 0;
padding-right: 0;
margin-top: 8rem;
}
.swiper-wrapper {
align-items: stretch;
}
.swiper-slide {
height: auto;
}
.stat-card {
position: relative;
width: 100%;
height: 675px;
background: var(--color-neutral-dark);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 23px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition: all linear 0.3s;
}
.stat-card:hover {
background: var(--color-black-fixed);
transition: all linear 0.3s;
}
.stat-content {
position: relative;
z-index: 2;
padding: 3rem 4rem;
}
.stat-top {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 24px;
/* flex-direction: row-reverse;
justify-content: space-between; */
}
.stat-number {
font-size: 86px;
line-height: 0.92;
letter-spacing: -6px;
font-weight: 900;
color: var(--color-white-fixed);
}
.stat-title {
padding-top: 12px;
font-size: 2rem;
line-height: 1.45;
font-weight: 500;
/* text-transform: uppercase; */
color: #eeeeee;
max-width: 100%;
}
.stat-desc {
font-size: 1.8rem;
line-height: 1.48;
font-weight: 500;
color: rgba(255, 255, 255, 0.42);
letter-spacing: -0.6px;
max-width: 100% !important;
margin-bottom: 0;
}
.card-visual {
position: relative;
flex: 1;
margin-top: 24px;
overflow: hidden;
background: #000;
}
/* Card 1 */
.team-image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
filter: saturate(1.08) contrast(1.03);
}
.light-beams {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 28% 60%, rgba(0, 141, 255, 0.8), transparent 22%),
radial-gradient(circle at 72% 56%, rgba(0, 157, 255, 0.8), transparent 25%),
radial-gradient(circle at 55% 70%, rgba(255, 210, 90, 0.52), transparent 19%),
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.05) 100%);
mix-blend-mode: screen;
opacity: 0.85;
pointer-events: none;
}
.case-study-card .seeCase-study-btn:hover {
color: var(--color-white-fixed) !important;
}
/* Card 2 */
.logo-small {
font-size: 19px;
letter-spacing: -0.8px;
}
/* Card 3 */
.dots {
position: absolute;
left: 0;
right: 0;
top: 8px;
height: 210px;
opacity: 0.32;
background-image: radial-gradient(rgba(255, 255, 255, 0.8) 1.5px, transparent 1.5px);
background-size: 12px 12px;
mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}
.hand-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding-top: 25px;
}
.stat-icon {
width: 90px;
height: 90px;
min-width: 62px;
border-radius: 16%;
background: rgb(0 0 0 / 35%);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--color-white-fixed);
}
.stats-section h2 {
color: var(--color-white-fixed);
}
.stats-section p {
color: #86868b !important;
max-width: 50%;
line-height: 2.8rem;
}
.stat-icon img {
/* width: 28px; */
height: 50px;
filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(7473%) hue-rotate(292deg) brightness(106%) contrast(113%);
}
.stat-title {
padding-top: 0;
margin: 0;
}
.hand-image {
width: 112%;
max-width: none;
/* height: 405px; */
object-fit: contain;
filter: contrast(1.08) saturate(1.05);
transform: translateY(14px);
height: 100%;
}
.stats-swiper .swiper-wrapper {
transition-timing-function: linear !important;
}
#serviceSwiper .swiper-slide {
width: 480px;
}
.stats-swiper .swiper-slide {
width: 580px;
}
.star-glow {
position: absolute;
left: 50%;
top: 39%;
width: 160px;
height: 390px;
transform: translate(-50%, -50%);
background:
radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 8%, rgba(170, 62, 255, 0.35) 20%, transparent 44%);
clip-path: polygon(50% 0%, 59% 43%, 100% 50%, 59% 57%, 50% 100%, 41% 57%, 0% 50%, 41% 43%);
filter: blur(0.3px);
opacity: 0.95;
}
.purple-glow {
position: absolute;
left: 50%;
top: 55%;
width: 280px;
height: 90px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(154, 36, 255, 0.45);
filter: blur(45px);
}
/* Card 4 */
.swiper-button-prev,
.swiper-button-next {
color: var(--color-white-fixed);
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
backdrop-filter: blur(12px);
}
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 17px;
font-weight: 900;
}
.swiper-pagination {
display: none;
}
/* ================================
VOCSO Related Services Section
================================ */
.vocso-related-services {
background: var(--color-bg-soft-fixed);
overflow: hidden;
}
.darkmode .vocso-related-services {
background: var(--color-black-fixed);
}
.vocso-related-layout {
display: grid;
grid-template-columns: 360px 1fr;
gap: 28px;
align-items: stretch;
}
/* Left Panel */
.related-intro-card {
position: relative;
min-height: 760px;
padding: 54px 46px;
border-radius: 18px;
background: radial-gradient(circle at 20% 95%, rgba(89, 201, 203, 0.95) 0 18%, transparent 18.5%), linear-gradient(145deg, #0a4a36 0%, #0a4a36 100%);
color: var(--color-white-fixed);
overflow: hidden;
box-shadow: 0 20px 48px rgba(0, 105, 103, 0.24);
}
.related-eyebrow {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 24px;
}
.related-eyebrow span {
color: #feeae4;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.6px;
}
.service-image {
min-height: 350px;
height: 350px;
/* mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 5%, #000 53%, #000 100%, transparent 100%); */
}
.service-image img {
width: 100%;
max-width: 100%;
height: 100%;
margin-top: 0;
display: block;
object-fit: cover;
}
/* Optional: Add hover effect to the image for interactivity */
.service-image img:hover {
transform: scale(1.05);
/* Slight zoom effect on hover */
transition: transform 0.3s ease-in-out;
/* Smooth transition */
}
.vocso-related-services h2 {
margin-bottom: 2rem;
}
.vocso-related-services p {
margin-bottom: 5rem;
color: var(--color-text);
font-size: 1.8rem;
line-height: 1.6;
max-width: 50%;
}
.darkmode .service-card {
border: 1px solid rgba(255, 255, 255, 0.16);
background: var(--color-neutral-dark);
}
.related-eyebrow i {
width: 36px;
height: 2px;
background: var(--color-primary);
display: block;
border-radius: 99px;
}
.darkmode .service-icon {
background: var(--color-black-fixed);
border: 2px solid var(--color-white-fixed);
}
.darkmode .service-icon img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7472%) hue-rotate(295deg) brightness(96%) contrast(104%);
}
.related-intro-card h2 {
position: relative;
z-index: 2;
margin: 0 0 3rem;
color: var(--color-white-fixed);
font-weight: 600;
}
.related-intro-card p {
position: relative;
z-index: 2;
margin: 0;
color: rgba(255, 255, 255, 0.88);
font-size: 1.8rem;
line-height: 1.6;
}
.intro-pattern {
position: absolute;
right: -8px;
bottom: 80px;
width: 190px;
height: 190px;
opacity: 0.46;
background-image: radial-gradient(#59c9cb 1.7px, transparent 1.7px);
background-size: 14px 14px;
}
.intro-circle {
position: absolute;
left: -72px;
bottom: -86px;
width: 250px;
height: 250px;
border-radius: 50%;
background: rgba(89, 201, 203, 0.84);
}
.intro-arc {
position: absolute;
left: 58px;
bottom: -100px;
width: 210px;
height: 210px;
border: 2px solid var(--color-primary);
border-radius: 50%;
}
/* Right Grid */
.related-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.service-card {
display: flex;
position: relative;
min-height: 100%;
padding: 0;
border-radius: 18px;
background: var(--color-white-fixed);
text-decoration: none;
color: var(--color-white-fixed);
overflow: hidden;
transition: all 0.28s ease;
gap: 0;
flex-direction: column;
justify-content: space-between;
border: 1px solid rgb(63 63 63 / 16%);
}
.ourbackend-services-box .massonary-container li:hover .seedetails-backendservice {
background: var(--color-secondary) !important;
}
.service-card:hover {
/* transform: translateY(-6px); */
box-shadow: 0 24px 52px rgba(37, 40, 44, 0.14);
/* border-color: rgba(89, 201, 203, 0.42); */
background: var(--color-bg-soft-fixed);
transition: all linear 0.3s;
}
.darkmode .service-card:hover {
background: var(--color-black-fixed);
transition: all linear 0.3s;
}
.service-icon {
position: relative;
z-index: 2;
width: 66px;
height: 66px;
min-width: 66px;
border-radius: 1rem;
display: grid;
place-items: center;
border: 2px solid rgb(0 0 0);
background: var(--color-white-fixed);
box-shadow: 0 10px 24px rgba(0, 105, 103, 0.08);
}
.service-icon img {
width: 42px;
height: 42px;
object-fit: contain;
/* filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7472%) hue-rotate(295deg) brightness(96%) contrast(104%); */
}
/* Fallback if image icons are not added */
.service-icon img[src=""],
.service-icon img:not([src]) {
display: none;
}
.service-content {
position: relative;
z-index: 2;
gap: 2rem;
display: flex;
flex-direction: column;
padding: 5rem 5rem;
}
.service-card h3 {
margin: 0 0 18px;
color: var(--color-text);
font-size: 2.2rem;
font-weight: 500;
}
.service-card p {
margin: 0 0 28px;
color: var(--color-text);
font-size: 1.8rem;
line-height: 1.4;
min-height: 80px;
}
.explore-btn {
display: inline-flex;
align-items: center;
color: var(--color-secondary-dark);
font-size: 1.8rem;
font-weight: 500;
line-height: 1;
transition: gap 0.25s ease;
background: url(../images/greendark-next-arrow.svg) no-repeat;
background-position: 89% center;
padding-right: 4rem;
transition: all linear 0.3s;
}
.darkmode .explore-btn {
color: var(--color-secondary-dark);
background: url(../images/greendark-next-arrow.svg) no-repeat;
background-position: 89% center;
}
.service-card:hover .explore-btn {
gap: 5px;
color: var(--color-primary);
background: url(../images/orange-next-arrow.svg) no-repeat;
background-position: 92% center;
transition: all linear 0.3s;
}
.darkmode .engagementModals {
padding-bottom: 0;
}
.industry-title-wrap {
display: flex;
align-items: center;
gap: 1.5rem;
}
/* Decorative Shapes */
.darkmode .black-strip-cta {
border-top: 1px solid rgb(255 255 255 / 9%);
}
p {
color: var(--color-text-muted);
}
.dot-pattern {
position: absolute;
right: 24px;
bottom: 24px;
width: 82px;
height: 82px;
opacity: 0.5;
background-size: 12px 12px;
}
.dot-pattern.blue {
background-image: radial-gradient(#59c9cb 1.5px, transparent 1.5px);
}
.dot-pattern.orange {
background-image: radial-gradient(#fd3a30 1.5px, transparent 1.5px);
}
.orange-arc {
position: absolute;
right: 68px;
bottom: -74px;
width: 170px;
height: 170px;
border: 1.5px solid rgba(253, 58, 48, 0.45);
border-radius: 50%;
}
/* new css for related services */
/* Swiper Container */
.swiper-container {
width: 100%;
height: 100%;
}
/* Swiper Wrapper */
.swiper-wrapper {
display: flex;
}
/* Optional Styling */
.swiper-button-next,
.swiper-button-prev {
color: var(--color-primary);
}
.swiper-pagination-bullet-active {
background-color: var(--color-primary);
}
/* ================================
VOCSO Client Testimonial Marquee
================================ */
.vocso-client-marquee-section {
position: relative;
overflow: hidden;
background: var(--color-bg-soft-fixed);
color: var(--color-white-fixed);
}
.darkmode .vocso-client-marquee-section {
background: var(--color-black-fixed);
}
.vocso-client-marquee-layout {
min-height: 780px;
display: grid;
grid-template-columns: 43% 57%;
gap: 52px;
align-items: center;
}
/* Left Text */
.vocso-client-copy {
max-width: 560px;
}
.vocso-client-copy .redquoteimg {
margin-bottom: 3.2rem;
text-align: left !important;
}
.vocso-client-copy h2 {
margin: 0 0 2.8rem !important;
color: var(--color-text);
text-align: left !important;
}
.vocso-client-copy p {
margin: 0;
color: var(--color-text);
font-size: 2rem;
line-height: 1.55;
font-weight: 600;
}
#header-top .scrolled {
width: 100%;
background-color: rgb(255 255 255 / 35%) !important;
-webkit-backdrop-filter: blur(30px) !important;
backdrop-filter: blur(30px) !important;
transition: all linear 0.3s;
}
#header-top:has(.navbar.scrolled) {
position: fixed !important;
}
#header-top .scrolled .form-inline {
border: none;
box-shadow: rgba(0, 0, 0, 0.1) -1px 0px 3px 0px, rgba(0, 0, 0, 0.06) -1px 0px 2px 0px;
}
.darkmode .vocso-testimonial-btn {
color: var(--color-primary);
background: transparent url(../images/orange-next-arrow.svg) no-repeat;
border: 2px solid var(--color-primary);
}
.vocso-testimonial-btn {
margin-top: 7.2rem;
padding: 1.9rem 5.4rem 2.1rem 2.5rem;
display: inline-flex;
align-items: center;
gap: 1.2rem;
border-radius: 1rem;
color: var(--color-primary);
font-size: 2rem;
font-weight: 600;
text-decoration: none;
transition: all 0.25s ease;
background: transparent url(../images/orange-next-arrow.svg) no-repeat;
background-position: 92% center !important;
background-repeat: no-repeat !important;
border: 2px solid var(--color-primary);
}
.vocso-testimonial-btn:hover {
background: var(--color-secondary) url(../images/white-next-arrow.svg) no-repeat !important;
background-position: 94% center !important;
color: var(--color-white-fixed);
border: 1px solid transparent;
}
.vocso-testimonial-btn span {
font-size: 18px;
line-height: 1;
}
/* Right Marquee Area */
.vocso-marquee-area {
height: 840px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
overflow: hidden;
mask-image: linear-gradient(to bottom,
transparent 0%,
#000 10%,
#000 90%,
transparent 100%);
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%,
#000 10%,
#000 90%,
transparent 100%);
}
.vocso-marquee-col {
position: relative;
overflow: hidden;
}
.vocso-marquee-track {
display: flex;
flex-direction: column;
gap: 24px;
will-change: transform;
}
.marquee-up {
animation: vocsoMarqueeUp 34s linear infinite;
}
.marquee-down {
animation: vocsoMarqueeDown 38s linear infinite;
}
.vocso-marquee-area.is-paused .vocso-marquee-track,
.vocso-marquee-col:hover .vocso-marquee-track {
animation-play-state: paused;
}
@keyframes vocsoMarqueeUp {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
@keyframes vocsoMarqueeDown {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
/* Video Cards */
.vocso-video-card {
position: relative;
min-height: 470px;
border-radius: 18px;
overflow: hidden;
background: var(--color-secondary-dark);
}
.vocso-video-card video {
width: 100%;
height: 100%;
min-height: 470px;
display: block;
object-fit: cover;
/* filter: grayscale(1); */
transform: scale(1.02);
transition: filter 0.35s ease, transform 0.35s ease;
}
.vocso-video-card::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.84) 100%);
pointer-events: none;
}
.vocso-video-card:hover video {
filter: grayscale(0);
transform: scale(1.06);
}
.vocso-play-btn {
position: absolute;
z-index: 4;
top: 50%;
left: 50%;
width: 58px;
height: 58px;
transform: translate(-50%, -50%);
border: 0;
border-radius: 50%;
background: var(--color-white-fixed);
color: var(--color-black-fixed);
font-size: 19px;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 15px 38px rgba(0, 0, 0, 0.26);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.vocso-video-card:hover .vocso-play-btn {
/* opacity: 0; */
transform: translate(-50%, -50%) scale(0.85);
}
.vocso-video-meta {
position: absolute;
z-index: 4;
left: 28px;
right: 28px;
bottom: 28px;
padding-left: 14px;
}
.vocso-video-meta span {
position: absolute;
left: 0;
top: 3px;
width: 3px;
height: 100%;
background: var(--color-primary);
border-radius: 10px;
}
.vocso-video-meta h4 {
margin: 0 0 4px;
color: var(--color-white-fixed);
font-size: 2rem;
font-weight: 500;
}
.vocso-video-meta p {
margin: 0;
color: var(--color-white-fixed) !important;
font-size: 1.6rem;
}
/* Text Cards */
.vocso-text-card {
min-height: 390px;
padding: 42px 40px;
border-radius: 18px;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
background: var(--color-secondary-light);
}
.darkmode .vocso-text-card {
background: var(--color-neutral-dark);
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: var(--color-secondary) !important;
background-color: var(--color-secondary-light) !important;
font-weight: 600 !important;
padding: 1.5rem 3rem !important;
border-radius: 1rem !important;
}
.increase-conversion ul li .orches-left h3 a.active:before,
.we-orchestrate ul li .orches-left h3 a.active:before {
border-left: 0 !important;
transition: .4s;
}
.increase-conversion ul li .orches-left h3 a:before {
display: none !important;
}
.increase-conversion .nav li h3 a {
padding-left: 0 !important;
}
.client-brand {
width: fit-content;
margin-bottom: 54px;
padding: 4px 12px;
color: var(--color-text);
border: 2px solid var(--color-text);
border-radius: 8px;
font-size: 13px;
font-weight: 900;
letter-spacing: -0.3px;
transform: rotate(-4deg);
}
.vocso-text-card p {
margin: 0 0 48px;
color: var(--color-text);
font-size: 2.2rem;
line-height: 1.45;
font-weight: 600;
}
.vocso-author {
display: flex;
align-items: center;
gap: 16px;
}
.vocso-author img {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
}
.vocso-author h4 {
margin: 0 0 4px;
color: var(--color-text);
font-size: 2rem;
font-weight: 600;
}
.vocso-author span {
color: var(--color-text);
font-size: 1.8rem;
line-height: 1.35;
}
@keyframes vocsoMobileMarqueeLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes vocsoMobileMarqueeRight {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
/* industries new css start */
.ai-industries-showcase {
background: var(--color-black-fixed);
color: var(--color-white-fixed);
font-family: "Montserrat", Arial, sans-serif;
overflow: hidden;
}
.ai-industries-header {
max-width: 650px;
margin-bottom: 7rem;
}
.ai-industries-header h2 {
line-height: 1.3;
margin: 0 0 22px;
color: var(--color-white-fixed);
}
.ai-industries-header p {
font-size: 2rem;
line-height: 1.6;
margin: 0;
color: #86868b !important;
}
.ai-industries-card {
position: relative;
display: grid;
grid-template-columns: 500px 1fr;
gap: 34px;
min-height: 680px;
background: var(--color-black-fixed);
border-radius: 28px;
/* padding: 46px; */
overflow: hidden;
box-shadow: 0 35px 80px rgba(0, 0, 0, 0.38);
}
.industry-controls {
position: relative;
z-index: 5;
align-self: start;
/* max-width: 420px; */
}
.industry-nav {
width: fit-content;
min-width: 250px;
max-width: 100%;
border: 0;
outline: 0;
color: var(--color-white-fixed);
background: var(--color-neutral-dark);
border-radius: 999px;
padding: 1.6rem 3rem 1.6rem 1.8rem;
margin: 6px 0;
display: flex;
align-items: self-start;
gap: 14px;
cursor: pointer;
font-family: inherit;
transition: all 0.35s ease;
flex-direction: column;
}
.industry-detail p strong {
display: block;
font-size: 2rem;
font-weight: 600;
margin-bottom: 1rem;
}
.industry-nav:hover {
background: #2b2b2f;
transform: translateX(4px);
}
.industry-nav.active {
background: var(--color-secondary);
min-width: 380px;
display: none;
}
.industry-number {
display: grid;
place-items: center;
font-size: 1.4rem;
font-weight: 600;
flex: 0 0 auto;
color: var(--color-white-fixed);
}
.industry-nav.active .industry-number {
background: var(--color-primary);
}
.industry-title {
font-size: 2rem;
font-weight: 600;
white-space: nowrap;
}
.industry-detail {
max-width: 100%;
background: #242426;
border-radius: 24px;
padding: 0 26px;
/* margin: 10px 0 10px; */
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-8px);
transition:
max-height 0.45s ease,
opacity 0.35s ease,
transform 0.35s ease,
padding 0.35s ease;
}
.industry-detail.active {
max-height: 365px;
padding: 24px 26px;
margin: 5px 0 12px;
opacity: 1;
transform: translateY(0);
background: var(--color-secondary);
}
.industry-detail p span {
margin-top: 1rem;
display: inline-block;
}
.industry-detail ul {
margin-top: 2rem;
}
.industry-detail ul.process-points li {
color: var(--color-white-fixed);
}
.industry-detail p {
margin: 0;
font-size: 1.8rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
}
.industry-detail strong {
color: var(--color-white-fixed);
}
.industry-visual-wrap {
position: relative;
min-height: 580px;
border-radius: 24px;
overflow: hidden;
isolation: isolate;
}
.industry-visual-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(89, 201, 203, 0.32), transparent 34%),
radial-gradient(circle at 75% 45%, rgba(253, 58, 48, 0.22), transparent 36%),
linear-gradient(135deg, rgba(0, 105, 103, 0.5), #020202 62%);
z-index: 1;
}
.industry-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transform: scale(1.08) translateX(30px);
transition:
opacity 0.65s ease,
transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 2;
filter: saturate(1.08) contrast(1.04);
}
.industry-image.active {
opacity: 0.82;
transform: scale(1) translateX(0);
}
.industry-visual-wrap::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.industry-floating-label {
position: absolute;
right: 28px;
bottom: 28px;
z-index: 4;
display: flex;
align-items: center;
gap: 14px;
background: var(--color-black-fixed);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(14px);
border-radius: 999px;
padding: 12px 18px 12px 12px;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.industry-floating-label span {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--color-neutral-dark);
display: grid;
place-items: center;
font-size: 13px;
font-weight: 900;
}
.industry-floating-label strong {
font-size: 1.4rem;
white-space: nowrap;
}
/* sticky card css start */
/* ================================
DEFAULT STACK EFFECT
================================ */
/* Stack positions */
.vocso-stack-card:nth-child(1) {
top: 38rem;
z-index: 1;
}
.vocso-stack-card:nth-child(2) {
top: 39rem;
z-index: 2;
}
.vocso-stack-card:nth-child(3) {
top: 40rem;
z-index: 3;
}
.vocso-stack-card:nth-child(4) {
top: 41rem;
z-index: 4;
}
.vocso-stack-card:nth-child(5) {
top: 42rem;
z-index: 5;
}
.vocso-stack-card:nth-child(6) {
top: 43rem;
z-index: 6;
}
.vocso-stack-card:nth-child(7) {
top: 44rem;
z-index: 7;
}
.vocso-stack-card:nth-child(8) {
top: 45rem;
z-index: 8;
}
/* Hide details by default */
.vocso-stack-card .genai-rich {
display: none;
}
/* Show details when opened */
.vocso-stack-card.is-open .genai-rich {
display: block;
}
/* ================================
ONLY OPENED CARD:
REMOVE STICKY + KEEP ABOVE OTHERS
================================ */
.vocso-stack-card.is-open {
position: relative !important;
top: auto !important;
z-index: 9999 !important;
overflow: visible !important;
}
/* Make opened card content readable above sticky cards */
.vocso-stack-card.is-open .vocso-stack-card-wrapper,
.vocso-stack-card.is-open .genai-rich,
.vocso-stack-card.is-open .vocso-toggle-wrap {
position: relative;
z-index: 9999;
background: var(--color-white-fixed);
}
.darkmode .vocso-stack-card.is-open .vocso-stack-card-wrapper,
.darkmode .vocso-stack-card.is-open .genai-rich,
.darkmode .vocso-stack-card.is-open .vocso-toggle-wrap {
background: var(--color-neutral-dark);
}
/* Closed cards keep sticky */
.vocso-stack-card:not(.is-open) {
position: sticky;
}
/* Optional opened card highlight */
.vocso-stack-card.is-open {
box-shadow: 0 24px 70px rgba(17, 24, 39, 0.10);
}
.cta-visual img {
height: 400px;
}
.ai-process-card:nth-child(1) {
top: 22rem;
z-index: 1;
}
.ai-process-card:nth-child(2) {
top: 23rem;
z-index: 2;
}
.ai-process-card:nth-child(3) {
top: 24rem;
z-index: 3;
}
.ai-process-card:nth-child(4) {
top: 25rem;
z-index: 4;
}
.ai-process-card:nth-child(5) {
top: 26rem;
z-index: 5;
border: 0;
}
.ai-process-card .intro-arc {
position: absolute;
right: 35rem;
top: 13rem;
width: 500px;
height: 500px;
border: 15px solid var(--color-secondary-dark);
border-radius: 50%;
opacity: 0;
transition: all linear 0.3s;
}
.ai-process-card:hover .intro-arc {
opacity: 0.1;
transition: all linear 0.3s;
}
.demo-spacer {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
background: var(--color-white-fixed);
color: #555;
text-align: center;
}
.demo-spacer h1 {
margin: 0;
font-size: clamp(32px, 5vw, 64px);
letter-spacing: -0.04em;
}
.ai-process-section {
position: relative;
background: var(--color-bg-soft-fixed);
overflow: visible;
padding-top: 0;
}
.darkmode .ai-process-section {
background: var(--color-black-fixed);
}
/* Sticky Heading */
.ai-process-header {
position: sticky;
top: 7rem;
/* z-index: 100; */
margin-bottom: 0;
padding: 34px 0 34px;
background: var(--color-white-fixed);
}
.darkmode .ai-process-header {
background: var(--color-secondary);
}
.ai-process-eyebrow {
display: inline-block;
margin-bottom: 12px;
color: var(--color-secondary-dark);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ai-process-stack {
position: relative;
gap: 2rem;
display: grid;
}
.ai-process-card {
position: sticky;
display: grid;
grid-template-columns: 120px minmax(0, 1fr) 320px;
gap: 40px;
align-items: start;
min-height: 190px;
padding: 5rem 0;
background: var(--color-white-fixed);
border-bottom: 1px solid rgb(41 36 36 / 8%);
transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, border-radius 0.35s ease, padding 0.35s ease;
/* border-radius: 1rem; */
align-items: start;
overflow: hidden;
}
.darkmode .ai-process-card {
background: var(--color-secondary);
border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.process-number {
color: var(--color-secondary-dark);
font-size: 6.5rem;
line-height: 1;
font-weight: 700;
border-right: 1px solid rgb(204 204 204 / 36%);
}
.darkmode .process-number {
border-right: 1px solid rgb(115 115 115 / 36%);
}
.process-content h3 {
margin: 0 0 12px;
color: var(--color-text);
font-size: 3.4rem;
line-height: 1.1;
font-weight: 700;
}
.process-content p {
max-width: 630px;
margin: 0;
/* color:#a2a2a2; */
font-size: 1.8rem;
line-height: 1.65;
}
.darkmode .process-content p {
color: var(--color-white-fixed);
}
.process-points {
margin: 4px 0 0;
padding: 0;
list-style: none;
}
.process-points li {
position: relative;
margin-bottom: 1rem;
padding-left: 0;
color: var(--color-text);
font-size: 1.6rem;
line-height: 1.35;
font-weight: 500;
display: flex;
gap: 1rem;
align-items: center;
}
.process-points li img {
height: 16px;
filter: brightness(0) saturate(100%) invert(59%) sepia(20%) saturate(665%) hue-rotate(101deg) brightness(95%) contrast(90%);
}
.case-study-section h2 {
color: var(--color-white-fixed);
text-align: left !important;
margin: initial !important;
max-width: 50%;
}
.case-study-section .slider .slide {
background: inherit;
filter: grayscale(100%) brightness(.9) invert(1);
}
.case-study-card-wrap {
gap: 6rem;
display: flex;
flex-direction: column;
}
.case-study-card .stats .stat span {
display: flex;
flex-direction: column;
font-size: 2.9rem;
}
.case-study-card .stats .stat {
display: flex;
align-items: start;
color: var(--color-white-fixed);
font-weight: 700;
font-size: 5rem;
border-right: 1px solid rgb(255 255 255 / 13%);
padding-right: 3rem;
margin-right: 3rem;
flex: 1;
}
.case-study-card .stats .stat:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;
}
.case-study-card .stats .stat span b {
font-size: 1.8rem;
font-weight: 400;
margin-top: 1rem;
line-height: 2.5rem;
}
.case-study-section {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--color-neutral-dark);
position: relative;
}
.case-study-card {
display: flex;
flex-direction: column;
border-radius: 1rem;
width: 100%;
height: 80rem;
background-size: cover;
background-position: center;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease-in-out;
position: -webkit-sticky;
position: sticky;
padding: 4rem;
justify-content: start;
gap: 2rem;
align-items: flex-start;
border: 0px solid rgb(255 255 255 / 27%);
}
.case-study-card .content {
display: flex;
flex-direction: column;
gap: 15px;
position: relative;
top: 0;
left: 0;
/* background: rgb(255 255 255 / 5%); */
border-radius: 8px;
backdrop-filter: blur(31px);
padding: 4rem;
max-width: 39%;
z-index: 1;
height: 100%;
}
.case-study-card .content h3 {
font-size: 4rem;
font-weight: 600;
margin: 0;
color: var(--color-white-fixed);
}
.case-study-card .content p {
font-size: 1.8rem;
margin: 0;
color: var(--color-white-fixed) !important;
line-height: 2.8rem;
}
.case-study-card .stats {
display: flex;
justify-content: space-between;
padding: 3rem;
border: 2px solid rgb(255 255 255 / 18%);
border-radius: 1rem;
/* background: rgba(255, 255, 255, 0.2); */
backdrop-filter: blur(16px);
width: 100%;
}
.case-study-card .stats .stat .icon {
margin-right: 2rem;
}
.case-study-card .content .see-case-study {
color: #8ddf7b;
font-weight: 600;
text-decoration: none;
margin-top: 10px;
}
/* Specific top positions for each card */
.case-study-card:nth-child(1) {
top: 11rem;
}
.case-study-card:nth-child(2) {
top: 13rem;
}
.case-study-card:nth-child(3) {
top: 15rem;
}
.darkmode .ai-tech-tab-btn:hover,
.darkmode .ai-tech-tab-btn.active {
background: var(--color-secondary);
}
.vocso-stack-section,
.vocso-stack-section .container,
.vocso-stack-wrap {
overflow: visible;
}
.vocso-stack-wrap {
position: relative;
display: flex;
flex-direction: column;
gap: 3rem;
}
/* Article tag itself */
.vocso-stack-card {
top: 0;
background: var(--color-white-fixed);
border-radius: 28px;
transform-origin: center top;
transition:
transform 0.08s linear,
filter 0.08s linear;
will-change: transform, filter;
position: sticky;
align-items: stretch;
min-height: 50rem;
border: 1px solid rgb(63 63 63 / 12%);
display: grid;
grid-template-columns: repeat(1, 1fr);
padding: 5rem;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.015);
}
/* Open card stays normal */
.vocso-stack-card.is-open {
transform: translateY(0) scale(1) !important;
filter: blur(0) !important;
}
.vocso-faq-section {
background: var(--color-bg);
}
.darkmode .vocso-faq-item.active {
background: var(--color-secondary);
}
.darkmode .vocso-faq-item {
border-bottom: 1px solid #25282c;
}
.vocso-faq-wrapper {
max-width: 970px;
margin: 5rem auto 0;
}
.vocso-faq-item {
border-bottom: 1px solid #eeeeee;
transition: background-color 0.35s ease, border-radius 0.35s ease, margin-bottom 0.35s ease;
border-radius: 1rem;
}
.vocso-faq-item:hover {
background: var(--color-secondary-light);
border-bottom: 0;
}
.darkmode .vocso-faq-item:hover {
background: var(--color-secondary);
}
.vocso-faq-item.active {
background: var(--color-secondary-light);
border-radius: 1rem;
border-bottom: 0;
margin-bottom: 18px;
}
.vocso-faq-question {
width: 100%;
min-height: 94px;
border: 0;
outline: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
text-align: left;
font-family: inherit;
padding: 4rem;
font-size: 2.5rem;
font-weight: 600;
}
.darkmode .vocso-faq-icon {
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
.darkmode .vocso-faq-answer p {
color: var(--color-text);
}
.vocso-faq-icon {
width: 13px;
height: 13px;
flex: 0 0 13px;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
transform: rotate(45deg);
transition: transform 0.35s ease, margin-top 0.35s ease;
margin-top: -6px;
}
.vocso-faq-item.active .vocso-faq-icon {
transform: rotate(-135deg);
margin-top: 6px;
}
/* IMPORTANT FIX */
.vocso-faq-answer {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 0.45s ease, opacity 0.35s ease;
}
.vocso-faq-item.active .vocso-faq-answer {
grid-template-rows: 1fr;
opacity: 1;
}
.vocso-faq-answer-inner {
overflow: hidden;
padding: 0 4rem;
}
.vocso-faq-item.active .vocso-faq-answer-inner {
padding-bottom: 4rem;
}
.vocso-faq-answer p {
line-height: 3rem;
font-size: 1.8rem;
font-weight: 500;
}
/* .darkmode .ai-process-card {
box-shadow: 0 14px 36px rgb(255 255 255 / 8%) !important;
} */
.ourtechnologystack-custom .slider:last-of-type {
margin-top: -3.6rem;
}
/* CTA css start */
.ai-cta {
position: relative;
background: var(--color-black-fixed) url(../images/ai-cta-bg.webp) no-repeat center center;
}
.cta-grid {
position: relative;
display: flex;
}
.glass-card {
position: relative;
z-index: 2;
max-width: 100%;
border: 1px solid rgba(255, 255, 255, 0.24);
background-color: rgb(255 255 255 / 7%) !important;
-webkit-backdrop-filter: blur(5px) !important;
backdrop-filter: blur(5px) !important;
border-radius: 3rem;
padding: 6rem;
width: 52%;
}
.cta-title {
margin: 0;
color: var(--color-white-fixed);
font-size: 5.5rem;
line-height: 1.18;
font-weight: 800;
}
.cta-title .gradient-text {
color: #fff;
/* color: transparent;
background: linear-gradient(92deg, var(--color-primary) 0%, #f47b54 32%, var(--color-secondary-dark) 70%, #57d0a0 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 0 34px rgba(253, 58, 48, 0.12); */
}
.cta-copy {
max-width: 100%;
margin: clamp(18px, 2.5vw, 28px) 0 0;
color: rgba(255, 255, 255, 0.72);
font-size: clamp(15px, 1.45vw, 20px);
line-height: 1.62;
font-weight: 500;
}
.cta-actions {
display: grid;
gap: 16px;
margin-top: clamp(26px, 3.4vw, 42px);
}
.primary-cta {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 18px;
/* width: min(100%, 560px); */
min-height: 74px;
padding: 2rem 4rem;
color: var(--color-white-fixed);
text-decoration: none;
border-radius: 12px;
font-size: 2rem;
font-weight: 600;
background: var(--color-secondary);
transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}
.primary-cta:hover {
transform: translateY(-2px);
color: #fff;
background: var(--color-primary);
transition: all linear 0.3s;
}
.cta-icon {
flex: 0 0 auto;
width: 42px;
height: 42px;
}
.cta-arrow {
flex: 0 0 auto;
width: 28px;
height: 28px;
transition: transform 220ms ease;
}
.primary-cta:hover .cta-arrow {
transform: translateX(4px);
}
.route-link {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
color: #45d7a2;
text-decoration: none;
font-size: clamp(15px, 1.35vw, 20px);
font-weight: 700;
letter-spacing: -0.02em;
}
.route-link svg {
width: 24px;
height: 24px;
}
.email-line {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: rgba(255, 255, 255, 0.74);
font-size: clamp(14px, 1.15vw, 18px);
line-height: 1.5;
font-weight: 500;
}
.email-line strong {
color: var(--color-secondary-dark);
font-weight: 700;
}
.email-line strong a:hover {
color: #fff;
}
.darkmode .case-study-section {
background: var(--color-black-fixed);
}
/* CTA Css end */
/* TECH STACK START */
.agentic-techstack-section {
color: #1f2933;
transition: background 0.3s ease, color 0.3s ease;
background: var(--color-black-fixed) url(../images/tecstack-bg.webp) no-repeat center center;
/* background-size: cover; */
overflow: hidden;
background-attachment: fixed;
position: relative;
}
.agentic-techstack-bg {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.24;
background:
linear-gradient(90deg, rgba(0, 215, 196, 0.06) 1px, transparent 1px),
linear-gradient(rgba(253, 58, 48, 0.045) 1px, transparent 1px);
background-size: 92px 92px;
}
.agentic-techstack-header {
display: flex;
align-items: flex-start;
margin-bottom: 9rem;
}
.agentic-techstack-header-content {
max-width: 820px;
}
.agentic-techstack-header h2 {
margin: 0 0 16px;
font-size: 4.4rem;
line-height: 1.1;
font-weight: 600;
color: var(--color-white-fixed);
}
.agentic-techstack-header p {
margin: 0;
font-size: 18px;
line-height: 1.7;
color: #86868b !important;
}
.agentic-techstack-wrapper {
position: relative;
margin-top: -10px;
overflow: hidden;
border-radius: 24px;
}
.agentic-techstack-row {
position: relative;
align-items: start;
gap: 28px;
min-height: 98px;
padding: 6rem 0;
border-bottom: 1px solid #25282c;
display: flex;
justify-content: space-between;
}
.agentic-techstack-row:last-child {
border-bottom: 0;
}
.agentic-techstack-info h3 {
margin: 0 0 7px;
color: #ffffff;
font-size: 3rem;
line-height: 1.22;
font-weight: 700;
}
.agentic-techstack-info p {
margin-top: 1rem;
max-width: 355px;
color: #86868b !important;
font-size: 1.8rem;
line-height: 1.45;
font-weight: 400;
}
.agentic-techstack-divider {
width: 1px;
height: 100px;
background: linear-gradient(180deg,
transparent,
rgba(255, 255, 255, 0.24),
transparent);
}
.agentic-techstack-list {
align-items: center;
gap: 14px;
display: grid;
grid-template-columns: repeat(5, 1fr);
width: 70%;
}
.agentic-techstack-card {
gap: 14px;
transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 4rem;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, background 0.3s ease;
background: var(--color-white-fixed);
text-align: center;
}
.agentic-techstack-card figure img {
width: 100%;
height: 100%;
object-fit: contain;
margin-bottom: 1rem;
}
.agentic-techstack-card:hover {
transform: translateY(-2px);
}
.agentic-techstack-card figure {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
height: 72px;
transition: transform 0.3s ease, background 0.3s ease;
cursor: pointer;
background: var(--color-white-fixed);
text-align: center;
text-transform: capitalize;
font-weight: 300;
font-size: 1.8rem;
color: var(--color-text);
justify-content: center;
}
.agentic-techstack-card span {
color: #000;
font-size: 2rem;
line-height: 1.2;
font-weight: 400;
white-space: nowrap;
}
/* TECHSTACK END */
/* modern service css end */
/* ai page header css start */
.ai-development-services-page #header-top:hover .desktop-navigation,
.ai-development-services-page #header-top:hover .carousel-item.active {
background: var(--color-white-fixed) !important;
}
.ai-development-services-page #header-top:hover .navbar-main .navbar-brand svg text {
fill: var(--color-black-fixed);
}
.ai-development-services-page #header-top:hover .brandlogo-number .slogan .carousel-item a,
.ai-development-services-page #header-top:hover .carousel-item.active {
color: var(--color-black-fixed) !important;
}
.ai-development-services-page #header-top:hover .navbar-main.navbar-light .navbar-nav .nav-link,
.ai-development-services-page #header-top:hover .brandlogo-number .slogan .carousel-item {
color: var(--color-black-fixed) !important;
}
.ai-development-services-page #header-top:hover .home-header .form-inline {
box-shadow: rgba(0, 0, 0, 0.1) -1px 0px 3px 0px, rgba(0, 0, 0, 0.06) -1px 0px 2px 0px;
border-left: none;
}
.ai-development-services-page #header-top:hover #dark-mode-toggle svg path {
fill: var(--color-black-fixed);
}
.ai-development-services-page #header-top:hover #dark-mode-toggle svg {
fill: var(--color-black-fixed);
}
/* ai page header css end */
/* ===================== PART B โ SUPPORT-TIER SPECIFIC (loads after Part A) ===================== */
/* ============================================================
VOCSO โ Support-Tier Pages ยท Shared Layout CSS
Used by:
/ai-development-cost-guide
/ai-case-studies
/ai-strategy-consultation
/embedded-engineering-pods
Hook: body gets class "support-page" (+ page-specific class).
Built step by step โ one component block at a time.
============================================================ */
/* ------------------------------------------------------------
1. SHARED HERO โ no-video, short LIGHT banner
Markup:
------------------------------------------------------------ */
/* ---- Hero uses VOCSO's theme-aware palette (auto light/dark) ---- */
.support-page .grow-banner.support-hero {
min-height: auto;
height: calc(100vh - 19rem);
padding: 17rem 0 9rem;
position: relative;
overflow: hidden;
background: var(--color-bg); /* #fff light ยท #000 dark */
border-bottom: 0.1rem solid var(--color-border);
}
.support-page .support-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(100rem 46rem at 84% -16%, rgba(253, 58, 48, .06) 0%, rgba(253, 58, 48, 0) 58%),
var(--color-bg);
}
/* subtle grid using the theme-aware border colour, faded downward */
.support-page .support-hero-bg::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--color-border) 0.1rem, transparent 0.1rem),
linear-gradient(90deg, var(--color-border) 0.1rem, transparent 0.1rem);
background-size: 4.8rem 4.8rem;
opacity: .55;
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 72%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 72%);
}
.support-page .grow-banner.support-hero .container {
position: relative;
z-index: 1;
}
/* text tokens flip automatically with the theme */
.support-page .grow-banner.support-hero h1 {
color: var(--color-text) !important;
}
.support-page .grow-banner.support-hero p {
color: var(--color-text-muted) !important;
max-width: 82rem;
}
/* secondary (outline) button โ text/border tokens, primary on hover */
.support-page .grow-banner.support-hero .btn-proposal.secondary-btn {
display: inline-flex !important;
align-items: center;
gap: 1rem;
color: var(--color-text) !important;
border: 0.2rem solid var(--color-text) !important;
background: transparent !important;
border-radius: 1rem;
padding: 2.4rem 4.2rem !important;
transition: all .3s;
}
/* theme-adaptive arrow (masked, follows text colour) */
.support-page .grow-banner.support-hero .btn-proposal.secondary-btn::after {
content: "";
flex: none;
width: 1.7rem;
height: 1.7rem;
background: currentColor;
-webkit-mask: url(../images/white-next-arrow.svg) no-repeat center / contain;
mask: url(../images/white-next-arrow.svg) no-repeat center / contain;
}
.support-page .grow-banner.support-hero .btn-proposal.secondary-btn:hover {
background: var(--color-secondary) !important;
border-color: var(--color-secondary) !important;
color: var(--color-white-fixed) !important;
}
/* ------------------------------------------------------------
2. COST-BY-BUILD-STAGE CARDS
Reuses VOCSO .engagemodalbox, tightened for a 4-up row
with a prominent price figure.
------------------------------------------------------------ */
.support-page .support-cost-stages .engagemodalbox {
padding: 4rem 3.4rem;
height: 100%;
display: flex;
flex-direction: column;
border: 0.1rem solid var(--color-border);
border-radius: 1.6rem;
box-shadow: 0 0.2rem 1.2rem rgb(0 0 0 / 3%);
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.support-page .support-cost-stages .engagemodalbox:hover {
transform: translateY(-0.5rem);
border-color: var(--color-secondary-dark);
box-shadow: none;
}
/* equal-height title zone so the price line + divider align across all 4 cards */
.support-page .support-cost-stages .engagemodalbox h3 {
font-size: 2.3rem;
line-height: 3rem;
min-height: 8.4rem;
padding-bottom: 2.4rem;
margin-bottom: 2.4rem;
align-items: flex-start;
}
/* price + timeline as one tidy block */
.support-page .support-cost-price {
display: block;
font-size: 3rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.1;
margin: 0 0 1.8rem;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* dedicated class (not bare ) so VOCSO's global small styling can't recolor it */
.support-page .support-cost-stages .support-cost-price .support-cost-time {
display: flex !important;
width: fit-content;
align-items: center;
font-size: 1.3rem;
font-weight: 600;
color: var(--color-secondary-dark) !important;
background: rgba(10, 74, 54, .10);
border-radius: 5rem;
padding: 0.5rem 1.2rem;
margin-top: 2.6rem;
letter-spacing: .02em;
text-transform: uppercase;
white-space: nowrap;
}
.darkmode .support-page .support-cost-stages .support-cost-price .support-cost-time {
background: rgba(95, 163, 133, .16);
}
.support-page .support-cost-stages .engagemodalbox p {
margin-bottom: 0;
padding-top: 0.4rem;
}
/* ------------------------------------------------------------
3. COST-BY-PROJECT-TYPE TABLE
New component (no AI-page equivalent) โ styled to match
VOCSO's clean card/section look. Scrolls on narrow screens.
------------------------------------------------------------ */
/* generic section intro (heading + lede) โ centered, used by every support section */
.support-page .support-section-intro {
max-width: 80rem;
margin: 0 auto 3.8rem;
text-align: center;
}
.support-page .support-section-intro p {
font-size: 1.8rem;
color: var(--color-text-muted);
line-height: 1.7;
margin: 0;
}
/* ---- Cost-by-type table: refined + theme-aware ---- */
.support-page .support-cost-table-wrap {
overflow-x: auto;
border: 0.1rem solid var(--color-border);
border-radius: 1.8rem;
background: var(--color-surface);
-webkit-overflow-scrolling: touch;
}
.support-page .support-cost-table {
border-collapse: collapse;
width: 100%;
min-width: 76rem;
}
.support-page .support-cost-table thead th {
text-align: left;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: .09em;
color: var(--color-text-muted);
font-weight: 700;
padding: 1.8rem 2.6rem;
background: rgba(125, 135, 155, .07);
border-bottom: 0.1rem solid var(--color-border);
}
.support-page .support-cost-table tbody tr {
transition: background .22s ease;
}
.support-page .support-cost-table tbody td {
padding: 2rem 2.6rem;
border-bottom: 0.1rem solid var(--color-border);
font-size: 1.55rem;
color: var(--color-text-muted);
vertical-align: middle;
}
.support-page .support-cost-table tbody tr:last-child td {
border-bottom: 0;
}
.support-page .support-cost-table tbody tr:hover td {
background: rgba(10, 74, 54, .06);
}
.support-page .support-cost-table tbody tr:hover td:first-child {
box-shadow: inset 0.3rem 0 0 var(--color-secondary-dark);
}
/* project type + leading icon (td stays a table cell โ no flex on td!) */
.support-page .support-cost-table .sct-name {
font-weight: 700;
color: var(--color-text);
min-width: 25rem;
white-space: nowrap;
}
.support-page .support-cost-table .sct-ico {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-right: 1.5rem;
width: 4.2rem;
height: 4.2rem;
border-radius: 1.1rem;
background: rgba(10, 74, 54, .10);
color: var(--color-secondary-dark);
}
.support-page .support-cost-table .sct-text {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.support-page .support-cost-table .sct-ico svg {
width: 2.1rem;
height: 2.1rem;
}
.support-page .support-cost-table .sct-sub {
display: block;
font-weight: 500;
color: var(--color-text-muted);
font-size: 1.3rem;
margin-top: 0.3rem;
}
/* price pill โ the figure that matters, in brand coral (styled on inner span so the td stays a cell) */
.support-page .support-cost-table .sct-price { white-space: nowrap; }
.support-page .support-cost-table .sct-price span {
display: inline-block;
font-weight: 800;
font-size: 1.5rem;
color: var(--color-secondary-dark);
background: rgba(10, 74, 54, .10);
padding: 0.6rem 1.3rem;
border-radius: 0.9rem;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* US column de-emphasised (neutral) so the VOCSO column pops */
.support-page .support-cost-table .sct-usd span {
color: var(--color-text-muted);
background: transparent;
padding-left: 0;
padding-right: 0;
font-weight: 700;
}
/* VOCSO column: keep the green pill, extra weight */
.support-page .support-cost-table .sct-vocso span { font-weight: 800; }
/* VOCSO header + "~50% less" badge */
.support-page .support-cost-table th.sct-vocso-th { color: var(--color-secondary-dark); white-space: nowrap; }
.support-page .support-cost-table th.sct-vocso-th span {
display: inline-block;
margin-left: 0.5rem;
font-size: 1rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
background: var(--color-primary);
color: var(--color-white-fixed);
padding: 0.2rem 0.7rem;
border-radius: 5rem;
vertical-align: middle;
}
/* timeline pill โ neutral outline */
.support-page .support-cost-table .sct-time { white-space: nowrap; }
.support-page .support-cost-table .sct-time span {
display: inline-block;
white-space: nowrap;
color: var(--color-text-muted);
border: 0.1rem solid var(--color-border);
padding: 0.5rem 1.2rem;
border-radius: 99.9rem;
font-size: 1.3rem;
font-weight: 600;
}
.support-page .support-cost-note {
display: flex;
gap: 1.4rem;
align-items: baseline;
margin-top: 3rem;
padding-top: 2.6rem;
border-top: 0.1rem solid var(--color-border);
}
.support-page .support-cost-note .scn-label {
flex: none;
font-weight: 700;
font-size: 1.3rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-text);
}
.support-page .support-cost-note p {
margin: 0;
font-size: 1.5rem;
line-height: 1.7;
color: var(--color-text-muted);
}
@media (max-width: 620px) {
.support-page .support-cost-note { flex-direction: column; gap: 0.8rem; }
}
/* ------------------------------------------------------------
4. WHAT-DRIVES-COST ยท DRIVER CARDS (3-up grid)
New component, VOCSO card look. Impact badge is a 3-tier
semantic scale (separate from the brand accent).
------------------------------------------------------------ */
.support-page .support-drivers-section {
background: #f7f9fb;
}
.support-page .support-driver-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.2rem;
margin-top: 0.6rem;
}
.support-page .support-driver-card {
position: relative;
background: #fff;
border: 0.1rem solid #e9ebf1;
border-radius: 1.6rem;
padding: 2.8rem 2.6rem;
box-shadow: 0 0.6rem 2.6rem rgba(20, 26, 40, .05);
}
.support-page .support-driver-card .sd-num {
display: inline-block;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: .08em;
color: #98a2b3;
font-variant-numeric: tabular-nums;
}
.support-page .support-driver-card h3 {
font-size: 2.4rem;
font-weight: 700;
color: var(--color-text);
margin: 0.8rem 0 1rem;
}
.support-page .support-driver-card p {
font-size: 1.8rem;
color: var(--color-text-muted);
line-height: 1.65;
margin: 0 0 1.6rem;
}
.support-page .support-driver-card .sd-impact {
display: inline-block;
font-size: 1.15rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
padding: 0.4rem 1.1rem;
border-radius: 0.6rem;
}
.support-page .support-driver-card .sd-impact--high { background: #1b2436; color: #fff; }
.support-page .support-driver-card .sd-impact--mid { background: #eaeef4; color: #4a5468; }
.support-page .support-driver-card .sd-impact--low { background: #f2f4f8; color: #8890a3; }
/* ------------------------------------------------------------
NAV FIX โ light hero needs a solid, DARK-text header
The old dark-hero setup kept the nav white + transparent and
only revealed it (white bar + dark text) on :hover. On a light
hero that meant the nav was invisible until hovered. Here we
make that hover look the DEFAULT for support pages.
------------------------------------------------------------ */
/* ===== LIGHT MODE ONLY (html:not(.darkmode)) ===== */
/* solid white header bar (was hover-only) */
html:not(.darkmode) .support-page #header-top .desktop-navigation,
html:not(.darkmode) .support-page #header-top .carousel-item.active {
background: var(--color-white-fixed) !important;
}
/* dark nav links, logo text, slogan/phone carousel */
html:not(.darkmode) .support-page #header-top .navbar-main.navbar-light .navbar-nav .nav-link,
html:not(.darkmode) .support-page #header-top .brandlogo-number .slogan .carousel-item a,
html:not(.darkmode) .support-page #header-top .brandlogo-number .slogan .carousel-item,
html:not(.darkmode) .support-page #header-top .carousel-item.active {
color: var(--color-black-fixed) !important;
}
html:not(.darkmode) .support-page #header-top .navbar-main .navbar-brand svg text {
fill: var(--color-black-fixed) !important;
}
/* dark light/dark-mode toggle icon */
html:not(.darkmode) .support-page #header-top #dark-mode-toggle svg,
html:not(.darkmode) .support-page #header-top #dark-mode-toggle svg path {
fill: var(--color-black-fixed) !important;
}
/* subtle divider shadow on the search/form, remove dark-hero glow */
.support-page #header-top {
box-shadow: none !important;
}
html:not(.darkmode) .support-page #header-top .home-header .form-inline {
box-shadow: rgba(0, 0, 0, .08) -0.1rem 0 0.3rem 0, rgba(0, 0, 0, .05) -0.1rem 0 0.2rem 0;
border-left: none;
}
/* Dark mode: give the header a SOLID black bar (not transparent) */
.darkmode .support-page #header-top .desktop-navigation,
.darkmode .support-page #header-top .carousel-item.active {
background: var(--color-black-fixed) !important;
}
.darkmode .support-page #header-top .home-header .form-inline {
box-shadow: rgba(255, 255, 255, .06) -0.1rem 0 0.3rem 0;
border-left: none;
}
/* Dark mode HOVER โ keep the header black + text WHITE
(Part A's :hover light-reveal turned text black โ invisible on the black bar) */
.darkmode .support-page #header-top:hover .desktop-navigation,
.darkmode .support-page #header-top:hover .carousel-item.active {
background: var(--color-black-fixed) !important;
}
.darkmode .support-page #header-top:hover .navbar-main.navbar-light .navbar-nav .nav-link,
.darkmode .support-page #header-top:hover .brandlogo-number .slogan .carousel-item a,
.darkmode .support-page #header-top:hover .brandlogo-number .slogan .carousel-item,
.darkmode .support-page #header-top:hover .carousel-item.active {
color: var(--color-white-fixed) !important;
}
.darkmode .support-page #header-top:hover .navbar-main .navbar-brand svg text {
fill: var(--color-white-fixed) !important;
}
.darkmode .support-page #header-top:hover #dark-mode-toggle svg,
.darkmode .support-page #header-top:hover #dark-mode-toggle svg path {
fill: var(--color-white-fixed) !important;
}
/* ------------------------------------------------------------
NAV LINK HOVER โ primary (coral) color, both themes.
High specificity so it beats the base dark/white nav colors
and the header-hover reveal rules.
------------------------------------------------------------ */
/* light mode */
html:not(.darkmode) .support-page #header-top .navbar-main.navbar-light .navbar-nav .nav-link:hover {
color: var(--color-primary) !important;
}
/* dark mode (also when the whole header is hovered) */
.darkmode .support-page #header-top .navbar-main.navbar-light .navbar-nav .nav-link:hover,
.darkmode .support-page #header-top:hover .navbar-main.navbar-light .navbar-nav .nav-link:hover {
color: var(--color-primary) !important;
}
/* Stats band (logo slider + counter) stays SOLID BLACK in both themes */
.support-page .ppc-stats-counter {
background: var(--color-black-fixed);
}
/* remove slider padding on support pages */
.support-page .angularPortfolioSlider .slider {
padding: 0;
}
/* Counter units (+, k, wk, min, $) โ small uniform suffix; numbers never wrap */
.support-page .ppc-stats-counter .counter-section h3 {
white-space: nowrap;
}
.support-page .ppc-stats-counter .counter-section h3 .counter-unit {
font-size: 2.4rem;
font-weight: 700;
letter-spacing: -.02em;
margin-left: .35rem;
}
.support-page .ppc-stats-counter .counter-section h3 .counter-unit--pre {
margin-left: 0;
margin-right: .1rem;
}
/* Hero โ LEFT aligned (default). Centering removed per request. */
/* ------------------------------------------------------------
DRIVERS ยท EDITORIAL BIG-TYPE layout (added โ non-destructive)
Big numbered headings, thin rules, whitespace. Theme-aware.
------------------------------------------------------------ */
.support-page .support-driver-list .sd-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 3.4rem;
align-items: start;
padding: 3rem 0.6rem;
border-top: 0.1rem solid #e6e3dd;
}
.darkmode .support-page .support-driver-list .sd-row {
border-top-color: rgba(255, 255, 255, .10);
}
.support-page .support-driver-list .sd-row:first-child {
border-top: 0;
}
.support-page .support-driver-list .sd-idx {
display: grid;
place-items: center;
width: 4.2rem;
height: 4.2rem;
border-radius: 50%;
font-weight: 800;
font-size: 1.7rem;
color: var(--color-secondary-dark);
background: rgba(10, 74, 54, .08);
font-variant-numeric: tabular-nums;
}
.darkmode .support-page .support-driver-list .sd-idx { background: rgba(95, 163, 133, .14); }
/* share meter โ visual weight of each driver's build share */
.support-page .support-driver-list .sd-meter {
margin-top: 2rem;
max-width: 44rem;
height: 0.7rem;
background: rgba(10, 74, 54, .08);
border-radius: 5rem;
overflow: hidden;
}
.darkmode .support-page .support-driver-list .sd-meter { background: rgba(255, 255, 255, .07); }
.support-page .support-driver-list .sd-meter span {
display: block;
height: 100%;
border-radius: 5rem;
background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-dark));
}
.support-page .support-driver-list .sd-meter--yr span {
background: repeating-linear-gradient(90deg, var(--color-secondary-dark) 0 0.7rem, transparent 0.7rem 1.3rem);
}
.support-page .support-driver-list .sd-row h3 {
font-size: 3rem;
font-weight: 600;
letter-spacing: -.03em;
color: var(--color-text);
margin: 0;
}
.support-page .support-driver-list .sd-row .sd-body p {
max-width: 64ch;
font-size: 1.8rem;
color: var(--color-text-muted);
line-height: 1.6;
margin: 0.8rem 0 0;
}
/* impact pills โ theme-aware, colour-graded */
.support-page .support-driver-list .sd-impact {
display: inline-block;
white-space: nowrap;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: 0.5rem 1.1rem;
border-radius: 0.7rem;
}
.support-page .support-driver-list .sd-impact--high { background: rgba(253, 58, 48, .12); color: var(--color-primary); }
.support-page .support-driver-list .sd-impact--mid { background: rgba(125, 135, 155, .16); color: var(--color-text); }
.support-page .support-driver-list .sd-impact--low { background: rgba(125, 135, 155, .09); color: var(--color-text-muted); }
/* % cost-share block (big number + impact pill stacked, right-aligned) */
.support-page .support-driver-list .sd-share {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.9rem;
text-align: right;
white-space: nowrap;
}
.support-page .support-driver-list .sd-pct {
font-size: 2.6rem;
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
color: var(--color-secondary-dark);
font-variant-numeric: tabular-nums;
}
.support-page .support-driver-list .sd-pct-unit { font-size: 1.3rem; font-weight: 700; color: var(--color-text-muted); margin-left: .2rem; }
@media (max-width: 720px) {
.support-page .support-driver-list .sd-row { grid-template-columns: auto 1fr; gap: 1.6rem; }
.support-page .support-driver-list .sd-row h3 { font-size: 2.3rem; }
.support-page .support-driver-list .sd-impact { grid-column: 2; justify-self: start; }
}
/* editorial drivers section โ theme-aware background (own class, doesn't touch the card section) */
.support-page .support-drivers-editorial {
background: var(--color-bg);
}
/* editorial list wrapped in a soft panel (rem + theme-aware) */
.support-page .support-driver-list {
max-width: 80%;
margin: 0 auto;
padding: 3.8rem;
border-radius: 2.6rem;
background: var(--color-bg-soft-fixed);
border: 0.1rem solid var(--color-border);
}
.darkmode .support-page .support-driver-list {
background: var(--color-neutral-dark);
}
/* dark mode โ CARD drivers section (make hardcoded light values adapt) */
.darkmode .support-page .support-drivers-section { background: var(--color-bg); }
.darkmode .support-page .support-driver-card { background: var(--color-neutral-dark); border-color: #2b3346; }
.darkmode .support-page .support-driver-card h3 { color: var(--color-white-fixed); }
/* dark mode โ HIGH/HIGHEST impact pill was dark navy, merging into dark cards; use coral */
.darkmode .support-page .support-driver-card .sd-impact--high { background: var(--color-primary); color: var(--color-white-fixed); }
/* ------------------------------------------------------------
HERO right-side COST SNAPSHOT card (theme-aware + rem)
------------------------------------------------------------ */
.support-page .support-hero-visual {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.support-page .cost-snap {
position: relative;
width: 100%;
max-width: 42rem;
background: var(--color-surface);
border: 0.1rem solid var(--color-border);
border-radius: 2rem;
box-shadow: 0 3rem 6rem rgba(20, 26, 40, .12);
padding: 3rem 3rem 2.4rem;
}
/* floating trust chips that hug the cost card corners */
.support-page .cost-float {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 1rem;
padding: 1.1rem 1.5rem;
background: var(--color-surface);
border: 0.1rem solid var(--color-border);
border-radius: 1.4rem;
box-shadow: 0 1.4rem 3.4rem rgba(20, 26, 40, .14);
animation: costFloat 4.5s ease-in-out infinite;
}
.darkmode .support-page .cost-float {
background: var(--color-neutral-dark);
box-shadow: 0 1.4rem 3.4rem rgba(0, 0, 0, .5);
}
.support-page .cost-float .cf-ico {
flex: none;
width: 3.4rem;
height: 3.4rem;
display: grid;
place-items: center;
border-radius: 1rem;
background: rgba(10, 74, 54, .10);
color: var(--color-secondary-dark);
}
.darkmode .support-page .cost-float .cf-ico {
background: rgba(95, 163, 133, .16);
}
.support-page .cost-float .cf-ico svg { width: 1.8rem; height: 1.8rem; }
.support-page .cost-float .cf-txt { display: flex; flex-direction: column; line-height: 1.2; }
.support-page .cost-float .cf-txt strong { font-size: 1.5rem; font-weight: 700; color: var(--color-text); }
.support-page .cost-float .cf-txt small { font-size: 1.2rem; color: var(--color-text-muted); }
.support-page .cost-float--tl { top: -2.2rem; right: -3.8rem; left: auto; animation-delay: 0s; }
.support-page .cost-float--br { bottom: 4.5rem; left: -4.6rem; animation-delay: 1.8s; }
@keyframes costFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-0.9rem); }
}
@media (prefers-reduced-motion: reduce) {
.support-page .cost-float { animation: none; }
}
@media (max-width: 1199px) {
.support-page .cost-float { display: none; }
}
/* ---- Case-studies hero: featured build card (reuses .cost-snap base) ---- */
.support-page .cs-feature .csf-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding-bottom: 2rem;
border-bottom: 0.1rem solid var(--color-border);
}
.support-page .cs-feature .csf-tag {
font-size: 1.15rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-secondary-dark);
background: rgba(10, 74, 54, .10);
padding: 0.5rem 1.1rem;
border-radius: 5rem;
}
.darkmode .support-page .cs-feature .csf-tag { background: rgba(95, 163, 133, .16); }
.support-page .cs-feature .csf-industry { font-size: 1.35rem; color: var(--color-text-muted); font-weight: 600; }
.support-page .cs-feature .csf-metric {
display: flex;
align-items: baseline;
gap: 1.2rem;
flex-wrap: wrap;
margin: 2.4rem 0 1.4rem;
}
.support-page .cs-feature .csf-metric strong {
font-size: 5.4rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
color: var(--color-secondary-dark);
font-variant-numeric: tabular-nums;
}
.support-page .cs-feature .csf-metric span { font-size: 1.5rem; color: var(--color-text-muted); max-width: 18rem; line-height: 1.35; }
.support-page .cs-feature .csf-desc { font-size: 1.5rem; line-height: 1.65; color: var(--color-text); margin: 0 0 2rem; }
.support-page .cs-feature .csf-chips { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2.4rem; }
.support-page .cs-feature .csf-chips span {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
background: var(--color-bg-soft-fixed);
border: 0.1rem solid var(--color-border);
padding: 0.5rem 1.1rem;
border-radius: 0.8rem;
}
.darkmode .support-page .cs-feature .csf-chips span { background: rgba(255, 255, 255, .05); }
/* shorter card โ hang the bottom float off the corner instead of over the chips */
.support-page .cs-feature .cost-float--br { bottom: -2.2rem; }
/* ---- Case-studies: selected builds grid ---- */
.support-page .cs-grid-section .support-section-intro em { font-style: italic; color: var(--color-text-muted); }
.support-page .cs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.4rem;
}
.support-page .cs-card {
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 0.1rem solid var(--color-border);
border-radius: 1.8rem;
padding: 3rem 2.8rem;
transition: transform .28s ease, border-color .28s ease;
}
.support-page .cs-card:hover { transform: translateY(-0.5rem); border-color: var(--color-secondary-dark); }
.darkmode .support-page .cs-card { background: var(--color-neutral-dark); }
.support-page .cs-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.8rem; }
.support-page .cs-card-tag {
font-size: 1.2rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--color-secondary-dark); background: rgba(10, 74, 54, .10);
padding: 0.5rem 1.1rem; border-radius: 5rem;
}
.darkmode .support-page .cs-card-tag { background: rgba(95, 163, 133, .16); }
.support-page .cs-card-metric {
display: flex; flex-direction: column; align-items: flex-end; line-height: 1;
font-size: 2.8rem; font-weight: 800; color: var(--color-secondary-dark);
letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.support-page .cs-card-metric small {
font-size: 1.1rem; font-weight: 600; color: var(--color-text-muted);
text-transform: uppercase; letter-spacing: .04em; margin-top: .5rem;
}
.support-page .cs-card h3 { font-size: 2.1rem; font-weight: 700; color: var(--color-text); margin-bottom: 1rem; line-height: 1.25; }
.support-page .cs-card > p { font-size: 1.5rem; line-height: 1.6; color: var(--color-text-muted); margin-bottom: 2rem; }
.support-page .cs-card-chips { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2.2rem; }
.support-page .cs-card-chips span {
font-size: 1.2rem; font-weight: 600; color: var(--color-text);
background: var(--color-bg-soft-fixed); border: .1rem solid var(--color-border);
padding: .45rem 1rem; border-radius: .7rem;
}
.darkmode .support-page .cs-card-chips span { background: rgba(255, 255, 255, .05); }
.support-page .cs-card-foot {
margin-top: auto; display: flex; justify-content: space-between; align-items: center;
padding-top: 1.8rem; border-top: .1rem solid var(--color-border);
}
.support-page .cs-card-foot span { font-size: 1.3rem; color: var(--color-text-muted); }
.support-page .cs-card-foot a { font-size: 1.4rem; font-weight: 700; color: var(--color-secondary-dark); white-space: nowrap; }
@media (max-width: 991px) {
.support-page .cs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.support-page .cs-grid { grid-template-columns: 1fr; }
}
/* ---- Team / location rate comparison (why VOCSO costs less) ---- */
.support-page .rate-bars { max-width: 92rem; margin: 0 auto; display: flex; flex-direction: column; }
.support-page .rate-row { display: grid; grid-template-columns: 23rem 1fr auto; align-items: center; gap: 3.2rem; padding: 2.1rem 0; border-top: 0.1rem solid var(--color-border); }
.support-page .rate-row:first-child { border-top: 0; }
.support-page .rate-region { font-size: 1.75rem; font-weight: 600; color: var(--color-text); }
.support-page .rate-track { height: 2.2rem; background: var(--color-bg-soft-fixed); border-radius: 5rem; overflow: hidden; }
.darkmode .support-page .rate-track { background: rgba(255, 255, 255, .08); }
.support-page .rate-fill { height: 100%; border-radius: 5rem; background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-dark)); }
.support-page .rate-val { font-size: 2rem; font-weight: 700; color: var(--color-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.support-page .rate-val small { font-size: 1.3rem; font-weight: 600; color: var(--color-text-muted); }
.support-page .rate-row.is-vocso .rate-region { color: var(--color-secondary-dark); font-weight: 800; }
.support-page .rate-row.is-vocso .rate-fill { background: var(--color-primary); }
.support-page .rate-row.is-vocso .rate-val { color: var(--color-secondary-dark); }
.support-page .rate-badge {
display: inline-block; margin-left: 0.8rem; font-size: 1.1rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; color: var(--color-white-fixed);
background: var(--color-primary); padding: 0.3rem 0.9rem; border-radius: 5rem; vertical-align: middle;
}
.support-page .rate-foot { text-align: center; max-width: 68rem; margin: 4.8rem auto 0; font-size: 1.6rem; color: var(--color-text-muted); line-height: 1.65; }
/* VOCSO highlight panel โ the punchline, broken out of the chart */
.support-page .rate-vocso-highlight {
max-width: 92rem;
margin: 3.6rem auto 0;
display: flex;
align-items: center;
gap: 3.4rem;
background: var(--color-secondary);
color: var(--color-white-fixed);
border-radius: 2rem;
padding: 3.6rem 4rem;
position: relative;
overflow: hidden;
}
.support-page .rate-vocso-highlight::before {
content: "";
position: absolute;
right: -6rem;
top: -6rem;
width: 22rem;
height: 22rem;
border-radius: 50%;
background: rgba(95, 163, 133, .18);
pointer-events: none;
}
.support-page .rvh-main { flex: 1; position: relative; z-index: 1; }
.support-page .rvh-tag {
display: inline-block;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
background: var(--color-primary);
color: var(--color-white-fixed);
padding: 0.4rem 1.1rem;
border-radius: 5rem;
}
.support-page .rvh-region { display: block; margin-top: 1.4rem; font-size: 1.7rem; font-weight: 600; opacity: .82; }
.support-page .rvh-rate { font-size: 5rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.support-page .rvh-rate small { font-size: 1.9rem; font-weight: 600; opacity: .8; }
.support-page .rvh-note { font-size: 1.5rem; line-height: 1.6; opacity: .85; margin: 1.8rem 0 0; max-width: 50rem; color: var(--color-white-fixed); }
.support-page .rvh-save {
flex: none;
text-align: center;
padding-left: 3.4rem;
border-left: 0.1rem solid rgba(255, 255, 255, .22);
position: relative;
z-index: 1;
}
.support-page .rvh-save strong { display: block; font-size: 6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--color-white-fixed); }
.support-page .rvh-save span { display: block; margin-top: 0.8rem; font-size: 1.5rem; opacity: .85; max-width: 14rem; }
@media (max-width: 640px) {
.support-page .rate-row { grid-template-columns: 1fr auto; gap: 0.8rem 1.4rem; }
.support-page .rate-track { grid-column: 1 / -1; order: 3; }
.support-page .rate-vocso-highlight { flex-direction: column; align-items: flex-start; gap: 2.4rem; padding: 3rem 2.6rem; }
.support-page .rvh-save { padding-left: 0; padding-top: 2.4rem; border-left: 0; border-top: 0.1rem solid rgba(255, 255, 255, .22); text-align: left; width: 100%; }
.support-page .rvh-save span { max-width: none; }
}
/* ---- How you pay (pricing / commercial models) ---- */
.support-page .pm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2rem; }
.support-page .pm-card {
display: flex; flex-direction: column;
background: var(--color-surface); border: 0.1rem solid var(--color-border);
border-radius: 1.6rem; padding: 3rem 2.6rem;
transition: transform .28s ease, border-color .28s ease;
}
.support-page .pm-card:hover { transform: translateY(-0.5rem); border-color: var(--color-secondary-dark); }
.darkmode .support-page .pm-card { background: var(--color-neutral-dark); }
.support-page .pm-ico {
display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 1.2rem;
background: rgba(10, 74, 54, .10); color: var(--color-secondary-dark); margin-bottom: 1.8rem;
}
.darkmode .support-page .pm-ico { background: rgba(95, 163, 133, .16); }
.support-page .pm-ico svg { width: 2.4rem; height: 2.4rem; }
.support-page .pm-card h3 { font-size: 2rem; font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.support-page .pm-card p { font-size: 1.5rem; line-height: 1.6; color: var(--color-text-muted); margin-bottom: 2rem; }
.support-page .pm-best {
margin-top: auto; align-self: flex-start; font-size: 1.2rem; font-weight: 700;
color: var(--color-secondary-dark); background: rgba(10, 74, 54, .08);
padding: 0.6rem 1.2rem; border-radius: 5rem;
}
.darkmode .support-page .pm-best { background: rgba(95, 163, 133, .14); }
@media (max-width: 991px) { .support-page .pm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .support-page .pm-grid { grid-template-columns: 1fr; } }
/* ---- ROI / value ---- */
.support-page .roi-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: stretch;
}
.support-page .roi-stats { display: flex; flex-direction: column; gap: 1.8rem; }
.support-page .roi-stat {
display: flex; flex-direction: column; gap: 0.4rem;
background: var(--color-surface); border: 0.1rem solid var(--color-border);
border-radius: 1.4rem; padding: 2.4rem 2.6rem;
}
.darkmode .support-page .roi-stat { background: var(--color-neutral-dark); }
.support-page .roi-stat strong { font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--color-secondary-dark); font-variant-numeric: tabular-nums; }
.support-page .roi-stat span { font-size: 1.55rem; color: var(--color-text); font-weight: 600; }
.support-page .roi-stat small { font-size: 1.2rem; color: var(--color-text-muted); }
.support-page .roi-frame {
background: var(--color-bg-soft-fixed);
color: var(--color-text);
border: 0.1rem solid var(--color-border);
border-radius: 2rem;
padding: 3.4rem 3rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.darkmode .support-page .roi-frame { background: var(--color-neutral-dark); }
.support-page .roi-frame-label { font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.support-page .roi-steps { list-style: none; margin: 3.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 2.8rem; }
.support-page .roi-steps li { display: flex; gap: 1.5rem; align-items: flex-start; font-size: 1.7rem; line-height: 1.6; }
.support-page .roi-steps li div { color: var(--color-text-muted); }
.support-page .roi-steps b { font-weight: 700; color: var(--color-text); }
.support-page .roi-num {
flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%;
display: grid; place-items: center; font-size: 1.7rem; font-weight: 800;
background: rgba(10, 74, 54, .10); color: var(--color-secondary-dark);
}
.darkmode .support-page .roi-num { background: rgba(95, 163, 133, .16); }
.support-page .roi-frame .roi-cta { display: block; width: 100%; text-align: center; margin-top: 3.6rem; }
@media (max-width: 900px) { .support-page .roi-layout { grid-template-columns: 1fr; } }
.darkmode .support-page .cost-snap {
background: var(--color-neutral-dark);
box-shadow: 0 3rem 6rem rgba(0, 0, 0, .45);
}
.support-page .cost-snap-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.6rem;
flex-wrap: wrap;
padding-bottom: 2rem;
border-bottom: 0.1rem solid var(--color-border);
}
.support-page .cost-snap-head .cs-label { font-size: 1.5rem; font-weight: 700; color: var(--color-text); }
.support-page .cost-snap-head .cs-sub { font-size: 1.2rem; color: var(--color-text-muted); }
.support-page .cost-snap-list { list-style: none; margin: 0; padding: 0; }
.support-page .cost-snap-list li { padding: 1.6rem 0; border-bottom: 0.1rem solid var(--color-border); }
.support-page .cost-snap-list li:last-child { border-bottom: 0; }
.support-page .cs-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.support-page .cs-stage { font-size: 1.5rem; font-weight: 600; color: var(--color-text); }
.support-page .cs-price { font-size: 1.5rem; font-weight: 800; color: var(--color-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.support-page .cs-bar { height: 0.6rem; border-radius: 99rem; background: rgba(125, 135, 155, .16); overflow: hidden; }
.support-page .cs-bar span { display: block; height: 100%; border-radius: 99rem; background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-dark)); }
.support-page .cost-snap-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
padding-top: 2rem;
border-top: 0.1rem solid var(--color-border);
}
.support-page .cost-snap-foot span { font-size: 1.3rem; color: var(--color-text-muted); }
.support-page .cost-snap-foot a { font-size: 1.4rem; font-weight: 700; color: var(--color-secondary); white-space: nowrap; }
/* dark mode: lighter green (dark green is low-contrast on the dark card) */
.darkmode .support-page .cs-price,
.darkmode .support-page .cost-snap-foot a { color: var(--color-secondary-dark); }
.darkmode .support-page .cs-bar span { background: linear-gradient(90deg, var(--color-secondary-dark), #86e0b4); }
@media (max-width: 991px) {
.support-page .support-hero-visual { margin-top: 4rem; justify-content: flex-start; }
.support-page .cost-snap { max-width: 48rem; }
}
/* dark mode: table green accents use lighter secondary (dark green is low-contrast on dark) */
.darkmode .support-page .support-cost-table .sct-ico,
.darkmode .support-page .support-cost-table .sct-price span { color: var(--color-secondary-dark); }
.darkmode .support-page .support-cost-table tbody tr:hover td:first-child { box-shadow: inset 0.3rem 0 0 var(--color-secondary-dark); }
/* ------------------------------------------------------------
COST-GUIDE CONTENT MODE
Page shows relative investment language instead of hard
figures โ these override the number-styled defaults.
------------------------------------------------------------ */
/* project-type table: "what drives the cost" column (prose, not a pill) */
.support-page .support-cost-table .sct-driver {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.55;
color: var(--color-text-muted);
min-width: 22rem;
}
/* rate comparison: band words instead of an hourly figure */
.support-page .rate-val small { margin-left: 0.6rem; }
.support-page .rvh-rate.rvh-rate--band { font-size: 3.2rem; letter-spacing: -0.01em; }
/* with a prose "what drives the cost" column, the name column must wrap
instead of nowrapping past its padding */
.support-page .support-cost-table .sct-name {
white-space: normal;
padding-right: 3rem;
}
.support-page .support-cost-table .sct-driver {
max-width: 40rem;
}
/* ------------------------------------------------------------
COST-GUIDE HERO ILLUSTRATION โ "what an AI budget is made of"
Inline SVG so it stays crisp and recolours with the theme.
Geometry/font-size inside the