@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

/* @font-face {
  font-family: "comfortaaregular";
  src: url("../fonts/comfortaa-variablefont_wght-webfont.woff2") format("woff2"),
    url("../fonts/comfortaa-variablefont_wght-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
} */

.maia {
  background: rgb(15,19,59);
  background: radial-gradient(circle, rgba(15,19,59,1) 0%, rgba(15,18,43,1) 100%);
  color: #fff;
  font-family: "Comfortaa", sans-serif;
  position: relative;
  padding: 80px 0;
}

.maia > .maia-container{
  width: 900px;
  margin: auto;
  position: relative;
  z-index: 9;
  transform: scale(150%);
  transform-origin: 50% 40%;
}

.maia_logo{
  position: absolute;
  right: 20px;
  margin-top: 20px;
  width: 10vw;
  max-width: 300px;
  z-index: 1;
}

.maia_bgtext{
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 85vw;
  max-width: 1280px;
}

.maia a, .maia a:hover, .maia a:focus, .maia a:active{
  color: #FFF !important;
  text-decoration: none !important;
}

.popup-block a span{
    color: #000 !important;
}

.maia svg .st2 {
  opacity: 0;
  transition: all 300ms;
}

.popup-block{
  opacity: 0%;
  position: absolute;
  z-index: 0;
  background-color: #ffffff;
  color: #000;
  transition: all 0.3s ease;

  border-radius: 0.8em !important;
  padding: 0.8em 1em !important;
  width: fit-content;
  max-width: 300px;
  line-height: 1.35em;
  font-size: 9px;
  padding: 1.5em;
}

.popup-block.a{ top: 165px; left: 555px;}
.popup-block.b{ top: 245px; left: 545px;}
.popup-block.c{ top: 325px; left: 490px;}

.popup-block.d{ top: 325px; right: 520px;}
.popup-block.e{ top: 245px; right: 580px;}
.popup-block.f{ top: 165px; right: 590px;}


.st3{
  fill: #ffffff;
  position: absolute;
  font-size: 16px;
  font-weight: 900;
  transition: all 0.3s ease;
  z-index: 1;
}

.st3.a{ top: 140px; left: 545px; transform-origin: bottom left;}
.st3.b{ top: 220px; left: 570px; transform-origin: bottom left;}
.st3.c{ top: 300px; left: 510px; transform-origin: bottom left;}

.st3.d{ top: 300px; right: 540px; transform-origin: bottom right;}
.st3.e{ top: 220px; right: 600px; transform-origin: bottom right;}
.st3.f{ top: 140px; right: 580px; transform-origin: bottom right;}


.maia svg .st2 {
  opacity: 0; /* Initially hide all elements */
  transition: opacity 0.5s ease; /* Smooth transition for opacity change */
}

  .maia-mobile-link{
    display:none;
  }


/* ================= Mobile ish ================= */

@media only screen and (max-width: 1200px) {
  
  .maia > .maia-container{
    transform: scale(1.20);
  }
  .st3{
    font-size: 16px;
  }
  .popup-block{
    font-size: 12px;
    max-width: 270px;
  }
}

@media only screen and (max-width: 900px) {
 
  .maia-mobile-link{
        display: none;
        color: #E9672E;
        top: -20px;
        left: 50%;
        transform: translate(-50%);
        position: absolute;
        text-align: center;
        margin: auto;
        width: fit-content;
  }
  
  .st3 a, .st2 a{
    pointer-events: none; 
    cursor: default;
  }
  
    .st3.highlighted a {
    pointer-events: unset;
    cursor: pointer;
    color: #E9672E !important;
    text-decoration: underline !important;
}
  
  .maia > .maia-container{
    width: 500px;
    margin: auto;
    position: relative;
    top: 50px;
    left: 10px;
/*     overflow-x:clip; */
  }

  .maia svg {
    transform: scale(1.5);
  }

  .popup-block {
  top: unset !important;
  right: unset !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: 75%;
  max-width: 500px;
  margin-left: -10px;
  text-align: center;
  z-index: 0;
  }

  .st3{
    fill: #ffffff;
    position: absolute;
    font-size: 14px;
    font-weight: 900;
    transition: all 0.3s ease;
  }
  
  .st3.a{ top: 40px; left: 315px; transform-origin: bottom left;}
  .st3.b{ top: 100px; left: 350px; transform-origin: left;}
  .st3.c{ top: 170px; left: 300px; transform-origin: top left;}
  
  .st3.d{ top: 170px; right: 335px; transform-origin: top right;}
  .st3.e{ top: 100px; right: 380px; transform-origin: right;}
  .st3.f{ top: 40px; right: 345px; transform-origin: bottom right;}
  
}

@media only screen and (max-width: 500px) {
  .maia > .maia-container{
    width: 320px;
    transform: scale(1.20);
    overflow-x: clip;
  }
  
  .st3{
        font-size: 11px;
  }
  
  .st3.a{ top: 20px; left: 200px; transform-origin: bottom left;}
  .st3.b{ top: 60px; left: 220px; transform-origin: left;}
  .st3.c{ top: 100px; left: 200px; transform-origin: top left;}
  
  .st3.d{ top: 100px; right: 220px; transform-origin: top right;}
  .st3.e{ top: 60px; right: 240px; transform-origin: right;}
  .st3.f{ top: 20px; right: 220px; transform-origin: bottom right;}
  }
}

/* Hubspot dynamic content */
.only_first-line tspan:nth-child(2){
 display: none;
}

.hide_third-line tspan:nth-child(3){
 display: none;
}

.only_first-line .popup-block{
  height: 60px !important;
}

.hide_third-line .popup-block{
  height: 85px !important;
}