/* From Uiverse.io by Yaya12085 */ 
.cardb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  width: 600px;  height: 200px;

  overflow: hidden;

  padding: 2rem;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 3rem;
  transition: 0.3s;}




.headerb {
  position: relative;
  background-clip: border-box;
  margin-top: 1.5rem;
  margin-left: 0rem;
  margin-right: 0rem;
  border-radius: 0.75rem;
  background-color: rgb(33 150 243);
  box-shadow: 0 10px 15px -3px rgba(33,150,243,.4),0 4px 6px -4px rgba(33,150,243,.4);
  height: 14rem;  

}

.infob {
  border: none;
  padding: 1.5rem;
  text-align: center;flex-direction: row;
}

.titleb {
  color: rgb(38 50 56);
  letter-spacing: 0;
  line-height: 1.375;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.footerb {
  padding: 1rem ;
  border: 1px solid rgb(236 239 241);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 140, 255, 0.082);margin:-32px -32px;
}

.tagb {
  font-weight: 300;
  font-size: .75rem;
  display: block;
}

.actionb {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none;
  outline: none;
  box-shadow: 0 4px 6px -1px rgba(33,150,243,.4),0 2px 4px -2px rgba(33,150,243,.4);
  color: rgb(255 255 255);
  text-transform: uppercase;
  font-weight: 700;
  font-size: .75rem;
  padding: 0.75rem 1.5rem;
  background-color: rgb(33 150 243);
  border-radius: 0.5rem;
}


  
  
  
.smb  .a { color: #fe7627;}
  .smb{margin-top: 0.8rem;
  margin-bottom: 0.8rem;}
  

.p{margin-bottom: 0.5rem;}


.pp i {color: #fe7627;
  ;}


.pp{margin-bottom: 0.5;}




.imgee h4{margin-bottom: 1rem;}


.lists {
  margin-bottom: 1.5rem;
  flex: 1 1 0%;
  color: #00000090;}

.lists .list {
  margin-bottom: 0.5rem;
  display: flex;
  margin-left: 0rem;justify-content: left;

}

.lists .list svg {
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  margin-right: 0.5rem;
  color: #000000;
}


































.card__herom img{border-radius:0.5rem 0.5rem 0 0;height: 300px;}



/* From Uiverse.io by Creatlydev */ 
.cardm {
  margin: auto;
  width: min(400px, 100%);
  height:  min(700px, 100%);

  background-color: #fefefe;
  border-radius: 1rem;
  padding: 0.5rem;
  color: #141417;
}
.card__herom {
  background: rgba(252, 126, 9, 0.089);  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.5rem;
  font-size: 0.875rem;



}

.cardm i{color: orange;}

.card_pdois{  font-size: 1rem; font-weight: 400;color:#6b7280;
}


.card__job-titlem {
  font-size: 1.2rem;font-weight: 600;line-height: 2.5rem;

}
.card__hero-headerm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  font-weight: 700;
}
.card__footerm {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0.75rem;
  row-gap: 1rem;
  font-weight: 700;
  font-size: 0.875rem;
}
@media (min-width: 340px) {
  .card__footerm {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }}




  @media (max-width: 1150px) {
    .infoz { min-height: 2rem; max-height: 22rem; }
    }
  


    @media (max-width: 1126px) {
      .infoz { min-height: 2rem; max-height: 23rem; }
      }
    
      @media (max-width: 1091px) {
        .infoz { min-height: 2rem; max-height: 24rem; }
        }

        @media (max-width: 1066px) {
          .infoz { min-height: 2rem; max-height: 25rem; }
          }

          @media (max-width: 973px) {
            .infoz { min-height: 2rem; max-height: 26rem; }
            }

            @media (max-width: 959px) {
              .infoz { min-height: 2rem; max-height: 28rem; }
              }
  
              @media (max-width: 921px) {
                .infoz { min-height: 2rem; max-height: 30rem; }
                }

  @media (max-width: 520px) {
    .infoz {
     max-height: 50rem;
      }
    }

    @media (max-width: 700px) {
      .customer-logos 
      {
       scale: 2;
        }
      }

      @media (max-width: 500px) {
        .customer-logos 
        {
         scale: 5;margin-top: 5rem;
          }
        }


        @media (max-width: 400px) {
          .customer-logos 
          {
           scale: 5;margin-top: 3rem;
            }
          }


.card__job-summarym {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.75rem;
}
.card__btnm {
  width: 100%;
  font-weight: 400;
  display: block;
  text-align: center;
  padding: 0.5rem 1.25rem;
  border-radius: 1rem;
  background-color: #141417;
  color: #fff;
  font-size: 1rem;
}
@media (min-width: 340px) {
  .card__btnm {
    width: max-content;
  }
}



















/* From Uiverse.io by Gaurav-WebDev */ 
.cards {
  display: flex;
  flex-direction: column;
  gap: 15px; 
}






.cards .card p.tip {
  font-size: 1em;
  font-weight: 700;
}

.cards .card p.second-text {
  font-size: 0.7em;
}
















/* From Uiverse.io by kamehame-ha */ 
.light-button button.bt {
  position: relative;
  height: 800px;
  display: flex;
  align-items: center;
  outline: none;
  background: none;
  border: none;
  cursor: pointer; transform: translateY(-300px);
}

.light-button button.bt .button-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 15px;
  box-shadow: 20px 20px 15px 0 #ababab4d;
  cursor: pointer;
}

.light-button button.bt .button-holder svg {
  height: 50px;
  fill: #0f0f0f;
  transition: 300ms;
}

.light-button button.bt .light-holder {
  position: absolute;
  height: 400px;
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;transform: translatex(90px);
}

.light-button button.bt .light-holder .dot {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: #0a0a0a;
  border-radius: 10px;
  z-index: 2;
}

.light-button button.bt .light-holder .light {
  position: absolute;
  top: 0;
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
  background: transparent;
}

.light-button button.bt:hover .button-holder svg {
  fill: rgb(242, 175, 88);
}

.light-button button.bt:hover .button-holder {
  color: rgb(242, 150, 88);
  outline: rgb(121, 88, 242) 2px solid;
  outline-offset: 2px;
}

.light-button button.bt:hover .light-holder .light {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgb(242, 170, 88) 0%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}

.light-button button.bt .light-holder .light {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(88, 101, 242, 1) 0%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}


.light-button button.bt .button-holder {
  color: rgb(242, 150, 88);
  outline: rgb(121, 88, 242) 2px solid;
  outline-offset: 2px;
}

.input__container {
  position: relative;
  background: rgba(255, 255, 255, 0.664);
  padding: 10px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 22px;
  max-width: 400px;
  transition: transform 400ms;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-20deg);
  perspective: -500px; transform: translateY(-200px) translateX(50px);
}

.shadow__input {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
  filter: blur(30px);
  border-radius: 20px;
  background-color: #999cff;
  background-image: radial-gradient(at 85% 51%, hsla(60,60%,61%,1) 0px, transparent 50%),
    radial-gradient(at 74% 68%, hsla(235,69%,77%,1) 0px, transparent 50%),
    radial-gradient(at 64% 79%, hsla(284,72%,73%,1) 0px, transparent 50%),
    radial-gradient(at 75% 16%, hsla(283,60%,72%,1) 0px, transparent 50%),
    radial-gradient(at 90% 65%, hsla(153,70%,64%,1) 0px, transparent 50%),
    radial-gradient(at 91% 83%, hsla(283,74%,69%,1) 0px, transparent 50%),
    radial-gradient(at 72% 91%, hsla(213,75%,75%,1) 0px, transparent 50%);
}

.input__button__shadow {
  cursor: pointer;
  border: none;
  background: none;
  transition: transform 400ms, background 400ms;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  padding: 5px;
}

.input__button__shadow:hover {
  background: rgba(255, 255, 255, 0.411);
}

.input__search {
  width: 100%;
  border-radius: 20px;
  outline: none;
  border: none;
  padding: 8px;
  position: relative;
}

.ladoimagem{justify-content: center;
  align-items: center;display: flex; }
  
  .quad{display:flex;gap:24px;}


  .rsec{display: flex;;}

  .ladoimagem{transform: translatey(400px);}






  

  /* From Uiverse.io by JohnnyCSilva */ 
.carde {
  width: 100%;
  max-width: 750px;
  height: 220px;
  border-radius: 10px 50px 20px 18px;
  display: flex;
  align-items: center;
  justify-content: left;
  backdrop-filter: blur(10px);
  transition: 0.5s ease-in-out;


  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  transition: 0.3s;background-color: #fff; 
  
}

.carde:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: #00838d;
 
  transform: scale(1);
  transition: transform 0.25s ease-out;
}

.carde:hover:before {
  transform: scale(21);
}


.imgee p{color: #6b7280;}

.imge img{
  width: 200px;
  height: 200px;
  margin-left: 10px;
  border-radius: 32px;
  background: linear-gradient(#d7cfcf, #9198e5);filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.3));
}

.carde:hover > .imge img{
  transition: 0.5s ease-in-out;
  background: linear-gradient(#9198e5, #712020);
}

.textBoxe {
  top: 0;
  width:400px;
  margin-left: 20px;
  color: white;
  font-family: 'Poppins' sans-serif;
}

.textContente {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spane {
  font-size: 10px;color: #000;
}

.textContente .h1 {
  font-size: 16px;
  font-weight: bold; color: #000;
}

.textContente .p {
  font-size: 12px;
  font-weight: lighter;justify-content: left;align-items: flex-start;text-align: left; color: #000000;
}





































/* From Uiverse.io by marcelodolza */ 
.buttonw {
  --white: #ffe7ff;
  --purple-100: #f4b1fd;
  --purple-200: #d190ff;
  --purple-300: #c389f2;
  --purple-400: #8e26e2;
  --purple-500: #5e2b83;
  --radius: 18px;

  border-radius: var(--radius);
  outline: none;
  cursor: pointer;
  font-size: 23px;
  font-family: Arial;
  background: transparent;
  letter-spacing: -1px;
  border: 0;
  position: relative;
  width: 220px;
  height: 80px;
  transform: rotate(353deg) skewX(4deg);transform: translateY(-400px);
}

.bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(1px);
}
.bg::before,
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius) * 1.1);
  background: var(--purple-500);
}
.bg::before {
  filter: blur(5px);
  transition: all 0.3s ease;
  box-shadow:
    -7px 6px 0 0 rgb(115 75 155 / 40%),
    -14px 12px 0 0 rgb(115 75 155 / 30%),
    -21px 18px 4px 0 rgb(115 75 155 / 25%),
    -28px 24px 8px 0 rgb(115 75 155 / 15%),
    -35px 30px 12px 0 rgb(115 75 155 / 12%),
    -42px 36px 16px 0 rgb(115 75 155 / 8%),
    -56px 42px 20px 0 rgb(115 75 155 / 5%);
}

.wrap {
  border-radius: inherit;
  overflow: hidden;
  height: 100%;
  transform: translate(6px, -6px);
  padding: 3px;
  background: linear-gradient(
    to bottom,
    var(--purple-100) 0%,
    var(--purple-400) 100%
  );
  position: relative;
  transition: all 0.3s ease;
}

.outline {
  position: absolute;
  overflow: hidden;
  inset: 0;
  opacity: 0;
  outline: none;
  border-radius: inherit;
  transition: all 0.4s ease;
}
.outline::before {
  content: "";
  position: absolute;
  inset: 2px;
  width: 120px;
  height: 300px;
  margin: auto;
  background: linear-gradient(
    to right,
    transparent 0%,
    white 50%,
    transparent 100%
  );
  animation: spin 3s linear infinite;
  animation-play-state: paused;
}

.content {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  height: 100%;
  gap: 16px;
  border-radius: calc(var(--radius) * 0.85);
  font-weight: 600;
  transition: all 0.3s ease;
  background: linear-gradient(
    to bottom,
    var(--purple-300) 0%,
    var(--purple-400) 100%
  );
  box-shadow:
    inset -2px 12px 11px -5px var(--purple-200),
    inset 1px -3px 11px 0px rgb(0 0 0 / 35%);
}
.content::before {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 10;
  width: 80%;
  top: 45%;
  bottom: 35%;
  opacity: 0.7;
  margin: auto;
  background: linear-gradient(to bottom, transparent, var(--purple-400));
  filter: brightness(1.3) blur(5px);
}

.char {
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.char span {
  display: block;
  color: transparent;
  position: relative;
}
.char span:nth-child(5) {
  margin-left: 5px;
}
.char.state-1 span:nth-child(5) {
  margin-right: -3px;
}
.char.state-1 span {
  animation: charAppear 1.2s ease backwards calc(var(--i) * 0.03s);
}
.char.state-1 span::before,
.char span::after {
  content: attr(data-label);
  position: absolute;
  color: var(--white);
  text-shadow: -1px 1px 2px var(--purple-500);
  left: 0;
}
.char span::before {
  opacity: 0;
  transform: translateY(-100%);
}
.char.state-2 {
  position: absolute;
  left: 80px;
}
.char.state-2 span::after {
  opacity: 1;
}

.icon {
  animation: resetArrow 0.8s cubic-bezier(0.7, -0.5, 0.3, 1.2) forwards;
  z-index: 10;
}
.icon div,
.icon div::before,
.icon div::after {
  height: 3px;
  border-radius: 1px;
  background-color: var(--white);
}
.icon div::before,
.icon div::after {
  content: "";
  position: absolute;
  right: 0;
  transform-origin: center right;
  width: 14px;
  border-radius: 15px;
  transition: all 0.3s ease;
}
.icon div {
  position: relative;
  width: 24px;
  box-shadow: -2px 2px 5px var(--purple-400);
  transform: scale(0.9);
  background: linear-gradient(to bottom, var(--white), var(--purple-100));
  animation: swingArrow 1s ease-in-out infinite;
  animation-play-state: paused;
}
.icon div::before {
  transform: rotate(44deg);
  top: 1px;
  box-shadow: 1px -2px 3px -1px var(--purple-400);
  animation: rotateArrowLine 1s linear infinite;
  animation-play-state: paused;
}
.icon div::after {
  bottom: 1px;
  transform: rotate(316deg);
  box-shadow: -2px 2px 3px 0 var(--purple-400);
  background: linear-gradient(200deg, var(--white), var(--purple-100));
  animation: rotateArrowLine2 1s linear infinite;
  animation-play-state: paused;
}

.path {
  position: absolute;
  z-index: 12;
  bottom: 0;
  left: 0;
  right: 0;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  pointer-events: none;
}

.splash {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  stroke-dasharray: 60 60;
  stroke-dashoffset: 60;
  transform: translate(-17%, -31%);
  stroke: var(--purple-300);
}

/** STATES */

.button:hover .words {
  opacity: 1;
}
.button:hover .words span {
  animation-play-state: running;
}

.button:hover .char.state-1 span::before {
  animation: charAppear 0.7s ease calc(var(--i) * 0.03s);
}

.button:hover .char.state-1 span::after {
  opacity: 1;
  animation: charDisappear 0.7s ease calc(var(--i) * 0.03s);
}

.button:hover .wrap {
  transform: translate(8px, -8px);
}

.button:hover .outline {
  opacity: 1;
}

.button:hover .outline::before,
.button:hover .icon div::before,
.button:hover .icon div::after,
.button:hover .icon div {
  animation-play-state: running;
}

.button:active .bg::before {
  filter: blur(5px);
  opacity: 0.7;
  box-shadow:
    -7px 6px 0 0 rgb(115 75 155 / 40%),
    -14px 12px 0 0 rgb(115 75 155 / 25%),
    -21px 18px 4px 0 rgb(115 75 155 / 15%);
}
.button:active .content {
  box-shadow:
    inset -1px 12px 8px -5px rgba(71, 0, 137, 0.4),
    inset 0px -3px 8px 0px var(--purple-200);
}

.button:active .words,
.button:active .outline {
  opacity: 0;
}

.button:active .wrap {
  transform: translate(3px, -3px);
}

.button:active .splash {
  animation: splash 0.8s cubic-bezier(0.3, 0, 0, 1) forwards 0.05s;
}

.button:focus .path {
  animation: path 1.6s ease forwards 0.2s;
}

.button:focus .icon {
  animation: arrow 1s cubic-bezier(0.7, -0.5, 0.3, 1.5) forwards;
}

.char.state-2 span::after,
.button:focus .char.state-1 span {
  animation: charDisappear 0.5s ease forwards calc(var(--i) * 0.03s);
}

.button:focus .char.state-2 span::after {
  animation: charAppear 1s ease backwards calc(var(--i) * 0.03s);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes charAppear {
  0% {
    transform: translateY(50%);
    opacity: 0;
    filter: blur(20px);
  }
  20% {
    transform: translateY(70%);
    opacity: 1;
  }
  50% {
    transform: translateY(-15%);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes charDisappear {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-70%);
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes arrow {
  0% {
    opacity: 1;
  }
  50% {
    transform: translateX(60px);
    opacity: 0;
  }
  51% {
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    transform: translateX(-128px);
    opacity: 1;
  }
}

@keyframes swingArrow {
  50% {
    transform: translateX(5px) scale(0.9);
  }
}

@keyframes rotateArrowLine {
  50% {
    transform: rotate(30deg);
  }
  80% {
    transform: rotate(55deg);
  }
}

@keyframes rotateArrowLine2 {
  50% {
    transform: rotate(330deg);
  }
  80% {
    transform: rotate(300deg);
  }
}

@keyframes resetArrow {
  0% {
    transform: translateX(-128px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes path {
  from {
    stroke: white;
  }
  to {
    stroke-dashoffset: -480;
    stroke: #f9c6fe;
  }
}

@keyframes splash {
  to {
    stroke-dasharray: 2 60;
    stroke-dashoffset: -60;
  }
}








.top-title {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  margin: 1rem 0.5rem;
}

.top-title span {
  font-style: italic;
  font-size: 1.5rem;
}

@media all and (max-width: 479px) {
  .mainSection {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: stretch;
      align-content: stretch;
      width: 100%;
      height: 700px;
      padding: 10px;
  }
  .bal-container {
      margin: 10px 0;
  }
}

@media all and (max-width: 599px) {
  .mainSection {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: stretch;
      align-content: stretch;
      width: 100%;
      height: 800px;
      padding: 10px;
  }
  .bal-container {
      margin: 10px 0;
  }
}

@media all and (min-width: 480px) and (max-width: 768px) {
  .mainSection {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: stretch;
      align-content: stretch;
      width: 100%;
      height: 1000px;
      padding: 10px;
  }
  .bal-container {
      margin: 10px 0;
  }
}

@media all and (min-width: 768px) and (max-width: 959px) {
  .mainSection {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: stretch;
      align-content: stretch;
      width: 100%;
      height: 1100px;
      padding: 10px;
  }
  .bal-container {
      margin: 10px 0;
  }
}

@media all and (min-width: 960px) and (max-width: 1199px) {
  .mainSection {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: stretch;
      align-content: stretch;
      width: 100%;
      height: 500px;
      padding: 10px;
  }
  .bal-container {
      margin: 0 10px;
  }
}

@media all and (min-width: 1199px) {
  .mainSection {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: stretch;
      align-content: stretch;
      width: 100%;
      height: 500px;
      padding: 10px;
  }
  .bal-container {
      margin: 0 10px;
  }
}


/* Before After Container */

.bal-container {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: grab;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bal-after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bal-before {
  display: block;
  position: absolute;
  top: 0;
  /* right: 0; */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  overflow: hidden;
}

.bal-before-inset {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.bal-after img,
.bal-before img {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.bal-beforePosition {
  background: #121212;
  color: #fff;
  left: 0;
  pointer-events: none;
  border-radius: 0.2rem;
  padding: 2px 10px;
}

.bal-afterPosition {
  background: #121212;
  color: #fff;
  right: 0;
  pointer-events: none;
  border-radius: 0.2rem;
  padding: 2px 10px;
}

.beforeLabel {
  position: absolute;
  bottom: 0;
  margin: 1rem;
  font-size: 1em;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.afterLabel {
  position: absolute;
  bottom: 0;
  margin: 1rem;
  font-size: 1em;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}


/* handle and arrow */

.bal-handle {
  height: 41px;
  width: 41px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -21px;
  border: 2px solid #fff;
  border-radius: 1000px;
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 0 10px rgb(12, 12, 12);
}

.handle-left-arrow,
.handle-right-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}

.handle-left-arrow {
  border-right: 6px solid #fff;
  left: 50%;
  margin-left: -17px;
}

.handle-right-arrow {
  border-left: 6px solid #fff;
  right: 50%;
  margin-right: -17px;
}

.bal-handle::before {
  bottom: 50%;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgb(12, 12, 12);
}

.bal-handle::after {
  top: 50%;
  margin-top: 20.5px;
  box-shadow: 0 0 5px rgb(12, 12, 12);
}

.bal-handle::before,
.bal-handle::after {
  content: " ";
  display: block;
  width: 2px;
  background: #fff;
  height: 9999px;
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
}













.statsz .redes .example-2{display: flex;flex-direction: row ;}




























/* From Uiverse.io by zebra76966 */ 
.cardx {
  width: 30px;
  height: 47px;
  background: rgb(255, 255, 255);
  display: flex;
  align-items:flex-end;
  justify-content:last baseline;
  border-radius: 20px;
  position: relative;
  border: 2px solid transparent;
  transition: all 0.5s ease-in-out;padding:0;margin: 0;
 
  
}

.cardx:focus-within {
  background-color: rgba(17, 17, 17, 0.5);
  backdrop-filter: blur(10px);
  border: 2px solid rgb(27, 27, 27);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.cardx a {
  font-size: 34px;
  background-color: transparent;
  width: 50px;
  height: 50px;
  
  border-radius: 100%;
  transition: all 0.2s ease-in;
  border: 0;
  cursor: pointer;color:#fe7627;        filter: drop-shadow(0 2px 8px rgba(248, 62, 6, 0.32));

}

.cardx a:focus {
  background-color: rgb(255, 255, 255);
  margin-bottom: 50%;
}




/* From Uiverse.io by ilkhoeri */ 
.cardw {
  padding: 1rem;
  overflow: hidden;
  border: 1px solid #c5c5c5;
  border-radius: 12px;
  background-color: #d9d9d92f;
  backdrop-filter: blur(8px);
  min-width: 344px;transform: translateY(-450px) translateX(20px); 
}
.wrapw {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 10;
  border: 0.5px solid #525252;
  border-radius: 8px;
  overflow: hidden;
}
.terminalw {
  display: flex;
  flex-direction: column;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}
.headw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  min-height: 40px;
  padding-inline: 12px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #202425;
}
.titlew {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 2.5rem;
  user-select: none;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8e8e8e;
}
.titlew > svg {
  height: 18px;
  width: 18px;
  margin-top: 2px;
  color: #006adc;
}
.copy_togglew {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: 0.65px solid #c1c2c5;
  margin-left: auto;
  border-radius: 6px;
  background-color: #202425;
  color: #8e8e8e;
  cursor: pointer;
}
.copy_togglew > svg {
  width: 20px;
  height: 20px;
}
.copy_togglew:active > svg > path,
.copy_togglew:focus-within > svg > path {
  animation: clipboard-check 500ms linear forwards;
}
.bodyw {
  display: flex;
  flex-direction: column;
  position: relative;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  overflow-x: auto;
  padding: 1rem;
  line-height: 19px;
  color: white;
  background-color: black;
  white-space: nowrap;
}
.prew {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-wrap: nowrap;
  white-space: pre;
  background-color: transparent;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 16px;
}
.prew code:nth-child(1) {
  color: #575757;
}
.prew code:nth-child(2) {
  color: #554be3;
}
.cmdw {
  height: 19px;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
}
.cmdw::before {
  content: attr(data-cmd);
  position: relative;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
  animation: inputs 8s steps(22) infinite;
}
.cmdw::after {
  content: "";
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  border-right: 0.15em solid #e34ba9;
  animation: cursor 0.5s step-end infinite alternate, blinking 0.5s infinite;
}

@keyframes blinking {
  20%,
  80% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0);
  }
}
@keyframes cursor {
  50% {
    border-right-color: transparent;
  }
}
@keyframes inputs {
  0%,
  100% {
    width: 0;
  }
  10%,
  90% {
    width: 58px;
  }
  30%,
  70% {
    width: 215px;
    max-width: max-content;
  }
}
@keyframes clipboard-check {
  100% {
    color: #fff;
    d: path(
      "M 9 5 H 7 a 2 2 0 0 0 -2 2 v 12 a 2 2 0 0 0 2 2 h 10 a 2 2 0 0 0 2 -2 V 7 a 2 2 0 0 0 -2 -2 h -2 M 9 5 a 2 2 0 0 0 2 2 h 2 a 2 2 0 0 0 2 -2 M 9 5 a 2 2 0 0 1 2 -2 h 2 a 2 2 0 0 1 2 2 m -6 9 l 2 2 l 4 -4"
    );
  }
}


















/* From Uiverse.io by vinodjangid07 */ 
.buttons {
  width: 50px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(44, 44, 44);
  border-radius: 50%;
  cursor: pointer;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13);
  border: none;
}

.bells {
  width: 18px;
}

.bells path {
  fill: white;
}

.buttons:hover {
  background-color: rgb(56, 56, 56);
}

.buttons:hover .bells {
  animation: bellRing 0.9s both;
}

/* bell ringing animation keyframes*/
@keyframes bellRing {
  0%,
  100% {
    transform-origin: top;
  }

  15% {
    transform: rotateZ(10deg);
  }

  30% {
    transform: rotateZ(-10deg);
  }

  45% {
    transform: rotateZ(5deg);
  }

  60% {
    transform: rotateZ(-5deg);
  }

  75% {
    transform: rotateZ(2deg);
  }
}

.buttons:active {
  transform: scale(0.8);
}






.custom-shape-divider-top-1724950909 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-1724950909 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 112px;
}

.custom-shape-divider-top-1724950909 .shape-fill {
  fill: #ffffff;
}







.custom-shape-divider-top-1725032640 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-1725032640 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100px;
}

.custom-shape-divider-top-1725032640 .shape-fill {
  fill: #FFFFFF;
}