.graphic-diagram {
  /*background-image:url(https://2477138.fs1.hubspotusercontent-na1.net/hubfs/2477138/platform-diagram-v1@2x.png);*/
  width:100%;
  background-size:contain;
  background-repeat:no-repeat;
  background-position: center;
}
.interactive-sec-v2{position:relative; padding: 2px 0 100px 0;}
.interactive-sec {

  background-color: #121212;
  /*background-image: url(https://2477138.fs1.hubspotusercontent-na1.net/hubfs/2477138/halo-rgb%202.png);/*
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.interactive-sec .section-container {
  height: auto;
  background-color: transparent;
  background-image: none;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding:0 15px;
}
/*
.section-container {
position: relative;
width: 100%;
padding: 70px 0;
height: 100vh;
overflow: hidden;
background-image: url(https://2477138.fs1.hubspotusercontent-na1.net/hubfs/2477138/halo-rgb%202.png);
background-size: cover;
background-attachment: fixed;
background-color: #121212;
}
*/

.container-flex {
  display: flex;
}

.container-flex .column {
  flex: 1;
  display: flex;
  justify-content: center;
}

.container-flex .column .flex-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: center; text-transform: uppercase;
}

.chevron {position: fixed;left:0;right:0;margin:auto;width:30px;bottom:30px;z-index:99;cursor:pointer;}

.container-flex .column .flex-icon p {
  margin-bottom: 0;
}

footer {
  position: relative;
  z-index: 99999999;
}

.container-flex .column .flex-icon .icon {
  animation: pulse 2s infinite;
  background-color: #ff5a00;
  border-radius: 50%;
  height: 24px;
  position: relative;
  margin-left: 13px;
  width: 24px;
}

/* .container-flex .column .flex-icon .icon::before {
color: #fff;
content: "+";
font-size: 20px;
left: 50%;
position: absolute;
top: 46%;
transform: translate(-50%, -50%);
}
*/
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #ff5a0066;
  }
  70% {
    box-shadow: 0 0 0 25px rgba(52, 152, 219, 0);
  }
  100% {
    box-shadow: 0 0 0 25px rgba(52, 152, 219, 0);
  }
}

.section {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 24px;
  position: relative;

}

.graphic-diagram .container {
  display: flex;
  width: 100%;
  max-width: 100%;
  padding:0;
}

.section-container .heading {
  color: #fff;
  text-align: center;
  /*   font-family: Roboto; */
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.section-container .supporting-copy {
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
}

.graphic-diagram-animated {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
}

/*.graphic-diagram .container .column {
  flex: 1;
}
*/
.graphic-diagram .container .column {
  display: flex;
  flex-wrap: no-wrap;
  align-items: center;
  align-content: center;
  flex-direction: column;
}

.graphic-diagram .container .column img {
  vertical-align:middle;
}

/* .box2024 {
opacity: 0;
transform: translateY(100px);
transition: opacity 0.2s, transform 0.2s;
}
*/
.visible2024 {
  opacity: 1;
  transform: translateY(0);
}

.column.column-2.double-row {
  display: flex !important;
  flex-direction: column !important;
}

.graphic-diagram .container .column figure {
  background-repeat: no-repeat;
}

.graphic-diagram .container .column figure {
  align-items: center;
  background-size: 100%;
  display: flex;
  flex: 1;
  justify-content: center;
  opacity: 0;
  padding-bottom: 100%;
  width: 100%;
  background-position: center;
}
.graphic-diagram .container .column.column-1 figure {  margin-left: -3%; }
.graphic-diagram .container .column.column-3 figure {  margin-left: 0%; }
.graphic-diagram .container .column.column-2 figure { background-size: 103%; }
.graphic-diagram .container .column.column-2.double-row .top-part figure { background-size: 92%; background-repeat:no-repeat; }
/* .graphic-diagram .container .column.column-2.double-row .bottom-part figure { background-size: 105%;  margin-top: 7%; } */
/* .graphic-diagram .container .column.column-2.double-row .bottom-part figure { background-size: 104%; margin-top: 2%; } */
/* .graphic-diagram .container .column.column-2.double-row .bottom-part figure { background-size: 104%; margin-top: 3%; transform: scaleX(1.04); opacity: 1 !important; } */
.graphic-diagram .container .column.column-2.double-row .bottom-part figure { background-size: 92%;background-repeat:no-repeat; }

/* .graphic-diagram .container .column:nth-child(1) figure {
background-image: url(https://2477138.fs1.hubspotusercontent-na1.net/hubfs/2477138/diamond-hover-left.png);
}
.graphic-diagram .container .column:nth-child(2) figure {
background-image: url(https://2477138.fs1.hubspotusercontent-na1.net/hubfs/2477138/diamond-hover-middle@2x-1.png);
}
.graphic-diagram .container .column:nth-child(3) figure {
background-image: url(https://2477138.fs1.hubspotusercontent-na1.net/hubfs/2477138/diamond-hover-right.png);
}
*/
.content {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  text-align: center; /* Horizontally center the text */
}

.nav {
  position: fixed;
  top: 50%;
  right: 20px;
  z-index: 9;
  transform: translateY(-50%);
}
.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav li {
  margin-bottom: 20px;
}
.nav li a {
  display: block;
  width: 10px;
  height: 10px;
  background-color: #000;
  border: 1px solid #fff;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.3s ease;
  position: relative;
}
.nav li a::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  right: calc(100% + 15px);
  transform: translateY(-50%);
  background-color: #ff671f;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  opacity: 0;
  width: 100px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile2024 {
  display:none;
}

.mobile2024 .icon {
  margin-left: 0 !important;
  /*   margin-top: 30px; */
}

.desktop2024 {
  display: block;
}


@media(max-width:1199px) {
  .interactive-sec { padding: 100px 0 100px 0; }
}

@media(max-width:991px) {
  .interactive-sec-v2{ padding: 80px 0 80px 0;}
  .interactive-sec .section-container > div { max-width: 100% !important; }
}

@media(max-width:767px) {
  .interactive-sec { padding:50px 15px; }
  .section-container { /* padding: 100px 50px;*/ }

  .section-container .heading {
    color: #ffff;
    text-align: center;
    font-size: 30px;
  }

  .mobile2024 {
    display:block;
  }

  .desktop2024 {
    display: none;
  }

  .container-flex .column .flex-icon p {
    font-size: 10px;
    line-height: 12px;
  }
}

.nav li a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #ff671f;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav li a:hover::after {
  opacity: 1;
}
.nav li a:hover::before {
  opacity: 1;
}

.nav li.active a {
  background-color: #FF5A00;
  border: #FF5A00;
}

.dot-navigation {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
}

.dot {
  position: relative;
  width: 10px;
  height: 10px;
  background-color: #333;
  border: 1px solid #ffffff;
  margin-bottom: 10px;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.dot:hover {
  background-color: #666;
}

.tooltip {
  position: absolute;
  top: 50%;
  right: calc(100% + 15px);
  transform: translateY(-50%);
  background-color: #ff671f;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  opacity: 0;
  width: 100px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.dot:hover + .tooltip {
  opacity: 1;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #ff671f;
}

.dot.active {
  background-color: #FF5A00 !important;
  border: 1px solid #FF5A00;
}

.graphic-diagram .container .column.double-row .sub-row figure {
  padding-bottom: 50% !important;
}

.bottom-links { display: flex; max-width: 100%; padding: 0; width: 100%; }
.bottom-links .column { flex: 1; position: relative; z-index: 1; }
.bottom-links .column .link-label { width: 100%; display: inline-block; }
.bottom-links .column .link-label a { bottom: 0; color: #fea600; display: inline-block; font-size: 16px; font-weight: 600; height: 100%; left: 80%; position: absolute; right: 0; top: -60px; width: 100%; text-align: center; max-width: 180px; }
.bottom-links .column:nth-child(2) .link-label a { color: #E1006A; }
.bottom-links .column:nth-child(3) .link-label a { color: #8f2b9d; }
.bottom-links .column .link-label a svg { animation: pulse 2s infinite; background-color: #ff5a00; border-radius: 50%; }




@media(min-width: 1300px) and (max-width: 1600px) { 
  .bottom-links .column .link-label a { left: 75%; }
}

@media(min-width: 1200px) and (max-width: 1300px) { 
  .bottom-links .column .link-label a { left: 69%; }
}

@media(min-width:991px) and (max-width:1199px) { 
  .bottom-links .column .link-label a { left: 64%;top: -50px; }
}
/* 05-06-2024 */
@media(min-width:850px) and (max-width:990px) { 
  .bottom-links .column .link-label a { left: 70%;top: -50px; }
}
@media(min-width:768px) and (max-width:849px) { 
  .bottom-links .column .link-label a { left: 64%;top: -50px; }
}

@media(min-width:768px){
  /*   .graphic-diagram .container .column.column-1, .graphic-diagram .container .column.column-3 { pointer-events: none; } */
}

.nav.desktop-nav { display: block; }
.nav.mobile-nav { display: none; }
.interactive-sec .top { display: none;}

@media(max-width:767px){

  /*   .bottom-links {display: none;}  */
  .interactive-sec{background-image:none;}
  .interactive-sec-v2{ padding:30px 0 70px  0;}
  .interactive-sec .plus-icons-wrapper.mobile2024 .container-flex .column { margin: 27px 0;}
  .interactive-sec .section-container .main-title { display: none;}
  /*   .interactive-sec .graphic-diagram{margin-top: 20px;  padding: 17%;  } */
  /*   .graphic-diagram .container { display: none;}  */
  .interactive-sec .top { display: inline-block; margin-bottom: 30px; }
  .interactive-sec .top h1 { font-size: 32px; line-height: 40px; margin-bottom: 8px; text-align: center; }
  .interactive-sec .top p { color: #fff; /* font-family: Roboto; */ font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; text-align: center; }
  .nav { right:7px; }
  .bottom-links span {font-size: 13px;  }
  .bottom-links .column .link-label a { top: -40px; left: 64%;}
}
@media(max-width:690px){
  .bottom-links .column .link-label a {left: 57%;}
}
@media(max-width:600px){
  .bottom-links .column .link-label a {left: 53%;}
}
@media(max-width:550px){
  .bottom-links .column .link-label a {left: 47%;top: -20px;}
}
@media(max-width:400px){
  .bottom-links .column .link-label a {left: 47%;}
  .bottom-links .column .link-label a svg {  height: 20px;  width: 20px;  }
}
.new-solution-2024{background-color: #121212;}