.elementor-5138 .elementor-element.elementor-element-da282bb{--display:flex;--min-height:350px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--border-radius:50px 50px 50px 50px;}.elementor-5138 .elementor-element.elementor-element-8ab8635{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5138 .elementor-element.elementor-element-4a2b343{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-5138 .elementor-element.elementor-element-de6d843 .elementor-heading-title{font-family:"圓體", Sans-serif;font-size:12px;font-weight:600;line-height:1.5em;color:var( --e-global-color-text );}.elementor-5138 .elementor-element.elementor-element-884d6a3 .elementor-heading-title{font-family:"圓體", Sans-serif;font-size:30px;font-weight:600;line-height:1.5em;letter-spacing:1.2px;color:#FFFFFF;}.elementor-5138 .elementor-element.elementor-element-0c0586b{--display:flex;--position:absolute;--min-height:50px;top:31px;}body:not(.rtl) .elementor-5138 .elementor-element.elementor-element-0c0586b{left:346px;}body.rtl .elementor-5138 .elementor-element.elementor-element-0c0586b{right:346px;}.elementor-5138 .elementor-element.elementor-element-082e671{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5138 .elementor-element.elementor-element-dfb80bb > .elementor-widget-container{margin:0px 0px -10px -13px;padding:0px 0px 0px 0px;}#elementor-popup-modal-5138 .dialog-widget-content{background-color:#02010100;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-5138{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-5138 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-5138 .dialog-close-button{display:flex;background-color:#02010100;}#elementor-popup-modal-5138 .dialog-close-button i{color:var( --e-global-color-secondary );}#elementor-popup-modal-5138 .dialog-close-button svg{fill:var( --e-global-color-secondary );}#elementor-popup-modal-5138 .dialog-close-button:hover i{color:var( --e-global-color-accent );}#elementor-popup-modal-5138 .dialog-close-button:hover{background-color:#02010100;}@media(min-width:768px){.elementor-5138 .elementor-element.elementor-element-4a2b343{--width:60%;}.elementor-5138 .elementor-element.elementor-element-0c0586b{--width:40%;}.elementor-5138 .elementor-element.elementor-element-082e671{--width:450px;}}@media(max-width:1366px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}}@media(max-width:767px){.elementor-5138 .elementor-element.elementor-element-4a2b343{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-5138 .elementor-element.elementor-element-884d6a3 > .elementor-widget-container{margin:-10px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5138 .elementor-element.elementor-element-0c0586b{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;top:41px;}body:not(.rtl) .elementor-5138 .elementor-element.elementor-element-0c0586b{left:173px;}body.rtl .elementor-5138 .elementor-element.elementor-element-0c0586b{right:173px;}.elementor-5138 .elementor-element.elementor-element-dfb80bb > .elementor-widget-container{margin:0px 14px 0px -14px;}#elementor-popup-modal-5138 .dialog-message{width:300px;}}/* Start custom CSS for container, class: .elementor-element-0c0586b */.loader {
  width: 4em;
  height: 4em;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  animation: spin 3s infinite;
}

.loader::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

@keyframes spin {
  0% {
    transform: rotate(-45deg);
  }

  50% {
    transform: rotate(-360deg);
    border-radius: 50%;
  }

  100% {
    transform: rotate(-45deg);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dfb80bb */.container {
  position: relative;
  max-width: 500px;
  width: 100%;
  margin: 0 15px;
  padding: 10px 20px;
  backdrop-filter: blur(4px) saturate(100%);
    -webkit-backdrop-filter: blur(4px) saturate(100%);
    background-color: rgba(17, 25, 40, 0.6);
    border-radius: 27px;
    border: 1px solid rgba(255, 255, 255, 0.125);
}

.container .skill-box {
  width: 100%;
  margin: 25px 0;
}

.skill-box .title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgb(226, 226, 226);
}

.skill-box .skill-bar {
  height: 8px;
  width: 100%;
  border-radius: 6px;
  margin-top: 6px;
  background: rgba(236, 236, 236, 0.1);
}

.skill-bar .skill-per {
  position: relative;
  display: block;
  height: 100%;
  width: 90%;
  border-radius: 6px;
  background: rgb(226, 226, 226);
  animation: progress 0.4s ease-in-out forwards;
  opacity: 0;
}

.skill-per.html {
  /*progreso de las diferentes lenguajes*/
  width: 40%;
  animation-delay: 0.1s;
}

.skill-per.scss {
  /*progreso de las diferentes lenguajes*/
  width: 85%;
  animation-delay: 0.1s;
}

.skill-per.Boostrap {
  /*progreso de las diferentes lenguajes*/
  width: 100%;
  animation-delay: 0.2s;
}

@keyframes progress {
  0% {
    width: 0;
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.skill-per .tooltip {
  position: absolute;
  right: -14px;
  top: -28px;
  font-size: 9px;
  font-weight: 500;
  color: rgb(0, 0, 0);
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgb(226, 226, 226);
  z-index: 1;
}

.tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  height: 10px;
  width: 10px;
  z-index: -1;
  background-color: rgb(226, 226, 226);
  transform: translateX(-50%) rotate(45deg);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-da282bb */.card {
 width: 500px;
 height: 300px;
 background: rgb(40,40,55);
 background: linear-gradient(344deg, rgba(40,40,55,1) 0%, rgba(16,16,18,1) 50%);
 box-shadow: 4px 6px 14px #00000036;
 border-radius: 30px;
 color: #F9F9F9;
 padding: 16px;
 transition: all .3s;
 border: 1px solid rgb(84 90 106);
}/* End custom CSS */