/* =============================================
   CHARTING PAGE STYLES  
   ============================================= */

/* Design tokens (:root variables) are defined globally in style.css  */

.charting-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  align-items: flex-end;
  position: relative;
  background-color: var(--dark-white);
  overflow-x: hidden;
  padding-top:110px !important ;
}
/* for home page */
.made_with .charting-page{
   padding-top:0px !important ;
}
.made_with .charting-page .wp-block-columns{
  margin-bottom: 0px !important;
}
.made-carousel-block-first{
  width: 120% !important;
}
.made-carousel-block-second{
  width: 129% !important;
}

/* * Charting Page */
.charting-page .chart-hero-eyebrow {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--medium-blue);
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}
.charting-page .chart-hero-headline-accent {
  color: #3971c0;
  letter-spacing: var(--desktop-h1-letter-spacing);

}
.charting-page .chart-hero-cta-group {
  position: relative;
  width: 185px !important;
  height: 33px; margin: 0px auto;
}

.charting-page .chart-btn-primary {
  display: flex;
  width: 81px;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--blue);
  border-radius: 4px;
}
.charting-page.map-page .chart-btn-primary{
   background-color: var(--green);
}

.charting-page .btn-label, .chart-hero-cta-group   .wp-block-button__link{
  position: relative;
  width: fit-content;
  background: no-repeat;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #ffffff;
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
  background-color: none !important;
}
.features-btn-secondary{
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #000000 !important;
  border-radius: 4px;
}
.features-btn-tertiary{
   display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color:white !important;
  border-radius: 4px;
}
.features-btn-tertiary a{
  color: #000000 !important; background: white;
}
.features-btn-secondary a{
  color: white !important; background: black;
}
.charting-page .chart-btn-secondary {
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  position: absolute;
  top: 0;
  left: 90px;
  background-color: #000000 !important;
  border-radius: 4px;
}

.charting-page .chart-carousel {
  display: flex;
  width: 1569px;
  align-items: center;
  gap: 5px;
  padding: 24px 0px 24px 96px;
  position: relative;
  flex: 0 0 auto;
  margin-left: -64.50px;
  margin-right: -64.50px;
}

.charting-page .carousel-card {
  position: relative;
  width: 305.19px;
  height: 285px;
  box-shadow:
    1px 6px 13px #00000008, 3px 24px 24px #00000005, 6px 54px 33px #00000003, 10px 96px 39px transparent, 16px 151px 42px transparent;
}

.charting-page .carousel-card-bg {
  position: absolute;
  top: 0;
  left: calc(50.00% - 153px);
  width: 303px;
  height: 285px;
  background-color: #f4f4f4;
  border-radius: 3.47px;
}

.charting-page .carousel-card-inner {
  position: absolute;
  top: 4px;
  left: calc(50.00% - 150px);
  width: 298px;
  height: 229px;
  background-color: #ffffff;
  border-radius: 3.47px;
}

.charting-page .carousel-label-micro {
  position: absolute;
  top: 246px;
  left: 11px;
  width: 154px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12.1px;
  letter-spacing: 0;
  line-height: 18.2px;
}

.charting-page .carousel-img {
  position: absolute;
  top: 36px;
  left: 12px;
  width: 279px;
  height: 156px;
  aspect-ratio: 1.79;
}

.charting-page .carousel-label-gantt {
  position: absolute;
  top: 246px;
  left: 11px;
  width: 116px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12.1px;
  letter-spacing: 0;
  line-height: 18.2px;
}

.charting-page .carousel-img-gantt {
  position: absolute;
  top: 41px;
  left: 10px;
  width: 284px;
  height: 146px;
  aspect-ratio: 1.94;
  object-fit: cover;
}

.charting-page .carousel-label-led {
  position: absolute;
  top: 246px;
  left: 11px;
  width: 70px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12.1px;
  letter-spacing: 0;
  line-height: 18.2px;
}

.charting-page .carousel-img-led {
  position: absolute;
  top: 36px;
  left: 68px;
  width: 166px;
  height: 152px;
  aspect-ratio: 1.09;
}

.charting-page .carousel-label-sun {
  position: absolute;
  top: 246px;
  left: 11px;
  width: 79px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12.1px;
  letter-spacing: 0;
  line-height: 18.2px;
}

.charting-page .carousel-img-sun {
  position: absolute;
  top: 37px;
  left: 3px;
  width: 298px;
  height: 153px;
  aspect-ratio: 1.94;
  object-fit: cover;
}

.charting-page .carousel-card-last {
  position: relative;
  width: 305.19px;
  height: 285px;
  margin-right: -64.95px;
  box-shadow:
    1px 6px 13px #00000008, 3px 24px 24px #00000005, 6px 54px 33px #00000003, 10px 96px 39px transparent, 16px 151px 42px transparent;
}

.charting-page .carousel-img-last {
  position: absolute;
  top: 36px;
  left: 12px;
  width: 164px;
  height: 156px;
  aspect-ratio: 1.79;
}

.charting-page .highlight-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 96px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
}


.charting-page .highlight-headline {
  position: relative;
  width: min(733px, 90%) !important;
  margin-top: -1.00px;
  font-family: var(--desktop-h2-font-family);
  font-weight: var(--desktop-h2-font-weight);
  color: transparent;
  font-size: var(--desktop-h2-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h2-letter-spacing);
  line-height: var(--desktop-h2-line-height);
  font-style: var(--desktop-h2-font-style);
}
.charting-page .chart-hero-body {
  position: relative;
  width: min(694px, 90%) !important;
  color: #000000;

  text-align: center;

}

.charting-page .highlight-text-normal {
  color: #000000;
  letter-spacing: var(--desktop-h2-letter-spacing);
  font-family: var(--desktop-h2-font-family);
  font-style: var(--desktop-h2-font-style);
  font-weight: var(--desktop-h2-font-weight);
  line-height: var(--desktop-h2-line-height);
  font-size: var(--desktop-h2-font-size);
}

.charting-page .highlight-text-accent {
  color: #3971c0;
  letter-spacing: var(--desktop-h2-letter-spacing);
  font-family: var(--desktop-h2-font-family);
  font-style: var(--desktop-h2-font-style);
  font-weight: var(--desktop-h2-font-weight);
  line-height: var(--desktop-h2-line-height);
  font-size: var(--desktop-h2-font-size);
}

.charting-page .highlight-chart {
  position: absolute;
  top: -3px;
  left: -92px;
  width: 1613px;
  height: 858px;
}

.charting-page .chart-bar-a {
  position: absolute;
  top: 411px;
  left: 1254px;
  width: 173px;
  height: 424px;
  background-color: var( --color-primary-blue);
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c080;
}

.charting-page .chart-bar-b {
  position: absolute;
  top: 185px;
  left: 1436px;
  width: 173px;
  height: 386px;
  background-color: #3971c00f;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.charting-page .chart-bar-c {
  position: absolute;
  top: 227px;
  left: 0;
  width: 173px;
  height: 495px;
  background-color: #3971c00f;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.charting-page .chart-bar-d {
  position: absolute;
  top: 0;
  left: 182px;
  width: 158px;
  height: 438px;
  background-color: var( --color-primary-blue);
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c080;
}

.charting-page .chart-bar-e {
  position: absolute;
  top: 0;
  left: 1071px;
  width: 173px;
  height: 167px;
  background-color: var( --color-primary-blue);;
  border-radius: 4px;
}

.charting-page .chart-annotation-1 {
  position: absolute;
  top: 849px;
  left: 362px;
  width: 240px;
  height: 1px;
  object-fit: cover;
}

.charting-page .chart-annotation-2 {
  position: absolute;
  top: 177px;
  left: 890px;
  width: 354px;
  height: 1px;
  object-fit: cover;
}
.charting-page .chart-bar-a,
.charting-page .chart-bar-b,
.charting-page .chart-bar-c,
.charting-page .chart-bar-d,
.charting-page .chart-bar-e {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.charting-page .chart-bar-a:hover,
.charting-page .chart-bar-b:hover,
.charting-page .chart-bar-c:hover,
.charting-page .chart-bar-d:hover,
.charting-page .chart-bar-e:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(57, 113, 192, 0.25);
}

.charting-page .chart-bar-a {
  position: absolute;
  top: 411px;
  left: 1254px;
  width: 173px;
  height: 424px;
  background-color: var(--color-primary-blue);
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c080;
}

.charting-page .chart-bar-b {
  position: absolute;
  top: 185px;
  left: 1436px;
  width: 173px;
  height: 386px;
  background-color: #3971c00f;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.charting-page .chart-bar-c {
  position: absolute;
  top: 227px;
  left: 0;
  width: 173px;
  height: 495px;
  background-color: #3971c00f;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.charting-page .chart-bar-d {
  position: absolute;
  top: 0;
  left: 182px;
  width: 158px;
  height: 438px;
  background-color: var(--color-primary-blue);
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c080;
}

.charting-page .chart-bar-e {
  position: absolute;
  top: 0;
  left: 1071px;
  width: 173px;
  height: 167px;
  background-color: var(--color-primary-blue);
  border-radius: 4px;
}
@keyframes barRiseA { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes barRiseB { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes barRiseC { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes barRiseD { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes barRiseE { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.charting-page .chart-bar-a,
.charting-page .chart-bar-b,
.charting-page .chart-bar-c,
.charting-page .chart-bar-d,
.charting-page .chart-bar-e {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  opacity: 0;
}

.charting-page .chart-bar-a:hover,
.charting-page .chart-bar-b:hover,
.charting-page .chart-bar-c:hover,
.charting-page .chart-bar-d:hover,
.charting-page .chart-bar-e:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(57, 113, 192, 0.25);
}

.charting-page .chart-bar-a {
  position: absolute;
  top: 411px;
  left: 1254px;
  width: 173px;
  height: 424px;
  background-color: var(--color-primary-blue);
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c080;
  animation: barRiseA 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.charting-page .chart-bar-b {
  position: absolute;
  top: 185px;
  left: 1436px;
  width: 173px;
  height: 386px;
  background-color: #3971c00f;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
  animation: barRiseB 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.charting-page .chart-bar-c {
  position: absolute;
  top: 227px;
  left: 0;
  width: 173px;
  height: 495px;
  background-color: #3971c00f;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
  animation: barRiseC 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.charting-page .chart-bar-d {
  position: absolute;
  top: 0;
  left: 182px;
  width: 158px;
  height: 438px;
  background-color: var(--color-primary-blue);
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c080;
  animation: barRiseD 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

.charting-page .chart-bar-e {
  position: absolute;
  top: 0;
  left: 1071px;
  width: 173px;
  height: 167px;
  background-color: var(--color-primary-blue);
  border-radius: 4px;
  animation: barRiseE 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}


/* effects above */
.charting-page .chart-label-1 {
  position: absolute;
  top: 840px;
  left: 611px;
  opacity: 0.6;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #3971c0;
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
}

.charting-page .chart-label-2 {
  position: absolute;
  top: 167px;
  left: 850px;
  opacity: 0.6;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #3971c0;
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
}

.charting-page .chart-bar-f {
  position: absolute;
  top: 669px;
  left: 363px;
  width: 173px;
  height: 166px;
  background-color: #3971c02b;
  border-radius: 4px;
}

.charting-page .chart-bar-g {
  position: absolute;
  top: 634px;
  left: 543px;
  width: 173px;
  height: 153px;
  background-color: #3971c00f;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.charting-page .features-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 80px var(--container-lr-padding) !important;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background: none !important;
}
.charting-page.map-page .features-section{
  padding: 0px !important;
}
.charting-page .features-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--container-lr-padding) !important;
  position: relative;
  background-color: #ffffff;
  border-radius: 3.66px;
  box-shadow:
    3px 11px 25px #0000000a, 10px 44px 45px #0000000a, 23px 99px 61px #00000005, 42px 176px 72px #00000003, 65px 275px 79px transparent;
}
.charting-page.map-page .features-card {

  background-color: var(--green);
}
.charting-page.grid-page .features-card {

  background-color: var(--purple);
}
.charting-page.map-page p, .charting-page.map-page li{
  font-size: 16px !important;
}
.charting-page .features-card .wp-block-columns{
margin-bottom: 0px !important;
}
.charting-page .features-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  position: relative;
}

.charting-page .features-text-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}
.features-list
  {
    margin-top: 0px !important; margin-bottom: 0px !important;
  }
.features-section .wp-block-uagb-container {
 /* all: unset !important;*/

}
/*
.charting-page .features-heading h3 {
  position: relative;
  align-self: stretch;
  height: 112px;
  margin-top: -1.00px;
  font-family: var(--desktop-h3-font-family);
  font-weight: var(--desktop-h3-font-weight);
  color: #000000;
  font-size: var(--desktop-h3-font-size);
  letter-spacing: var(--desktop-h3-letter-spacing);
  line-height: var(--desktop-h3-line-height);
  font-style: var(--desktop-h3-font-style);
}

.charting-page .features-list {
  width: 515.79px;
  height: 168px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.charting-page .features-list-item {
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: #000000;
  font-size: var(--desktop-body-font-size);
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
  font-style: var(--desktop-body-font-style);
}
*/
.charting-page .features-list-text {
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: #000000;
  font-size: var(--desktop-body-font-size);
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
  font-style: var(--desktop-body-font-style);
}

.charting-page .features-chart-col {
  display: flex;
  flex-direction: column;
  width: 466.66px !important;
  height: 418px;
  align-items: flex-start;
  gap: 8px;
  padding: 63px 44px;
  position: relative;
  background-color: #3871bf;
  border-radius: 3.66px;
}

.charting-page .bar-chart {
  position: relative;
  width: 428.52px;
  height: 289.71px;
  margin-right: -49.85px;
}

.charting-page .bar-chart-grid-1 {
  position: absolute;
  top: 29px;
  left: 0;
  width: 377px;
  height: 1px;
}

.charting-page .bar-chart-grid-2 {
  position: absolute;
  top: 106px;
  left: 0;
  width: 377px;
  height: 1px;
}

.charting-page .bar-chart-grid-3 {
  position: absolute;
  top: 182px;
  left: 0;
  width: 377px;
  height: 1px;
}

.charting-page .bar-chart-grid-4 {
  position: absolute;
  top: 264px;
  left: 0;
  width: 377px;
  height: 1px;
}

.charting-page .bar-chart-bar-1 {
  position: absolute;
  top: 22px;
  left: 0;
  width: 324px;
  height: 17px;
  background-color: #75c3bc;
}

.charting-page .bar-chart-bar-2 {
  position: absolute;
  top: 98px;
  left: 0;
  width: 249px;
  height: 17px;
  background-color: #75c3bc;
}

.charting-page .bar-chart-bar-3 {
  position: absolute;
  top: 174px;
  left: 0;
  width: 290px;
  height: 17px;
  background-color: #75c3bc;
}

.charting-page .bar-chart-bar-4 {
  position: absolute;
  top: 256px;
  left: 0;
  width: 152px;
  height: 17px;
  background-color: #75c3bc;
}

.charting-page .bar-chart-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 66px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 10.4px;
  letter-spacing: 0;
  line-height: 15.6px;
}

.charting-page .bar-chart-tick-1 {
  position: absolute;
  top: 42px;
  left: 0;
  width: 6px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-tick-2 {
  position: absolute;
  top: 119px;
  left: 0;
  width: 6px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-tick-3 {
  position: absolute;
  top: 195px;
  left: 0;
  width: 6px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-tick-4 {
  position: absolute;
  top: 277px;
  left: 0;
  width: 6px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-1a {
  position: absolute;
  top: 42px;
  left: 85px;
  width: 11px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-2a {
  position: absolute;
  top: 119px;
  left: 70px;
  width: 6px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-3a {
  position: absolute;
  top: 195px;
  left: 79px;
  width: 17px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-4a {
  position: absolute;
  top: 277px;
  left: 79px;
  width: 15px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-1b {
  position: absolute;
  top: 42px;
  left: 174px;
  width: 15px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-2b {
  position: absolute;
  top: 119px;
  left: 141px;
  width: 10px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-3b {
  position: absolute;
  top: 195px;
  left: 168px;
  width: 21px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-4b {
  position: absolute;
  top: 277px;
  left: 168px;
  width: 18px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-1c {
  position: absolute;
  top: 42px;
  left: 267px;
  width: 17px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-2c {
  position: absolute;
  top: 119px;
  left: 215px;
  width: 10px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-3c {
  position: absolute;
  top: 195px;
  left: 262px;
  width: 21px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-4c {
  position: absolute;
  top: 277px;
  left: 262px;
  width: 17px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-1d {
  position: absolute;
  top: 42px;
  left: 360px;
  width: 18px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  text-align: right;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-2d {
  position: absolute;
  top: 119px;
  left: 290px;
  width: 11px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  text-align: right;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-3d {
  position: absolute;
  top: 195px;
  left: 352px;
  width: 23px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  text-align: right;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-4d {
  position: absolute;
  top: 277px;
  left: 357px;
  width: 18px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  text-align: right;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-val-5d {
  position: absolute;
  top: 119px;
  left: 365px;
  width: 12px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #75c3bc;
  font-size: 8.7px;
  text-align: right;
  letter-spacing: 0;
  line-height: 13.0px;
}

.charting-page .bar-chart-legend-1 {
  position: absolute;
  top: 76px;
  left: 0;
  width: 37px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 10.4px;
  letter-spacing: 0;
  line-height: 15.6px;
}

.charting-page .bar-chart-legend-2 {
  position: absolute;
  top: 152px;
  left: 0;
  width: 80px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 10.4px;
  letter-spacing: 0;
  line-height: 15.6px;
}

.charting-page .bar-chart-legend-3 {
  position: absolute;
  top: 235px;
  left: 0;
  width: 95px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 10.4px;
  letter-spacing: 0;
  line-height: 15.6px;
}
.chart-showcase-section-wrapper{
  gap:32px !important
}
.chart-showcase-section{
  background: white;
    padding: 32px !important; border-radius: 4px; gap:32px !important;
}
.chart-showcase-heading{
  /* mobile-first defaults — let it flow naturally */

  text-align: center;
    margin: 0 auto;
    padding-bottom: 52px;
}
@media (min-width: 1024px) {
  .chart-showcase-heading {
   width: 667px !important;
    text-align: center;
    margin: 0 auto;
  }
}

.highlight-block-button{
  position: relative;
}
.chart-showcase-section-subheading
{
font-size: 16px;
}
.chart-showcase-section .is-layout-flex {
    gap: 6px;
    margin-bottom: 0px;
}


.charting-page .about-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  padding: 42px var(--container-lr-padding) !important;
}

.charting-page .about-heading {
  position: relative;
  width: 545px;
  margin-top: -1.00px;
  font-family: var(--desktop-h2-font-family);
  font-weight: var(--desktop-h2-font-weight);
  color: #000000;
  font-size: var(--desktop-h2-font-size);
  letter-spacing: var(--desktop-h2-letter-spacing);
  line-height: var(--desktop-h2-line-height);
  font-style: var(--desktop-h2-font-style);
}

.charting-page .about-body {

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-items: flex-start;
}

.charting-page .value-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 88px 0px 160px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.charting-page .value-header {
  display: flex;
  flex-direction: column;
  width: 843px;
  align-items: center;
  gap: 18px;
  position: relative;
  flex: 0 0 auto;
}

.charting-page .value-heading {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--desktop-h1-font-family);
  font-weight: var(--desktop-h1-font-weight);
  color: transparent;
  font-size: var(--desktop-h1-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h1-letter-spacing);
  line-height: var(--desktop-h1-line-height);
  font-style: var(--desktop-h1-font-style);
}

.charting-page .value-subheading {
  position: relative;
  width: 514px;
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: #000000;
  font-size: var(--desktop-body-font-size);
  text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
  font-style: var(--desktop-body-font-style);
}

.charting-page .value-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px 19px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.charting-page .value-card-sm {
  display: flex;
  flex-direction: column;
  width: 413px;
  height: 325px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px;
  position: relative;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #ffffff4c;
}

.charting-page .value-card-top {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.charting-page .value-icon {
  position: relative;
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
}

.charting-page .value-card-title-1 {
  position: relative;
  width: 344px;
  font-family: var(--desktop-h4-font-family);
  font-weight: var(--desktop-h4-font-weight);
  color: #000000;
  font-size: var(--desktop-h4-font-size);
  letter-spacing: var(--desktop-h4-letter-spacing);
  line-height: var(--desktop-h4-line-height);
  font-style: var(--desktop-h4-font-style);
}

.charting-page .value-card-body {
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-body-small-font-family);
  font-weight: var(--desktop-body-small-font-weight);
  color: #000000;
  font-size: var(--desktop-body-small-font-size);
  letter-spacing: var(--desktop-body-small-letter-spacing);
  line-height: var(--desktop-body-small-line-height);
  font-style: var(--desktop-body-small-font-style);
}

.charting-page .value-card-lg {
  display: flex;
  flex-direction: column;
  width: 644px;
  height: 325px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px;
  position: relative;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #ffffff4c;
}

.charting-page .value-card-title-2 {
  position: relative;
  width: 340px;
  font-family: var(--desktop-h4-font-family);
  font-weight: var(--desktop-h4-font-weight);
  color: #000000;
  font-size: var(--desktop-h4-font-size);
  letter-spacing: var(--desktop-h4-letter-spacing);
  line-height: var(--desktop-h4-line-height);
  font-style: var(--desktop-h4-font-style);
}

.charting-page .value-card-body-2 {
  position: relative;
  width: 415px;
  font-family: var(--desktop-body-small-font-family);
  font-weight: var(--desktop-body-small-font-weight);
  color: #000000;
  font-size: var(--desktop-body-small-font-size);
  letter-spacing: var(--desktop-body-small-letter-spacing);
  line-height: var(--desktop-body-small-line-height);
  font-style: var(--desktop-body-small-font-style);
}

.charting-page .value-card-md {
  display: flex;
  flex-direction: column;
  width: 347px;
  height: 325px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px;
  position: relative;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #ffffff4c;
}

.charting-page .value-card-title-3 {
  position: relative;
  width: 199px;
  font-family: var(--desktop-h4-font-family);
  font-weight: var(--desktop-h4-font-weight);
  color: #000000;
  font-size: var(--desktop-h4-font-size);
  letter-spacing: var(--desktop-h4-letter-spacing);
  line-height: var(--desktop-h4-line-height);
  font-style: var(--desktop-h4-font-style);
}

.charting-page .value-card-sm-2 {
  display: flex;
  flex-direction: column;
  width: 346px;
  height: 325px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px;
  position: relative;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #ffffff4c;
}

.charting-page .value-card-title-4 {
  position: relative;
  width: 270px;
  font-family: var(--desktop-h4-font-family);
  font-weight: var(--desktop-h4-font-weight);
  color: #000000;
  font-size: var(--desktop-h4-font-size);
  letter-spacing: var(--desktop-h4-letter-spacing);
  line-height: var(--desktop-h4-line-height);
  font-style: var(--desktop-h4-font-style);
}

.charting-page .value-card-body-3 {
  position: relative;
  width: 270px;
  font-family: var(--desktop-body-small-font-family);
  font-weight: var(--desktop-body-small-font-weight);
  color: #000000;
  font-size: var(--desktop-body-small-font-size);
  letter-spacing: var(--desktop-body-small-letter-spacing);
  line-height: var(--desktop-body-small-line-height);
  font-style: var(--desktop-body-small-font-style);
}

.charting-page .value-card-title-5 {
  position: relative;
  width: 261px;
  font-family: var(--desktop-h4-font-family);
  font-weight: var(--desktop-h4-font-weight);
  color: #000000;
  font-size: var(--desktop-h4-font-size);
  letter-spacing: var(--desktop-h4-letter-spacing);
  line-height: var(--desktop-h4-line-height);
  font-style: var(--desktop-h4-font-style);
}

.charting-page .cta-section__heading{
max-width: 108% !important;
}

.charting-page  .cta-section__bar-1 {
  position: absolute;
  top: 982px;
    left: 176px;
    width: 284px;
    height: 624px;
  background-color: var(--medium-blue);
}

.charting-page  .cta-section__bar-2 {
  position: absolute;
  top: 878px;
    left: 1px;
    width: 248px;
    height: 728px;
  background-color: var(--medium-blue);
}

.charting-page  .cta-section__bar-3 {
  position: absolute;
  top: 1026px;
    left: 460px;
    width: 366px;
    height: 546px;
  background-color: var(--medium-blue);
}

.charting-page  .cta-section__bar-4 {
  position: absolute;
  top: 947px;
    left: 872px;
    width: 288px;
    height: 659px;
  background-color: var(--medium-blue);
}

.charting-page  .cta-section__bar-5 {
  position: absolute;
     top: 1px;
    left: 1059px;
    width: 287px;
    height: 707px;
}
/* mapsa page */
.charting-page.map-page  .cta-section__bar-1 {
 position: absolute;
    top: 1056px;
    left: 176px;
    width: 388px;
    height: 624px;
}
.charting-page.map-page  .cta-section__bar-2 {
 position: absolute;
    top: 908px;
    left: 1px;
    width: 222px;
    height: 728px;
}

.charting-page.map-page  .cta-section__bar-3 {
 position: absolute;
    top: 1094px;
    left: 563px;
    width: 366px;
    height: 546px;
}

.charting-page.map-page  .cta-section__bar-4 {
  position: absolute;
    top: 1012px;
    left: 843px;
    width: 237px;
    height: 659px;
}

.charting-page.map-page  .cta-section__bar-5 {
  position: absolute;
     top: 1px;
    left: 1059px;
    width: 287px;
    height: 707px;

}
/* mapsa page*/
.charting-page .cta-section {
  display: flex;

  align-items: center;
  gap: 8px;
 /* padding: 40px;flex-direction: column;*/
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.charting-page .cta-inner {
  display: flex;
  flex-direction: column;
  height: 400px;
  align-items: center;
  gap: 20px;
  padding: 76px 221px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--blue);
  border-radius: 3.65px;
  overflow: hidden;
}

.charting-page .cta-heading {
  position: relative;
  width: 858px;
  margin-top: -0.91px;
  font-family: var(--desktop-h2-font-family);
  font-weight: var(--desktop-h2-font-weight);
  color: transparent;
  font-size: var(--desktop-h2-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h2-letter-spacing);
  line-height: var(--desktop-h2-line-height);
  font-style: var(--desktop-h2-font-style);
}

.charting-page .cta-heading-text {
  color: #ffffff;
  letter-spacing: var(--desktop-h2-letter-spacing);
  font-family: var(--desktop-h2-font-family);
  font-style: var(--desktop-h2-font-style);
  font-weight: var(--desktop-h2-font-weight);
  line-height: var(--desktop-h2-line-height);
  font-size: var(--desktop-h2-font-size);
}

.charting-page .cta-heading-accent {
  color: #0e0e0e;
  letter-spacing: var(--desktop-h2-letter-spacing);
  font-family: var(--desktop-h2-font-family);
  font-style: var(--desktop-h2-font-style);
  font-weight: var(--desktop-h2-font-weight);
  line-height: var(--desktop-h2-line-height);
  font-size: var(--desktop-h2-font-size);
}

.charting-page .cta-body {
  position: relative;
  width: 635px;
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: #ffffff;
  font-size: var(--desktop-body-font-size);
  text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
  font-style: var(--desktop-body-font-style);
}

.charting-page .cta-btn {
  display: inline-flex;
  height: 30.1px;
  align-items: center;
  justify-content: center;
  gap: 7.3px;
  padding: 5.47px 11.86px;
  position: relative;
  margin-bottom: -0.10px;
  background-color: #ffffff;
  border-radius: 3.65px;
}

.charting-page .cta-btn-label {
  position: relative;
  width: fit-content;
  margin-top: -0.33px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
}

.charting-page .cta-decoration {
  position: absolute;
  top: -644px;
  left: -30px;
  width: 1436px;
  height: 1606px;
}

.charting-page .cta-deco-bar-1 {
  position: absolute;
  top: 982px;
  left: 287px;
  width: 288px;
  height: 624px;
  background-color: var(--medium-blue);
}

.charting-page .cta-deco-bar-2 {
  position: absolute;
  top: 878px;
  left: 1px;
  width: 287px;
  height: 728px;
  background-color: var(--medium-blue);
}

.charting-page .cta-deco-bar-3 {
  position: absolute;
  top: 1036px;
  left: 574px;
  width: 287px;
  height: 546px;
  background-color: var(--medium-blue);
}

.charting-page .cta-deco-bar-4 {
  position: absolute;
  top: 947px;
  left: 862px;
  width: 288px;
  height: 659px;
  background-color: var(--medium-blue);
}

.charting-page .cta-deco-bar-5 {
  position: absolute;
  top: 1px;
  left: 1149px;
  width: 287px;
  height: 707px;
  background-color: var(--medium-blue);
}

.charting-page .charting-page-divider {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.charting-page .footer {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 820px;
  background-color: var(--background);
}

.charting-page .footer-divider-1 {
  position: absolute;
  top: 299px;
  left: 0;
  width: 1440px;
  height: 1px;
  object-fit: cover;
}

.charting-page .footer-divider-2 {
  position: absolute;
  top: 400px;
  left: 0;
  width: 1440px;
  height: 1px;
  object-fit: cover;
}

.charting-page .footer-divider-3 {
  position: absolute;
  top: 501px;
  left: 0;
  width: 1440px;
  height: 1px;
  object-fit: cover;
}

.charting-page .footer-divider-4 {
  position: absolute;
  top: 198px;
  left: 0;
  width: 1440px;
  height: 1px;
  object-fit: cover;
}

.charting-page .footer-divider-5 {
  position: absolute;
  top: 97px;
  left: 0;
  width: 1440px;
  height: 1px;
  object-fit: cover;
}

.charting-page .footer-deco-col-1 {
  position: absolute;
  top: 199px;
  left: 360px;
  width: 360px;
  height: 621px;
  background-color: var(--blue);
}

.charting-page .footer-deco-col-2 {
  position: absolute;
  top: 502px;
  left: 0;
  width: 360px;
  height: 318px;
  background-color: var(--blue);
}

.charting-page .footer-deco-col-3 {
  position: absolute;
  top: 300px;
  left: 720px;
  width: 360px;
  height: 520px;
  background-color: var(--blue);
}

.charting-page .footer-deco-col-4 {
  position: absolute;
  top: 1px;
  left: 1080px;
  width: 360px;
  height: 820px;
  background-color: var(--blue);
}

.charting-page .footer-trial-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 385px;
  left: 403px;
}

.charting-page .footer-trial-btn {
  display: flex;
  width: 81px;
  background-color: #071c21;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  position: relative;
  border-radius: 4px;
}

.charting-page .footer-trial-label {
  position: relative;
  width: fit-content;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #ffffff;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
}

.charting-page .footer-products-col {
  display: flex;
  flex-direction: column;
  width: 83px;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 230px;
  left: 403px;
}

.charting-page .footer-nav-heading {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  opacity: 0.5;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #ffffff;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.charting-page .footer-nav-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.charting-page .footer-nav-link-primary {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #ffffff;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.charting-page .footer-nav-link {
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #ffffff;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.charting-page .footer-dev-col {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 230px;
  left: 573px;
}

.charting-page .footer-nav-demos {
  position: relative;
  width: 99px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #ffffff;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.charting-page .footer-compare-col {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 346px;
  left: 755px;
}

.charting-page .footer-compare-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.charting-page .footer-company-col {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 346px;
  left: 940px;
}

.charting-page .footer-connect-label {
  position: absolute;
  top: 346px;
  left: 1128px;
  width: 99px;
  opacity: 0.5;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #ffffff;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.charting-page .footer-community {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 378px;
  left: 1128px;
}

.charting-page .footer-community-title {
  position: relative;
  width: 212px;
  margin-top: -1.00px;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  color: #ffffff;
  font-size: var(--desktop-h5-font-size);
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
  font-style: var(--desktop-h5-font-style);
}

.charting-page .footer-discord-btn {
  display: inline-flex;
  background-color: #ffffff;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  position: relative;
  border-radius: 4px;
}

.charting-page .footer-discord-label {
  position: relative;
  width: fit-content;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #071c21;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
}

.charting-page .footer-discord-icon {
  position: relative;
  width: 25px;
  height: 25px;
  margin-top: -2.00px;
  margin-bottom: -2.00px;
  aspect-ratio: 1;
  object-fit: cover;
}

.charting-page .footer-logo {
  position: absolute;
  top: 651px;
  left: 22px;
  width: 1393px;
  height: 152px;
}
/* ============================================================
   SUNBURST CHART CARD — Pixel-perfect from Figma specs
   Frame 1460 (outer card) + Frame 1461 (label bar)
   ============================================================ */

/* ---------- Section wrapper ---------- */
.chart-sunburst-charts {
  display: flex;
  flex-direction: row;       /* always side-by-side */
  flex-wrap: nowrap;         /* prevent wrapping to new row */
  align-items: stretch;      /* cards match each other's height */
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Outer card (Frame 1460 — warm parchment shell) ---------- */
.chart-sunburst-charts-card {
  box-sizing: border-box;
  position: relative;

  /* Equal-width columns — each card takes exactly half the row */
  flex: 1 1 0;               /* grow + shrink equally, basis 0 */
  min-width: 0;              /* allow shrinking below content size */

  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 4px;
  gap: 3px;

  /*height: 285px;

   Dark White 2 — warm parchment */
  background: #F5F1E7;

  /* Border */
  border: 0.87px solid #E9E0CC;
  border-radius: 3.47px;

  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.chart-sunburst-charts-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* ---------- Inner white chart area ---------- */
.chart-sunburst-charts-card__chart-area {
  position: relative;
  width: 100%;
  background: #FFFFFF;
  border-radius: 3.47px;

  flex: 1 1 auto;            /* fills remaining card height */
  align-self: stretch;
  min-height: 0;

  overflow: hidden;
}

/* ---------- Chart title (top-left label over chart) ---------- */
.chart-sunburst-charts-card__chart-title {
  position: absolute;
  left: 6px;
  top: 4px;
  z-index: 1;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 140%;
  letter-spacing: -0.01em;
  color: #000000;
  opacity: 0.6;

  white-space: nowrap;
}

/* ---------- FusionCharts target div — any unique id ---------- */
.chart-sunburst-charts-card__chart-area > [id^="chart-container"],
.chart-sunburst-charts-card__chart-area > div[id] {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

/* ---------- Bottom label bar (Frame 1461) ---------- */
.chart-sunburst-charts-card__label {
  box-sizing: border-box;

  flex-direction: row;
  align-items: center;
  justify-content: center;   /* center label text per design */
  padding: 10px 8px;
  gap: 10px;

  width: 100%;
  height: 44.96px;           /* fixed per Figma */
  flex: 0 0 44.96px;         /* don't grow or shrink */
  align-self: stretch;
}

/* ---------- Label text ---------- */

.chart-sunburst-charts-card__label,
.chart-sunburst-charts-card__label span {
  margin: 0;
  padding: 0;
  font-family: 'GT Standard Trial', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12.13px;
  line-height: 150%;
  color: #000000;
  flex: none;
  order: 0;
  flex-grow: 0;
  text-align: left;
}

/* ---------- Responsive: stack on small screens ---------- */
@media (max-width: 640px) {
  .chart-sunburst-charts {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .chart-sunburst-charts-card {
    flex: 1 1 100%;
    height: 285px;
  }
}



/* Maps */
.map-page .license-card-description{

  padding: 0px 0px !important;
}
.map-page .license-card{
  font-size: var(--desktop-tags-font-size);
}
.map-page .license-card-wrapper{
width: 85% !important;
}


  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500&display=swap');


  :root {
    --data-driven-green:        #1ADACD;
    --data-driven-green-dark:   #29706E;
    --data-driven-green-darker: #206060;
    --data-driven-black:        #000000;
  }



  /* ── Section wrapper ── */
  .data-driven {
    position: relative;
    width: 100%;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(80px, 15vw, 256px) clamp(20px, 5vw, 80px);
    gap: clamp(16px, 2vw, 24px);
    isolation: isolate;
    overflow: hidden;
  }

  /* ── SVG background layers ── */
  .data-driven__svg-v3,
  .data-driven__svg-v4,
  .data-driven__svg-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
  }

  /* ── Path draw-on animations ── */
  .data-driven__path--v3 {
    stroke-dasharray: 6000;
    stroke-dashoffset: 6000;
    animation: dataDrivenDrawV3 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .data-driven__path--v4 {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: dataDrivenDrawV3 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
  }

  @keyframes dataDrivenDrawV3 {
    to { stroke-dashoffset: 0; }
  }

  /* ── Dot pop-in ── */
  .data-driven__dot {
    opacity: 0;
    animation: dataDrivenDotPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  .data-driven__dot--1  { animation-delay: 1.0s; }
  .data-driven__dot--2  { animation-delay: 1.1s; }
  .data-driven__dot--3  { animation-delay: 1.2s; }
  .data-driven__dot--4  { animation-delay: 1.3s; }
  .data-driven__dot--5  { animation-delay: 1.4s; }
  .data-driven__dot--6  { animation-delay: 1.5s; }
  .data-driven__dot--7  { animation-delay: 1.6s; }
  .data-driven__dot--8  { animation-delay: 1.7s; }
  .data-driven__dot--9  { animation-delay: 1.8s; }
  .data-driven__dot--10 { animation-delay: 1.9s; }
  .data-driven__dot--11 { animation-delay: 2.0s; }
  .data-driven__dot--12 { animation-delay: 2.1s; }

  @keyframes dataDrivenDotPop {
    0%   { opacity: 0; transform: scale(0); }
    60%  { opacity: 1; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* ── Content block ── */
  .data-driven__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.5vw, 16px);
    width: min(754px, 90vw);
    opacity: 0;
    transform: translateY(20px);
    animation: dataDrivenFadeUp 0.8s ease 0.4s forwards;
  }

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

  /* ── Headline ── */
  .data-driven__headline {
    width: 100%;
    font-weight: 500;
    font-size: clamp(28px, 4.5vw, 62px);
    line-height: 100%;
    text-align: center;
    letter-spacing: -0.02em;
    color: var(--data-driven-black);
  }

  .data-driven__headline-accent {
    color: var(--data-driven-green);
  }


  /* ── Body copy ── */
  .data-driven__body {
    width: 100%;
    font-weight: 400;
    font-size: clamp(14px, 1.3vw, 18px);
    line-height: 150%;
    text-align: center;
    letter-spacing: -0.01em;
    color: var(--data-driven-black);
  }

  /* ── CTA Button ── */
  .data-driven__cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 6px 13px;
    gap: 8px;
    height: clamp(28px, 3vw, 33px);
    background: var(--data-driven-green);
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 400;
    font-size: clamp(12px, 1vw, 14px);
    line-height: 130%;
    color: var(--data-driven-black);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
  }
  .data-driven__cta:hover { opacity: 0.82; }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .data-driven { min-height: 100svh; }
  }

div.wp-block-buttons.grid-hero-btn-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: auto !important;
}

div.wp-block-buttons.grid-hero-btn-wrapper .wp-block-button {
  width: auto !important;
  flex: 0 0 auto !important;
}