:root {
/*NEW - START */
 /*Text*/
  --text-default: 1rem;  
  --text-xxs: 0.65rem; /*10.4 px - new header CTA size)*/
  --text-xs: 0.75rem;  /*12px based on root font size of 16*/
  --text-sm: 0.813rem; /*13px */
  --text-md: 1.125rem; /*18px */ /*spaced title */
  --text-md-lg: 1.5rem;
  --text-lg: 2.25rem; /*36px */
  --text-xl: 3.125rem; /*50px*/
  --text-xxl: 3.75rem; /*60px*/
  --text-xxxl: 4.375rem; /*80px*/
  --text-xxxxl: 7.5rem; /*120px*/
  
  /* native bootstrap display-1 */
  /*--text-xxxl: 5rem;*/ /*80px*/

  --letter-spacing-1: 1pt;
  --letter-spacing-2: 1.6pt;
  --letter-spacing-3: 2pt;
  --letter-spacing-4: 2.5pt;
    /*Greys and black*/
  --versa-grey: #515254; /*Default text*/
  --versa-grey-85: #747576;
  --versa-grey-40: #B9BABB;
  --versa-grey-15: #DCDCDD;
  --versa-grey-15-transparent: 220, 220, 221, 0.8;
  --versa-slate-grey: #23282C;
  --versa-slate-grey-rgb: 35, 40, 44;
  --versa-rich-black: #020304;

    /*Blues primary*/
  --versa-sapphire-blue: #0071BC;
  --versa-sapphire-blue-rgb: 0, 113, 188;
  --versa-sapphire-blue-85: #2C8DCE;
  --versa-sapphire-blue-40: #66AAD7;
  --versa-sapphire-blue-15: #AFD4EE;
  --versa-azure-blue: #0095DA;
  --versa-azure-blue-85: #5BCBFF;
  --versa-azure-blue-40: #B6E8FF;
  --versa-azure-blue-15: #D6F2FF;
  /*Greens primary*/
  --versa-emerald-green-rgb: 147, 213, 0;
  --versa-emerald-green: #62BB46;
  --versa-emerald-green-85: #81C96B;
  --versa-emerald-green-40: #A1D690;
  --versa-emerald-green-15: #D0EBC8;
  --versa-spring-green:#93D500;  /*BTN*/
  --versa-spring-green-85:#A9DD33; 
  --versa-spring-green-40:#BEE666; 
  --versa-spring-green-15:#DFF2B3; 

  /*Secondary colours*/
  --versa-frost: #F3F8F2;
  --versa-frost-rgba: 220, 220, 221, 0.8;
  --versa-teal: #0D868E;
  --versa-fuchsia: #EC058E; 
   /*Blues secondary */
  --versa-royal-blue: #002060;
  --versa-royal-blue-85: #0041C2;
  --versa-royal-blue-40: #98BAFF;
  --versa-royal-blue-15: #E5EEFF;
  --versa-midninght-indigo: #091634;
  --versa-midninght-indigo-rgb: 9, 22, 52;
  --versa-dark-blue: #0B1B41;
  /*Orange*/
  --versa-tangerine: #FF9914;
  --versa-tangerine-85: #FEB14C;  /*15% lighter light-gold */
  --versa-tangerine-40: #FFD7A4;  /*60% lighter tan*/
  --versa-tangerine-15: #FFF1DE;  /*85% lighter cornsilk*/
 /*Greys*/
  --versa-light-grey: #ACB6C4;
  --versa-light-grey-85: #BFC7D2;
  --versa-light-grey-40: #DEE2E8;
  --versa-light-grey-15: #F3F5F7; /*New Gartner bg*/
  --versa-light-grey-15-rgb: 243, 245, 247; /*New Gartner bg*/
  --versa-accessible-light-grey: #737373;

   /*Gradients and BGs*/
  --versa-gradient-blue: linear-gradient(to right, var(--versa-sapphire-blue) 0%, var(--versa-azure-blue) 100%);
  --versa-gradient-green: linear-gradient(to right, var(--versa-emerald-green) 0%, var(--versa-spring-green) 100%);
  --bg-versa-ripple-grey: url('../images/new-homepage/versa-ripple-light-grey-blurred.webp');
  --bg-versa-ripple-main: url('../images/new-homepage/versa-ripple-xl.webp');
  --bg-hero-white-transparent: url('../images/new-homepage/bg-white-transparent.png');
  --bg-card-light-grey: url('../images/new-homepage/bg-card-light-grey-transparent.png');
  --bg-card-azure-blue: url('../images/new-homepage/bg-card-azure-blue.png');
  --bg-versa-sand-large: url('../images/new-homepage/bg-sand-large.webp');
  /*New - AI landing*/
  --bg-gradient-blue-map: url('../images/ai-pages/bg-gradient-blue-map.webp');

  /*Utility*/
  --border-versa-grey-thin: 1px solid var(--versa-grey);
  --border-versa-grey-15-thin: 1px solid var(--versa-grey-15);
    /*New - AI landing*/
  --border-rich-black-medium: 2px solid var(--versa-rich-black);
  --border-radius-sm: 8px;
  --border-radius-md: 10px;
  --border-radius-lg: 15px; /*CHECK and sync with actual*/
  --border-radius-xl: 20px;
  --border-radius-xxl: 30px;

  --bg-white-transparent-50: 255, 255, 255, 0.5;
  --transparent-rgba: 255, 255, 255, 0;
    --clip-path-medium: 'M 119.11 25.39 c 4.97 -3.78 7.88 -9.67 7.88 -15.91 V 0 S 0 0 0 0 v 104 h 9.1 c 4.38 0 8.63 -1.44 12.11 -4.09 L 119.11 25.39 Z';
    --clip-path-medium-height: 104px;
    --clip-path-medium-width: 127px;
    --clip-path-large: 'M0,0v160h22.53c2.28-.21,7.4-1.49,15.5-7.8,15.08-11.74,159.34-123.6,159.34-123.6,0,0,6.8-3.97,6.8-12.66V0H0Z';
    --clip-path-large-height: 160px;
    --clip-path-large-width: 204px;
  /*NEW - END */


      /*CLEAN*/
  --emerald: #5DD564;
  --emerald-darker:  color-mix(in srgb,var(--emerald),#000 5%);
  --emerald-darkest: color-mix(in srgb,var(--emerald),#000 15%);

 
  /*OLD CSS remove after clean up*/
  --light-blue: #E0F2FB;
  --light-blue2: #009ADE;
  --light-blue3: #0071BC;
  --light-blue4: #C7E0EB;
  --light-blue5: #CCEAF8;
  --dark-blue: #002060;



  --light-grey: #AAAAAA;
  --light-grey2: #EEF4F7;
  --light-grey3: #CDCDCD;
  --gradient-blue: linear-gradient(90deg, var(--versa-azure-blue), var(--dark-blue));
  --gradient-blue2: linear-gradient(to right, var(--versa-azure-blue) 0%, var(--light-blue3) 100%);
  --gradient-blue3: linear-gradient(180deg, var(--versa-azure-blue) 0%, var(--light-blue3) 100%);
  --gradient-grey: linear-gradient(#fff 0%, #fff 10%, #f7f7f7 100%) left top;
  --gradient-grey2: linear-gradient(180deg, #FFF 60.68%, #F7F7F7 100%);
  /*BS override*/
  --bs-border-color: var(--light-grey); 
}


@font-face {
  font-family: "Gilroy";
  src: url('https://versa-networks.com/fonts/webFonts/GilroyLight/font.woff2') format('woff2'), url('https://versa-networks.com/fonts/webFonts/GilroyLight/font.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url('https://versa-networks.com/fonts/webFonts/GilroyRegular/font.woff2') format('woff2'), url('https://versa-networks.com/fonts/webFonts/GilroyRegular/font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url('https://versa-networks.com/fonts/webFonts/GilroyMedium/font.woff2') format('woff2'), url('https://versa-networks.com/fonts/webFonts/GilroyMedium/font.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url('https://versa-networks.com/fonts/webFonts/GilroySemiBold/font.woff2') format('woff2'), url('https://versa-networks.com/fonts/webFonts/GilroySemiBold/font.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url('https://versa-networks.com/fonts/webFonts/GilroyBold/font.woff2') format('woff2'), url('https://versa-networks.com/fonts/webFonts/GilroyBold/font.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.wp-block-separator {
    display: none;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--versa-grey);
}

a {
    text-decoration: none;
    color: var(--versa-grey);
}

a:link, 
a:visited, 
a:active {
    text-decoration: none;
}

a:hover .chevron-angled-right, 
a:hover .chevron-angled-right-white {
    transform: scale(1.4); 
}

h1, h2, h3, h4, h5, h6 {
   font-family: 'Gilroy', sans-serif;
}

h1.display-1  {
  font-weight: 500;
  font-size: 60px;
}

h2,.h2 {
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1;
}

h2.display-1  {
  font-size: var(--text-xxxxl);
}

h2.display-2  {
  font-size: var(--text-xxxl);
}

h3,.h3 {
    font-size: var(--text-lg);
    line-height: 45px; 
    font-weight: 400;
}

h4,.h4 {
    font-size: 25px;
    line-height: 1; 
}

.text-md {
    font-size: var(--text-md);
}

/*Helper classes*/
/*flex */
.flex-1 {
    flex: 1 1 0%;
}

/*z index*/
.z-1 {
    z-index: 1;
}


/*Width and height*/
.max-w-screen-xs {
    max-width: 575px;
}

.max-w-screen-sm {
    max-width: 767px;
}

.max-w-screen-md {
    max-width: 991px;
}

.min-h-220-responsive {
    min-height: 220px;
}

.min-h-320-responsive {
    min-height: 320px;
}

.min-h-360-responsive {
    min-height: 360px;
}

.min-h-500-responsive {
    min-height: 500px;
}

.h-450 {
    height: 450px;
}

.h-500 {
    height: 500px;
}

.h-650 {
    height: 650px;
}

.h-750 {
    height: 750px;
}

/*Border*/

.border-light-grey {
    border: var(--border-versa-grey-15-thin);
}

.border-t-light-grey {
    border-top: var(--border-versa-grey-15-thin);
}

.border-r-light-grey {
    border-right: var(--border-versa-grey-15-thin);
}

.border-b-light-grey {
    border-bottom: var(--border-versa-grey-15-thin);
}

.border-l-light-grey {
    border-left: var(--border-versa-grey-15-thin);
}

.border-t-r-light-grey {
    border-top: var(--border-versa-grey-15-thin);
    border-left: var(--border-versa-grey-15-thin);
    border-right: var(--border-versa-grey-15-thin);
}


.border-t-versa-grey {
    border-top: var(--border-versa-grey-thin);
}

.border-r-versa-grey {
    border-right: var(--border-versa-grey-thin);
}

.border-b-versa-grey {
    border-bottom: var(--border-versa-grey-thin);
}

.border-l-versa-grey {
    border-left: var(--border-versa-grey-thin);
}

.border-radius-8 {
    border-radius: var(--border-radius-sm);
}

.border-radius-15 {
    border-radius: var(--border-radius-lg);
}

.border-t-radius-15 {
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
}

.border-t-r-radius-15 {
    border-top-right-radius: var(--border-radius-lg);
}

.border-radius-25 {
    border-radius: 25px;
}

/*NEW - AI Landing*/
.border-t-r-radius-25 {
    border-top-right-radius: 25px;
}

.border-radius-30 {
    border-radius: 30px;
}

.border-t-radius-30 {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.border-b-radius-30 {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}



/*Text*/
.font-thin {
    font-weight: 100;
}

.font-light {
    font-weight: 300;
}

.font-regular {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semi-bold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-black {
    font-weight: 900;
}

/*Font colour */
.text-frost {
    color: var(--versa-frost);
}

.text-azure-blue {
    color: var(--versa-azure-blue);
}

.text-sapphire-blue {
    color: var(--versa-sapphire-blue);
}

.text-sapphire-blue-40 {
    color: var(--versa-sapphire-blue-40);
}

.text-royal-blue {
    color: var(--versa-royal-blue);
}

.text-spring-green {
    color: var(--versa-spring-green);
}

.text-emerald-green {
    color: var(--versa-emerald-green);
}

.text-light-grey {
    color: var(--versa-grey-40);
}

.text-rich-black {
    color: var(--versa-rich-black);
}

/*New - AI landing*/
.text-tangerine {
    color: var(--versa-tangerine);
}

.letter-spacing-1 {
    letter-spacing: var(--letter-spacing-1);
}

/*Background*/
.bg-slate {
    background-color: var(--versa-slate-grey);
}

.bg-azure-blue {
    background-color: var(--versa-azure-blue);
}

.bg-sapphire-blue {
    background-color: var(--versa-sapphire-blue);
}

.bg-midnight-blue {
    background-color: var(--versa-midninght-indigo);
}

.bg-dark-blue {
    background-color: var(--versa-dark-blue);
}

.bg-light-grey {
    background-color: var(--versa-light-grey-15);
}

.bg-frost-transparent {
    background-color: rgba(var(--versa-frost-rgba));
}

.bg-white-transparent {
    background-color: rgba(var(--bg-white-transparent-50));
}

.bg-gartner {
    background: linear-gradient(to right, rgb(var(--versa-slate-grey-rgb)) 0%, rgb(var(--versa-slate-grey-rgb)) 50%, rgba(var(--transparent-rgba)) 50%, rgba(var(--transparent-rgba)) 100%);
}

.bg-gartner-light-grey {
    background: linear-gradient(to right, rgb(var(--versa-light-grey-15-rgb)) 0%, rgb(var(--versa-light-grey-15-rgb)) 50%, rgba(var(--transparent-rgba)) 50%, rgba(var(--transparent-rgba)) 100%);
}


.bg-gartner-blue {
    background: linear-gradient(to right, rgb(var(--versa-sapphire-blue-rgb)) 0%, rgb(var(--versa-sapphire-blue-rgb)) 50%, rgba(var(--transparent-rgba)) 50%, rgba(var(--transparent-rgba)) 100%);
}

.bg-network {
    background: linear-gradient(to right, rgb(var(--transparent-rgba)) 0%, rgb(var(--transparent-rgba)) 65%, rgba(var(--versa-midninght-indigo-rgb)) 65%, rgba(var(--versa-midninght-indigo-rgb)) 100%);
}

.bg-versa-ripple-main {
    background-image: var(--bg-versa-ripple-main);
    background-position: center;
    background-size:cover;
}

.bg-versa-ripple-grey {
    background-image: var(--bg-versa-ripple-grey);
    background-position: center;
    background-size:cover;
}

.bg-versa-sand-large {
    background-image: var(--bg-versa-sand-large);
}

/*NEW - AI Landing*/
.bg-gradient-blue-map {
    background-image: var(--bg-gradient-blue-map);
    background-size: cover;
}

/*Components*/
/*CTAs*/
.v-btn {
    display: flex;
    font-family: 'Gilroy';
    height: 54px; /*must set height*/
    overflow: hidden;
}

.v-btn span  {
    background-color: var(--versa-spring-green);
}

.v-btn .v-text {
    display: flex;
   border-top-left-radius: var(--border-radius-sm);
    border-bottom-left-radius: var(--border-radius-sm);
    color: var(--versa-rich-black);
    font-size: var(--text-default);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-2);
    line-height: 1;
    padding: 0 5px 0 21px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1;
}

.v-btn .v-text span {
    align-self: center;
}

.v-btn .v-angle-left {
    border-top-right-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
    width: 40px; 
    height: 100% !important;
    transform: skewX(-12deg);
    margin-left: -25px;
    margin-bottom: -1px;
    transform-origin: center; 
    z-index: 0;
}

.v-btn .v-angle-right {
    border-top-left-radius: var(--border-radius-sm);
    border-bottom-left-radius: var(--border-radius-sm);
    width: 25px; 
    height: auto;
    margin-left: 10px; 
    margin-bottom: -1px;
    border-bottom-left-radius: 10px; 
    transform: skewX(-12deg);
}

.v-btn .v-arrow {
    margin-left: -15px;
    z-index: 1; display: flex; 
    flex-direction: column; 
    padding: 0 15px 0 5px;
    justify-content: center;
    border-radius: 8px;
    border-radius: 8px;
}

.v-btn .v-arrow span {
    height: 12px;
    width: 12px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCgk8cGF0aCBkPSJNMS4yMzc3OSAxMC41NDQ5TDEwLjc2MTYgMS40NTQwMiIgc3Ryb2tlPSIjMDIwMzA0IiBzdHJva2Utd2lkdGg9IjEuNSIvPg0KCTxwYXRoIGQ9Ik0xMSAxMUwxMSAyLjI2MjQyQzExIDEuNTY1MjEgMTAuNDM0OCAxLjAwMDAxIDkuNzM3NTkgMS4wMDAwMUwxLjAwMDAxIDEuMDAwMDEiIHN0cm9rZT0iIzAyMDMwNCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4NCjwvc3ZnPg0K');
    background-size: contain;
    background-repeat: no-repeat;
}

.v-btn:hover {
    filter: brightness(105%);
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}


.v-btn--fuschia span  {
    background-color: var(--versa-fuchsia);
}

.v-btn--blue span  {
    background-color: var(--versa-sapphire-blue);
}

.v-btn--blue .v-text,
.v-btn--fuschia .v-text {
    color: #fff;
}

.v-btn--blue .v-arrow span,
.v-btn--fuschia .v-arrow span {
    background-image: url(../images/new-homepage/chevron-angled-right-white.svg);
}

.v-btn-small {
    height: 44px;
} 

.v-btn-small .v-text {
    font-size: var(--text-sm);
}

.v-btn:focus,
.v-btn:focus-visible,
.v-btn-chevron:focus,
.v-btn-chevron:focus-visible {
    outline-offset: 0.5rem;
    outline: 2px dashed var(--versa-azure-blue);
}

.v-btn-card-angled {
     width: 98px; 
     align-self: end;
}

.v-link-stretched {
    position: absolute;
    height: 100%;
    width: 100%;
}

.v-link-stretched:focus,
.v-link-stretched:focus-visible {
    outline-offset: 0.5rem;
    outline: 2px dashed var(--versa-azure-blue);
}

.v-link-stretched .chevron-angled-right {
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}

/*Temp removed from HTML */
.v-btn-card-angled:hover img {
    filter: brightness(110%);
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

/*Graphic elements*/

.cutoff {
    height: var(--clip-path-medium-height);
    width: var(--clip-path-medium-width);
    clip-path: path(var(--clip-path-medium));
}

.cutoff-transform {
    transform: scale(1.003); 
    transform-origin: center;
}

/*6 degree slant*/
.slant-l-1 {
    border-bottom-right-radius: var(--border-radius-xl); 
    border-top-right-radius: var(--border-radius-xl);
    margin-left: -100px;
    margin-right: 25px; /*bumper*/
    padding: 0px;
    transform: skewX(-6deg);
    width: 150px;
    z-index: 0;
}

.slant-r-1 {
    border-bottom-left-radius: var(--border-radius-xl);
    border-top-left-radius: var(--border-radius-xl);
    transform: skewX(-6deg);
    transform-origin: center center;
    width: 150px;
}


/*12 degree slant*/
.slant-l-2 {
    border-top-right-radius: var(--border-radius-xl);
    border-bottom-right-radius: var(--border-radius-xl);
    margin-right: 25px;
    margin-left: -70px;
    margin-bottom: -1px;
    padding: 0;
    transform: skewX(-12deg);
    width: 150px;
    transform-origin: center;
    z-index: 0;    
}

.slant-r-2 {
    border-bottom-left-radius: var(--border-radius-xl);
    border-top-left-radius: var(--border-radius-xl);
    width: 150px;
    height: auto;
    margin-left: 10px;
    transform: skewX(-12deg);
    margin-bottom: -1px;
    transform-origin: center;
}

/*TODO - define as var */
.tagline {
    font-family: Gilroy;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
}

.tagline-sm {
    font-family: Gilroy;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
}

.tagline-narrow {
    letter-spacing: var(--letter-spacing-1);
}


/*Gartner carousel - START */
.v-img-phone {
    position: absolute;
    right: 10px;
    top: -50px;
    max-height: 600px;
}

.v-col-news {
    margin-left: -60px;
}

.v-img-product {
    height: 40px;
}

.v-img-product {
    height: 32px;
}

.v-img-product--large {
    height: 60px;
}

.v-stars {
    color: var(--versa-tangerine);
    font-size: 1.5rem;
}

.v-img-seed {
    height: 450px;
    left: -80px;
    position: absolute;
    top: 30px;
}

.v-bg-seed-wrapper {
    border-bottom-left-radius: var(--border-radius-xl);
    border-top-left-radius: var(--border-radius-xl);
    width: 100%;
    height: 100%;
    margin-left: 10px;
    transform: skewX(-12deg);
}

.v-bg-seed {
    background-image: url(../images/new-homepage/bg-versa-one-transparent.webp);
     background-repeat: no-repeat;
     height: 100%;
     background-size: cover;
     transform: skewX(12deg);
     width: calc(100% + 170px);
     margin-left: -70px;
     background-position: -50px 0;
}

/*Ticker*/
@-webkit-keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-160px * 7));
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-160px * 7));
    }
}

/*  Styling  */

.v-ticker-wrapper .v-track {
    -webkit-animation: scroll 40s linear infinite;
    animation: scroll 40s linear infinite;
    width: calc(160px * 27);
}

.v-ticker-wrapper img {
    width: 160px;
}

.v-carousel-controls {
    display: flex;
    align-items: center;
}

.v-carousel-controls .carousel-indicators {
    position: static;
    display: flex;
    margin: 0;  
}


.v-carousel-controls .carousel-control-prev,
.v-carousel-controls .carousel-control-next,
.v-carousel-controls .carousel-control-prev-icon,
.v-carousel-controls .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
}

.v-carousel-controls .carousel-control-prev,
.v-carousel-controls .carousel-control-next {
    position: static;
    padding: 0.5rem;
    border: 2px solid transparent; /*To prevent resizing on focus*/
}

.v-carousel-controls .carousel-control-prev:focus,
.v-carousel-controls .carousel-control-prev:focus-visible,
.v-carousel-controls .carousel-control-next:focus,
.v-carousel-controls .carousel-control-next:focus-visible  {
    outline: 2px dashed var(--versa-azure-blue);
}

.v-carousel-controls .carousel-control-prev-icon,
.v-carousel-controls .carousel-control-next-icon {
    background-size: contain;
}

.v-carousel-controls .carousel-control-prev-icon {
    background-image: url(../images/new-homepage/chevron-rich-black-left.svg);   
}

.v-carousel-controls .carousel-control-next-icon {
    background-image: url(../images/new-homepage/chevron-rich-black-right.svg);   
}


.v-carousel-controls--reviews .carousel-control-prev:focus .carousel-control-prev-icon,
.v-carousel-controls--reviews .carousel-control-next:focus .carousel-control-next-icon {
     border: 2px dashed var(--versa-azure-blue);
    border-radius: 3px;
    outline: none;
    padding: 0.5rem;
}

.v-carousel-controls .carousel-indicators button {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    background-color: var(--versa-azure-blue);
    border: 1px solid var(--versa-azure-blue);
}

.v-carousel-controls .carousel-indicators button:focus,
.v-carousel-controls .carousel-indicators button:focus-visible {
    outline-offset: 0.5rem;
    outline: 2px dashed var(--versa-azure-blue);
}

/*On light grey bg*/
.v-carousel-controls--blue .carousel-control-prev-icon {
    background-image: url(../images/new-homepage/chevron-blue-left.svg);   
}

.v-carousel-controls--blue .carousel-control-next-icon {
    background-image: url(../images/new-homepage/chevron-blue-right.svg);   
}




/*Green indicators*/
.v-carousel-controls--green .carousel-indicators button {
    background-color: var(--versa-spring-green);
    border: 1px solid var(--versa-spring-green);
}

/*On blue bg*/
.v-carousel-controls--light .carousel-control-prev-icon {
    background-image: url(../images/new-homepage/chevron-white-left.svg);   
}

.v-carousel-controls--light .carousel-control-next-icon {
    background-image: url(../images/new-homepage/chevron-white-right.svg);   
}

.v-carousel-controls--light .carousel-indicators button {
    background-color: #fff;
    border: 1px solid #fff;
}

.v-carousel-controls--light .carousel-control-prev:focus,
.v-carousel-controls--light .carousel-control-next:focus  {
    border: 2px dashed #fff;
}


/*Gartner carousel indicators*/
.v-carousel-controls--reviews .carousel-control-prev, 
.v-carousel-controls--reviews .carousel-control-next { 
    width: 1.5rem;
}

.v-carousel-controls--reviews .carousel-control-prev-icon {
    background-image: url(../images/new-homepage/chevron-blue-left.svg);
}

.v-carousel-controls--reviews .carousel-control-next-icon {
    background-image: url(../images/new-homepage/chevron-blue-right.svg);
}



/*HERO*/
.v-hero  {
    max-height: 650px; 
    overflow: hidden; 
    position: relative;
}

.v-hero  video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: fill;
    top: 0;
    left: 0;
}

.v-hero .cutoff {
    height: var(--clip-path-large-height);
    width: var(--clip-path-large-width);
    clip-path: path(var(--clip-path-large));
}

/*3 cards*/
.v-card .outline-light-grey {
    outline: var(--versa-light-grey-15) 3px solid;
}

/*Gartner*/
.gartner-peer-insights-logo {
    width: 160px;
}

/*Media queries*/


@media (max-width: 1199.98px) { 

    .v-hero  video {
        width: auto;
    }

    .min-h-500-responsive,
    .min-h-360-responsive,
    .min-h-320-responsive,
    .min-h-220-responsive {
        min-height: auto;
    }

    .v-img-phone {
        display: none;
    }

    .bg-gartner-light-grey {
        background: var(--versa-light-grey-15);
    }

    .bg-gartner {
        background: var(--versa-slate-grey);
    }
    .bg-network {
        background: transparent;
    }
}

@media (max-width: 991.98px) { 

    .v-hero video {
        left: -15%;
    }
 }


@media (max-width: 767.98px) { 

    .cutoff-transform {
        transform: scale(1); 
        transform-origin: center;
    }

    .v-hero {
        max-height: 100%;
    }

    .v-hero video {
        height: 100%;
        left: -25;
    }
 
    .v-col-news {
        margin-left: -50px;
    }
}

@media (max-width: 575.98px) { 
    h1.display-1  {
        font-weight: 500;
        font-size: var(--text-lg);
    }
    h2.display-1 {
    font-size: var(--text-xl);
    }

    h2.display-2 {
    font-size: var(--text-lg);
    }

    h2 {
        font-size: var(--text-lg);
    }

    h3 {
        font-size: var(--text-md-lg);
        line-height: normal;
    }

    .tagline,
    .tagline-sm {
        font-size: var(--text-md);
    }

    .p-xs-custom {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /*Check if in use*/
     .mb-sm-custom {
      margin-bottom: 1rem;   
    }

    .v-col-news {
        margin-left: 0;
    }

    .v-btn-mobile .v-text {
        max-width: 150px;
        text-wrap: wrap;
    }


}
    

/* Floating Promotional Nav */
div#nav-promotional-floating {
	margin: -120px 0px 0px 0px;
	position: fixed;
	top: 50%;
	right: 0px;
	z-index: 1000;
	}

div#nav-promotional-floating a {
	margin: 0px 0px 2px 10px;
	padding: 10px 0px 5px;
  width: 60px;
	font-family: "Lato", sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #fff;
	}

div#nav-promotional-floating a#trial {
	border-radius: 5px 0px 0px 0px;
	background:  #0280c6;
	}

  div#nav-promotional-floating a#demo {
	border-radius: 5px 0px 0px 0px;
	background: #5da602;
	}

div#nav-promotional-floating a#roi-calculator {
	background: #009bdf;
	}

div#nav-promotional-floating a#contact-us {
	border-radius: 0px 0px 0px 5px;
	background:  linear-gradient(#78c900, #5da602) left top;
	}

div#nav-promotional-floating a:hover {
	margin: 0px 0px 2px 0px;
	padding: 10px 10px 5px 0px;
	transition-property: padding, margin;
	transition-duration: .3s;
	transition-timing-function: ease;
	}

  /* 25x25 Promo Icons */
img.icon.promo {
	margin: 0px auto 5px auto;
	height: 25px;
	width: 25px;
	background-size: 25px 25px;
	opacity: 1.0;
	}

a:hover img.icon.promo {
	opacity: 1.0;
	}

/* Floating Promotional Nav - END */


.navbar-nav .img-fluid {
    max-width: 180px;
    margin-left: -15px;
    margin-top: -5px;
}

.navbar-nav .nav li a {
    color: var(--light-grey2);
}

/*UPDATED*/
.navbar-nav ol.chevron-list>li, 
.navbar-nav ul.chevron-list>li {
    background-size: 8px 10px;
    background-image: url(../images/new-homepage/chevron-right.svg);
    background-position: 0 5px;
    background-repeat: no-repeat;
    padding-left: 15px;
    margin-bottom: 0.25rem;
}

.navbar-nav .nav li a:focus, 
.navbar-nav .nav li a:hover {
    color: var(--light-grey);
}

/*UPDATED*/
.nav-item.rounded-top {
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  padding-left: 2px;
  padding-right: 2px;
}

/*TODO: Secondary nav - see production*/
.nav-secondary {
  flex-direction: row;
}


#header-logo {
    max-width: 160px;
    width: 100%;
}

/* Language globe*/
.bi.bi-globe {
  fill: #00aeef;
  height: 15px;
  margin-right: 5px;
}

#languageDropdown, 
#languageDropdown a {
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: var(--letter-spacing-1);
}

#languageDropdown ul li a {
    color: var(--light-grey2);
}

#searchform input[type="text"] {
    padding: 3px 5px 3px 30px;
    font-size: 13px;
    background-image: url(../images/new-homepage/magnifying-glass.svg);
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border: 1px solid #AAAAAA;
    max-width: 165px;
}

/*TODO: Search form*/
#searchform input[type="text"]:focus{
  background-color: #fff;
   /* background-image: none;*/
   /* background-position: 50% 50%;*/
    border-color: #76abd9;
    box-shadow: 0 0 7px 0 #76abd9;
    outline: 0;
}

/*Drop down menu*/
.dropdown.open {
  background-color: var(--versa-grey);
  color: var(--light-grey2);
}

.dropdown-menu {
    background: var(--versa-grey);
    color: var(--light-grey2);
    border: none;
    border-radius: 0px;
    left: 0;
    right: 0;
}

.dropdown-menu[data-bs-popper] {
  margin-top: 0;
  top: auto;
}

.dropdown-menu h4 {
  font-size: 1.5rem;
  line-height: 1.2;
}

.dropdown-menu h4 a, 
.dropdown-menu h5 a,
.dropdown-menu h6 a,
.dropdown-menu p a,
.dropdown-menu .card-text {
  color: var(--light-grey2);
}

.dropdown-menu h4 a {
  font-size: var(--text-md);
  color: var(--light-grey2);
}

.dropdown-menu p {
  color: var(--light-grey2);
}

.dropdown-menu h4:hover a {
  text-decoration: underline;
}

.dropdown-menu .card,
.dropdown-menu .card:hover {
  background: var(--versa-grey);
  border: 1px solid var(--light-grey);
}






/*NEW*/
.navbar-main .nav-link {
    font-size: var(--text-xs);
    letter-spacing: var(--letter-spacing-1);
}


/*4 tabs*/

/*UPDATED*/
.nav-wrapper {
    border-bottom: 1px solid lightgrey;
}
.nav-tabs .nav-link {
    color: var(--versa-grey);
    background-color: transparent;
    border: none;
}

/*UPDATED*/
.nav-tabs .nav-link.active {
    /*border-bottom: 2px solid  var(--light-blue3);*/
   background-image: url(../images/new-homepage/three-dots-blue.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    font-weight: 700;
}



/* mobile nav */

@media (min-width: 991px) {
  .mobile-menu-display {
    display: none !important;
  }
}


.navbar-nav .btn.mbl-nav-btn {
  width: 100%;
  background-color: transparent;
  margin-top: 15px;
}

.mobile-nav li a {
  color: #fff;
  text-wrap: wrap;
}

.mobile-nav li a:hover {
  color: var(--versa-grey);
}


/*Chevrons*/

/*NEW*/
.chevron-angled-right {
    display: inline-block;
    height: 12px;
    width: 12px;
    background-image: url(../images/new-homepage/chevron-angled-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
    transition: all .2s ease-in-out; 
}

.chevron-angled-right-white {
    display: inline-block;
    height: 12px;
    width: 12px;
    background-image: url(../images/new-homepage/chevron-angled-right-white.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
    transition: all .2s ease-in-out; 
}

/*NEW*/
.chevron-angled-right-btn {
    height: 12px;
    width: 12px;
    background-image: url(../images/new-homepage/chevron-angled-right-grey.svg);
    background-size: contain;
    background-repeat: no-repeat;

}

.chevron-white {
    display: inline-block;
    height: 16px;
    width: 11px;
    background-image: url(../images/new-homepage/chevron-white-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
}

.chevron--small {
    height: 9px;
    width: 7px;
}

.chevron-white-right {
    display: inline-block;
    height: 16px;
    width: 11px;
    background-image: url(../images/new-homepage/chevron-white-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
}


.chevron-grey-right {
    display: inline-block;
    height: 16px;
    width: 11px;
    background-image: url(../images/new-homepage/chevron-grey-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
}

.chevron-light-grey-right {
    display: inline-block;
    height: 14px;
    width: 10px;
    background-image: url(../images/new-homepage/chevron-light-grey-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
    margin-top: 2px;
}


/*Accordion*/
.accordion-header {
    line-height: normal;
}

/*UPDATED*/
.accordion-item {
    border: none;
    border-top: 1px solid var(--light-blue4);
    padding: 0;
    margin-bottom: 1rem;
    border-radius: 0;
}

/*UPDATED*/
.accordion-item:first-of-type, 
.accordion-item:first-of-type .accordion-button {
    border-radius: 0;
    border: none;
}

.accordion-item:not(:first-of-type) {
    border-top: 1px solid var(--light-blue4);
}

.accordion-button {
    color: var(--versa-grey);
    font-weight: 600;
}

.accordion-button .item-number {
    color: var(--versa-sapphire-blue);
}

.accordion-button.collapsed,
.accordion-button.collapsed .item-number {
    color: var(--versa-accessible-light-grey);
    font-weight: 400;
}

/*NEW*/
#versa-one .accordion-button::after {
    background-image:  url(../images/new-homepage/icon-plus-dark-blue.svg);
    background-position: center;
}
/*NEW*/
#versa-one .accordion-button:not(.collapsed)::after {
    background-image: url(../images/new-homepage/icon-minus-dark-blue.svg);
}

button.accordion-button::before {
    content: none;
}
button.accordion-button:not(.collapsed)::before {
    content: none;
}

/*UPDATED*/
.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--versa-grey);
    box-shadow: none;

}

.accordion-button:focus {
    box-shadow: none;
    outline: 2px solid var(--versa-azure-blue);
}



/* Footer */
/* UPDATED */
ol.chevron-list>li, 
ul.chevron-list>li {
    margin-bottom: 0.7rem;
}
/* UPDATED */
ul.chevron-list>li a {
    color: var(--versa-grey);
}
/* UPDATED */

footer {
    margin-top: 3rem;
    /*border-top-right-radius: 5rem;*/
}

footer h5 a {
    font-size: 1rem;
}


/* Footer - mobile */
footer .accordion-item {
    border: none;
    margin-bottom: 0;
}

footer .accordion-button {
    color: var(--dark-grey);
}

footer .accordion-button::after {
    background-image:  url(../images/new-homepage/chevron-light-blue-down.svg);
    background-size: 15px 15px;
    background-position: center;
}

footer .accordion-button:not(.collapsed)::after {
    background-image: url(../images/new-homepage/chevron-light-blue-down.svg);
}

footer button.accordion-button::before {
    content: none;
}

footer button.accordion-button:not(.collapsed)::before {
    content: none;
}

footer a.nav-link {
    font-family: 'Gilroy', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--versa-grey);
    padding: 0;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.5pt;
}

footer a.nav-link:focus, 
footer h5 a:focus, 
footer a.nav-link:hover,
footer h5 a:hover {
    color: var(--versa-grey);
    text-decoration: underline 0.12em var(--versa-azure-blue);
    text-underline-offset: 0.25rem;
}

/*UPDATED*/
footer .social-icons a:hover img {
  filter: brightness(115%);
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
  /*filter: invert(52%) sepia(41%) saturate(5998%) hue-rotate(169deg) brightness(95%) contrast(101%);*/
}
/*

/*UPDATED*/
footer .footer-logo {
    width: 120px;
    max-width: 120px;
    min-width: 120px;
    height: 36px;
    max-height: 36px;
    min-height: 36px;
}


@media (max-width: 991px) { 

    /*Top nav - Hamburger menu on mobile*/
    #languageDropdown {
        display: none;
    }
 }


/*New for solutions pages*/

.bg-hero-white-transparent {
    background-image: var(--bg-hero-white-transparent);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom right;
}


.bg-product {
    /*default BG img ripple*/
    background-image: var(--bg-versa-ripple-main);
    background-repeat: no-repeat;
    background-size: cover;
}


.v-icon {
    width: 50px;
}

/*NEW - AI Landing*/
.v-icon-h-50 {
    height: 50px;
    width: auto;
}
/*NEW - AI Landing*/
.v-icon-h-70 {
    height: 70px;
    width: auto;
}

a.v-link {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    text-decoration-color: var(--versa-azure-blue);
    text-decoration-thickness: 2px;
    display: flex;
    width: fit-content;
}

a.v-link.text-white {
    text-decoration-color: #fff;
}

a.v-link span[class^="chevron"] {
    align-self: flex-end;
    margin-bottom: 4px;
}

/*New for solutions pages - END*/


a.v-link:hover {
    color: var(--versa-azure-blue);
}

@media (max-width: 991.98px) { 
    .v-card-light-grey {
        background-image: none;
        background-color: var(--versa-light-grey-15);
    }

    .v-card-azure-blue {
        background-image: none;
        background-color: var(--versa-azure-blue);
    }
}


/*image containers*/
.image-container-right {
    box-shadow: -20px 20px 50px -30px grey;
}
.image-container-left {
    box-shadow: 20px 20px 50px -30px grey;
}

/*Accordion sidebar*/
.list-group-item.active.features-accordion {
    box-shadow: -1px 0px 0px 0px #FFF;
    font-weight: 600;
    color: inherit !important;
    background-color: inherit;
    border-top-left-radius: 0px;
}
.list-group-item.features-accordion {
    background-color: inherit;
    border: inherit;
}

/*New for SD-WAN*/
/*To utility / var*/
.min-w-90 {
    min-width: 90px;
    max-width: 90px;
}

.max-w-80 {
    max-width: 80px;
}

.max-h-460 {
    max-height: 460px;
}

.bg-blue-gradient {
    background: var(--versa-sapphire-blue);
    background: linear-gradient(180deg, var(--versa-sapphire-blue) 0%, var(--versa-azure-blue) 100%);
}

.v-border-rich-black {
    border: 2px solid var(--versa-rich-black);
}

.list-group-item,
.list-group-item.active {
    background-color: transparent;
    border: none;
}

.side-nav .list-group-item.active {
    box-shadow: -1px 0px 0px 0px #FFF;
    border-radius: 0;
}

.v-icon {
    width: 50px;
}


/*To utility / var - END*/

/*Check*/
.clip-right-banner {
    position: relative;
    background: transparent;
    clip-path: polygon(0 0, 0% 5%, 100% calc(100% - 15px), 100% 100%, 0 100%);
}

.clip-right-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--bg-white-transparent-50));
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}
/*Check - END*/

.filter-clear {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    text-decoration-color: var(--versa-azure-blue);
    text-decoration-thickness: 2px;
    color: var(--versa-rich-black);
}

a:hover .v-card-category {
    color: var(--versa-grey);
}

a:hover .v-card-left-edge {
    filter: brightness(102%);
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

ol.circle-check-list,
ul.circle-check-list {
    list-style-type: none;
    padding-left: 0;
}

ol.circle-check-list>li,
ul.circle-check-list>li {
    background-size: 1.2rem;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+DQoJPHBhdGggZD0iTTI1NiA0OGEyMDggMjA4IDAgMSAxIDAgNDE2IDIwOCAyMDggMCAxIDEgMC00MTZ6bTAgNDY0QTI1NiAyNTYgMCAxIDAgMjU2IDBhMjU2IDI1NiAwIDEgMCAwIDUxMnpNMzY5IDIwOWM5LjQtOS40IDkuNC0yNC42IDAtMzMuOXMtMjQuNi05LjQtMzMuOSAwbC0xMTEgMTExLTQ3LTQ3Yy05LjQtOS40LTI0LjYtOS40LTMzLjkgMHMtOS40IDI0LjYgMCAzMy45bDY0IDY0YzkuNCA5LjQgMjQuNiA5LjQgMzMuOSAwTDM2OSAyMDl6IiBmaWxsPSIjMDA3MUJDIi8+DQo8L3N2Zz4=');
    background-position: left 0.15rem;
    background-repeat: no-repeat;
    padding-left: 1.7rem;
    margin-bottom: 0.7rem;
}

/* Buttons - Variants */
.v-btn-variant {
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjYuMTcgNjcuMiI+CiAgICA8cGF0aCBkPSJNNTI2LjE3LDM3LjI4VjBIMHY2Ny4yaDQ5Ni4zNGMxLjY2LDAsNS41OC0uMSw4LjcxLTIuODlsLjA1LS4wNGMyLjk4LTIuOTYsMTcuMDUtMTYuODUsMTcuMDUtMTYuODUsMy4xMS0zLjA0LDMuOTktNSw0LjAyLTloMHYtLjE3aDB2LS45NWgwczAtLjAyLDAtLjAyWiIgZmlsbD0iIzk0YzgzZiIgLz4KPC9zdmc+');
    background-position: right bottom;
    background-size: cover;
    width: fit-content;
    display: flex;
    position: relative;
    font-weight: 500;
    font-family: 'Gilroy';
    letter-spacing: var(--letter-spacing-2);
    color: var(--versa-rich-black);
}

.v-btn-variant:hover {
    color: var(--versa-rich-black);
    text-decoration: none;
}

.v-btn-variant.v-btn-variant--small .v-btn-variant-wrapper {
    padding: 8px 20px;
    font-size: var(--text-sm);
}

.v-btn-variant--small:hover .chevron-angled-right,
.v-btn-variant--small:hover .chevron-angled-right-white {
    transform: scale(1.2); 
}

.v-btn-variant.v-btn-variant--blue,
.v-btn-variant.v-btn-variant--blue:hover {
    color: #fff;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjYuMTcgNjcuMiI+Cgk8cGF0aCBkPSJNNTI2LjE3LDM3LjI4VjBIMHY2Ny4yaDQ5Ni4zNGMxLjY2LDAsNS41OC0uMSw4LjcxLTIuODlsLjA1LS4wNGMyLjk4LTIuOTYsMTcuMDUtMTYuODUsMTcuMDUtMTYuODUsMy4xMS0zLjA0LDMuOTktNSw0LjAyLTloMHYtLjE3aDB2LS45NWgwczAtLjAyLDAtLjAyWiIgZmlsbD0iIzAwNzFCQyIvPgo8L3N2Zz4K');
}

.v-btn-variant:not(.v-btn--outline):hover {
    filter: brightness(110%);
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.v-btn-variant .v-btn-variant-wrapper {
    border-right: none;
    padding: 12px 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.v-btn-variant.v-btn--outline .v-btn-variant-wrapper {
    padding: 10px 19px; /**to account for the outline */
}

.v-btn-variant .v-btn-edge {
    width: 27px;
    height: 25px;
    background: none;
}

.v-btn-variant .chevron-angled-right,
.v-btn-variant .chevron-angled-right-white {
    position: absolute;
    right: 20px;
    top: calc(50% - 7px);
}

.v-btn-variant.v-btn--outline {
    background: none;
}

.v-btn-variant.v-btn--outline .v-btn-edge {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNzEuNDkgNjkuMzEiPg0KICAgIDxwYXRoIGQ9Ik03MS40OSw4LjgzczAtLjA1LDAtLjA3aDBWMGgtNXY4Ljk5Yy0uMDIsNi43LS45Nyw5LjU4LTYuOSwxNS4zOCwwLDAtMjkuMjcsMjguOTItMzUuNjIsMzUuMjEtNS4xNSw0LjU1LTExLjcxLDQuNzMtMTQuODUsNC43M2gwcy05LjExLDAtOS4xMSwwdjVoOS4xMWMzLjQ3LDAsMTEuNjctLjIxLDE4LjIyLTYuMDRsLjEtLjA5YzYuMjQtNi4xOCwzNS42NS0zNS4yNSwzNS42NS0zNS4yNSw2LjUtNi4zNSw4LjM1LTEwLjQ2LDguNC0xOC44Mmgwdi0uMjhaIiBmaWxsPSIjMDIwMzA0Ii8+DQo8L3N2Zz4=');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
}

.v-btn-variant.v-btn--outline .v-btn--outline-right {
    border-top-right-radius: var(--border-radius-sm);
    border-left: none;
    border-bottom: none;
}

.v-btn-variant.v-btn--outline:hover .v-border-rich-black {
    border-color: var(--versa-spring-green);
    color: var(--versa-spring-green);
}

.v-btn-variant.v-btn--outline:hover .chevron-angled-right {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOSA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KCTxwYXRoIGQ9Ik0wLjc1NjkyNyA3LjUyNzgzTDcuNDU1MDIgMS4xMzQyIiBzdHJva2U9IiM5M0Q1MDAiIHN0cm9rZS13aWR0aD0iMC45NTkwNDUiLz4NCgk8cGF0aCBkPSJNNy42MjIzOCA3Ljg0NzY2TDcuNjIyMzggMS42MjE4QzcuNjIyMzggMS4xNzYwMyA3LjI2MTAxIDAuODE0NjYyIDYuODE1MjQgMC44MTQ2NjJMMC41ODkzODEgMC44MTQ2NjIiIHN0cm9rZT0iIzkzRDUwMCIgc3Ryb2tlLXdpZHRoPSIwLjk1OTA0NSIvPg0KPC9zdmc+DQo=');
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.v-btn-variant.v-btn--outline:hover .v-btn-edge {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MS40OSA2OS4zMSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzk1YzkzZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTcxLjQ5LDguODNzMC0uMDUsMC0uMDdoMFYwaC01djguOTljLS4wMiw2LjctLjk3LDkuNTgtNi45LDE1LjM4LDAsMC0yOS4yNywyOC45Mi0zNS42MiwzNS4yMS01LjE1LDQuNTUtMTEuNzEsNC43My0xNC44NSw0LjczaDBzLTkuMTEsMC05LjExLDB2NWg5LjExYzMuNDcsMCwxMS42Ny0uMjEsMTguMjItNi4wNGwuMS0uMDljNi4yNC02LjE4LDM1LjY1LTM1LjI1LDM1LjY1LTM1LjI1LDYuNS02LjM1LDguMzUtMTAuNDYsOC40LTE4LjgyaDB2LS4yOFoiLz4KICA8L2c+Cjwvc3ZnPg==');
}

/* Buttons - Variants - END*/


/*Cards */

.v-card-light-grey,
.v-card-azure-blue {
    background-image: var(--bg-card-light-grey);
    background-position: right bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.v-card-azure-blue {
    background-image: var(--bg-card-azure-blue);
}

.v-card-category {
    font-size: var(--text-sm);
}

.v-card-left-edge {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xNyA3MS44Ij4KCTxwYXRoIGQ9Ik02Ny41NSwwSDB2NTIuMDRjMCwyLjA4LDIuMzgsMy4yNiw0LjA0LDJMNjkuMDcsNC41MmMxLjkyLTEuNDYuODgtNC41Mi0xLjUyLTQuNTJaIiBmaWxsPSIjMGQ3MWJhIi8+Cgk8cGF0aCBkPSJNODUuODksMGgtMTguMzRjMi40MSwwLDMuNDQsMy4wNiwxLjUyLDQuNTJMNC4wNCw1NC4wNGMtMS42NiwxLjI2LTQuMDQuMDgtNC4wNC0ydjE5Ljc2YzAtNi4zMyw2LjQ3LTExLjI4LDYuNDctMTEuMjhMODEuOTIsMy4wN0M4NC41NSwxLjE0LDg4LjU3LjAyLDkxLjE3LjA0Yy00Ljc2LS4wNC01LjI4LS4wNC01LjI4LS4wNFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==');
    background-repeat: no-repeat;
    background-size: 90px;
}

.v-card-left-edge--azure-blue {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xNyA3MS44Ij4KCTxwYXRoIGQ9Ik02Ny41NSwwSDB2NTIuMDRjMCwyLjA4LDIuMzgsMy4yNiw0LjA0LDJMNjkuMDcsNC41MmMxLjkyLTEuNDYuODgtNC41Mi0xLjUyLTQuNTJaIiBmaWxsPSIjMDA5NURBIi8+Cgk8cGF0aCBkPSJNODUuODksMGgtMTguMzRjMi40MSwwLDMuNDQsMy4wNiwxLjUyLDQuNTJMNC4wNCw1NC4wNGMtMS42NiwxLjI2LTQuMDQuMDgtNC4wNC0ydjE5Ljc2YzAtNi4zMyw2LjQ3LTExLjI4LDYuNDctMTEuMjhMODEuOTIsMy4wN0M4NC41NSwxLjE0LDg4LjU3LjAyLDkxLjE3LjA0Yy00Ljc2LS4wNC01LjI4LS4wNC01LjI4LS4wNFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==');
}

.v-card-left-edge--azure-blue-light {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xNyA3MS44Ij4KCTxwYXRoIGQ9Ik02Ny41NSwwSDB2NTIuMDRjMCwyLjA4LDIuMzgsMy4yNiw0LjA0LDJMNjkuMDcsNC41MmMxLjkyLTEuNDYuODgtNC41Mi0xLjUyLTQuNTJaIiBmaWxsPSIjNUJDQkZGIi8+Cgk8cGF0aCBkPSJNODUuODksMGgtMTguMzRjMi40MSwwLDMuNDQsMy4wNiwxLjUyLDQuNTJMNC4wNCw1NC4wNGMtMS42NiwxLjI2LTQuMDQuMDgtNC4wNC0ydjE5Ljc2YzAtNi4zMyw2LjQ3LTExLjI4LDYuNDctMTEuMjhMODEuOTIsMy4wN0M4NC41NSwxLjE0LDg4LjU3LjAyLDkxLjE3LjA0Yy00Ljc2LS4wNC01LjI4LS4wNC01LjI4LS4wNFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==');
}

.v-card-left-edge--emerald-green {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xNyA3MS44Ij4KCTxwYXRoIGQ9Ik02Ny41NSwwSDB2NTIuMDRjMCwyLjA4LDIuMzgsMy4yNiw0LjA0LDJMNjkuMDcsNC41MmMxLjkyLTEuNDYuODgtNC41Mi0xLjUyLTQuNTJaIiBmaWxsPSIjNjJCQjQ2Ii8+Cgk8cGF0aCBkPSJNODUuODksMGgtMTguMzRjMi40MSwwLDMuNDQsMy4wNiwxLjUyLDQuNTJMNC4wNCw1NC4wNGMtMS42NiwxLjI2LTQuMDQuMDgtNC4wNC0ydjE5Ljc2YzAtNi4zMyw2LjQ3LTExLjI4LDYuNDctMTEuMjhMODEuOTIsMy4wN0M4NC41NSwxLjE0LDg4LjU3LjAyLDkxLjE3LjA0Yy00Ljc2LS4wNC01LjI4LS4wNC01LjI4LS4wNFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==');
}

.v-card-left-edge--spring-green {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xNyA3MS44Ij4KCTxwYXRoIGQ9Ik02Ny41NSwwSDB2NTIuMDRjMCwyLjA4LDIuMzgsMy4yNiw0LjA0LDJMNjkuMDcsNC41MmMxLjkyLTEuNDYuODgtNC41Mi0xLjUyLTQuNTJaIiBmaWxsPSIjOTNENTAwIi8+Cgk8cGF0aCBkPSJNODUuODksMGgtMTguMzRjMi40MSwwLDMuNDQsMy4wNiwxLjUyLDQuNTJMNC4wNCw1NC4wNGMtMS42NiwxLjI2LTQuMDQuMDgtNC4wNC0ydjE5Ljc2YzAtNi4zMyw2LjQ3LTExLjI4LDYuNDctMTEuMjhMODEuOTIsMy4wN0M4NC41NSwxLjE0LDg4LjU3LjAyLDkxLjE3LjA0Yy00Ljc2LS4wNC01LjI4LS4wNC01LjI4LS4wNFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==');
}

.v-card-left-edge--midnight-indigo {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xNyA3MS44Ij4KCTxwYXRoIGQ9Ik02Ny41NSwwSDB2NTIuMDRjMCwyLjA4LDIuMzgsMy4yNiw0LjA0LDJMNjkuMDcsNC41MmMxLjkyLTEuNDYuODgtNC41Mi0xLjUyLTQuNTJaIiBmaWxsPSIjMDkxNjM0Ii8+Cgk8cGF0aCBkPSJNODUuODksMGgtMTguMzRjMi40MSwwLDMuNDQsMy4wNiwxLjUyLDQuNTJMNC4wNCw1NC4wNGMtMS42NiwxLjI2LTQuMDQuMDgtNC4wNC0ydjE5Ljc2YzAtNi4zMyw2LjQ3LTExLjI4LDYuNDctMTEuMjhMODEuOTIsMy4wN0M4NC41NSwxLjE0LDg4LjU3LjAyLDkxLjE3LjA0Yy00Ljc2LS4wNC01LjI4LS4wNC01LjI4LS4wNFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==');
}

.v-card-left-edge--fuchsia {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xNyA3MS44Ij4KCTxwYXRoIGQ9Ik02Ny41NSwwSDB2NTIuMDRjMCwyLjA4LDIuMzgsMy4yNiw0LjA0LDJMNjkuMDcsNC41MmMxLjkyLTEuNDYuODgtNC41Mi0xLjUyLTQuNTJaIiBmaWxsPSIjRUMwNThFIi8+Cgk8cGF0aCBkPSJNODUuODksMGgtMTguMzRjMi40MSwwLDMuNDQsMy4wNiwxLjUyLDQuNTJMNC4wNCw1NC4wNGMtMS42NiwxLjI2LTQuMDQuMDgtNC4wNC0ydjE5Ljc2YzAtNi4zMyw2LjQ3LTExLjI4LDYuNDctMTEuMjhMODEuOTIsMy4wN0M4NC41NSwxLjE0LDg4LjU3LjAyLDkxLjE3LjA0Yy00Ljc2LS4wNC01LjI4LS4wNC01LjI4LS4wNFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==');
}

.v-card-left-edge--tangerine {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xNyA3MS44Ij4KCTxwYXRoIGQ9Ik02Ny41NSwwSDB2NTIuMDRjMCwyLjA4LDIuMzgsMy4yNiw0LjA0LDJMNjkuMDcsNC41MmMxLjkyLTEuNDYuODgtNC41Mi0xLjUyLTQuNTJaIiBmaWxsPSIjRkY5OTE0Ii8+Cgk8cGF0aCBkPSJNODUuODksMGgtMTguMzRjMi40MSwwLDMuNDQsMy4wNiwxLjUyLDQuNTJMNC4wNCw1NC4wNGMtMS42NiwxLjI2LTQuMDQuMDgtNC4wNC0ydjE5Ljc2YzAtNi4zMyw2LjQ3LTExLjI4LDYuNDctMTEuMjhMODEuOTIsMy4wN0M4NC41NSwxLjE0LDg4LjU3LjAyLDkxLjE3LjA0Yy00Ljc2LS4wNC01LjI4LS4wNC01LjI4LS4wNFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==');
}

.v-card-left-edge--versa-grey {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xNyA3MS44Ij4KCTxwYXRoIGQ9Ik02Ny41NSwwSDB2NTIuMDRjMCwyLjA4LDIuMzgsMy4yNiw0LjA0LDJMNjkuMDcsNC41MmMxLjkyLTEuNDYuODgtNC41Mi0xLjUyLTQuNTJaIiBmaWxsPSIjNTE1MjU0Ii8+Cgk8cGF0aCBkPSJNODUuODksMGgtMTguMzRjMi40MSwwLDMuNDQsMy4wNiwxLjUyLDQuNTJMNC4wNCw1NC4wNGMtMS42NiwxLjI2LTQuMDQuMDgtNC4wNC0ydjE5Ljc2YzAtNi4zMyw2LjQ3LTExLjI4LDYuNDctMTEuMjhMODEuOTIsMy4wN0M4NC41NSwxLjE0LDg4LjU3LjAyLDkxLjE3LjA0Yy00Ljc2LS4wNC01LjI4LS4wNC01LjI4LS4wNFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==');
}

.v-card-left-edge--slate-grey {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xNyA3MS44Ij4KCTxwYXRoIGQ9Ik02Ny41NSwwSDB2NTIuMDRjMCwyLjA4LDIuMzgsMy4yNiw0LjA0LDJMNjkuMDcsNC41MmMxLjkyLTEuNDYuODgtNC41Mi0xLjUyLTQuNTJaIiBmaWxsPSIjMjMyODJDIi8+Cgk8cGF0aCBkPSJNODUuODksMGgtMTguMzRjMi40MSwwLDMuNDQsMy4wNiwxLjUyLDQuNTJMNC4wNCw1NC4wNGMtMS42NiwxLjI2LTQuMDQuMDgtNC4wNC0ydjE5Ljc2YzAtNi4zMyw2LjQ3LTExLjI4LDYuNDctMTEuMjhMODEuOTIsMy4wN0M4NC41NSwxLjE0LDg4LjU3LjAyLDkxLjE3LjA0Yy00Ljc2LS4wNC01LjI4LS4wNC01LjI4LS4wNFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==');
}

.v-card-left-edge--teal {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xNyA3MS44Ij4KCTxwYXRoIGQ9Ik02Ny41NSwwSDB2NTIuMDRjMCwyLjA4LDIuMzgsMy4yNiw0LjA0LDJMNjkuMDcsNC41MmMxLjkyLTEuNDYuODgtNC41Mi0xLjUyLTQuNTJaIiBmaWxsPSIjMEQ4NjhFIi8+Cgk8cGF0aCBkPSJNODUuODksMGgtMTguMzRjMi40MSwwLDMuNDQsMy4wNiwxLjUyLDQuNTJMNC4wNCw1NC4wNGMtMS42NiwxLjI2LTQuMDQuMDgtNC4wNC0ydjE5Ljc2YzAtNi4zMyw2LjQ3LTExLjI4LDYuNDctMTEuMjhMODEuOTIsMy4wN0M4NC41NSwxLjE0LDg4LjU3LjAyLDkxLjE3LjA0Yy00Ljc2LS4wNC01LjI4LS4wNC01LjI4LS4wNFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==');
}


.v-card-left-edge--small {
    background-size: 60px;
}

.v-card-cta {
    font-size: var(--text-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
}

/*NEW - AI Landing*/
.v-card-outline:hover {
    border: 1px solid var(--versa-azure-blue);
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.v-accordion .accordion-button::after {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4IiBoZWlnaHQ9IjI1IiB2aWV3Qm94PSIwIDAgMjggMjUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPHBhdGggZD0iTTUuNjMyMDIgMS41MzMyNUM1Ljg0Nzg0IDAuNjM0MDE2IDYuNjUyMDIgMCA3LjU3Njc5IDBIMjZDMjcuMTA0NiAwIDI4IDAuODk1NDMxIDI4IDJWMjNDMjggMjQuMTA0NiAyNy4xMDQ2IDI1IDI2IDI1SDIuNTM2NzlDMS4yNDM0MyAyNSAwLjI5MDE4MyAyMy43OTA5IDAuNTkyMDE5IDIyLjUzMzNMNS42MzIwMiAxLjUzMzI1WiIgZmlsbD0iIzkzRDUwMCIvPg0KCTxsaW5lIHgxPSIyMSIgeTE9IjEyLjM5OTkiIHgyPSIxMCIgeTI9IjEyLjM5OTkiIHN0cm9rZT0iIzAyMDMwNCIgc3Ryb2tlLXdpZHRoPSIyIi8+DQoJPGxpbmUgeDE9IjE1LjYiIHkxPSIxOCIgeDI9IjE1LjYiIHkyPSI3IiBzdHJva2U9IiMwMjAzMDQiIHN0cm9rZS13aWR0aD0iMiIvPg0KPC9zdmc+DQo=');
    transform: none !important;
    transition: none !important;
}

.v-accordion .accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyOCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGQ9Ik01LjEsMS41M2MuMjItLjksMS4wMi0xLjUzLDEuOTQtMS41M2gxOC40MmMxLjEsMCwyLC45LDIsMnYyMWMwLDEuMS0uOSwyLTIsMkgyYy0xLjI5LDAtMi4yNS0xLjIxLTEuOTQtMi40N0w1LjEsMS41M1oiIGZpbGw9IiNCOUJBQkIiLz4KCTxsaW5lIHgxPSIyMC40NiIgeTE9IjEyLjQiIHgyPSI5LjQ2IiB5Mj0iMTIuNCIgc3Ryb2tlPSIjMDIwMzA0IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==');
}


/*Form split*/
.v-form .invalid-feedback {
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.v-form input:focus,
.v-form textarea:focus,
.v-form select:focus {
    box-shadow: none !important;
}

/****  floating-Lable style start ****/
.v-floating-label {
    position: relative;
    margin-bottom: 20px;
}

.v-floating-label label {
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 5px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.v-floating-input,
.v-floating-select {
    font-size: 14px;
    padding: 4px 4px;
    display: block;
    width: 100%;
    height: 30px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #515254;
    border-radius: 0;
    max-width: 95%;
}

.v-floating-input:focus,
.v-floating-select:focus {
    outline: none;
    border-bottom: 2px solid #515254;
}

.v-form .clear {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 0;
    right: -9px;
    background: none;
    border: none;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    color: #515254;
    background-color: #fff;
    transition: color 250ms;
    align-items: center;
    justify-content: center;
    display: none;
}

.v-floating-input:focus~label,
.v-floating-input:not(:placeholder-shown)~label,
.v-floating-select:focus~label,
.v-floating-select:not([value=""]):valid~label {
    top: -18px;
    font-size: 14px;
    color: #b7b3b3;
}

.v-form .v-floating-input:not(:placeholder-shown)~label+.clear {
    display: flex;
}

/*Not in use*/
/*.v-floating-textarea {
    min-height: 30px;
    max-height: 260px;
    overflow: hidden;
    overflow-x: hidden;
}
    */


.bg-form-split {
    background-image: url(../images/new-homepage/bg-demo-form-split.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}



@media (max-width: 991.98px) { 
    .bg-form-split {
        background-image: none;
        background-color: var(--versa-sapphire-blue);
    }

    .bg-form-split .border-radius-15 {
        background-color: #FFF;
        padding-top: 1rem;
    }
    
    .v-floating-input:focus~label, .v-floating-input:not(:placeholder-shown)~label {
        color: var(--versa-light-grey-85);
    }
 }

@media (max-width: 1700px) { 
  .v-banner-wide .slant-l-2,
  .v-banner-wide .slant-r-2 {
        display: none !important;
   }

   .v-banner-wide--grey {
        background-color: var(--versa-light-grey-15);
   }
}




/*New header*/
   
        /*utility*/
        .ps-35 {
            padding-left: 35px;
        }
        
        .mw-1300 {
            max-width: 1300px !important;
            width: 100% !important;
        }

        /*BS override*/
        .navbar-expand-lg .navbar-nav .dropdown-menu {
            box-shadow: 0px 0px 20px 0px #00000040;
            padding: 15px;

        }
        
        .navbar-expand-lg .navbar-nav .nav-link {
            padding-left: 2px;
        }
        
        /*mobile search */
        #s-1 {
            border: 1px solid var(--versa-light-grey-85);
            border-radius: 8px;
            padding: 15px;
            height: 50px;
            color: var(--versa-grey-85);
            width: 100%;
        }

        #s-1:focus-visible {
            outline-color: var(--versa-azure-blue);
            outline-offset: 4px;
        }
        
        #s-1 + .mglass {
           display:none;
           position: absolute;
           right: 12px;
           top: 8px;
           font-size: 25px;
           opacity: 0.8;
        }

        #s-1:placeholder-shown + .mglass {
           display:block;
        }

        .dropdown-item {
            color: var(--versa-grey-85);
            letter-spacing: 1px;
            line-height: 1.5;
            font-size: var(--text-sm);
        }

        .dropdown-item:focus,
        .dropdown-item:hover,
        #language-dropdown:hover span {
            color: var(--versa-grey-85);
            background-color: transparent;
            text-decoration: underline 0.12em var(--versa-azure-blue);
            text-underline-offset: 0.25em;
        }

        /*Stylesheet Override*/
        .dropdown-menu {
            background: #fff;
            border: none;
            border-radius: 8px;
            left: 0;
            right: 0;
        }

        .dropdown-menu h4 a,
        .dropdown-menu h5 a,
        .dropdown-menu h6 a,
        .dropdown-menu p a,
        .dropdown-menu .card-text {
            color: inherit;
        }

        .v-nav .navbar-nav:first-child .nav-link {
            font-size: 12px;
            letter-spacing: 2px;
            padding-right: 1.1rem;
        }

        .v-nav.navbar .has-megamenu {
            position: static !important;
        }
        
        .v-nav.navbar .has-megamenu.selected span {
            text-decoration: underline 0.12em var(--versa-light-grey);
            text-underline-offset: 0.25em;
        }

        .v-nav.navbar .megamenu {
           left: 0;
            right: 0;
            width: max-content;
            max-width: 100%;
            margin: 0 auto;
            padding: 40px;
            box-shadow: 0px 0px 20px 0px #00000040;
            top: 90px; /*from 125px for secondary menu overalp*/
            border-radius: 20px;
        }

        /*Space between columns*/
        .v-nav.navbar .megamenu .row {
            gap: 22px;
            margin: 0;
            padding: 0;
        }

        .megamenu .col {
            padding: 0;
            margin: 0;
        }

        .v-nav {
            font-family: 'Gilroy', sans-serif;
        }

        .v-nav .list-unstyled li {
            padding-bottom: 15px;
            letter-spacing: 1px;
            line-height: 1.3;
            font-size: var(--text-sm);

        }

        .v-nav .list-unstyled li a {

            /*Fail accessibilty*/
            /*color: #A5A4A4;*/
            color: var(--versa-grey-85);
            font-size: 14px;
        }

        .v-nav .carousel-item .list-unstyled li {
            padding-bottom: 25px;
            padding-right: 25px;
            font-size: 14px;
        }

        .v-nav .title {
            border-bottom: 1px solid #D9D9D9;
            padding-bottom: 16px;
            margin-bottom: 24px;
            white-space: nowrap;
            font-weight: 700;
            font-size: 15px;
            letter-spacing: 1.4px;
        }


        .v-nav .subtitle,
        .v-nav .carousel-item .subtitle {
            font-family: 'Gilroy', sans-serif;
            font-weight: 500;
            font-size: 14px;
            color: var(--versa-rich-black);
            letter-spacing: 1.4px;
        }

        .v-nav .carousel-item .subtitle {
            color: var(--versa-grey-85);
            font-size: 16px;
            display: flex;
            align-items: center;
        }



        .v-nav .dropdown-toggle[aria-expanded="true"]:after {
            visibility: visible;
        }


        /*for animation*/
        .v-nav .dropdown-toggle:after {
            display: inline-block;
            border: none;
            margin-left: 0;
            vertical-align: .03em;
            content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPHBhdGggZD0iTTAuMTI5ODA1IDAuNzc5MDc5TDEuMTg5ODEgLTMuNzYzNTVlLTA3TDQuNTk5OCAyLjUwNjI4QzQuNjk5OCAyLjU3OTc4IDQuODI5OCAyLjYxNjUzIDQuOTU5OCAyLjYxNjUzQzUuMDg5OCAyLjYxNjUzIDUuMjI5OCAyLjU3OTc4IDUuMzE5OCAyLjUwNjI4TDguNzM5OCAtNC42MzM0MWUtMDhMOS43OTk4IDAuNzc5MDc5TDYuMzg5OCAzLjI4NTM2QzYuMDA5OCAzLjU2NDY2IDUuNTA5OCAzLjcxOSA0Ljk2OTggMy43MTlDNC40Mjk4IDMuNzE5IDMuOTI5OCAzLjU2NDY2IDMuNTQ5OCAzLjI4NTM2TDAuMTM5ODA1IDAuNzc5MDc5TDAuMTI5ODA1IDAuNzc5MDc5WiIgZmlsbD0iI0I3QjZCNiIvPg0KPC9zdmc+DQo=');
            visibility: hidden;
        }

        #language-dropdown:after {
            visibility: visible;
        }


        .v-nav .nav-link {
            color: var(--versa-grey);
            text-transform: uppercase;
            font-size: var(--text-sm);
            letter-spacing: var(--letter-spacing-1);
        }

       /* Animation just for top menu*/
        .v-nav .navbar-nav .nav-link span {
            text-decoration: underline 0.12em rgba(0, 149, 218, 0);
            text-underline-offset: 0.25em;
            transition: text-decoration-color 300ms;
            font-weight: 500;
        }

        .v-nav .navbar-nav .nav-link:hover span,
        .v-nav .megamenu a:hover,
        .v-nav .offcanvas a:hover {
            text-decoration: underline 0.12em var(--versa-azure-blue);
            text-underline-offset: 0.25em;
        }
        
        .v-nav h6 a:hover {
            color: var(--versa-azure-blue);
        }
        
        .v-nav a:focus,
        .v-nav .navbar-nav a:focus span,
        .v-nav h6 a:focus {
            /* outline: 1px dashed var(--versa-azure-blue);*/
        }

        /* good example


        .v-nav #demo-nav-link {
            font-size: var(--text-sm);
        }

        /*NEW- SEP NEW NAV*/
        .magnifying-glass {
            background-position: center;
            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuOTkxNzEgMTQuMTI1QzExLjM3OTEgMTQuMTI1IDE0LjEyNSAxMS4zNzkxIDE0LjEyNSA3Ljk5MTcxQzE0LjEyNSA0LjYwNDM4IDExLjM3OTEgMS44NTg0IDcuOTkxNzEgMS44NTg0QzQuNjA0MzggMS44NTg0IDEuODU4NCA0LjYwNDM4IDEuODU4NCA3Ljk5MTcxQzEuODU4NCAxMS4zNzkxIDQuNjA0MzggMTQuMTI1IDcuOTkxNzEgMTQuMTI1WiIgc3Ryb2tlPSIjOUU5RTlFIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0xMi4zMjUyIDEyLjMyNTJMMTcuNjgzMiAxNy42ODMyIiBzdHJva2U9IiM5RTlFOUUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPC9zdmc+Cg==);
            background-repeat: no-repeat;
        }

        /*SEARCH*/

        .v-nav .button {
            display: inline-block;
            margin: 4px 2px;
            background-color: none;
            font-size: 14px;
            padding-left: 32px;
            padding-right: 32px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #444;
            text-decoration: none;
            cursor: pointer;
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .v-nav .button:hover,
        .v-nav .button:focus {
            transition-duration: 0.4s;
            -moz-transition-duration: 0.4s;
            -webkit-transition-duration: 0.4s;
            -o-transition-duration: 0.4s;
            background-color: #444;
            color: #fff;
        }

        .v-nav .search-container {
            position: relative;
            display: inline-block;
            height: 30px;
            width: 30px;
            vertical-align: bottom;
        }

        .v-nav .mglass {
            display: inline-block;
            pointer-events: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        }

        .v-nav .searchbutton {
            position: absolute;
            font-size: 22px;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .v-nav .search:focus+.searchbutton {
            transition: width 450ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
            background-color: var(--versa-azure-blue);
            color: #fff;
        }

        .search {
            position: absolute;
            left: 29px;
            /* Button width-1px (Not 50px/100% because that will sometimes show a 1px line between the search box and button) */
            background-color: white;
            outline: none;
            border: none;
            padding: 0;
            width: 0;
            height: 100%;
            z-index: 10;
            transition: width 450ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }

        .search:focus {
            width: 200px;
            /* Bar width+1px */
            padding: 0 16px 0 0;
            border: 1px solid var(--versa-azure-blue);
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            font-size: 14px;
        }

        .search:focus+.searchbutton {

            background-color: var(--versa-azure-blue);


        }

        .expandright {
            left: auto;
            right: 30px;
            /* Button width-1px */
        }

        .expandright:focus {
            padding: 0 5px 2px 16px;
        }

        .offcanvas {
            border: none;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            box-shadow: 0px 0px 20px 0px #00000040;
            padding: 30px 0 30px 30px;
            max-height: 800px;
            height: auto;
            /*top: 110px !important;*/
        }
        
        .offcanvas ul li a {
            font-size: 16px;
        }


        /*BS OVERRIDE*/
        .offcanvas-body {
            overflow-x: hidden;
            padding-right: 0;
            padding-left: 10px;
            padding-top: 10px;
        }

        .offcanvas .btn-secondary {
            width: 100%;
            border: none;
            border-bottom: 1.5px solid #D9D9D9;
            margin-bottom: 15px;
            background-color: transparent;
            border-radius: 0;
            color: var(--versa-grey-85);
            text-align: left;
            font-size: 16px;
            /* from 14  */
            letter-spacing: .1cqw;
            padding-top: 0;
            padding-right: 40px;
            padding-bottom: 16px;
            padding-left: 0;
            font-weight: 500;
            box-shadow: none;
        }

        .offcanvas-header {
            position: absolute;
            right: 0;
            background-color: #fff;
            border-radius: 20px;
            z-index: 2;
            top: 25px;
            font-size: 14px;
            padding: 15px;
        }

        .offcanvas .btn-secondary:active,
        .offcanvas .btn-secondary:focus,
        .offcanvas .btn-secondary:focus-visible,
        .offcanvas .btn-secondary.show {
            background: transparent;
            color: var(--versa-azure-blue);
            border-bottom: 1.5px solid var(--versa-azure-blue);
            outline: none;
            box-shadow: none;
        }

        .offcanvas .btn-secondary:active::after,
        .offcanvas .btn-secondary:focus::after,
        .offcanvas .btn-secondary:focus-visible::after,
        .offcanvas .btn-secondary.show::after {
            content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik02LjU1NDg5IDEuNDQ1NDNMMTIuOTI1OSA3LjgxNjQ3TDYuNTU0ODkgMTQuMTg3NSIgc3Ryb2tlPSIjMDA5NURBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+DQo8cGF0aCBkPSJNMTIuOTI1OSA3LjgxNjU0SDAuNDk0OTgxIiBzdHJva2U9IiMwMDk1REEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4NCjwvc3ZnPg0K');
        }


        .offcanvas .dropdown-toggle:after {
            content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik02LjU1NDg5IDEuNDQ1NDNMMTIuOTI1OSA3LjgxNjQ3TDYuNTU0ODkgMTQuMTg3NSIgc3Ryb2tlPSIjODA4MTgxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+DQo8cGF0aCBkPSJNMTIuOTI1OSA3LjgxNjU0SDAuNDk0OTgxIiBzdHJva2U9IiM4MDgxODEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4NCjwvc3ZnPg0K');
            visibility: visible;
            float: right;
        }

        .offcanvas .navbar-nav .dropdown-menu {
            box-shadow: none !important;
            padding: 0;
            margin-bottom: 30px;
        }

        .offcanvas .carousel-indicators [data-bs-target] {
            width: 100%;
            height: auto;
            background: plum;
            text-indent: 0px;
        }

        .offcanvas .carousel-indicators {

            position: static;
            display: block;
        }

        .offcanvas .list-unstyled li a {
            font-size: 16px;
        }

        .arrow-right-grey {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik02LjU1NDg5IDEuNDQ1NDNMMTIuOTI1OSA3LjgxNjQ3TDYuNTU0ODkgMTQuMTg3NSIgc3Ryb2tlPSIjODA4MTgxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+DQo8cGF0aCBkPSJNMTIuOTI1OSA3LjgxNjU0SDAuNDk0OTgxIiBzdHJva2U9IiM4MDgxODEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4NCjwvc3ZnPg0K');
        }

        .arrow-left-grey-icon {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCgk8cGF0aCBkPSJNNy40NDUzMyAxNC4xODc2TDEuMDc0MyA3LjgxNjU5TDcuNDQ1MzMgMS40NDU1NiIgc3Ryb2tlPSIjODA4MTgxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+DQoJPHBhdGggZD0iTTEuMDc0MyA3LjgxNjUxSDEzLjUwNTIiIHN0cm9rZT0iIzgwODE4MSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPg0KPC9zdmc+DQo=');
            width: 20px;
            height: 15px;
            display: inline-block;
            background-repeat: no-repeat;
            margin-right: 15px;
        }
        
        @media (min-width: 1200px) { 
            .v-nav.navbar .megamenu .row {
                gap: 40px;
            }
        }
