@font-face {
  font-family: "vodafoneextra_bold";
  src: url("fonts/vodafone_extrabold-webfont.woff2") format("woff2"),
    url("fonts/vodafone_extrabold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "vodafone_exbregular";
  src: url("fonts/vodafone_font_exbd-webfont.woff2") format("woff2"),
    url("fonts/vodafone_font_exbd-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "vodafonelight";
  src: url("fonts/vodafone_light-webfont.woff2") format("woff2"),
    url("fonts/vodafone_light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "vodafoneregular";
  src: url("fonts/vodafone-webfont.woff2") format("woff2"),
    url("fonts/vodafone-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "vodafone_ltregular";
  src: url("fonts/vodafonelt-regular-webfont.woff2") format("woff2"),
    url("fonts/vodafonelt-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "vodafone_rgbold";
  src: url("fonts/vodafonerg-bold-webfont.woff2") format("woff2"),
    url("fonts/vodafonerg-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "vodafone_rgregular";
  src: url("fonts/vodafonerg-regular-webfont.woff2") format("woff2"),
    url("fonts/vodafonerg-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "vodafonebold";
  src: url("fonts/vodafone_bold-webfont.woff2") format("woff2"),
    url("fonts/vodafone_bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "vodafonesemibold";
  src: url("fonts/Vodafone_SBd_W.woff2") format("woff2"),
    url("fonts/Vodafone_SBd_W.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "vodafone-medium";
  src: url("fonts/vodafone-medium.woff2") format("woff2"),
    url("fonts/vodafone-medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.root {
  font-size: 0.046296vw;
  /* 1px on a 2160px screen */
}

a:hover,
a:focus {
  text-decoration: none;
}

[class^="col-"] {
  padding-right: 0rem;
  padding-left: 0rem;
}

.row {
  margin-right: 0rem;
  margin-left: 0rem;
  width: 100%;
}

img {
  width: 100%;
}

html {
  font-family: vodafone_rgregular, sans-serif;
  font-weight: 400;
  margin: 0px;
  padding: 0px;
  scroll-behavior: smooth;
  scroll-padding-top: 370rem;
}

html.loader-active,
html.loader-active body {
  overflow: hidden;
}

body {
  margin: 0px;
  padding: 0px
}

.main-vf {
  width: 100vw;
  height: 100vh;
  position: relative;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.main-vf.visible {
  opacity: 1;
}

.vf-gartner-container.container {
  max-width: 100%;
  padding: 200rem 80rem;
}

.vf-gartner-full-container {
  width: 100%;
  padding: 0rem 0rem;
}

.padding-t-section {
  padding-top: 400rem;
}

.padding-b-section {
  padding-bottom: 400rem;
}

/*Font Sizes*/
.vf-text-90 {
  font-size: 90rem;
  line-height: 1.2em;
}

.vf-text-116 {
  font-size: 116rem;
  line-height: 1.2em;
}

.vf-text-40 {
  font-size: 40rem;
  line-height: 1.2em;
}

.vf-text-42 {
  font-size: 42rem;
  line-height: 1.2em;
}

.vf-text-45 {
  font-size: 45rem;
  line-height: 1.2em;
}

.vf-text-48 {
  font-size: 48rem;
  line-height: 1.2em;
}

.vf-text-56 {
  font-size: 56rem;
  line-height: 1.2em;
}

.vf-text-270 {
  font-size: 270rem;
  line-height: 1em;
}

.vf-text-50 {
  font-size: 50rem;
}

.vf-text-72 {
  font-size: 72rem;
  line-height: 1.1em;
}

.vf-text-106 {
  font-size: 106rem;
  line-height: 1.2em;
}

.vf-text-108 {
  font-size: 108rem;
  line-height: 1.2em;
}

.vf-text-120 {
  font-size: 120rem;
  line-height: 1.2em;
}

.vf-primary-text {
  color: #E60000;
}

.vf-white-text {
  color: #FFF;
}

.vf-black-text {
  color: #000;
}

.vf-grey-text {
  color: #25282B;
}

.vf-dark-grey-bg {
  background-color: #181818;
}

.vf-grey-background {
  background-color: #25282B;
}

.vf-text-96 {
  font-size: 96rem;
  line-height: 1.2em;
}

.vf-text-54 {
  font-size: 54rem;
  line-height: 1.2em;
}

.vf-text-62 {
  font-size: 62rem;
  line-height: 1.2em;
}

.vf-text-64 {
  font-size: 64rem;
  line-height: 1.2em;
}

.vf-text-70 {
  font-size: 70rem;
  line-height: 1.2em;
}

.vf-text-36 {
  font-size: 36rem;
  line-height: 1.4em;
}

.vf-text-124 {
  font-size: 124rem;
  line-height: 1.2em;
}

.vf-text-198 {
  font-size: 198rem;
  line-height: 1.2em;
}


.vf-text-extra-bold {
  font-weight: 800;
  font-family: 'vodafoneextra_bold', sans-serif !important;
}

.vf-text-bold {
  font-weight: 700;
  font-family: 'vodafonebold', sans-serif !important;
}

.vf-text-semibold {
  font-weight: 600;
  font-family: 'vodafonesemibold', sans-serif !important;
}

.vf-text-medium {
  font-weight: 500;
  font-family: 'vodafone-medium', sans-serif !important;
}

.vf-text-regular {
  font-weight: 400;
  font-family: 'vodafone_rgregular', sans-serif !important;
}

/*Font Sizes End*/

.vf-gartner-loading img {
  width: 100%;
  object-fit: contain;
}

.vf-gartner-loading {
  position: absolute;
  width: 100%;
  height: 100%;
  justify-content: center;
  display: flex;
  margin: auto;
  z-index: 10000;
  background: radial-gradient(132.27% 163.85% at 1.49% 100%,
      rgb(230, 0, 0) 0%,
      rgb(130, 0, 0) 50.96%,
      rgb(130, 0, 0) 100%);
}

@keyframes slidein-uplight {
  0% {
    transform: translateY(5%);
  }

  100% {
    transform: translateY(0px);
  }
}

p.vf-gartner-loading-text {
  position: absolute;
  top: 51%;
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 80rem;
  font-style: normal;
  line-height: 1.2em;
}

.vf-gartner-loading-text {
  font-size: 20rem;
  font-weight: 500;
  color: white;
  display: inline-block;
}

.vf-gartner-loading-text .dot {
  animation: 1.4s ease 0s infinite normal none running dotsFade;
  opacity: 0;
}

.vf-gartner-loading-text .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.vf-gartner-loading-text .dot:nth-child(3) {
  animation-delay: 0.4s;
}

.vf-gartner-loading-text .dot:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes dotsFade {

  0%,
  20% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.vf-gartner-logo-inner {
  width: 448rem;
}

.vf-gartner-mainheading {
  font-size: 40rem;
  padding: 35rem 0rem;
}

.vf-gartner-height-container {
  padding: 0rem 0px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  position: relative;
  /* Add position relative to container */
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  /* Ensure video stays in background */
}

.pt-40 {
  padding-top: 40rem;
}

.pt-80 {
  padding-top: 80rem;
}

.pt-180 {
  padding-top: 180rem;
}

.pt-210 {
  padding-top: 210rem;
}

.pt-200, .padding-top-200 {
  padding-top: 200rem;
}

.pb-10 {
  padding-bottom: 10rem;
}

.pb-20 {
  padding-bottom: 20rem;
}

.pb-30 {
  padding-bottom: 30rem;
}

.pt-20 {
  padding-top: 20rem;
}

.pt-30 {
  padding-top: 30rem;
}

.pb-120 {
  padding-bottom: 120rem;
}

.animate-slide-in-up {
  animation: slideInUp 0.5s ease-out forwards;
}

.vf-gartner-content {
  background: linear-gradient(1deg, #25282B 2.32%, #A20000 46.45%);
}

.padding-top {
  padding-top: 400rem;
}

.padding-bottom {
  padding-bottom: 400rem;
}

.padding-top-100 {
  padding-top: 100rem !important;
}

.padding-bottom-100 {
  padding-bottom: 100rem !important;
}

/* Tabs */
.vf-tabs-main-heading {
  margin-bottom: 80rem;
}

.vf-tabs-nav {
  display: flex;
  gap: 30rem;
  margin-bottom: 65rem;
}

.vf-tabs-nav.white-sticky {
  position: sticky;
  top: 370rem;
  z-index: 2;
  background-color: #fff;
  padding-top: 30rem !important;
  padding-bottom: 30rem !important;
  border-bottom: 1rem solid #eaeaea59;
}

.vf-tabs-btn {
  background-color: transparent;
  border: 2.25rem solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
  padding: 22.5rem;
  border-radius: 13.5rem;
  cursor: pointer;
}

.vf-tabs-btn.active {
  border-color: #FFFFFF;
  background-color: #FFFFFF;
  color: #E60000;
  font-weight: 700;
  font-family: vodafonebold, sans-serif;
}

.vf-tabs-pane {
  display: none;
  padding-top: 50rem;
}

.vf-tabs-pane.active {
  display: block;
}

.vf-tab-grid {
  display: grid;
  grid-template-columns: 729fr 1181fr;
  gap: 50rem;
  align-items: stretch;
  border-radius: 14rem;
  padding: 0rem;
}

.vf-tab-col-image {
  position: relative;
}

.vf-tab-col-image img {
  height: 100%;
  object-fit: cover;
}

.vf-tab-img-num {
  position: absolute;
  top: -31.5rem;
  left: 47.25rem;
  font-size: 450rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 4.5rem #FFFFFF;
  line-height: 1;
}

.vf-tab-col-content {
  background: linear-gradient(320deg, rgba(255, 53, 53, 0.40) 22.71%, rgba(161, 0, 0, 0.40) 93.77%);
  box-shadow: 0 0 198rem 7.875rem rgba(255, 0, 0, 0.15) inset;
  border-radius: 14rem;
  padding: 70rem 40rem;
}

.vf-tab-col-content h3 {
  margin-bottom: 60rem;
  color: #FFFFFF;
}

.vf-tab-col-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 45rem;
  padding-right: 40rem;
}

.vf-tab-col-content li {
  font-size: 52rem;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 30rem;
  color: #FFFFFF;
  font-family: vodafoneregular, sans-serif;
  font-weight: 400;
}

.vf-tab-col-content li img {
  width: 90rem;
  height: 90rem;
}

.vf-tab-bottom-content {
  background: linear-gradient(311deg, rgba(230, 0, 0, 0.40) 42.23%, rgba(130, 0, 0, 0.40) 93.95%);
  box-shadow: 0 0 198rem 7.875rem rgba(255, 0, 0, 0.15) inset;
  border-radius: 14rem;
  padding: 75rem 42rem 60rem;
  margin-top: 50rem;
}

.vf-tab-bottom-content p {
  font-size: 52rem;
  line-height: 1.2em;
}

.vf-tab-bottom-content ul {
  list-style: none;
  padding-left: 0;
  padding-right: 170rem;
}

.vf-tab-bottom-content ul li {
  font-size: 52rem;
  line-height: 1.2em;
  font-family: vodafoneregular, sans-serif;
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 35rem;
  position: relative;
  padding-left: 50rem;
  /* Space for custom marker */
}

.vf-tab-bottom-content ul li::before {
  content: "•";
  /* Custom bullet */
  color: #FFFFFF;
  /* White bullet */
  font-size: 45rem;
  /* Match text size */
  position: absolute;
  left: 0;
  top: 0;
}

.vf-tab-col-content .vf-child-ul {
  padding-left: 50rem;
  position: relative;
  margin-top: 40rem;
  margin-left: 65rem;
  gap: 30rem;
}

.vf-tab-col-content .vf-child-ul li {
  position: relative;
  padding-left: 45rem;
}

.vf-tab-col-content .vf-child-ul li::before {
  content: "•";
  /* Custom bullet */
  color: #FFFFFF;
  /* White bullet */
  font-size: 45rem;
  /* Match text size */
  position: absolute;
  left: 0rem;
  top: 5rem;
}

.vf-tab-bottom-content p {
  margin-bottom: 30rem;
  color: #FFFFFF;
  font-family: vodafoneregular, sans-serif;
  font-weight: 400;
}

.vf-tab-col-content ul ul {
  margin-top: 20rem;
  padding-left: 50rem;
}

.vf-tab-bottom-content ul li::marker {
  color: #fff;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accordion */
.vf-accordion-section {
  background-color: #25282B;
  padding-bottom: 200rem;
}

.vf-accordion-section h2 {
  margin-bottom: 250rem;
}

.vf-accordion-item {
  border-bottom: 1.125rem solid #FFFFFF;
}

.vf-accordion-item:first-child {
  border-top: 1.125rem solid #FFFFFF;
}

.vf-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60rem 0rem;
  cursor: pointer;
}

.vf-accordion-header img {
  width: 90rem;
  height: 90rem;
  transition: transform 0.3s ease-in-out;
}

.vf-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
}

.vf-accordion-item.active .vf-accordion-content {
  max-height: 1000rem;
  /* A large enough value to accommodate content */
  padding-bottom: 10rem;
  padding-top: 20rem;
}


.vf-accordion-grid {
  display: flex;
  align-items: center;
  gap: 100rem;
  padding-right: 80rem;
  padding-bottom: 80rem;
}

.vf-accordion-grid img {
  width: 790rem;
  border-radius: 16rem;
}

.vf-accordion-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32rem;
}

.vf-accordion-grid li {
  display: flex;
  align-items: flex-start;
  gap: 25rem;
  font-size: 54rem;
  line-height: 1.2;
  color: #FFFFFF;
  font-family: vodafoneregular, sans-serif;
}

.vf-accordion-grid li img {
  width: 56rem;
  height: 56rem;
}

.vf-text-section {
  width: 80%;
}

.vf-text-section .vf-gartner-container.container {
  padding-top: 100rem;
}

.about-us-title {
  font-size: 158rem;
  line-height: 1.25;
}

.about-us-title .text-part,
.about-us-title .highlight {
  color: #820000;
  transition: color 0.1s ease-out;
}

.about-us-title .white-word {
  color: #FFFFFF;
}

.about-us-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30rem;
}

.highlight {
  color: #E60000;
}

.about-us-section img {
  width: 288rem;
  height: 178rem;
  border-radius: 14rem;
  object-fit: cover;
}

.vf-video-section {
  height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Ensures the scaled video doesn't overflow */
}

.scroll-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 45rem;
  /* transform: scale(0.7); */
  transform-origin: center;
  transition: transform 0.1s ease-out, border-radius 0.1s ease-out;
  /* Smooths the transform */
}

/* Multi cloud networking css */
#multi-cloud-networking-section {
  position: relative;
  width: 100%;
  height: 1750rem;
  overflow: hidden;
}

#multi-cloud-networking-section .video-bg {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
  height: 45%;
  z-index: 1;
}

#multi-cloud-networking-section .video-tag, #multi-cloud-networking-section spline-viewer {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.center-logo {
  position: absolute;
  top: 40.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 283rem;
  height: 283rem;
  z-index: 2;
}

.features-container {
  position: relative;
  z-index: 3;
  height: 100%;
}

.feature-item {
  position: absolute;
  width: 532rem;
  text-align: left;
}

.feature-item img {
  width: 382rem;
  height: 259rem;
  margin-bottom: 20rem;
}

.feature-item h3 {
  font-size: 49.5rem;
  color: #fff;
  margin-bottom: 10rem;
  text-align: center;
}

.feature-item ul {
  list-style: none;
  padding-left: 0;
  margin-top: 10rem;
}

.feature-item li {
  position: relative;
  padding-left: 40rem;
  margin-bottom: 25rem;
  line-height: 1.4;
}

.feature-item li::before {
  content: "•";
  color: #E60000;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 5rem;
  font-size: 30rem;
}

.item1 {
  top: 150rem;
  left: 40rem;
}

.item1 p {
  width: 510rem;
}

.item2 {
  top: 150rem;
  right: 40rem;
}

.item3 {
  bottom: 0rem;
  left: 350rem;
}

.item3 p {
  width: 523rem;
}

.item4 {
  bottom: 0rem;
  right: 350rem;
}

.item4 p {
  width: 533rem;
}

/* Multi cloud networking css end */
/* Arrow scroll down */
.arrow-scroll-down {
  position: absolute;
  bottom: 150rem;
  left: 50%;
  transform: translateX(-50%);
}

.arrow-scroll-down-icon {
  width: 120rem;
  height: 155rem;
  cursor: pointer;
  display: flex;
}

/* Global Explore Button */
.global-explore-btn {
  font-size: 32rem;
  display: flex;
  align-items: center;
  gap: 20rem;
  border: none;
  color: #e60000;
  border-radius: 8rem;
  padding: 20rem 27rem;
  background: #FFF;
  transition: transform 0.4s ease;
}

.global-explore-btn .arrow-icon {
  width: 36rem;
  height: 36rem;
  aspect-ratio: 1/1;
  background: #E60000;
  border-radius: 100%;
  padding: 14rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

.global-explore-btn:hover .arrow-icon {
  transform: translateX(10rem);
}

.global-explore-btn .arrow-icon img {
  width: 100%;
  height: auto;
}

.vf-gartner-header {
  padding: 100rem 80rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  max-width: 2160rem;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  /* Ensure it stays on top */
  transition: background-color 0.3s ease-in-out;
}

.vf-gartner-header.active {
  background-color: #25282B;
}

.vf-gartner-header .left-logo img {
  width: 510rem;
  height: auto;
}

.vf-gartner-header .right-icons {
  display: flex;
  gap: 50rem;
  align-items: center;
}

.vf-gartner-header .icon-circle {
  width: 168rem;
  height: 168rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vf-gartner-header .icon-circle.home-icon img {
  width: 168rem;
  height: auto;
}

.vf-gartner-header .icon-circle.close-icon img {
  width: 168rem;
  height: auto;
}

.vf-gartner-start-text {
  max-width: 775rem;
  position: absolute;
  bottom: 10%;
  margin: auto;
  left: 0;
  right: 0;
}

.clickable-card {
  position: absolute;
  cursor: pointer;
  z-index: 1;
}

.clickable-card.card-1 {
  width: 1120rem;
  height: 300rem;
  transform: rotate(130deg);
  top: 32%;
  left: 12%;
  border-radius: 50rem;
}

.clickable-card.card-2 {
  width: 1200rem;
  height: 480rem;
  transform: rotate(0deg);
  top: 55%;
  left: 24%;
  border-radius: 50rem;
}

.clickable-card.card-3 {
  width: 510rem;
  height: 490rem;
  transform: rotate(0deg);
  top: 36%;
  right: 6%;
  border-radius: 50%;
}

/* shimmer glow Text Shimmer */
/* .shimmer {
  position: relative;
  background: linear-gradient(90deg, rgba(252, 250, 250, 0.01) 0%, rgba(255,255,255,0.98) 50%, rgba(219, 218, 218, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: -6rem;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0), rgba(235, 223, 223, 0) 0%);
  filter: blur(6rem);
  z-index: -1;
}

.shimmer-animate {
  background-size: 200% 100%;
  animation: shimmerSlide 3.4s linear infinite;
}

@keyframes shimmerSlide {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
} */



/* Video Controls */
.vf-video-container {
  position: relative;
}

.video-controls {
  position: absolute;
  bottom: 70rem;
  right: 100rem;
  /* background: rgba(0, 0, 0, 0.8); */
  padding: 0;
  border-radius: 20rem;
  display: flex;
  gap: 22rem;
  align-items: center;
  z-index: 1000;
}

.video-control-btn {
  background: #e60000;
  color: white;
  border: none;
  padding: 32rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 2rem 20rem rgb(0 0 0 / 9%);
}

.video-control-btn:active {
  transform: scale(0.95);
}

.control-icon {
  width: 80rem;
  height: 80rem;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Play/Pause Button States */
.play-pause-btn.playing .control-icon {
  /* Styles for playing state (pause icon) */
  background-image: url('../images/pause.svg');
}

.play-pause-btn.paused .control-icon {
  /* Styles for paused state (play icon) */
  background-image: url('../images/play.svg');
}

/* Mute Button States */
.mute-btn.muted .control-icon, .mute-btn .control-icon {
  /* Styles for muted state (sound-off icon) */
  background-image: url('../images/sound-off.svg');
}

.mute-btn.unmuted .control-icon {
  /* Styles for unmuted state (sound-on icon) */
  background-image: url('../images/sound-on.svg');
}

.reset-btn .control-icon {
  background-image: url('../images/refresh.svg');
}

.bg-light-grey {
  background-color: #F5F5F5;
}

/* CTA Cards Section */
.cta-cards-section {
  background-color: #E1E1E1;
  overflow: hidden;
}

.cta-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 85rem;
}

.cta-card {
  border-radius: 20rem;
  padding: 50rem 35rem 70rem 35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 400rem;
  position: relative;
  overflow: hidden;
}

.cta-card-left {
  background-color: #25282B;
}

.cta-card-middle {
  background-color: #FFFFFF;
  padding: 35rem 55rem;
}

.cta-card-middle .cta-card-icon {
  width: 280rem;
}

.cta-card-right {
  background-color: #820000;
}

.cta-card-left .cta-card-icon {
  width: 235rem;
}

.cta-card-icon {
  width: 135rem;
  height: auto;
  margin-bottom: 30rem;
}

.cta-card-icon img {
  width: 100%;
  height: auto;
}

.cta-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.cta-card-text {
  margin-bottom: 50rem;
  line-height: 1.4em;
}

.cta-button {
  background-color: #E60000;
  color: #FFFFFF;
  border: none;
  border-radius: 8rem;
  padding: 15rem 30rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  align-self: center;
  margin-top: auto;
  text-decoration: none;
}

.cta-button:hover {
  background-color: #CC0000;
}

/* Middle Card Special Styling */
.scan-text-container {
  margin: 20rem 0;
}

.scan-text {
  width: 100%;
  height: auto;
}

.qr-code-container {
  margin-top: 30rem;
  display: flex;
  justify-content: center;
}

.qr-code {
  width: 120rem;
  height: 120rem;
  background-color: #FFFFFF;
  border: 2rem solid #E5E5E5;
  border-radius: 12rem;
  position: relative;
  overflow: hidden;
}

.qr-code-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2rem;
  padding: 8rem;
}

.qr-squares {
  background-color: #000000;
  border-radius: 2rem;
}

.scan-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3rem;
  background-color: #E60000;
  animation: scanAnimation 2s linear infinite;
}

@keyframes scanAnimation {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.cta-card-middle .cta-card-content .cta-card-text {
  margin-bottom: 18rem;
}

.cta-card-middle .cta-card-content .cta-card-icon {
  margin-bottom: 0;
  margin-top: 50rem;
}

.vf-gradient-bg-1 {
  background: linear-gradient(180deg, #E60000 0%, #820000 100%);
}

.vf-gradient-bg-2 {
  background: linear-gradient(90deg, #820000 -0.02%, #E60000 100.12%);
}

.vf-gradient-bg-3 {
  background: linear-gradient(180deg, #820000 21.61%, #E60000 114.39%);
}

.vf-gradient-bg-4 {
  background: linear-gradient(1deg, #25282B 2.58%, #A20000 96.95%);
}

.vf-text-100 {
  font-size: 100rem;
}

.text-wrap-balance {
  text-wrap: balance;
}

.vf-btn-primary {
  background-color: #e60000;
  color: #ffffff;
  display: inline-flex;
  text-decoration: none;
}

.vf-btn-primary .arrow-icon {
  background-color: #ffffff;
}


/****VF Content Grid when text is left and image is right or vice versa******/


.vf-content-grid .vf-content-item .vf-content-item-text h3 {
  margin-bottom: 45rem;
  line-height: normal;
}

.vf-content-grid .vf-content-item .vf-content-item-text ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 20rem;
}

.vf-content-grid .vf-content-item .vf-content-item-text ul li::before {
  content: "";
  width: 55rem;
  height: 55rem;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><path d="M22.3815 35.6185L26.2782 30.683L41.1617 11.812C41.8377 10.9546 42.8719 10.4647 43.9652 10.4874L45.3805 10.4693L47.4128 10.4375L45.503 13.3407L43.3755 16.5932L29.6713 37.5464L25.634 43.5071C25.0171 44.378 24.2686 45.3034 23.0982 45.3034C22.0458 45.3034 21.3109 44.5413 20.6895 43.811L9.07655 30.9733L8.8452 30.683C8.46869 30.184 8.27363 29.567 8.30085 28.941C8.30085 28.2606 8.56849 27.6074 9.04934 27.1265C9.53018 26.6411 10.1834 26.3735 10.8684 26.3735C11.6849 26.3735 12.2429 26.6956 12.9369 27.2082L22.3815 35.6185Z" fill="%23E60000"/></svg>');
  position: absolute;
  left: 0;
  top: 3rem;
  background-size: contain;
}

.vf-content-grid .vf-content-item .vf-content-item-text ul li {
  position: relative;
  padding-left: 80rem;
}

.vf-content-grid .vf-content-item .vf-content-item-text ul.list-icons li {
  display: flex;
  padding-left: 94rem;
  min-height: 64rem;
  align-items: center;
}

.vf-content-grid .vf-content-item .vf-content-item-text ul.list-icons li::before {
  display: none;
}

.vf-content-grid .vf-content-item .vf-content-item-text ul.list-icons li img {
  position: absolute;
  width: 64rem;
  height: 64rem;
  left: 0;
  top: 0;
}

.vf-content-grid .vf-content-item .vf-content-item-text ul.list-icons {
  gap: 30rem;
}

/* Container: vertical spacing between items */
.vf-content-grid {
  display: grid;
  gap: 200rem;
}

/* Each row is a 12-col grid */
.vf-content-item {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 150rem;
  /* gutter */
  align-items: center;
  /* keep image/text aligned */
  /* optional visual aid */
  /* padding: 8px; border: 1px solid rgba(125,125,125,.2); border-radius: 12px; */
}

/* Defaults (7/5) using CSS variables. You can override via classes below */
.vf-content-item-image {
  --img-span: 7;
}

.vf-content-item-text {
  --text-span: 5;
}

/* ODD rows: image left, text right */
.vf-content-item .vf-content-item-image {
  grid-column: 1 / span var(--img-span);
}

.vf-content-item .vf-content-item-text {
  grid-column: calc(13 - var(--text-span)) / span var(--text-span);
}

/* EVEN rows: reverse order */
.vf-content-item.reverse .vf-content-item-image {
  grid-column: calc(13 - var(--img-span)) / span var(--img-span);
}

.vf-content-item.reverse .vf-content-item-text {
  grid-column: 1 / span var(--text-span);
}

/* Keep media and copy on the same grid row */
.vf-content-item .vf-content-item-image,
.vf-content-item .vf-content-item-text {
  grid-row: 1;
}

/* Basic media and text styles (optional) */
.vf-content-item-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10rem;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {

  /* .vf-content-item .vf-content-item-image,
  .vf-content-item .vf-content-item-text {
    grid-column: 1 / -1 !important;
  } */
}

/* --- Span utilities (static, no JS) ---
     Apply to set per-block spans, e.g.,
     <div class="vf-content-item-image span-6"> ... </div>
     <div class="vf-content-item-text span-6"> ... </div>
  */
.vf-content-item-image.span-1 {
  --img-span: 1;
}

.vf-content-item-image.span-2 {
  --img-span: 2;
}

.vf-content-item-image.span-3 {
  --img-span: 3;
}

.vf-content-item-image.span-4 {
  --img-span: 4;
}

.vf-content-item-image.span-5 {
  --img-span: 5;
}

.vf-content-item-image.span-6 {
  --img-span: 6;
}

.vf-content-item-image.span-7 {
  --img-span: 7;
}

.vf-content-item-image.span-8 {
  --img-span: 8;
}

.vf-content-item-image.span-9 {
  --img-span: 9;
}

.vf-content-item-image.span-10 {
  --img-span: 10;
}

.vf-content-item-image.span-11 {
  --img-span: 11;
}

.vf-content-item-image.span-12 {
  --img-span: 12;
}

.vf-content-item-text.span-1 {
  --text-span: 1;
}

.vf-content-item-text.span-2 {
  --text-span: 2;
}

.vf-content-item-text.span-3 {
  --text-span: 3;
}

.vf-content-item-text.span-4 {
  --text-span: 4;
}

.vf-content-item-text.span-5 {
  --text-span: 5;
}

.vf-content-item-text.span-6 {
  --text-span: 6;
}

.vf-content-item-text.span-7 {
  --text-span: 7;
}

.vf-content-item-text.span-8 {
  --text-span: 8;
}

.vf-content-item-text.span-9 {
  --text-span: 9;
}

.vf-content-item-text.span-10 {
  --text-span: 10;
}

.vf-content-item-text.span-11 {
  --text-span: 11;
}

.vf-content-item-text.span-12 {
  --text-span: 12;
}

.qr-info {
  width: 304rem;
}

.vf-gartner-darkbg {
  background-color: #161616;
}

.vf-partners {
  width: 100%
}

.title-partnerships .about-us-title .text-part.white-word {
  color: #000000;
}

.title-partnerships .about-us-title .text-part {
  color: #00000030;
  transition: color 0.1s ease-out;
}

.about-us-line {
  font-size: 116rem;
  line-height: 1.2em;
  font-weight: 400;
  font-family: vodafonebold, sans-serif;
  color: #000000;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 0rem 29rem;
  width: 100%;
  flex-wrap: wrap;
}

.vf-tab-col-content .vf-child-ul.gap-10 {
  gap: 10rem;
}

/* Technology Partnerships Page Styles */
.vf-text-123 {
  font-size: 123rem;
}

.vf-text-200 {
  font-size: 200rem;
}

.vf-text-194 {
  font-size: 194rem;
}

.vf-text-128 {
  font-size: 128rem;
}

.vf-text-80 {
  font-size: 80rem;
}

.vf-text-38 {
  font-size: 38rem;
}

.vf-text-32 {
  font-size: 32rem;
}

.container.vf-gartner-container.padding-bottom-80.pt-0, .padding-bottom-80 {
  padding-bottom: 80rem;
}

.container.vf-gartner-container.pt-80, .pt-80 {
  padding-top: 80rem;
}